HTML

DEPT. OF COMPUTER SCIENCE AND ENGINEERING,DAYANANDA SAGAR UNIVERSITY,BENGULURU
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.

VERSIONS OF HTML

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

DIFFERENCES BETWEEN HTML & HTML5
HTML HTML 5
1.Didn’t support audio and video without the use
of flash player support
1. It supports audio and video controls with the
use of <audio> and <video> tags.
2.It does not allow drag and drop effect. 2. It allows drag and drop effects.
3. Not possible to draw shapes like circle,
rectangle, triangle etc.
3. Allows to draw shapes like circle, rectangle,
triangle etc.
4. It is supported by all old browsers 5. It is supported by all new browsers.
5. Old version of HTML are less mobile-friendly. 5. HTML5 language is more mobile friendly.
6. It cannot handle inaccurate syntax. 6. It is capable of handling inaccurate syntax.

HTML STRUCTURE
▪The structure of HTML contains the following essential
building blocks:
▪Doctype Declaration
▪HTML
▪Head
▪Title
▪Body

HTML STRUCTURE

▪<!DOCTYPE html>, specifies the type of the document.
In this case, the type of file is html.
▪<html lang =‘us’> html tag includes attribute lang,
specifies the language in which the document is written.
▪<meta>, is used to provide additional information . It
provides the information about the character set used in
the document.
▪Ex: <meta charset =‘utf-8’/>

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.

COMMENTS IN HTML
▪ Comments increase the readability of the programs.
▪ Comments in HTML are written as follows:
▪ Ex: <!– This is the comment -->
▪ Browsers ignore the comments. The comments are only for the
users.
▪ The same syntax is used for multi line comment, as follows:
▪ Ex: <!– This is
a Multi-line
comment -->

HTML TAGS

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>

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>

<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

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!

Output:

formatting cont…(<span>comes in CSS portions)
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.

output

Another cExample
<!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>

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

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>

output:

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

FORMATTING & FONT TAGS Cont…
(Content-based style tags)
∙ Bold text <b>: Element defines bold text, without any extra importance.
∙ 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.

FORMATTING TAGS
∙ 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.

<!DOCTYPE html>
<html>
<head>
<title>Example to illustrate formatting text</title>
</head>
<body>
<p>
<b>Dayananda Sagar Institutions</b> founded in the 60s by one such visionary, <strong> late Sri Dayananda Sagar
</strong> committed to take knowledge to the people, transforms today’s students
into <i> responsible citizens </i> and <i> professional leaders of tomorrow </i> . <em>Dayananda Sagar
University</em> created by an Act of the Karnataka State in 2014, built on this <mark> adorable legacy </mark> and
inspired by its own milestones, meeting the needs of quality <small>higher education </small> in this part of the
world.Dayananda Sagar University has created <del> milestones</del> <ins> Computer science and engg.</ins>
</p>
</body>
</html>

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

<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

<!DOCTYPE html>
<html>
<head>
<title>Example to illustrate Formating text</title>
</head>
<body>
<p>Dayananda Sagar University </p>
<br>
<code>
cost =quantity * price
</code></br>
<br>
X<sub>2</sub><sup>3</sup> +Y<sub>1</sub><sup>2</sup>
</br>
</body>
</html>

CHARCTER ENTITIES

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.

HORIZONTAL RULES
<!DOCTYPE html>
<html>
<body>
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web
page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>
<hr>
<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other
media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>
<hr>
<p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and
attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p>
</body>
</html>

HORIZONTAL RULES

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 name = "Title" content = "Don Quixote" />
▪ <meta name = "Author" content = "Miguel Cervantes" />
▪ <meta name = "keywords" content = "novel
Spanish literature, groundbreaking work" />

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

IMAGE TAG
<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>

IMAGE TAG

IMAGE TAG
<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src=“klematis.jpg" alt="Girl in a jacket" width=“100" height=“100">
</body>
</html>

LISTS
▪Lists are nothing but a group of elements. There are two
types of Lists:
▪Ordered Lists
▪Unordered Lists

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>

ORDERED LIST

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>

UNORDERED LIST

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>

DESCRIPTION LIST

TABLES
▪ Tables allows the users to arrange the data in rows and
columns.Each tag has a start and end tag
▪ . For tables, <table> tag is used.
eg <table border=5 bgcolor = "yellow" width=100%>
Each table row is defined with a <tr> tag.
▪ Each table header is defined with a <th> tag.
▪ Each table data/cell is defined with a <td> tag.
▪ By default, the text in <th> elements are bold and centered.
▪ By default, the text in <td> elements are regular and left-
aligned.

TABLES

COLSPAN AND ROWSPAN

HTML FORMS
▪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, etc.

HTML FORMS

LABEL TAG
▪The <label> tag defines a label for many form elements.
▪The <label> element is useful for the users to identify
the input.
▪The for attribute of the <label> tag should be equal to id
attribute of the <input> tag to bind them together.

TEXT FIELD
▪ The <input type =“text” defines a single-line input field for text
input.
▪ Ex: <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value = “”>
▪ </form>

RADIO BUTTON
▪ The <input type =“radio” > defines a radio button. Radio button lets a user
to select only one of the choices.
▪ Ex: : <form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
</form>

CHECK BOXES
▪ The <input type =“checkbox”> defines a check.box.
▪ User can select zero or more options out of the choices.
▪ Ex: <form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

SUBMIT BUTTON
▪The <input type = “submit”> defines a button for
submitting the data to a form handler.
▪The form-handler is typically a file on the server with a
script for processing input data.
▪Ex: <form>
<input type="submit" value="Submit">
</form>

EXAMPLES/TUTORIALS

Example (input type=password)

<!DOCTYPE html>
<html>
<body>
<! example of textarea,select,email,range,reset -->
<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>
<form action="action.php"
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<textarea id="w3review" name="w3review" rows="4" cols="50">
you will learn how to make a website. They offer free tutorials in all web development
technologies.
</textarea>
<p><label for="cars">Choose a car:</label><p>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<label for="email">Enter your email:</label>
<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="submit" value="Submit">
<input type="reset" value="reset form">
</form>
<p>The characters in a password field are masked
(shown as asterisks or circles).</p>
</body>
</html>

HYPERLINKS

Links can include images in their content, in which case the browser displays
the image together with the textual link:
<a href = "c210data.html" >
<img src = "small-airplane.jpg"
alt = "An image of a small airplane" />
</a>

Targets within Documents
Consider the following example
<h2 id = "avionics"> Avionics </h2>
If the target is in the same document as the link, the target is specified in the href attribute value by
preceding the id value with a pound sign (#), as in the following example:
<a href = "#avionics"> What about avionics? </a>
When the What about avionics?link is taken, the browser moves the display so that the element whose id is
avionics is at the top.
When the target is an element in another document, the value of that element’s id is specified at the end of the
URL, separated by a pound sign (#), as in the following example:
<a href = "aidan1.html#avionics"> Avionics </a>

ANCHORS

THANK YOU

HTML

More Related Content

What's hot (19)

Similar to HTML (20)

Recently uploaded (20)

HTML