Scribd
Upload
46 views80 pages

PK-WT-Unit - 02 - HTML

Uploaded by

アビシェーク
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views80 pages

PK-WT-Unit - 02 - HTML

Uploaded by

アビシェーク
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 80

21CSCU0614

Web Technologies

UNIT II – Introduction to HTML


Dr.P.Kalavathi
Professor
DCSA, GRI

Dr.P.Kalavathi, Associate Professor, 1


DCSA, GRI
What is HTML?
• HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a
markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web
pages
HTML Documents

• HTML documents describe web pages


• The purpose of a web browser is to read HTML
documents and display them as web pages.
The browser does not display the HTML tags,
but uses the tags to interpret the content of
the page:
Example

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
HTML Elements
• An HTML element is everything from the start
tag to the end tag: Start tag * Element
content End tag *

• The start tag is often called the opening tag. The end tag is
often called the closing tag.
HTML Element Syntax

• An HTML element starts with a start tag / opening


tag
• An HTML element ends with an end tag / closing tag
• The element content is everything between the
start and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• Most HTML elements can have attributes
Empty HTML Elements

• HTML elements with no content are called empty elements.


Empty elements can be closed in the start tag.
• <br> is an empty element without a closing tag (the <br> tag
defines a line break).
• In XHTML, XML, and future versions of HTML, all elements
must be closed.
• Adding a slash to the start tag, like <br />, is the proper way of
closing empty elements, accepted by HTML, XHTML and XML.
• Even if <br> works in all browsers, writing <br /> instead is
more future proof.
HTML Attributes

• HTML elements can have attributes


• Attributes provide additional information about an
element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like:
name="value"
• Attribute values should always be enclosed in quotes.
• Double style quotes are the most common, but single
style quotes are also allowed
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the largest heading. <h6> defines the smallest
heading.
• Use HTML headings for headings only. Don't use headings
to make text BIG or bold
– Example:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML Comments
• Comments can be inserted into the HTML
code to make it more readable and
understandable. Comments are ignored by the
browser and are not displayed.
• Comments are written like this:
• <!—This is a comment -->
HTML Text Formatting Tags
• HTML uses tags like <b> and <i> for formatting
output, like bold or italic text.
• These HTML tags are called formatting tags.
HTML Formatting Tags
• HTML uses tags like <b> and <i> for formatting output,
like bold or italic text.
• These HTML tags are called formatting tags.
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code text</code>
<samp>Sample computer code text</samp> <kbd>Keyboard
text</kbd>
<var>Variable</var>
<cite>Citation</cite>
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
This text is bold
This text is italic
This is subscript and superscript
HTML Paragraphs

• HTML paragraphs are defined with the <p> tag.

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p> This is a paragraph.
</body> This is a paragraph.
This is a paragraph.
</html>
HTML Hyperlinks (Links)
• A hyperlink (or link) is a word, group of words, or image
that you can click on to jump to a new document or a
new section within the current document.
• When you move the cursor over a link in a Web page,
the arrow will turn into a little hand.
• Links are specified in HTML using the <a> tag.
• The <a> tag can be used in two ways:
– To create a link to another document, by using the href
attribute
– To create a bookmark inside a document, by using the name
attribute
HTML Link Syntax

• The HTML code for a link is simple. It looks like


this:
• <a href="url">Link text</a>
• The href attribute specifies the destination of
a link.
HTML Links Example

• HTML links are defined with the <a> tag.


• The link address is specified in the href attribute. (internal linking)

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<a href="http://www.ruraluniv.ac.in">This is a link</a>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links - The target Attribute
• The target attribute specifies where to open
the linked document.
• The example below will open the linked
document in a new browser window:
Example
<a href=http://www.ruraluniv.ac.in
target="_blank “>Visit GRI</a>
HTML Links - The name Attribute
• The name attribute specifies the name of an
anchor.

The name attribute is used to create a


bookmark inside an HTML document.
• Bookmarks are not displayed in any special
way. They are invisible to the reader.
Example
• A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same
document:
<a href="#tips">Visit the Useful Tips Section</a>
Or
create a link to the "Useful Tips Section" from another
page:
<a href="http://www.ruraluniv.ac.in/html_links.htm#tips">
Visit the Useful Tips Section</a>
<html>
<h3><a name="a002">a002</a></h3>
<body>
<p>paragraph text reterterteryreyryry
ryryryyrtyutrytrutiytyi
yyiyuiyuouioiupiopi
<h1>TAG index</h1> iupiupio[po[
eryrtyrtutruty
<h2>Anchor example</h2> trtututyiyti...</p>

<h3><a name="a003">a003</a></h3>
<h3><a name="menu">Menu</a></h3> <p>paragraph text fghfghfgjf
<ul> wrwerwtet
<li><a href="#a001">Jump to a001</a></li> fghfgjfjgk
<li><a href="#a002">Jump to a002</a></li> tryrtutyitit
fhgjgjg
<li><a href="#a003">Jump to a003</a></li>
yytiyioy
</ul> ghghkhkg
gjgkghk ...</p>
<h3><a name="a001">a001</a></h3>
<p>paragraph text ssssssssssssssssssss <hr>
ssssssssssssssssssssssssssssssssssssss <p><a href="#menu">Jump to Menu</a></p>
ssssssssssssssssssssssssssssssssssssss
</body>
ssssssssssssssssssssssssssssssssssssss </html>
ssssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssss ...</p>
HTML the <img> Tag and the src Attribute

• In HTML, images are defined with the <img>


tag.
• The <img> tag is empty, which means that it
contains attributes only, and has no closing
tag.
• To display an image on a page, you need to
use the src attribute. src stands for "source".
The value of the src attribute is the URL of the
image you want to display.
Syntax for defining an image
<img src="url" alt="some_text"/>
• The URL points to the location where the image is
stored. An image named "boat.gif", located in the
"images" directory on "www.ruraluniv.ac.in" has the
URL: http://www.ruraluniv.ac.in/images/boat.gif.
• The browser displays the image where the <img>
tag occurs in the document. If you put an image tag
between two paragraphs, the browser shows the
first paragraph, then the image, and then the
second paragraph.
HTML Images

• HTML images are defined with the <img> tag.


• The name and the size of the image are provided as
attributes.
• Example:
<!DOCTYPE html>
<html>
<body>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
HTML The Alt Attribute
• The required alt attribute specifies an alternate
text for an image, if the image cannot be displayed.
• The value of the alt attribute is an author-defined
text:
<img src="boat.gif" alt="Big Boat" />
• The alt attribute provides alternative information
for an image if a user for some reason cannot view
it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
<html>
<body>

<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>

<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>

<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />


An image before the text.</p>

<p>An image after the text.


<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>

</body>
</html>
HTML Special Characters
• Many mathematical, technical, and currency
symbols, are not present on a normal
keyboard.
• To add these symbols to an HTML page, we
can use an HTML entity name.
• If no entity name exists, we can use an entity
number; a decimal (or hexadecimal)
reference.
• Example
<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>

• Output
I will display €
I will display €
I will display €
HTML Horizontal Rule
• The <hr> tag defines a thematic break in an HTML
page (e.g. a shift of topic).
• The <hr> element is used to separate content (or
define a change) in an HTML page.
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
HTML Lists
• Ordered List
• Unordered List
• Description/Definition Lists
• Nested List
• Horizontal List
HTML Unordered Lists
• An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
• The list items are marked with bullets
(typically small black circles).
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>


<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>


<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
HTML Ordered Lists
HTML Description/Definition Lists
• HTML also supports description lists.
• 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:
Nested HTML Lists
• List can be nested (lists inside lists):
Note that for the nested list without explicitly specifying the style, the style of the
nested list will be changed automatically.
Horizontal Lists
• HTML lists can be styled in many different ways with CSS.
• One popular way, is to style a list to be displayed horizontally:
HTML Tables
• Tables are defined with the <table> tag.
• A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with
the <td> tag). td stands for "table data," and
holds the content of a data cell. A <td> tag can
contain text, links, images, lists, forms, other
tables, etc.
• HTML Table
• More Example visit
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro
HTML Forms
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

</body>
</html>
The <input> Element

The HTML <input> element is the most used form element.


An <input> element can be displayed in many ways, depending
on the type attribute.

Here are some examples:


Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero
or more of many choices)
<input type="submit"> Displays a submit button (for submitting
the form)
<input type="button"> Displays a clickable button
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20
characters.</p>
</body>
</html>
• To create a drop down list

<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Group together related options with <optgroup> tags:
The <optgroup> tag is used to group together related options in a select
list.
If you have a long list of options, groups of related options are easier to
handle for the user.

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
• To create a button
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
Fieldset tag
• Definition and Usage
• The <fieldset> tag is used to logically group together elements in a form.
• The <fieldset> tag draws a box around the related form elements.
• The <legend> tag defines a caption for the fieldset element
HTML Frames
• HTML Frames
• With frames, you can display more than one
HTML document in the same browser window.
Each HTML document is called a frame, and
each frame is independent of the others.
• The disadvantages of using frames are:
• The web developer must keep track of more
HTML documents
• It is difficult to print the entire page
• The HTML frameset Element
• The frameset element holds two or more
frame elements. Each frame element holds a
separate document.
• The frameset element states only HOW MANY
columns or rows there will be in the frameset.
• The HTML frame Element
• The <frame> tag defines one particular window (frame)
within a frameset.
• In the example below we have a frameset with two
columns.
• The first column is set to 25% of the width of the browser
window. The second column is set to 75% of the width of
the browser window. The document "frame_a.htm" is
put into the first column, and the document
"frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>

Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the
columns can be set to use the remaining space, with an asterisk (cols="25%,*").

<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm" />
<frameset cols="25%,75%">
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row
attribute</title>
</head>

<frameset rows = "20%, 60%, 20%">


<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames Using col
Attribute</title>
</head>

<frameset cols = "30%, 40%, 30%">


<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png"
/>
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
The HTML meta Element
• The HTML meta Element
• Metadata is information about data.
• The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
• Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata.
• The <meta> tag always goes inside the head element.
• The metadata can be used by browsers (how to display content
or reload page), search engines (keywords), or other web
services.
Keywords for Search Engines
• Some search engines will use the name and content
attributes of the meta element to index your pages.
• The following meta element defines a description of a
page:
<meta name="description" content="Free Web tutorials on
HTML, CSS, XML" />
• The following meta element defines keywords for a
page:
<meta name="keywords" content="HTML, CSS, XML" />
• The intention of the name and content attributes is to
describe the content of a page.
HTML - Lab programs List 1
1. Heading tags
2. Hyperlink
3. All text style attributes
4. Linking to the different sections in same document
5.Inserting image in the document
6. Inserting minimum 25 special character in the document
7. Ordered list
8. Unordered list
9. Description or definition list
11. Horizontal list with and without padding
10. Nested list
11. Horizontal list with and without padding
12. Create any table with data (use all table tags)
13. Create table with list items, links, images and normal data.
14. Nested table
15. User online registration form using all form elements.
16. Frames :- link other html pages, table, image and forms.
17. Display any 20 emoji on web pages..
18. HTML page to stream any 5 video formats.
19. HTML page to stream audio...
20. Create a web page to use geolocation API.
21. Create a web page for using drag and drop API
22. Webpage using meta tag.
23. Create a web page to display your Bio-data.
24. Create a Commercial website.
End of HTML

You might also like