HTML & CSS: High-Level Overview

HTML & CSS A very High-level Introduction

A pretty basic HTML(1-4) page <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>   <STYLE> body {background-color:yellow;}p {color:blue;} </STYLE> <!–CSS style......--> The title text goes here  <H1>Heading - type H1 <P>Hello world! <b><i>Text is bold and italic <ul style="list-style-type:none"> <li>Jaguar</li> <li>Aston Martin</li> <li>McLaren</li> </ul>

HTML & XHTML – a brief introduction (1) • HyperText Markup Language • The (current) standard method for writing web pages • HyperText • Text displayed on a Computer display that has the additional feature of being a ‘clickable’ reference to other information or pages. • Often displayed as an underlined hyperlink • But, can also be an icon or an image (jpeg etc) • Or even a blank part of the page..... • Markup • A means to provide (hidden) formatting data to text documents • This formatting data is used by the browser to ‘Render’ pages • Language • In the computer programming idiom - sort of....

HTML & XHTML – a brief introduction (2) • HTML has various versions • Versions 1.0 – 4.0 still prevalent on the web – but increasingly deprecated • The newest incarnation of HTML is currently version 5.x • XHTML(HTML re-written in XML - more of a genuine language than HTML.....) • EXtensible HyperText Markup Language • Based on (i.e. a superset of) the Extensible Markup Language (XML) • XML – a schema definition language • Is (was) currently at version 2.0 – now abandoned • The new version syntax based on HTML5 has been proposed (XHTML5.1 • HTML5 is quite different to HTML(1-4), and still a ‘Work-in-Progress’ • More of a programming language than just a set of rendering instructions • Embedded functions for Graphics, Audio, Video, and interactive documents • For this short presentation we will use HTML4 (and CSS of course)

HTML & XHTML – a brief introduction (3) (X)HTML 5 HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> An HTML 4 document </TITLE> </HEAD> <BODY> <H1>Heading - type H1 <P>Hello world! <b><i>Text is bold and italic</b></i> </BODY> </HTML> <!DOCTYPE html> <html><head><title> An HTML 5document </title></head><body> <h1>Heading - type h1</h1><p>A paragraph.</p> <b><i>Text is bold and italic</i></b> </body></html>

HTML4.5. A partial Summary of Syntax Differences • HTML Elements MustBe In Lower Case • <html> <head> <title> </title> </head> <body> </body> </html> • Except <!DOCTYPE......> • HTML Attribute Names Must Be In Lower Case • <table width="100%"> • Attribute Values MustBe Quoted • <table width="100%"> • HTML Elements MustBe Properly Nested • <b><i>Text is bold and italic</i></b> • HTML Elements MustAlways Be Closed • <p>A paragraph.</p> • Empty Elements MustAlso Be Closed • A break: <br />

CSS - a brief introduction • Cascading Style Sheets (CSS - Currently on Version 3) • Cascading is the process of defining a hierarchy of information • Applies to (X)HTML as well as XML documents in general • CSS defines style-sheets – these help describe the presentation of an HTML page • CSS ‘requests’ how elements must be rendered by the browser • The ‘look & feel’ of an entire website can be controlled by a single CSS file • Different website modes easily controlled by ‘activating’ specific CSS files • i.e. a website Guest mode could look different to a registered user mode • Wiki pages – ‘edit’ mode simpler than ‘read’ mode

CSS – Using Style Sheets & Inline Styles • External Style Sheet • Every HTML must have a reference to the external style sheet file using the <link> element • The link element must be defined inside the <head> section of an HTML page <head><link rel="stylesheet" type="text/css" href=“<path>/External_Style_File"></head> • Internal Style Sheet • Very useful if a page requires a unique style (over-rides the global CSS settings) • The <style> element is defined in the <head> section of an HTML page <STYLE> body {background-color:yellow;}p {color:blue;} </STYLE> • Inline Styles • Very useful if a single element requires a unique style (over-rides the global CSS settings) • Insert the style attribute to the relevant HTML element, the style attribute can implement any CSS property <h1 style="color:blue; margin-left:30px; ">A h1 heading with specific attributes.</h1> • Cascading CSS files • CSS files can also be cascaded (i.e. included) within CSS files to create a hierarchical style structure @import “<path>/Some_Defined_Site_Style_File.css"; @import url( “<path>/Some_Defined_Site_Style_File.css“ );

CSS - Property Groups (1) http://www.w3schools.com/cssref/default.asp • Color • Background and Borders • Basic Box • Flexible Box • Text • Text Decoration • Fonts • Writing Modes • Table • Lists and Counters • Animation • Transform • Transition • Basic User Interface • Multi-column • Paged Media • Generated Content • Filter Effects • Image/Replaced Content • Masking • Speech • Marquee

CSS - Property Groups (2) ‘color’ example (AKA Element Selectors) body { color: magenta; background-color: yellow; opacity: 0.5; /* A CSS single-line comment (also a ‘C’ language comment) */} h1 { color: #ff000ff; background-color: #ffc000; /* A CSS multi-line comment (and, still a ‘C’ language comment) */ } p { color: rgb(255,0,255); background-color: rgb(255,192,0);}

CSS – Precedence (Cascading Order) • Where there are more than one (named) style • Which style will take precedence to apply to an HTML element ? • Cascading – the term itself is a big clue..... • The browser creates a ‘virtual’ style sheet (during the rendering process) • i.e. it cascades the style information in the ‘virtual’ style sheet • It applies the following priority rules (in the shown order of priority) • An Inline style (inside a specific HTML element) • External and internal style sheets (in the <head> section) • Browser default (remember the default style from first slide ?) In practical terms this means: • An inline style (inside a specific HTML element) will have the highest priority • It will also override a style defined inside the <head> tag • It will also override an external style sheet • It will also override a browser default value

CSS – classes & id Selectors (1) • Classes & id’s are very similar • Both types are used to define (select) rendering style attributes • They can be defined inline (in a html document) or in an external CSS document • They cannot have names that start with a number • There is a defined syntax (next slide) • There is one important difference • Id’sare unique – an HTML element can only have one id • Additionally, an idcan only be used once on the HTML page • Classes are not unique - an HTML element can have multiple classes • Multiple HTML elements can share the same class (a significant reason for CSS) • An HTML element can use the style attributes defined: • By a singleid • Or by (one or more) class(es)

CSS – classes & id Selectors (2) A CSS ‘id’ A CSS ‘class’ #example_id { background-color: #666699; padding: 10px } • An ‘id’ • Identified by the ‘#’ prefix • Can identify only one element • Can also be used with more than one named classes .example_class { color: purple; font-weight: bold; } • A class • Identified by the ‘.’ prefix • Can be used to identify more than oneelement

CSS – Some Specific class Selector Uses • The class Selector selects elements with a specific class attribute • To use elements with a specific class, use the class name (preceded with the ‘.’ prefix) • All HTML elements with class="center" in their declaration will be red and center-aligned .center { text-align: center; color: red;} • This can be extended to specify that only specific HTML elements can be affected by a class • For example - <p> elements with class="center" in their declaration will be center-aligned p.center { text-align: center; color: red;} Note: ‘text-align: center;’ is not the class .center– it is one of the attributes for ‘text-align’

CSS – Some Specific id & class Selector Uses • HTML elements can also refer to more than one class • HTML elements can have combinations of classes and id’s by specifying the required selectors (without spaces between them) • The example below the <p> element will be rendered using the styles defined in class="center" and class="large" <p class="center large">This paragraph refers to two classes.</p> • Double (or multiple) Class Selectors • HTML element styles can be defined by a combination of different classes <h1 class_1="class_2class_3">Double Class</h1> .class_2.class_3 { color: red; } • ID and Class Selectors • HTML element styles can be defined by a combination of ‘id’ and class <h1 id=“id_1" class=“class_1">This Should Be Red</h1> #id_1.class_1{ color: red; }

CSS - Summary • This was a just very high-level introduction into the basic use of HTML/CSS • There is a huge amount of information out there • For example - CSS Tutorial W3Schools Home • Finally - an online HTML/CSS Validation checker is useful..... http://validator.w3.org/check?uri=http%3A%2F%2Fwww.w3schools.com%2Fhtml%2Fdemo_xhtml.asp

HTML & CSS: High-Level Overview

HTML & CSS: High-Level Overview

Presentation Transcript