WebDesigning

IntroductiontoHTML5:

HTML5 is a markup language used to structure webpages and web applications.

This is the latest version of HTML (Hypertext Markup Language), in which new
features and improvements have been made which make web development
easier and powerful. HTML5 was introduced in 2008, and has brought many
changes in web development.

Itsfew keyfeaturesare:

1. New Elements: New semantic elements have been introduced in HTML5,

suchas<header>,<footer>,<article>,and<section>.These elements help in
giving structure to web pages and also optimize them for search engines.
2. Multimedia Support: HTML5 has made it easier to embed multimedia
content. You can add audio and video files directly to webpage swithout
any external plugin by using <audio> and <video> tags.
3. Canvas Element: By using <canvas> element in HTML5 you can create
graphics and animations.It works together with JavaScript and helps in
creating dynamic visuals.
4. Form Enhancements: HTML5 has also enhanced forms. New input types
like email, date, url, and range have been added, which help in
validating user input.
5. Local Storage: HTML5 has the feature of local storage, so you can store
data on the client-side. These are more efficient than cookies and allow
you to store your data in the user's browser.
6. Geolocation API(ApplicationProgrammingInterface):Withthehelpofthis
API you can track the location of the user, which is useful for location-
based services.
What is HTML?

The full form of HTML is Hypertext Markup Language. It is a markup language

that is used to give structure to web pages and web applications. The main
function of HTML is to define content and control its presentation.

Some key features of HTML are:

1. Structure:HTML is used tocreatethestructureofwebpages.Itusestags to

define headings, paragraphs, lists, links, images, and other content.
2. Tags:TagsareusedtodefineelementsinHTML.Eachtagiswrittenin angle
brackets, like <p> (paragraph), <h1> (heading), <a> (link), etc.
3. Attributes:Attributesareusedtoprovideadditionalinformationtotags. For
example, the href attribute in the <a href="url">tag defines the URL of
the link.
4. Cross-Platform:HTMLisstandardforwebbrowsers,soitworkswellon
different devices and platforms.
5. Hyperlinks:AnimportantfeatureofHTMLarehyperlinks,whichconnect one
web page to another. This facilitates users to navigate easily.

HTML is the foundation of web development and together with other

technologiessuchasCSS(CascadingStyleSheets)andJavaScriptmakesweb pages
more interactive and visually appealing.

UnderstandingHTMLTags:

HTMLtagsdefineelementsofwebpages.Eachtaghasaspecificfunction,and these
are usually in the form of opening and closing tags.

Let'sunderstandsomecommonHTML tags:

1. HeadingTags:Thesetagsdefineheadings.
There are 6 levels in HTML:
- <h1>:Highestheading(maintitle).
- <h2>:Somesmallheading.
 - <h3>:Andalsosmallerheading
Example: html
<h1>Thisisamainheading</h1>
<h2>Thisisa subheading</h2>

2. ParagraphTag:Thistag definesparagraphs.
-Tag:`<p>` Example:
html
<p>Thisisaparagraphof text.</p>

3. LinkTag:Thistagdefineshyperlinks,whichtakeuserstoother pages.
- Tag:<ahref="url">
Example:
html
<ahref="https://www.example.com">VisitExample</a>

4. ImageTag:Thistagisused toshow imagesontheweb page.

- Tag:`<imgsrc="image_url"alt="description">
Example:
html
<imgsrc="image.jpg"alt="Abeautifulscenery">

5. ListTags:Thesetagsdefinelists.Therearetwotypesoflists: -
Unordered List (bulleted): `<ul>` and <li> elements.
OrderedList(numbered):<ol>and<li>elements.
Example:
Html
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
 Example:
<ol>
<li>Item1</li>
<li>Item2</li>
</ol>

6. DivTag:Thistag isusedtogroupblocksofcontent.
- Tag:<div>
Example:
html
<div>
<h2>Titleinadiv</h2>
<p>Sometextinadiv.</p>
</div>

7. SpanTag:Thistagisused togroupinlineelements.
- Tag:`<span>`
Example:
html
<spanstyle="color:red;">Thistextisred.</span>
Eachtaghasitsownpurposeandhelpsindefiningthestructureand layout
of the web page.

SettingUptheDocumentStructure&SpecifyingtheDocumentType:

SettingupdocumentstructureisveryimportantinHTML,becauseittellsthe browser
how your document will be rendered.

<!DOCTYPE html> declaration is used in HTML to specify the document type.

ThisdeclarationtellsthebrowserwhichHTMLversionthedocumentbelongsto,
which helps the browser render the page correctly.

Letusunderstandthisindetail:
1. DocumentTypeDeclaration(DOCTYPE):Thisdeclarationtellsthe
browser which HTML version you are using.
Example:
<!DOCTYPEhtml>
ThisletsthebrowserknowthatthisisanHTML5document.

2. HTMLTag:-Thistagdefinesthestartingandendingofthedocument. There
is additional content going on inside it.
Example:
<html></html>

3. HeadSection:-Thissectioncontainsthemeta-informationofthe
document, such as title, character set, styles, etc.
Example:
<head></head>

4. TitleTag:-Thistag definesthetitleofthepage,which isvisibleinthe title

bar of the browser.
Example:
<title>My FirstHTMLPage</title>

5. BodySection:-Thissectioncontainstheactualcontentthatuserssee, such
as text, images, links, etc.
Example:
<body><h1>WelcometoMyPage</h1>
<p>ThisismyfirstHTMLpage.</p></body>
Nowlet'scombineallthesetocreateacomplete HTMLdocument structure:
<!DOCTYPEhtml>
<html>
<head>
<title>My FirstHTMLPage</title>
</head>
 <body>
<h1>WelcometoMy Page</h1>
<p>Thisismy firstHTMLpage.</p>
</body>
</html>

Inthisexample:
<!DOCTYPEhtml>indicatesthatthisisanHTML5document.
<html>tagshowsthebeginningandendofthedocument.
Thereis<title>taginthe<head>sectionwhichsetsthetitleofthe page
as "My First HTML Page".
The<body>sectioncontainscontentthatisvisibletousers,suchas
headings and paragraphs. This basic structure is followed for every
HTML document.

Creating theHTML&Specifyinga Page Title:

"CreatingtheHTML andspecifyingapagetitle" meansthatyouarecreatingan

HTML document and defining the title of that document. HTML (HyperText
Markup Language) is used to create web pages, and the page title is the text
that appears in the browser tab.

Let'sseeanexampleofthis:

html

<!DOCTYPEhtml>

<html>

<head>

<title>My FirstWebPage</title>

</head>
<body>

<h1>Welcometomywebsite!</h1>

<p>Thisismy firstwebpagewhichIhavecreatedinHTML.</p>

</body>

</html>

Inthisexample:

1. <!DOCTYPEhtml>:ThislinetellsthebrowserthatthisisanHTML5document.

2. <html>:ThistagisthestartoftheHTMLdocument.

3. <head>:Thissectioncontainsmetadata,styles,andscripts.

4. <title>MyFirstWebPage</title>:Thislinesetsthe titleofthepage.When you

open this page in the browser, the title will be shown as "My First Web
Page".

5. <body>:Thissectioncontainstheactualcontentthatuserssee,suchas
headings and paragraphs.

Formatting Text by Using Tags: Creating Headings, Applying Bold and

ItalicFormatting,ApplyingSuperscriptandSubscriptFormatting,UsingMonospacea
nd Preformatted Text.

Different tags are used to format text in HTML. Here I will explain headings,
bold,italic,superscript,subscript,monospace,andpreformattedtexttagsand their
use, with examples:

1. Headings:InHTML,headingsarecreatedusingtagsfrom<h1>to<h6>,where
<h1>isthelargestheadingand<h6>isthesmallest. Example:
html

<h1>ThisisH1 Heading</h1>

<h2>ThisisH2 Heading</h2>

<h3>ThisisH3Heading</h3>O

utput:

ThisisH1Heading(biggest)

This is H2 Heading

ThisisH3Heading

2. BoldFormatting:Tomakethetextbold,<strong>or<b>tagisused.

Example:

html

<strong>Thistextisbold</strong>

<b>Thisisalsobold</b>Outpu

t:

Thistextisbold(boldtext)

Thisisalsobold(bold text)

3. ItalicFormatting:Tomakethetextitalic,<em>or<i>tagis used.

Example:

html

<em>Thistextis italic</em>
<i>Thisisalsoitalic</i>Output

Thistextisitalic(italictext)

Thisisalsoitalic(italictext)

4. SuperscriptFormatting:ForSuperscript(textwrittenabove)<sup>tag is
used.

Example:

html

E=mc²O

utput:

E=mc²(here2iswrittenabove)

5. SubscriptFormatting:ForSubscript(textwrittenbelow)<sub>tagisused.

Example:

html

H₂O

Output:

H₂O(here2iswritten below)

6. MonospaceText:ForMonospacefont(in whicheverycharacterisof same

width) <code> tag is used.
Example:

html

<code>print("Hello,World!")</code>

Output:

print("Hello,World!")(inmonospacefont)

7. Preformatted Text: <pre> tag is used for preformatted text, in which the
formattingofthetext(spaces,linebreaks)appears exactlyasyouhavewritten it.

Example:

html

<pre>

Thisispreformattedtext.

Inthis,spacesandlinebreaksappearexactlyasyouhavewrittenit.

</pre>

Output:

Thisispreformattedtext.

Inthis,spacesandlinebreaks appearexactly asyouhavewrittenit.(asitis written)

Byusingthesetags,youcanformatthetextonyourwebpageindifferentways.
UsingListsandBackgrounds:CreatingBulletedandNumberedLists,CreatingDefiniti
on Lists, Inserting Special Characters, Inserting Horizontal Lines,Choosing
Background and Foreground Colors.

ListsandbackgroundsareessentialcomponentsinHTMLfororganizing content and

enhancing the visual appeal of a webpage. Let's break down each of the topics
with definitions, examples, and the corresponding output.

1. CreatingBulletedandNumberedLists:

- BulletedList:Alistwhereeachitemismarkedwithabulletpoint.

- NumberedList:Alistwhereeachitemisnumberedsequentially.

CodeExample:

html

<h3>BulletedList</h3>

<ul>

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

</ul>

<h3>NumberedList</h3>

<ol>

<li>FirstItem</li>

<li>SecondItem</li>

<li>ThirdItem</li>
</ol>

Output:

BulletedList:

- Item 1

- Item 2

- Item 3

NumberedList:

1. FirstItem

2. SecondItem

3. ThirdItem

2. CreatingDefinitionLists:

- Adefinitionlistisusedtodisplaytermsandtheirdefinitions.

Code Example:

html

<h3>DefinitionList</h3>

<dl>

<dt>HTML</dt>

<dd>Amarkuplanguageforcreatingwebpages.</dd>

<dt>CSS</dt>

<dd>Astylesheetlanguagefordescribingthepresentationofa document.</dd>
</dl>

Output:

DefinitionList:

- HTML:Amarkuplanguageforcreatingweb pages.

- CSS:Astylesheetlanguagefordescribingthepresentationofadocument.

Explanation:

InHTML,the<dd>tagisusedfordefinitionlist.Thistagrepresents "definition
description". When you define a term, you use this tag, which is inside <dl>
(definition list).

Thisstructureissomethinglike this:

html

<dl>

<dt>Term</dt>

<dd>Definitionoftheterm.</dd>

</dl>

Here,the<dt>tagdefinestheterm,andthe<dd>tagdescribesthedefinitionof that
term. It is used to explain any term or concept, just like in a dictionary.

3. InsertingSpecialCharacters:

- SpecialcharacterscanbeinsertedusingHTMLentities.

Code Example:

html

<h3>SpecialCharacters</h3>
<p>Lessthan:&lt;</p>

<p>Greaterthan:&gt;</p>

<p>Ampersand:&amp;</p>

Output:

SpecialCharacters:

- Lessthan:<

- Greaterthan:>

- Ampersand:&

4. InsertingHorizontalLines:

- Horizontallinescanbecreatedusingthe<hr>tag.

Code Example:

html

<h3>HorizontalLine</h3>

<p>Thisisabovethe line.</p>

<hr>

<p>Thisisbelowtheline.</p>Output:

Thisisabovethe line.

---------------------

Thisisbelow theline.
5. ChoosingBackgroundandForegroundColors:

- YoucansetbackgroundandtextcolorsusingCSS.

Code Example:

html

<h3>BackgroundandForegroundColors</h3>

<divstyle="background-color:lightblue;color:darkblue;padding:10px;">

This is a text with a light blue background and dark blue text.

</div>

Output:

Thiswilldisplayalightbluebackgroundwithdark bluetext.

Theseexamplescovertheessentialaspectsofusinglistsandbackgroundsin HTML.

CreatingHyperlinksandAnchors-HyperlinkingtoaWebPage,CreatingHyperlinking
to an E-mail Address, Hyperlinking to Other Content.

Hyperlinksandanchorsareusedfornavigationonwebpages.Let'sunderstand these
three concepts:

1. HyperlinkingtoaWebPage:

Itmeanscreating alinktoanotherwebpage.Thisisdonebyusing the<a>tag. Code:

html

<ahref="https://www.example.com">VisitExample</a>Out

put:
Whenyouviewthiscodeinthebrowser,youwillseealinkto"VisitExample". When
you click on this link, you will be sent to "https://www.example.com".

2. Creating HyperlinkingtoanE-mail Address:

Itmeanscreating alinktoanemailaddresssothattheusercansendtheemail directly.

This is also done using the <a> tag, but the mailto: protocol is used.

Code:

html

<ahref="mailto:[email protected]">EmailUs</a>Outp

ut:

Whenyouviewthiscodeinthebrowser,youwillseethelink"EmailUs".When you
click on this link, your default email client will open and enter
"[email protected]" in the recipient field.

3. HyperlinkingtoOther Content:

Thisisalinktospecificcontent,suchasasectionorimage.Inthis,youhaveto use
anchor tags.

Code:

html

<ahref="#section1">GotoSection1</a>

<h2id="section1">Section1</h2>Out

put:

Whenyouviewthiscodeinthebrowser,youwillseethelink"GotoSection1". When
you click on this link, the browser will take you to "Section 1" on the page.
 2ndChapter:StyleSheetsandGraphics

IntroductiontoStyleSheetsandGraphics:

Stylesheetsandgraphicsareveryimportantinwebdevelopment.Letus understand
their introduction:

StyleSheets:

Style sheets are used to design web pages.CSS (Cascading StyleSheets) is the
mostcommonstylesheetlanguage.ItisusedtostyleHTMLelements,suchas
colors, fonts, spacing, and layout.

Example1:ChangingthecolorandfontsizeoftextusingCSS: html

<!DOCTYPEhtml>

<html>

<head>

<style>

body {

background-color:lightblue;

h1{

color: white;

font-size:40px;

<style>
head>

<body>

<h1>WelcometoMy Website</h1>

</body>

</html>

Inthisexample,thebackgroundcolorofthebody islightblueandtheheading color is

white and the font size is 40px.

Graphics:

Graphics are used to display visual elements on web pages. These can be
images,icons,andillustrations.The<img>tagisusedtodisplaygraphicsin HTML.

Example2:Displayinganimageonaweb page:

html

<!DOCTYPEhtml>

<html>

<body>

<h1>MyFavorite Animal</h1>

<imgsrc="https://www.example.com/myimage.jpg"alt="Acuteanimal"
width="300" height="200">

</body>

</html>

In this example, an image is displayed on a web page. The src attribute is the
URLoftheimage,thealtattributeisthedescriptionoftheimage,andthewidth and
height attributes define the size of the image.
UnderstandingStyles,ConstructingStyleRules,CreatingStylesforNestedTags,Apply
ing Styles to Hyperlinks, Creating and Linking to External Style Sheets.

Using styles in web development means that you make your HTML elements
visuallyappealing.Youdefinethesestylesby usingCSS(CascadingStyleSheets). Let's
understand all these concepts:

1. UnderstandingStyles:Stylesmeanhowyouwanttodisplaytheelements of
yourweb page(like headings, paragraphs, images, etc.). CSS styles are
defined through properties and values.
Example:
css
p{
color:blue;/* Textcolorwillbeblue*/
font-size:16px;/*Fontsizewill be16pixels*/
}

2. Constructing Style Rules: Style rules contain selectors, properties, and

values.Theselectoristheelementyouwanttostyle,propertiesarethe
attributes you want to change, and values are the specific settings for
those properties.
Example:
css
h1{
font-family:Arial;/*Heading'sfontwillbeArial*/
text-align:center; /* Text will be center aligned */
}

3. CreatingStylesforNestedTags: WhenyounesttagsinHTML (onetag

within another tag), you can define specific styles for nested tags.
Example:
html
 <div>
<h2>Title</h2>
<p>Thisisa<strong>nested</strong>element.</p>
</div>

css
div pstrong {
color:red;/*Thecolorofthenestedstrongelementwillbered*/
}

4. ApplyingStylestoHyperlinks: Youuseatagtostylehyperlinks.Youcan
define different styles for their hover, visited, and active states.
Example:
css
a{
color:green;/*Thedefaultcolorwillbegreen*/
}
a:hover{
color:orange;/*Thecolorwillbeorangeonhover*/
}

5. CreatingandLinkingtoExternalStyleSheets: Anexternalstylesheetisa
separateCSSfilethatyoulink tofrom yourHTML document. Thisallows you
to use the same styles across multiple HTML pages.
Example:
-CSSfile(styles.css):
css
body{
background-color:lightgray;/*Backgroundcolorwill belightgray*/
}
 -HTMLfile:
Html
<linkrel="stylesheet"type="text/css"href="styles.css"><!--Linkingto
external CSS file -->
Byusingalltheseconcepts,youcanmakeyourwebpagesvisually attractive
and user-friendly.

FormattingTextbyUsingStyleSheets:Specifying afontfamily,SpecifyingaFontSize
and Color, Applying bold and Italics, Applying Strikethrough andUnderlining,
Creating Inline Spans, Adjusting Spacing between letters

Formattingtextusingstylesheets,whichwecallCSS(CascadingStyleSheets),is very
importantin webdesign. With CSS,wecan control theappearanceof text. Let's
understand all these concepts with examples.

1. Specifying aFontFamily:
Withfontfamily,wespecifythefonttypeofthetext. For
example:
css
p{
font-family:Arial,sans-serif;
}
Output:p textwill appearinArial font.\

2. SpecifyingaFontSizeandColor:
Specifyingfontsizeandcolorchangesthesizeandcolorofthetext. For
example:
css
h1{
font-size:24px;
color: blue;
}
Output:H1textwill beof 24pixelssizeandwillappear inbluecolor.
3. ApplyingBoldand Italics:
Tomakethetextboldoritalicweusefont-weightandfont-style. For
example:
css
strong{
font-weight:bold;
}
em {
font-style:italic;
}
Output:ThetextinsideStrongtagwillappearboldandthetextinsideem tag
will appear italic.

4. ApplyingStrikethroughandUnderlining:
Toapplystrikethroughandunderlineweusetext-decoration. For
example:
css
del{
text-decoration:line-through;
}
u{
text-decoration:underline;
}
Output:ThetextofDeltagwillcrosswiththelineandthetextofutag will be
underlined.

5. CreatingInlineSpans:
Inlinespansareusedtostylespecifictext. For
example:
css
.highlight{
background-color:yellow;
 InHTML:
html
<span class="highlight">This is highlighted text.</span>
Output:Thistextwillbehighlightedwithyellowbackground.\

6. AdjustingSpacingbetweenLetters:
Letter-spacingisusedtoadjustspacingbetweenletters. For
example:
Css
h2{
letter-spacing:2px;
}
Output:Therewill beagapof2pixelsbetweenthelettersofH2text.

FormattingParagraphsbyusingstylesheets:IndentingParagaraphsApplyingaBorde
r to a Paragraph, Specifying the Horizontal Alignment of a Paragraph:

Formatting paragraphsusing stylesheets,suchasCSS (CascadingStyleSheets),

meansthatwepresentparagraphsonourwebpageinavisuallyattractiveand
organized way. Let's see the meaning, examples, and output of these three
concepts:

1. IndentingParagraphs:
Indentingmeansgivingalittlespaceatthebeginningofaparagraph,so that it
looks different from the rest of the text. This is often done by shifting the
first line a little to the right.
Example:
css
p{
text-indent:20px;/*willindentthefirstline20pixels*/
}
Output:
Ifyour paragraph"Thisisanexample."
 2. Applyinga BordertoaParagraph:
Bordermeanstocreatealineorboundaryofaparagraph.Ithighlightsthe
paragraph.
Example:
css
p{
border:2pxsolidblack;/*Blackcolor2pixelssolidborder*/
}
Output:
Thiswillcreateablacklinearoundtheparagraph,whichwillmakeit more
prominent.

3. SpecifyingtheHorizontalAlignmentofaParagraph:
Horizontalalignmentmeanswhichwaythetextoftheparagraphwillbe
aligned: left, center, or right.
Example:
css
p{
text-align:center;/*willcenteralignthetext*/
}
Output:
Thiswillplacethetextoftheparagraphinthecenterofthe screen.

Displaying Graphics: Selecting a Graphics Format, Preparing Graphics for

WebUse,InsertingGraphics,ArrangingElementsonthePage,ControllingImageSizea
nd Padding, Hyperlinking from Graphics, Using Thumbnail Graphics,
IncludingAlternate Text for Graphics, Adding Figure Captions

Displayinggraphicsisveryimportanttoeffectivelypresentvisualcontenton web
pages. Let's understand all these topics in a simple way.

1. SelectingaGraphicsFormat:
ItisimportanttoselectgraphicsformatslikeJPEG,PNG,GIF,etc.
 - Example:JPEGisgoodforhigh-qualityimages,whilePNGisbestfor
transparent backgrounds.
- Output:Ifyouarecreatingaphotogallery,thenuseJPEG,butifthere are
icons or logos then PNG would be better.

2. PreparingGraphicsforWebUse:
Itisimportanttooptimizegraphicsfortheweb,sothatloading timeis less.
- Example:Reducingthesizeoftheimageorreducingtheresolution.
- Output:Yourwebsitewillloadquickly,whichwillimprovetheuser
experience.

3. InsertingGraphics:
The<img>tagisused toinsertgraphicsin HTML.
- Example:<imgsrc="image.jpg"alt="Description">
- Output:Theimagewillappearonthewebpage.

4. ArrangingElementsonthePage:
Arrangingelementsonthepageispartoflayout design.
- Example:Using CSStocenterorleftalignelements.
- Output:Yourlayoutwillbevisuallyappealing.

5. Controlling ImageSizeand Padding:

Controllingimagesizeandpaddingmanagesspaceinthelayout.
- Example:Useofwidth,height,andpaddingpropertiesinCSS.
- Output:Imageswillappearproperlysizedandspaced.

6. HyperlinkingfromGraphics:
 Linkingimageswith hyperlinks.
- Example:<ahref="http://example.com"><imgsrc="image.jpg"a
lt="Link"></a>
- Output:Whenauserclicksonanimage,heorshewillbedirectedtothe
specified link.

7. Using ThumbnailGraphics:
Thumbnailsaresmallimagesthatprovideapreviewofalargerimage.
- Example:Smallimagesinagallerythatshowalargerversionwhen
clicked.
- Output:Itiseasyforuserstoviewimages.

8. IncludingAlternateTextforGraphics:
Alternatetext(alttext)isimportantforaccessibility.
- Example:<imgsrc="image.jpg"alt="Abeautifulsunset">
- Output:Iftheimagedoesnotload,thealttextwillappear.

9. AddingFigureCaptions:
Addingcaptionsbelowimageshelpsexplainthem.
- Example: <figure><img src="image.jpg"
alt="Description"><figcaption>Thisisacaption.</figcaption></figure>
- Output:Thecaptionwillappearalongwiththeimage,whichwillprovide
context.

Understandingallthesepointsallowsyoutoeffectivelyusegraphicsonweb pages,
which makes your website visually engaging and user-friendly.

PageLayoutandNavigation–CreatingNavigationalAids,CreatingaText-Basedand
Graphical Navigation Bar, Creating an Image Map, Creating Tables,
Specifying theSizeofaTable,SpecifyingtheWidthofaColumn,MergingTableCells.

Understandthemeanings,examples,andoutputsoftheconceptsofPage Layout
and Navigation:

1. CreatingNavigationalAids:Thesearetoolsthathelpusersnavigatea
website. They are part of menus, breadcrumbs, and search bars.
- Example:
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
-Output:Thiscodecreatesahorizontalmenuwithclickablelinks.

2. CreatingaText-BasedNavigationBar:Thisisasimplenavigationbarthat uses
only text links.
- Example:
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
 - Output:Userswillgettheoptiontoclickon"Home"and"About".

3. CreatingaGraphicalNavigationBar:Thisusesimagesoricons.
Example:
<nav>
<ul>
<li><ahref="home.html"><imgsrc="home-icon.png"alt="Home"></a></li>
<li><ahref="contact.html"><imgsrc="contact-
icon.png"alt="Contact"></a></li>
</ul>
</nav>
-Output:Thisnavigationbarshowslinksthroughimages.

4. CreatinganImageMap:Thisisanimagewithclickableareas.
Example:
<imgsrc="map.png"usemap="#image-map">
<mapname="image-map">
<areashape="rect"coords="34,44,270,350"href="country.html"alt="Count
ry">
</map>
-Output:Userscannavigatetospecificarea by clicking onthe image.

5. CreatingTables:Tablesshowdatainrowsandcolumns.
Example:
<table>
<tr>
 <th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>A</td>
</tr>
</table>
-Output:Thiscreatesasimpletableshowingstudents'namesand grades.

6. SpecifyingtheSizeofaTable:Definingthesizeofatablecontrolsits
overall appearance.
Example:
<tablestyle="width:500px;height:300px;">
- Output:Thisgivesthespecifiedwidthandheighttothe table.

7. SpecifyingtheWidthofaColumn:Settingthewidthofthecolumndefines the
size of each column.
Example:
<table>
<tr>
<tdstyle="width:200px;">Column1</td>
<tdstyle="width:300px;">Column2</td>
</tr>
</table>
-Output:Thesizeofthesecolumnsisdifferent.
 8. MergingTableCells:Bymergingcellsaremergedintoonecell.
Example:
<table>
<tr>
<tdcolspan="2">MergedCell</td>
</tr>
</table>
-Output:Itmergesonecell intotwo columns.

Formatting Tables-Applying Table Borders, Applying Borders by

UsingAttributes,ApplyingBordersbyUsingstyles,ChangingCellPadding,Spacingan
dAlignment, Setting Horizontal and Vertical Alignment.

Tables are essential for organizing data and presenting it clearly. Let’s go
througheachaspectyoumentionedwithdefinitions, examples,andexpected
outputs.

1. ApplyingTableBorders:Bordersarelinesthatdefinetheedgesofcellsin a
table. They help separate data visually.
Example:
Html
<table border="1">
<tr>
<td>Cell 1</td>
 <td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Output:Atablewitha solidborderaroundeachcell.

2. ApplyingBordersbyUsingAttributes:Youcanspecifybordersdirectlyin the
table tag or in the cell tags.
Example:
Html
<table>
<tr>
<tdstyle="border:1pxsolidblack;">Cell1</td>
<tdstyle="border:1pxsolidblack;">Cell2</td>
</tr>
<tr>
<tdstyle="border:1pxsolidblack;">Cell3</td>
<tdstyle="border:1pxsolidblack;">Cell4</td>
</tr>
</table>
Output:Eachcellhasasolidblackborder.

3. ApplyingBordersbyUsingStyles:CSScanbeusedtostylebordersfor
tables.
 Example:
Html
<style>
table{
border-collapse:collapse;
}
td{
border:2pxdashedblue;
}
</style>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Output:Cellshaveadashedblueborder,andbordersarecollapsedfora cleaner
look.

4. ChangingCellPadding:Paddingisthespacebetweenthecellcontentand the
cell border
Example:
Html
<style>
td {
padding:10px;
}
</style>
<table>
<tr>
<td>Cell 1</td>
 <td>Cell 2</td>
</tr>
</table>
Output:Therewillbea10-pixelspaceinsideeachcell,makingthetext look less
cramped.

5. Spacing and Alignment: Spacingreferstothespacebetweencells,and

alignment refers to how content is positioned within the cells.
Example:
Html
<style>
table {
border-spacing:15px;
}
td{
text-align: center; /* Horizontal alignment */
vertical-align:middle;/*Verticalalignment*/
}
</style>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Output:Cellsarespaced15pixelsapart,withcontentcenteredboth
horizontally and vertically.
 6. SettingHorizontalandVerticalAlignment:Youcanaligncontentincells
using the text-align and vertical-align properties.
Example:
Html
<style>
td {
text-align: right; /* Horizontal alignment */
vertical-align:bottom;/*Verticalalignment*/
}
</style>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Output:Thecontentofeachcell isalignedtotherightand bottom.

Creating User Forms – Creating a Basic form – Creating a Textbox, Special Field
types for E-mail and Web Addresses, Creating a Text Area, Creating a Submit or
Clear button, Creating Check Boxes and Option Buttons, Additional Types in
HTML5

User forms are an important component in web development, which are used
to collect data from users. Let's understand all these elements, along with their
meaning, examples, and output.

1. Creating a Basic Form: The basic structure of a form starts with the <form>
tag. Within this, you add different input fields.

Example:
html
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>

Output: This creates a simple form with a text field where the user can enter his
name.

2. Creating a Textbox: Textbox is an input field where the user can enter text.

Example:
html
<input type="text" placeholder="Enter your text here">

Output: This will create a textbox where the user can enter his text.

3. Special Field Types for E-mail and Web Addresses: HTML5 has specific input
types like type="email" and type="url" which provide validation for email and
web addresses.

Example:
html
<input type="email" placeholder="Enter your email">
<input type="url" placeholder="Enter your website URL">

Output: These fields will only accept valid email and URL.

4. Creating a Text Area: Text area is a multi-line input field where user can enter
more text.

Example:
html
<textarea rows="4" cols="50" placeholder="Enter your message
here"></textarea>

Output: This will create a text area where user can enter his message.

5. Creating a Submit or Clear Button: Buttons are used to submit or clear the
form.

Example:
html
<input type="submit" value="Submit">
<input type="reset" value="Clear">

Output: This will create two buttons, one to submit the form and the other to
clear the form.

6. Creating Check Boxes and Option Buttons: Check boxes allow users to select
multiple options, whereas option buttons (radio buttons) allow to select only
one option.

Example:
html
<label><input type="checkbox" name="option1"> Option 1</label>
<label><input type="checkbox" name="option2"> Option 2</label>
<br>
<label><input type="radio" name="choice" value="A">Choice A</label>
<label><input type="radio" name="choice" value="B">Choice B</label>

Output: This will create check boxes and radio buttons, where the user can
select multiple options or a single option.

7. Additional Types in HTML5: HTML5 has introduced new input types like date,
color, number, etc.

Example:
html
<input type="date">
<input type="color">
<input type="number" min="1" max="10">

Output: These fields allow the user to select a date, choose a color, and input
numbers.
Incorporating Sound and Video – What’s New with Audio and Video in HTML5?,
Embedding Video Clips – Introducing the <video> Tag, The <embed> Tag: Your
Fallback Plan, Placing a Video Clip on a Web Page, Incorporating Audio on a Web
Page – Playing Audio with the <audio> Tag, Placing an Audio Clip on a Web
Page.

HTML5 has introduced some new tags for audio and video which make web
development easy and interactive. Let's understand all these in detail.

1. Incorporating Sound and Video: HTML5 has provided the facility to embed
audio and video directly in web pages without any external plugin. This means
that users will not have to install separate software to watch or listen to video
or audio.

2. Embedding Video Clips - Introducing the <video> Tag: <video> tag is used to
embed video clips on web pages. Within this tag you can specify video source,
controls, and additional attributes.

Example:
html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.

</video>

Output: In this example, a video player will be created in which the user can see
play, pause, and volume controls.

3. The <embed> Tag: Your Fallback Plan: The <embed> tag is a fallback option if
the <video> tag is not supported. It is used to embed multimedia content, but it
is not as flexible as the <video> tag.

Example:
html
<embed src="movie.mp4" width="320" height="240" />

Output: If the browser does not support the <video> tag, then this <embed> tag
will display the video.

4. Placing a Video Clip on a Web Page: To place a video clip on a web page, you
only need to use the <video> tag and specify the source file. You can also use
additional attributes such as autoplay, loop, and muted.

Example:
html
<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.

</video>

Output: This video will automatically play, loop, and play without sound.

5. Incorporating Audio on a Web Page – Playing Audio with the <audio> Tag: The
<audio> tag is used to embed audio files on web pages. You can also specify the
source file and controls within this tag.

Example:
html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.

</audio>

Output: In this example, an audio player will be created in which the user can
see the play, pause, and volume controls.

6. Placing an Audio Clip on a Web Page: To place an audio clip on a web page,
you just need to use the <audio> tag and specify the source file. You can also
use autoplay and loop attributes.

Example:
html
<audio autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.

audio>

Output: This audio will automatically play and loop.