html.txt

- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes.

HTML buttons are defined with the <button> tag.

HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):

HTML elements with no content are called empty elements. <br>

HTML links are defined with the <a> tag. The link address is specified in the href attribute.

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

The style attribute is used to specify the styling of an element, like color, font, size etc.
<p style="color:red">I am a paragraph</p>

The language of the document can be declared in the <html> tag.

The language is declared with the lang attribute.
<html lang="en-US">

Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph
<p title="I'm a tooltip">

Search engines use the headings to index the structure and content of your web pages. Search engines use the headings to index the structure and content of your web pages.
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property.


The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The HTML <head> element has nothing to do with HTML headings.
The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:


The HTML <br> element defines a line break.

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

The background-color property defines the background color for an HTML element.
The color property defines the text color for an HTML element:
The font-size property defines the text size for an HTML element:
The text-align property defines the horizontal text alignment for an HTML element:


HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:

<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

The HTML <q> element defines a short quotation.
The HTML <blockquote> element defines a section that is quoted from another source.
<blockquote cite="http://www.worldwildlife.org/who/index.html">quote</blockquote>

The HTML <abbr> element defines an abbreviation or an acronym.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

The HTML <address> element defines contact information (author/owner) of a document or an article.

The HTML <cite> element defines the title of a work.

The HTML <bdo> element defines bi-directional override.


You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->


CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file </style>

An inline CSS is used to apply a unique style to a single HTML element.
<h1 style="color:blue;">This is a Blue Heading</h1>

An internal CSS is used to define a style for a single HTML page.
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>

An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

The CSS border property defines a border around an HTML element.

The CSS padding property defines a padding (space) between the text and the border.

The CSS padding property defines a padding (space) between the text and the border.

To define a specific style for one special element, add an id attribute to the element.

To define a style for a special type of elements, add a class attribute to the element.

External style sheets can be referenced with a full URL or with a path relative to the current web page.
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

In HTML, links are defined with the <a> tag:
<a href="url">link text</a>

HTML Link Colors
By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
You can change the default colors, by using CSS:
<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 specifies where to open the linked document.
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

It is common to use images as links:
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

Image Maps
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>


HTML5 introduced the <picture> element to add more flexibility when specifying image resources.
The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fit the current view and/or device.
Each <source> element have attributes describing when their image is the most suitable.
The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

An HTML table is defined with the <table> tag.

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. A table data/cell is defined with the <td> tag.

If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
table, th, td {
    border: 1px solid black;
}

If you want the borders to collapse into one border, add the CSS border-collapse property:
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

To set the padding, use the CSS padding property.
To left-align the table headings, use the CSS text-align property.
To set the border spacing for a table, use the CSS border-spacing property.

To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>

To make a cell span more than one row, use the rowspan attribute.

To make a cell span more than one row, use the rowspan attribute.

To define a special style for a special table, add an id attribute to the table.

LIST
The CSS list-style-type property is used to define the style of the list item marker:

Value	Description
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

The CSS list-style-type property is used to define the style of the list item marker:

Value	Description
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

HTML also supports description lists.

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:
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:


Block-level Elements
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).

The <div> element is a block-level element.
<div>Hello</div>
<div>World</div>


The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:

The <span> element is often used as a container for some text.
The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the text:


The class attribute specifies one or more class names for an HTML element.
The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:

JavaScript can access elements with a specified class name by using the getElementsByClassName() method:


The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.
In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:


An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:


An iframe is used to display a web page within a web page.
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

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 scripts:

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.


HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.


The <base> element specifies the base URL and base target for all relative URLs in a page:


Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page:

<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element


There are four different ways to create multicolumn layouts. Each way has its pros and cons:

HTML tables
CSS float property
CSS framework
CSS flexbox


What is Responsive Web Design?
Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).

Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Responsive Images
Responsive images are images that scale nicely to fit any browser size.

Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and down:

<img src="img_girl.jpg" style="width:100%;">


Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

The text size can be set with a "vw" unit, which means the "viewport width".
<h1 style="font-size:10vw">Hello World</h1>

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.


HTML <kbd> For Keyboard Input
The HTML <kbd> element represents user input, like keyboard input or voice commands.

Text surrounded by <kbd> tags is typically displayed in the browser's default monospace font.

The HTML <samp> element represents output from a program or computing system.

Text surrounded by <samp> tags is typically displayed in the browser's default monospace font.


The HTML <code> element defines a fragment of computer code.

The HTML <var> element defines a variable.


The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>

The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Type					Description
<input type="text">		Defines a one-line text input field
<input type="radio">	Defines a radio button (for selecting one of many choices)
<input type="submit">	Defines a submit button (for submitting the form)


<input type="text"> defines a one-line input field for text input:
<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>


<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>


<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<input type="submit" value="Submit">


The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.
The default value is "_self" which means the form will be submitted in the current window.

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:
<form action="/action_page.php" method="get">
or
<form action="/action_page.php" method="post">

The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse


Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.


The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the fieldset> element.

The <select> element defines a drop-down list:
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option.
Use the size attribute to specify the number of visible values.
Use the multiple attribute to allow the user to select more than one value.


The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.


The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>


HTML5 added the following form elements:

<datalist>
<output>

The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.


The <output> element represents the result of a calculation (like one performed by a script).


<input type="password"> defines a password field.

<input type="reset"> defines a reset button that will reset all form values to their default values.

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

HTML5 added several new input types:

color 			The <input type="color"> is used for input fields that should contain a color.
date			The <input type="date"> is used for input fields that should contain a date.
datetime-local	The <input type="datetime-local"> specifies a date and time input field, with no time zone.
email			The <input type="email"> is used for input fields that should contain an e-mail address.
month			The <input type="month"> allows the user to select a month and year.
number			The <input type="number"> defines a numeric input field.
range			The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes.
search			The <input type="search"> is used for search fields (a search field behaves like a regular text field).
tel				The <input type="tel"> is used for input fields that should contain a telephone number.
time			The <input type="time"> allows the user to select a time (no time zone).
url				The <input type="url"> is used for input fields that should contain a URL address.
week			The <input type="week"> allows the user to select a week and year.


The value attribute specifies the initial value for an input field.

The readonly attribute specifies that the input field is read only (cannot be changed).

The disabled attribute specifies that the input field is disabled.

The size attribute specifies the size (in characters) for the input field.

The maxlength attribute specifies the maximum allowed length for the input field.

HTML5 added the following attributes for <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step


The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.


The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when submitted.

The autofocus attribute specifies that the input field should automatically get focus when the page loads.

The form attribute specifies one or more forms an <input> element belongs to.