Scribd
Upload
95 views

Studyleague: Where To Code?

HTML is used to create web pages. It uses tags to describe and structure content. Common tags include <html> for overall page content, <head> for metadata, <body> for visible content, and other tags like <h1>-<h6> for headings, <p> for paragraphs, and <ul>/<ol>/<li> for unordered and ordered lists. CSS can be used to style and lay out HTML elements.

Uploaded by

shubham
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
95 views

Studyleague: Where To Code?

HTML is used to create web pages. It uses tags to describe and structure content. Common tags include <html> for overall page content, <head> for metadata, <body> for visible content, and other tags like <h1>-<h6> for headings, <p> for paragraphs, and <ul>/<ol>/<li> for unordered and ordered lists. CSS can be used to style and lay out HTML elements.

Uploaded by

shubham
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
You are on page 1/ 13

HTML

HTML,HyperTextMarkupLanguage,isusedtocreatewebpages.HTMLdocumentsare
describedbyHTMLtags.

GenerallyHTMLtagscomeinpair.
Eg.<html></html>,<body></body>,<p></p>

Note:Closingtagconsistofaslash(/)beforekeyword.

St

ud

yL
e

ag

StructureOfHTMLDocument

ue

Herehtml,body,parekeywords.Theyconsistofaopeningtagandaclosingtag.

Wheretocode?
InthebeginningNotepadwilldothejob.Butasyouprogressyoumayuseeditorslike
Notepad++,Sublimetext,etc.
Writeyourcodeinanytexteditor,saveitwiththeextension.htmlandthenrun(open)itin
anywebbrowser.
Tryoutthecodegivenbelowfirst.Thenyoumayeditthecontentsofeachtagtoknowhow
exactlyeachofthemworks.

<!DOCTYPEhtml>
<html>

<head>

<title>
HelloIamTitle!
</title>

</head>

<body>

<h1>
Headinghere!
</h1>

<p>
Iamjustaparagraph...
</p>

</body>
</html>

ue

ag

Sonowletstalkaboutwhatthesetagsreallydo!

html>

yL
e

1. <!DOCTYPE..>
definesthedocumenttype.DeclarationforHTML5is
<!DOCTYPE
2. <html>
tagenclosesthecompletehtmlcode.Allothertagsarewritteninside
thistag.

3. <head>
tagrepresentsdocumentheader.

ud

4. <title>
tagisusedtomentiontitle.Thecontentyouenterinside
<title></title>
displaysthenameofthepage.

5. <body>
tagrepresentsdocumentsbody.Tagslike
<p>
,
<h1>
,
<div>
arewritten

St

insidethistag.

6. <h1>
tagisusedtodisplayaheading.
7. <p>
tagisusedtodisplayaparagraph.

SothiswasjustanintroductionofHTML5.NowletsstartwithdifferenttypesofHTMLtags,
theirfunctionandtheirattributes.

HTMLDocument

<!DOCTYPEhtml>

ThistagtellsthebrowserthatthedocumenttypeisHTML5.

HTMLtag
<html></html>

Thehtmlcodestartsandendswiththistag.

Bodytag

ue

<body></body>

Bodytagisinside<html>tag.Thecontenttobedisplayedonthewebpageiswritteninthistag.

HTMLHeadings
<h1></h1>,...,<h6></h6>

yL
e

BasicHTMLTags

ag

ud

TheHeadingtagisusedfordisplayingheadings.Thefontsizeofheadingdecreasesaswego
from<h1>to<h6>.

<!DOCTYPEhtml>

St

Eg.

<html>

<body>

<h1>
heading1
</h1>

<h2>
heading2
</h2>

<h3>
heading3
</h3>

<h4>
heading4
</h4>

<h5>
heading5
</h5>

<h6>
heading6
</h6>

</body>
</html>

Paragraphtag
<p></p>

Paragraphsaredefinedby<p>taginHTML.
Linebreaktag
<br>tagisusedtodisplaytextonthenextline.
Eg.

ue

<p>
Helloi'mParagraph1
</p>

<br>
<p>
ThisisParagraph2
</p>

ag

Commenttag
<!I'macomment>

yL
e

Commentsarenotdisplayedbythebrowser,buttheyhelpyoutoorganiseyourcode.
Commentscanbeplacedanywhereasanotificationorhintofwhatthatparticularcodedoes.

ud

FormattingElements
Boldtext

<p>
Thistextisnormal.
</p>

St

<p><b>
Thistextisbold
</b>
.
</p>

Importanttext

<p>
Thistextisnormal.
</p>
<p><strong>
Thistextisstrong
</strong>
.
</p>

Italictext

<p>
Thistextisnormal.
</p>

<p><i>
Thistextisitalic
</i>
.
</p>

Emphasizedtext

<p>
Thistextisnormal.
</p>
<p><em>
Thistextisemphasized
</em>
.
</p>

Note:Browsersdisplay<strong>as<b>,and<em>as<i>.
Markedtext

<h2>
HTML
<mark>
Marked
</mark>
Formatting
</h2>

Smalltext

ag

<h2>
HTML
<small>
Small
</small>
Formatting
</h2>

ue

Deletedtext

Insertedtext

yL
e

<p>
Myfavoritecoloris
<del>
blue
</del>
red.
</p>

<p>
Myfavorite
<ins>
color
</ins>
isred.
</p>

Subscripts

ud

<p>
Thisis
<sub>
subscripted
</sub>
text.
</p>

Superscript

St

<p>
Thisis
<sup>
superscripted
</sup>
text.
</p>

LinksinHTML
<a>tagisusedfordefininglinksinHTML
Thedestinationlinkiswritteninsidehrefattributeof<a>tag

Eg.
<a

href
=
"
http://www.studyleague.com
"
>
Checkthisout!
</a>

ImagesinHTML
<img>tagisusedtodisplayimagesonawebpage.
Attributesof<img>tag:
1. src:Thefilelocationisspecifiedherewithitsname.Iftheimagefileispresentinthe
samefolderwheretheHTMLfileispresent,thenyoujustneedtowritethefilename

ue

here.

2. alt:Iftheimageisnotfoundorcouldnotbedisplayedthenthetextspecifiedhereis

ag

displayedonthewebpage.
3. width:Specifieswidthoftheimage.

4. height:Specifiesheightoftheimage.

yL
e

HTMLwithCSS

CSSstandsforCascadingStyleSheets

ud

StylingcanbeaddedtoHTMLelementsin3ways:

InlineusingastyleattributeinHTMLelements

St

Internalusinga<style>elementintheHTML<head>section
ExternalusingoneormoreexternalCSSfiles

InlineCSS

InlinestylingisusedtoapplyauniquestyletoasingleHTMLelement.
Eg.
<h3

style
="
color
:
red
;

fontfamily:Arial
;"
>
Heythere!
</h3>

InternalCSS
Internalstylingisdefinedinthe<head>sectionofanHTMLpage.
ItisusedtodefineastyleforoneHTMLpage.Here<style>tagisused.
Eg.
<!DOCTYPEhtml>
<html>
<head>
<style>
background

color
:
lightgreen;
}
color
:
blue;
text

align
:
center;
p{

yL
e

ag

h2{

ue

body{

color
:
yellow;
}
</style>

ud

</head>
<body>

<h2>
Here'stheheading
</h2>

St

<p>
AYeLLoWparagraph.
</p>

</body>
</html>

ExternalCSS
Anexternalstylesheetisusedtodefinethestyleformanypages.
Herewereferencethe.cssfileinthe<link>taginside<head>tag.
Eg.

<!DOCTYPEhtml>
<html>
<head>
<link

rel
=
"stylesheet"

href
=
"styling.css">
</head>
<body>
<h2>
Here'stheheading
</h2>
<p>
AYeLLoWparagraph.
</p>
</body>

ue

</html>

styling
.
css

ag

body{

background

color
:
lightgreen;
}

yL
e

h2{
color
:
blue;

text

align
:
center;
}
p{

ud

color
:
yellow;
}

St

HTMLTables

Tablesaredefinedwiththe<table>tag.

Tablesaredividedintotablerowswiththe<tr>tag.

Tablerowsaredividedintotabledatawiththe<td>tag.

Atablerowcanalsobedividedintotableheadingswiththe<th>tag.

Eg.

<table

style
=
"
width
:
100
%
">

<tr>

<td>
Jini
</td>

<td>
Jonny
</td>

<td>
50
</td>

</tr>

<tr>

<td>
Steve
</td>

<td>
Jack
</td>

<td>
94
</td>

ue

</tr>
</table>

Tablewithborders

<table

border
=
"1"

style
=
"
width
:
100
%
">

AnHTMLTablewithCollapsedBorders

table
,
th
,
td{

yL
e

ag

border
:

1px
solidblack;

border

collapse
:
collapse;

ud

Basicsabouttable:

UsetheHTML<table>elementtodefineatable

St

UsetheHTML<tr>elementtodefineatablerow
UsetheHTML<td>elementtodefineatabledata

UsetheHTML<th>elementtodefineatableheading

UsetheHTML<caption>elementtodefineatablecaption

UsetheCSSborderpropertytodefineaborder

UsetheCSSbordercollapsepropertytocollapsecellborders

UsetheCSSpaddingpropertytoaddpaddingtocells

UsetheCSStextalignpropertytoaligncelltext

UsetheCSSborderspacingpropertytosetthespacingbetweencells

Usethecolspanattributetomakeacellspanmanycolumns

Usetherowspanattributetomakeacellspanmanyrows

Usetheidattributetouniquelydefineonetable

ListinHTML
Orderedlist<ol>
Herethelistitemsaremarkedwithnumbers(default).
Numbermarkings

<ol>

<ol

type
=
"1"
>

<li>
Coffee
</li>

<li>
Coffee
</li>

<li>
Tea
</li>

<li>
Tea
</li>

<li>
Milk
</li>

<li>
Milk
</li>

<li>
Milk
</li>

</ol>

</ol>

</ol>

Unorderedlist<ul>

<ol

type
=
"A"
>

<li>
Coffee
</li>

ag

<li>
Tea
</li>

yL
e

Alphabetmarkings

ue

Numbermarkings

Herethedefaultmarkingisdisc.

<ul>

ud

None

<li>
Coffee
</li>

<li>
Tea
</li>

St

<li>
Milk
</li>
</ul>

Disc

<ul

style
=
"
list

style

type
:
disc
"
>

<li>
Coffee
</li>

<li>
Tea
</li>

<li>
Milk
</li>
</ul>

Circle

<ul

style
=
"
list

style

type
:
circle
"
>

<li>
Coffee
</li>

<li>
Tea
</li>


<li>
Milk
</li>
</ul>
<ul

style
=
"
list

style

type
:
square
"
>

Square

<li>
Coffee
</li>

<li>
Tea
</li>

<li>
Milk
</li>
</ul>

HTMLForms
HTMLformsareusedtocollectuserinput.

The<form>elementdefinesanHTMLform:

ag

</form>

yL
e

<form>
formelements

ue

Formelementsaredifferenttypesofinputelements,checkboxes,radiobuttons,submit
buttons,andmore.

ud

The<input>Element

The<input>elementisthemostimportantformelement.

The<input>elementhasmanyvariations,dependingonthetypeattribute.

St

<input

type
=
"text"
>
definesaonelineinputfieldfortextinput.

<form>

First
name
:<
br>

<input

type
=
"text"

name
=
"firstname"
><br><br>

Last
name
:<
br>

<input

type
=
"text"

name
=
"lastname">
</form>

HTMLDivElement
The<div>elementisakindofcontainer.
ItisusedtodividetheHTMLpageintosections.
Itcanbeusedtogroupelementsforstylingpurposes

<!DOCTYPEhtml>
<html>

<body>

ue

<div

style
=
"
background

color
:
black
;
color
:
white
;
padding
:
20px
;
"
>

<h2>
WhatisDiv?
</h2>

<p>
HTMLDivElement(s)The
<div>
tagisnothingmorethana

ag

containerunitthatencapsulatesotherpageelementsanddivides
theHTMLdocumentintosections.Webdevelopersuse
<div>
elements
togrouptogetherHTMLelementsandapplyCSSstylestomany

</div>

</body>
</html>

ud

yL
e

elementsatonce.
</p>

St

Somemoretags:

The<select>Element(DropDownList)

The<select>elementdefinesadropdownlist:
<select

name
=
"cars">

<option

value
=
"volvo"
>
Volvo
</option>

<option

value
=
"saab"
>
Saab
</option>

<option

value
=
"fiat"
>
Fiat
</option>

<option

value
=
"audi"
>
Audi
</option>
</select>


The<textarea>Element

The<textarea>elementdefinesamultilineinputfield.

The<button>Element

The<button>elementdefinesaclickablebutton.

St

ud

yL
e

ag

ue

You might also like