Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language  A markup language is a set of markup tags  HTML uses markup tags to describe web pages

Review HTML  HTML Tags HTML markup tags are usually called HTML tags  HTML tags are keywords surrounded by angle brackets like  HTML tags normally come in pairs like and  The first tag in a pair is the start tag, the second tag is the end tag  Start and end tags are also called opening tags and closing tags

Review HTML  HTML Documents = Web Pages  HTML documents describe web pages  HTML documents contain HTML tags and plain text  HTML documents are also called web pages  The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

Review HTML  My First Heading My first paragraph  Example Explained  The text between and describes the web page  The text between and is the visible page content  The text between and is displayed as a heading  The text between and is displayed as a paragraph

Basic HTML  HTML Headings HTML headings are defined with the to tags. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

Basic HTML  HTML Paragraphs HTML paragraphs are defined with the tag. This is a paragraph.

Basic HTML  HTML Links HTML links are defined with the tag. This is a link This is a link

HTML ELEMENTS  An HTML element is everything from the start tag to the end tag:  An HTML element starts with a start tag / opening tag  An HTML element ends with an end tag / closing tag  The element content is everything between the start and the end tag  Some HTML elements have empty content  Empty elements are closed in the start tag  Most HTML elements can have attributes Start tagContentEnd tag This is a paragraph This is a link

HTML Attributes  HTML elements can have attributes  Attributes provide additional information about the element  Attributes are always specified in the start tag  Attributes come in name/value pairs like: name="value“  Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.  Attribute Example  HTML links are defined with the tag. The link address is provided as an attribute:  This is a link

HTML layouts  Table: One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. This is some text. This is some text. This is some text. This is some text. This is some text. Another text. Another text. Another text. Another text. Another text. Another text. Another text.

HTML layouts  Frame: you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.  The disadvantages of using frames are:  The web developer must keep track of more HTML documents  It is difficult to print the entire page

HTML layouts

HTML layouts  The Frameset Tag  The tag defines how to divide the window into frames  Each frameset defines a set of rows or columns  The values of the rows/columns indicate the amount of screen area each row/column will occupy

HTML layouts  The Frame Tag  The tag defines what HTML document to put into each frame   The first column is set to 25% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column.  The second column is set to 75% of the width of the browser window. the HTML document "frame_b.htm" is put into the second column.

HTML layouts  Font: you can specify both the size and the type of the browser output. This is a paragraph. This is another paragraph.

HTML layouts  Font Attributes AttributeExamplePurpose size="number"size="2"Defines the font size size="+number"size="+1"Increases the font size size="-number"size="-1"Decreases the font size face="face-name"face="Times"Defines the font-name color="color-value"color="#eeff00"Defines the font color color="color-name"color="red"Defines the font color

HTML layouts  The Tag Should NOT be Used  The tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).  The World Wide Web Consortium (W3C) has removed the tag from its recommendations.  In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.

HTML 4.0  HTML 3.2 Was Very Wrong !  The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of the document like:  This is a paragraph  This is a heading  When tags like and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

HTML 4.0  In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet.  Because HTML 4.0 separates the presentation from the document structure, we have what we always needed: Total control of presentation layout without messing up the document content.

HTML 4.0  What Should You do About it ?  Do not use presentation attributes inside your HTML tags if you can avoid it. Start using styles!  Do not use deprecated tags. Visit our complete HTML 4.01 Reference to see which tags and attributes that are deprecated.

CSS  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added to HTML 4.0 to solve a problem  External Style Sheets can save a lot of work  External Style Sheets are stored in CSS files  With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.

CSS  CSS syntax is made up of three parts: a selector, a property and a value  The selector is normally the HTML element/tag you wish to define  the property is the attribute you wish to change, and each property can take a value.  The property and value are separated by a colon, and surrounded by curly braces  Ex.body {color:black} p {font-family:"sans serif"} p {text-align:center;color:red} selector {property:value}

CSS  Grouping  You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 { color:green }

CSS  Class selector: you can define different styles for the same type of HTML element.  You have to use the class attribute in your HTML document:  You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned: p.right {text-align:right} p.center {text-align:center} This paragraph will be right-aligned. This paragraph will be center-aligned..center {text-align:center} This heading will be center- aligned This paragraph will also be center-aligned.

CSS  Add Styles to Elements with Particular Attributes  You can also apply styles to HTML elements with particular attributes.  The style rule below will match all input elements that have a type attribute with a value of "text" input[type="text"] {background-color:blue}

CSS  The id Selector  You can also define styles for HTML elements with the id selector. The id selector is defined as a #.  The style rule below will match the element that has an id attribute with a value of "green"  The style rule below will match the p element that has an id with a value of "para1" #green {color:green} p#para1 { text-align:center; color:red }

CSS #para1 { text-align:center; color:red } Hello World! This paragraph is not affected by the style.

CSS  CSS Comments  Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial }

CSS  External Style sheet  An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file.  Each page must link to the style sheet using the tag. The tag goes inside the head section

CSS  An external style sheet can be written in any text editor. The file should not contain any html tags.  Your style sheet should be saved with a.css extension.  An example of a style sheet file is shown below: hr {color:sienna} p {margin-left:20px} body {background- image:url("images/back40.gif")}

CSS  Inline Styles  An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the tag, like this: hr {color:sienna} p {margin-left:20px} body {background- image:url("images/back40.gif")}

Exercise: Design your web with CSS  Study CSS from web page:  Study the CSS for different style related to each component of the web page. You can use Firebug as a tool to explore the website.