HTML Forms

HTML forms are used to capture user input. They are composed of other form elements like text fields, submit buttons, checkboxes, radio buttons and more.

HTML <form> Element

The HTML <form> element is usded to define a form to collect user input.

HTML <form> Example

<form name=”myform” action=”script.php” method=”post”>
First Name<br>
<input type=”text” /><br>
Last Name<br>
<input type=”text” /><br>
<input type=”submit” value=”Submit” />
</form>

HTML Forms Action Attribute

The action attribute is used to define the action to be executed when the form is submitted. Normally, the form data is sent to another web page which contain a server-side script to handle form data. If the action attribute is not defined, the action is set to the current page.

HTML Forms Target Attribute

The target attribute is used to submit form in current window, in a new browser tab, or in a frame. By default it is set to “_self” which submit the form in current window. “_blank” is used to submit form in a new browser tab.

Example

<form action=”script.php” target=”_blank”>

HTML Forms Method Attribute

The method attribute is used to specify the HTTP method (GET or POST) to submit the form data.

HTML Forms GET Method

The default method when submitting form data is GET. Data is submitted as query string with the url and will be visible in the address bar of the web page. You should never use GET method to send sensitive data. Also the length of a URL is limited.

Example

<form action=”script.php” method=”get”>

HTML Forms POST Method

The POST method does not display the submitted form data in the page address field. POST method should be used to submit sensitive data. POST has no size limitations, and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked.

Example

<form action=”script.php” method=”post”>

HTML Lists

HTML lists are used to add bulleted lines of text in web page. There are three type of lists available in HTML.

<ul> : The unordered list will display items with plain bullets.
<ol> : The ordered list will display items with different schemes of numbers.
<dl> : The definition list will arrange items in the same way as they are arranged in a dictionary.

HTML Unordered List

The <ul> tag is used to define unordered list. Each list item is defined with the <li> tag.

Example

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

CSS list-style-type Property

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

Example

<ul style=”list-style-type:disc;”>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Following list item markers are available in <ul> tag.

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 Ordered List

The <ol> tag is used to define ordered list. Each list item is defined with the <li> tag.

Example

<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

HTML Ordered List type Attribute

The type attribute of the <ol> tag is used to define the type of the list item marker.

Example

<ol type=”A”>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Following list item markers are available in <ol> tag.

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 Definition Lists

The <dl> tag is used to define the Definition list. The <dt> tag is used to define the term, and the <dd> tag describes each term.

Example

<dl>
<dt><b>HTML</b></dt>
<dd>Hyper Text Markup Language</dd>
<dt><b>CSS</b></dt>
<dd>Cascading Style Sheets</dd>
</dl>

HTML Tables

An HTML table is comprised of table rows and columns, much like Excel rows and columns. HTML tables are container elements which are used to hold text and other html elements. A table element consists of other HTML tags which are <table> tag, <tr> tag, <th> tag and <td> tag.

Table rows are defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table cell is defined with the <td> tag.

HTML Table Syntax

<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jackson</td>
<td>32</td>
</tr>
<tr>
<td>Larry</td>
<td>27</td>
</tr>
</table>

HTML Table Borders

CSS border property is used t set table borders. If you do not specify a border for the table, it will be displayed without borders.

Example

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

CSS border-collapse property is used to collapse borders into one border.

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

HTML Table Cell Padding

Cell padding is used to specify the space between the cell content and its borders. CSS padding property is used to set cell padding.

Example

th, td {
padding: 15px;
}

HTML Table colspan Attribute

The colspan attribute is used to make a cell span more than one column.

Example

<table style="width:100%">
<tr>
<th>Student Name</th>
<th colspan="2">Cources Enrolled</th>
</tr>
<tr>
<td>Larry</td>
<td>Data Science</td>
<td>Computer Architecture</td>
</tr>
</table>

HTML Table rowspan Attribute

The rowspan attribute is used to make a cell span more than one row.

Example

<table style="width:100%">
<tr>
<th>Student Name</th>
<td>Larry</td>
</tr>
<tr>
<th rowspan="2">Cources Enrolled</th>
<td>Data Science</td>
</tr>
<tr>
<td>Computer Architecture</td>
</tr>
</table>

HTML Table Caption

The <caption> tag used to add a caption to a table.

Example

<table style="width:100%">
<caption>Cource Registeration</caption>
<tr>
<th>Student Name</th>
<th colspan="2">Cources Enrolled</th>
</tr>
<tr>
<td>Larry</td>
<td>Data Science</td>
<td>Computer Architecture</td>
</tr>
</table>

HTML Images

The <img> tag is used to define HTML images. Images are used to improve the design and the appearance of a web page.

HTML Images Syntax

<img src=”image-url”>

The src attribute specifies the URL of the image.

HTML Images Example

<img src=”my_image.jpg”>

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it. The text should be a short description of the image.

<img src=”my_image.jpg” alt=”Profile Image”>

Image Sizes

The width and height attributes are used to define the image size. Also the style attribute can be used to specify the width and height of an image.

<img src=”my_image.jpg” alt=”Profile Image” width=”500″ height=”500″>
<img src=”my_image.jpg” alt=”Profile Image” style=”width:500px;height:500px;”>

Image as a Link

Images can be used as links. To use an image as a link, put the <img> tag inside the <a> tag.

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/”>
<img src=”html-img.jpg” alt=”HTML tutorial” style=”width:50px;height:50px;border:0;”>
</a>

HTML Hyperlinks

HTML Hyperlinks allow users to click their way from page to page. You can click on a link and jump to another document.

HTML Hyperlinks Syntax

HTML <a> tag is used to define hyperlinks.

<a href=”target-url”>link text</a>

The href attribute specifies the destination address and the link text is the visible part.

HTML Hyperlinks Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/”>HTML Tutorial</a>

Hyperlink Colors

You can set different colors for each state of the link. By default an unvisited link is underlined and blue, a visited link is underlined and purple and an active link is underlined and red.

Hyperlink Colors Example

a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}

Hyperlinks target Attribute

The target attribute specifies where to open the linked document which can be one of followings.
_blank – Opens the document in a new window or tab
_self – Opens the document in the same window/tab as it was clicked (this is default)
_parent – Opens the document in the parent frame
_top – Opens the document in the full body of the window

The target Attribute Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/” target=”_blank”>Html Tutorial</a>

Hyperlink title Attribute

The title attribute specifies extra information about an element which is shown as a tooltip text when the mouse moves over the element.

Hyperlink title Attribute Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/” title=”HTML tutorial for beginners”>Html Tutorial</a>

HTML Comments

Comment tags are used to insert comments in the HTML source code. Comments are not displayed by the browser, but they can help document your HTML source code.

HTML Comment Tag

Comments can be added to the HTML source by using the following syntax.

<!– Put your comments here –>

With comments you can add reminders and explanations in your HTML source. They can also be used for debugging HTML by commenting html lines one by one to search for errors.

HTML Comment Tag Example

<!– This is first comment –>

<p>My Paragraph.</p>

<!– This is another comment –>

HTML Text Formatting

As you learned about the HTML style attribute, HTML also provides special elements for defining text with a special meaning. It uses tags like <b> and <i> for formatting, like bold or italic text.

HTML <b> Tag

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

<b>This is bold</b>

HTML <strong> Tag

HTML <strong> element defines strong text, with added semantic “strong” importance.
Example

<strong>This is strong</strong>

HTML <i> Tag

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

<i>This is italic</i>

HTML <em> Tag

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

<em>This is emphasized</em>

HTML <small> Tag

HTML <small> element defines smaller text:
Example
<h2>This is <small>Small</small> Formatting</h2>

HTML <mark> Tag

HTML <mark> element defines marked/highlighted text:
Example

<h2>This is <mark>Marked</mark> Formatting</h2>

HTML <del> Tag

HTML <del> element defines deleted/removed text.
Example

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

HTML <ins> Tag

HTML <ins> element defines inserted/added text.
Example

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

HTML <sub> Tag

HTML <sub> element defines subscript text.
Example

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

HTML <sup> Tag

The HTML <sup> element defines superscript text.
Example

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

HTML Style Attribute

Style attribute is used for setting the style of an HTML element by setting CSS properties.

The HTML style attribute has the following syntax:

<tagname style=”property1:value1;property2:value2;”>

Background Color

The CSS background-color property defines the background color for an HTML element.

Background Color Example

<body style=”background-color:grey;”>

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

</body>

Text Color

The CSS color property defines the text color for an HTML element.

Text Color Example

<p style=”color:blue;”>My Paragraph.</p>

Fonts

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

Fonts Example

<p style=”font-family:verdana;”>My Paragraph.</p>

Text Size

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

Text Size Example

<p style=”font-size:18px;”>My Paragraph.</p>

Text Alignment

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

Text Alignment Example

<p style=”text-align:center;”>My Paragraph.</p>

HTML Headings

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

Search engines use the headings to index the structure and content of your web pages. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

HTML Headings Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Attributes

Attributes provide additional information about HTML elements. All HTML elements can have attributes. They are always specified in the start tag and usually come in name/value pairs like: name=”value”.

The href Attribute

HTML links are defined with the <a> tag and href attribute is used to specify the link address.

The href Attribute Example

<a href=”https://www.google.com”>Click here</a>

The src Attribute

HTML images are defined with the <img> tag. The src attribute is used to specify the filename of image source.

The src Attribute Example

<img src=”image_filename.jpg”>

The width and height Attributes

HTML images also have width and height attributes, which specifies the width and height of the image:

width and height Attributes Example

<img src=”image_filename.jpg” width=”300″ height=”400″>

The alt Attribute

The alt attribute specifies an alternative text to be used, if an image cannot be displayed. The value of the alt attribute can be read by screen readers.

The alt Attribute Example

<img src=”image_filename.jpg” alt=”Movie Poster”>

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

The style Attribute Example

<p style=”color:red”>My Paragraph.</p>

The title Attribute

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:

The title Attribute Example

<p title=”my tooltip”>
My Paragraph.
</p>