Scribd
Upload
16 views22 pages

Unit 2 (Iwt)

Internet and web technology unit 2 about html

Uploaded by

rajchetna3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views22 pages

Unit 2 (Iwt)

Internet and web technology unit 2 about html

Uploaded by

rajchetna3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML Introduction

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.

A Simple HTML Document


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

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML ORIGINS

HTML, which stands for HyperText Markup Language, is the standard markup language
used to create web pages. It was first developed by Tim Berners-Lee in 1990 while
working at CERN (the European Organization for Nuclear Research) in Switzerland.
HTML was created as a means to share scientific documents among researchers at
CERN.

The first publicly available description of HTML was a document called "HTML Tags,"
written by Tim Berners-Lee in 1991. This document outlined the basic structure of HTML
and introduced tags for formatting text, creating links, and structuring documents.

HTML continued to evolve over the years with various versions and updates, each
adding new features and improvements. The World Wide Web Consortium (W3C) is the
organization responsible for overseeing the development of HTML standards.

Since its inception, HTML has become the foundation of the World Wide Web, providing
the structure for web pages and enabling the creation of interconnected documents
accessible via the internet

HTML VERSION
Since the early days of the World Wide Web, there have been many versions of
HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML


1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2


HTML Links
HTML Links - Hyperlinks
HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
hand.

Note: A link does not have to be text. A link can be an image or any other
HTML element!

HTML Links - Syntax


The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

HTML Links - The target Attribute


By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.


The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was


clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

HTML Images Syntax


The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the imag

Syntax
<img src="url" alt="alternatetext">

The src Attribute


The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text are
shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.

HTML Ordered List or Numbered List


In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items start
with <li> tag.
1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle

HTML Unordered List or Bulleted List


In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the
<li> tag.
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
Aries
Bingo
Leo
Oracle

HTML Description List or Definition List


HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.
The HTML definition list contains following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description)
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.

HTML Nested List


A list within another list is termed as nested list. If you want a bullet list inside a
numbered list then such type of list will called as nested list.
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
</html>
Output:

HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .

HTML Table Tags


Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.
1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
8. Output:
First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
9. In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border


There are two ways to specify border for HTML tables.
1. By border attribute of table in HTML
2. By border property in CSS

1) HTML Border attribute


You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.
1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

First_Name Last_Name Marks


Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

2) CSS Border property


It is now recommended to use border property of CSS to specify border in table.
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>
You can collapse all the borders in one border by border-collapse property. It will
collapse the border into one.
1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>

HTML Table with cell padding


You can specify padding for table header and table data by two ways:
1. By cellpadding attribute of table in HTML
2. By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use
CSS. So let's see the code of CSS.
1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

HTML Table with colspan


If you want to make a cell span more than one column, you can use the colspan
attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on
the value of colspan attribute.
Let's see the example that span two columns

HTML Table with rowspan


If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.
Let's see the example that span two rows.

HTML Table with rowspan


If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.
Let's see the example that span two rows.

HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent to
the given addres
Syntax:
1. <form>
2. //Form elements
3. </form>
The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.

Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
HTML Form Tags
Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML form Attribute


HTML <form> element attributes
In HTML there are various attributes available for <form> element which are given
below:
HTML action attribute
The action attribute of <form> element defines the process to be performed on form
when form is submitted, or it is a URI to process the form information.
The action attribute value defines the web page where information proceed. It can
be .php, .jsp, .asp, etc. or any URL where you want to process your form.

HTML method attribute


The method attribute defines the HTTP method which browser used to submit the form.
The possible values of method attribute can be:
o post: We can use the post value of method attribute when we want to process the
sensitive data as it does not display the submitted data in URL.

Example:
1. <form action="action.html" method="post">
o get: The get value of method attribute is default value while submitting the form. But
this is not secure as it displays data in URL after submitting the form.

Example:
1. <form action="action.html" method="get">
When submitting the data, it will display the entered data in the form of:
1. file:///D:/HTML/action.html?name=JavaTPoint&pass=123

Notes on GET:

 Appends the form data to the URL, in name/value pairs


 NEVER use GET to send sensitive data! (the submitted form data is visible
in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:

 Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of
data.
 Form submissions with POST cannot be bookmarked
Tip: Always use POST if the form data contains sensitive or personal
information!

HTML target attribute


The target attribute defines where to open the response after submitting the form. The
following are the keywords used with the target attribute.
o _self: If we use _self as an attribute value, then the response will display in current page
only.

Example:
1. <form action="action.html" method="get" target="_self">
o _blank: If we use _blank as an attribute it will load the response in a new page.

Example:
1. <form action="action.html" method="get" target="_blank">

HTML autocomplete attribute


The HTML autocomplete attribute is a newly added attribute of HTML5 which enables
an input field to complete automatically. It can have two values "on" and "off" which
enables autocomplete either ON or OFF. The default value of autocomplete attribute is
"on".

Example:
1. <form action="action.html" method="get" autocomplete="on">

Example:
1. <form action="action.html" method="get" autocomplete="off">
Note: it can be used with <form> element and <input> element both.

HTML enctype attribute


The HTML enctype attribute defines the encoding type of form-content while
submitting the form to the server. The possible values of enctype can be:
o application/x-www-form-urlencoded: It is default encoding type if the enctype
attribute is not included in the form. All characters are encoded before submitting the
form.

Example:
1. <form action="action.html" method="post" enctype="application/x-www-form-urlencoded" >
o multipart/form-data: It does not encode any character. It is used when our form
contains file-upload controls.

Example:
1. <form action="action.html" method="post" enctype="multipart/form-data">
o text/plain (HTML5): In this encoding type only space are encoded into + symbol and
no any other special character encoded.

Example:
1. <form action="action.html" method="post" enctype="text/plain" >

HTML novalidate attribute HTML5


The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this
attribute in form then it does not perform any type of validation and submit the form.

What is XHTML
XHTML stands for EXtensible HyperText Markup Language. It is a cross
between HTML and XML language.
XHTML is almost identical to HTML but it is stricter than HTML. XHTML is
HTML defined as an XML application. It is supported by all major browsers.
Although XHTML is almost the same as HTML but It is more important to
create your code correctly, because XHTML is stricter than HTML in syntax and
case sensitivity. XHTML documents are well-formed and parsed using standard
XML parsers, unlike HTML, which requires a lenient HTML-specific parser.

History
XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation
on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31,
2001. The standard known as XHTML5 is being developed as an XML
adaptation of the HTML5 specification.

Why use XHTML


XHTML was developed to make HTML more extensible and increase
interoperability with other data formats. There are two main reasons behind
the creation of XHTML:
o It creates a stricter standard for making web pages, reducing
incompatibilities between browsers. So it is compatible for all major
browsers.
o It creates a standard that can be used on a variety of different devices
without changes.
Let's take an example to understand it.
HTML is mainly used to create web pages but we can see that many pages on
the internet contain "bad" HTML (not follow the HTML rule).
This HTML code works fine in most browsers (even if it does not follow the
HTML rules).
For example:
1. <html>
2. <head>
3. <title>This is an example of bad HTML</title>
4. <body>
5. <h1>Bad HTML
6. <p>This is a paragraph
7. </body>
The above HTML code doesn't follow the HTML rule although it runs. Now a
day, there are different browser technologies. Some browsers run on
computers, and some browsers run on mobile phones or other small devices.
The main issue with the bad HTML is that it can't be interpreted by smaller
devices.
So, XHTML is introduced to combine the strengths of HTML and XML.
XHTML is HTML redesigned as XML. It helps you to create better formatted
code on your site.
XHTML doesn't facilitate you to make badly formed code to be XHTML
compatible. Unlike with HTML (where simple errors (like missing out a closing
tag) are ignored by the browser), XHTML code must be exactly how it is
specified to be.

XHTML Syntax
XHTML syntax is very similar to HTML syntax and all the valid HTML elements
are also valid in XHTML. But XHTML is case sensitive so you have to pay a bit
extra attention while writing an XHTML document to make your HTML
document compliant to XHTML.
You must remember the following important points while writing a new
XHTML document or converting existing HTML document into XHTML
document:
o All documents must have a DOCTYPE.
o All tags must be in lower case.
o All documents must be properly formed.
o All tags must be closed.
o All attributes must be added properly.
o The name attribute has changed.
o Attributes cannot be shortened.
o All tags must be properly nested.

DOCTYPE Declaration
All XHTML documents must contain a DOCTYPE declaration at the start. There
are three types of DOCTYPE declarations:
o Strict
o Transitional
o Frameset
Here is an example of using DOCTYPE.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Tags must be in lower case


XHTML is case-sensitive markup language. So, all the XHTML tags and
attributes must be written in lower case.
1. <!-- Invalid in XHTML -->
2. <A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
3. <!-- Valid in XHTML -->
4. <a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>

Closing Tags are mandatory


An XHTML must have an equivalent closing tag. Even empty elements should
also have closing tags. Let's see an example:
1. <!-- Invalid in XHTML -->
2. <p>This paragraph is not written according to XHTML syntax.
3. <!-- Invalid in XHTML -->
4. <img src="/images/xhtml.gif" >
5. <!-- Valid in XHTML -->
6. <p>This paragraph is not written according to XHTML syntax.</p>
7. <!-- Valid in XHTML-->
8. <img src="/images/xhtml.gif" />

Attribute Quotes
All the XHTML attribute's values must be quoted. Otherwise, your XHTML
document is assumed as an invalid document.
See this example:
1. <!-- Invalid in XHTML -->
2. <img src="/images/xhtml.gif" width=250 height=50 />
3. <!-- Valid in XHTML -->
4. <img src="/images/xhtml.gif" width="250" height="50" />

Attribute Minimization
XHTML doesn't allow you to minimize attributes. You have to explicitly state
the attribute and its value.
S.No. HTML XHTML

1. Hypertext mark-up language - - > HTML Extensible Hypertext Mark-up


Language - - > XHTML.

2. Tim Berners created in 1991 World wide web consortium or W3C


created in 2000

4. It is an extension of standard generalized markup It is a combination of extensible


language or SGML markup language XML and hypertext
markup language HTML

5. It stored in a document file format It stored as a markup language format

6. It is not case sensitive as there is no mandatory rule It is case-sensitive, and every tag and
to write the entire mark up in uppercase or lower attribute used inside must be in
case. It can also be a combination of both. lowercase.

7. It is not mandatory to add document label < It is mandatory to add a document


DOCTYPE >at the top of every page. We can even label < DOCTYPE > at the beginning of
skip it. the page.

8. We can close any tag anytime and anywhere as per It is mandatory to close all the tags in
our needs strict residing order as they were
declared.

9. We can add attributes without any quotes. It is mandatory to add quotes on every
attribute we declare
10. ,html and .htm are the extensions used by HTML .xhtml, .xml and .xht are the file
extensions used by XHTML

11 Lewd structure is used It contains a very strict structure, and


the developer cannot go out of the
bounds of these structures.

You might also like