HTML Input Types

Input Type: text

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

Input Type: password

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

Input Type: submit

<input type="submit"> defines a button for submitting form input 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: radio

<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:

Input Type: checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices

Input Type: button

<input type="button"> defines a button:

HTML Forms 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:

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.

The <textarea> Element

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

The <button> Element

The <button> element defines a clickable button:

HTML Forms Part2

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
In the example above, a server-side script is specified to handle the submitted form:

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

When to Use GET?

You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive information.
When you use GET, the form data will be visible in the page address:

When to Use POST?

You should use POST:
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.

Grouping Form Data with <fieldset>

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


Here is the list of <form> attributes:

Attribute	Description
accept-charset	Specifies the charset used in the submitted form (default: the page charset).
action	Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete	Specifies if the browser should autocomplete the form (default: on).
enctype	Specifies the encoding of the submitted data (default: is url-encoded).
method	Specifies the HTTP method used when submitting the form (default: GET).
name	Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate	Specifies that the browser should not validate the form.
target	Specifies the target of the address in the action attribute (default: _self).

HTML Forms Part1

The <form> Element

HTML forms are used to collect user input.
The <form> element defines an HTML form:

Example

<form>
.
form elements
.
</form>

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)

HTML Head

The HTML <head> Element

The <head> element is a container for meta data (data about data).
HTML meta data is data about the HTML document. Metadata is not displayed.
Meta data typically define document title, styles, links, scripts, and other meta information.
The following tags describes meta data: <title>, <style>, <meta>, <link>, <script>, and <base>.

HTML head Elements

Tag	Description
<head>	Defines information about the document
<title>	Defines the title of a document
<base>	Defines a default address or a default target for all links on a page
<link>	Defines the relationship between a document and an external resource
<meta>	Defines metadata about an HTML document
<script>	Defines a client-side script
<style>	Defines style information for a document

HTML Iframes

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

Iframe Syntax

The syntax for adding an iframe is:

<iframe src="URL"></iframe>

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%").

Iframe - Remove the Border

By default, an iframe has a black border around it.
To remove the border, add the style attribute and use the CSS border property: border:none

HTML Blocks

HTML Block Elements and Inline Elements

Most HTML elements are defined as block level elements or inline elements.
Block level elements normally start (and end) with a new line, when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
Inline elements are normally displayed without line breaks.
Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for other HTML elements.
The <div> element has no special meaning. It has no required attributes, but style and class are common.
Because it is a block level element, the browser will display line breaks before and after it.
When used together with CSS, the <div> element can be used to style blocks of content.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning. It has no required attributes, but style and class are common.
Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic formatting.
When used together with CSS, the <span> element can be used to style parts of the text:

HTML Lists

HTML can have Unordered lists, Ordered lists, or Description lists:

 Unordered List

• The first item
• The second item
• The third item
• The fourth item

Ordered List

1. The first item
2. The second item
3. The third item
4. The fourth item

Description List

The first item

Description of item

The second item

Description of item

 

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).

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

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.

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

HTML Description Lists

A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the data (description).



 

HTML Tables

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.

<table style="width:100%">
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
  </tr>
</table>

 

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:

<table style="width:100%" border="1">
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
  </tr>
</table>

 


 

HTML Images

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 defines the url (web address) of the image:

<img src="url" alt="some_text">

 

The alt Attribute

The alt attribute specifies an alternate text for the image, if it cannot be displayed.
The value of the alt attribute should describe the image in words:

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

 

HTML Links

HTML Links - Hyperlinks

HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another document.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

 

HTML Links - Colors and Icons

When you move the mouse cursor over a link, two things will normally happen:

• The mouse arrow will turn into a little hand
• The color of the link element will change

By default, links will appear as 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 defaults, using styles:

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
This example will open the linked document in a new browser window or in a new tab

 

HTML CSS

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

The most common way to add styling, is to keep the styles in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.

CSS Syntax

CSS styling has the following syntax:

element { property:value; property:value }

The element is an HTML element name. The property is a CSS property. The value is a CSS value.
Multiple styles are separated with semicolon.

Inline Styling (Inline CSS)

Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:

Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styling is defined in the <head> section of an HTML page, using a <style> element:

External Styling (External CSS)

External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire web site by changing one file.
External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page:

HTML Comments

Comment tags <!-- and --> are used to insert comments in HTML.

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Comments are not displayed by the browser, but they can help document your HTML.
With comments you can place notifications and reminders in your HTML:

<!-- This is a comment -->

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

<!-- Remember to add more information here -->

 

Conditional Comments

You might stumble upon conditional comments in HTML:

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
 

 

HTML Formatting

HTML Formatting Elements

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
• Important text
• Italic text
• Emphasized text
• Marked text
• Small text
• Deleted text
• Inserted text
• Subscripts
• Superscripts

HTML Bold and Strong Formatting

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

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

HTML Italic and Emphasized Formatting

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

HTML Small Formatting

The HTML <small> element defines small text:

HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text

HTML Deleted Formatting

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

HTML Inserted Formatting

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

HTML _Subscript Formatting

The HTML <sub> element defines subscripted text.

HTML ^Superscript Formatting

The HTML <sup> element defines superscripted text.

 

HTML Styles

HTML Paragraphs

The HTML <p> element defines a paragraph.

HTML Styling

Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to red

<body style="background-color:#ff0000;">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

 

The HTML style attribute has the following syntax:

style="property:value" 

 

HTML Text Color

The color property defines the text color to be used for an HTML element:

HTML Fonts

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

HTML Text Size

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

HTML Text Alignment

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



 

 

HTML Headings

HTML Headings

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

<h1>Web Guru Now</h1>
<h2>Web Guru Now</h2>
<h3>Web Guru Now</h3>

 

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.

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <head> element is placed between the <html> tag and the <body> tag:

 

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 href Attribute HTML links are defined with the tag. The link address is specified in the href attribute: 

<a href="http://webgurunow.blogspot.in">Web Guru Now</a>

where href in attrubutes for <a> tag

HTML Elements

HTML Elements

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

for example

if tag starts with <p> tag and it must end with </p> tag means <p> is a start tag and </p> is end tag.

all html elements must have start tag and an end tag and with content in between
 

HTML Basics

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>Web Guru Now</h1>
<h2>Web Guru Now</h2>
<h3>Web Guru Now</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:

<a href="http://webgurunow.blogspot.in">This is a link</a>

The link address is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

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 Editors

---

Write HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor

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.