Web Development (Week 1) PDF

Introduction to Web Development Week 1 M. Shukla Over the next few weeks we will be looking at the fundamentals of web development. Modern practice is to separate content, presentation and behaviour (functionality). Typic...

Introduction to Web Development Week 1 M. Shukla Over the next few weeks we will be looking at the fundamentals of web development. Modern practice is to separate content, presentation and behaviour (functionality). Typically the way we approach this is to use HTML5 for the content, CSS3 for the presentation and JavaScript for functionality. HTML CSS JavaScript Content Presentation Behaviour Exercise 0.1 For this week’s work create a folder called Week1 on your drive of choice. Inside that make another called Ex1. Inside of Ex1 create three more folders, naming them img, script and styles. Basic HTML documents are made up of three distinct sections. First is the doctype declaration, this is the first line of any HTML document and lets the browser know that the rest of the document is an HTML file. This line does not require a closing tag – explained further. The next section of an HTML document is known as the Head section and typically contains information about the document itself. Mostly this is about how the browser should treat the following content and what if any libraries and such need to be connected to. The main part of an HTML document is the Body section. This is where most of your content is placed. HTML (Hyper Text Markup Language) is made up of ‘tags’. These tags (also sometimes referred to as elements) are typically always in pairs of an opening and closing tag. For 1  example is the opening tag of the head section. This would eventually be followed by the closing head tag thus. Therefore the shell of an HTML file would look like the following Note that there is a pair of HTML tags that top and tail the main document. As you can see tags can be nested but must be closed off sequentially. You can see in the previous code block that both the head and body tags are nested, that is to say opened and closed, within the html tag. If we were to copy and paste the html shell code into Notepad and then save the file as index.html, making sure to set the ‘Save as type’ to ‘All files’. Then double click that file, it should open in a browser as a blank page. The file index.html is commonly the home page or landing page of a website. 2 Here we should take a moment to understand directory structure. J Employment Designer Programmer Administrator VisualBasic.htm Office.htm Images.htm Templates.htm Javascript.htm Network.htm Html.htm Absolute addressing: J:/Employment/Administrator/Network.htm Relative addressing: Here our start is from Templates.htm../Administrator/Network.htm Note that.. simply means ‘go up one level’ Exercise 1.1 Hello world! Something केहि 某物 3 Open Notepad++ on your computer. From the Language dropdown menu select H and then HTML. Use the following code to create a something.html file in your Ex1 folder. Note that in the head section we are using meta tags, here they don’t need a closing tag. In this instance those are telling the browser about how to deal with the content to be displayed. We also used something called the title tag, this is text that appears in the tab at the top of your web browser. In the body section we used some paragraph tags around some words in different languages and different alphabets. Also in the previous code block notice the use of the line break tag. This is one of the few tags that don’t need a closing tag which is known as an empty tag. Many tags can be further supplemented with values in the style of: For example: Here we are saying to the browser that we want to use an image whose source name is smile.jpg and that we want to display it with a given width and height. Some example of elements are: Metadata elements Phrasing (inline) elements Flow (block) elements Note that class and id can be used in an HTML document. Class can be used by CSS and id can be used by both CSS and JavaScript. The name given to an id should always be unique. Some online resources worth study are available from: https://www.december.com/html/spec/HTML5-Cheat-Sheet.pdf https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://www.w3schools.com/tags/default.asp 4 Exercise 1.2 Create an HTML file called headings.html using the following code in the body section My Website Introduction About Me hobbies sports Conclusion Such that we end up with a webpage like: We can see from this that h1 through h6 tags have decreasing size. Some simple text tags for general purpose use. the break tag is used to start a new line. some text the paragraph tag is typically used to encapsulate text. 5 To create hyperlinks the anchor tag is required. University of Bedfordshire Here the href means hyperlink reference and is asking for the web address for the file you want to open. The text that is between the two tags is what will be displayed on screen. Sometimes developers will use # as a placeholder for the web address of the file to be pointed at e.g. Home In this case we would be able to see hyperlink text saying ‘Home’ which would be clickable but no further action would occur, this is sometimes called a null link. The anchor tag can also be used to move around longer documents. For example: Content starts here Go to top Here the first line of code would be put near the top of body section and the second line nearer the end. Exercise 1.3 Save the long.html file from Breo to your Ex1 folder. Create an index.html file that has text links to all of the other HTML files in the Ex1 folder. Note how the links at the bottom of long.html work. Embedding content allows you to include items other than text in your document. One commonly embedded type is an image