html – basic web design
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
HTML – Basic Web DesignBy 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>
What are some basic tags?
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 1Heading 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:
1. Item 1
2. Item 2
