1 / 36

HTML

HTML. Heading elements Text elements. Basic Document Tags. View in the Browser. <body> </body> Tags. Remember: things that appear on web pages are enclosed between the opening and closing body tags

tranquilla-flemate
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML • Heading elements • Text elements

  2. Basic Document Tags

  3. View in the Browser

  4. <body> </body> Tags • Remember: things that appear on web pages are enclosed between the opening and closing body tags • The body tags also contain all the other HTML tags which affect how web pages are presented

  5. Everything that is seen on web pages is found between <body> </body> tags

  6. View in the Browser

  7. Heading elements • Let’s make the web page a little more eye catching by using the heading tags: <h1></h1> • Remember: things which appear on web pages are enclosed between the opening and closing body tags • <body><h1>LearningHTML</h1></body>

  8. Heading elements • The number 1 beside the letter hindicates that it is a level 1 heading (or top - level heading) • There are also tags for subheadings ( < h2 > , < h3 > , < h4 > , < h5 > , and < h6 > ) • Any number from 1 to 6 can be used, 1 makes the largest heading, and 6 makes the smallest • Use HTML headings for headings only. Don't use headings to make text BIG or bold.

  9. Heading elements

  10. Note:  Browsers automatically add some empty space (an open line) above and below each heading.

  11. Open mypage.html and Replace

  12. With:

  13. In Notepad this is what it should look like:

  14. Open your web page and this is what it should look like:

  15. Try the other h numbers to see how they compare. You can only go as far as h6 <html> <head> <title>My First Webpage</title> </head> <body> <h2>Learning HTML</h2> <h3>Learning HTML</h3> <h4>Learning HTML</h4> <h5>Learning HTML</h5> <h6>Learning HTML</h6> </body> </html>

  16. In Notepad

  17. Open in the browser and this is what it should look like:

  18. Delete all other heading except h1

  19. Add: Look Ma, I'm making a webpage! <html><head> <title>My First Webpage</title> </head><body> <h1>Learning HTML</h1> Look Ma, I'm making a webpage! </body> </html>

  20. In Notepad this is what it should look like. Remember to Save and Refresh

  21. Launch in your browser and this is what it should look like:

  22. Heading elements • Heading tags belong to what are called “block” tags • “Block” tags don’t allow any outside text to line up beside them • See how the text outside the h1 tags is on a separate line • This is what block tags do, they force the text they don’t enclose to be on a separate line

  23. Text elements • <p> ,<br> and <hr>are basic text elements • The p in <p> is short for "paragraph" which is exactly what it is - a text paragraph • You have to use the p tags whenever you want to start a new paragraph. • Each paragraph of text should go in between an opening < p > and closing < /p > tag • When a browser displays a paragraph, it usually inserts a new line before the next paragraph and adds a little bit of extra vertical space

  24. Note: Browsers automatically add an empty line before and after a paragraph

  25. HTML Line Breaks • Hitting the “Enter” key has no effect on web pages • To start a new line without starting a new paragraph the br tag is needed: <br /> • Whenever you use the < br / > element, anything following it starts on the next line

  26. HTML Line Breaks • The brtag is one of the few HTML tags which does not have a corresponding closing tag. • These kind of tags are called “single” or “empty” tags – they self close at the other end of the tag with a slash, e.g. <br /> • Notice the space between br and the /

  27. HTML Line Breaks

  28. HTML Line Breaks • Here is an example of how the br tag can be used in a paragraph: • <p>Look Ma,<br />I’m making a webpage!</p> • The result would look like this: • Look Ma,I’m making a webpage!

  29. In Notepad this is what it should look like:

  30. Launch in the browser and this is what it should look like:

  31. Horizontal Line The <hr /> tag creates a horizontal line in an HTML page. The hr element can be used to separate content

  32. Example

  33. Horizontal Line

  34. Horizontal Line

  35. Important Note • The text between <html> and </html> describes the whole web page • The head tag doesn't have any effect on what appears on the web page, it's job is to hold certain other types of tags, one being the title tag: • The text between <title> and </title> is where the title of a web page is entered. It is displayed on the title bar of the Browser E.g.: <title> My First Webpage </title> • The text between <body> and </body> is the visible page content. It contains all the other tags that control and format the document

  36. Important Note • The text between <h1> and </h1> is displayed as a heading • The text between <p> and </p> is displayed as a paragraph • Use the <br /> tag if you want a line break (a new line) without starting a new paragraph • The <hr /> tag creates a horizontal line in an HTML page.

More Related