Abbrivation
Abbrivation
Abbrivation
Server:
SMTP :Simple Mail Transfer Protocol
FTP: File Transfer Protocol
HTTP: Hypertext Transfer Protocol
HTTPS: Hypertext Transfer Protocol
Secure
EMAIL: electronic mail
FATHER OF EMAIL:
Raymond Samuel Tomlinson
Web Application
What Is A Network?
- It Is A Group Of Computers Connecting With Each Other For Sharing Of Information And Resources.
The First Computer Network Introduced In 1960’s By US- DOD.( United States Department of
Defense)
- ARPANET [Advanced Research Projects Agency Network]
- LAN
- MAN
- WAN
What Is Internet?
- International Network
What Is Web?
- 1990’s “Tim Berners Lee” Introduced “Web”.
- Server
- Website
- Webpage
- The Languages Used For Presentation Were GML [Generic Markup Language]. And SGML [Standard
Generic Markup Language].
- Tim Berners Lee Introduced The Concept Of Web. - Tim Berners Lee Introduced A Language For
Web Called “Html” In 1993.
- HTML Is Superset To SGML. - IETF [Internet Engineering Task Force] Took The Responsibility Of
Developing Html.
- W3C [World Wide Web Consortium] And WHATWG [Web Hypertext Application Technology
Working Group] Maintained Standard Of Html And Developed Further Versions.
HTML Version Year
HTML 1.0 The first version of HTML was 1.0, which
was the barebones version of HTML
language, and it was released in1991
HTML 2 November 24, 1995 [IETF] - Form Base “File
Upload” - Tables - Client-Side Image Maps -
Internationalization
HTML 3 January 14, 1997 [W3C] - Several Feature For
Design For A Browser Called Netscape. -
Blinking - Marquee – Mathml
HTML 4 December 18, 1997 [W3C] - Transition
Elements - Frameset And Frame - Browser
Specific Elements – Multimedia
HTML 5 October 28,0 2014 [W3C – WHATWG] May 27,
2019 HTML 5.2 Latest
HTML Is A Collection Of Elements Arranged In A Hierarchy Called Dom. [Document Object Model]
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot
of formatting tags.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so
it enhances the interest of browsing of the user.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web
pages which makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.
Text-based HTML Editor :
1. Notepad ++
2. Sublime Text
4. Adobe Dreamweaver CC
5.Froala
6. CoffeeCup
Browsers :
1. Firefox
2. Google Chrome
3. Microsoft Edge
4. Apple Safari
5. Opera
6. Brave
7. Vivaldi
8. DuckDuckgo
9. Chromium
10.Epic
Structure of html:
1. Here, the first statement is <!DOCTYPE html>. !DOCTYPE is used to tell the bowser
the type of document it is dealing it. Since, ours is an HTML document, so, we will
have to write <!DOCTYPE html> to tell that is an HTML document.
2. The second line of the program uses the tag <html>. This tag is the root element and
wraps all other tags.
3. The <head> tag contains the header information such as title of the page, metadata,
styles, or scripts. Each of these information is specified in their corresponding tags.
And all these tags should be contained within the <head> tag.
For example, we have include <title> tag within the <head> tag.
EX:
<html>
<head>
<title>welcome to html</title>
hello world
</head>
<body>
welcometo
js
python
the css
</body>
</html>
o Tags: An HTML tag surrounds the content and apply meaning to it. It is
written between < and > brackets.
o Attribute: An attribute in HTML provides extra information about the
element, and it is applied within the start tag. An HTML attribute contains two
fields: name & value.
Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>
EX:
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
</body>
</html>
HTML Tags
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an
HTML content and a simple content. HTML tags contain three main parts: opening
tag, content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom
and left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per
your code requirement.
o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except
some tags)
Syntax
<tag> content </tag>
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.
Ex:
<html>
<head>
<title>heading tags</title>
</head>
<body>
<h1>html</h1>
<hr>
<p>hello world it is part <br>time to eat <br>meat and drink .</p>
</body>
</html>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Id: uniquely identify an element. Two elements with same name with in a web
page ,you can use id attribute.
Ex:
<html>
<head>
<title>heading tags</title>
</head>
<body>
<h1>html</h1>
<hr>
<p title="html">hello </p><br>
<p id="hello"> girl make life </p><br>
</body>
</html>
Title:
It gives suggested title for the element. cursor move title text it display title
message.
<html>
<head>
<title>heading tags</title>
</head>
<body>
<h1>html</h1>
<hr>
<p title=" welcome to class of html "> java script </p><br>
</body>
</html>
Class:
It is associate an element with a style sheet and specify the class elements.
Syntax:
Class=”classname”
Ex:
<html>
<head>
<title>heading tags</title>
</head>
<body>
<h1>html</h1>
<hr>
<p class="hello"> java script </p><br>
</body>
</html>
Style:
It specify cascading style sheet
Syntax:
Style=”property :value”
Ex:
<html>
<head>
<title>heading tags</title>
</head>
<body>
<p style="color:red">hello </p><br>
<p style="font-family:Matura MT Script Capitals">python </p><br>
<p style="background-color:yellow">css </p><br>
<p style="font-size:20px">tilu </p><br>
<p style="text-align:right">ashok </p><br>
</body>
</html>
EX:
H2O
EX:
A2
Ex:
<html>
<head>
<title>formating tags</title>
</head>
<body>
<p><u>girl make life the </u></p>
hello <b>world </b>to home of <i>the world</i> care <big>the race</big> of
court <br>
to home of the<strike> world care</strike> the race of court
<ins>hello my friend</ins><br>
<del>python</del><br>
<small>rent</small>
<mark>welcome ashok restarent</mark><br>
X<sup>2</sup>+ y<sup>2</sup><br>
www<sup>world wide web</sup><br>
CaCo<sub>3</sub>+H<sub>2</sub>O
</body>
</html>
Dir:
Indicate the browser about the direction in which text should flow .
It contain two values
1.ltr – left to right(default value)
2.rtl – right to left (Ex-Arabic language)
Ex:
<html>
<head>
<title>heading tags</title>
</head>
<body>
<h1>html</h1>
<p bdo dir="rtl">hello my world to </p>
</body>
</html>
HTML Language :
<body>
hello namskar
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
</div>
<p>CSS styles are added to make it easier to separate the divs, and to
make them more pretty:)</p>
</body>
</html>
2.Span:
Ex:
<!DOCTYPE html>
<html>
<head>
<title>Span Tag</title>
</head>
<body>
</p>
</body>
</html>
Differences between <div> and <span> tag:
<div> <span>
EX:
<html>
<head>
<title>pre</title>
</head>
<body>
<pre>
hello world
css
python
js
python
</pre>
</body>
</html>
<dfn>:
tag stands for the "definition element", and it specifies a term that is going
to be defined within the content.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>Dfn tag</title>
</head>
<body>
<h2>Example of dfn Tag</h2>
<p><dfn>HTML</dfn> A markup language for Web designing</p>
</body>
</html>
<blockquote>:
It display information idenation(PARAGARAPH)
<q> :double quotes
Ex:
<!DOCTYPE html>
<html>
<body>
<blockquote >
Rules for defining Identifiers :
1) A java identifier is a sequence of characters, where each character may be a
letter from a-z or A-Z or a digit form 0-9 or currency symbol $ or connecting
punctuation – , if we are using any other symbol we will get Compile time error
“Illegal Character”.
</blockquote>
<q>hello my html friend</q>
</body>
</html>
<code> :
It display text monospaced font (default font size) like a programming books.
EX:
<!DOCTYPE html>
<html>
<body>
<p>Rules of identifers:</p>
<p><code >
1) A java identifier is a sequence of characters, where each character may be a
letter from a-z or A-Z or a digit form 0-9 or currency symbol $ or connecting
punctuation – , if we are using any other symbol we will get Compile time error
“Illegal Character”.
</code>
</p>
</body>
</html>
<address>:
It contain address.
Ex:
<html>
<head>
<title>address tag</title>
</head>
<body>
<address>
sekhar<br>
sai nagar<br>
housing board<br>
atp
</address>
</body>
</html>
<abbr> :it display the abbreviation
Ex:
<html>
<body>
</body>
</html>
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can
create hyperlink to other web page as well as files, location, or any URL. The "href"
attribute is the most important attribute of the HTML a tag. and which links to
destination page or URL.
Target attributes:
1. _self: default, open the document in same window
2. _blank :open the document in new window .
3._parent : open the document in parent frame.
4._top : open the document in the full body of the window.
EX:
<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href="https://www.wikipedia.org" target="_top"> Link</a>to
go on home page <p> <br>
<a href="https://www.facebook.com" target="_blank">FB</a>
</body>
</html>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Image:
HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.
Syntax:
<img src="path" height="value" width="value" alt="msg" />
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.
Path:
1.absoulte path :
It contain image path another webpage.
Ex:
Src=https://www.google.com/img.jpg
2.Relative path :
URL does not begins with slash it will be relative URL.
Links to an image that hosted with in the web site.
Ex:
Src=”imag.jpg”
Ex:
<html>
<head>
<title> images</title>
</head>
<body>
<h2>Ashok Food </h2>
<hr>
<img src="C:\Users\pc\Desktop\htmltest\t.jpeg" width="200" height="150"
alt="not found image" /><br>
<img src="C:\Users\pc\Desktop\htmltest\f1.jpeg" width="200" height="150"
alt="not found image" />
<img src="C:\Users\pc\Desktop\htmltest\m.jpeg" width="200" height="150"
alt="not found image" />
</body>
</html>
Section:
It display information section wise it is used in chapters, introduction , news
items ,contact information.
Ex:
<!DOCTYPE html>
<html>
<body>
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of the
environment, formerly named the World Wildlife Fund. WWF was founded in
1961.</p>
</section>
<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo
of WWF originated from a panda named Chi Chi that was transferred from the
Beijing Zoo to the London Zoo in the same year of the establishment of
WWF.</p>
</section>
</body>
</html>
<article>:
It display self-contained content.
Used in :
Forums posts
Blog posts
Product cards
News paper articles.
Ex:
<!DOCTYPE html>
<html>
<body>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008.
Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in
2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</body>
</html>
Ex:
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: sekhar chandra<br>
<a href="[email protected]">email</a></p>
</footer>
</body>
</html>
Ex:
<html>
<head>
<title> images</title>
</head>
<body>
<textarea name="message" rows="10" cols="20">
hello student welcome to front end class</textarea>
</body>
</html>
List :
Type Description
type="i" The list items will be numbered with lowercase roman numbers
EX:
<html>
<head>
<title>Course List</title>
</head>
<body >
<h2>List of course:</h2>
<ol type="i">
<li>ms office</li>
<li>python</li>
<li>c</li>
<li>c++</li>
<li>html</li>
</ol>
</body>
</html>
<ul> :
tag defines an unordered (bulleted) list.
The CSS list-style-type property is used to define the style of the list item
marker. It can have one of the following values:
Value Description
Ex:
<html>
<head>
<title>order list</title>
</head>
<h2>COURSE LIST</h2>
<body>
<ul type="square">
<li>python</li>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
</body>
</html>
Nested List:
Ex:
<html>
<head>
<title>order list</title>
</head>
<h2>COURSE LIST</h2>
<body>
<ol type="I">
<li>c</li>
<li>java</li>
<li> python</li>
<ul type="circle">
<li>motor cycle</li>
<li> bike</li>
</ul>
</ol>
</body>
</html>
Table:
It is combination of rows of and columns.
To enter the heading we can use <th>(table header)
To create the row we can use <tr> (table row)
To enter the data in table using <td>(table data)
Create the table by using <table>
Ex:
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="2" bgcolor="yellow">
<tr style="color:green">
<th >ENO</th>
<th>Ename</th>
<th>Sal</th>
<th>Dept</th>
</tr>
<tr style="color:red">
<td>121</td>
<td>ram</td>
<td>234666</td>
<td>Manger</td>
</tr>
<tr style="color:red">
<td>234</td>
<td>sekhar</td>
<td>546545</td>
<td>cleark</td>
</tr>
</table>
</body>
</html>
<dl> tag defines a description list
<dt> Define Term
Ex: