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

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

Post on 09-Feb-2016




0 download

Embed Size (px)


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 - PowerPoint PPT Presentation


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

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 were created!Flavors of HTMLHTML 4 has three versionsHTML 4.01 TraditionalEncourages designers to move from the heavy coding of earlier forms of HTML and begin using CSS for formattingHTML 4.01 StrictRequires that only structure based code be used with all formatting handled by CSSHTML 4.01 FramesetAllows developers to create pages that utilize frames for page layout

HTML elements and tagsHTML made up of elementsElements 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 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 tagA closing tag has a / before the elementsome text to be boldHTML Empty TagsAct as instructions to the browser

Do not contain content

No matching closing tag is necessaryHTML Syntax RulesCase insensitiveUpper or lowercase does not matterBe consistentMajority of web designers write in lowercaseWhitespace insensitiveIn tags the element must immediately follow the opening angle bracketyou can put as much space or returns with out effecting the display of the page in the browserWithin 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 flavorsTransitional, strict, framesetRequires that pages are written in a stricter XML syntaxXHTML 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

Have values10To make your XHTML code validMust begin document with a document type declarationThis informs the browser which flavor you will be using to write your codeSome times called DOCTYPESLooks complex, but will be exactly the same on every document that uses that type sooocopy and pasteDOCTYPE Examples XHTML transitional DOCTYPE



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 tag

Advantages of XHTMLCan validate XHTML for free using on line resourcesBrowsers will not throw out any errors will just try to understand your code as best they can and still show pageBy declaring the flavor with the DOCTYPE you can check your code with a validatorRequires you write better, cleaner code making it easier to edit and maintain laterFuture declaring the language you are using from the beginning browsers in the future will be able to correctly render your pagesBy 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 DOCTYPECreated 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 differentlyBASIC CSS SYNTAXCSS relies on a different syntax then XHTMLInstead of elements and tags, CSS uses rulesMade up of a selector and declarationsBASIC CSS SYNTAXThe selector is a reference to the portion of the XHTML document that should be formattedCan 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 parents 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 itWhat 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 rulesSo an ID selector that targets one specific element will take precedence over a general elementTo 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 documentSeparates content from presentationCan apply same style sheet to multiple pagesCreate one design for your entire web siteTwo ways to attach CSS style sheetLink (most common)@import

Attaching CSS

All 3 attributes are requiredValue of rel attribute is almost always stylesheetValue of type is always text/cssAttaching CSS @import (path_to_css_document ) ;

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 siteCan place styles within a web site or use external style sheetsWhat tag do we use?Style tag after the head tagTag block, selectors, etc.Within the tag block you will create your stlye rulesEach rule has a selectorMany typesWe will first use element selectorThis means an XHTML element is being used somewhere on the page and we want to format the element accordinglyDeclarations are made after the selectorMade up of property and valueProperty 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

p {color:#ff0000;}

Creating a CSS of your ownTerms to understandFIXEDELASTICLIQUIDHYBRIDFixed CSSColumn width is specified in pixels

Column does not resize based on the size of the browser or the site visitors text settingsElastic CSSColumn width is specified in a unit of measurement (ems) relative to the size of the textThe design adapts if the site visitor changes the settings, but does not change based on the size of the browser windowLiquid 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 settingsHybridColumns 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