Formatting your web page

2,150 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,150
On SlideShare
0
From Embeds
0
Number of Embeds
1,486
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Formatting your web page

  1. 1. Formatting your Web Page
  2. 2. Starter Activity: Format of a HTML page What will you see if you viewed this page? What do each of the tags do? What should go between each of the tags? Formatting your Web Page </head> <body> </body> </html> <html> <head> </head> <body> </body> </html>
  3. 3. In this lesson you will learn how to add headings, paragraphs and line breaks using html. You will add paragraphs of text, headings and a list of attractions to your zoo homepage. Lesson Objectives  Be able to create paragraphs on a web page  Be able to create line breaks on a web page  Be able to add headings on a web page  Understand how to create a list on a web page Formatting your Web Page
  4. 4. Adding Headings Web pages are made up of more than just plain words on a screen. There are headlines, paragraphs, graphics, colors and much more. There are six levels of headlines, ranging from <h1>…</h1> to <h6>… </h6>. Here is an example of the code for some of the headline sizes: <h1>Level 1 Headline</h1> <h3>Level 3 Headline</h3> <h6>Level 6 Headline</h6> Formatting your Web Page
  5. 5. Task 5: Adding a Heading to your Web page Load the text editor and open your HTML document: firstpage.html Add the <h1> tag to the words "Hello world." as shown in red. <html> <head> <title>This is my first web page.</title> </head> <body> <h1>Hello world.</h1> This is my first web page. There's more to come. </body> </html> Save the document and then preview your work. Formatting your Web Page
  6. 6. Your web page should look like this in your browser. Formatting your Web Page
  7. 7. Paragraphs & Line Breaks To add space between paragraphs you use the paragraph tag: <p>…</p> This is a container tag and must have a beginning and an ending. To add a single line of space, you use break tag: <br> This is an empty tag and stands alone. You can use the <br> tag to insert one or more blank lines. Formatting your Web Page
  8. 8. Task 6: Adding Paragraphs & Line Breaks Load the text editor and open your HTML document: firstpage.html At the relevant point add the tags and text that appear in red. <h1>Hello world.</h1> This is my first web page. There's more to come. <p> I am learning how to use the headline, paragraph and line break tags. Writing HTML isn't as hard as it appears. </p> <p>Here's a list of items I like about school:<br> Science<br> Reading<br> But most of all dinner time!<br> </p> </body> Save the document and then preview your work. Formatting your Web Page
  9. 9. Your web page should look like this in your browser. Formatting your Web Page
  10. 10. Task 7: Zoo Homepage 1.Load the text editor and open your HTML document: zoohomepage.html 2.Add the name of the zoo as a main heading 3.Add at least two paragraphs of text about why you should visit the zoo 4.Add an appropriate sub heading for each of the paragraphs 5.Create a list of all the attractions and facilities at the zoo 6.Save the document and then preview your work Formatting your Web Page
  11. 11. Plenary: Test your Partner Write three questions to test what your elbow partner has learnt today. When ready, ask each other your questions. Formatting your Web Page
  12. 12. Keywords  Be able to create paragraphs on a web page  Be able to create line breaks on a web page  Be able to add headings on a web page  Understand how to create a list on a web page Objectives  Headings <h.>  Paragraphs <p>  Line Breaks <br>  Tag  Empty Tag  HTML     Formatting your Web Page

×