Scribd
Upload
3 views7 pages

HTML Introduction

HTML (Hyper Text Markup Language) is the foundational language for creating web pages, utilizing markup tags to structure content. Key elements include headings, paragraphs, lists, tables, images, and forms, each defined by specific tags. HTML documents are plain text files with a .html extension, and they can be viewed in web browsers to display formatted content.

Uploaded by

227y1a0218
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views7 pages

HTML Introduction

HTML (Hyper Text Markup Language) is the foundational language for creating web pages, utilizing markup tags to structure content. Key elements include headings, paragraphs, lists, tables, images, and forms, each defined by specific tags. HTML documents are plain text files with a .html extension, and they can be viewed in web browsers to display formatted content.

Uploaded by

227y1a0218
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML Introduction

HTMLCommontags:-

HTML is the building block for web pages. HTML is a format that tells a computer how to
display a web page. The documents themselves are plain text files with special "tags" or codes
that a web browser uses to interpret and display information on your computer screen.

 HTML stands for Hyper TextMarkupLanguage


 An HTML file is a text file containing small mark up tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have html file extension.

HTML Tags:- HTMLtags are used to mark-up HTMLelements .HTMLtags are surrounded by
the two characters < and >. The surrounding characters are called angle brackets. HTML tags
normally come in pairs like and The first tag in a pair is the start tag, the second tag is the
endtag . The text between the start and end tags is the element content . HTML tags are not case
sensitive, <B>means the same as<b>.
Themost importanttagsin HTMLaretags thatdefineheadings,paragraphs andlinebreaks.

Tag Description
<!DOCTYPE...> Thistagdefines thedocumenttypeandHTMLversion.
<html> ThistagenclosesthecompleteHTMLdocument andmainlycomprisesof
documentheaderwhich isrepresentedby<head>...</head> and document
bodywhichisrepresentedby<body>...</body>tags.
<head> Thistagrepresentsthedocument'sheaderwhichcankeepotherHTMLtags like
<title>, <link> etc.
<title> The<title>tagis used inside the <head>tagto mention the document title.
<body> Thistagrepresentsthedocument's bodywhichkeeps otherHTMLtags like
<h1>,<div>, <p>etc.
<p> Thistagrepresentsa paragraph.
<h1>to <h6> Definesheader1toheader6

<br> Insertsasinglelinebreak

<hr> Definesahorizontalrule

<!--> Definesacomment

Headings:-
Headingsaredefinedwiththe<h1>to<h6>tags.<h1>definesthelargestheadingwhile<h6> defines
the smallest.
<h1>Thisisa heading</h1>
<h2>Thisisaheading</h2>
<h3>Thisisaheading</h3>
<h4>Thisisaheading</h4>
<h5>Thisisaheading</h5>
<h6>Thisisaheading</h6>
Paragraphs:-

Paragraphsaredefinedwiththe<p>tag.Thinkofaparagraphasablockoftext.Youcanusethe align
attribute with a paragraph tag as well.

<palign="left">Thisisa paragraph</p>
<palign="center">thisisanotherparagraph</p>
Note: You must indicate paragraphs with <p> elements. A browser ignores any
indentationsorblanklinesinthesourcetext.Without<p>elements,thedocumentbecomes
onelargeparagraph.HTMLautomaticallyaddsan extrablankline beforeandafter a paragraph.

Line Breaks:-
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it. It is similar to single spacing in a
document.
This Code output
<p>This<br>isapara<br>graphwith This
is a para
linebreaks</p> graphwithlinebreaks

HorizontalRuleTheelementisusedforhorizontalrulesthatactasdividersbetweensections like this:

Thehorizontalruledoesnothaveaclosingtag.Ittakesattributessuchasalignandwidth
Code Output
<hrwidth="50%" align="center">

Samplehtmlprogram
<!DOCTYPEhtml>
<html>
<head>
<title>Thisisdocumenttitle
</title>
</head>
<body>
<h1>Thisisa heading</h1>
<p>Documentcontentgoeshere........</p>
</body>
</html>
 Typetheaboveprograminnotepadandsavewithsomefilenameeg:sample.html
 Openthefilewithbrowser andthe webpagelooks likethis

Lists:-HTMLofferswebauthorsthreewaysforspecifyinglistsofinformation. All
lists must contain one or more list elements. Lists are of three types
1) Unorderedlist
2) Ordered
List
3)Definitionli
st

HTMLUnorderedLists:Anunorderedlistisacollectionofrelateditemsthathavenospecial
orderorsequence. This list iscreatedbyusingHTML<ul>tag. Each item in thelistismarked with
a bullet.
Example

<!DOCTYPEhtml>
<html>
<head>
<title>HTMLUnorderedList</title>
</head>
<body>
<ul><li>Beetroot</li>
<li>Ginger</li><li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

HTMLOrderedLists:-items arenumberedlistinstead ofbulleted,Thislist iscreatedbyusing


<ol>tag.

<!DOCTYPEhtml>
<html>
<head>
<title>HTMLOrdered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
WebT</html>
echnologies Page9
HTML Definition Lists:- HTMLand XHTMLsupports a list style which is called definition
listswhereentriesarelistedlikeinadictionaryorencyclopedia.Thedefinitionlististheideal wayto
present a glossary, list of terms, or other name/value list. Definition List makes use of
following three tags.
1). <dl>-Defines thestart ofthe list
2). <dt>-A term
3). <dd>-Termdefinition
4). </dl>-Definesthe endof thelist

<!DOCTYPEhtml>
<html>
<head>
<title>HTMLDefinitionList</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt><dd>ThisstandsforHyperTextMarkupLanguage</dd>
<dt><b>HTTP</b></dt><dd>ThisstandsforHyperTextTransferProtocol</dd>
</dl>
</body>
</html>

HTMLtables:
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
intorowsandcolumnsofcells.TheHTMLtablesarecreatedusingthe<table>taginwhichthe
<tr>tagisused tocreatetablerows and <td>tagis usedto createdatacells.

Example:
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLTables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row1, Column1</td><td>Row 1,Column 2</td>
</tr>
<tr><td>Row2,Column1</td><td>Row2,Column2</td>
</tr>
</table>
</body>
TableHeading: Tableheadingcan bedefined using<th>tag. This tagwillbeput to replace
<td>tag,whichisusedtorepresentactualdatacell.Normallyyou willputyourtoprowastable heading
as shown below, otherwise you can use <th> element in any row.
TablesBackgrounds: settable backgroundusingoneof thefollowingtwoways:
1) bgcolorattribute- Youcanset backgroundcolorforwholetableorjustforonecell.
2) backgroundattribute -Youcansetbackgroundimageforwholetableorjustforonecell.You can
also set border color also using bordercolorattribute.

<!DOCTYPEhtml>
<html>
<head>
<title>HTMLTables</title></head>
<body>
<tableborder="1"bordercolor="red"bgcolor="yellow">
<tr><th>Name</th>
<th>Salary</th></tr>
<td>Jayapal</td><td>50,000.00</td>
</tr>
<tr><td>Ravi</td><td>45,000.00</td>
</tr>
</table>
</body>
</html>

Images are very important to beautify as well as to depict many complex concepts in simple
way on your web page.
Insert Image:
insert anyimageinthewebpagebyusing<img>tag.
<imgalign="left|right|middle|top|bottom">
AttributeValues

Value Description
WebTechnologies Page11
left Align the image to the left

right Align the image to the right <imgsrc="ImageURL"...attributes-


middle Align the image in the middle
top Aligntheimageatthetop

bottom Aligntheimageatthebottom
Example

<!DOCTYPEhtml>
<html>
<head>
<title>UsingImagein Webpage</title>
</head>
<body><p>SimpleImageInsert</p>
<imgsrc="test.png"alt="Test Image"/>
</body>
</html>

HTMLFORMS:
HTML Forms are required 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. A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application. There are
variousformelementsavailableliketextfields,textareafields,drop-downmenus,radiobuttons,
checkboxes, etc.

<formaction="ScriptURL"method="GET|POST">formelementslikeinput,textareaetc.</form>
HTML frames: These are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into frames in a similar way the tables
are organized: into rows and columns.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> horizontal
frames and cols attribute defines vertical frames. Each frame is indicated by<frame> tag and it defines
which HTML document shall open into the frame.

Note: HTML<frame>Tag.NotSupportedinHTML5.

<framesetcols="25%,50%,25%">
<framesrc="frame_a.htm">
<framesrc="frame_b.htm">
<framesrc="frame_c.htm">
</frameset>

<!DOCTYPEhtml>
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<iframesrc="sample1.html"height="400"width="400"frameborder="1">
<h1>ThisisaHeading</h1>
<p>Thisisaparagraph.</p>
</iframe>
</body>
</html>

WebTechnologies Page7

You might also like