HTML HyperText Markup Language or tags tags tags

HTML is a “tag” language • Open and close tags • Tags identified with

HTML is a markup language • Semantics: Of or relating to meaning, especially meaning

HTML is imperfect • Non-Semantic Markup is Common and unavoidable, except by the best

HTML is a standard • Currently on version 5 <!DOCTYPE html> • Other versions

Specify HTML 5 <!DOCTYPE html> – First line of document • no spaces in

Basic Structure of HTML Document • html – head • title • style •

HTML template <!DOCTYPE html> <head> <title>Page Name</title> <style></style> </head> <body> <h 1>Page Heading</h 1>

Block vs Inline • • Tags are defined as Block tags or inline tags

Tags without content • • • <hr /> <img /> <frame /> <input />

Specialty Tags • object – param • table – – – thead tbody tr

img • Basic using local and absolute url references – <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="pic. png" />

A • • • <a href=“page. html">Page</a> <a href=“http: //dontezuma. com/page. html”>Page</a> <a title=“tooltip”

Tables • • http: //www. w 3 schools. com/html_tables. asp <table> <tr> <td> <th>

HTML Entities • Entity name &entity_name; & < > · — – & <

Slides: 17

Download presentation

HTML Hyper-Text Markup Language or <tags> tags </tags>

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 a 1=“value” a 2=“value”>content</tag> • Generally whitespace is not important • Tags names generally are important <tag> for example, doesn’t exist

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

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

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

Specify HTML 5 <!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

Basic Structure of HTML Document • html – head • title • style • …other meta data – body • h 1 • …other content <html> <head> <title>Title of Page</title> <style> </head> <body> <h 1>Main Heading</h 1> </body> </html>

HTML template <!DOCTYPE html> <head> <title>Page Name</title> <style></style> </head> <body> <h 1>Page Heading</h 1> </body> </html>

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

Tags • • • h 1, h 2, h 3, h 4, h 5, h 6 p b strong i em u big small del strike s pre blockquote q code tt samp kbd

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

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

img • Basic using local and absolute url references – <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="pic. png" />

img • Basic using local and absolute url references – <img src="pic. png" /> – <img src="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 – <img src="file: ///Z: /My. Classes/uwa 2013 Fall/cs 350/HTML%20 pages/pic. jpg" />

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>

Tables • • http: //www. w 3 schools. com/html_tables. asp <table> <tr> <td> <th> Using colspan attribute on td Using rowspan attribute on td Using border attribute on table

List • ul • ol • li

HTML Entities • Entity name &entity_name; & < > · — – & < > · — &ndash • Entity number Ampersand symbol Less than operator Greater than operator Middle dot Em dash En dash &#entity_number; < < Less than operator