Freelancing web desing : Final Basic Structure HtmL

Basic Structure

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

HTML Editors

Write HTML Using Notepad or TextEdit

HTML can be edited by using professional HTML editors like:

Microsoft WebMatrix
Sublime Text

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.

HTML Basic Examples

HTML Documents

All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

HTML Images

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

HTML Elements

HTML documents are made up by HTML elements.

HTML Elements

HTML elements are written with a start tag, with an end tag, with the content in between:

<tagname>content</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first HTML paragraph.</p>

HTML Example Explained

The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

The element content is two other HTML elements (<h1> and <p>).

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

Don't Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Empty HTML Elements

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 you need to make your document readable by XML parsers, you should close all HTML elements.

HTML Attributes

Attributes provide additional information about HTML elements.

HTML Attributes

HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"

The lang Attribute

The document language can be declared in the <html> tag.
The language is declared in the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:
For Example:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The title Attribute

HTML paragraphs are defined with the <p> tag.
In this example, the <p> element has a title attribute. The value of the attribute is "About W3Schools":
For example:

<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

The href Attribute

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

Size Attributes

HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided as attributes:

The alt Attribute

The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.
The value of the attribute can be read by "screen readers". This way, someone "listening" to the webpage, i.e. a blind person, can "hear" the element.

HTML Headings

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document structure.
h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

HTML Horizontal Rules

The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:

<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

The HTML <title> Element

The HTML <title> element is meta data. It defines the HTML document's title.
The title will not be displayed in the document, but might be displayed in the browser tab.

The HTML <meta> Element

The HTML <meta> element is also meta data.
It can be used to define the character set, and other information about the HTML document.

More Meta Elements

In the chapter about HTML styles you discover more meta elements:
The HTML <style> element is used to define internal CSS style sheets.
The HTML <link> element is used to define external CSS style sheets.

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

HTML Background Color

The background-color property defines the background color for an HTML element:
This example sets the background for a page to lightgrey:
For Example:

<body style="background-color:lightgrey;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color

The color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size

The font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>
<p>This is a paragraph.</p>

HTML Formatting Elements

In the previous chapter, you learned about HTML styling, using the HTML style attribute.
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:

Bold text
Italic text
Emphasized text
Marked text
Deleted text
Inserted text
Subscripts
Superscripts
Strong tag

HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance.

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

<p>This text is normal.</p>

<p><strong>This text is strong</strong>.</p>

HTML Italic and Emphasized Formatting

The HTML <i> element defines italic text, without any extra importance.

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>

The HTML <em> element defines emphasized text, with added semantic importance.

<p>This text is normal.</p>

<p><em>This text is emphasized</em>.</p>

HTML Small Formatting

The HTML <small> element defines small text:

<h2>HTML <small>Small</small> Formatting</h2>

HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text:

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML Deleted Formatting

The HTML <del> element defines deleted (removed) text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML Inserted Formatting

The HTML <ins> element defines inserted (added) text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML _Subscript Formatting

The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML ^Superscript Formatting

The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.

Example

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <blockquote> for Long Quotations

The HTML <blockquote> element defines a quoted section.
Browsers usually indent <blockquote> elements.

Example

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Example

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a document or article.
The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

Example

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Styling HTML with CSS

CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:

Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files

Inline Styling (Inline CSS)

Inline styling is used to apply a unique style to a single HTML element:
Inline styling uses the style attribute.
This example changes the text color of the <h1> element to blue:

Example

<h1 style="color:blue;">This is a Blue Heading</h1>

Internal Styling (Internal CSS)

Internal styling is used to define a style for one HTML page.
Internal styling is defined in the <head> section of an HTML page, within a <style> element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External Styling (External CSS)

An external style sheet is used to define the style for many 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:

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Images

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>

HTML Images Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:

The alt Attribute

The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
If a browser cannot find an image, it will display the alt text:

Example

HTML Tables

Defining HTML Tables

Example

<table style="width:100%">
<tr>
<td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

Example explained:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:

Example

<table border="1" style="width:100%">
<tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

The border attribute is on its way out of the HTML standard! It is better to use CSS.

To add borders, use the CSS border property:

Example

table, th, td {
border: 1px solid black;
}

An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add CSS border-collapse:

Example

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

HTML Table Headings

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:

Example

<table style="width:100%">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

To left-align the table headings, use the CSS text-align property:

Example

th {
text-align: left;
}

An HTML Table with Border Spacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
border-spacing: 5px;
}

Table Cells that Span Many Columns

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

Example

<table style="width:100%">
<tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
</tr>
</table>

Table Cells that Span Many Rows

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

Example

<table style="width:100%">
<tr>
    <th>Name:</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
</tr>
<tr>
    <td>555 77 855</td>
</tr>
</table>

An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:

Example

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
<tr>
    <td>February</td>
    <td>$50</td>
</tr>
</table>

A Special Style for One Table

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

Example

<table id="t01">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

Now you can define a special style for this table:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}

And add more styles:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

HTML Lists

Unordered HTML Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles):

Example

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:

Style	Description
list-style-type:disc	The list items will be marked with bullets (default)
list-style-type:circle	The list items will be marked with circles
list-style-type:square	The list items will be marked with squares
list-style-type:none	The list items will not be marked

Disc:

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Circle:

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Square:

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

None:

<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers:

Example

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:

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

Numbers:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Letters:

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol

Lowercase Letters:

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Roman Numbers:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists

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:

Example

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Nested HTML Lists

List can be nested (lists inside lists):

Example

<ul>
<li>Coffee</li>
<li>Tea
<ul>
    <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

Horizontal Lists

HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to be displayed horizontally:

Example

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>

</body>
</html>

With a little extra style, you can make it look like a menu:

Example

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}

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.

Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:

<span>
<a>
<img>

The <div> Element

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

Example

<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

The <span> Element

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

Example

<h1>My <span style="color:red">Important</span> Heading</h1>

Classing Block Elements

The HTML class attribute makes it possible to define equal styles for "equal" <div> elements:

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

HTML Layouts

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

<!DOCTYPE html>

<html>

<head>

<style>

#header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

#nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

#section {

width:350px;

float:left;

padding:10px;

}

#footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

</style>

</head>

<body>

<h1>City Gallery</h1>

</div>

London<br>

Paris<br>

Tokyo

</div>

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.</p>

</div>

</div>

</body>

</html>

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 CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

Create Your Own Responsive Design

One way to create a responsive design, is to create it yourself:

<!DOCTYPE html>

<head>

<style>

.city {

float: left;

margin: 10px;

padding: 10px;

width: 300px;

height: 300px;

border: 1px solid black;

}

</style>

</head>

<body>

<h1>Responsive Web Design Demo</h1>

<h2>Resize this responsive page!</h2>

<h2>London</h2>

<p>London is the capital city of England.</p>

<p>It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

</div>

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

<p>The Paris area is one of the largest population centers in Europe,

with more than 12 million inhabitants.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

<p>It is the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.</p>

</div>

<h2>View Source</h2>

<p>View the source code to see how this page was built.</p>

</div>

</body>

</html>

Another Example

<!DOCTYPE html>

<html>

<body>

<p>Resize this responsive page!</p>

</div>

<h2>London</h2>

<p>London is the capital city of England.</p>

<p>It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

</div>

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

<p>The Paris area is one of the largest population centers in Europe,

with more than 12 million inhabitants.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

<p>It is the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.</p>

</div>

</body>

</html>

HTML Iframes

An iframe is used to display a web page within a web page.

Iframe Syntax

The syntax for adding an iframe is:

The src attribute specifies the URL (web address) of the iframe page.

Iframe - Set Height and Width

Use the height and width attributes to specify the size.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example

HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:

Type	Description
text	Defines normal text input
radio	Defines radio button input (for selecting one of many choices)
submit	Defines a submit button (for submitting the form)

You will learn a lot more about input types later in this tutorial.

Text Input

<input type="text"> defines a one-line input field for text input:

Example

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text input field is 20 characters.</p>

</body>

</html>

Radio Button

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other

</form>

</body>

</html>

Grouping Form Data with <fieldset>

The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

This chapter describes all HTML form elements.

The <input> Element

The most important form element is the <input> element.
The <input> element can vary in many ways, depending on the type attribute.

The <select> Element (Drop-Down List)

The <select> element defines a drop-down list:

<!DOCTYPE html>

<html>

<body>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

The <option> elements defines the options to select.

The list will normally show the first item as selected.

You can add a selected attribute to define a predefined option.

<!DOCTYPE html>

<html>

<body>

<p>You can preselect an option with the selected attribute.</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

<!DOCTYPE html>

<html>

<body>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

HTML5 <datalist> Element

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

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>

</body>

</html>

Freelancign web design and Graphics design

Final Basic Structure HtmL All Tags :Freelancing web desing

Freelancing web desing : Final Basic Structure HtmL

Basic Structure <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html> HTML Editors

Write HTML Using Notepad or TextEdit

HTML Basic Examples

HTML Documents

HTML Headings

HTML Paragraphs

HTML Links

HTML Images

HTML Elements

HTML documents are made up by HTML elements.

HTML Elements

HTML Example Explained

Don't Forget the End Tag

Empty HTML Elements

HTML Attributes

Attributes provide additional information about HTML elements.

HTML Attributes

The lang Attribute

The title Attribute

The href Attribute

Size Attributes

The alt Attribute

HTML Headings

Headings Are Important

HTML Horizontal Rules

The HTML <title> Element

The HTML <meta> Element

More Meta Elements

The HTML Style Attribute

HTML Background Color

HTML Text Color

HTML Fonts

HTML Text Size

HTML Text Alignment

HTML Formatting Elements

HTML Bold and Strong Formatting

HTML Italic and Emphasized Formatting

HTML Small Formatting

HTML Marked Formatting

HTML Deleted Formatting

Example

HTML Inserted Formatting

Example

HTML Subscript Formatting

Example

HTML Superscript Formatting

Example

HTML <q> for Short Quotations

Example

HTML <blockquote> for Long Quotations

Example

HTML <abbr> for Abbreviations

Example

HTML <address> for Contact Information

Example

Styling HTML with CSS

Inline Styling (Inline CSS)

Example

Internal Styling (Internal CSS)

Example

External Styling (External CSS)

Example

HTML Images

HTML Images Syntax

The alt Attribute

Example

HTML Tables

Defining HTML Tables

Example

An HTML Table with a Border Attribute

Example

Example

An HTML Table with Collapsed Borders

Example

An HTML Table with Cell Padding

Example

HTML Table Headings

Basic Structure

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

HTML Editors

HTML _Subscript Formatting

HTML ^Superscript Formatting