1 / 13

Into to HTML

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.

carter
Télécharger la présentation

Into to HTML

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. Into to HTML

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

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

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

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

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

  7. HTML Formatting Bold: <b> Italic: <i> Quote: <blockquote> Superscript: <sup> Subscript: <sub>

  8. 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”/>

  9. Image File Types • JPG – Photos, multiple colors • GIF – Logos, sharp edges, fewer colors, transparencies • PNG – Logos, sharp edges, fewer colors, multi-layer transparencies

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

  11. Linking an Image <a href=“http://www.website.com> <imgsrc=“filename.jpg” alt=“Image Description”/> </a>

  12. HTML Validator • http://validator.w3.org • Check website in multiple browsers

  13. Resources • W3Schools.com • YouTube Videos • Library Books • About.com • Wikipedia

More Related