html, xhtml, css, & javascript ~ an introduction ~
TRANSCRIPT
HTML, XHTML, CSS, & JAVAScript~ an introduction ~
HTML(hyper text mark up language)Created by Tim Berners-LeeFirst time he used it was
Christmas 1990Publically introduced HTML in
1991HTML totally adopted in 1993HTML caught on by 1995 world
wide and companies like Yahoo and Amazon.com were created!
Flavors of HTMLHTML 4 has three versions
◦HTML 4.01 Traditional Encourages designers to move from the
heavy coding of earlier forms of HTML and begin using CSS for formatting
◦HTML 4.01 Strict Requires that only structure based code be
used with all formatting handled by CSS
◦HTML 4.01 Frameset Allows developers to create pages that
utilize frames for page layout
HTML elements and tagsHTML made up of elements
◦Elements describe to the browser how text should be treated
◦Elements are expressed in HTML as tags
◦ < > this is a tag
◦Directions are given in between the brackets <html>
HTML AttributesAttributes tell the browser
specifics and act as additional information
Attributes come after the < but are finished before the >
Attributes are never repeated in a closing tag
HTML Container TagsContainer tags use an opening
tag, that has the element in the tag and a corresponding closing tag◦A closing tag has a / before the
element◦<strong>some text to be
bold</strong>
HTML Empty TagsAct as instructions to the browser
Do not contain content
No matching closing tag is necessary
HTML Syntax RulesCase insensitive
◦Upper or lowercase does not matter◦Be consistent◦Majority of web designers write in lowercase
Whitespace insensitive◦ In tags the element must immediately follow
the opening angle bracket◦you can put as much space or returns with out
effecting the display of the page in the browser
Within the attribute you can use ‘ or “◦Be consistent
XHTML(Extensible HTML)Evolved from XML (extensible markup
language) which was a language that allowed developers to create documents that focused on the data on the page, not how it would be displayed
W3C developed XHTML to eventually replace HTML 4.01 and used the same set of “flavors”◦Transitional, strict, frameset◦Requires that pages are written in a stricter
XML syntax
XHTML Syntax RulesCase sensitive ….MUST BE
LOWERCASEAttribute values must be quoted…’ or “All attributes must have valuesTags must be properly nestedClosing tags are required
The only syntax rule that is the same between HTML and XHTML is that both are whitespace insensitive
To make your XHTML code valid…Must begin document with a
document type declaration◦This informs the browser which
“flavor” you will be using to write your code
◦Some times called DOCTYPES◦Looks complex, but will be exactly
the same on every document that uses that type sooo…copy and paste
DOCTYPE Examples XHTML transitional DOCTYPE
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
>
DOCTYPE Examples XHTML strict DOCTYPE
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
>
DOCTYPE Examples XHTML frameset DOCTYPE
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset //EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
>
Declaring the XHTML namespaceTechnically written in XML so must define
the XHTML namespaceTechnical and not totally necessary to
fully understand itWill be the same on all your documents,
regardless of the DOCTYPE you are usingIt is an added attribute to the first tag in
your page which is the <html> tag
<html xmlns=“ http://www.w3.org/1999/xhtml>
Advantages of XHTMLCan validate XHTML for free using on line resources
◦ Browsers will not throw out any errors will just try to understand your code as best they can and still show page
◦ By declaring the flavor with the DOCTYPE you can check your code with a validator
Requires you write better, cleaner code making it easier to edit and maintain later
“Future proof”..by declaring the language you are using from the beginning browsers in the future will be able to correctly render your pages
By writing in XHTML Strict you can separate the content of your pages (the XHTML and the CSS)…which means more flexibility.
CSSDeveloped in effort to provide
more robust formatting language for the web.
Can be used with any web page and any DOCTYPE
Created in 1996Introduced text formatting,
indents, spacing, alignment, padding, borders
CSS Browser SupportCurrent version is CSS 2.0 and
almost all browsers support CSSSome browsers may not
implement the CSS exactly to the standards so some pages may render differently
BASIC CSS SYNTAXCSS relies on a different syntax
then XHTMLInstead of elements and tags,
CSS uses rules◦Made up of a selector and
declarations
BASIC CSS SYNTAXThe selector is a reference to the
portion of the XHTML document that should be formatted◦Can be XHTML element or a special
CSS selector such as an ID or class.
BASIC CSS SYNTAXDeclarations are made up of property
values pairs.Each property is separated by its
value by a colon, and each declaration is separated from the next by a semicolon. All of the declaration is enclosed in curly braces.
p {color: #ff0000; font-weight:bold;}
BASIC CSS SYNTAXCSS selectors are case sensitiveDeclarations are case insensitiveCSS is white space insensitive
Properties that contain more than one word, like font-weight, separate the words with hyphens.
If a property value needs more than one word, like with TNR for a font, the values need to be in quotation marks.
Inheritance….XHTML docs are made up of nested sets
of elements which creates a parent-child relationship.
Many – BUT NOT ALL, CSS properties inherit from parent-to-child elements.
So, if you have a paragraph that has a span, the span will inherit most of the parent’s properties, especially those referring to test and font styles.
CSS AdvantagesProvides many formatting options
not available in HTMLPages that use CSS load and
render more quicklyYou can reformat an entire siteYou can repurpose your site with
out rewriting it
What the ‘cascade’ meansIf you have more than one style rule
applied to the same element on your page it gets fixed by using the cascade
Style rules closer to the element in question take precedence over those farther away.
More specific rules override less specific rules◦So an ID selector that targets one specific
element will take precedence over a general element
To depict the cascade….
p {color:#999999; font-weight:bold; }
p#heading {color:#000099; }
This means a paragraph with an ID of heading would be dark blue (000099) from the more specific p#heading rule but would also be bold because the more specific font weight property coming before.
Linking and Importing CSSKeep your style sheet info in a
separate document◦Separates content from presentation◦Can apply same style sheet to
multiple pages Create one design for your entire web
site
Two ways to attach CSS style sheet◦Link (most common)◦@import
Attaching CSS
<link rel=“stylesheet” type=“text/css” href=“path_to_css_document” />
• All 3 attributes are required
Value of rel attribute is almost always stylesheet
Value of type is always text/css
Attaching CSS
<style type=“text/css”> @import (“path_to_css_document” ) ;
</style>
Importing your style sheet through the special CSS 2iport rule….appears within an XHTML style tag:
Getting started with CSSWhy use them?
◦Give greater control over the presentation and formatting of your site
◦Can place styles within a web site or use external style sheets
What tag do we use?◦Style tag after the head tag
Tag block, selectors, etc.Within the tag block you will
create your stlye rulesEach rule has a selector
◦Many types◦We will first use element selector
This means an XHTML element is being used somewhere on the page and we want to format the element accordingly
◦Declarations are made after the selector Made up of property and value
Property and valuesSeparated by a colon ( : )Each pair is separated from each
other pair by a semi colon ( ; )Entire block of declarations is
wrapped by a pair of curly braces to offset it from the selector
<style type=“text/css”> p {color:#ff0000;} </style>
Creating a CSS of your ownTerms to understand
◦FIXED◦ELASTIC◦LIQUID◦HYBRID
Fixed CSSColumn width is specified in
pixels
Column does not resize based on the size of the browser or the site visitors text settings
Elastic CSSColumn width is specified in a
unit of measurement (ems) relative to the size of the text
The design adapts if the site visitor changes the settings, but does not change based on the size of the browser window
Liquid CSSColumn width is specified as a
percentage of the site visitors browser width
The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitors text settings
HybridColumns are a combination of
any of the previous three options
For example, the 2 column hybrid, right side bar layout has a main column that scales to the size of the browser and an elastic column on the right that scales to the size of the site visitors text settings
