JavaScript create h1 element

If you are the content provider, read HTML. If you are the graphic designer, read CSS. If you are a programmer and want to add dynamic effects to your web page, read JavaScript. But if you operate in OMO (one-man-operated) and are expected to create a reasonably good-looking website, you need to understand HTML, CSS and JavaScript. This is the reason that I combine both the HTML and CSS in this article as they are inseparable.

To create an OMO website, I suggest that:

Understand HTML, CSS and JavaScript thoroughly.
Pick an authoring tool: Use Dreamweaver if you can afford. Otherwise, find a free source-code editor (such as VS Code, Sublime Text, Sublime Text, NotePad++). For programmers, Eclipse/NetBeans/VSCode are good choice for HTML/CSS/JavaScript as they perform syntax checking and provide auto-code-complete.
Design and organize your page. Decide on the look and feel of your website. How many columns? What are the major sections (e.g., header, navigation menu, main content, sidebar, table of content, footer)? Do you need a navigation menu or panel? What is your theme (colors, fonts)? And so on.
Take a close look at your favorite websites!!! CSS is humongous and complex! You can't invent this wheel! Use F12 Debugger to inspect HTML/CSS of your favorite websites.
Use a CSS framework, such as BootStrap, to jump-start your design.
Start with an initial CSS design. Website design begins with CSS, NOT HTML?!. Work on your CSS:
1. Partition your web page into logical section via
  (or HTML5',,
  ,), such as header, content, footer. Assign an
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  1 to
  that is unique (e.g., "
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  2", "
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  3". Assign a common classname to sections (non-unique) that share the same style (e.g., "
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  4", "
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  5"). Write the CSS id-selectors and class-selectors (e.g.,
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  6
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  7
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  8) for common tags (such as
  The h1 tags enclose a heading level 1
  
  The p tags is used to markup a paragraph.
  9,
  //validator.w3.org/.
2. W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
3. Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
4. The
  See how the extra white spaces, tabs and line-breaks are ignored by the browser.
  4 element (Line 5) provides a descriptive title to the page. The browser displays the title on the title-bar of the tab/window.
In the
See how the extra white spaces, tabs and line-breaks are ignored by the browser.
7 section:
1. The Lists and Hyperlinks
  Lists and Hyperlinks
  
  There are two types of lists in HTML:
  1. Ordered List.
  2. Unordered List.
  This is a nested unordered list of links:
  - Online Validator:
    - W3C Online HTML Validator @ //validator.w3.org/.
    - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
  - Specifications:
    - HTML5 @ //www.w3.org/TR/html5/.
    - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
  05 container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from Lists and Hyperlinks
  Lists and Hyperlinks
  
  There are two types of lists in HTML:
  1. Ordered List.
  2. Unordered List.
  This is a nested unordered list of links:
  - Online Validator:
    - W3C Online HTML Validator @ //validator.w3.org/.
    - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
  - Specifications:
    - HTML5 @ //www.w3.org/TR/html5/.
    - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
  05 (largest) to
  See how the extra white spaces, tabs and line-breaks are ignored by the browser.
  4. Line 11 uses a Lists and Hyperlinks
  Lists and Hyperlinks
  
  There are two types of lists in HTML:
  1. Ordered List.
  2. Unordered List.
  This is a nested unordered list of links:
  - Online Validator:
    - W3C Online HTML Validator @ //validator.w3.org/.
    - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
  - Specifications:
    - HTML5 @ //www.w3.org/TR/html5/.
    - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
  08 (Heading Level-3).
2. The
  
  //validator.w3.org/.
3. W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
4. Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
5. The Lists and Hyperlinks
  Lists and Hyperlinks
  
  There are two types of lists in HTML:
  1. Ordered List.
  2. Unordered List.
  This is a nested unordered list of links:
  - Online Validator:
    - W3C Online HTML Validator @ //validator.w3.org/.
    - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
  - Specifications:
    - HTML5 @ //www.w3.org/TR/html5/.
    - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
  12 tags (nested under the Lists and Hyperlinks
  Lists and Hyperlinks
  
  There are two types of lists in HTML:
  1. Ordered List.
  2. Unordered List.
  This is a nested unordered list of links:
  - Online Validator:
    - W3C Online HTML Validator @ //validator.w3.org/.
    - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
  - Specifications:
    - HTML5 @ //www.w3.org/TR/html5/.
    - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
  10 in Line 10) specify "strong emphasis" for its content - rendered in bold by the browser. Similarly, the nested Lists and Hyperlinks
  Lists and Hyperlinks
  
  There are two types of lists in HTML:
  1. Ordered List.
  2. Unordered List.
  This is a nested unordered list of links:
  - Online Validator:
    - W3C Online HTML Validator @ //validator.w3.org/.
    - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
  - Specifications:
    - HTML5 @ //www.w3.org/TR/html5/.
    - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
  14 tags (Line 12) specify "emphasis" rendered in italic; and
  See how the extra white spaces, tabs and line-breaks are ignored by the browser.
  4 (HTML 5) requests for highlight.

View Page Source

You can read the HTML source code by right-clicking on the page and select "View Source" (or "View Page Source", or "Show Page Source"). Try it out.

Note: For macOS's Safari, you may need to enable "Show Page Source" via "Preferences" ⇒ Advanced ⇒ "Show Develop menu in menu bar".

Don't Load the Cached Page (Ctrl-F5)!

Most browsers cache web pages (and the associated images, style sheets, JavaScripts) to boost the speed for web surfing. When you modify and reload a page (via the refresh key F5), the browser might retrieve the un-modified cache copy. To force the browser to reload the page (and all its associated resources) from the source, hit Ctrl-F5.

Most Frequently-Used HTML Elements

The most frequently-used HTML elements are:

block elements:
(paragraph),

//validator.w3.org/.
W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

How it Works?

The (in Line 3) is an HTML comment. Comments are ignored by the browsers, but are important to provide explanations to the readers as well as the author.
There are two types of lists in HTML: ordered list and unordered list. An ordered list is marked by Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
23 and displayed with numbers; while a unordered list is marked by Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
24 and displayed with bullets. Each of the list items is marked by
See how the extra white spaces, tabs and line-breaks are ignored by the browser.
4
You can nest a list inside another list, by placing the complete inner list definition inside a list item
See how the extra white spaces, tabs and line-breaks are ignored by the browser.
4
Hyperlink is marked by

//validator.w3.org/.
W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Example 3: Tables and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

31 specifies the path (or url) for the image source file; Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

32 gives the alternative text if the image cannot be displayed. I used relative path in the Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

31, where " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

34" denotes the parent directory. You need to find some images, store them and figure out your own relative path.

The

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36 and Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37 specify the width and height of the image displayed area. They are used here to resize the images for consistent display.

In the

See how the extra white spaces, tabs and line-breaks are ignored by the browser.

6 section, I added some so-called style rules under the

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

40(e.g.,

, Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

41). The tag-name shall be in lowercase.

Tag's Attributes

Attributes, in the form of Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

42 pairs can be included in the opening tag to provide additional information about the element.

Example 1: In, the attribute

See how the extra white spaces, tabs and line-breaks are ignored by the browser.

5 specifies the natural language for this document.

Example 2: In

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

45 specifies the character encoding scheme.

Example 3: An

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

31" specifies the source-URL of the image; " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

32" specifies an alternate text, if the image cannot be displayed; " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36" and " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37" specify the width and height of the image displayed area.

Some of the attributes are mandatory (e.g., the " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

31" and " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

32" attributes of the

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36" and " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37" attributes of the

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57 Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

58 pairs. The Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

59 should be enclosed in single or double quotes for XHTML/XML compliance (although HTML5 does not enforce it).

HTML Elements

An HTML element consists of the opening and closing tags, and the content in between, e.g.,

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

, Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

61.

There are two types of elements:

Container Element: A container element has an opening tag Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
40 that activates an effect to its content, and a matching closing tag Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
63 to discontinue the effect. In other words, container elements apply formatting to their contents. For example:
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
Void Element (or Standalone Element or Empty Element): A void element does not enclose content but is used to achieve a certain effect, e.g.,

//validator.w3.org/.
W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

A valid HTML document exhibits a tree structure (called DOM or Document Object Model), with the element as the root element of the document tree, with two child elements: and .

[TODO] Draw the DOM tree for one of the examples.

Browsers follow these rules when rendering HTML documents:

In HTML5, the tag-names are NOT case sensitive. I recommend using lowercase, as it is easier to type and XHTML compliance. (XHTML/XML is case sensitive.)
Blanks, tabs, new-lines and carriage-returns are collectively known as white spaces. "Extra" white spaces are ignored. That is, only the first white space is recognized and displayed. For example,
See how the extra white spaces, tabs and line-breaks are ignored by the browser.
produces the following single-line output on screen with words separated by a single space:
See how the extra white spaces, tabs and line-breaks are ignored by the browser.

You need to use the paragraph tag Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
10 to lay out a paragraph; or insert a manual line-break tag

//validator.w3.org/.
W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

This is a paragraph.

Another paragraph
with a line-break in between and more spaces before this.

The Basic Document Skeleton

An HTML document has the following skeleton:

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

The

See how the extra white spaces, tabs and line-breaks are ignored by the browser.

There are two sections:

See how the extra white spaces, tabs and line-breaks are ignored by the browser.

... container element defines the
See how the extra white spaces, tabs and line-breaks are ignored by the browser.
6 section, which contains descriptions and meta-information of the HTML document. Browsers interpret these descriptions to properly display the body content.
... container element defines the
See how the extra white spaces, tabs and line-breaks are ignored by the browser.
7 section, which encloses the content that users actually see in the browser's window.

See how the extra white spaces, tabs and line-breaks are ignored by the browser.

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

The title shows up at the title-bar of the browser window.
The title shows up in bookmarks and history lists (the URL is stored if there is no title).
Titles are used by search engines to index your page.

The Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

The is the same as:

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

The " Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Table and Images

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Example:

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Attributes:

src="imageUrl" (required): gives the URL of the image.
alt="text" (required): alternative text to be displayed if the image cannot be displayed.
width="n|n%", height="n|n%": specify the width and height of the image display area (in pixels or percentage). Browsers use these values to reserve space for the image (before the image is downloaded) and continue rendering the rest of the contents. You can also use the width and height to scale an image. This is not recommended because scaling-up results in a blur image and scaling-down is a waste of bandwidth.
I recommend that you use the Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
36 and Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
37 tags for images, so that the browser can reserve spaces for the images. This is more efficient and could avoid a jerky display if you page contains many images. You can find out the width and height of an image easily by checking the "Properties" of the image.

title="tooltip-text": the attribute Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57.

Using Image as Hyperlink

To use an image as a hyperlink, put the image tag

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Image used as hyperlink anchor automatically gets a border. The color of the border is given in the

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

A CSS style sheet provides style rules to HTML documents. You test out the above styles, by creating an HTML document, which references the CSS via the

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

7How it Works?

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57, followed by its Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57 could have multiple Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

We shall use the following HTML document to test the CSS:

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

9How it Works?

In the earlier example, we use Tag-Selectors which select elements based on tagname. Besides the Tag-Selector, there are Class-Selector which selects elements based on Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57 and Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57 are separated by commas " Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

89" (as in the YOUR TITLE HERE! 21, which has a value with 4 parts).

Values containing space must be quoted, e.g., " YOUR TITLE HERE! 22" or YOUR TITLE HERE! 23.

Extra whitespaces (blank, tab and newline) are ignored.

If the same set of styles is applicable to more than one elements, the selectors can be grouped together in one single rule (called Group-Selector). The tagnames are separated by commas " Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57 and Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

42; the name-value pairs are separated by spaces, as follows:

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Inline, Internal and External Styles

There are three places where you can define style rules:

Inline Style: Included inside a particular HTML opening tag's via attribute YOUR TITLE HERE! 32. The rules are applicable to that particular HTML element only.
Internal (Embedded) Style Sheet: Embedded inside the

//validator.w3.org/.
W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

Table and Images

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36, Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37, YOUR TITLE HERE! 21, Table and Images

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36 to 80% of the Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36 of the parent (probably a

or ).

em: the width of the letter //validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36 and Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37 that you set for the element specify its content area, exclude the margin, border and padding. To get the actual size of the element, you need to add the margin, border and padding to the width/height. For example, suppose that:

Table and Images

Logo of Languages S/No Language Logo

HTML5

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36 and Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37 Dimension Properties

These properties allow you to set up the dimension, such as the width and height of an element.

width|height: auto|n|n%: The Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
36 and Lists and Hyperlinks
Lists and Hyperlinks

There are two types of lists in HTML:
1. Ordered List.
2. Unordered List.
This is a nested unordered list of links:
- Online Validator:
  - W3C Online HTML Validator @ //validator.w3.org/.
  - W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
- Specifications:
  - HTML5 @ //www.w3.org/TR/html5/.
  - CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
37 are specified in units such as //validator.w3.org/.
W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36 and Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37 properties are NOT inherited by its descendants. The default value is "//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 19, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 05 and the left margin/border/padding.

Example: [TODO]

Center a Block Element

To center a block element, you set the <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 21 and <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 17 to //validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57 is used the older browsers. XHTML specifies using

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

1 instead, which automatically create a named anchor.)

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

28: gives the target URL of the hyperlink.

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 76: deactivate the hot region, pointing to nowhere.

If two hot regions overlap, the first takes effect.

A client-side image map can be used as a navigation bar on top of the page, instead of using individual images. This may save some transmission overhead, as each individual image triggers its own HTTP request.

Server-Side Image Map

On the

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57: specifies an unique identifier, to be used as the target of other tags, such as

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

31 attribute.

Syntax (Container tag):

//validator.w3.org/.

W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

57 of the target frame.

: embedded style rules applicable to this document.

: program scripting codes.

Base-URL and Default Target Name

0’s

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

33 is set to:

6then, the relative URL of "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

37" is resolved to "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

38".

target="target-frame-name|_blank|_parent|_self|_top": specifies the target frame into which all linked document should be loaded: "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

39" in new window, "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

40" in this frame, "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

41" in the parent frame, "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

42" in the full body of the window.

Link Resources and Relationship

Function: Link to another resource and indicate its relationship. There could be more than one

0 tags in the HEAD section.

Syntax:

Attributes:

rel, rev: indicates the forward or reverse relationship to the current document. Take value of
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
45,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
46,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
47,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
48,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
49,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
50,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
51,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
52,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
53,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
54, and
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
55 (i.e., author).

[TODO] other attributes.

Example:

The above

0 tags indicate that "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

57" is the stylesheet of MIME type "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

58"; "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

59" is the home page; "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

60" is the help page; this page ("

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

61") is the previous page of "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

62" (in a reverse relationship), and this page is the next page of "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

63".

The most-commonly used

0 is to specify the external CSS style sheet. The rests are hardly used.

Including an Icon

A favicon (aka favorite icon, shortcut icon, URL icon) is a file containing a small 16x16 icon. Browser can display the icon besides the URL bar or bookmark. The favicon file is usually called "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

65".

To include an icon, provide a

0 tag in the section, as follows:

You can use PhotoShop/Element to create a favicon file; or use a simple imaging tool (such as MS Paint) to create a small image and then submit to an online converter to generate a favicon file.

Meta Information

You can use

0 tag to include meta information about the document, such as keywords, author, expiration date, and page generator. The syntax is:

Table and Images

Logo of Languages S/No Language Logo

1.	HTML5
2.	CSS3
3.	JavaScript

Examples:

The

0 tag can also be used to ask the server to insert an HTTP response header (read "HTTP Basics"). The syntax is as follow:

Table and Images

Logo of Languages S/No Language Logo

1.	HTML5
2.	CSS3
3.	JavaScript

EXAMPLE 1: Auto-Redirect after x seconds

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 2

The above

0 tag triggers the server to include the following "Response Header" in the HTTP response message, when the page is downloaded:

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 3

The browser, in response to this response header, redirect to the given URL after 3 sec.

EXAMPLE 2: Auto-Refresh every x seconds

Table and Images

Logo of Languages S/No Language Logo

1.	HTML5
2.	CSS3
3.	JavaScript

EXAMPLE 3: Specify the character set used in the HTML document.

The server will include this response header in the response message, when the page is downloaded:

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 5Embedded Style Definition

Function: For embedded style declarations, covered earlier.

Scripting Codes

Function: For embedding scripting codes. See my "Introduction to JavaScript" on usage and examples.

More CSS

CSS Variables (Custom Properties)

CSS Variables (aka Custom Properties or Cascading Variables) allows you to define variables and using that variables in multiple properties, in a style sheet. This is really useful in setting themes (without using a preprocessor such as LESS or SASS).

Rules:

The name of the variables shall begin with two dashes (
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
73), e.g.,
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
74.
To reference the variable, use
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
75.
To define global-scope CSS variables, place them in the
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
76 pseudo-class.

For examples,

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 6

Modifying CSS Properties from JavaScript and jQuery

To modify the styles of an HTML element from JavaScript, set its YOUR TITLE HERE! 37 property, e.g.,

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 7

To modify the style of an HTML element from jQuery:

CSS

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

78 Property - Positioning the HTML Block Elements

You can use the property

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

78 to alter the position of block elements.

Each element has a natural location inside a page's flow, in the order read in by the browser. By default (

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

80), elements are displayed from top to bottom in the normal flow. For block elements, line breaks are inserted at the beginning and the end to form a rectangular box.

You can remove the box from the normal flow and specify its location with respect to either its parent element (

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

81) or the browser window (

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

82); you can also move the box with respect to its normal-flow position (

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

83).

For non-

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

84 positioned elements, the new position is specified via

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

85, Table and Images

Table and Images

Logo of Languages S/No Language Logo

1.	HTML5
2.	CSS3
3.	JavaScript

53,

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

87, Table and Images

Table and Images

Logo of Languages S/No Language Logo

1.	HTML5
2.	CSS3
3.	JavaScript

54, Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36, Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37 properties:

top|left|bottom|right: n|n%|auto: Set the distance from the edge of this element to the corresponding edge of the containing block.
width|height: n|n%|auto: Set the width and height of this block element.
z-index: number|auto: When two blocks overlap due to re-positioning, the one with larger
The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.
91 number is on top (i.e., z-axis is pointing out of the screen as in the standard 3D graphics coordinates system). Negative number is allowed. The default //validator.w3.org/.
W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.

Specifications:

HTML5 @ //www.w3.org/TR/html5/.
CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

36 and Lists and Hyperlinks

Lists and Hyperlinks

There are two types of lists in HTML:

Ordered List.
Unordered List.

This is a nested unordered list of links:

Online Validator:
- W3C Online HTML Validator @ //validator.w3.org/.
- W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
Specifications:
- HTML5 @ //www.w3.org/TR/html5/.
- CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

37) properties. Fixed-positioned element is taken out of the normal flow, as if it is not present.

For example, a fixed

is added to the above example in absolute positioning. Take note that z-index is used to ensure that the fixed

is always on top of the other

's, regardless of the order of writing the

's.

CSS

12 and

13 Property - Floating an Element Left or Right

float: left|right|none

You can push an element to the left or right edge of the containing element via property

12. Float is often used for images, with texts surrounding the floated element. The elements preceding the floated element are not affected. The element after the floated element flows around it.

You can float horizontally (i.e., left and right), not up and down. Other than images, a float element shall have the width and height explicitly specified. Float elements are actually taken out of the normal flow. The following element acts as if the floated element is not there, but the enclosing texts would wrap around the floated element.

If many images are floated together (says to the left), the second image will be pushed to the left edge of the first image, and so on if there is available horizontal space; and shifted down otherwise. For example, we can float many thumbnail images to the left as follows:

To turn off the float, use property

13, and specify which side (left, right or both) does not allow a floating element.

clear: left|right|both|none

16 means that the left side of this element cannot be a floating element. That is, the left shall begin with left margin of the containing element.

16 is similar to

Using

12 to create columns

Block elements, by default, begins at the left edge and occupies the full-width of the containing element. Hence, it will not line up one besides another in a column format. You can use

12 property to create columns or grid.

[TODO] more

Example: Positioning an Iframe

21"

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 8

22"

<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name> 9

The CSS property

23 (also applicable to

1) floats the iframe to the left or right margin of the browser's window.

You can also use CSS property

25 to position the iframe (and other HTML elements), "

26" positions the element relative to its first positioned ancestor element; "

27" is relative to the browser window and does not scroll away; "

28" means relative to its normal position; the default "

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

84" positions the element in the order it appears in the document.

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

CSS

30 and

31 Properties

block and inline: The

30 property controls the layout and flow of an HTML element. Most elements have a default

30 value of

34 (
,
) or

35 (

0,

0).
The

38 can be used to display an inline element as a block. For example, On the other hand,

39 can be used to display a block element inline. For example,
inline-block: blend the element in with the flow of the text, while allowing us to use padding, margin, height and similar properties which has no visible effect on inline elements.
none: will NOT be displayed and not taking up space (vs.

40 would not display the element but the element still take up space)
list-item: display the element as if it is a
.
table, table-row, table-cell: to display the element (
) as

, ,.

grid: display in a grid, for example,

visibility: hidden|visible: used to hide or show the element without removing the element from the normal flow of the page. That is, the space occupied by the element is preserved.