INTRODUCTION FOR HTML

INTRODUCTION TO HTML
HTML uses markup tags to describe web pages.
Tim Berners-Lee
HTML stands for Hyper-Text Markup Language (HTML) is the World Wide
Web’s primary language.
HTML is not a programming language.
A markup language a set of markup tags.

Web sites and Browser
What is Web-sites?
A website is a collection of publicly accessible, interlinked Web pages that share a single
domain name. Websites can be created and maintained by an individual, group, business
or organization to serve a variety of purposes. Together, all publicly accessible websites
constitute the World Wide Web(www). For example, Facebook , Twitter etc…
what is Web Browser?
A web browser, or simply "browser," is an application used to access and view websites. Common web
browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Apple Safari.
For example,

HTML Elements and Tags
A tag is always enclosed in angle bracket <>like <HTML>
HTML tags normally come in pairs like
<HTML> and </HTML> i.e.
Start tag = <HTML> End tag =</HTML>
Start and end tags are also called opening tags and closing tags

HTML Page Structure
<HTML> - Describe HTML web page that is to be viewed by a web browser.
<HEAD> - This defines the header section of the page.
<TITLE> - This shows a caption in the title bar of the page.
<BODY> - This tag show contents of the web page will be displayed.

HOW TO START
Notepad
Write html code in notepad.
Save the file with (.Html)/(.Htm) extension.
View The Page In Any Web Browser Viz. INTERNET EXPLORER, Google Chrome
,Firfox ,Opera Etc.
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents
and display them correctly
Web Browsers

A Simple HTML Document
<HTML>
<HEAD>
<TITLE>
MY FIRST PAGE
</TITLE>
</HEAD>
<BODY>
MANAL SOFTECH PVT LTD
</BODY>
</HTML>

With a wealth of new features,XHTML 1.0 was
are
A work in Progress intends to replace HTML
3.2,HTML 4 and XHTML 1.x
HTML Version
1995HTML 2.0
1997 HTML 3.2
1999HTML 4.01
2000 XHTML 1.0
2014HTML 5
Developed by the IETF ”s HTML Working Group
Which Closed in 1995.
W3C Recommendation for HTML which
represented the consensus on HTML features
for 1996,HTML 3.2 as tables,applets,text-flow
around images .While providing backwards
compatibility with the existing HTML 2.0
Standard.
Added Support for more multimedia options,
scripting laguages,style sheets. Better printing
facilities and documents that are more
accessible to users with disabilities

HTML Heading Tags
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
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>

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

HTML Paragraph Tags
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
<p>This is A Paragraph</p>
<p>This is a another Paragraph</p>
Open tag<p> and Close tag</p> are Define.
Default alignment left to right.

The HTML <br> element defines a line break.
Example,
<p>This is<br>a paragraph<br>with line breaks.</p>
Use <br> if you want a line break (a new line) without starting a new paragraph:
HTML Line Break & Horizontal Line Tag

HTML Line Break & Horizontal Line Tag
The <hr> element is used to separate content (or define a change) in an HTML page:
The <hr> tag defines a thematic break in an HTML page, and is most often displayed
as a horizontal rule.
Example,
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<super>
<ins>
<del>
<tt>
<u>
<strike>
Defines bold text
Defines big text
Defines emphasized text
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text
Defines teletype text
Defines underline text
Defines strike text
Text Formatting Tags

Font Tag
This element is used to format the size, typeface and color of the enclosed
text.
Commonly used fonts for web pages are Arial, Comic Sans MS , Lucida Sans
Unicode, Arial Black, Courier New, Times New Roman, Arial Narrow, Impact,
Verdana.
The size attribute in font tag takes values from 1 to 7.

Attributes
Font =“2”
Color=“red”
face=“New Roman”

Background & Text Color Tag
The attribute bgcolor is used for changing the back ground color of the page.
<body bgcolor=“Green” >
Text is use to change the color of the enclosed text.
<body text=“White”>

– Left alignment<align=“left”>
– Right alignment<align=“right”>
–Center alignment <align=“center”>
Text Alignment Tag
It is use to alignment of the text.

Hyperlink Tag
A hyperlink is a reference (an address) to a resource on the web.
Hyperlinks can point to any resource on the web: an HTML page, an image, a
sound file, a movie, etc.
The HTML anchor element <a>, is used to define both hyperlinks and anchors.
<a href="url">Link text</a>
The href attribute defines the link address.
<a href="http://www.facebook.com/">FACEBOOK</a>

Image Tag
To display an image on a page, you need to use the src attribute.
src stands for "source".
value of the src attribute is the URL of the image you want to display on your
page.
It is a empty tag.
<IMG SRC ="url">
<IMG SRC="picture.gif“>
<IMG SRC="picture.gif“ HEIGHT="30" WIDTH="50">

<img>
<Src>
<Alt>
<Width>
<Height>
<Border>
<Hspace>
<Vspace>
<Align>
<background>
Defines an image
display an image on a page,Src stands
for "source".
Define "alternate text" for an image
Defines the width of the image
Defines the height of the image
Defines border of the image
Horizontal space of the image
Vertical space of the image Align
an image within the text
Add a background image to an HTML
page
Image attributes - <img> tag

<table>
<tr>
<td>
<th>
<Caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot>
<Cellspacing>
<Cellpadding>
<Colspan>
<rowspan>
<Border>
used to create table
table is divided into rows
each row is divided into data cells
Headings in a table
caption to the table
Defines groups of table columns
Defines the attribute values for one or
more columns in a table
Defines a table head
Defines a table body
Defines a table footer
amount of space between table cells.
space around the edges of each cell
No of column working with will span
No of rows working with will span
attribute takes a number
HTML Table Tag

Header
<html><body>
<h4>Horizontal Header:</h4>
<table border="1">
<tr> <th>Name</th>
<th>Loan No</th>
<th>Amount</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>5000</td></tr> </table><br><br>
<h4>Vertical Header:</h4>
<table border="5">
<tr> <th>Name</th>
<td>Jones</td> </tr>
<tr> <th>Loan No</th>
<td>L-1</td> </tr>
<tr> <th>Amount</th>
<td>5000</td></tr> </table>
</body></html>

<html>
<body>
<h3>Table without
border</h3>
<table>
<tr> <td>MILK</td>
<td>TEA</td>
<td>COFFEE</td> </tr>
<tr> <td>400</td>
<td>500</td>
<td>600</td> </tr>
</table>
</body>
</html>
Code & Result of the Table

Table Code with Colspan & Rowspan
<html>
<head>
<title>Cell that spans two columns:</title>
</head>
<body>
<h4>Cell that spans two columns:</h4>
<table border="4">
<tr> <th>Name</th>
<th colspan="2">Loan No</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>L-2</td> </tr> </table>
<h4>Cell that spans two rows:</h4>
<table border="8">
<tr> <th>Name</th>
<td>Jones</td></tr><tr>
<th rowspan="2">Loan No</th>
<td>L-1</td></tr><tr>
<td>L-2</td></tr></table>
</body>
</html>

<html>
<body>
<table border="1">
<caption>My Caption</caption>
<tr>
<td>Milk</td>
<td>Tea</td>
</tr>
<tr>
<td></td>
<td>Coffee</td>
</tr>
</table>
</body>
</html>
Table Code with Caption & ColSpacing

<html><body>
<h3>Without cellpadding:</h3>
<table border="2" bgcolor="green">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
<h4>With cellpadding:</h4>
<table border="8"
cellpadding="10" background="file:///C:/WINDOWS/
FeatherTexture.bmp">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
</body></html>
Cellpadding,Image & Backcolor Code

</>
HTML
HTML FORM
Tutorial in Hindi
Part 9

Lists provide methods to show item or element sequences in document
content. There are three main types of lists:
HTML List Tag
– Unordered lists:-unordered lists are bulleted.
– Ordered lists:- Ordered lists are numbered.
– Definition lists:- Used to create a definition list

List Tags
<LI>
<OL>
<UL>
<DL>
<DT>
<DD>
<LI> is an empty tag,it is used for
representing the list items
Ordered list
Unordered list
Defines a definition list
Defines a term (an item) in a definition
list
Defines a description of a term in a
definition list

The TYPE attribute has the following value like:-
– TYPE = "1" (Arabicnumbers)
– TYPE = "a" (Lowercasealphanumeric)
– TYPE = "A" (Uppercasealphanumeric)
– TYPE = "i" (Lowercase Romannumbers)
– TYPE = "I" (Uppercase Romannumbers)
By default Arabic numbers are used
Ordered HTML List
<ol type=“1”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

• TYPE attribute to the <UL> tag to show
different bullets like:-
–Disc
–Circle
–Square
<ul style="list-style-type:disc;">
• The attribute TYPE can also be used with
<LI> element.
Unordered HTML List

HTML Description Lists
A description list is a list of terms, with a
description of each term.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

The syntax:-
<form>
.
input elements
.
</form>
HTML Form
A form is an area that can contain form element, form tag are attributes .action ,method or
target
Form elements are elements that allow the user to enter information in a form. like text
fields, textarea fields, drop-down menus, radio buttons and checkboxes etc .A form is defined
with the <form> tag.

<form>
<input>
<text>
<textarea>
<password>
<label>
<option>
<select>
<button>
<value>
<checkbox>
<dropdown box>
Defines a form for user input
used to create an input field
Creates a single line text entry field
Defines a text-area (a multi-line text input control)
Creates a single line text entry field. And the
characters entered are shown as asterisks (*)
Defines a label to a control
Creates a Radio Button.
Defines a selectable list (a drop-down box)
Defines a push button
attribute of the option element.
select or unselect a checkbox
A drop-down box is a selectable list
Form Tags

Code of the HTML Form
<html><body><form>
<h1>Create a Internet Mail Account</h1>
<p>First Name <input type="text" name="T1" size="30"></p>
<p>Last Name <input type="text" name="T2" size="30"></p>
<p>Desired Login Name <input type="text" name="T3" size="20">
@mail.com</p>
<p>Password <input type="password" name="T4" size="20"></p>
<input type="radio" checked="checked" name="sex" value="male" />
Male</br>
<input type="radio" name="sex" value="female" /> Female
<p>Birthday <input type="text" name="T6" size="05">
<select size="1" name="D2">
<option>-Select One-</option>
<option>January</option>
<option>February</option>
<option>March</option> </select>
<input type="text" name="T7" size="10"></p>
TypeYourself<textarea rows="4" name="S1" cols="20"></textarea>
<br><input type="submit" value="Accept" name="B1"> <input
type="reset“ value="Cancel" name="B2"></br> </form></body></html>

INTRODUCTION FOR HTML

More Related Content

What's hot

Similar to INTRODUCTION FOR HTML

Recently uploaded

INTRODUCTION FOR HTML

Editor's Notes