5.2.3 Be able to use HTML and CSS to construct web pages Learning Objectives: 5.2.3 Be able to use HTML and CSS to construct web pages
The Importance of HTML https://www.youtube.com/watch?v=HUHeiUBQrXc
Basic Structure This is the basic structure of an HTML document: <!DOCTYPE html> <html> <head> </head> <body> </body> </html> All the information about the document is placed in the head section. All the content that can be seen on screen is placed in the body section. Complete task 12.1.
<p>This is a paragraph.</p> HTML Tags HTML documents are structured using tags. Each HTML tag describes different document content. <p>This is a paragraph.</p> The example above uses the paragraph tag. HTML tag normally come in pairs. The first tag is the start tag and the second tag is the end tag. Complete task 12.2.
Folders Create a new folder called Practice Website and inside that create another folder called Images. Practice Website Images
Change the green text to the name of your website. First Page Open Notepad++ and enter the basic HTML document structure shown below: <!DOCTYPE html> <html> <head> <title>Welcome to my website</title> </head> <body> </body> </html> Change the green text to the name of your website.
Saving Save your page as index.html in your Practice Website folder. This is the standard name for the homepage of a website. Go to your Practice Website folder and double click on the index.html file to open it. You should see the title of your webpage at the top of the browser. Complete task 12.4.
Adding a Subheading Use the h2 tag to add a subheading to your web page. <html> <head> <title>Welcome to my website</title> </head> <body> <h1>Welcome to my website</h1> <h2>It rocks!</h2> </body> </html> Save your changes and refresh the page in your browser.
Adding Paragraphs Add two paragraphs relating to the subject of your website. <body> <h1>Welcome to my website</h1> <h2>It rocks!</h2> <p>Paragraph text goes here.</p> </body> Save your changes and refresh the page in your browser.
Adding Images Find an image that you would like to add to your web page and save it in your Images folder. Use the <img> tag to add the image to your web page. <h2>It rocks!</h2> <p>Paragraph text goes here.</p> <img src=“images/filename.jpg”> </body> Save your changes and refresh the page in your browser. Complete task 12.8.
Save your changes and refresh the page in your browser. External Hyperlinks Find the URL of a website that you would like to link to and add a hyperlink to it using the <a> tag. <p>Paragraph text goes here.</p> <img src=“images/filename.jpg”> <a href="http://www.bbc.co.uk">BBC Website</a> </body> Save your changes and refresh the page in your browser. Complete task 12.7.
Adding More Pages Save a copy of your webpage and save it as page2.html in your Practice Website folder. Change the headings and content of your new page. Open your index.html web page and add a hyperlink to your page2.html web page using the format shown below: <a href=“page2.html">Click here for my second page.</a> Save your changes and refresh the page in your browser.
Lists Add a bulleted list to your page2.html webpage using this format. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Add a numbered list to your page2.html webpage using this format. <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Save your changes and refresh the page in your browser. Complete tasks 12.12 and 12.13.
Line Breaks and Rules <br> <hr> Add a link break between two lines of text in your index.html page using this tag. <br> Add a horizontal rule into your index.html page using this tag. <hr> Save your changes and refresh the page in your browser. Complete tasks 12.9 and 12.10.
Sound and Video Use this tag to insert a video into one of your web pages. <video> <source src="movie.mp4“ type="video/mp4"> </video> Use this tag to insert a sound clip into one of your web pages. <audio controls> <source src="sound.mp3“ type="audio/mpeg"> </audio> Save your changes and refresh the page in your browser. Sounds and video clips can be found in RMShared / Computing / GCSE Computer Science / HTML Practice. Complete tasks 12.14 and 12.15.
Gap Fill http://www.cambridgedigital.com/mooc/html/jan14/56_Activity1/56_Activity1.html
Homework Create a poster about HTML, it needs to include: The basic structure of an HTML document An overview the basic HTML tags: <h1> <p> <img> <a> <hr> <br> http://www.studyblue.com/