Scribd
Upload
68 views

Studyleague: Where To Code?

The document provides an introduction to HTML and some of its basic tags and structures. It discusses: - HTML tags like <html>, <head>, <body>, <p>, <h1>-<h6> that define the overall structure and headings. - How HTML documents are defined with tags that generally come in pairs and closing tags have slashes. - Where to write HTML code and how to structure a basic HTML document. - Common text formatting tags like <b>, <i>, <strong>, <em>. - How to add images, links, and basic styling to HTML pages. - Tables can be created with <table>, <tr>, <td

Uploaded by

shubham
Copyright
© © All Rights Reserved
68 views

Studyleague: Where To Code?

The document provides an introduction to HTML and some of its basic tags and structures. It discusses: - HTML tags like <html>, <head>, <body>, <p>, <h1>-<h6> that define the overall structure and headings. - How HTML documents are defined with tags that generally come in pairs and closing tags have slashes. - Where to write HTML code and how to structure a basic HTML document. - Common text formatting tags like <b>, <i>, <strong>, <em>. - How to add images, links, and basic styling to HTML pages. - Tables can be created with <table>, <tr>, <td

Uploaded by

shubham
Copyright
© © All Rights Reserved
You are on page 1/ 12

HTML

HTML,HyperTextMarkupLanguage,isusedtocreatewebpages.HTMLdocumentsare
describedbyHTMLtags.

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

U
D
YL

EA

StructureOfHTMLDocument

Note:Closingtagconsistofaslash(/)beforekeyword.

Herehtml,body,parekeywords.Theyconsistofaopeningtagandaclosingtag.

ST

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>

EA

Sonowletstalkaboutwhatthesetagsreallydo!

1. <!DOCTYPE..>
definesthedocumenttype.DeclarationforHTML5is
<!DOCTYPE
html>

U
D
YL

2. <html>
tagenclosesthecompletehtmlcode.Allothertagsarewritteninside
thistag.

3. <head>
tagrepresentsdocumentheader.

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

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

ST

6. <h1>
tagisusedtodisplayaheading.

7. <p>
tagisusedtodisplayaparagraph.

SothiswasjustanintroductionofHTML5.NowletsstartwithdifferenttypesofHTMLtags,
theirfunctionandtheirattributes.

HTMLDocument

<!DOCTYPEhtml>

ThistagtellsthebrowserthatthedocumenttypeisHTML5.

HTMLtag
<html></html>

Thehtmlcodestartsandendswiththistag.

Bodytag
<body></body>

Bodytagisinside<html>tag.Thecontenttobedisplayedonthewebpageiswritteninthistag.

BasicHTMLTags

U
D
YL

HTMLHeadings

EA

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

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

<!DOCTYPEhtml>

ST

<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.

<p>
Helloi'mParagraph1
</p>

<br>
<p>
ThisisParagraph2
</p>

<!I'macomment>

EA

Commenttag

Commentsarenotdisplayedbythebrowser,buttheyhelpyoutoorganiseyourcode.

U
D
YL

Commentscanbeplacedanywhereasanotificationorhintofwhatthatparticularcodedoes.

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

Smalltext

Deletedtext

EA

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

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

U
D
YL

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

Insertedtext

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

Subscripts

<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

here.

displayedonthewebpage.

EA

3. width:Specifieswidthoftheimage.

2. alt:Iftheimageisnotfoundorcouldnotbedisplayedthenthetextspecifiedhereis

4. height:Specifiesheightoftheimage.

U
D
YL

HTMLwithCSS

CSSstandsforCascadingStyleSheets

StylingcanbeaddedtoHTMLelementsin3ways:

InlineusingastyleattributeinHTMLelements
Internalusinga<style>elementintheHTML<head>section

ST

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>

body{
background

color
:
lightgreen;

}
color
:
blue;

EA

h2{
text

align
:
center;
}
p{

U
D
YL

color
:
yellow;
}

</style>
</head>
<body>

<h2>
Here'stheheading
</h2>

<p>
AYeLLoWparagraph.
</p>

ST

</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>

</html>

styling
.
css
body{

}
h2{
color
:
blue;

U
D
YL

text

align
:
center;

EA

background

color
:
lightgreen;

p{

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>

</tr>

</table>

Tablewithborders

EA

<table

border
=
"1"

style
=
"
width
:
100
%
">

AnHTMLTablewithCollapsedBorders

table
,
th
,
td{

U
D
YL

border
:

1px
solidblack;

border

collapse
:
collapse;
}

Basicsabouttable:

UsetheHTML<table>elementtodefineatable

UsetheHTML<tr>elementtodefineatablerow

ST

UsetheHTML<td>elementtodefineatabledata

UsetheHTML<th>elementtodefineatableheading

UsetheHTML<caption>elementtodefineatablecaption

UsetheCSSborderpropertytodefineaborder

UsetheCSSbordercollapsepropertytocollapsecellborders

UsetheCSSpaddingpropertytoaddpaddingtocells

UsetheCSStextalignpropertytoaligncelltext

UsetheCSSborderspacingpropertytosetthespacingbetweencells

Usethecolspanattributetomakeacellspanmanycolumns

Usetherowspanattributetomakeacellspanmanyrows

Usetheidattributetouniquelydefineonetable

ListinHTML
Orderedlist<ol>

Numbermarkings

Alphabetmarkings

<ol>

<ol

type
=
"1"
>

<li>
Coffee
</li>

<li>
Coffee
</li>

<li>
Tea
</li>

<li>
Tea
</li>

<li>
Milk
</li>

<li>
Milk
</li>

</ol>

</ol>

Numbermarkings

Herethelistitemsaremarkedwithnumbers(default).

<ol

type
=
"A"
>

<li>
Coffee
</li>

<li>
Tea
</li>

EA

<li>
Milk
</li>

U
D
YL

Unorderedlist<ul>

</ol>

Herethedefaultmarkingisdisc.
None

<ul>

<li>
Coffee
</li>

<li>
Tea
</li>

<li>
Milk
</li>

ST

</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>

HTMLformsareusedtocollectuserinput.

The<form>elementdefinesanHTMLform:

<form>
formelements

U
D
YL

</form>

EA

HTMLForms

Formelementsaredifferenttypesofinputelements,checkboxes,radiobuttons,submit
buttons,andmore.

The<input>Element

The<input>elementisthemostimportantformelement.

The<input>elementhasmanyvariations,dependingonthetypeattribute.

<input

type
=
"text"
>
definesaonelineinputfieldfortextinput.

ST

<form>

Firstname:
<br>

<input

type
=
"text"

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

Lastname:
<br>

<input

type
=
"text"

name
=
"lastname"
>
</form>

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

ST

The<button>elementdefinesaclickablebutton.

U
D
YL

EA

You might also like