Download presentation
Presentation is loading. Please wait.
1
© Dr. Graham Rollings Dr. Graham Rollings, (Graham@Appley.plus.com) 09 June 2016 HTML & CSS A very High-level Introduction
2
Insert footer on Slide Master 2 A pretty basic HTML(1-4) page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <!-- An optional container for metadata (data that describes attributes of the data) Contains the HTML metadata describing the document (Metadata not be visible on the page Can include:,,,,, and --> body {background-color:yellow;}p {color:blue;} The title text goes here <!-- An optional container that encloses the document's content if the is not present the browser inserts the following CSS style information body { display: block; margin: 8px; } body:focus { outline: none; } --> Heading - type H1 Hello world! Text is bold and italic Jaguar Aston Martin McLaren
3
Insert footer on Slide Master 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 (1) 3
4
Insert footer on Slide Master 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 (2) 4
5
Insert footer on Slide Master 5 HTML & XHTML – a brief introduction (3) HTML 4 (X)HTML 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> An HTML 4 document Heading - type H1 Hello world! Text is bold and italic An HTML 5 document Heading - type h1 A paragraph. Text is bold and italic
6
Insert footer on Slide Master HTML Elements Must Be In Lower Case – –Except HTML Attribute Names Must Be In Lower Case – Attribute Values Must Be Quoted – HTML Elements Must Be Properly Nested – Text is bold and italic HTML Elements Must Always Be Closed – A paragraph. Empty Elements Must Also Be Closed –A break: HTML4.5. A partial Summary of Syntax Differences 6
7
Insert footer on Slide Master 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 7 CSS - a brief introduction
8
Insert footer on Slide Master External Style Sheet –Every HTML must have a reference to the external style sheet file using the element –The link element must be defined inside the section of an HTML page /External_Style_File"> Internal Style Sheet –Very useful if a page requires a unique style (over-rides the global CSS settings) –The element is defined in the section of an HTML page body {background-color:yellow;}p {color:blue;} 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 A h1 heading with specific attributes. Cascading CSS files –CSS files can also be cascaded (i.e. included) within CSS files to create a hierarchical style structure @import “ /Some_Defined_Site_Style_File.css"; @import url( “ /Some_Defined_Site_Style_File.css“ ); CSS – Using Style Sheets & Inline Styles 8
9
Insert footer on Slide Master CSS - Property Groups (1) 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 9 http://www.w3schools.com/cssref/default.asp
10
Insert footer on Slide Master PropertyDescription CSS colorSets the color of text 1 opacity Sets the opacity level for an element. (1.0 opaque, 0.5 is 50% transparent, 0 is completely transparent) 3 CSS - Property Groups (2) ‘color’ example 10 (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); }
11
Insert footer on Slide Master 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) 1.An Inline style (inside a specific HTML element) 2.External and internal style sheets (in the section) 3.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 tag It will also override an external style sheet It will also override a browser default value CSS – Precedence (Cascading Order) 11
12
Insert footer on Slide Master 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’s are unique – an HTML element can only have one id –Additionally, an id can 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 single id –Or by (one or more) class(es) CSS – classes & id Selectors (1) 12
13
Insert footer on Slide Master A CSS ‘id’ CSS – classes & id Selectors (2) #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 A CSS ‘class’.example_class { color: purple; font-weight: bold; } A class –Identified by the ‘.’ prefix –Can be used to identify more than one element 13
14
Insert footer on Slide Master 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 - 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 class Selector Uses 14
15
Insert footer on Slide Master 15 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 element will be rendered using the styles defined in class="center" and class="large" This paragraph refers to two classes. Double (or multiple) Class Selectors HTML element styles can be defined by a combination of different classes Double Class.class_2.class_3 { color: red; } ID and Class Selectors –HTML element styles can be defined by a combination of ‘id’ and class This Should Be Red #id_1.class_1{ color: red; } CSS – Some Specific id & class Selector Uses
16
Insert footer on Slide Master 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 HomeW3Schools Home Finally - an online HTML/CSS Validation checker is useful..... http://validator.w3.org/check?uri=http%3A%2F%2Fwww.w3school s.com%2Fhtml%2Fdemo_xhtml.asp CSS - Summary 16
Similar presentations
