Scribd
Upload
7 views8 pages

HTML Short Note

The document provides a comprehensive overview of HTML elements and their descriptions, including structure tags like <html>, <head>, and <body>, as well as formatting tags such as <b>, <i>, and <u>. It also covers form elements like <input>, <textarea>, and <select>, along with multimedia tags for images, audio, and video. Additionally, it explains hyperlink and list tags, offering examples for each to illustrate their usage.

Uploaded by

Saman Balasooriya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views8 pages

HTML Short Note

The document provides a comprehensive overview of HTML elements and their descriptions, including structure tags like <html>, <head>, and <body>, as well as formatting tags such as <b>, <i>, and <u>. It also covers form elements like <input>, <textarea>, and <select>, along with multimedia tags for images, audio, and video. Additionally, it explains hyperlink and list tags, offering examples for each to illustrate their usage.

Uploaded by

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

uQ,sl HTML fla;

Wiq,kh (Tag) úia;rh (Description)


<!DOCTYPE> f,aLkfha j¾.h úia;r lrhs (Defines the document type)
<html> HTML f.dkqjl tll wdrïNh olajhs (Defines an HTML document)
<head> HTML f.dkqj ms<sn| úia;r olajhs' (Defines information about the document)
<title> wka;¾cd,h ;=< Tnf.a fjí wvúh y÷kajd §u i|yd fhdokq ,nk YS¾I ud;Dldj
igyka lsÍu i|yd fhdÞ .kq ,nhs' (Defines a title for the document)
<body> HTML File tll wka;¾.;fha wdrïNh olajhs (Defines the document's body)
<h1> isg <h6> HTML YS¾I ^headings&/ud;Dld j¾. 6la ksrEmKh lrhs ^1-6& (Defines HTML
headings)
<p> fÊohl wdrïNh ksrEmKh lrhs (Defines a paragraph)
<br> f¾Ld ì÷ula ^line break& ,nd foa' ysia fma<shla ,nd fohs' fï Tag tfla fjk;a
lsisjla we;=,;a fkdfõ' (empty tag) (Inserts a single line break)
<hr> ;sria brla ,nd fohs (Defines a thematic change in the content)
<!--...--> HTML újrK ^Comments& (Defines a comment)

HTML yeviõ .ekajqu ^Formatting&


Tag Description
<b> ;o wl=re ^Bold text& ,nd .ekSu i|yd (Defines bold text)
<b>This text is bold</b>
<blockquote> Wmqgd .ekSula oelaùu i|yd (Defines a section that is quoted from another source )
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization.
</blockquote>

<center> ueog tfl,a, lsÍu i|yd (Defines centered text)


<center>This text will be center-aligned.</center>
<em> wjOdrKh lrk ,o wlaIr oelaùu i|yd (Defines emphasized text)
<em> This text is emphasized</em>

<font> wlaIr yeviõ .ekaùu i|yd (Defines font, color, and size for text)
<p><font color="red" face="verdana" size="6" >This is some text!</font></p>

• wlaIrj, úYd,;ajh (SIZE) - Value Size of the font in points, it can be


absolute or relative. Specifying
<FONT SIZE = n >
▪ n ys w.h 1 iy 2 l=vd m%udK i|yd;a (Small Size)
▪ n ys w.h 3 idudkH m%udKh i|yd;a (Normal Size)
▪ n ys w.h 4 isg 7 olajd úYd, m%udK i|yd;a (Large Size) fhdÞ .efka'
• wlaIrj, j¾Kh (COLOR) - Colour The colour of the enclosed text. <FONT
COLOR ="#RRGGBB">
• wlaIrj, j¾.h (FACE) - List The font faces of the text.
<i> we, wl=re ^Italic Text& - Defines a part of text in an alternate voice or mood
<i> This text is italic</i>
1
<pre> Defines preformatted text

<q> flá Wmqgd .ekSula oelaùu i|yd (Defines a short quotation)


<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q>We hope they succeed.</p>

<small> l=vd wlaIr (Defines smaller text)


This is some normal text.
<small>This is some smaller text.</small>

<strong> jeo.;a f;dr;=re oelaùu i|yd (Defines important text)


This is a normal text. <strong>This is a Strong text</strong>

<sub> Defines subscripted text


H<sub> 2 </sub> O

<sup> Defines superscripted text


x<sup>2</sup>+ 3y

<u> há bÍ iys; wl=re^Underlined Text&- Defines text that should be stylistically


different from normal text
HTML fmdaru (Forms and Input)
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
Single-line <form action="/action_page.php">
text input <label for="fname">First name:</label>
controls <input type="text" id="fname" name="fname">
</form>

Wm,laIK (Attributes)

• Type- Indicates the type of input control and for text input control it will be set
to text.
• Name- Used to give a name to the control which is sent to the server to be
recognized and get the value.
• Value- This can be used to provide an initial value inside the control.
• Size- Allows to specify the width of the text-input control in terms of
characters.
• Maxlength- Allows to specify the maximum number of characters a user can
enter into the text box.

2
Password <label for="pwd">Password:</label>
input <input type="password" id="pwd" name="pwd" minlength="8">
controls
Wm,laIK (Attributes)
• Type- Indicates the type of input control and for password input control it will
be set to password.
• Name- Used to give a name to the control which is sent to the server to be
recognized and get the value.
• Value- This can be used to provide an initial value inside the control.
• Size- Allows to specify the width of the text-input control in terms of
characters.
• Maxlength- Allows to specify the maximum number of characters a user can
enter into the text box.
<textarea> Defines a multiline input control (text area)
Multiple-Line Text Input Controls
<textarea rows="4" cols="50" name="comment">
Enter text here...</textarea>

<label for="w3mission">W3Schools' mission:</label>


<textarea id="w3mission" rows="3" cols="50">
</textarea>

Wm,laIK (Attributes)
Name- Used to give a name to the control which is sent to the server to be
recognized and get the value.
• Rows- Indicates the number of rows of text area box.
• Cols- Indicates the number of columns of text area box
checkbox <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>

Wm,laIK (Attributes)
• Type- Indicates the type of input control and for checkbox input control it will
be set to checkbox.
• Name- Used to give a name to the control which is sent to the server to be
recognized and get the value.
• Value- The value that will be used if the checkbox is selected.
• Checked- Set to checked if you want to select it by default.
radio <p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

3
Wm,laIK (Attributes)

• Type- Indicates the type of input control and for checkbox input control it will
be set to radio.
• Name- Used to give a name to the control which is sent to the server to be
recognized and get the value.
• Value- The value that will be used if the radio box is selected.
• Checked- Set to checked if you want to select it by default.
date Èkhla wdodkh i|yd
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

file f.dkqjla wdodkh i|yd


<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">

• file_extension - Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user
can pick from
• audio/* - The user can pick all sound files
• video/* - The user can pick all video files
• image/* - The user can pick all image files
reset <input type="reset" value="Reset">

Submit <input type="reset" value="Reset">

number <label for="quantity">Quantity (between 1 and 5):</label>


<input type="number" id="quantity" name="quantity" min="1" max="5">

time <label for="appt">Select a time:</label>


<input type="time" id="appt" name="appt">

email <label for="email">Enter your email:</label>


<input type="email" id="email" name="email">

<button> Defines a clickable button


<button type="button" onclick="alert('Hello world!')">Click Me!</button>

Submit and Reset buttons


<form action="/action_page.php" method="get">
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>

4
<select> ,ehsia;=jla ieliSug (Defines a drop-down list)

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Wm,laIK (Attributes)
• Name - Used to give a name to the control which is sent to the server to
be recognized and get the value.
• Size- This can be used to present a scrolling list box.
• Multiple - If set to "multiple" then allows a user to select multiple items from
the menu.
<option> ,ehsia;=jlg wx.hla tl;= lsÍug (Defines an option in a drop-down list)
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<label> f,an,hla tla lsÍug (Defines a label for an <input> element)
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
<fieldset> fmdaruhl Wmdx. ldKav lsÍug (Groups related elements in a form)
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>

5
<legend> fieldset ys ud;Dldj fh§ug (Defines a caption for a <fieldset> element)
<legend>Personalia:</legend>

HTML rEm ^Images&


Tag Description
<img> fjí msgqjlg mska;+r f.dkqjla fh§ug (Defines an image)
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
Wm,laIK (Attributes)
• src - rEmfhys uQ,dY% f.dkqj we;s ia:dkh
• alt - rEmh msgqj u; o¾Ykh lsÍug w;ßlaiqjg fkdyelsjk wjia:djl § rEmh oelaúh
hq;= ia:dkfha úl,am mdGhla m%o¾Ykh lsÍug
• title - rEmh i|yd ud;Dldjla fh§u i|yd' rEmh u; uQislh ;enQ úg o¾Ykh fõ'
• height - rEmfha Wi
• width - rEmfha m<,

Audio / Video
Tag Description
<audio> Y%jH f.dkqjla fjí msgj q lg iïnkaO lsÍu (Defines sound content)
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag. </audio>
<source> f.dkqjl uQ,dY%h msysàu
Defines multiple media resources for media elements (<video>, <audio> and
<picture>)
<video> ùäfhda f.dkqjla fjí msgqjlg iïnkaO lsÍu (Defines a video or movie)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag. </video>

Html wê iïnkaOl ^Hyperlinks&


Tag Description
<a> Defines a hyperlink
fjk;a msgqjla yd iïnkaO lsÍug HTML j,§ Hyper Links Ndú;d fõ'
<a href="url">Text to be displayed</a>
• href iïnkaOlh iys; ia:dkfha ,smskh
• target ine¢ f,aLkh újD;jk ljq¿j ks¾Kh lsÍu
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
<a href="https://www.w3schools.com/" target="_blank">

HTML ,ehsia;= ^lists&


Tag Description
<ul> Defines an unordered list
ksYamámdá.; ,ehsia;= fyda nq,á; ,ehsia;= ^Unordered List or Bulleted List - ul&
<ul style="list-style-type: circle">
<ul type="disc|circle|square">
6
disc Default. A filled circle
circle An unfilled circle
square A filled square
<ol> Defines an ordered list
mámdá.; fyda wxlkh l< ,ehsia;= ^Ordered List or Numbered List - ol&
<ol type= "a">
<ol type="1|a|A|i|I">
1 Default. Decimal numbers (1, 2, 3, 4)
a Alphabetically ordered list, lowercase (a, b, c, d)
A Alphabetically ordered list, uppercase (A, B, C, D)
i Roman numbers, lowercase (i, ii, iii, iv)
I Roman numbers, uppercase (I, II, III, IV)
<li> ,ehsia;=fõ we;s tl whs;uhla olajh (Defines a list item)
<dl> úia;rd;aul ,ehsia;= fyda ks¾jdÉ; ,ehsia;= ^Description List or Definition List -dl&
<dt> Defines a term/name in a description list
<dt> Wiq,kh moh ^Term& w¾: olajhs
<dd> Defines a description of a term/name in a description list
<dd> Wiq,kh tla tla moh úia;r lrhs

HTML j.= ^Tables&


Tag Description
<table> j.=jla ieliSug (Defines a table) <table border = "1" cellpadding = "5"
cellspacing = "5">
border - fldaI i|yd udhsï f¾Ld oelaùug
id - j.=j i|yd wkkH jQ ye÷kqï wxlhla ,nd §u i|yd
cellpadding -
cellspacing -

<caption> j.=jlg ud;Dldjla ,nd §ug (Defines a table caption)


<caption>Monthly savings</caption>
<th> j.=jg ;Sre kdu we;=<;a lsÍug (Defines a header cell in a table)
<tr> j.=jg fma<s tla lr .ekSug (Defines a row in a table)
<td> we;=<;a l< fma,s ;Srej,g fjka lsÍug (Defines a cell in a table)
colspan , rowspan

msgqfõ wdlD;sh ieliqu i|yd (Styles and Semantics)


Tag Description
<div> f,aLkfha fjka l< fldgila oelaùug Defines a section in a document
Html <div> Wiq,kh
<div> Wiq,kh Ndú; lrkafka mdolh ^footer&" YS¾Ilh ^Header&" jï fldgi"
ol=Kq fldgi" jeks fldgiaj,g iïmQ¾K msgqj fn§ugh' tneúka fuu Wiq,kh
HTML uQ,dx. iuQyhla LdKavhla f,i ieliSug fhdod .kS'
<header> f,aLkhl YS¾Ilh oelaùug (Defines a header for a document or section)
<article><header>
<h1>Most important heading here</h1>
<h2>Less important heading here</h2>
7
<p>Some additional information here.</p>
</header><p>Lorem Ipsum dolor set amet....</p></article>
<footer> f,aLkhl mdolh oelaùug (Defines a footer for a document or section)
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a
href="mailto:[email protected]">[email protected]</a>.
<section> f,aLkfha fldgila oelaùug (Defines a section in a document)
<section>
<h2>WWF</h2>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

You might also like