1 / 15

HTML Tag Mark-Up

HTML Tag Mark-Up. How Tags are used to form your Web Page. <html> What is HTML? </html>. HTML stands for H yper T ext M ark-up L anguage It is the basic set of rules that web browsers use to interpret and display internet documents. Tag Mark-up Sheet. Tags.

kylee
Download Presentation

HTML Tag Mark-Up

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 Tag Mark-Up How Tags are used to form your Web Page

  2. <html> What is HTML? </html> • HTML stands for Hyper Text Mark-up Language • It is the basic set of rules that web browsers use to interpret and display internet documents Tag Mark-up Sheet

  3. Tags • Tags mark the beginning and end of a particular element. • They (almost) always <b>bracket</b> the element <html> <head> <title> Mark-Up Assignment </title> </head> <body> Here is the BODY</body> </html>

  4. Elements • Elements are parts of the document that are distinguished by tags <html> <head> <title> Mark-Up Assignment</title> </head> <body> Here is the BODY</body> </html> • Closed Elemets have a beginning and end • Everything between them is called the “content” of the element

  5. <head> Elements </head> • Web Pages are made up of “elements” – or distinct parts • The Head • Can hold lots of non-display information • The Title isNOT displayed on the page, the title appears at the top of the window, in the colored bar

  6. <body> The Body </body> • This is where most of the page is • It can include • Tables • Lists • Quotes • Pictures • Just about anything else See it

  7. <h1> Heading One <h2> Heading Two <h3> Heading Three <h4> Heading Four <h5> Heading Five <h6> Heading Six Headings are not numbered as they go down the page The <h1> through <h6> tags refer to the size of the heading Any Heading tag can be used anywhere on the page <h1> Heading Sizes </h1>

  8. <p> Paragraphs </p> • Paragraphs are separated by space from what comes before and after • They are not, by default, indented <p>Here is some interesting information about this.</p> <p>On the other hand, there is this information here.</p> Here is some interesting information about this. On the other hand, there is this information here.

  9. Spaces and Returns • HTML only recognizes ONE space between each word • The <p> tag will separate with a space • The <br /> tag gives a “hard return” What you type: Roses are red Violets are blue My feet stink And so do you What you see: Roses are red Violets are blue My feet stink And so do you

  10. Spaces and Returns • HTML only recognizes ONE space between each word • The <p> tag will separate with a space • The <br /> tag gives a “hard return” What you type: <p> Roses are red <br /> Violets are blue </p> <p> My feet stink <br /> And so do you </p> What you see: Roses are red Violets are blue My feet stink And so do you

  11. <ul> Un-Ordered List </ul> • These are Bulleted lists • The list begins with <ul> • It ends with </ul> • They don’t have a particular sequence • <li> each thing in the list gets list item tags </li> What you type: <ul> <li> Make paragraphs </li> <li> Use tables that may or may not have borders </li> <li> Make links </li> <li> Insert pictures </li> </ul> What you see: • Make paragraphs • Use tables that may or may not have borders • Make links • Instert pictures

  12. <ol> stands for Ordered List Signal the end of the list </ol> Each element still gets the <li> & </li> tags. The browser adds the numbers (or letters or Roman numerals) Come to class on time Get out your materials for class Be ready to participate Raise your hand if you have a comment or question <ol> Ordered Lists </ol> What you type: <ol> <li> Come to class on time</li> <li> Get out your materials for class</li> <li> Be ready to participate</li> <li> Raise your hand if you have a comment or question</li> </ol> What you see: See it

  13. <b><u><i> Other Formats </i></u></b> <body> <b>This is Bold </b> <i> This is Italicized </i> <u> This is Underlined </u> </body> What you type: What you see: This is Bold This is Italicized This is Underlined See it

  14. “Open Elements” • Open Elements are tags that do not have any content following them or within an opening and end tag. • <br> • <hr> • <img> • In future browsers, all Elements must be “closed” • <br /> • <hr /> Here is a line. HTML calls it a “header row” <hr> <br> There will be a space before this Here is a line. HTML calls it a “header row” There will be a space before this

  15. What you need to do: • Fill in all the tags that are indicated on the Tag Mark-Up handout. • Go to a computer and create your own “Basic Page” using the exact text presented in the folders at the computer. • Save the Basic Page into your File Folder • Each person must create their own, individual, Basic Page

More Related