Scribd
Upload
12 views37 pages

Introduction to HTML Basics

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements represented by tags that structure the content. The document outlines various aspects of HTML, including its versions, structure, tags, attributes, and formatting elements, along with examples. Key components such as headings, paragraphs, links, images, and comments are also discussed, providing a comprehensive introduction to HTML.

Uploaded by

netradaxini959
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
12 views37 pages

Introduction to HTML Basics

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements represented by tags that structure the content. The document outlines various aspects of HTML, including its versions, structure, tags, attributes, and formatting elements, along with examples. Key components such as headings, paragraphs, links, images, and comments are also discussed, providing a comprehensive introduction to HTML.

Uploaded by

netradaxini959
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

1 INTRODUCTION TO HTML

What is HTML?
HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language.


 HTML was invented by Berners-Lee.
 HTML describes the structure of Web pages using markup.
 HTML elements are the building blocks of HTML pages.
 HTML elements are represented by Tags.
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so
on…
 Browsers do not display the HTML tags, but use them to render the content of the
page.

HTML Versions

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

HTML Editors Browsers


 Notepad  Google Chrome
 Notepad++  Mozilla Firefox
 SubLime Text  Opera
 Dream Viewer  Internet Explorer
 NetBeans etc..  Safari etc...
2 INTRODUCTION TO HTML

HTML Tags
 There are two types of tags..
o Container Tag / Pair Tag
o Singular Tag / Unpair Tag

Syntax :

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>


 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the
tag name

HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

 The <!DOCTYPE html> declaration defines this document to be HTML5.


 The <html> element is the root element of an HTML page.
 The <head> element contains meta information about the document.
 The <title> element specifies a title for the document.
 The <body> element contains the visible page content.
3 INTRODUCTION TO HTML

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body [bgcolor=“color-name”] => Set Background color for body
[text=“color-name”] => Set Text / Font Color in body
[link=“color-name”] => Set Link color in body
[alink=“color-name”] => Set Active Link color in body
[vlink=“color-name”] => Set Visited Link color in body
[background=“url”] > => Set a Background Image in body

</body>
</html>

Heading Tag
 The <h1> element defines a large heading.

Syntax:

<hx [title=“text”] => add tips for any Heading tags


[align=“center|left|right”] => align text left, right or center in a page >
</hx>
X = 1, 2, 3, 4, 5, 6
4 INTRODUCTION TO HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Creative College Of Computer Application</h1>


<h2>Creative College Of Computer Application</h2>
<h3>Creative College Of Computer Application</h3>
<h4>Creative College Of Computer Application</h4>
<h5>Creative College Of Computer Application</h5>
<h6>Creative College Of Computer Application</h6>

</body>
</html>

Font Size :

Tag Font Size


Normal Text 16px ( Times New Roman )
<h1> 32px
<h2> 24px
<h3> 18px
<h4> 16px
<h5> 13px
<h6> 10px

HTML Comment Text


 With comments you can place notifications and reminders in your HTML code.

Syntax :

<!-- Write your comments here -->


5 INTRODUCTION TO HTML

BR Tag :
<br> => Break Row

 The <br> tag inserts a single line break.


 The <br> tag is useful for writing addresses or poems.
 The <br> tag is an empty tag which means that it has no end tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

Be not afraid of greatness.<br>


Some are born great,<br>
some achieve greatness,<br>
and others have greatness thrust upon them.

</body>
</html>

HTML Formatting Elements

 In the previous chapter, you learned about the HTML style attribute.
 HTML also defines special elements for defining text with a special meaning.
 HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
 Formatting elements were designed to display special types of text:

 <p> - Paragraph text

o The <p> tag defines a paragraph.


o Example:
 <p> This is some text in a paragraph. </p> .
o Output:
 This is some text in a paragraph.
6 INTRODUCTION TO HTML

 <b> - Bold text


o To display text with BOLD effect we can use <B> tag.
o Example:
 This is normal text - <b>and this is bold text</b>.
o Output:
 This is normal text - and this is bold text.

 <strong> - Important text


o The <strong> tag is used to define text with strong importance.
o Example:
 This is normal text - <strong> and this is Important text</strong> .
o Output:
 This is normal text - and this is Important text.

 <i> - Italic text


o The content inside is typically displayed in italic.
o Example:
 This is normal text - <i> and this is Italic text</i> .
o Output:
 This is normal text - and this is Italic text.

 <em> - Emphasized text


o The <em> tag is used to define emphasized text.
o Example:
 This is normal text - <em> and this is Emphasized text</em> .
o Output:
 This is normal text - and this is Emphasized text.
7 INTRODUCTION TO HTML

 <address>
o The <address> tag defines the contact information for the author/owner of a
document or an article.
o The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.
o Example:
 <address>
Written by Creative.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
o Output:
 Written by Creative .
Visit us at:
[Link]
Box 564, Disneyland
USA

 <cite>
o The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a
movie, a painting etc.).
o The text in the <cite> element usually renders in italic.
o Example:
 <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
o Output:
 The Scream by Edward Munch. Painted in 1893.
 <dfn>
o The <dfn> tag stands for the "definition element", and it specifies a term that is
going to be defined within the content.
8 INTRODUCTION TO HTML

o Example:
 <p><dfn>HTML</dfn> is the standard markup language for creating web
pages.</p>
o Output:
 HTML is the standard markup language for creating web pages.
 <code>
o The <code> tag is used to define a piece of computer code.
o The content inside is displayed in the browser's default monospace font.
o Example:
 <p>The HTML <code>button</code> tag defines a clickable button.</p>
o Output:
 The HTML button tag defines a clickable button.
 <samp>
o The <samp> tag is used to define sample output from a computer program.
o The content inside is displayed in the browser's default monospace font.
o Example:
 <p><samp>File not found.<br>Press F1 to continue</samp></p>
o Output:
File not found.
Press F1 to continue

 <kbd>
o The <kbd> tag is used to define keyboard input.
o The content inside is displayed in the browser's default monospace font.
o Example:
 <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
 <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
o Output:
 Press Ctrl + C to copy text (Windows).
 Press Cmd + C to copy text (Mac OS).
9 INTRODUCTION TO HTML

 <strike> / <del> / <s>


o The <strike> tag was used in HTML 4 to define strikethrough text.
o The <del> tag defines text that has been deleted from a document.
o The <s> tag specifies text that is no longer correct, accurate or relevant.
o Example:
 <p>Price <strike>350$</strike> 300$</p>
 <p>Price <del>350$</del> 300$</p>
 <p>Price <s>350$</s> 300$</p>
o Output:
 Price 350$ 300$
 <sup>
o The <sup> tag defines superscript text.
o Superscript text appears half a character above the normal line, and is
sometimes rendered in a smaller font.
o Example:
 <p>X <sup>2</sup></p>
o Output:
 X2

 <sub>
o The <sub> tag defines subscript text.
o Subscript text appears half a character below the normal line, and is sometimes
rendered in a smaller font.
o Example:
 <p>H <sup>2</sup>O</p>
o Output:
 H2O
10 INTRODUCTION TO HTML

 <big>
o The <big> tag was used in HTML 4 to define bigger text.
o Example:
 <p> This is a normal paragraph. </p>
 <big> This is a bigger paragraph. </big>
o Output:
 This is a normal paragraph.
 This is a bigger paragraph.
 <small>
o The <small> tag was used in HTML 4 to define smaller text.
o Example:
 <p> This is a normal paragraph. </p>
 <big> This is a smaller paragraph. </big>
o Output:
 This is a normal paragraph.
 This is a smaller paragraph.

 <pre>
o The <pre> tag defines preformatted text.
o The text will be displayed exactly as written in the HTML source code.
o Example:
 <pre> Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks</pre>

o Output:
11 INTRODUCTION TO HTML

 <font>
o The <font> tag was used in HTML 4 to specify the font face, font size, and color
of text.
o Syntax:
 <font color=”color-name” size=”number (1 to 7)” face=”font-name”
>…Content Here…</font>
o Example:
 <font color=”red” size=”4” face=”calibri”> Hellooo…! Good Afternoon
</font>
o Output:

 Hellooo…! Good Afternoon


 <hr>
o The <hr> element is most often displayed as a horizontal rule that is used to
separate content (or define a change) in an HTML page.
o Syntax:
 <hr [align=”left | center | right”]
[size=”Pixel”] => Height
[width=”Pixel or Percent”]
[color=”color-name”]>
o Example:
12 INTRODUCTION TO HTML

o Output:

 <marquee>
o The <marquee> tag is a container tag of HTML is implemented for creating
scrollable text or images within a web page from either left to right or top to
bottom.
o Syntax:
<marquee [behavior=“Scroll | Slide | Alternate”]
[direction=“Left | Right | Up | Down”]
[loop=“1 | 2 | …N”]
[scrollamount=”number”]
[bgcolor=“Color Name”]
[height=“pixels”]
[width=“pixels”] >……</marquee>

o Example:
 <marquee behavior="scroll" direction="up" scrollamount="1">Slow
Scrolling</marquee>
 <marquee behavior="scroll" direction="right" scrollamount="12">Little
Fast Scrolling</marquee>
 <marquee behavior="scroll" direction="left" scrollamount="20">Fast
Scrolling</marquee>
 <marquee behavior="scroll" direction="right" scrollamount="50">Very
Fast Scrolling</marquee>
13 INTRODUCTION TO HTML

 <a>
o The <a> tag defines a hyperlink, which is used to link from one page to another.
o The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
o Syntax:
<a [href=“URL”]
[target=“_blank”] >…</a>

o Example:
 <a href="[Link] target="_blank">Visit [Link]!</a>
o Output:
 Visit [Link]

 <img>
o The <img> tag is used to embed an image in an HTML page.
o The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed
o Syntax:
<img [alt=“AlternativeText]
[border=“border-width”]
[height=“pixels”]
[width=“pixels”]
[hspace=”pixels”] => Horizontal Margin
[vspace=“pixels”] > => Vertical Margin

o Example:
<img src=”your image path here” width=”500” border=”5” alt=”Creative
College” >
14 INTRODUCTION TO HTML

o Image Map:
 The HTML <map> tag defines an image map.
 An image map is an image with clickable areas.
 The areas are defined with one or more <area> tags.
 To map an image we have to follow some special steps.
1. Set #mapname to image by <IMG>
2. Use MAP tag <MAP>
3. Specify AREA with LINK using <AREA>
 Syntax :
<map name="[mapname]">
<area shape="[rect, circle]" coords="x1,y1,x2,y2" href="URL ">
</map>
 Example :
<img src="[Link]" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="[Link]">
<area shape="rect" coords="290,172,333,250" href="[Link]">
<area shape="circle" coords="337,300,44" href="[Link]">
</map>
15 INTRODUCTION TO HTML

o How Does it work ?

 Shape=”rect”
o The coordinates for shape="rect" come in pairs, one for the x-axis and
one for the y-axis.
o So, the coordinates 34,44 is located 34 pixels from the left margin and
44 pixels from the top:
16 INTRODUCTION TO HTML

o The coordinates 270,350 is located 270 pixels from the left margin and
350 pixels from the top:

o Now we have enough data to create a clickable rectangular area:

<area shape="rect" coords="34, 44, 270, 50" href="[Link]">


17 INTRODUCTION TO HTML

 Shape=”circle” :
o To add a circle area, first locate the coordinates of the center of the
circle:
337,300

o Then specify the radius of the circle:


44 pixels
18 INTRODUCTION TO HTML

o Now you have enough data to create a clickable circular area:


<area shape="circle" coords="337, 300, 44" href="[Link]">
19 INTRODUCTION TO HTML

List Creation Tags


 <ol> - Ordered List
o <li> - List Item
 <ul> - Unrdered List
o <li> - List Item
 <dl> - Description List
o <dt> - Defination Term
o <dd> - Defination Desription

 <ol> - Ordered List :


o The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
o The <li> tag is used to define each list item.
o Syntax :
<ol [start=”value”] [type=”A | a | I | I | 1”] [reversed]>
<li>……..</li>
</ol>
o Example :
<ol start=”5” type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
o Output :
E. Coffee
F. Tea
G. Milk
20 INTRODUCTION TO HTML

 <ul> - Unordered List :


o The <ul> tag defines an unordered (bulleted) list.
o Use the <ul> tag together with the <li> tag to create unordered lists.
o Syntax :
<ul [type=”disc | circle | square”] >
<li>……..</li>
</ul>
o Example :
<ul type=”square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
o Output :
 Coffee
 Tea
 Milk

 <dl> - Description List :


o The <dl> tag defines a description list.
o The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd>
(describes each term/name)..
o Syntax :
<dl >
<dt>……..</dt>
<dd>……..</dd>
</dl>
o Example :
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
21 INTRODUCTION TO HTML

o Output :
Coffee
Black hot drink
Milk
White cold drink

o Embed:
o The <embed> tag defines a container for an external resource, such as a web
page, a picture, a media player, or a plug-in application.
o Syntax :
<embed [type="image/jpg | text/html | video/webm"]
src="URL" width="px" height="px">

o Example :
<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">

o Output :

o Example :
<embed type="text/html" src="[Link]" width="500" height="200">
<embed type="video/webm" src="video.mp4" width="400" height="300">
22 INTRODUCTION TO HTML

Tables in HTML
o The <table> tag defines an HTML table.
o An HTML table consists of one <table> element and one or more <tr>, <th>, and <td>
elements.
o The <caption> tag defines a Table Caption.
o The <tr> element defines a Table Row.
o The <th> element defines a Table Header.
o The <td> element defines a Table Cell.

 <table> :
o Syntax:

<table align="[left | center | right]"


border="value"
width="value/percent"
height=" value/percent"
bordercolor="color"
bgcolor="color"
cellpadding="value"
cellspacing="value">…..</table>

 <caption> :
o Syntax:

< caption align="[left | center | right]">………</caption>

 <tr> :
o To add a new row in a table we must use TR tag
o Syntax:

<tr bgcolor="color">………</tr>
23 INTRODUCTION TO HTML

 <th> :
o The text in <th> elements are bold and centered.
o Each table header is defined with a <th> tag.
o Syntax:

<th align="[left | center | right]"


valign="[bottom | middle | top]"
width="pixel"
height=" pixel"
bgcolor="color"
colspan="value"
rowsapn="value">…..</th>
 <td> :
o Each table data/cell is defined with a <td> tag.
o Syntax:

<td align="[left | center | right]"


valign="[bottom | middle | top]"
width="pixel"
height=" pixel"
bgcolor="color"
colspan="value"
rowsapn="value">…..</td>

 Example : Design a web page to display TABLE as given…


24 INTRODUCTION TO HTML

HTML Code:
<table border="1" width="50%" cellpadding="10" align="center">
<tr>
<th>No.</th>
<th>Full Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Bill Gates</td>
<td>Founder of Microsoft</td>
<td>$1000</td>
</tr>
<tr>
<td>2</td>
<td>Steve Jobs</td>
<td>Founder of Apple</td>
<td>$1200</td>
</tr>
<tr>
<td>3</td>
<td>Larry Page</td>
<td>Founder Google</td>
<td>$1100</td>
</tr>
<tr>
<td>4</td>
<td>Mark Zuckerberg</td>
<td>Founder of Facebook</td>
<td>$1300</td>
</tr>
</table>

Example : Design a web page to display TABLE as given…


25 INTRODUCTION TO HTML

Frames in HTML
o When we wan to use more then one HTML files in a web page, at that time we have
to use FRAMES.
o Tags used for FRAMES.
o <frameset>
o <frame>
o <frameset>
o To define frameset and numbers of frames in rows or column format. Nobody
TAG will used with Frameset.
o Syntax:

<frameset [Cols=“Number” | Rows=“Number“] [Border=“Pixel”]


[BorderColor=“Color”] [FrameBorder=“Yes|No] >Frames</frameset>

o Example:

<frameset rows=“10,10,10”>
<!-- Three Frames in Three Rows -->
</frameset>
<Frameset cols=“20,80”>
<!-- Two Frames in Two Columns -->
</frameset>
o <frame>
o To define Frame for Frameset, we have to use <Frame> Tag.
o Syntax:

<Frame src=“Source/URL” [BorderColor=“Color”]


[FrameBorder=“Yes|No”] [MarginHeight=“Pixel”] [MarginWidth=“Pixel”]
[Scrolling=“Yes|No|Auto”] [NoResize] [Title=“Tips”] >
o Example:

<frameset rows="20,20,20">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
26 INTRODUCTION TO HTML

o <iframe>:
o The <iframe> tag specifies an inline frame.
o An inline frame is used to embed another document within the current HTML
document.
o Syntax:
<iframe src="URL" width="pixel/percent" height="pixel">
</iframe>

o Example:
<iframe src="[Link] width="50%" height="700">
</iframe>
27 INTRODUCTION TO HTML

HTML Form Elements


o An HTML form is used to collect user input.
o The user input is most often sent to a server for processing.
o Syntax:

<form method="[ get | post ] " action="URL" name="form name">


form elements
</form>

 The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
 Form Methods :
o GET :
 Get method will DISPLAY all the information of page in to URL.
 Note : Some of Browser will note display information on URL by
GET...
o POST :
 POST method will HIDE all the information of page in to URL.

<input> Elements

 The HTML <input> element is the most used form element.


 An <input> element can be displayed in many ways, depending on the type attribute.

Type Description
<input type="text"> Displays a single-line text input field
<input type="password"> Displays text as a password
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="reset"> Reset form controls
<input type="button"> Displays a clickable button
28 INTRODUCTION TO HTML

o Syntax:
<input type=“Control Type”
[Name=“Name of Control”]
[Value=“DefaultValue”]
[MaxLength=“IntLen”]
[Size=“InputBoxLen”]
[ReadOnly][Disabled]
[Align=“Left|Right”]
[Checked=“Checked”] >

 <textarea> :
o The <textarea> tag defines a multi-line text input control.
o The <textarea> element is often used in a form, to collect user inputs like
comments or reviews.
o The size of a text area is specified by the <cols> and <rows> attributes (or with
CSS).
o Syntax :
< textarea [Name=“Control Name”]
[Cols=“IntColumns”]
[Rows=“IntRows”]
[Disabled] [ReadOnly]
[Wrap=“Off | Physical”] >
Default Text…
</ textarea >

Example :
< textarea cols="22" rows="4" placeholder="Address"></ textarea >
29 INTRODUCTION TO HTML

 <select> :
o The <select> element is used to create a drop-down list.
o The <select> element is most often used in a form, to collect user input.
o Syntax:
< select [Name=“Control Name”]
[Disabled] [Multiple]
[Size=“Input Num of Character”] >
<option>….</option>
</select>

 <option> :
o The <select> element is used to create a drop-down list.
o The <select> element is most often used in a form, to collect user input.
o Syntax:
<option [Name=“Control Name”]
[Value=“Initial Value”]
[Selected]>…….</option>

Example :

< select >


<option>--Select City--</option>
<option>Surat</option>
<option>Vapi</option>
<option>Baroda</option>
<option>Valsad</option>
<option>Navsari</option>
</ select >
30 INTRODUCTION TO HTML

Design a Student Data Entry Form using form and input elements.

HTML Code :
<form method="post" action="">
<table border="1" cellpadding="10" cellspacing="0">
<caption><font size="5" color="red">Student Detail Form</font></caption>
<tr>
<td>Roll No. :</td>
<td>
<input type="text" name="" size="5" placeholder="Roll no.">
</td>
</tr>
<tr>
<td>Name :</td>
<td>
<input type="text" name="" placeholder="Enter Name">
</td>
</tr>
<tr>
<td>Address :</td>
<td>
<textarea cols="22" rows="4" placeholder="Address"></textarea>
</td>
</tr>
31 INTRODUCTION TO HTML

<tr>
<td>Date of Birth :</td>
<td>
<select>
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>.</option>
<option>31</option>
</select>
<select>
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>.</option>
<option>December</option>
</select>
<select>
<option>Year</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>.</option>
<option>2020</option>
</select>
</td>
</tr>
<tr>
<td>Gender :</td>
<td>
<input type="radio" name="gender" checked="">Male
<input type="radio" name="gender">Female
</td>
</tr>
<tr>
<td>Hobby :</td>
<td>
<input type="checkbox" name="">Cricket<br>
<input type="checkbox" name="">Reading<br>
<input type="checkbox" name="">Travelling<br>
<input type="checkbox" name="">Dancing<br>
<input type="checkbox" name="">Singing
</td>
</tr>
32 INTRODUCTION TO HTML

<tr>
<td>Username :</td>
<td>
<input type="text" name="" placeholder="Enter Username">
</td>
</tr>
<tr>
<td>Password :</td>
<td>
<input type="password" name="" placeholder="Enter Password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="" value="Button">
<input type="submit" name="" value="Submit">
<input type="reset" name="" value="Reset">
</td>
</tr>
</table>
</form>
33 INTRODUCTION TO HTML

HTML5 – Overview

o HTML5 is the next major revision of the HTML standard. HTML5 is a standard for
structuring and presenting content on the World Wide Web.
o HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
Web Hypertext Application Technology Working Group (WHATWG).
o Syntax:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
Your Content Here...
</header>
<nav>
Your Content Here...
</nav>
<section>
<article>
Your Content Here...
</article>
<article>
Your Content Here...
</article>
<aside>
Your Content Here...
</aside>
</section>
<footer>
Your Content Here...
</footer>
</body>
</html>
34 INTRODUCTION TO HTML

o HTML5 comes with a lot of flexibility and it supports the following features :
 Uppercase tag names.
 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional

o The following tags have been introduced for better structure :


 <header>
 This tag represents the header of a section.
 <nav>
 This tag represents a section of the document intended for navigation.
 <section>
 This tag represents a generic document or application section.
 <article>
 This tag represents an independent piece of content of a document, such
as a blog entry or newspaper article.
 <aside>
 This tag represents a piece of content that is only slightly related to the
rest of the page.
 <dialog>
 This tag can be used to mark up a conversation.
 <figure>
 This tag can be used to associate a caption together with some
embedded content, such as a graphic or video.
 <footer>
 This tag represents a footer for a section and can contain information
about the author, copyright information, et cetera.

o The following tags have been introduced for better structure :


o Some attributes are defined globally and can be used on any element, while
others are defined for specific elements only.
o All attributes have a name and a value and look like as shown below in the
example.
35 INTRODUCTION TO HTML

What is Canvas ?
o The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
o It can be used to draw graphs, make photo compositions or do simple (and not so
simple) animations.
o Here is a simple <canvas> element which has only two specific attributes width and
height.
o Example :

<!DOCTYPE HTML>
<html>
<head>
<title>My Canvas</title>
</head>
<body>
<canvas id="demo" width="100“ height="100"></canvas>

<script>
var canvas = [Link]("demo");
var ctx = [Link]("2d");
[Link] = "#FF0000";
[Link](0, 0, 80, 80);
</script>
</body>
</html>

o Output :
36 INTRODUCTION TO HTML

o Audio:
o The <audio> tag is used to embed sound content in a document, such as music
or other audio streams.
o There are three supported audio formats in HTML: MP3, WAV, and OGG.
o To play an audio file in HTML, use the <audio> element:
o Syntax :
<audio controls>
<source src="Your path here"

type="[audio/mpeg | audio/ogg | audio/wav] ">


</audio>

o Example :

<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

o Output :

o Video:
o The <video> tag is used to embed video content in a document, such as a movie
clip or other video streams.
o The <video> tag contains one or more <source> tags with different video
sources. The browser will choose the first source it supports.
o Syntax :
<video controls autoplay loop muted width height>
<source src="Your path here"

type="[video/mp4 | video/ogg | video/webM] ">


</video>
37 INTRODUCTION TO HTML

o Example :

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
<source src="movie.mp4" type="video/ogg">
</video>
o Output :

You might also like