FSD Module1 HTML

Presentation Material
Department of Computer Science & Engineering

Course Code: 20CSXXXX
Course Title: FULL STACK DEVELOPMENT
Semester: 3
Year: 2022-23
Module 1
Markup Language (HTML5)
Introduction to HTML and HTML5 - Formatting and Fonts -Commenting Code
– Anchors – Backgrounds – Images – Hyperlinks – Lists – Tables – HTML
Forms, Audio, Video Tag.
2
HTML
• HTML is Hypertext Markup Language.
• It is a combination of Hypertext and Markup Language.
• Markup Language, consists of easily understandable keywords that helps to

format the view of a page and the data it contains.
• In simpler words, it is used to mark parts of documents to indicate how they

should appear.
3
VERSIONS OF HTML
4
VERSIONS OF HTML
• HTML 1.0 : Supports only basic tags. Do not support tables, font changes etc.
• HTML 2.0: Supports form but only basic.
• HTML 3.2: Supports CSS. Only Internal CSS
• HTML 4.01: Supports External CSS.
• XHTML: HTML with XML elements. Follows very strict way of coding.
• HTML 5: Many input element tags were added. GeoLocation , Email,

Password etc., bootstrap. W3 consortium.
5
DIFFERENCES BETWEEN HTML & HTML5
6
HTML STRUCTURE
⮚The structure of HTML contains the following essential building blocks:

• Doctype Declaration
• HTML
• Head
• Title
• Body
7
HTML STRUCTURE
8
Cont.…
• <!DOCTYPE html>, specifies the type of the document. In this case, the
type of file is html.
• <html lang =‘en-us’> html tag includes attribute lang, specifies the language
in which the document is written.[specifies the language code of the page followed by the country code
that means US style of English language is used for all the text on the page.]
• <meta>, is used to provide additional information. It provides the

information about the character set used in the document.
• Ex: <meta charset =‘utf-8’/>

9
Meta Element
The two attributes that are used for this are name and content
The user makes up a name as the value of the name attribute and specifies information through the
content attribute. One commonly chosen name is keywords; the value of the content attribute
associated with the keywords is that which the author of a document believes characterizes his or
her document. An example is as follows: meta name = "keywords" content = "binary
trees, linked lists, stacks" />
Web search engines use the information provided with the meta element to categorize Web
documents in their indices. So, if the author of a document seeks widespread exposure for the
document, one or more meta elements are included to ensure that it will be found by Web search
engines. For example, if an entire book were published as a Web document, it might have the
following meta elements:
<meta http-equiv="refresh" content="30">
<meta name = "Title" content = "Don Quixote" >
<meta name = "Author" content = "Miguel Cervantes" >
<meta name = "keywords" content = "novel Spanish literature, groundbreaking
work" > 10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>lang Attribute</title>
<style>
body{
text-align: center;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>jQuery is an open source JavaScript library that
simplifies the interactions between an HTML/CSS document,
or more precisely the Document Object Model (DOM), and JavaScript.
Elaborating the terms, jQuery simplifies HTML document
traversing and manipulation, browser event handling,
DOM animations, Ajax interactions, and cross-browser
JavaScript development.</p>
</body>
ELEMENTS & TAGS
• HTML uses predefined tags and elements, that tells the browser how to
display the content.
• Tags are represented with angular braces. <>
• For every opening tag there should be a closing tag </> (with forward slash).
• A HTML document can be saved using .html or .htm extension and can be
opened in the browser.
12
COMMENTS IN HTML
• Comments increase the readability of the programs.
• Comments in HTML are written as follows:
• Ex: 
• Browsers ignore the comments. The comments are only for the users.
• The same syntax is used for multi line comment, as follows:
• Ex:  13
HEADING
▪ HTML heading tags are defined from <h1> to <h6>.
▪ <h1> defines most important heading.
▪ <h6> defines the least important heading.
▪ Ex: < h1> This is H1 heading </h1>
< h2> This is H2 heading </h2>
<h6>jfdnfj</h6>
14
PARAGRAPH
▪ Text is often organized in paragraph.
▪ It is represented with <p>.
▪ Line break embedded in text are ignored by the
browser.
▪ Ex: <p> This is a paragraph tag </p>
15
<PRE> & <BR>
▪ If the whitespaces or new line characters need to be
preserved, <pre> tag is used.
▪ Ex: <pre> Mary had
A little lamb </pre>
▪ To insert line breaks or paragraph breaks, <br> tag is used.
▪ <p> This is a <br> Paragraph </p>
U will get This is a
Paragraph
16
Formatting
Use pre to retain format of text and display using monospace font:
Note that any embedded markup (such as <br /> ) is still treated as
markup!
17
Output:
18
Different HTML Attributes(for your knowledge)
Core Attributes
id, The title Attribute, class Attribute, The style Attribute Internationalization
Attribute Lang Attribute used in HTML Tag
Generic Attribute
align Attribute, src attribute, alt attribute ,width and height attribute, href
attribute.
19
Cont.…
Data Attribute
HTML also provides custom data attributes that help you to add information
related to you in HTML tags. These are not specific to HTML5 and can be used
on all HTML elements. The data -* attribute helps us in customizing our own
custom data attributes; it can store the data privately to the page or the
application.
<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>
20
For knowledge :Core HTML attributes
Block-level Elements
A block-level element always starts on a new line.
A block-level element always takes up the full width available (stretches out to
the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element
does not.
The <div> element is a block-level element.
21
Cont..
22
Example on div(will repeat in css)
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid black">Hello World</div>
<p>The DIV element is a block element, and will always start on a new line and take
up the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>
23
formatting cont…(<span>comes in CSS portions:inline)
HTML <span> tag
HTML <span> tag is used as a generic container of inline elements. It is used for styling
purpose to the grouped inline elements (using class and id attribute or inline style).
The <span> tag does not have any default meaning or rendering.
The <span> tag can be useful for the following task:
● To change the language of a part of the text.
● To change the color, font, background of a part of text using CSS
● To apply the scripts to the particular part of the text.
The HTML <span> tag is used for grouping and applying styles to inline elements.
There is a difference between the span tag and the div tag. The span tag is used with inline elements
whilst the div tag is used with block-level content.
24
25
Output
26
Another Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p> A horizontal <span style="font-style:italic">separating line</span> &nbsp

<strong>hr</strong></p>
<p> A horizontal separating line &nbsp hr</p>

</body>
</html>
</html>
27
Fonts
The CSS font-family property defines the font to be used for an HTML
element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
output
28
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
29
output:
30
Summary for HTML style
• Use the style attribute for styling HTML elements

• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
31
<h1 style="text-align:center;">Centered Heading</h1>
{*text-align works for block elements}

FORMATTING & FONT TAGS Cont… (Content-
based style tags)* include closing tags for all
• Bold text <b>: Element defines bold text, without any extra importance.<b> contents </b>
• <center>contents </center>
• Important text<strong>: Element defines text with strong importance. The content inside is
typically displayed in bold.
• Italic text <i>: The content is displayed in italic. It is often used to indicate a technical term.
• Emphasized text <em>: The element defines emphasized text. It is used for emphasis or
emphasizing.
• Marked text <mark>: The element defines text that should be marked or highlighted.
• Smaller text <small>: The element defines smaller text.

33
FORMATTING TAGS(note: these are inline)
• Deleted text <del>: The element defines text that has been deleted from a
document. Browsers usually strike a line through deleted text.
• Inserted text <ins>: The element defines a text that has been inserted into a
document. Browsers usually underline inserted text.
• Superscript text <sup>: The element defines superscript text. It appears half a
character above the normal line. And is rendered in a smaller font.
• Subscript text <sub>: The element defines subscript text. It appears half a
character below the normal line.
34
Cont..
<code>
The code element, code, is used to specify a monospace font, usually for program
code. For example, consider the following element:
<code> cost = quantity * price </code>
This markup would be displayed as shown
35
Cont..
<sub> and <sup>

Subscript and superscript characters can be specified by the sub and
sup
elements, respectively. These are not content-based tags. For example,
X<sub>2</sub><sup>3</sup> + y<sub>1</sub><sup>2</sup>
36
CHARACTER ENTITIES *note= &
37
https://www.geeksforgeeks.org/container-and-empty-tags-in-html/
EMPTY TAGS
Elements with no closing tag are known as an empty tag.
For eg: <br>, <link>, <img>, <hr>, <meta>, <source> etc.
Since we can not specify anything in between those.
39
40
HORIZONTAL RULES
• Two parts of a document can be separated from each other by placing a horizontal
line between them.
• These lines are called horizontal rules.
• <hr /> is used to create a line.
• The thickness, length and horizontal placement will be chosen by the browser.
• Two parts of a document can be separated from each other by placing a horizontal
line between them.
• These lines are called horizontal rules.
• <hr /> is used to create a line.
• The thickness, length and horizontal placement will be chosen by the browser.
41
IMAGE TAG
• <img>: The image tag is used to include an image in an HTML page. They are not inserted;
but linked to a webpage.
• <img> tag creates a holding space for the referenced image.
• Width and height of an images should be specified.
• The <img> tag has 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.
• height
• width
• float
42
IMAGE TAG
43
LISTS
▪ Lists are nothing but a group of elements. There are three types of Lists:
▪ Unordered list or Bulleted list (ul)
▪
Ordered list or Numbered list (ol)
▪ Description list or Definition list (dl)
• Attributes (cont..in next slide)

▪ value
▪ This integer attribute indicates the current ordinal value of the list item as defined by the <ol>
element. The only allowed value for this attribute is a number, even if the list is displayed
with Roman numerals or letters.
45
type
-*Deprecated
Non-standard
This character attribute indicates the numbering type:
● a: lowercase letters
● A: uppercase letters
● i: lowercase Roman numerals
● I: uppercase Roman numerals
● 1: numbers
This type overrides the one used by its parent <ol> element, if any.
Note: This attribute has been deprecated; use the CSS list-style-type property instead.
<ol type="I">
<li value="3">third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
ORDERED LIST
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items
will be marked with numbers by default:
• Ex 1: Ordered List
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
47
ORDERED LIST
48
UNORDERED LIST
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items
will be marked with bullets (small black circles) by default:
• Ex: Unordered List
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
49
UNORDERED LIST
50
DESCRIPTION LIST
• A description list is a list of terms, with a description of each term. The <dl> tag
defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
• Ex: Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
51
DESCRIPTION LIST
52
HYPERLINKS
53
lists(type attribute and value attribute)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
value
This integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. The only allowed value for this attribute is
a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The
value attribute has no meaning for unordered lists (<ul>) or for menus (<menu>).
type
Deprecated
Non-standard
This character attribute indicates the numbering type:
● a: lowercase letters
● A: uppercase letters
● i: lowercase Roman numerals
● I: uppercase Roman numerals
● 1: numbers
This type overrides the one used by its parent <ol> element, if any.
DESIGN THE FOLLOWING NESTED LIST
55
<!DOCTYPE html>
<li> Commercial aviation</li>
<html> <ol>
<body> <li> Dual engine</li>
<ol> <ol>
<li> General Aviation </li> <li>Wing- mounted... </li>
<ol> <li> Fuesalage mounted... </li>
<li> single engine</li>
<ol> </ol>
<li>Tail Wheel </li>
<li> Tricycle </li> <li> Tri engine </li>
</ol> <ol>
<li>Third engine in Vertical.. </li>
<li> dual engine </li> <li> Third engine in fuselage </li>
<ol>
<li>Wing Mounted </li> </ol>
<li> Push-pull.... </li>
</ol> </ol>
</ol>
</ol> </body>
</html>
<html>
<head>
<style type = "text/css">
ol {list-style-type: upper-roman;}
ol ol {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal;}
</style></head>
<body>
<ol> 
90
select—-- Text Area
>(Menu>
<select id="cars" name="cars"> <textarea id="w3review"
<option value="volvo">Volvo</option> name="w3review" rows="4"
<option value="saab">Saab</option> cols="50">
<option value="fiat">Fiat</option> you will learn how to make a
<option value="audi">Audi</option> website. They offer free
tutorials in all web
</select> development technologies.
</textarea>
91
Input type=email/url/range/submit/reset
<input type="email" id="email" name="email">
<input type="url" name="url" id="url"

placeholder="https://example.com"
pattern="https://.*" size="30"
required>
<input type = "range" id = "myAge" name = "myAge" min = "18" max = "110" >
<input type="reset" value="reset form">

92
<!DOCTYPE html>
<html> </select>
<body> <br><br>
<! example of textarea,select,email,range,reset --> <label for="email">Enter your email:</label>
<h2>Password field</h2> <input type="email" id="email" name="email">
<p>The <strong>input type="password"</strong> defines a password field:</p> <label for="url">Enter an https:// URL:</label>
<form action="action.php" <input type="url" name="url" id="url"

<label for="username">Username:</label><br> placeholder="https://example.com"
<input type="text" id="username" name="username"><br> pattern="https://.*" size="30"
<label for="pwd">Password:</label><br> required>
<input type="password" id="pwd" name="pwd"><br><br> <input type = "range" id = "myAge" name = "myAge"
<textarea id="w3review" name="w3review" rows="4" cols="50"> min = "18" max = "110" >
you will learn how to make a website. They offer free tutorials in all web development
technologies. <input type="submit" value="Submit">
</textarea> <input type="reset" value="reset form">
<p><label for="cars">Choose a car:</label><p> </form>
<select id="cars" name="cars">
<option value="volvo">Volvo</option> <p>The characters in a password field are masked
<option value="saab">Saab</option> (shown as asterisks or circles).</p>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option> </body>
</html>
Use of Field set and legend
Definition and Usage
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.

Tips and Notes
Tip: The <legend> tag is used to define a caption for the <fieldset> element.
Global Attributes
The <fieldset> tag also supports the Global Attributes in HTML.
Event Attributes
The <fieldset> tag also supports the Event Attributes in HTML.
<!DOCTYPE html> <body>
<html>
<head> <h1>The fieldset element + CSS</h1>
<style>
fieldset { <form action="/action_page.php">
background-color: #eeeeee; <fieldset>
} <legend>Personalia:</legend>
<label for="fname">First name:</label>
legend { <input type="text" id="fname"
background-color: gray; name="fname"><br><br>
color: white; <label for="lname">Last name:</label>
padding: 5px 10px; <input type="text" id="lname"
} name="lname"><br><br>
<label for="email">Email:</label>
input { <input type="email" id="email"
margin: 5px; name="email"><br><br>
} <label for="birthday">Birthday:</label>
</style> <input type="date" id="birthday"
</head> name="birthday"><br><br>
<html> <legend> Card information</legend>
<body> <TABLE BORDER="1">
<form action=“” method=“GET> <TR> <td> credit card</td>
<fieldset>
<TD><select id="cards" name="card" >
<legend>Personal information</legend>
<TABLE BORDER="1">
<option value="default" selected>SELECT A CREDIT
<TR> CARD</option>
<TD>Your name</TD> <option value="MASTER CARD”>master card/option>
<TD> <option value="VIVA">viva</option>
<INPUT TYPE="TEXT" NAME="name" SIZE="50">
</select> </TD </TR>
</TD> </TR>
<TR>
<tr> <td> Account number</td>
<TD>Your email</TD> <TD> <td> <input type=text name=account size="25"> </td>
<INPUT TYPE="EMAIL" NAME="name" SIZE="50"> <tr> <td>date</td> <td><input type=date name=date
</TD> size="25"> </tr></TABLE> </fieldset> </table>
</TR> <TR> <TD>address</TD>
<span> “please keep me informed of further ordering”
<TD> <textarea id="w3review" name="w3review"
rows="4" cols="50">
</span> <input type=”checkbox” checked><input type=submit
</textarea> value=Submit><input type=reser value=”clear”>
</TD> </TR></TABLE> </fieldset>
</table>
<fieldset>
Output
HTML MEDIA TAGS : The audio Element :
The only commonly used attribute of the audio element is controls, which we always set
to "controls". This attribute, when present, creates a display of a start/stop button, a
clock, a slider of the progress of the play, the total time of the file, and a slider for
volume control.
*Audio information is coded into digital streams with encoding algorithms called audio
codecs. There are a large number of different audio codecs. Among these the most
commonly used on the Web are MPEG-3 (MP3), Vorbis, and Wav.
Coded audio data is packaged in containers. A container can be thought of as a zip file;
it<audio
is a way to pack data into a file, but the encoding of the data in the file is irrelevant to
attributes>
<source src = "filename1"> Note:There are three different
the container. A zip
<source src = "filenamen">
file may contain textual data coded in ASCII or it might contain
audio container types: Ogg,
floating-point
Your browser doesnumbers
not supportcoded in element
the audio binary. Likewise, an audio container may contain MP3
MP3, and Wav.
</audio>
or Vorbis coded audio.
HTML MEDIA TAGS: Audio tag and video tag
<!DOCTYPE html> <!–– audio.html This is a test of the audio element <audio
controls = "controls" >
test the audio element --> <source src = "nineoneone.ogg" />
<html lang = "en"> <source src = "nineoneone.wav" />
<head> <source src = "nineoneone.mp3" />
<title> test audio element </title> <meta charset Your browser does not support the audio
= "utf-8" /> element
</head> </audio>
<body> </body>
</html>
The Video Element
Video information, like audio information, must be digitized into data files before it can be played by
a browser, this time by algorithms called video codecs. As is the case with audio, video data is stored
in containers.
There are many different video containers and many different video codecs. Further complicating the
situation is the fact that not all video codecs can be stored in all video containers.
The most common video containers used on the Web are MPEG-4 (.mp4 files), Flash Video (.flv
files), Ogg (.ogv files), WebM (.webm files), and Audio Video Interleave (.avi files).
The most common video codecs used on the Web are H.264 (also known as MPEG-4 Advance
Video Coding, or MPEG-4 AVC), which can be embedded in MP4 containers, Theora, which can be
embedded in any container, and VP8, which can be embedded in WebM containers.
In addition to video data, video containers also store audio data, because most video is
accompanied by audio. The three most common container/video codec/audio codec combinations
used on the Web are the Ogg container with Theora video codec and Vorbis audio codec, MPEG-4
container with H.264 video codec and AAC audio codec, and WebM container with VP8 video codec
and Vorbis audio codec.
HTML: MEDIA TAGS- VIDEO
This is a test of the video element.....
<!DOCTYPE html> <!–– testvideo.html
<video width = "600" height = "500" autoplay =
test the video element
"autoplay"
––>
controls = "controls" preload = "preload">
<html lang = "en">
<source src = "NorskTippingKebab.mp4" />
<head>
<source src = "NorskTippingKebab.ogv" />
<meta charset = "utf-8" />
<source src = "NorskTippingKebab.webm" />
<title> test video element </title>
Your browser does not support the video
</head>
element
<body>
</video>
</body>
</html>
https://stackoverflow.com/questions/7055393/center-image-using-
text-align-center#:~:text=In%20response%20to%20your
%20question,containing%20span%20(or%20div%20).&text=A%20span
%20element%20is%20display,center%3B%20on%20the%20img
%20itself.
https://www.geeksforgeeks.org/container-and-empty-tags-in-html/

FSD Module1 HTML

Uploaded by

Copyright:

Available Formats

FSD Module1 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FSD Module1 HTML

Uploaded by

Copyright:

Available Formats

Presentation Material

Department of Computer Science & Engineering

• HTML is Hypertext Markup Language.

• It is a combination of Hypertext and Markup Language.

• Markup Language, consists of easily understandable keywords that helps to

• In simpler words, it is used to mark parts of documents to indicate how they

• HTML 2.0: Supports form but only basic.

• HTML 3.2: Supports CSS. Only Internal CSS

• HTML 4.01: Supports External CSS.

• HTML 5: Many input element tags were added. GeoLocation , Email,

⮚The structure of HTML contains the following essential building blocks:

• <meta>, is used to provide additional information. It provides the

• Ex: <meta charset =‘utf-8’/>

• Tags are represented with angular braces. <>

• Comments in HTML are written as follows:

• Ex:

• The same syntax is used for multi line comment, as follows:

• Ex: <!-- This is

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

A block-level element always starts on a new line.

The <div> element is a block-level element.

<div style="border: 1px solid black">Hello World</div>

● To change the language of a part of the text.

● To change the color, font, background of a part of text using CSS

● To apply the scripts to the particular part of the text.

<p> A horizontal <span style="font-style:italic">separating line</span> &nbsp

<p> A horizontal separating line &nbsp hr</p>

<h1 style="font-size:300%;">This is a heading</h1>

• Use the style attribute for styling HTML elements

{*text-align works for block elements}

• Smaller text <small>: The element defines smaller text.

<sub> and <sup>

Elements with no closing tag are known as an empty tag.

For eg: <br>, <link>, <img>, <hr>, <meta>, <source> etc.

Since we can not specify anything in between those.

• Attributes (cont..in next slide)

• Ex: Unordered List

• Ex: Description Lists

<li> single engine</li>

<li> Commercial aviation</li>

<li> Tri engine </li>

<a href = "c210data.html" >

<h1>The img element</h1>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

• Forms are used to collect data from the users.

• The user input is often sent to the server for processing.

• The <form> element is used to create forms for the user.

• It is a container of different elements: text fields, text boxes, radio buttons,

▪ The <label> tag defines a label for many form elements.

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<input type="submit" value="Submit">

<input type="url" name="url" id="url"

<input type="submit" value="Submit">

<input type="reset" value="reset form">

<form action="action.php" <input type="url" name="url" id="url"

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

You might also like