introduction to the codeshinybytes.com/685/content/html-codea.pdf · html – introduction to the...
TRANSCRIPT
1
HTML –Introduction to the Code
WEB PAGEA plain text document (no specific software needed)
HTML Tags - describes a documents structure Saved with .htm or .html extensionHosted on a server
HTML: Hypertext Markup Language
Simple, universal mark‐up language used to publish content on the webStandard mark‐up language for web pages
Uses tags to identify content : <p> I am a paragraph </p>
HTML: basic structure
Enhanced & Modified by other technologiesCSS: presentation, formatting, layout
JavaScript: control behavior of page elements
PHP: powerful applications/functionality (backend)
CMS: manage site content
2
HTML Elements (container tags – markup + content)Empty Tags (standalone)
HTMLHTML Markup Element
HTML Tags placed in angle brackets <>
Consist of two tags: Opening tag | Closing tag (“on” & “off”)
End tag begins with a slash ( / )
HTML
Empty Tag (Standalone)
Do not have text content
Places an element on the page (provides a directive)
Indicated by single tag
XHTML note: all standalone tags require closing tag (ex: <br> now <br />)
3
HTMLAttributes: Information or instructions that modify a tag
Attributes use values
Located in the opening tag
One tag can have multiple attributes
HTMLBasic HTML Structure
1) <!DOCTYPE html>identifies the document as an HTML document
2) <html>…</html> (root element)
First and last tag in a document
3) <head>…</head>
Includes descriptive info about your document | Non visual elements (metatags, links to external resources, scripts or internal resources)
4) <meta charset= “utf‐8”>
character encoding
5) <title>…</title>
Name of page (bookmarks, browser indexing)
6) <body>…</body>
Contains visual & structural elements (visible on page)
4
HTML4.01|XHTML1.1|HTML5|HTML??
the many flavors of HTML….
HTML Versions
Many versions of HTML
Tim Berners‐Lee
Simple, text‐only browsing & authoring system to share and manage information
using the hypertext process to link to related documents
Handful of tags
Web content grew (Browsers made a mess of things)
Browser developers implemented new features and new tags into their browsers
HTML continued to grow – new, cool, exciting tags (<background>, <font>, <bgsound>,
<blink>, <image>)
Each browser created its own proprietary tags – only supported by that particular platform
W3C stepped in to help (http://www.w3.org/)
Oversees ongoing development of the web
Keeps track of browser features
Help develop guidelines for common HTML language (HTML 3.2 ‐ 1996)
(versions:http://www.utoronto.ca/webdocs/HTMLdocs/HTML_Spec/html.html)
HTML VersionsHTML tags - informal CERN document listing 12 tags (1991)
HTML 2.0 ‐ specification released in 1995HTML 3.2 ‐ first version developed and standardized exclusively by the W3C (1996)
HTML 4.0 ‐ published as W3C recommendation (1997)
HTML 4.01 ‐ published as W3C recommendation (1999)
XHTML 1.0 ‐ published as W3C recommendation (2000) More structure less presentation (XML based approach)
XHTML 1.1 ‐ published as W3C recommendation (2001)
XHTML 2.0 ‐ NO STANDARD (2002‐2009) worked on but abandoned –not backward compliant (new language)
HTML 5 – WHATWG (Web Hypertext Application Tech Working Group) (2004) W3C adopts the work of this group under name HTML 5.0 (2006) Working Draft (2007)
5
DOCUMENT TYPE DEFINITION1. Transitional: maintains backward
compatibility with older browsers includes legacy elements – obsolete (deprecated) elements (includes presentation elements that were in common use)
2. Strict: doesn’t allow any HTML elements that were designed to control the appearance of a page. (omits all deprecated elements)
3. Frameset: allows HTML elements needed to create framesets.
Great explanation can be found at: Child, D. (2004) DTDs Explained, Added Bytes Available: http://www.addedbytes.com/html/dtds‐explained/
Niederst, J. (2012) Learning Web Design. O’Reilly Media, Inc. Chapter 10: What's Up, HTML5
ValidatorsChecks the markup to see if its following the rules specified in the DOCTYPE declaration.
HTML 5 Timeline2003 – HTML 5 development begins
2007 Oct - First W3C Working Draft
2009 Oct – Last Call Working Draft
2011 – Call for contributions for the test suite
2012 – First draft of test suite
2015 – Second draft of test suite
2019 – Final version of test suite
2020 – Reissued last call working draft
2022 – Proposed Recommendation
Ian Hickson, editor of HTML 5 Specification (Tech Republic Interview 2008)
Can you use it now? – Yes, many parts of HTML 5 supportedUser agents (devices & browsers) provide some support now
Entire specification not yet ready for adoption – but many parts are ready to use now
Support Resources : http://findmebyip.com | http://samples.msdn.microsoft.com/ietestcenter/ | http://canisue.com |http://html5test.com
HTML 5 vs HTML 4
Differences No Doctype needed <!DOCTYPE HTML>
Character Encoding: <meta charset=“UTF-8” />
New Elements: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, ruby, section, source, summary, time, video
Forms: more powerful form elements(built in validation)
Integrated APIs (Application Programming Interfaces): Easier to develop web applications across multiple devices.(API = a documented set of commands, data names – lets one software app communicate with another)
6
1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2. <html xmlns=“http://www.w3.org/1999/xhtml”>
3. <head>
4. <title>Title of Document</title>
5. </head>
6. <body>
This is where the content of your page will be placed.
7. </body>
8. </html>
Back to the Code
HTML Common Elements
Block & Inline Elements
Block Elements Ex: <p /> <h1>…</h1>Each block element begins a new lineHave space above and below the element by default
<h1> This is the most important heading </h1>
<p> This is a paragraph </p>
Inline Elements Ex: <em>…</em>Flow within other elements (do not start new line)
<p> This is a paragraph with <em> emphasized text </em> within (inline) the paragraph element </p>
HTML
Block Level Elements
Paragraphs <p>…</p>
Headings <h#>…</h#> (six levels of headings)provides logical hierarchyimproves accessibility
Block quote <blockquote>…</blockquote>
Preformatted text <pre>…</pre>preserves white spaces – returns and character spacesMay be needed to convey meaning (code, poetry)
Horizontal Rules <hr />
7
HTML
Block Level Elements
Unordered Lists <ul>…</ul> & <li>…</li>Default is disc change type: <ul type=“circle”>, “square”
Ordered Lists <ol>…</ol> & <li>…</li>Default is #’s change type: <ol type=“A”> “a”, “I”, “i”
Definition Lists <dl>…</dl> & <dt>…</dt> & <dd>…</dd>
Note: Changing type and start value not supported in “strict” versions of XHTML
http://www.w3schools.com/html/html_lists.asp
HTML
Inline Elements
Line Breaks <br />
Semantic inline text elements
Describes the meaning of the text
Examples: <em>for emphasis, <strong> strongly emphasized, <q> short inline quote
Presentational inline text elements
provides descriptions of the elements styleExamples: <b> keywords or visually emphasized text (bold) Ex: product name, <i> Alternative voice (italics) Ex: phrase, technical term, thought
(please use: <strong> & <em> instead)
HTML
Special Characters
Must use numeric or named character reference
Examples
Character space ( )
& Ampersand (&)
© Copyright symbol (©)
Euro (€)
8
Meaningful Markup
Semantic Markup
•Semantic Markup uses tags or elements that describe the content by its function. •Adds meaning for the machine
Browsers, mobile devices, screen readers, search engines can not “see” the page… they extract meaning and context from the markup.
<h1>This is the most important headline</h1><p>This is ordinary paragraph text within the body of the document, where certainwords and phrases may be <em>emphasized</em> to mark them as<strong>particularly important</strong>.</p><h2>This is a headline of secondary importance to the headline above</h2><p>Any time you list related things, the items should be marked up in the form of a list:</p><ul><li>A list signals that a group of items are conceptually related to each other</li><li>Lists may be ordered (numbered or alphabetic) or unordered (bulleted items)</li><li>Lists may also be menus or lists of links for navigation </li><li>Cascading Style Sheets can make lists look many different ways</li></ul>
Meaningful Markup – No Presentation Info
Browsers, mobile devices, screen readers, search engines can not “see” the page… they extract meaning and context from the markup.
The Site Development Processhttp://webstyleguide.com
HTML
Images
img tag <img>
Required attribute: src
<img src=“uwm_logo.gif” alt=“UWM Logo” />
http://www.w3schools.com/html/html_images.asp
9
HYPERTEXT – it’s a web… things are linked…
HTML
Links
The anchor <a>…</a>
Required attribute: href
<a href=http://www.uwm.edu> Link to UWM </a><a href=http://www.uwm.edu><img src=“uwm_logo.gif”/>UWM</a>
Site Directory and File Structure
•Often mirrors visible site structure
•Logical naming conventions – plain language
•Creates useful/understandable URLs
6,100 Files
250 Folders
10
Hypertext – Absolute & Relative Links
Absolute Links
<a href=“http://www.uwm.edu”> UW‐Milwaukee </a>also called an external link
Relative Links
<a href=“admissions.html”> Link to admissions page </a>
Relative links do not require the protocol and domain name
These links are “related” to the current page (The page you want to link to is within the same domain as the document you are linking from)
If you were working on your about.html document and you wanted to create a link to your index.html document, your link would look like this:
<a href=“index.html”> HOME </a>
If you were working on your index.html document and you wanted to create a link to your advising.html document, your link would look like this:
<a href=“academics/advising.html”> Advising</a>
11
If you were working on your root level (main) index.html document and you wanted to create a link to your comps.html document, you link would look like this:
<a href=“academics/graduate/comps.html”> Comps </a>
Index??
Significance of “index”
Usually the default filename a browser will look for if no filename is provide.
http://www.sois.uwm.edu/EPub/Spring_2012
retrieving a file called “index.html” in the Spring_2012 folder
If you were working on your mlis.html document and you wanted to create a link to your advising.html document, your link would look like this:
<a href=“../advising.html”> Advising</a>
12
<a href=“../../index.html”>Back to Home</a>
CSS –Presentation of Information
<h1>This is the most important headline</h1><p>This is ordinary paragraph text within the body of the document, where certainwords and phrases may be <em>emphasized</em> to mark them as<strong>particularly important</strong>.</p><h2>This is a headline of secondary importance to the headline above</h2><p>Any time you list related things, the items should be marked up in the form of a list:</p><ul><li>A list signals that a group of items are conceptually related to each other</li><li>Lists may be ordered (numbered or alphabetic) or unordered (bulleted items)</li><li>Lists may also be menus or lists of links for navigation </li><li>Cascading Style Sheets can make lists look many different ways</li></ul>
Meaningful Markup – No Presentation Info
Browsers, mobile devices, screen readers, search engines can not “see” the page… they extract meaning and context from the markup.
The Site Development Processhttp://webstyleguide.com
13
Presentation handled by CSS
CSS – Cascading Style SheetsA style‐sheet language developed to control the presentation of HTML documents
Allows for the separates the presentation (formatting) from the structure and content of the page.
Structure = the content (headings, lists, paragraphs) Presentation = how the structure looks visually in the user agent (red, bold, verdana)
CSS – used to format the presentation of the contentfonts, colors, layout
Benefits of CSS
Offers more control
•Offers more control•One CSS file can control thousands of pages (more efficient)
•More control over formatting•Precise formatting: Line spacing, type sizes, rollovers, layout
•Modular design ‐ same site content and structure can be style for different output devices
•Media types: Screen(browsers), mobile devices, print, screen reader
•Smaller files / Faster download•No redundant formatting tags
Example of CSS
Separate language with its own syntax
1. Selectors: Selects the element to be affected
2. Declaration: “declares” a style for a selected element
Declaration block: property & value
14
Example of CSS
Declaration block
Property: identifies what to change
Value: how to change it
Selector – example
h1{
font‐size: small;
font‐family: Georgia, ‘Times New Roman’, Times, serif;
color: #CC3300;
margin‐top: 4em;
margin‐bottom: 10em;
}