BVK_PTT_HTML-Unit - III (1).pptx

Overview
● Introduction to internet
● Introduction to HTML
Formatting Tags
Anchor Tag
Image Tag
Lists
Table
Form

Introduction to internet
● The Word “internet” is derived from two words :
○ Interconnection (internal connection between the computers)
○ Network
●Internet is a world wide system of computer networks, i.e.. a network of networks,
which allows the users to share information on those linked computers.

World Wide Web
●The World Wide Web—usually called the Web for short.
● It is a collection of different websites you can access through the Internet.
● A website is made up of related text, images, and other resources.

Basic Internet Terms
Website:
●A website is a set of related (linked through hyper text links) web pages, published by
an organization or individual.
Web page:
●The world wide web consists of files, called pages or web pages, which contain
information and links to resources throughout the internet.
●A “web page” is an electronic document written in a computer language called
HTML.

Web browser:
● It is the basic software that is needed to find, retrieve, view and send information
over the internet.
Uniform Resource Locator:
●Each web page has a unique address called a uniform resource locator (URL) that
identifies its location on the internet.
The structure of this URL is
HTTP – Hyper text transfer protocol (it is a protocol)
WWW – World Wide Wed (Host computer name)

● HTTP is a protocol which allows the fetching of resources, such as HTML
documents. It is the foundation of any data exchange on the Web and it is a client-
server protocol, which means requests are initiated by the recipient, usually the Web
browser.

markup language, standard text-encoding system consisting of a set of
symbols inserted in a text document to control its structure, formatting, or the
relationship between its parts. The most widely used markup languages
are SGML (Standard Generalized Markup Language), HTML (Hypertext
Markup Language), and XML (Extensible Markup Language). The markup
symbols can be interpreted by a device (computer, printer, browser, etc.) to
control how a document should look when printed or displayed on a monitor.
A marked-up document thus contains two types of text: text to be displayed
and markup language on how to display it.

A markup tag is a directive that contains snippet of code with a
relative reference to an object in your store such as a variable, URL, image, or
block. Markup tags can be used anywhere the editor is available and
incorporated into the HTML of email and newsletter templates, as well as
other types of content.

HyperText Markup Language (HTML)
 An HTML file is a text file containing small markup tags, which tells the Web browser
how to display the page.
 An HTML file must have an .htm or .html file extension.
Syntax:
<html>
<head>
<title> Title of the Page </title>
</head>
<body>
Hello World
</body>
</html>

Structure of HTML
<html> --- </html>, start and end of the HTML document
<head> --- </head>, header information; not displayed in the browser window
<title> --- </title>, the title will be displayed in the browser’s caption
<body> --- </body>, The text between the <body> tags is the text that will be
displayed in your browser.
• Write the HTML document in Notepad
• Save the file, “mypage.html”
• Open the mypage.html in browser

HTML Tags
● HTML tags are used to mark-up HTML elements
● An HTML element is defined by a start tag, some content, and an end tag.
● HTML tags are surrounded by the two characters < and >
● The surrounding characters are called angle brackets
● HTML tags normally come in pairs like <b> and </b>
● The first tag in a pair is the start tag, the second tag is the end tag
● The text between the start and end tags is the element content
● HTML tags are not case sensitive,<b> means the same as <B>

HTML Tags
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“
● This tag defines the body element of your HTML page: <body>. With an added
bgcolor attribute, you can tell the browser that the background color of your page
should be red, like this:
<body bgcolor="red">

HEADINGS:
HTML headings are used display titles or subtitles on Webpage.
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
Syntax: <h1> Hello </h1>
PARAGRAPHS:
Paragraphs are defined with the <p> tag.
HTML automatically adds an extra blank line before and after a paragraph.
Syntax: <p> Hello, How are you </p>
HTML <hr> Tag:
The <hr> element is most often displayed as a horizontal rule that is used to separate
content (or define a change) in an HTML page

LINE BREAKS: The <br> tag is used when you want to end a line, but don't want to
start a new paragraph. The <br> tag forces a line break wherever you place it.
The <br> tag is an empty tag. It has no closing tag.
Syntax: <br>Good Morning <br> How are you
Comments in HTML:
The comment tag is used to insert a comment in the HTML source code.
Comments are used to explain the code, which can help you when you edit the source
code at a later date.
A comment will be ignored by the browser.
Syntax: 
You can also hide more than one line. Everything between the  will be
hidden from the display.

HTML Text Formatting Tags
<b> : defines bold text
<strong> - Important text
<i> : defines italic text
<em> : defines emphasized text, similar to italic
<small> : defines smaller text
<mark> : defines text that should be marked or highlighted
<del> : defines text that has been deleted from a document. Browser will strike the
text
<ins> : defines a text that has been inserted into a document. Browser will underline
the text.
<sub> : defines subscript text, it appears half a character below the normal line.
<sup> : defines superscript text, it appears half a character above the normal line.

Marquee: The HTML <marquee> tag is used for scrolling piece of text or image
displayed either horizontally across or vertically down the web page
Syntax: <marquee direction=“up” height=40 bgcolor=“green”>
Attributes:
width
height
direction: left, right, up, down
behavior: scroll, slide and alternate
bgcolor

Font:
●The HTML <font> tag is used to define the font size, color and face of text.
●The font tag is having three attributes called size, color, and face to customize
your fonts.
Syntax: <font color=“red” face=“calibri” size=“40”>
Attributes:
Color
Face
size

● Images can improve the design and the appearance of a web page.
● The HTML <img> tag is used to embed an image in a web page.
Syntax: <img src=“ filename/url” attributes list>
Attributes:
● src: Specify correct filename of the image, it is case sensitive
● alt: It is a mandatory attribute which specifies an alternative text for an image, if
the image cannot be displayed.
● Width & Height: It is used to set width and height of an image. Width and height
can be specified in terms of pixels or percentage.
● Border: It specifies the border for the image. Border thickness specified in terms
of pixels.
● Align: Image is aligned default to left, align attribute is used to align to center or
right.
HTML Images

● HTML links are hyperlinks.
● You can click on a link and jump to another document.
● HTML uses the <a> (anchor) tag to create a link to another document.
● The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
● The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
● The Text to be displayed is the part that will be visible to the reader.
● Clicking on the link Text to be displayed , will send the reader to the specified
URL address.
HTML Links

Attributes:
href : href, is the important attribute which indicates the link’s destination.
Target: specifies where to open the linked document.
blank: opens the document in new tab.
self: default, opens the document in the same window.
<a href= “https://www.google.com” target=“_blank”> Visit Google </a>
Absolute URL: a full web address (https://www.google.com)
Relative URL: A local link is specified with a relative URL.
Image as a link:
<a href="https://www.google.com">
<img src="D: SRU logo.jpg" alt="HTML tutorial" width="50" height="50">
</a>
HTML Links

● A good background can make a Web site look really great.
● The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image.
1. Bgcolor
● The bgcolor attribute specifies a background-color for an HTML page.
<body bgcolor=“red">
2. Background
● The background attribute specifies a background-image for an HTML page.
● The value of this attribute is the URL of the image you want to use.
<body background="images/dell.jpg">
HTML Backgrounds

HTML Lists
HTML lists allow web developers to group a set of related items in lists.
There are 3 types of lists:
Unordered list
Ordered list
Description list
All list must contain one or more list elements.
Example
An unordered HTML list:
● India
● Japan
● Germany
● Italy
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
An description HTML
list:
WHO
World Health Organization

Unordered HTML List
● An unordered list is a collection of related items that have no special order and
sequence.
● 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:
Example:
<ul>
<li> Ganga </li>
<li> Yamuna </li>
<li> Saraswathi </li>
</ul>

<html>
<head>
<title> Unordered list </title>
</head>
<body>
<ul>
<li> Ganga </li>
<li> Yamuna </li>
<li> Saraswathi </li>
</ul>
</body>
</html>

Attribute:
Type: It is used to specify the type of bullet.
<ul type=“disc”> (Default)
<ul type=“square”>
<ul type=“circle”>
Nested list:
A nested list is a list that appears as list item in the list.
Syntax:
<ul>
<li> <ul>
<li>……. </li>
</ul>
</li>
</ul>

Ordered HTML List
● An ordered list used to specify a numbered 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.
Example:
<ol>
<li> Book </li>
<li> Pencil </li>
<li> Pen </li>
</ol>

Ordered HTML List
Attributes:
Type: It is used to specify the type of numbering
<ol type=“1”> Default case – Numerals
<ol type=“I”> Upper case – Numerals
<ol type=“i”> Lower case – Numerals
<ol type=“A”> Upper case – Letters
<ol type=“a”> Lower case – Letters
Start: It is used to specify the starting point of numbering.
<ol type=“1” start=“2”>

<html>
<head>
<title> Ordered List </title>
</head>
<body>
<ol>
<li> Book </li>
<li> Pencil </li>
<li> Pen </li>
</ol>
</body>
</html>

Nesting Ordered List:
<html>
<head>
<title> Nested Ordered List </title>
</head>
<body>
<ol type="I">
<li>first item</li>
<li>second item
<ol type="1">
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
<li>third item</li>
</ol>
</body>
</html>

HTML 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.
● The <dd> tag is used to describe the term.
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<html>
<head>
<title> Description List </title>
</head>
<body>
<h2> Description List </h2>
<dl>
<dt>WHO</dt>
<dd> World Health Organization </dd>
</dl>
</body>
</html>

HTML Table
● HTML table are used to arrange the data in rows and columns.
● <table> tag is used to create a table.
● <tr> is used to define a table row.
● <td> is used to define data/cell in a table – default regular and left aligned.
● <th> is used to define the table heading – default bold and centered.
● <caption> element to define a table caption
Syntax:
<table>
<tr>
<td> ….. </td>
</tr>
</table>

Attributes:
● align: table alignment; right, left, center, justify.
● bgcolor: specifies background color of table.
● border: specifies border width in pixels.
● width: specifies width of the table.
● cellpadding: specifies the space between the cell border and their content.
● cellspacing: specifies the space between the cells.
● colspan: used to merge 2 or more columns into single column.
● rowspan: used to merge 2 or more rows into single row.
● id : attribute to uniquely define one table

Table Example
How the HTML code above
looks in a browser:
HTML Table

● Header information in a table are defined with the <th> tag.
● All major browsers display the text in the <th> element as bold and centered.
Example
How the HTML code
above looks in a browser:
HTML Table Headers

HTML Table – thead, tbody, tfoot

HTML Table : Task – 2 (using <thead>, <tbody>, and <tfoot>)

Grouping Content
● The <div> tag defines a division or a section in an HTML document. The
<div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript. The <div> tag is easily styled by
using the class or id attribute. Any sort of content can be put inside the <div>
tag!
● The <div> and <span> elements allow you to group together several elements
to create sections or subsections of a page.
● The div tag is known as Division tag.
● The div tag is used in HTML to make divisions of content in the web page
like (text, images, header, footer, navigation bar, etc).
● Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to
close the tag.

<html>
<head>
<title> Division Tag </title>
</head>
<body>
<div id="div1"> div tag </div>
</body>
</html>
Example:
As we know Div tag is block-level tag in this example div tag contain entire width. It will
be displayed div tag each time on a new line, not on the same line.

<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "center" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
<div> Task – 1 (code):

● The <span> element, on the other hand, can be used to group inline elements only.
● The span tag is very similar to the div tag, but div is a block-level tag and span is an inline tag.
● Inline elements are those which only occupy the space bounded by the tags defining the
element, instead of breaking the flow of the content. Note: An inline element does not start
on a new line and only takes up as much width as necessary.
● So, if you have a part of a sentence or paragraph which you want to group together, you could
use the <span> element as follows.
Example:
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
<span>

● Forms can be used to collect information.
● HTML form on a web page allows a user to enter data that is sent to a server for
processing.
● Forms can resemble paper or database, web users fill out the forms using
checkboxes, radio buttons, or text fields etc..
● The HTML <form> tag is used to create an HTML form and it has following syntax
Syntax :
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
HTML Forms :

Syntax:
<form action="URL">
Attribute Values
Value Description
URL Where to send the form-data when the form is submitted.
Possible values:
An absolute URL - points to another web site (like
action="http://www.example.com/example.htm")
A relative URL - points to a file within a web site (like action="example.htm")

There are different types of form controls that you can use to collect data
using HTML form −
● Text Input Controls
● Checkboxes Controls
● Radio Box Controls
● Select Box Controls
● File Select boxes
● Hidden Controls
● Clickable Buttons
● Submit and Reset Button
HTML Form Controls

There are three types of text input used on forms −
● Single-line text input controls − This control is used for items that require
only one line of user input, such as search boxes or names. They are created
using HTML <input> tag.
● Password input controls − This is also a single-line text input but it masks
the character as soon as a user enters it. They are also created using HTML
<input> tag.
● Multi-line text input controls − This is used when the user is required to
give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag.
Text Input Controls

Single-line text input controls : Attributes

<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form > First name: <input type = "text" name = "first_name" /> <br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
Single-line text input controls

Password input controls : Attributes

<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form > User ID : <input type = "text" name = "user_id" /> <br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
Password input controls

Multiple-Line Text Input Controls : Attributes

<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description"> Enter
description here...
</textarea>
</form>
</body>
</html>
Multiple-Line Text Input Controls

Checkbox Control
• Checkboxes are used when more than one option is required to be selected.
• They are also created using HTML <input> tag but type attribute is set
to checkbox.

Example:
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>
Checkbox Control

Radio Button Control
•Radio buttons are used when out of many options, just one option is required to be
selected.
•They are also created using HTML <input> tag but type attribute is set to radio.

Example:
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
Radio Button Control

Select Box Control
• A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options..

Example:
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
<option value = “Chemistry">Chemistry</option>
</select>
</form>
</body>
</html>
Select Box Control

Example:
<form>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<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>
</form>
Select Box Control - optgroup

File Upload Box
• If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box.
•This is also created using the <input> element but type attribute is set to file.
Syntax:
<input type = "file" name = "fileupload" accept = "image/*" />

Example:
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form> <input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
File Upload Box : Example

Button Controls
• There are various ways in HTML to create clickable buttons.
•You can also create a clickable button using <input> tag by setting its type attribute
to button.
•The type attribute can take the following values

<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "srulogo.jpg" />
</form>
</body>
</html>
Button Controls : Example

● Hidden form controls are used to hide data inside the page which later on can be pushed to
the server.
● This control hides inside the code and does not appear on the actual page.
● For example, following hidden form is being used to keep current page number.
● When a user will click next page then the value of hidden control will be sent to the web
server and there it will decide which page will be displayed next based on the passed
current page.
Syntax:
<input type = "hidden" name = "pagename" value = "10" />
Hidden Form Controls

<html>
<head>
<title>Hidden Form Control</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Hidden Form Controls : Example

● The <fieldset> element in HTML is used to group the related information of a form.
● This element is used with <legend> element which provide caption for the grouped
elements.
HTML <fieldset> element:
<html>
<head>
<title>fieldset</title>
</head>
<body>
<form>
<fieldset>
<legend align="center">User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pwd">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
</body>
</html>

● <input type="button">
● <input type="checkbox">
● <input type="color">
● <input type="date">
● <input type="datetime-local">
● <input type="email">
● <input type="file">
● <input type="hidden">
● <input type="image">
● <input type="month">
● <input type="number">
HTML Input Types
● <input type="password">
● <input type="radio">
● <input type="range">
● <input type="reset">
● <input type="search">
● <input type="submit">
● <input type="tel">
● <input type="text">
● <input type="time">
● <input type="url">
● <input type="week">
● Here are the different input types you can use in HTML

What you learnt in
this session
Summary of the topic
1. Internet
2. HTML
Specific topics:
● HTML Tags
● Formatting Tags
● HTML Links
● HTML Images
● HTML Backgrounds
● HTML Lists
● HTML Table
● HTML Form

Questions
Question 1 What is Internet?
What is HTML?
Question 2

The Difference Between Unicode and UTF-8
Unicode is a character set. UTF-8 is encoding.
Unicode is a list of characters with unique decimal numbers (code points). A
= 65, B = 66, C = 67, ....
This list of decimal numbers represent the string "hello": 104 101 108 108 111
Encoding is how these numbers are translated into binary numbers to be
stored in a computer:
UTF-8 encoding will store "hello" like this (binary): 01101000 01100101
01101100 01101100 01101111
Encoding translates numbers into binary. Character sets translates characters
to numbers.

BVK_PTT_HTML-Unit - III (1).pptx

Recommended

Recommended

More Related Content

Similar to BVK_PTT_HTML-Unit - III (1).pptx

Similar to BVK_PTT_HTML-Unit - III (1).pptx (20)

Recently uploaded

Recently uploaded (20)

BVK_PTT_HTML-Unit - III (1).pptx