W3Schools tutorials
HTML stands for Hyper Text Markup Language
| Declaration | Remark |
|---|---|
| <!DOCTYPE html> (not case sensitive) |
defines this document to be HTML5 |
| < html > | root element of an HTML page |
| < head> | contains meta information about the document Metadata typically define the document title, character set, styles, links, scripts, and other meta information. |
| < title> | specifies a title for the document |
* The start tag is also called the opening tag, and the end tag the closing tag.
| Version | Year |
|---|---|
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
* HTML headings are defined with the < h1 > to < h6 > tags. < h1 > defines the most important heading. < h6 > defines the least important heading.
* The HTML5 standard does not require quotes around attribute values.
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
| Name | Syntax/Description |
|---|---|
| HTML Link | < a href="link" target=""> This is a link < /a > |
| HTML Image | < img src="image" alt="Some Text" width="number" height="number" > < img src="url" alt="some_text" style="width:width;height:height;border:number" > style attribute prevents internal or external styles sheets from changing the original size of images |
| HTML Language The language of the document can be declared in the < html > tag. |
< html lang="en-US" > < /td > |
| Title The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph |
< tagName title="" > |
| HTML < pre > | The text inside element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks |
| HTML style | < tagName style="property:value;" > background-color property color property font-family property font-size property - value in % or px text-align property |
| HTML Bi-Directional Override | < bdo dir="rtl" > This line will be written from right to left < /bdo > |
| HTML Bookmark | < h2 id="tips" > Useful Tips Section < /h2 > < a href="(sometimes a link is here)#tips" > Visit the Useful Tips Section < /a > |
* Some HTML elements will display correctly, even if you forget the end tag. Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.
* HTML elements with no content are called empty elements.< br > is an empty element without a closing tag (the < br > tag defines a line break).Empty elements can be "closed" in the opening tag like this: < br / >.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
* HTML tags are not case sensitive: < P > means the same as < p > .
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
| Attribute | Desciption |
|---|---|
| disabled | Specifies that an input element should be disabled |
| id | Specifies a unique id for an element |
| < b > | Bold text | < strong > | Important text |
| < i > | Italic text | < em > | Emphasized text |
| < mark > | Marked text | < small > | Small text |
| < del > | Deleted text | < ins > | Inserted text |
| < sub > | Subscript text | < sup > | Superscript text |
Note: Browsers display < strong > as < b >, and < em > as < i > . However, there is a difference in the meaning of these tags: < b > and < i > defines bold and italic text, but < strong > and < em > means that the text is "important".
* The HTML < q > element defines a short quotation ("").
* The HTML < blockquote > element defines a section that is quoted from another source. (cite="")
* The HTML < abbr > element defines an abbreviation or an acronym.(title="")
* The HTML < address > element defines contact information of a document or an article.
The < address > element is usually displayed in italic. Most browsers will add a line break before and after the element.
< !-- This is a comment -- >
* In HTML, a color can also be specified as an RGB value, using this formula: rgb(red, green, blue).
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
* In HTML, a color can also be specified using a hexadecimal value in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).
HTML CSS
* Use the HTML < style > element to define internal CSS
* Use the HTML < link > element to refer to an external CSS file
* Use the HTML < head > element to store < style > and < link > elements
* Use the CSS color property for text colors
* Use the CSS font-family property for text fonts
* Use the CSS font-size property for text sizes
* Use the CSS border property for borders
* Use the CSS padding property for space inside the border
* Use the CSS margin property for space outside the border
Links
You can change the default colors, by using styles
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
The target attribute can have one of the following values:
| _blank | Opens the linked document in a new window or tab |
| _self | Opens the linked document in the same window/tab as it was clicked (this is default) |
| _parent | Opens the linked document in the parent frame |
| _top | Opens the linked document in the full body of the window |
| framename | Opens the linked document in a named frame |
Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame
Images
Use the CSS float property to let the image float to the right or to the left of a text
< p > < img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;" >
The image will float to the right of the text.< /p >
< p > < img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;" >
The image will float to the left of the text.< /p >
* Use the < map> tag to define an image-map. An image-map is an image with clickable areas.
* The < map > tag contains a number of < area > tags, that defines the clickable areas in the image-map
< img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
< map name="planetmap" >
< area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" >
< area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" >
< area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" >
< /map >
Tables( < table >)
Each table row is defined with the < tr > tag. A table header is defined with the < th > tag. By default, table headings are bold and centered.
The < td > elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
Note:
If borders are defined using CSS, remember to define borders for both the table and the table cells.
To collapse borders into one border, add the CSS border-collapse property (value - collapse)
To set the padding, use the CSS padding property
To align the table headings and data, use the CSS text-align property
To set the border spacing for a table, use the CSS border-spacing property
* If the table has collapsed borders, border-spacing has no effect.
To make a cell span more than one column, use the colspan attribute (value- no.of columns)
To make a cell span more than one row, use the rowspan attribute (value- no.of rows)
To add a caption to a table, use the < caption > tag.
The caption tag must be inserted immediately after the table tag.
tr:nth-child(even/odd)
< table >
< colgroup >
< col span="2" style="background-color:red" >
< col style="background-color:yellow" > (if span it not defined,it is applied to 1 col)
< /colgroup >
< tr >
HTML Lists
Unordered HTML List
An unordered list starts with the < ul > tag. Each list item starts with the < li > tag.
The CSS list-style-type property is used to define the style of the list item marker
- disc - Sets the list item marker to a bullet (default)
- circle - Sets the list item marker to a circle
- square - Sets the list item marker to a square
- none - The list items will not be marked
Ordered HTML List
An ordered list starts with the < ol > tag. Each list item starts with the < li > tag.
The type attribute of the < ol > tag, defines the type of the list item marker
- type="1" - The list items will be numbered with numbers (default)
- type="A" - The list items will be numbered with uppercase letters
- type="a" - The list items will be numbered with lowercase letters
- type="I" - The list items will be numbered with uppercase roman numbers
- type="i" - The list items will be numbered with lowercase roman numbers
HTML Description List
A description list is a list of terms, with a description of each term.
The < dl > tag defines the description list, the < dt > tag defines the term (name), and the < dd > tag describes each term
- Nesting
- Lists can be nested inside lists
- Other elements
- List items can contain other HTML elements
- Horizontal list
- Use the CSS property float:left or display:inline
HTML Blocks
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Examples of block-level elements:
- < div >
- < h1 > - < h6 >
- < p >
- < form >
An inline element does not start on a new line and only takes up as much width as necessary.
Examples of inline elements:
- < span >
- < a >
- < img >
DIV element
The < div > element is often used as a container for other HTML elements.
The < div > element has no required attributes, but both style and class are common.
When used together with CSS, the < div > element can be used to style blocks of content
SPAN element
The < span > element is often used as a container for some text.
The < span > element has no required attributes, but both style and class are common.
When used together with CSS, the < span > element can be used to style parts of the text
HTML IFrame
< iframe src="URL" > < /iframe >
< iframe src="URL" height="200" width="300" > < /iframe >
< iframe src="URL" style="border:none;" > < /iframe >
< iframe src="URL" style="border:2px solid grey;" > < /iframe >
< iframe src="URL" name="iframe_a" > < /iframe >
< p > < a href="http://www.w3schools.com" target="iframe_a">W3Schools.com < /a > < /p >
The < noscript > tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side script
HTML File Paths
It is a best practice to use relative paths (if possible).
Absolute Paths
< img src="http://www.w3schools.com/images/picture.jpg" alt="Mountain" >
Relative Paths
| Path | Description |
|---|---|
| < img src="picture.jpg" > | picture.jpg is located in the same folder as the current page |
| < img src="images/picture.jpg" > | picture.jpg is located in the images folder located in the current folder |
| < img src="/images/picture.jpg" > | picture.jpg is located in the images folder located in the current web |
| < img src="../picture.jpg" > | picture.jpg is located in the folder one level up from the current folder |
HTML < Head >
The < head > element is a container for metadata (data about data) and is placed between the < html > tag and the < body > tag.
The following tags describe metadata: < title >, < style >, < meta >, < link >, < script >, and < base >.
| < title > | defines the title of the document, and is required in all HTML/XHTML documents. |
| < style > | defines style information for a single HTML page. |
| < meta > | specifys which character set is used, page description, keywords, author, and other metadata. |
| < link > | links to external style sheets. |
| < script > | defines client-side JavaScripts. |
| < base > | specifies the base URL and base target for all relative URLs in a page. |
According to the HTML5 standard; the < html >, the < body >, and the < head > tag can be omitted. (Not recommended)
Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
- Define the character set used
- < meta charset="UTF-8" >
- Define a description of your web page
- < meta name="description" content="Free Web tutorials" >
- Define keywords for search engines
- < meta name="keywords" content="HTML,CSS,XML,JavaScript" >
- Define the author of a page
- < meta name="author" content="John Doe" >
- Refresh document every 30 seconds
- < meta http-equiv="refresh" content="30" >
HTML5 introduced a method to let web designers take control over the viewport, through the < meta > tag.
A meta viewport element gives the browser instructions on how to control the page's dimensions and scaling.
You should include the following viewport element in all your web pages:
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
HTML5 offers new semantic elements that define the different parts of a web page:
|
|
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| " | double quotation mark | " | " |
| ' | single quotation mark (apostrophe) | ' | ' |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
| ‑ | non-breaking hyphen | ‑ |
URL - Uniform Resource Locator
scheme://prefix.domain:port/path/filename
- scheme - defines the type of Internet service (most common is http or https)
- prefix - defines a domain prefix (default for http is www)
- domain - defines the Internet domain name (like w3schools.com)
- port - defines the port number at the host (default for http is 80)
- path - defines a path at the server (If omitted: the root directory of the site)
- filename - defines the name of a document or resource
