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 Web site = a single document or page = 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 HTML stands for Hyper Text Markup Language and is the main language used to create webpages In HTML you use tags to construct and format the webpage, for example <b> Mr Ross </b> would put Mr Ross in bold
Tag Structure Opening tag: <tag> Closing tag: </tag> Some are all in one: <tag attributes/> Tag inside a tag (nested tags): <tag1><tag2>Some Text</tag2></tag1>
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 <hX> Headings numbered 1-6. 1 largest, 6 smallest. e.g. <h2> <p> </p> Displays text in a paragraph
Basic web page structure Opening and closing html tags – everything else goes inbetween Tells web browser the page is HTML based Page title goes inside the head Body contains the contents of the web page
Basic web page structure
Tags for Lists Open Tag Close Tag What the Tag does <ol> Ordered list (i.e. numbered list) <ul> </ul> Unordered list (i.e. bullet point list) <li> </li> An item in a list
Lists <ol> <li>First item</li> <li>Second item</li> </ol> First item Second item
Lists <ul> <li>First item</li> <li>Second item</li> </ul> First item Second item
Puts text in the middle of the page. Formatting Tags Open Tag Close Tag What the Tag does <b> </b> Makes text bold <strong> </strong> " " " <u> </u> Underlines text <i> </i> Makes text italic <em> </em> " " " <center> </center> 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.