Web Design and Development Implementation HTML part 1

Web Design and Development Implementation – HTML part 1

Learning Intention �I will learn what a web page and web site are and how web pages are created using HTML.

What is the world wide web? �A collection of multimedia information held on the internet �Information is stored on websites that often contain many web pages �Websites are stored on web servers that are connected to the internet

What is the world wide web? �Web page= a single document or �page Web site � = an effective way to split up information across multiple web pages �Each website has a Home page (or index page) that is a starting point to explore the website

HTML l HTML stands for Hyper Text Markup Language and is the main language used to create webpages l In HTML you use tags to construct and format the webpage, for example Mr Ross would put Mr Ross in bold

Tag Structure l Opening tag: <tag> l Closing tag: </tag> l Some are all in one: <tag attributes/> l Tag inside a tag (nested tags): <tag 1><tag 2>Some Text</tag 2></tag 1>

Tags for Page Structure Open Tag Close Tag What the Tag does <html> </html> Start and end of HTML file <head> </head> Start and end of the heading section <body> </body> Start and end of the content of the page <title> </title> Page title – shown in browser bar – goes inside head

Tags for Text Open Tag Close Tag What the Tag does <h. X> </h. X> Headings numbered 1 -6. 1 largest, 6 smallest. e. g. <h 2> Displays text in a paragraph

Basic web page structure Opening and closing Tells web browser html tags – the page is HTML everything else Page basedtitle goes inbetween inside the head Body contains the contents of the web page

Basic web page structure

Tags for Lists Open Tag <ol> Close Tag What the Tag does <ul> </ul> <li> </ol> Ordered list (i. e. numbered list) Unordered list (i. e. bullet point list) An item in a list

Lists <ol> <li>First item</li> <li>Second item</li> </ol> First item 2. Second item 1.

Lists <ul> <li>First item</li> <li>Second item</li> </ul> �First item �Second item

Formatting Tags Open Tag <center> Close Tag What the Tag does </center> Makes text bold " " " Underlines text Makes text italic " " " Puts text in the middle of the page. Note: These are not examined

Success Criteria �I can edit HTML to make a webpage all about me.