HTML and CSS

HTML and CSS - Overview
HTML and CSS - Overview

Some old-style markup (in red)
- HTML stands for Hypertext Markup Language
  - the word hypertext denotes content that can be connected to other content using hyperlinks
  - markup is information about content (i.e. meta-information) and:
    - in HTML the markup is expressed through element tags
    - this markup carries information about content structure, semantics and (to a certain degree) formatting
- The purpose of HTML is for the preparation of Web-based documents, but an HTML document can also be stored locally and loaded from the file system on the local machine (this is what you will be doing with the lab exercises)
- CSS stands for Cascading Style Sheets
  - it is a language used for specifying presentation details (styles) for html content, separately from the content
  - the word cascading describes the mechanism whereby styles can be specified for the same element in many places but an order of precedence (the cascade) defines exactly which declarations are used in rendering the element
    More about the advantages of using CSS
    
    allows more control over appearance to Web content authors
    
    introduces the separation of content and appearance which
    
    makes for simpler standards and easier conformance
    
    results in easier maintainability
    
    makes it easier to keep the website consistent across different pages
    
    allows the use of multiple styles so that the same content can be consumed by different devices (PCs, tablets, phones)
    
    makes it much easier to implement accessibility
    
    allows easier access to content by search engines
    
    allows content development and design to be treated as separate activities (possibly performed by different people!)
HTML Terminology
HTML Terminology

HTML elements are the building blocks of a Web page. HTML elements consist of tags and content.

HTML tags
- HTML tags are the markup (information about the contents) in the html file.
- A tag consists of angular brackets and all the characters inside the brackets.
- There are three types of tag:
  - open/start tag
    <p>
  - close/end tag
    </p>
  - lone tag
    <br/>
HTML content
- The content is the part of the element that is actually displayed as part of the rendered HTML page.
- An HTML element's content appears between the open and close tag.
- A void element has no content and consists of a lone tag only.
Inside an HTML element tag
- The first word inside the open or void HTML tag is the element name h1, img. These names are reserved strings in HTML.
- A close tag consists of a forward slash and the element name.
- The remainder of the strings inside the open or void HTML tag are name-value pairs representing attributes. Attributes provide more information about the element.
- If an attribute is not applicable to the element that it is placed on, the browser ignores it.
  
  <h1 src="abc.jpg">: the attribute src is ignored as it has no meaning in the context of element h1.
  <img src="abc.jpg">: the attribute src is used to specify the source of the image.

HTML Document Structure

An HTML document has a hierarchical structure, with elements nested inside each other.
The top level element is always of type html and it contains directly within it the head and body elements.
The head element is not displayed by the browser but contains metadata (information about the document).
The body element's contents are displayed in the browser window when the HTML page is loaded.

Example of an HTML page:

<!-- This is an HTML comment -->
<!-- The line below indicates that the document uses HTML5 -->

<!DOCTYPE html>

<!-- The html element represents the entire document. The lang attribute specifies the language and can be placed on any element. Placing it on the html element indicates that the language (in this case English) is used in the entire document. -->

<html lang="en">

<!-- The head element contains instructions for the browser and other non-content information (metadata) relating to the document. -->

<head>

<!-- Meta tags contain information about the document. This is used by browsers, search engines and other web services. The first meta tag below specifies how pages should be scaled with respect to the physical screen. The second specifies the character set used for encoding the page. -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"/>

<!-- Links to other files are specified with the link element. The link below is to a page icon (this will be displayed in the browser tab for the page). -->

<link rel="shortcut icon" type="image/x-icon" href="res/images/logo.png"/>

<!-- The following link is to a  stylesheet with CSS rulesets for application to this HTML file. The specified path is relative to the location of the HTML file. -->

<link rel="stylesheet" type="text/css" href="res/styles/my.css"/>

<!-- The title element is used to specify a page title. This will appear as the title in the browser tab or window. -->

<title>A Very Special HTML Page</title>

<!-- CSS rulesets can be specified directly inside the HTML file, using the style element. This is called an internal or embedded stylesheet. -->

<style>
     h1 { color: purple }
</style>

</head>

<!-- The body holds the actual content of the web page to be displayed in the browser (or interpreted by other device). This consists of HTML elements. -->

<body>

<!-- An example of an HTML element that may appear in the body: a h1 heading (the biggest heading in HTML). -->

<h1>A Very Special HTML Page</h1>

<!-- Another example of an HTML element: a paragraph. -->

<p>This text is in a paragraph. It is a relatively short paragraph but it illustrates the point.</p>

<!-- A final example of an HTML element: a link. Links use the tag 'a'. -->

<a href="https://www.rte.ie">Click me to get some news</a>

</body>

</html>

The page above, when rendered in a browser looks like this:

Application of Styles with CSS

It is the W3 Consortium recommendations on CSS that specify both how CSS rules are defined and how they are interpreted and applied by the browser.

For a CSS style to be applied by the browser to a specific HTML element in a specific HTML document, three things need to happen:

the style needs to be associated with the element as defined in the context of the HTML document
the association must be visible within the HTML document
the association must have the highest precedence out of all those involving the same style property

(1) Associating styles with elements by means of CSS rulesets

HTML elements are associated with styles using CSS rulesets. A ruleset

uses a selector to define a subset of HTML elements and
lists styling instructions that are to be associated with that subset of elements

CSS Rulesets

A CSS ruleset consists of:

A CSS ruleset associating HTML elements of type h1 with two styles: the purple colour for text and bold font weighting.

a selector, used to specify which elements a style should be applied to
a declaration block containing one or more declarations, which are styling instructions in the form of property-value pairs, the property representing an aspect of the element's style and the value being the one that the property should take
many of the values specified for CSS properties are keywords i.e. strings designated as valid values for the property

In the declaration width: 3em the value (3em) is not a keyword because the number of allowed values of this type is infinite.

In the declaration font-weight: bold the value (bold) is a keyword as bold is one of a closed set of allowed values.

CSS Selectors

CSS selectors use element properties and document structure to 'pick out' elements for association with styles. Detailed information on selectors can be found, for example, on MDN. Here we list the selector types that are covered in this module.

element type selector selects all the elements of a particular type

Notation: the element type name i.e. element_type_name.

Ruleset:	h1 { color: green; }
Selector:	h1
An element that is selected:	<h1>A Heading</h1>
An element that is not selected:	<h3>Another Heading</h3>
Rendering of the two elements with the ruleset applied:	A Heading Another Heading

class selector selects all the elements that are assigned to a class

Notation: the class name prefixed by a dot (.) i.e. .class_name.

Ruleset:	.red-text { color: red; }
Selector:	.red-text
An element that is selected:	<h3 class="red-text">some text</h3>
An element that is not selected:	<p class="hat">some more text</p>
Rendering of the two elements with the ruleset applied:	some text some more text

id selector selects the elements with a particular id

Notation: the id prefixed by a hash sign (#) i.e. #id_value.

Ruleset:	#abc123 { font-weight: bold; }
Selector:	#abc123
An element that is selected:	<p id="abc123">some text</p>
An element that is not selected:	<span class="hat">other text</span>
Rendering of the two elements with the ruleset applied:	some text other text

attribute selector selects the elements with a specified value for a specified attribute

Notation: the attribute and value separated by an equal sign (=) and inside square brackets i.e. [attribute_name="the_value"].

Ruleset:	[src="hat.jpg"] { border: 5px solid; }
Selector:	[src="hat.jpg"]
An element that is selected:	<img src="hat.jpg" width="100px">
An element that is not selected:	<img src="cat.jpg" width="100px">
Rendering of the two elements with the ruleset applied:

complex selectors combine two or more simple selectors

Notation: valid selectors separated by combinators i.e. selector_1 combinator selector_2".

This example presents the descendant combinator, which is denoted with a space character. The example selector selects any element of type h1 that is inside an element of class sp, with zero or more intermediate containing elements.

Ruleset:	.sp h1 { color: purple; }
Selector:	.sp h1
An element that is selected (highlighed bold):	<div class="sp"> <div> <h1>Special</h1> </div> </div>
An element that is not selected (highlighed bold):	<div class="nr"> <div> <h1>Normal</h1> </div> </div>
Rendering of the two elements with the ruleset applied:	Special Normal

This example presents the child combinator, which is denoted with a right angular bracket (>). The example selector selects any element of type h1 that is inside an element of class sp, with no intermediate containing elements i.e. that is a child of an element of class sp.

Ruleset:	.sp > h1 { color: orange; }
Selector:	.sp > h1
An element that is selected (highlighed bold):	<div class="sp"> <h1>Special child</h1> </div>
An element that is not selected (highlighed bold):	<div class="sp"> <div> <h1>Special grandchild</h1> </div> </div>
Rendering of the two elements with the ruleset applied:	Special child Special grandchild

grouping of selectors allows the specification of the same group of styles for several selectors at the same time
Notation: selectors separated by commas e.g. selector_1, selector_2, selector_3.

(2) Making the element-style associations visible in a HTML document

Rulesets can be introduced into a HTML file in two ways:

externally - a file with rulesets (a CSS file) is linked into the HTML file with a link element
In this example, the file my.css, located in the directory res/styles relative to the location of the HTML document, contains CSS rulesets. As the CSS file is specified as a link in the HTML file, the rulesets contained in it become applicable to the elements in the HTML document.
```
<html lang="en">
```
```
<head>
```
```
<link rel="stylesheet" type="text/css" href="res/styles/my.css"/>
```
```
</head>
```
```
<body>
```
```
...
```
```
</body>
```
```
</html>
```
internally - rulesets are listed inside a style element under the head element of the HTML file
The ruleset h1 { color: purple; } in this example is applicable to the elements in the HTML file that contains it.
```
<html lang="en">
```
```
<head>
```
```
<style>
```
```
h1 { color: purple; }
```
```
</style>
```
```
</head>
```
```
<body>
```
```
...
```
```
</body>
```
```
</html>
```

(1,2) Bypassing rulesets with inline styles

Another way of associating styles with HTML elements is

inline - styling declarations (property-value pairs) are placed directly on an element
- style property-value pairs are specified as the value of the element's style attribute
- element selection is implicit, by virtue of the style attribute's presence (selectors not needed)
- it is an extensional (by case) mechanism rather than an intentional (by design) one
In this example the inline style specification on the h1 element causes that particular h1 element to have purple text and letters spaced by 1em.
```
<h1 style="color:purple;letter-spacing:1em;">A heading</h1>
```
In this module inline style specification should not be used.

(3) CSS rule precedence

CSS rules are applied by browsers according to an order of precedence based around rule type and rule definition mechanism. The order, referred to as the cascade, is defined by the W3 Consortium as part of the CSS recommendations.

More about the cascade

In the CSWD module we concern ourselves only with the cascade items marked with three red asterisks (***).

Which of many specified values for a style property will actually be applied to an element is decided based on a strictly defined precedence of rules (see the standard), involving three main factors, listed here in order of priority:

Origin and importance: the lowest priority is given to user agent (browser) declarations and user (browser configuration) declarations, which are followed by author declarations (the ones we are familiar with, in CSS and HTML files) and then a number of other categories of declarations
Specificity: this is considered at each level of origin and importance; the more specific selector has precedence (e.g. ".cls p" is more specific than "p"). This specificity calculator provides a clear visual representation of selector specificity values and compares them.
Order of appearance: among equally specific author declarations, it is the order of appearance that determines which declaration is actually applied (the farther links to .css files and style elements appear in the HTML file, the higher their priority; inline styles have the highest priority)
If the cascade as described so far does not yield a rule for a particular property on an element, then the property value is inherited from the closest ancestor in the html element hierarchy for which the property is specified.

HTML and CSS - Best Practice Guidelines
```
      /@)
 ____|  |
(___)    \_____
(___)       
(___)     _____
 (__)____/
				
```
HTML and CSS - Best Practice Guidelines
- HTML file names:
  - avoid spaces as these are not allowed in URLs
  - use case-sensitive file referencing to make your HTML portable (in Linux, for example, index.html and Index.html are not the same thing!)
- Include the doctype element i.e. <!doctype html>
- While HTML with unclosed tags will be interpreted correctly by most browsers, it is good practice to write correct HTML:
  - pair every open tag with a close tag
    
    <p>A paragraph</p><p>And another</p>
    
    <p>A paragraph<p>And another
  - use the forward slash at the end of void elements
    
    <hr/>
  - make sure that tags are nested correctly
    
    <h1><p>Bla bla</h1></p>
- Always put tag attribute values in quotes
- Do not use the same id for more than one element on an HTML page
- As a rule try to use external stylesheets. Internal stylesheets can be used for practice, testing and for stand-alone pages. Inline styles should be avoided except for temporary changes and testing.
- Validate your HTML files at http://validator.w3.org
- Make your pages accessibility compliant, e.g.
  - Specify the alt attribute for img elements
  - Do not use colour as the only means of conveying any information
  - Specify the language using the lang attribute on the html element (needed by speech synthesisers and Braille translators)
HTML, CSS and the WWW - A Brief History
```
:-(   ???   :-)   !!!   t
-+-----+-----+-----+----->
				
```
HTML and CSS - A Brief History
1989
Tim Berners-Lee first proposed a Hypertext Document Format for use in the CERN community in Switzerland
- The purpose was to support collaboration.
1990
The obvious wider applicability of the Hypertext Document Format resulted in Tim Berners-Lee conceiving the World Wide Web (WWW) and HTML.
- The first form of HTML was text-based i.e. could define text documents and links between them.
- HTML was designed as an application of SGML (Standard Generalised Markup Language), a language around since the 1960s, which defines what machine-processable markup languages should be like (i.e. it is a markup meta-language). Full compliance as an SGML application was achieved with HTML 4.
1993
The first widely-used WWW browser, Mosaic, is released by the National Center for Supercomputing Applications (NCSA) at the University of Illinois at Urbana-Champaign. While not the first browser to be created, it
- was easy to install by non-experts
- was available for the Microsoft Windows operating system
- had the capability to display images in-line with text
early
1990s
Early HTML and problems due to a lack of adopted standards
- The rapid adoption of the WWW resulted in what was called the browser wars, in which the browser makers (chiefly Netscape and Microsoft with Internet Explorer, both based on original Mosaic code) competed for dominance, increasingly including non-standard features in their offerings. This made it hard for content developers to keep output portable and frustrating for consumers who had to have the 'right' browser to view a lot of the content on the WWW.
- The demand for intensive processing and increased syntactic lenience posed on browsers by bloated HTML coming from WYSIWYG editors created an 'author's convenience - user's hell' scenario.
- Web (another way to refer to the WWW) authors did not have much control over the appearance of their content.
- Difficulty in providing accessibility features.
- Higher development costs of both content and browsers.
late
1990s
Standards and introduction of CSS
- The World Wide Web Consortium (W3C) was started by Tim Berners-Lee and others in 1994. The W3C publishes recommendations, which are de facto WWW standards, even if not enforceable. A particular specification goes through a long process of maturation, which includes extensive reviews and testing, before becoming a recommendation. Wide conformance to these recommendations makes using the WWW easier for everybody.
- The older HTML recommendations are: HTML (1991), HTML 2.0 (1995), HTML 3.2 (1997), 4.01 (1999).
- Cascading Style Sheets (CSS) were developed by Håkon Wium Lie and Bert Bos and became a W3C recommendation in 1996.
since
2000
Document Object Model (DOM)
- The DOM is a Javascript Application Programming Interface (API) that represents HTML documents as an object tree, with the entire document corresponding to a root object and all the other elements to objects suitably contained in the hierarchical structure of the root object. By manipulating these objects, Javascript code can change the content of the web page.
  Click me!
- The interface exposed by the DOM is platform-independent.
- It was published as a W3C recommendation in 2004.
XML-based HTML
- Extensible Markup Language (XML) is a subset of SGML, stricter and more suitable for machine processing.
- An XML-compliant flavour of HTML 4.01 was published as a recommendation in 2001, under the name XHTML. This specifies HTML in a stricter form, for example with requirements for correct tag usage (nesting, closing etc.). So formatted, HTML places fewer demands on parsers, search engines and other types of programs that process it.
- With HTML 5 (latest version 5.2 was published in 2017), the specification of HTML departed from SGML and became an application of XML, an approach more suitable for digital applications.
  More about HTML 5
  
  HTML 5 is the latest version of HTML
  
  There have been three minor versions of it so far: 5.0 (2014), 5.1 (2016) and 5.2 (2017)
  
  As the recommendation was finalised 14 years after the last HTML recommendation (version 4.01 as XHTML in 2000), it includes many new features:
  
  new semantic elements such as nav, footer and article
  
  new form input field and attribute types
  
  graphics and media elements, allowing inclusion of audio and video without requirement for browser plug-ins
  
  APIs (local storage, geo-location, canvas etc.)
References
```
  ____   ____
 /    \ /    \
| ABCD | EFG. |
| ____ | ____ |
|/    \|/    \|
				
```
References
1. The History of HTML [http://www.ironspider.ca/webdesign101/htmlhistory.htm]
2. A Brief History of CSS Until 2016 [https://www.w3.org/Style/CSS20/history.html]
3. Standards FAQ [https://www.w3.org/standards/faq.html]
4. CSS Cascading and Inheritance Level 3 [https://www.w3.org/TR/css-cascade-3/#cascading]

HTML and CSS - Overview

HTML Terminology

HTML tags

HTML content

Inside an HTML element tag

HTML Document Structure

Application of Styles with CSS

(1) Associating styles with elements by means of CSS rulesets

CSS Rulesets

CSS Selectors

A Heading

Another Heading

some text

Special

Normal

Special child

Special grandchild

(2) Making the element-style associations visible in a HTML document

(1,2) Bypassing rulesets with inline styles

(3) CSS rule precedence

HTML and CSS - Best Practice Guidelines

HTML and CSS - A Brief History

References