2. Learning HTML
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
VS.
<!DOCTYPE html>
8. Learning CSS
How do the style cascade into one?
Order of Cascade:
• Browser default
• External style sheet
• Internal style sheet (in the head section)
• Inline style (inside an HTML element)
9. Learning CSS
How to insert an external style sheet?
<link href="css/style.css" rel="stylesheet"
type="text/css" />
The Doctype must be the first declaration in an HTML document, even before the <html> tag. The Doctype is NOT an html tag; it is an instruction to the web browser about what version of HTML the page is written in.
<!DOCTYPE html> is the newest version of doctype, it stands for HTML 5
Resources:
For more details on html elements and the difference between Doctypes: http://www.w3schools.com/tags/ref_html_dtd.asp
The <!DOCTYPE> tag does not have an end tag.
The <!DOCTYPE> declaration is NOT case sensitive.
Use W3C's Validator to check that you have written a valid HTML / XHTML document: http://validator.w3.org/
Everything in the HTML DOM (Document Object Model) is a node:
The document itself (index.html or page.html) is a document node.
HTML Elements are element nodes.
Element objects can have child nodes including element nodes, text nodes, or comment nodes.
Elements can also have attributes.
HTML Attributes are attribute nodes.
Text inside HTML elements are text nodes.
Comments are comment nodes.
Basic HTML Website Example (no css):
<!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
Element
Most HTML elements require a start tag and an end tag. Only a couple of tags do not require an end tag, the break element <BR> does not require two tags.
Attributes
HTML elements can have attributes. Attributes are always specified by a start tag with a name and value. These attributes look something like name=”value”. You see an example of this in the link element ie. href=”http://linkurl.com”. These attributes are case sensitive, so keep them lowercase. These are case sensitive.
Element
Most HTML elements require a start tag and an end tag. Only a couple of tags do not require an end tag, the break element <BR> does not require two tags.
Attributes
HTML elements can have attributes. Attributes are always specified by a start tag with a name and value. These attributes look something like name=”value”. You see an example of this in the link element ie. href=”http://linkurl.com”. These attributes are case sensitive, so keep them lowercase. These are case sensitive.
Element
Most HTML elements require a start tag and an end tag. Only a couple of tags do not require an end tag, the break element <BR> does not require two tags.
Attributes
HTML elements can have attributes. Attributes are always specified by a start tag with a name and value. These attributes look something like name=”value”. You see an example of this in the link element ie. href=”http://linkurl.com”. These attributes are case sensitive, so keep them lowercase. These are case sensitive.
CSS stands for Cascading Style Sheets. CSS defines how to display HTML elements. External Style Sheets can save a lot of work by making a list of styles for multiple pages, whereas inline styles only work on the page or element they are defined on. External style sheets are stored as CSS files.
External
Internal
Inline
CSS stands for Cascading Style Sheets. CSS defines how to display HTML elements. External Style Sheets can save a lot of work by making a list of styles for multiple pages, whereas inline styles only work on the page or element they are defined on. External style sheets are stored as CSS files.
External
Internal
Inline
CSS stands for Cascading Style Sheets. CSS defines how to display HTML elements. External Style Sheets can save a lot of work by making a list of styles for multiple pages, whereas inline styles only work on the page or element they are defined on. External style sheets are stored as CSS files.
External
Internal
Inline
