Html – basic tags

Heading Tags

 six levels of headings

 <h1>,
 <h2>,
 <h3>,
 <h4>,
 <h5>, and
 <h6>
 d
Paragraph Tag

 The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p>
Line Break Tag

 <br /> - BREAK THE LINES

 This tag is an example of an empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
 EXAMPLE:

This will produce the following result:

<p>Hello<br />
You delivered your assignment on time.<br />
Hello
Thanks<br />
You delivered your assignment on time. Thanks
Mahnaz</p>
Mahnaz
Horizontal Lines

 Horizontal lines are used to visually break-up sections of a document. The <hr>
tag creates a line from the current position in the document to the right margin and
breaks the line accordingly.
Nonbreaking Spaces

 &nbsp - used for spacing…

HTML – ELEMENTS
HTML – ELEMENTS

 HTML ELEMENTS FOLLOW:

 <tag name> content </ tag name>
 There are some HTML elements which don't need to be closed, such as <img.../>,
<hr /> and <br /> elements. These are known as void elements.
Nested HTML Elements

 HTML element inside another HTML element

 EXAMPLE:
HTML – ATTRIBUTES

 An attribute is used to define the characteristics of an HTML element and is

placed inside the element's opening tag. All attributes are made up of two parts: a
name and a value:
 The name is the property you want to set.
 The value is what you want the value of the property to be set and always put
within quotations.
Commonly used attributes:

 alt - specifies alternative text for an image ( <img> ).

 id - specifies a unique id.
 src – specifies the URL of an image ( <img> ).
 style – specifies inline style.
 Title – specifies the title.
 Value – specifies the value for an input elements ( <input> ).
 Class - used to associate an element with a style sheet, and specifies the class of
element.
HTML – FORMATTING

 Bold Text
 Anything that appears within <b>...</b> element, is displayed in bold.
 Italic Text
 Anything that appears within <i>...</i> element is displayed in italicized.
 Underlined Text
- Anything that appears within <u>...</u> element, is displayed with underline
HTML – IMAGES

 Insert Image
 You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
- <img src="Image URL" ... attributes-list/>
 The <img> tag is an empty tag, which means that, it can contain only list of
attributes and it has no closing tag.
 Ex:
<img src="test.png" alt="Test Image" />
 Set Image Width/Height
 You can set image width and height based on your requirement using width and
height attributes.
 Ex :
<img src="test.png" alt="Test Image" width="150" height="100"/>
HTML LINKS - HYPERLINKS

 A hyperlinks is a text or an image you can click on, and jump to another
document.
 A link is specified using HTML tag <a>. This tag is called anchor tag and
anything between the opening <a> tag and the closing </a> tag becomes part of
the link and a user can click that part to reach to the linked document. Following
is the simple syntax to use <a> tag.
<a href="Document URL" ... attributes-list>Link Text</a>
The target Attribute

 The target attribute specifies where to open the linked document.

HTML – IMAGE LINKS

 It is common to use images as links:

 Ex:
<a href = "http://www.example.com" target = "_self">
<img src = "/images/logo.png" alt = “Logo Image" border = “0“ /> </a>
HTML – LISTS

 HTML offers web authors three ways for specifying lists of information. All lists
must contain one or more list elements. Lists may contain:
 <ul> - An unordered list. This will list items using plain bullets.

 <ol> - An ordered list. This will use different schemes of numbers to list your
items.

 <li> - tag is used for specifying a list item in ordered, unordered, directory, and
menu lists.
 HTML Unordered Lists
 An unordered list is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet.
 The type Attribute
 You can use type attribute for <ul> tag to specify the type of bullet you like. By
default, it is a disc. Following are the possible options:
 <ul type="square">
 <ul type="disc">
 <ul type="circle">
 HTML Ordered Lists
 If you are required to put your items in a numbered list instead of bulleted, then
HTML ordered list will be used. This list is created by using <ol> tag. The
numbering starts at one and is incremented by one for each successive ordered list
element tagged with <li>.
 The type Attribute
 You can use type attribute for <ol> tag to specify the type of numbering you like.
By default, it is a number. Following are the possible options:
 <ol type="1"> - Default-Case Numerals.
 <ol type="I"> - Upper-Case Numerals.
 <ol type="i"> - Lower-Case Numerals.
 <ol type="a"> - Lower-Case Letters.
 <ol type="A"> - Upper-Case Letters.
 The start Attribute
 You can use start attribute for <ol> tag to specify the starting point of numbering
you need. Following are the possible options:
 <ol type="1" start="4"> - Numerals starts with 4.
 <ol type="I" start="4"> - Numerals starts with IV.
 <ol type="i" start="4"> - Numerals starts with iv.
 <ol type="a" start="4"> - Letters starts with d.
 <ol type="A" start="4"> - Letters starts with D.
HTML – FORMS

 HTML Forms are required, when you want to collect some data from the site
visitor. For example, during user registration you would like to collect information
such as name, email address, credit card, etc.
 The HTML <form> tag is used to create an HTML form and it has following
syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
 HTML Form Controls
 There are different types of form controls that you can use to collect data using
HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 Submit and Reset Button
 Etc.
 Text Input Controls
 There are three types of text input used on forms:
 Single-line text input controls - This control is used for items that require only one line
of user input, such as search boxes or names. They are created using HTML <input> tag.

 Password input controls - This is also a single-line text input but it masks the character
as soon as a user enters it. They are also created using HTML <input> tag.

 Multi-line text input controls - This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.
Single-line text input controls
Password Input controls
Multiple-Line Text Input Controls
 Checkbox Control
 Checkboxes are used when more than one option is required to be selected. They
are also created using HTML <input> tag but type attribute is set to checkbox.
 Select Box Control
 A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select one or
more options.
 Button Controls
 There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button. The type
attribute can take the following values:
HTML – TABLES

 The HTML tables are created using the <table> tag in which the <tr> tag is used
to create table rows and <td> tag is used to create data cells.
An HTML Table with a border attribute

 the border is an attribute of <table> tag and it is used to put a border across all
the cells. If you do not need a border, then you can use border="0".
 Table Heading
 Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell. Normally you will put your top
row as table heading as shown below, otherwise you can use <th> element in any
row.
 Colspan and Rowspan Attributes
 You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or
more rows.
 Table Caption
 The caption tag will serve as a title or explanation for the table