130 likes | 241 Views
HTML – Basic Web Design. By Mr. Mundy November 22, 2011. What is HTML?. Hyper Text Markup Language Uses m arkup tags. What is a markup tag?. A tag defines how we see text or media on a website A tag has brackets < or > before and after the words
E N D
HTML – Basic Web Design By Mr. Mundy November 22, 2011
What is HTML? • Hyper • Text • Markup • Language • Uses markup tags
What is a markup tag? • A tag defines how we see text or media on a website • A tag has brackets < or > before and after the words • Usually, tags have opening <> and closing tags </> • Example, bold tags: • <b> </b> • <b> Elephant </b> will show up as Elephant
WWWC – W3C - ? • The World Wide Web Consortium • Professionals who say what you can or can’t do in HTML • Use lowercase letters in your tags
How do we start? • <html> </html> - describes the webpage • <title> </title> - title of webpage (visible in bar at top of browser) • <body> </body> - the visible parts of the webpage • Nested tags – tags inside other tags • What order? (see example to right) <html> <title> Title of Website </title> <body> <p> Text of the body of the website. </p> </body> </html>
Heading Tags • <h1> </h1> - Heading 1, largest • <h2> </h2> - Heading 2, still large • Headings 3-5 , decreasingly smaller • <h6> </h6> - Heading 6, smallest heading • Put the text in between the tags: <h1> Text </h2> Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Paragraph, Line Break, and Horizontal Line Tags • <p> </p> - Paragraph tags • <br /> - Line Break – no end tag, all inclusive! • <hr /> - Horizontal rule – no end tag, all inclusive! This is a paragraph. This is a paragraph. This is a line break. Below this paragraph is a horizontal rule. ______________________________
Bold, Italics, and Underline Tags • <b> </b> - bold tags • <i> </i> - italic tags • <u> </u> - underline tags (try not to use, it will look like a link!) My text is bold. My text is italicized. My text is underline.
Link Tags • Use the <a> </a> tag • However, it’s not that easy! We need to define the links: • Link to another website: Will show as: Website<a href=“www.website.com”> Website </a> • Link to another place in your webpage: Will jump to that place.<a name=“jump”> Text you want to be able to jump to. </a><a href=“#jump”> Text of link </a> Will show as Text of link. When clicked, it will jump to where “Text you want to jump to.” is in your webpage.
List Tags (Unordered and Ordered) • <ul> </ul> - Unordered (bulleted) list • <ol> </ol> - Ordered (numbered) list • Both use <li> </li> for list items <ul> <ol> <li> Item a </li> <li> Item 1 </li> <li> Item b </li> <li> Item 2 </li> </ul> </ol> Unordered List: • Item a • Item b • Item c Ordered List: • Item 1 • Item 2