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. Show
To create an OMO website, I suggest that:
I wrote the above many years ago while creating these web pages (You can check out my CSS). Today, I would recommend that you learn the basics of HTML/CSS, but quickly jump into a framework such as BootStrap to produce professional-looking web pages. You can't write better than these people! Introduction to HTMLWhat is HTML (HyperText Markup Language)?
HTML Versions
Today, the prevailing specifications are HTML5 (@ https://html.spec.whatwg.org/multipage/). Nonetheless, the most interesting thing about standards is that nobody really follows them strictly. Every browser (Chrome, Firefox, Opera, Safari and Internet Explorer) has its own variations and support the standards to various extents (so as to out-do others). Markup TagsHTML uses markup tags, such as (for Paragraph), to (for Heading Level 1 to 6),1 (for Image), 0(for Anchor or Hyperlink), to markup a document. HTML markup tags perform these functions:
and 0 |
S/No | Language | Logo |
---|---|---|
1. | HTML5 | |
2. | CSS3 | |
3. | JavaScript |
1 attribute.The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
66 sign, followed by an 1-name, e.g.,The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
68 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
69, which select element with
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
70 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
71, respectively. Since 1-value is meant to be unique within an HTML document, ID-selector select at most one element.The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
73" followed by a
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
64-name, e.g.,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
75 and 7, which select all elements with
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
77 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
78, respectively. Unlike 1-value that is unique, many elements can have the sameThe h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
64-name.. We assign a unique
1 to eachThe h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
, i.e.,
,
and
to semantically identify their contents, and use the ID-Selectors
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
68 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
69 to apply styles to the's.
0 and
0, and use the Class-Selectors
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
75 and 7 to apply styles to these texts.
is a block element, while
0 is a inline element.
- The
64 attribute can take multiple values, as inTable and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
90 (Line 18). Both styles are applied.Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
HTML The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
1 vs
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
64 Attributes
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
1 andThe h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
64 are used to reference HTML elements by JavaScript and CSS. ID can also be used as the target of HTML anchors.Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
1 must be unique in an HTML document, butThe h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
64 needs not.Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript - An element can have one
1, but manyThe h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
64es.Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript - CSS's ID-selector begins with
66 (e.g.,Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
68), Class-selector begins with dot (Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
73) (e.g.,Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
02).YOUR TITLE HERE!
For example,
Recommendation: Use ID for JavaScript and internal
0link (which refers to one single element in the HTML document); and class for CSS (which refers to a group of elements with the same style).
Validating CSS
You can use Online CSS Validation Services such as W3C Jigsaw (@ http://jigsaw.w3.org/css-validator) to validate your CSS file.
Try validating the above example using W3C CSS Validator.
Inspecting Element's Styles via F12 Web Developer Tools
The Web Developer Tools supports HTML, CSS, JavaScript and DOM. You could select (inspect) an HTML element, and it will show you all the CSS rules that are applied to that elements from all the sources (inline, embedded, external), and how the rules were merged (calculated) and conflicts were resolved. You can temporarily disable a rule, and edit a rule to check the effect instantly.
To debug CSS:
- F12 to launch Web Developer Tools.
- To inspect the style of an HTML element ⇒ Choose the "HTML" panel ⇒ Click on the "Inspect" button and then select the HTML element of interest from the browser window ⇒ You can check/modify the "Style", "Layout", "DOM" and "Events" (on the right panel) associated with the selected element.
- To check/modify the CSS Style rules ⇒ Choose the "CSS" panel.
CSS Basics
CSS Syntax
CSS is a language by itself. It has its own syntax, which is totally different from HTML and JavaScript!!! (How many syntaxes you have to know to program the web?!).
The syntactic rules are:
- A style rule consists of a selector which selects the HTML elements it operates upon, and a list of style property
34 pairs enclosed in bracesTable and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
30, as follows:Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
0For example, This selector selects the tag. Hence, the defined style is applied to theTable and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
4 element. Many (but not all) of the CSS properties (such as color, font) are inherited by its descendants, unless they are overridden by other style rules.See how the extra white spaces, tabs and line-breaks are ignored by the browser.
- The
34 pairs are separated by semicolon "Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
35". You can omit the last semi-colon before the closing brace "Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
09". But I recommend that you keep it, so that it is easier to include new entries without a missing "YOUR TITLE HERE!
35".Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript - The
57 andLists 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
32 are separated by a colon "Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
33" in the form ofTable and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
34.Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript - Multiple
32s for the same propertyTable and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
57 are separated by commas "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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
38" (as in theTable and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
39). However, multiple parts of the same propertyTable and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
32 are separated by space "Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
89" (as in theLists 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
21, which has a value with 4 parts).YOUR TITLE HERE!
- Values containing space must be quoted, e.g., "
22" orYOUR TITLE HERE!
23.YOUR TITLE HERE!
- 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 "
38". For example, the following rule apply to elements to:Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript
1Table and Images
Table and Images
Logo of Languages
S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript - Comments can be inserted inside the style sheet enclosed between
25 andYOUR TITLE HERE!
26. The end-of-line commentYOUR TITLE HERE!
27 is not applicable in CSS?!YOUR TITLE HERE!
CSS Syntax vs. HTML Syntax
CSS and HTML have different syntaxes!!! For example, HTML's attributes uses "
YOUR TITLE HERE!
28" to separate 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
57 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
32, 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
42; the name-value pairs are separated by spaces, as follows:
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
4Inline, 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
32. The rules are applicable to that particular HTML element only.YOUR TITLE HERE!
- Internal (Embedded) Style Sheet: Embedded inside the
0 tags in the
6 section of the HTML document. The styles are applicable to that entire document.See how the extra white spaces, tabs and line-breaks are ignored by the browser.
- External Style Sheet (Recommended): Stored in an external file, which is then linked to HTML documents via a
0 element in the
6 section. The same external style sheet can be applied to all HTML pages in your website to ensure uniformity in appearance.See how the extra white spaces, tabs and line-breaks are ignored by the browser.
Inline Styles
To apply inline style to an HTML element, include the list of style properties in the
YOUR TITLE HERE!
37 attribute of the opening tag. For example,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
3This paragraph uses 16px monospace font.
This paragraph uses default font.
This paragraph uses 12px inside this span but default font size here.
Take note that 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
57 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
32 are separated by colon
YOUR TITLE HERE!
40, and the
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
34 pair are separated by semicolon
YOUR TITLE HERE!
42, as specified in the CSS syntax.The scope of an inline style is limited to that particular element. Inline style defeats the stated goal of style sheets, which is to separate the document’s content and presentation. Hence, inline style should be avoided and only be used sparsely for touching up a document, e.g., setting the column width of a particular table.
Internal (Embedded) Styles
Embedded styles are defined within the
0 tags in the
6 section. For example,See how the extra white spaces, tabs and line-breaks are ignored by the browser.
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
4- The scope of the embedded styles is the current HTML document.
- Embedded styles separate the presentation and content (in the
6 andSee how the extra white spaces, tabs and line-breaks are ignored by the browser.
7 sections) and can be used if page-to-page uniformity is not required. That is, this set of styles is used for only one single page!?See how the extra white spaces, tabs and line-breaks are ignored by the browser.
NOTE: HTML4/XHTML1 require an additional attribute
YOUR TITLE HERE!
47 in 0
YOUR TITLE HERE!
49The border property is inherited.
Although the first
0is nested under thetag, the
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
06 property is not inherited from the ancestor. That is, you will not see a border around the
0's content. We can force the inheritance by assigning a special value "
YOUR TITLE HERE!
53" as shown in the Class Selector
YOUR TITLE HERE!
54.Resolving Conflicting Rules
Style Conflict
Style conflict on an element arises:
- A property is inherited from multiple ancestors.
- More than one rules are applicable to the element. For example, Tag-selector
2, Class-selector
YOUR TITLE HERE!
56 and ID-selector
YOUR TITLE HERE!
57 are all applicable to element.
Nearest Ancestor Wins
If a property is not defined for an element and is inheritable, it will be inherited from the nearest ancestor.
Specificity
Specificity means that "the more specific the selector, the stronger the rule". For example,
The
2 Tag-selector is the most general, which selects all theelements; the
YOUR TITLE HERE!
59 Class-selector selects a class ofelements with attribute
YOUR TITLE HERE!
60; the
YOUR TITLE HERE!
61 and
YOUR TITLE HERE!
62 ID-selectors select only one element each with a unique The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
1 value. The ID-selector is the most specific (and takes precedence); followed by Class-selector; and followed by the general Tag-selector.Locality
If the "Law of Specificity" cannot resolve the conflict, apply the "Law of Locality". The style-rule that read in last by the browser takes effect. In the above example, there are two ID-selector for
YOUR TITLE HERE!
64, the latter takes effect.The inline style (applied to a specific tag via
YOUR TITLE HERE!
37 attribute) overrides the internal style (defined in
0
YOUR TITLE HERE!
67::selection (CSS3): Select the user-selected-text on the screen. You are only allow to set the
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
22 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
47 properties in the selector. For example, Attribute Selectors
- T[att]: selects elements that possess the given attribute, regardless of value.
- T[att="value"]: selects elements that possess the given attribute, with the given value.
- T[att^="value"]: selects elements that possess the given attribute, beginning with the given value. (Symbol
YOUR TITLE HERE!
70 represent beginning in regex.) - T[att$="value"]: selects elements that possess the given attribute, ending with the given value. (Symbol
YOUR TITLE HERE!
71 represent ending in regex.) - T[att*="value"]: selects elements that possess the given attribute, containing with the given value.
Child Pseudo-Class Selectors (CSS3)
CSS3 introduces these pseudo-class child selectors:
- :first-child, :last-child: E.g., In
YOUR TITLE HERE!
72, td is the first child of the parent. - :nth-child(odd), :nth-child(even): E.g.,
YOUR TITLE HERE!
73 - :nth-child(3), :nth-child(n+3) (3, 4, 5,...), :nth-child(3n) (3, 6, 9,...), :nth-child(3n+1) (4, 7, 10,...), etc.
- :nth-last-child(3): last 3rd child
Type Pseudo-class Selector (CSS3)
- T:first-of-type, T:last-of-type: For example
YOUR TITLE HERE!
74 select the first.
- T:nth-of-type(odd), T:nth-of-type(even): E.g.,
YOUR TITLE HERE!
75 - T:nth-of-type(3), T:nth-of-type(n+3) (3, 4, 5,...), T:nth-of-type(3n) (3, 6, 9,...), T:nth-of-type(3n+1) (4, 7, 10,...), etc.
YOUR TITLE HERE!
76 Pseudo-class Selector
Select elements whose value is in the permitted range, for giving positive feedback, e.g.,
YOUR TITLE HERE!
77 Pseudo-class Selector
The
YOUR TITLE HERE!
78 selector lets you select elements not meeting the criterion in selector
YOUR TITLE HERE!
79. For example,
YOUR TITLE HERE!
80 select elements not belonging to class
YOUR TITLE HERE!
81. See above example.There are many more pseudo-class selector!
CSS Style Properties
For a complete list of the style properties, you may refer to the CSS specification (@ W3C), or online reference. I shall present the commonly-used properties such as color, font, text, margin, border, padding.
CSS
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
22 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
47 Properties
Specifying Color
Color can be expressed as:
- RGB hexadecimal triplets in the form of
YOUR TITLE HERE!
84, where
YOUR TITLE HERE!
85,
YOUR TITLE HERE!
86,
YOUR TITLE HERE!
87 are values of red, green and blue. The values are between
YOUR TITLE HERE!
88 and
YOUR TITLE HERE!
89, in hexadecimal. For example,
YOUR TITLE HERE!
90. The color value
YOUR TITLE HERE!
91 can be shorthand as
YOUR TITLE HERE!
92. - RGB in the form of
YOUR TITLE HERE!
93. The
YOUR TITLE HERE!
94,
YOUR TITLE HERE!
95,
YOUR TITLE HERE!
96 can be expressed in a decimal value between
YOUR TITLE HERE!
97 and
YOUR TITLE HERE!
98; or in percentage between
YOUR TITLE HERE!
99 and
00. I prefer the decimal form over the hex triplets as it is easier to visualize the values. - RGBA in the form of
01: RGB with an additional A (alpha channel). The A is used to control the transparency/opacity, with
02 for opaque; and
03 for totally transparent. - HSL in the form
04: Hue is the color on the color wheel in degrees between
YOUR TITLE HERE!
97 to
06. Saturation (purity of color) is expressed in percentage between
YOUR TITLE HERE!
99 and
00 (pure color). Lightness (brightness or intensity) is also expressed in percentage between
YOUR TITLE HERE!
99 (darkest) and
00 (brightest). - HSLA in the form of
11. - The 16 pre-defined English color names as follows. These 16 colors are numerically generated and are really really ugly. You should avoid using them!! Many browsers also support other color names such as
12,
13, etc.
CSS Color Properties
The most important color properties are
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
22 and
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
47:- color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name: Set the color of the text (or foreground). Color values are inherited by descendants.
- background-color: #rrggbb|rgb(rrr,ggg,bbb)|rgba(r,g,b,a)|color-name|transparent|inherit|initial: Set the background color of an element. The default is
16 and NOT inherited, so as to create a see-through effect. The
17 sets to its default value.
CSS Length Measurements
Many CSS properties, such as
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
37,
YOUR TITLE HERE!
21,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
06,
22,
23 and
24, require a length measurement. For example,There are two types of length measurements: relative (to another length property) and absolute (e.g., inches, centimeters, millimeters).
The absolute units are:
- in (inch)
- cm (centimeter)
- mm (millimeter)
- pt (point): 1 inch has 72 points. 1pt is 1/72 in ≈ 0.014in ≈ 0.35mm.
- pc (pica): 1 pica is 12 points. 1 inch has 6 picas. 1pc ≈ 1/6 in ≈ 0.17in ≈ 4.2mm.
25 is not commonly used. - px:
26 is a measurement unit created for the CSS, where the thinest line shall have width of 1px. Today, it is defined as 1px=1/96 inch. Since 1pt is 1/72 inch; 12pt = 16px = 1/6 inch = 0.42cm.
The relative units are:
- % (percent): in term of the percentage of a property of a referenced element, generally, the same property of the parent element.
For example,
27 set the table's
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
36 of the parent (probably a or ).
- em: the width of the letter
30 of a referenced font, generally, the current font.
For example,
31 means that the margins are twice the current (referenced) font-size.
However, if
32 is used to set the
23 property, it needs to find a reference. In this case, it is referenced to the parent's
23. For example,
35 sets the
23 of to 1.2 times of the parent (possibly a
or ).
- rem (CSS3): relative to the
23 of the root or element. - vw, vh (CSS3): one percent of viewport width and height respectively.
- vmin, vmax (CSS3): one percent of the viewport smaller dimension or larger dimension respectively, i.e., 1vmin is equal to the smaller of 1vh or 1vw; 1vmin is the larger of 1vh or 1vw.
- ex (not commonly-used): the height of letter 'x' of the parent's font.
38 is not commonly used.
There shall be no space between the number and the unit, as space is used to separate multiple values.
Take note that
39 and
32 measurement are relative to another element (percentage values are always relative, e.g.,
41 of something). For example,To add to the confusion, some properties, such as
24, can also accept a bare number, without a unit. This bare number is treated as a factor to be multiplied by a reference. For example,NOTE: In HTML tag attributes, such as
43, the bare number is measured in pixels.Recommendation
- Define a
23 for . - Use
45 for
23 of other elements - relative to . - Use
32 for other properties such as
YOUR TITLE HERE!
21 and
22, which is relative to the current
23. - Use other relative measurement such as
39 if appropriate. Avoid absolute measurements.
For example,
CSS Box Model and Properties
YOUR TITLE HERE!
21,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
06,
22 and Content Area
Recall that HTML defines two kinds of elements: block element and inline element.
A block element (such as
,
, to) is always rectangular in shape and exhibits the so-called box model, with four virtual rectangles wrap around its "content area", representing the content area, padding, border, margin, as illustrated below.
- The content area contains the texts, image, or child elements.
- The padding is the space between the content area and the border. It clears an area outside the content area. It has the same background as the content area.
- The border goes between padding and margin. You can set a color and a style (such as solid, dash, dotted) to the border.
- The margin is the space outside the border (to another element). It clears an area outside the border. The margin does not have a background, and is totally transparent.
As illustrated in the box model diagram, margin pushes its border (and content) away with a transparent background showing the parent (having the effect of pushing itself away from the parent); while padding pushes its content inwards with the same background. Margin and padding serve the same purpose if there is no border and background applied.
Take note that 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
5The actual width of the element is
57.Each of the rectangular bounds has four sides, and can be individually referred to as
58,
59,
60, and
61 in a clockwise manner, where
62 could be
YOUR TITLE HERE!
21,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
06 or
22. The four sides can be controlled individually or as a group.Inspecting the Box Model via Web Developer Tools
[TODO]
CSS
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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:
- Ordered List.
- Unordered List.
This is a nested unordered list of links:
- Online Validator:
- W3C Online HTML Validator @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
37 are specified in units such as
26 (pixels), or percent (relative to the parent element). - max-width|max-height|min-width|min-height: none|n|n%: Set the minimum and maximum width and height.
As mentioned earlier, CSS length measurement requires a proper unit, e.g.,
71 or
72. Take note that
73 is meaningless in CSS (this is a very common error!) However, in HTML,
43 means 400 pixels.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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
37 properties are NOT inherited by its descendants. The default value is "
77", which lets the browser to compute a suitable value. We shall discuss "
78" value later.CSS
YOUR TITLE HERE!
21,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
06 and
22 Properties
The margin, border and padding related properties are:
- margin-top|margin-right|margin-bottom|margin-Left: auto|n|n%: Set the four margins individually. The "
82" shall be expressed in a proper unit (e.g.
83 and
84). You could use a negative value to overlap two elements (e.g.,
85). The value of "
77" lets the browser to compute an appropriate number. "
87" is relative to the same property (i.e. margin-xxx) of the parent. - (Shorthand) margin: top right bottom left
(Shorthand) margin: top right-left bottom
(Shorthand) margin: top-bottom right-left
(Shorthand) margin: all
These are one-line shorthand notations to set all the four margins. If four values are given, they are applied to top, right, bottom, left (in the clockwise manner). If two values are given, they are applied to top-and-bottom, left-and-right. If one value is given, it is applied to all the four borders.
Take note that there is no commas between the items, as all items are considered to be one property value. - padding-top|padding-right|padding-bottom|padding-left: n|n%: Set the four paddings individually, similar to
88. - (Shorthand) padding: top right bottom left
(Shorthand) padding: top left-right bottom
(Shorthand) padding: top-bottom left-right
(Shorthand) padding: all
A one-line shorthand notation to set all the four paddings, similar to
YOUR TITLE HERE!
21. - border-width: thin|medium|thick|n
Set the width of the four borders. "
82" can be used to set an absolute thickness.
91 is a shorthand notation, you can use
92,
93,
94, and
93 to set the four borders individually. - border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
Set the style of the 4 borders. Similarly, you can use
96,
97,
98, and
97 to set the four borders individually. - border-color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name
Set the color of the 4 borders. Similarly, you can use <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
00, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
01, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
02, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
01 to set the four borders individually.. - (Shorthand) border: width style color
Shorthand notation to set all the properties of the borders, in the order shown. You can also use shorthands <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
04, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
05, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
06, and <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
07 to set the four borders individually.
Margin, border, padding, width are NOT inherited by its descendants.
Example: [TODO]
More Margin Properties
- margin: 0 auto: set top and bottom margins to 0. Setting left and right margins to
77 equally distribute the extra horizontal space, and hence, center the element horizontally. - Collapsed Margins: When margin of two elements touching each other vertically, they collapsed (with the larger margin). But when two margins touches horizontally, they do not collapse.
- Negative Margin: margin is one of a few CSS properties that can be set to negative. This is used to overlap elements (without using absolute positioning). Padding and border cannot be negative.
More Border Properties
- border-radius: can be used to create a rounded border. You can also use it to convert a box to a circle (with
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
09). - border-image: can be used to create a multi-color border.
Example [TODO]
CSS <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
10 Properties
In addition to border, outline is a line that goes around the element, outside of the border, which does not take any space in the box model, and does not affect the position of the element.
- outline-color:
- outline-style: dotted|dashed|solid|double|groove|ridge|inset|outset: similar to
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
06. - outline-width:
78
For most of the block elements (e.g.,
,
), the default of
78 sets the width to the width of the parent minus its own margin, border and padding. Images
1 have an
77 width equals to its actual width. Float elements have
77 width of 0.Example: [TODO]
Filling the Width of the Containing Element
Browser would automatically adjust the
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
17 to fill the container's width if the sum of its width, left and right margin/border/padding does not add up to the full width of the containing element. Take note that browser will not adjust 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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
77 (browser divides the remaining width to left and right margins equally).For example, all the selected
are centered:
Example
The above box-model diagram was produced using these codes.
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
6CSS <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
24 Properties
The frequently-used font properties are:
- font-family: font-name|generic-family-name
A prioritized list of fonts to be used. The browser will try to use the first font if the it is available, and goes down the list.
The generic font family names include: <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
25 (with small tails), <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
26 (without small tails), <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
27, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
28, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
29. Use <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
27 for program listing. Use <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
26 for computer display. <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
25 are mainly used in prints (such as "Times" for newspapers and books). - font-size:
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
33|xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger - font-weight: normal|bold|bolder|lighter|100|200|...|800|900
You can use a number between 100 to 900, in multiple of 100. The value of 400 is the normal weight; while 700 is bold. - font-style: normal|italic|oblique
The
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
62 uses italic font installed (some font families include the italic version); while the <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
35 is done by tilting the normal font. - font-variant: normal|small-caps
The <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
36 is smaller than the uppercase. - (Shorthand) font: style variant weight size/line-height family
Set all the font properties using a one-line shorthand notation. The properties must follow the order shown above. However, the leading and trailing items can be omitted. For example,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
7is the same as:
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
8
Font properties are inherited by its descendants.
Example: [TODO]
Google Fonts
"Google Fonts" @ https://fonts.google.com/ is a huge set of high-quality, free and open-source fonts. It is certainly the choice of the fonts today.
To use particular fonts, e.g., "Roboto" and "Roboto Mono", you can either:
- Add a
0 to CSS (in your HTML's See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
6 section, e.g.,
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
9 - Use a
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
39 in your CSS (you need not update all your HTML pages):
YOUR TITLE HERE!
0
CSS <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
40 Properties
The frequently used text properties are:
- text-align: left|right|center|justify
- line-height: normal|n|n%|factor
Set the height of the line. The <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
41 gives the factor to be multiplied by the current font-size. E.g., factor of 1.5 means 1.5 times of the current font. - text-decoration: none|underline|overline|line-through|blink
Graphic designer dislikes "<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
42" and considers it as a legacy of typewriter. "<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
43" is even worse! - text-transform: none|uppercase|lowercase|capitalize
The <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
44 transforms the first letter to uppercase. - text-indent: n|n%
Indent the first-line of the paragraph. To indent all the lines of a paragraph (i.e., the whole block), use padding or margin. - letter-spacing: normal|n
word-spacing: normal|n
Additional spacing to be applied to letters or words. - white-space: normal|pre|nowrap
Specify how white spaces inside the element is to be handled. For "<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
45" (pre-formatted), preserve the white-spaces.
CSS <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
46 Properties
The background related properties are:
- background-color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name|transparent
Set the background color of an element. The default is
16. - background-image: url(imageURL)|none
Use an image as the background. - background-repeat: repeat|repeat-x|repeat-y|no-repeat
Define how the background image shall be repeated in x and y direction or both. - background-attachment: scroll|fixed
Define whether background image shall scroll with the page or fixed. - background-position: x y|x% y%|top left|top center|top right|center left|center center|center right|bottom left|bottom center|bottom right
Set the initial position of the background image. Note that there are two values, specifying the x and y position respectively. - (Shorthand) background: color image repeat attachment position: one-line shorthand notation.
In all the above, the term background refers to the background of the elements selected (not necessary the entire window). In other words, you can set an image as the background of an element.
CSS <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
48 Properties
The properties are:
- list-style-type: none|disc|circle|square
list-style-type: decimal|decimal-leading-zero
list-style-type: lower-alpha|upper-alpha|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin
Set the style of the list item - marker (bullet) for
, respectively.- list-style-position: inside|outside: Define whether the list item marker shall be inside or outside the item element.
- list-style-image: none|url(imageURL): Use an image as the list item marker.
- (Shorthand) list-style: type position image: Shorthand notation to specify all the properties of the list.
Example: [TODO]
CSS Table Properties
- border-collapse: collapse|separate
Collapse or separate the adjacent cells shared border into one. - border-spacing: n
For separate border, specify the distance between border (i.e., the deprecated <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
49 attribute) - caption-side: top|bottom|left|right
Specify which side to show the caption. - empty-cells: show|hide
- table-layout: auto|fixed
[TODO: More]More HTML
Image Maps
Image maps are "clickable" image that loads different pages depending on where (or which hot-regions) you click on the image. Each hot region of the image map can be associated with a different link. There are two type of image maps:
- Client-side image map: browser at the client-side handles the mapping of hot-regions to links.
- Server-side image map: server handles the mapping of hot-regions to links. The co-ordinates of the location clicked are sent to the server to be processed by a program (such as a CGI/ASP/JSP/PHP script). The mapping information is held on the server.
Client-Side Image Map
To create a client-side image map:
- Define a image map using
See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4 and define the hot-regions in the map using the
0 tags. Decide what link maps to which hot-region. Hot regions can take circle, rectangle, or polygon in shape. - In the
1 tag, add the attribute <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
53 to indicate this image is used as a client-side image map.
YOUR TITLE HERE!
1
Example:
YOUR TITLE HERE!
2Client-side Image Map Tags -
0 and
0
Function: To set up a client-side image map with hot regions.
Syntax (map: Container tag, area: Standalone tag)
YOUR TITLE HERE!
3
0's attributes:<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
57: declares a unique name for the map, to be targeted in attribute <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
58 of the
1.
(The attribute
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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.)
0's attributes:<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
63: define the shape of the hot region. The "default" value for any point not part of another hot region.<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
64: list of coordinates that made up the hot region.- For
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
65, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
66 to specify the upper-left and lower-right corners. - For
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
67, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
68, where <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
69 is the center and
YOUR TITLE HERE!
94 is the radius. - For
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
71, <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
72, where <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
73 are coordinates that made up the polygon. You should close the polygon by putting <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
74 as the last coordinates.
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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
1 tag, include the "<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
78" (is server map?) attribute, and wrap the
1 within an anchor <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
80. For example,
YOUR TITLE HERE!
4When the image is clicked, the
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
81 position of the click is send to the server as query parameters. For example,
YOUR TITLE HERE!
5It is up to the server to decide on how to process the <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
81 position received via a server-side program (such as CGI/ASP/JSP/PHP/Servlet).Client-Side vs. Server-Side Image Map
Client-side image map is much more popular (and recommended) than server-side image map because:
- Mapping for client-side image map is processed by the browser locally with immediate response, without connecting to the server and waiting for server to response.
- No special server-side programs needed, relies solely on the browser to process the mapping of the hot regions.
Frames
You can divide the browser's window into multiple regions called frames. Each of the frames can contain a distinct and complete HTML document. Framed layout enables you to display several HTML document at once. Framed layout is popular for:
- Dividing the window into a navigation frame (on the top or left-side of the window) and an actual content frame.
- Dividing the window into a small summary frame and a detail frame. Java API documentation is a good example.
However, use frames with extreme care! Frame (especially the "header" frame) occupied precious screen asset, as it does not scroll away! Framed layout have fallen out of favor over the years. Use
and CSS to organize your web page instead.
The tags involved are:
See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4: to sub-divide the window.- : defines each of the frames in a frameset.
See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4: for floating or inline or internal frame.See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4: alternative text if frame is not supported by browser.
Frame Set See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4
Function: To divide the window into multiple frames, row-wise or column-wise.
See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4 can be nested for complex layout. See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4 is to be used in place of See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4 tag. i.e., there should not have an tag in the document with .Syntax:
YOUR TITLE HERE!
6Attributes:
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
90: a list of frame sizes in pixels or percentage separated by commas. Wildcard "<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
91" can be used to indicate the remaining space.
Example:
YOUR TITLE HERE!
7Divide the window into four rows of sizes: 100 pixels, 20% of the screen, 150 pixels, and the remaining space.Individual Frame
Function: Declare each individual frame, and place the HTML document.
Syntax:
YOUR TITLE HERE!
8Attributes:
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
92: provides the URL of the document to be displayed inside this frame.
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
57: specifies an unique identifier, to be used as the target of other tags, such as
0,
0.<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
96: suppresses resizing by dragging of border.<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
97: sets to 1 to show the border, 0 to suppress.<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
98: "<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
99" to show scrollbars and allow scrolling; "The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
00" to suppress scrolling; and "
77" to let the browser to decide (e.g., auto-hide).
Example: Divide the screen into 3 frames, top, left and right.
YOUR TITLE HERE!
9Targeting Named Frame
To control which frame to receive the content of a hyperlink, you could include the
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
02 attribute in the
0tag. Using the previous example, a hyperlink in the "The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
04" frame targeting the "The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
05" frame is:
0If all the links in the "
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
04" frame are targeting the "The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
05" frame, you can use the
0 tag (in the HEAD section) to set up a global target reference:As mentioned, frames has gone out of favor these day. The HTML5 introduced new elements such as
,,,, to help you in organizing your web page, instead of using frame, division, or table.No Frame See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4
Function: Provides an alternative text if the browser does not support framed layout.
0 must be placed within a .Syntax (Container tag):
1Iframe (Inline Frame or Internal Frame) See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4
Function: Place an inline frame on the browser window. An iframe is a frame that can be embedded within a regular HTML page, which contains a separate and complete HTML document, set via its
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://www.w3.org/TR/css3-selectors/.
31 attribute.Syntax (Container tag):
2You could use CSS to position and style the iframe. Iframe is used extensively by JavaScript and Ajax.
Example: [TODO]
Embedding Programs
Client-side programs such as Java Applets, MS ActiveX controls, JavaScript, VBScript, Flash, can be embedded inside an HTML document. These programs will be downloaded from the server and executed inside the browser. The browser supports the execution of client-side programs via a built-in processor or plug-in (e.g., the Java JRE Plug-in, Flash player plug-in).
The markup tags involved here are:
See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4: for embedded Java Applets (deprecated in HTML 4 in favor of tag).
See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4: for embedded an executable programs.
0: providing runtime parameters to and .Java Applet See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4
Function: Embedding a Java Applet. Deprecated in HTML 4 in favor of .
Syntax (Container tag):
3Program Object See how the extra white spaces,
tabs and
line-breaks are ignored by the
browser.
4 and Parameter
0
Function: Embed an executable program and provide the program parameters.
0 must be nested inside an or .
Syntax (Container tag),
0 (Standalone tag):
4
HTML Global Attributes
The global attributes are applicable to ALL the HTML elements.
class="classname": specifies the subclass this tag belongs to. The
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
64 attribute can have more than one values. The class value needs not be unique. Classes are primarily used by CSS for applying style rule, selected via the class-selector (in the form of The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
22 or The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
23). See the "CSS Section" above.
id="idValue": for declaring an unique, document-wide identifier to a particular tag. No two tags can have the same The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
1 value, while many tags can belong to the same
Table and Images
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
64. The The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
1 attribute is used by CSS for applying styles (via the id-selector in the form of The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
27), and JavaScript for manipulating the element (via The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
28 function).
style="rule": for applying inline style to a tag, applicable to this tag only. See the "CSS Section".
title="tooltip-text": gives an advisory text description for this tag, and display as tool tip when you point your mouse pointer over the element.
lang="value": specifies the language used by this particular tag.
dir="LTR|RTL": specifies the direction of the text for this tag. It takes values of The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
29 (left-to-right) or The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
30 (right-to-left).
HEAD Section's Tags
The following tags can be used in the HEAD section:
...: provides a title to this document.
: provides meta information of this document.
: establishes the linked resources and their relationship, in particular, the external CSS style sheet.
: declares a base URL for all the links in this document, and 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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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
Function: Declare the base URL for all the links in this document via attribute "The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
33", and specify the target name via attribute "The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
02".
Syntax:
5Attributes:
- href="baseUrl": All relative URLs in this document are relative to this base-URL. For example, if
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
0
Function: Link to another resource and indicate its relationship. There could be more than one
0 tags in the HEAD section.Syntax:
6Attributes:
- 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:
8The 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
0
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
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
9Examples:
6The
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
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
9EXAMPLE 1: Auto-Redirect after x seconds
<tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
2The 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>
3The 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
Table and Images
Logo of Languages
S/No
Language
Logo
1.
HTML5
2.
CSS3
3.
JavaScript
9EXAMPLE 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
0
Function: For embedded style declarations, covered earlier.
Scripting Codes
0
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>
6Modifying 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>
7To 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
position: static|absolute|relative|fixed|inherit|initial|unset
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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
77 stacks the element at the same level as its parent. If the The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
91 of two elements are the same or no The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
91 are defined, the last element rendered is placed on top. z-index with alpha can create see-thru effect. - overflow|overflow-x|overflow-y: auto|hidden|scroll|visible|inherit: Specify how to handle content overflowing the block's width/height.
- overflow-wrap: normal|break-word|inherit: specify whether or not the browser can break lines with long words, if they overflow the container.
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
80 (default)
The default
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
80 positions the element according to the normal flow of the page, in the order that is read by the browser. Properties 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
54, 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
53 has no effect for The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
84.The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
83
Move the element relative to its normal-flow position. The original space occupied by this element is preserved. The surrounding elements are not affected. For example,
03
Position the element relative to the first non-static ancestor element; or if no such element is found. Absolute-positioned element is taken out from the normal flow, as if it does not present.
To absolutely position an element in a containing element (other than ), declare the containing element relative without any movement, e.g.,
04.Absolute positioning is interesting. You can create animation (such as bouncing ball and falling snow) by absolutely position (and repeatedly re-position) images on the browser's screen. See my "JavaScript Examples".
For example,
The h1 tags enclose a heading level 1
The p tags is used to markup a paragraph.
82
The element is fixed at the position relative to the browser's window, and it does not scroll away. The position is defined in
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 (or
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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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 @ https://validator.w3.org/.
- W3C Online CSS Validator @ https://jigsaw.w3.org/css-validator/.
- Specifications:
- HTML5 @ http://www.w3.org/TR/html5/.
- CSS3 Selectors @ http://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
3.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>
9The 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.
0CSS
30 and
31 Properties
display: block|inline|inline-block|none|list-item|table|table-row|table-cell|grid|inline-grid
- 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
, ,.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.