1 / 12

HTML – Basic Web Design

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

rufus
Download Presentation

HTML – Basic Web Design

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 – Basic Web Design By Mr. Mundy November 22, 2011

  2. What is HTML? • Hyper • Text • Markup • Language • Uses markup tags

  3. 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

  4. 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

  5. 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>

  6. What are some basic tags?

  7. 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

  8. 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. ______________________________

  9. 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.

  10. 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.

  11. 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

More Related