HTML, XHTML, CSS, & JAVAScript ~ an introduction ~

HTML, XHTML, CSS, & JAVAScript~ an introduction ~

HTML(hyper text mark up language) • Created by Tim Berners-Lee • First time he used it was Christmas 1990 • Publically introduced HTML in 1991 • HTML totally adopted in 1993 • HTML caught on by 1995 world wide and companies like Yahoo and Amazon.com were created!

Flavors of HTML • HTML 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 tags • HTML 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 Attributes • Attributes 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 Tags • Container 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 Tags • Act as instructions to the browser • Do not contain content • No matching closing tag is necessary

HTML Syntax Rules • Case 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 Rules • Case sensitive ….MUST BE LOWERCASE • Attribute values must be quoted…’ or “ • All attributes must have values • Tags must be properly nested • Closing 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 namespace • Technically written in XML so must define the XHTML namespace • Technical and not totally necessary to fully understand it • Will be the same on all your documents, regardless of the DOCTYPE you are using • It 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 XHTML • Can 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.

CSS • Developed in effort to provide more robust formatting language for the web. • Can be used with any web page and any DOCTYPE • Created in 1996 • Introduced text formatting, indents, spacing, alignment, padding, borders

CSS Browser Support • Current version is CSS 2.0 and almost all browsers support CSS • Some browsers may not implement the CSS exactly to the standards so some pages may render differently

BASIC CSS SYNTAX • CSS relies on a different syntax then XHTML • Instead of elements and tags, CSS uses rules • Made up of a selector and declarations

BASIC CSS SYNTAX • The 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 SYNTAX • Declarations 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 SYNTAX • CSS selectors are case sensitive • Declarations are case insensitive • CSS 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 Advantages • Provides many formatting options not available in HTML • Pages that use CSS load and render more quickly • You can reformat an entire site • You can repurpose your site with out rewriting it

What the ‘cascade’ means • If 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 CSS • Keep 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 Value of type is always text/css Value of rel attribute is almost always stylesheet <link rel=“stylesheet” type=“text/css” href=“path_to_css_document” /> • All 3 attributes are required

Attaching CSS Importing your style sheet through the special CSS 2iport rule….appears within an XHTML style tag: <style type=“text/css”> @import (“path_to_css_document” ) ; </style>

Getting started with CSS • Why 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 rules • Each 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 values • Separated 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 own • Terms to understand • FIXED • ELASTIC • LIQUID • HYBRID

Fixed CSS • Column width is specified in pixels • Column does not resize based on the size of the browser or the site visitors text settings

Elastic CSS • Column 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 CSS • Column 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

Hybrid • Columns 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

HTML, XHTML, CSS, & JAVAScript ~ an introduction ~