HTML
SE SSION-1
[Link]
HTML(HyperTextMarkupLanguage)
It is a simple language for developing and designing web pages.
HTML introduced by Tim Berners Lee.
What is Network?
◦ Network is a group of interconnected computers, for sharing resources and users communication.
◦ Each computer have a unique IP address.
◦ IP address is a 32 bit no separated by period(.) eg;[Link]
Protocol is a certain set of rules for communication between networks.
◦ [Link]
◦ http(HyperTextTransferProtocol) is a internet [Link] is used to control the communication
between client and server.
www(WorldWideWeb):this application is used to access the resources from host computer.
[Link]
Web browsers
◦ Unlike other programming languages, HTML does not show output on the compiler.
◦ Web browsers show the results of an HTML code. It reads HTML files and determines how to show
content with the help of HTML tags.
◦ Any web browser (Google, Safari, Mozilla Firefox, etc) can be used to open a . HTML file and view the
results.
[Link]
HTML stands for Hyper Text Markup Language and it is used to create webpages. It
uses HTML tags and attributes to describe the structure and formatting of a web page.
HTML consists of various elements, that are responsible for telling search engines how to display
page content. For example, headings, lists, images, links, and more.
Features of HTML
It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language.
[Link]
History
HTML is a markup language used by the browser to manipulate text, images, and other
content,in order to display it in the required format. HTML was created by Tim Berners-Lee in
1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML
2.0,published in 1995.
Currently, we are using HTML5, which is the latest and most recent version of HTML.
[Link]
Advantages of HTML
HTML is used to build websites.
It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages of HTML
HTML can only create static web pages. For dynamic web pages, other languages have to be
used.
A large amount of code has to be written to create a simple web page.
The security feature is not good.
[Link]
Html page structure
It contains the essential building-block
elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which
all web pages are created.
[Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--The above meta characteristics make a website compatible with different devices. -->
<title>Demo Web Page</title>
</head>
<body>
<h1>HTML</h1>
<p>Hyper Text Markup Lanaguage</p>
</body>
</html>
[Link]
<!DOCTYPE html> – This is the document type declaration (not technically a tag). It declares a
document as being an HTML document. The doctype declaration is not case-sensitive.
<html> – This is called the HTML root element. All other elements are contained within it.
<head> – The head tag contains the “behind the scenes” elements for a webpage. Elements
within the head aren’t visible on the front end of a webpage. HTML elements used inside the
<head> element include:
<style> – This HTML tag allows us to insert styling into our web pages and make them appealing
to look at with the help of CSS.
<title> – The title is what is displayed on the top of your browser when you visit a website and
contains the title of the webpage that you are viewing.
[Link]
<base> – It specifies the base URL for all relative URL’s in a document.
<noscript> – Defines a section of HTML that is inserted when the scripting has been turned off in
the user’s browser.
<script> – This tag is used to add functionality to the website with the help of JavaScript.
<meta> – This tag encloses the metadata of the website that must be loaded every time the
website is visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding
on your website. This in turn allows the users to view your webpage in the language of their
choice. It is a self-closing tag.
<link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self-closing.
<body> – The body tag is used to enclose all the visible content of a webpage. In other words,
the body content is what the browser will show on the front end.
[Link]
Tags
Tags is used to represent html document.
◦ It is an instructions between <>
Two type
◦ Empty tags:<br>
◦ Container tags:<html>...</html>
[Link]
<html>...</html>: <!DOCTYPE html>
◦ Beginning and ending of html
document. Encloses the entire HTML <html lang="en">
document, serving as the root element for all
HTML content. <head>
<head>...</head>: <meta charset="UTF-8">
◦ Contains header information about the <meta http-equiv="X-UA-Compatible"
webpage, including title, meta tags, and
linked stylesheets. It is part of the content="IE=edge">
document’s structure but is not displayed on <meta name="viewport"
the webpage.
content="width=device-width, initial-
<title>.....</title>: scale=1.0">
◦ Used within the <head> section to define the <title>Document</title>
title of the HTML document. It appears in the
browser tab or window and provides a brief </head>
description of the webpage’s content.
<body>
<body>......</body>:
◦ Encloses the visible content of the webpage, HTML
such as text, images, audio, videos, and links.
All elements within this tag are displayed on </body>
the actual webpage when viewed in a
browser.. </html>
[Link]
Heading
HTML Heading tag helps us to give headings to the content of a webpage. These tags are mainly
written inside the body tag. HTML provides six heading tags from <h1> to <h6>. Every tag
displays the heading in a different font size.
<h1></h1>
<h2></h2> <h1>Heading1</h1>
<h3></h3> <h2>Heading2</h2>
<h4></h4> <h3>Heading3</h3>
<h5></h5> <h4>Heading4</h4>
<h6></h6> <h5>Heading5</h5>
<h6>Heading6</h6>
[Link]
comments
HTML comments are an very important for developers, providing a way to annotate code
without affecting the rendered webpage. HTML Comments enhance code readability, facilitate
collaboration, and can be used to temporarily disable code segments. Enclosed within <!– and –
>, HTML comments serve as invisible notes within the code
<!--This is single line comment-->
<h2>This is <!--given for--> comment</h2>
[Link]
Attribute
HTML attributes provide additional information about elements. Specified in the start tag,
attributes typically come in name/value pairs, like name=”value”.
Syntax: <element attribute_name= "attribute_value">
Attribute Name Description
id A unique identifier for an HTML element, used for styling or JavaScript interaction.
class Defines one or more class names for an element, used for styling and applying CSS rules.
src Specifies the source URL for external resources like images, audio, or video.
href Specifies the URL of the linked resource, typically used in anchor (a) elements for hyperlinks.
alt Provides alternative text for images, displayed if the image cannot be loaded or is unavailable.
[Link]
<b>..... </b>:bold <b>Bold</b>
<i>Italics</i>
<i>.....</i>:italics <u>Underline</u>
<u>.....</u>:underline <b><i><u>HTML</u></i></b><br>
<strong>.....</strong>:bold <strong>HyperTextMarkupLanguage</Strong>
<em>.....</em>:emphasize <em>Italics</em>
<big>…</big> <big>HTML</big>
<small>….</small> <small>HTML</small>
<sup>.. </sup>:superscript (a+b)<sup>2</sup>
<sub>... </sub>:subscript H<sub>2</sub>O
<mark>…></mark <mark>Highlight</mark>
<del>…</del> <del>Strikes through text to signify
deletion</del>
[Link]
:non blank space
HTML script<br>
< :lessthan symbol(<) <html> <br>
> :greaterthan symbol(>) "html"
a&b<br>
" :quotation("") ©2020
& :ampresend(&) ®2020
© :copyright
® :registered
[Link]
Pre tag
The HTML <pre> tag is used for pre-formatted text. It keeps the original spaces and line breaks
exactly as they are in the code. When you use <pre>, the text appears in a fixed-width font,
preserving the formatting and layout just as it looks in the HTML code.
<pre>Preformatted text</pre>
[Link]
Paragraph and Break Elements
HTML <p> tags help us to write paragraph statements on a webpage. They start with
the <p> tag and end with </p>.
HTML <br> tag is used to insert a single line break. It does not have any closing tag. In HTML, the
break tag is written as <br>.
Attributes(align="left|right|center|justify")
<p>
HTML stands for HyperText Markup Language.<br> It is used to design web pages using a
markup language.<br>HTML is a combination of Hypertext and Markup language.<br>Hypertext
defines the link between web pages.<br>A markup language is used to define the text document
within the tag which defines the structure of web pages.
</p>
[Link]
Horizontal Line
HTML <hr> tag is used to break the page into various parts, creating horizontal margins with
the help of a horizontal line running from the left to right-hand side of the page. This is also
an empty tag and doesn’t take any additional statements.
◦ attributes(width ,color,align,size)
<hr width="50%" align="left" color="#567" size="10">
[Link]
<font> </font>:set the font. <font face="Arial"
size="4“ color="#0000ff">Font</font>
◦ attributes(face,color,size)
<center>HTML</center>
<center> </center>:align to center <s>strike through text</s>
<s>...</s>:Strike through text <abbr
title="HyperTextMarkupLanguage">HTML</abb
<abbr> tag defines an abbreviation or an r>
acronym
<blockquote>
<blockquote> </blockquote>:block Video provides a powerful way to help
of contents you prove your point. </blockquote>
Defines a section quoted from another
source
[Link]
END
[Link]
Use strong,underline,big,small,paragraph,..
[Link]
[Link]
[Link]
[Link]
[Link]