HTML, CSS and JavaScript - Nematrian

HTML, CSS and JavaScript

[Nematrian website page: HTMLCSSJSTutorial, ? Nematrian 2020]

Version Dated: 16 April 2020

In the pages set out below we introduce Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript, the three core components of most web pages.

In these pages, text used within HTML, CSS or JavaScript files is generally shown in courier new (i.e. a fixed space) font. The pages contain links to an extensive body of reference material explaining HTML, CSS and JavaScript in detail. We also provide a wide range of examples, which can help you understand better how HTML, CSS and JavaScript work. See below for further details on how to access these examples.

Hypertext Markup Language (HTML) 1. Introduction 2. Getting started 3. Carriage returns and thematic break lines 4. Commenting 5. Special characters 6. Hyperlinks 7. HTML elements (and their attributes) 8. Browser feature detection

Cascading Style Sheets (CSS) 1. Introduction 2. Selectors 3. Hints and further information

JavaScript 1. Introduction 2. Variables 3. Statements 4. Functions 5. Event handling 6. The Document Object Model (DOM) 7. Miscellaneous

Appendices (reference material) A. HTML Elements B. HTML Attributes C. CSS Properties D. CSS Shorthand Properties

1

E. CSS Animatable Properties F. CSS Keywords (inherit and initial) G. CSS Pseudo-Properties (content, counter-increment and counter-reset) H. CSS Rules (@font-face, @keyframes, @media) I. CSS Selectors J. CSS Units: Times, Lengths, Angles and Colours K. Miscellaneous CSS Property Values (Border Styles and Edge Multi-Value Formats) L. Default CSS Styles Applied to HTML Elements M. HTML Special Characters N. Markup languages O. JavaScript Statements: Reserved Words P. JavaScript String Variables Q. JavaScript Regular Expressions R. JavaScript Numbers and Mathematical Functions S. JavaScript Dates T. JavaScript Booleans U. JavaScript Arrays V. JavaScript Objects W. JavaScript Error Objects X. JavaScript Operators Y. The JavaScript Document Object Model (DOM) Z. Further JavaScript Properties and Methods

To access HTML, CSS or JavaScript examples please go to the webpage on that covers the specific feature you are seeking help with. More detailed examples (such as how to draw spinning3d shapes) are provided here.

Disclaimer: Whilst we have made efforts to check the accuracy of the material in these pages, you should note that HTML, CSS and JavaScript are evolving languages. Information contained in this document may therefore be inaccurate or out-of-date. You should not rely on the accuracy or fitness for purpose of any material that you obtain from the Nematrian website (or from its associated web services). If you need these results to be accurate or fit for purpose then you should seek independent corroboration of whatever you extract from the Nematrian website. Whilst using the site, users may be directed to the websites of other organisations, over which Nematrian may have no control and for which it takes no responsibility. A copy of the current Nematrian Web Services License Agreement can be viewed here.

2

HTML Tutorial

1. Introduction

[HTMLTutorialIntroduction]

Hypertext Markup Language (HTML) is one of the three main components of modern webpages, along with Cascading Style Sheets (CSS) and JavaScript. HTML indicates to the browser what elements should be included in the webpage (and in what order). CSS indicates how each element should be styled. JavaScript provides a means for webpage authors to manipulate these elements programmatically and in response to actions by the end user. Tutorials and reference material covering all three components are available here.

In these pages, we describe HTML further. Text used within HTML, CSS or JavaScript files is generally shown in courier new (i.e. a fixed space) font. The pages contain links to an extensive body of reference material explaining HTML, CSS and JavaScript in detail. We also provide a wide range of examples, which can help you understand better how HTML, CSS and JavaScript work. See below for further details on how to access these examples.

The concept of a markup language is explained further here. A document written in a markup language like HTML has parts that get rendered in the eventual output, but also parts that inform the rendering software how to interpret the remaining text. `Rendering' here refers to the process of transforming the text document containing the HTML text into e.g. its visual representation on a screen.

The markup used by HTML includes tags, like ..., to demarcate different HTML elements within the same webpage. In this case the tag opens the relevant element and the closes it. elements are typically used to delimit paragraphs in HTML. HTML elements can be nested within other elements. Most elements can also be qualified by a range of attributes. For example, if we want to make the text within a element appear red we can ascribe it a CSS style, along the lines of .

Over time HTML has been refined. At the time of writing the latest version is HTML 5. Some aspects of earlier versions of HTML are no longer recognised in HTML 5 and some of these are noted where relevant.

Tutorial contents:

1. Introduction (i.e. this page) 2. Getting started 3. Carriage returns and thematic break lines 4. Commenting 5. Special characters 6. Hyperlinks 7. HTML elements (and their attributes) 8. Browser feature detection

To access HTML, CSS or JavaScript examples please go to the webpage on that covers the specific feature you are seeking help with.

Disclaimer: Whilst we have made efforts to check the accuracy of the material in these pages, you should note that HTML, CSS and JavaScript are evolving languages. Information contained in this

3

document may therefore be inaccurate or out-of-date. You should not rely on the accuracy or fitness for purpose of any material that you obtain from the Nematrian website (or from its associated web services). If you need these results to be accurate or fit for purpose then you should seek independent corroboration of whatever you extract from the Nematrian website. Whilst using the site, users may be directed to the websites of other organisations, over which Nematrian may have no control and for which it takes no responsibility. A copy of the current Nematrian Web Services License Agreement can be viewed here.

2. Getting started with HTML

[HTMLTutorialGettingStarted]

As explained in HTML and other markup languages, there are various `dialects' of HTML. This means that some examples of HTML may be understood by some browsers but rejected by others. The following text, when put into a text editor and saved with a .htm file extension, will usually successfully render a web page that says "Hello World (using HTML)" if the file is viewed in Microsoft Edge. Note that HTML largely ignores page breaks; if you want to include a page break in the text shown to the user then you need to add a element (or a element if you are using XHTML, which is a modern variant of HTML that involves a cross between classic HTML and XML).

Hello World (using HTML)

However, strictly speaking an HTML document is supposed to start with a document type declaration, along the lines of e.g. and a header along the lines of e.g. Document title. So, a better way to create the page shown above is as follows. We've added a comment into the document, using HTML comment tags. Comments are not displayed by the browser but can help to document the HTML source text.

My Document

Hello World (Using HTML)

Often, the element also includes a lang attribute, as this can be important for accessibility applications (such as screen readers) and for search engines. With the lang attribute, the first two letters specify the language. If the language comes in various dialects then two more letters specify the dialect, e.g.:

4

3. Carriage returns and thematic break lines

[HTMLTutorialLineBreaks]

HTML markup largely ignores carriage returns (i.e. line breaks) within marked up files. Instead, if you want to insert a carriage return you need to insert a tag.

By `largely ignores' we mean that browsers do not render carriage returns as line breaks as such (except if certain styles apply to the element within which they appear, see e.g. the default formatting of the element). However, carriage returns do affect how HTML handles spaces at the end of the line and at the start of the following line. Leading spaces (i.e. ones on a line before any non-space characters) are typically ignored, as are trailing spaces (i.e. ones on a line after the last non-space character). However, browsers typically insert a 'breaking space' at the end of each line, which often then shows up as a single space. Multiple spaces one after the other are interpreted as a single space. To include more than one space in such instances you need to include a `non-breaking space' as a special character, see here.

For example the following markup:

Hello (followed by two carriage returns) Hello again

and again

creates the following output:

Hello (followed by two carriage returns)

Hello again and again

Webpage authors typically put a lot of effort into creating visually appealing material. One way of breaking up text is to insert a thematic break line or horizontal rule, i.e. a tag, which places a line across the window like:

4. Commenting

[HTMLTutorialCommenting]

It can be helpful to include comments in HTML documents that are not displayed but help readers of the underlying markup text you to understand what the HTML is trying to do. Comments in HTML take the form and ignore line breaks within the opening and closing tags of the comment element.

For example, markup as follows:

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download