130 likes | 290 Views
Into to HTML. HTML. A language The basic structure of websites Each HTML file is a webpage W ritten in lowercase Made from Elements, Tags, Attributes, Content Most elements include an opening and closing tag Sandwich or nest elements. Vocab.
E N D
HTML • A language • The basic structure of websites • Each HTML file is a webpage • Written in lowercase • Made from Elements, Tags, Attributes, Content • Most elements include an opening and closing tag • Sandwich or nest elements
Vocab • Elements – Define the HTML document<p>content</p> • Tags – State kind of element<p> • Attributes – Provide information about an elementname=“value” or <p style=“”> • Content – Text, Images, Videos <tag attribute_name=“value”>content</tag>
HTML Page Structure • DocType– Tells browser what version of HTML is being used • Open HTML • Head – Contains important behind the scenes info • Body – Contain the main content of the webpage • Close HTML
HTML Page Structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" ><html><head></head><body></body></html>
Common HTML Tags Paragraph: <p>Headings: <h1><h2><h3><h4><h5><h6>Horizontal Rule: <hr>Division: <div> Line Break: <br />Comments: <!-- comments --> Images: <img /> Links: <a> List:<ol><ul><li> Tables:<table> <tr> <td>
HTML Formatting Bold: <b> Italic: <i> Quote: <blockquote> Superscript: <sup> Subscript: <sub>
Images <imgsrc=“url” alt=“description”> • Local ImagesHTML & image are in the same folder<imgsrc=”image_name.jpg”/>Image located in another folder<imgsrc="/folder1/folder2/image.jpg”/> • External Images<imgsrc=“http://www.website.com/imagename.jpg”/>
Image File Types • JPG – Photos, multiple colors • GIF – Logos, sharp edges, fewer colors, transparencies • PNG – Logos, sharp edges, fewer colors, multi-layer transparencies
Links <a href=“url”>content</a> • Absolute link <a href="http://www.website.com">Content</a> • Relative/local link <a href="index.html">Content</a><a href="products/index.html">Content</a> • Email Link <a href=“mailto:myemail@address.com”>Email Me!</a>
Linking an Image <a href=“http://www.website.com> <imgsrc=“filename.jpg” alt=“Image Description”/> </a>
HTML Validator • http://validator.w3.org • Check website in multiple browsers
Resources • W3Schools.com • YouTube Videos • Library Books • About.com • Wikipedia