1 / 17

Understanding HTML: Structure, Tags, and Semantics Explained

Explore the essentials of HTML (Hypertext Markup Language), the cornerstone of web development. Learn about tag structures, including opening and closing tags, attributes, and the significance of semantic markup. Discover the basic document format like `<!DOCTYPE html>` and essential tags such as `<div>`, `<p>`, `<ul>`, and more. Understand the difference between block and inline elements, as well as how to properly structure forms and tables. Get insights into HTML5 and best practices for creating accessible and well-structured web content.

orlando-navaez
Télécharger la présentation

Understanding HTML: Structure, Tags, and Semantics Explained

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 Hyper-Text Markup Language or <tags> tags </tags>

  2. HTML is a “tag” language • Open and close tags • Tags identified with <> angle brackets • Basic format <tag> content </tag> <tag /> (shorthand when no content for tag) • Format with attribute(s) <tag attribute=‘value’>content</tag> <tag a1=“value” a2=“value”>content</tag> • Generally whitespace is not important • Tags names generally are important <tag> for example, doesn’t exist

  3. HTML is a markup language • Semantics: Of or relating to meaning, especially meaning in language • Semantic annotations are the GOAL <div> = division <p> = paragraph <ol> or <ul> = list, ordered or unordered <li> = list item <strong> = strong <em> = emphasis <a> = anchor (this is how links will be made) <ins> = inserted text <del> = deleted text

  4. HTML is imperfect • Non-Semantic Markup is Common and unavoidable, except by the best experts of HTML CSS and JavaScript <b> = bold <i> = italic <big> = big <u> = underline (deprecated) <font> = font (deprecated) <center> = center (deprecated)

  5. HTML is a standard • Currently on version5 <!DOCTYPE html> • Other versions exist • Examples: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • et al… • “quirks mode” is the default! • Rendering/spacing of elements will try to match old browser behavior for backward compatibility. • HTML5 form elements will not display correctly

  6. Specify HTML5 <!DOCTYPE html> • First line of document • no spaces in front • on a line by itself • DOCTYPE all caps • html all lowercase • Don’t forget the bang! • This is not a tag • No closing tag • This is not a tag • Page appearance may depend on HTML 5

  7. Basic Structure of HTML Document • html • head • title • style • …other meta data • body • h1 • …other content <html> <head> <title>Title of Page</title> <style> </style> </head> <body> <h1>Main Heading</h1> </body> </html>

  8. HTML template <!DOCTYPE html> <html> <head> <title>Page Name</title> <style></style> </head> <body> <h1>Page Heading</h1> </body> </html>

  9. Block vs Inline • Tags are defined as Block tags or inline tags • p, div, ol, ul are block • b, i, strong, em, are inline • img, a are inline

  10. Tags • h1, h2, h3, h4, h5, h6 • p • b strong • iem • u • big small • del strike s • pre • blockquote q • code ttsampkbd

  11. Tags without content • <br /> • <hr /> • <img /> • <frame /> • <input /> • <applet />

  12. Specialty Tags • object • param • table • thead • tbody • tr • td • th • input • textarea • select • Option • optgroup • script

  13. img • Basic using local and absolute url references • <imgsrc="pic.png" /> • <imgsrc="http://www.dyessick.com/images/uwa_logo.gif" /> • Specify Width and/or Height • <img width="400" height="80" src="pic.jpg" /> • <img width="80" height="200" src="pic.gif" /> • Alt text for accessability • <img alt="png" src="pic.png" /> • NOT • <imgsrc="file:///Z:/MyClasses/uwa2013Fall/cs350/HTML%20pages/pic.jpg" />

  14. A • <a href=“page.html">Page</a> • <a href=“http://dontezuma.com/page.html”>Page</a> • <a title=“tooltip” href=“page.html">Page</a> • <a href=“page.html“ target=“_blank”>Page</a> • <a href=“page.html“ target=“framename”>Page</a> • <a href=“#anchor_id“>To Anchor</a>

  15. Tables • http://www.w3schools.com/html/html_tables.asp • <table> • <tr> • <td> • <th> • Using colspanattribute on td • Using rowspanattribute on td • Using border attribute on table

  16. List • ul • ol • li

  17. HTML Entities • Entity name &entity_name; & &amp; Ampersand symbol < &lt; Less thanoperator > &gt; Greater thanoperator · &middot; Middle dot — &mdash; Em dash – &ndash En dash • Entity number &#entity_number; < &#60; Less than operator

More Related