Introduction to HTML

What is Html?

HTML stands for Hyper Text Markup Language
HTML is the standard mark up language for crime Web
HTML consist of a series of element
HTML describes the structure of Web page
HTML consist of series of elements
HTML elements, tell the bar How to displs the content
HTML elements label pieces Content such as in "this is a heading","this is a paragraph"

Text Editor

Notepad
Adobe Dreamweaver CC
Notepad ++
Textedit(mac)
Visual Studio Code

File Extensions

As diffferent application software has different extention like

Word File Saved with .docs
Excel file saved with .ppt

To save html file we have to type .html as extention to run it on browser.

HTML basic tags

Format of HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Mojor Parts

A tag name has three major parts:

-Opening tag

-content

-Closing tag

Element without closing tags

Some element don't have content
Opening and closing tags merge into one.

Page 1

Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	My First paragraph	</p>

Other Tags

<br> - Break tag for line break.
<hr> - The <hr> tag define a thematic break in an Html page.
<pre> - The HTML <pre> element defines preformated text.
<img> - To insert image in document.

HTML Headings

HTML headings are titles or subtitles that you want to display on the webpage.
HTML headings are defined with <h1> to <h6> tags
<h1> defines the most important heading <h6> defines the least impotant heading.

HTML Paragraph

The HTML <p> elements defines a paragraph.
A paragraph always starts on a new line,and browser automatically add some white space
before and after a paragraph.

Example

open text editor(Notepad)
Type following example <html>
<body>
<h1>My first heading</h1>
<h2>My second heading</h2>
<hr>
<p>My First pargraph</p>
</body>
</html>
Save file as myfirstpage.html
Run it on your browser.(Chrome,Mozilla etc)

Fonts and Formating

The <font> tag is used to add style, size,and color to the text on your site, Use the size, color and face.
Use a <basefont> tag to set all of your text to the same size,face, and color.

Font Color

set the color of your font.

Page 2

Examle

Font face

Set the color of your font
Example

<p>
<font face="garamond">This pargragraph has had its font...</fonts>
</p>

Other Font Formatting Tags

<Strong> - To bold your text.
<em> - To emplasized or give Italic effect to text.
<U> - Underline tag for underling the text.
<mark> -Marked or underline your text.
<small> - Smaller text than other text.
<del> - Deleated text show strike through line over text.
<ins> - Defines the text that has been inserted into document
<sub> - subscript text(egH₂O).
<sup> - Superscript text (eg X²)
<blockquote> - This tag specifes a section that is quoted from another source.
<q> - Add quotation around the text.
<abbr> - The HTML <abbr>tag defines an abbreviation. Example:- WHO-"World Health Organisation"
<address> - The HTML <address> tag defines the contact information for the author/owner of a
document . The text in the <address> element usually renders in italic.
<bdo> - BDO stands for Bi-directional Override. The HTML <bdo>tag is used to override the current
text direction. Example:- <bdo dir="rtl"> This text will be written from right to left </bdo>

Tags and Attributes

Attribute

Attributes provide extra information about a tag. For instance if we want to place an image on website.
we must tell our browser where the image is located.
Many HTML tags have a unique set of their own attributes. For example if you need to set background color of body, you must use bgcolor attributes of the body tag.
Example

Title attribute

This attributes title an element and adds a tiny text pop-up to any HTML element much like the text
pop-ups of word processing programs.
<h2 title="Hello There!">Titled Heading Tag</h2>
Rollover your mouse over the heading to see the effect of this attribute!

Page 3

Align Attribute

If you wish to change the horizontal location of your elements you may do using the align
attribute. you may align things left, right or center.
Example-

<h2 align="left">Left align heading </h2>
<h2 align="center">Centered Heading </h2>
<h2 align= "right">Right aligned heading </h2>

Note-Attribute Defaults

Many tags are assigned defaults.
For example, a pargraph tag will always align its text to the left unless it has an align attributein it specifying
Otherwise.

Generic Attribute

Attribute	Options	Function
align	right,left,center	Horizontally align tags
bgcolor	numeric, RGB values	numeric, hexidecimal, RCB values
background	URL	places an background image behind an element
width	Numeric Value	Specifies the width of tables, images, or table cells
height	Numeric Value	Specifies the height of tables, images, or table cells
title	User Defined	"Pop-up" title for your elements.
class	User Defined	Classifies an element for use with cascading style sheets.

Comments in HTML

HTML Chracter Entities(Symbols)

There are three parts to every entity.

Example:

There are 3 different types of lists.

Page 4

1. Ordered List(OL)

<ol start="5">
Ordered list types

2. Unordered list

Unordeered list types

3. Defination Terms lists

<dl> - defines the start of the list.
<dt> - defination term.
<dd> - defining defination.

Linking

The <a> tag

Defines an anchor. An anchor can be used in three ways:

1: Linking another Document

To make a link to another webpage/site we use:
HTML code
<a href="http://WWW.intuitinternational.com">Intuit Equacation<a>
This will create a link to Intuit internaional website.

Attributes

Href
Target

2: Bookmark inside document

We use this type of linking to create bookmarks inside a webpage. These bookmarks take you to
desired position in that webpage.
For this purpose we need to do two things.

Page 6

Using file "html links.asp"

Label: This label is called name anchor.
Bookmark: A hyperlink to the label section WITHIN the file "html_links.asp" will look like this:

3: Open Mail client

The type of link opens your default email client with the receiver's email address and subject
inserted automatically.
HTML code: try this code
<a href="mailto:info@intuitinternational.com?Subject=Hello%20again">Send mail

Directory Structure

<a href="mailto:info@intuitinternational.com/images/one.html>
<a href="two.html">
<a href="personal/three.html">
<a href="../four,html">
<a href="google.com/my">

Inserting Images

HTML <img> tag

The img element defines an image.
HTML code

Images Tag Attribute

SRG

URL - Address of image.
The URL of the image to display.

Align

Left and Right

Specifies how to align the image Departed use styles insted

Border

Pixel
Defines the height of an image.

Height

Pixel or %
Defines the height of an image

Hspace

Pixel
Defines white space on the left and right side of the image. Deprecated use style instead

Page 7

Vspace

Pixel
Defines white space on the top and bottom side of the image. Deprecated use style instead

device-width

Pixel or %
Sets the width of an image

Alt

Text
Defines a short description of the image.

Placing floating images

To wrap your text around an image align it left or right
Example

Images as link

<a href="final.htm"><img src="one.jpg" border="0"/></a>

Inserting Pictures

HTML <picture> tag

The HTML <picture> element gives web developers more flexibilities in specifying image resources.
The <picture> element contains One or more <source> elements, each referring to different images
through the srcset attribute. This way the browser can choose the image that best fits the current view
and/or devices.

Example
<picture>
<source srcset="img_food.jpg">
<source srcset="img_car.jpg">
<source srcset="img_girl.jpg">
</picture>

When to use the Picture Element

Bandwidth:- If you have a small screen or device, it is not necessary to load a large image file. The
browser will use the the first <source> element with matching attribute values, and ignore any of the following elements.
Format Support:-Some browser or devices may not support all image formats will use the first formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it
recnore any of the following elemognizes, and ignore any of the following elements.

Media Attribute

Page 8

Tables

Table(Basic tags)

Table are defined with the <table> tag.
A table is divided into rows (with <tr>),around
Each row divided into data (with the <td>). The letter td stands for "table data which is"
content of a data cell.

Heading in a Table

Heading in a table are table are defined with the <th> tag.

<table border="1">
<tr> <th> Heading </th> </tr>
<tr> <th> row1, cell1 </th> </tr>
</table>

TABLE ATTRIBUTE

create a table with

background color or a background image:
- <table bgcolor="red">
- <table background="bgdesert.jpg">
background color or a background image in a cell:
- <td background="bg.jpg">

Rowspan

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

Page 9

Colspan

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

<tr>
<th>Telephone</th>
</tr>
<tr>
<td>55577854</td>
<td>55577855</td>
</tr>

Border attribute

<table border="Thickness">
Example:- <table border="5">

create a table with

NO border
- Border="0"

Heading
- <th>Heading</th>

Empty cells
- use to handle cells that have content.

Create a table with

Caption

<table border="6">
<caption>My Caption</cpation>
<tr>
<td>100</td>
</tr>
</border>

Create table with

cell padding(create more white space between the cell and its borders)
- <table cellpadding="10">
- cell spacing(increase the distance between the cells)
Page 10

Forms

What are Forms

A form is an area where users are allowed to enter information such as their name phone no, email, address, query etc
A form is defined with the <form> tag.

Form tag Attributes

Action:- Specifies the name of the file to send the content to
Method:- The "post" and "get" methods are two different methods for submitting data.

Form Elements

1. TEXT FIELD:-

Text fields allow the user to input text in a single line.

Attribute:

type= 'text':- Set the input field
size = '20':- Sets the width of the field
maxlength = '30':- sets the maximum length of the field
name:- Sets an internal name of the field
value:- Defines intial value in the field

2. TEXT AREA:-

Text areas are text fields that can span several lines.
It is used to enter longer text.

ATTRIBUTES

Rows:- no. of rows to be merged in text area.
Cols:- no. of columns to be merged in text area.
Name:- adds an internal name to the field.

<textarea cols="30" rows="10">
Everything written between these tags will be presented in the textarea box.
</textarea>

3. Select Element:-

To make drop-down menus serve the same purpose radio buttons cone selection
only or check boxes, is that it takes up less space.

Vehicle: <select name="vehicles">
<option value="bike">Bike</option>
<option value="car">car </option>
<option value="cycle">cycle</option>
</select>

ATTRIBUTES for select

Name:- Adds an internal name of the field
Multiply:- Allows multiple choices if yes.
Option:- Individual items in the menu.
Size:- Use the size attribute to specify the number of visible values.

ATTRIBUTES FOR OPTIONS

Selected:- Default select the item
Value:- Value to send if selected

Page 11

4.<fieldset> and <legend> Elements:-

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

5. <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> elements
User will see a drop -down list of the pre-defined options as they input data.

6. <button> Element:-

The <button> element defines a clickable button

<button type="button" oneclick="alert('Hello World!')">Click Me!</button>

Input Types

1. PASSWORD:-

Password fields are similar to text fields. They show dots on the screen to prevent others
from reading the password you type.

<form method="post" action="mailto:info@intuiteducation.org">
Name:<input type="text" size="10" maxlength="40" name="name">
<br/>
Password:<input type="password" size="10" maxlength="10" name="password">
</form≫

2. RADIO:-

Radio Buttons are used to let the user select one and only one option of a limited number of
choices.

ATTRIBUTES

Name:-defines which set of radio buttons that it is a part of
Value:-specifies what will be sent if the user choose this radio button
Checked:-Default check the field.

<input class="radio" name="sex" value="male">Male
<input class="radio" name="sex" value="female">Female

3. CHECKBOXES:-

Checkboxes are used to let user select one or more options of limited number of
choices.

<form>
I have a bike: <input type="checkbox" name="vehicle" value="Bike">
I have a car: <input type="checkbox" name="vehicle" value="Car">
I have a Airplane: <input type="checkbox" name="vehicle" value="Airplane">
</form>

4. SUBMIT:-

Allows the user to submit the information.

Name:- Name of the button
Value:- Text written on the button

5. RESET:-

Allows the user to reset the values entered in the form to the default values.

Name:- Name of the button.
Value:- Text written on the button.

6.Color:-Used for input field that should a color.

7.Date:-Used for input fields that contain a date ,min and max attributes to add restriotions to dates.

8.Datetime-local:-specifies a date and time input field,with no time zone.

9.Email:-Used for input fields that should contain an email address

10.File:-Defines a select field and a "Browser" button for file uploads.

11.Month:-allows the user to selecr a yesr or month.

12.Number:-Defines a numeric input field. You can also set restrictions on what number are accepted by
using max and min attribute.

13.Range:-Defines a control for entering a number whose exact value is not important (like a slider control)

14.Tel:-Used for input fields that should contain a telephone number.

15.Url:-Input type Url.

What are frames?

with frames, you can display more than one HTML document in the same browser window.
Each HTML document is called frame, and each frame is indepdent of the other.

Attribute	Description
checked	Specifies that an input field should be pre-selected when the page loads.
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of chracter for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value aginst
autofocus	Specifies that field should automatically get focus where the page loads.
Attribute	Description
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in chracters) of an input field
step	Specifies the legal number interval for an input field.
value	Specifies the default value for an input field.
placeholder	Specifies short a hint that describes the expected value of an input field.

Introduction to HTML

What is Html?

Text Editor

File Extensions

HTML basic tags

Mojor Parts

Element without closing tags

Other Tags

HTML Headings

HTML Paragraph

Example

Fonts and Formating

Font Size

Font Color

Font face

Other Font Formatting Tags

Tags and Attributes

Attribute

Title attribute

Align Attribute

Note-Attribute Defaults

Generic Attribute

Comments in HTML

HTML Chracter Entities(Symbols)

1. Ordered List(OL)

2. Unordered list

3. Defination Terms lists

Linking

The <a> tag

1: Linking another Document

Attributes

2: Bookmark inside document

Using file "html links.asp"

3: Open Mail client

Directory Structure

Inserting Images

HTML <img> tag

Images Tag Attribute

SRG

Align

Border

Height

Hspace

Vspace

device-width

Alt

Placing floating images

Images as link

Inserting Pictures

HTML <picture> tag

When to use the Picture Element

Media Attribute

Tables

Table(Basic tags)

Heading in a Table

TABLE ATTRIBUTE

create a table with

Rowspan

Colspan

Border attribute

create a table with

Create a table with

Create table with

Forms

What are Forms

Form tag Attributes

Form Elements

1. TEXT FIELD:-

2. TEXT AREA:-

3. Select Element:-

ATTRIBUTES for select

ATTRIBUTES FOR OPTIONS

4.<fieldset> and <legend> Elements:-

5. <datalist> Element

6. <button> Element:-

Input Types

1. PASSWORD:-

2. RADIO:-

ATTRIBUTES

3. CHECKBOXES:-