UNIT 1: INTRODUCTION TO HTML · UNIT 1: INTRODUCTION TO HTML 1. What is HTML? HTML is the standard...

UNIT 1: INTRODUCTION TO HTML

1. What is HTML?

HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language

HTML describes the structure of Web pages using markup

HTML elements are the building blocks of HTML pages

HTML elements are represented by tags

HTML tags label pieces of content such as "heading", "paragraph", "table",

and so on

Browsers do not display the HTML tags, but use them to render the content

of the page.

A sample program for HTML:

Example

<html>

<head>

<title>Page Title</title> </head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

What is Scripting Language?

A script language is a programming language that supports scripts: programs

written for a special run-time environment that automate the execution of tasks.

Scripting language are sometimes referred as very high programming

language. Some of the scripting language are pearl, python, java script.

What is Internet?

The Internet is the global system of interconnected computer networks that

use the Internet protocol suite (TCP/IP) to link devices worldwide.

A global computer network providing a variety of information and

communication facilities, consisting of interconnected networks using standardized

communication protocols.

A Brief Overview of TCP/IP and its Services:

• A TCP/IP is collection of protocols ,applications and services.There are five

layers within TCP/IP Protocol such as

➢ Application Layer

➢ Transport Layer

➢ Network Layer

➢ Data link Layer

➢ Physical Layer

Physical Layer:

The physical layer is pure hardware in any network infrastructure. This

includes cable, satellite or any connection medium and network interface card,

which transmits electrical signals and so on.

Data link Layer:

This is the layer that is responsible for splitting data into packets to be sent

across the connection medium such as cables, satellite and so on.

Network Layer:

This layer gets packets from the data link layer and sends them to the correct

network address. If more than one possible route is available for the data to travel,

the network layer figures out the best route.

Transport Layer:

The network layer routes the data to its destination, it cannot guarantee that

the packets holding data will arrive in the correct order.

The transport layer job is to make sure that the packets have no errors and

they received in the correct order.

Application Layer:

It contains the application that the user uses to send or receive data. Without

this layer the computer and its user would never be able to send the data.

Text Formatting:

HTML Tags:

An HTML tag is a signal to a browser that it should do something. All

HTML tags begin with an open angle bracket (<) and end with a close angle

bracket (>).

HTML tags can be two types:

• Paired Tags

• Singular Tags

Paired Tags:

A tag is said to be a paired tag if the text is placed between a tag and its

companion tag. In paired tags, the first tag is referred to as Opening Tag and the

second tag is referred to as Closing Tag.

Example: <i>this text is in italics. </i>

Singular Tags:

A Singular or Stand-Alone Tag does not have a companion tag. Singular tags are

also known as unpaired tag.

Example: <br> , <hr>

Commonly Used HTML Commands:

The Structure of the HTML program

An HTML document is a file containing Hypertext Markup Language,

and its filename most often ends in the .html extension. An HTML document is a

text document read in by a Web browser.

The entire web page is enclosed within <HTML></HTML> tags. Within

these tags two distinct sections are created using the <HEAD></HEAD> tags and

the <BODY></BODY> tags.

Document Head

By using head part you can provide following information related to that web page.

Provide title of that page.

Description about that page.

The html tags used to indicate the start and of the head section. The title tags are

used within this head tags.

Example:

<HEAD><TITLE>WEB PAGE TITLE</TITLE></HEAD>

Document Body

Body part contains the actual information which is display on web page. The

tags used to indicate the start and end of the main body of textual information.

<BODY> .............</BODY>

TITLE:

A web page could have a title that describes what the page is about without

being too wordy. This can be achieved by using the TITLE tag. Text include

between the <TITLE>.....</TITLE> tag shows up in the title bar of the browser

window.

Example:

<TITLE>.... </T ITLE>

TEXT FORMATTING:

• Paragraph breaks

• Line breaks

Paragraph breaks:

A blank line always separate paragraphs in textual material. On encountering

this tag the browser, moves onto a new line, skipping one line between the

previous line and the new line.

Example:

<p>this is the first paragraph of text.

This is the first paragraph of text.</p> <p>this is the second paragraph.

This is the second paragraph.</p>

Output:

This is the first paragraph of text. This is the first paragraph of text. This is the

second paragraph. This is the second paragraph.

Line Breaks:

When text needs to start from a new line and not continue on the same line

(without skipping a blank line). The <br> tag should be used. The tag simply

jumps to the start of the next line.

Example:

SRM University,<br>Ramapuram,<br>Chennai<br>

Output:

SRM University,

Ramapuram, Chennai.

Heading Styles

The <h1> to <h6> tags are used to define HTML headings.<h1> defines the most

important heading. <h6> defines the least important heading.

Example:

The six different HTML headings:

<h1>This is heading 1</h1>






<Hr> tag

The <hr> tag represents a horizontal rule. In HTML, the <hr> tag has no end

tag.

Attribute Value Description

align left

center

right

Specifies the alignment of a <hr> element

size pixels Specifies the height of a <hr> element

width Pixels % Specifies the width of a <hr> element

Text Styles:

• Bold

• Italics

• Underline

Bold:

Display the text in BOLDFACE style. The tags used are <b>... </b>

Example:

<b>This text is bold</b>

Output:

This text is bold

Italics:

Display the text in italics. The tags used are <i>... </i>

Example:

<i>this text is italics</i>

Output:

this text is italics

Underline:

Display the text as Underlined, The tags used are <u>... </u>

Example:

<u>Welcome to our home page</u>

Output:

Welcome to our home page

Centering

<center>...</center> tags are used to center everything found between them – text,

lists, images, rules, tables or any other page element.

Example:

<Center>Welcome to our home page</Center>

Output:

Welcome to our home page

Font tag:

Specify the font size, font face and color of text.

Example:

<font face="verdana" size="22" color="green">This is some text!</font>

Output:

This is some text!

Lists:

There are three list types in HTML:

• Unordered List

• Ordered List

• Definition List

Unordered List:

It used to group a set of related items in no particular order. An unordered

list starts with the <ul> tag and end with </ul>tag. Each list item starts with the

<li> tag.

Example:

<ul>

<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

Output:

o Coffee o Tea o Milk

Ordered list:

It used to group a set of related items, in a specific order. An ordered list,

created using the <ol> tag, and each list item starts with the <li> tag. Ordered list

contain information where order should be emphasized.

Example:

<ol type="A">

<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

Output:

A. Coffee B. Tea C. Milk

Definition List:

Definition List values appear within tags <dl>...</dl>. It consists of two

parts:

Definition Term Appears after the tag. Definition Description Appears after the

tag.

Example: <dl> <dt>keyboard <dd>An iput device </dl>

Output:

Keyboard

An input device.

Example: <html>

<head>

<title>List Example</title>

</head>

<body bgcolor="pink">

<br/>

<center><h1>Mobile Operating System</h1></center>

<h2>Unordered List</h2>

<ul type=circle>

<li>Android

<li>Blackberry

<li>iPhone

<li>Windows Phone

</ul>

<ul type=Square>

<li>Android

<li>Blackberry

<li>iPhone

<li>Windows Phone

</ul>

<h2>Ordered List</h2>

<ol type=1 start=1>

<li>Apple

<li>Orange

<li>Mango

<li>Banana

</ol>

<ol type=i start=1>

<li>Apple

<li>Orange

<li>Mango

<li>Banana

</ol>

<h2>Definition List</h2>

<dl>

<dt>HTML</dt>

<dd>Hyper Text Markup Language</dd>

<dt>HTTP</dt>

<dd>Hyper Text Transfer Protocol</dd>

</dl>

</body>

</html>

Adding Graphics in HTML documents:

HTML allows to placing of animated images in an HTML page. HTML

accepts two pictures formats .gif and .jpg. once an image is ready and sorted in .gif

or .jpg formats, it can be inserted into a web page using the tag <img> which takes

the name of the image file(filename.jpg) as an attribute.

HTML also allows control of the height, width, border and so on, of every

image placed on the web page. The <img> tag takes the following attributes

INSERTING AN IMAGE IN HTML PAGE:

Use the HTML <img> element to define an image.

Use the HTML src attribute to define the URL of the image.

Use the HTML alt attribute to define an alternate text for an image, if it

cannot be displayed.

Use the HTML width and height attributes to define the size of the image.

Syntax:

<img src="url" alt="some_text">

Example:

<img src="kites.jpg" alt="Flying Kites">

INSERTING A BACKGROUND IMAGE:

The background attribute specifies a background image for a document.

Syntax:

<body style="background-image:url(images\desert.jpg);">

Example:

<body style="background-image:url(C:\Users\Public\Pictures\Sample

Pictures\desert.jpg);">

</body>

BORDER Specifies the size of the border to place around the image.

WIDTH Specifies the width of the images in pixels.

HEIGHT Specifies the height of the images in pixels

PADDING Indicates the amount of space to the left, right, top and bottom of the

image. This attribute should be specified in CSS.

ALT Indicates the text to be displayed in case the browser is unable to

display the image specified in the src attribute.

SRC Specifies the location and name of the image file.

USING BORDER ATTRIBUTE:

The border attribute specifies the border around an image.

Note: An image has no border by default.

Example:

<html>

<head>

<title>WORKING WITH IMAGES</title>

</head>

<body>

<img src="C:\Users\Public\Pictures\Sample Pictures\jellyfish.jpg" border="10">

</body>

</html>

USING THE WIDTH AND HEIGHT ATTRIBUTE:

The width attribute specifies the width of an image, in pixels. The height

attribute specifies the height of the image.

Tip: Always specify both the height and width attributes for images.

If height and width are set, the space required for the image is reserved when the

page is loaded.

Example:

<img src="C:\Users\Public\Pictures\Sample Pictures\jellyfish.jpg" border="10"

width="500" height="500">

USING THE ALIGN ATTRIBUTE:

The align attribute specifies the alignment of an image according to the

surrounding element.

Example:

<img src="C:\Users\Public\Pictures\Sample Pictures\jellyfish.jpg" width="100"

height="100" align="left">

USING THE ALT ATTRIBUTE:

The required alt attribute specifies an alternate text for an image, if the

image cannot be displayed. 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).

Example:

<img alt="desert" src="C:\Users\Public\Pictures\Sample Pictures\jellyfish.jpg"

width="100" height="100" align="left">

Definition:

The HTML tables allow web authors to arrange data like text, images,

links, other tables, etc. into rows and columns of cells. The HTML tables are

created using the <table> tag in which the <tr> tag is used to create table rows and

<td> tag is used to create data cells.

The <table> tag defines an HTML table. An HTML table consists of the <table>

element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and

the <td> element defines a table cell.

Attributes

Attribute Value

align left center right

bgcolor rgb(x,x,x) #xxxxxx colorname

border 1 0

cellpadding pixels

Cellpadding is the amount of space between the outer edges of the table cell and

the content of the cell.

Cellspacing is the amount of space in between the individual table cells.

https://www.w3schools.com/TAgs/tag_tr.asp

https://www.w3schools.com/TAgs/tag_th.asp

https://www.w3schools.com/TAgs/tag_td.asp

Colspan or Rowspan

A table is divided into rows and each row is divided into cells. In some

situations we need the Table Cells span across (or merged) more than one column

or row. In these situations we can use Colspan or Rowspan attributes.

COLSPAN = integer. ROWSPAN = integer. Table cells can span across more

than one column or row. The attributes COLSPAN (“how many across”) and

ROWSPAN (“how many down”) indicate how many columns or rows a cell

should take up.

The rowspan attribute is similar to colspan , except, obviously, it will span across

rows rather than columns. Again, the cells that it spans should be removed.

<html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<table border = "1" bordercolor = "green" bgcolor = "yellow">

<table border = "1" bordercolor = "green" background = "/images/test.png">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan = "2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>


</tr>

<tr>



</tr>

<tr>

<td colspan = "3">Row 3 Cell 1</td>

</tr>

</table>

</body>

</html>

Internal link

An internal link is a type of hyperlink on a webpage to another page or

resource, such as an image or document, on the same website or domain.

<a> tag is used for anchor name which is referred link to another web page.

Internal links are links that go from one page on a domain to a different

page on the same domain. They are commonly used in main navigation. These type

of links are useful for three reasons: They allow users to navigate a website. They

help establish information hierarchy for the given website.

<html>

<head>

<title>web page</title>

</head>

<body>

<h1>Dept of CA</h1>

<ol>

<li>bsc

<li>bca

</ol>

<a href="D:\gowthami\p2.html">Page 2</a>

</body>

</html>

Output:

External links

External links point from one domain to an entirely separate domain. They

may belinks from your website to another website to provide additional

information for readers, or they may be links from your website to an affiliate

program.

<html>

<head>

</head>

<body>

<a href="https://clearlydecoded.com/creating-internal-external-html-

links">HTML</a>

<br />

<br />

<a href="https://way2tutorial.com/html/html_external_links.php">CSS</a>

<br />

<br />

</body>

</html>

HTML frames

HTML frames are used to divide your browser window into multiple

sections where each section can load a separate HTML document. A collection

of frames in the browser window is known as a frameset. In HTML, the <frame>

tag has no end tag. The <frameset> element specifies HOW MANY columns or rows there will

be in the frameset, and HOW MUCH percentage/pixels of space will occupy each

of them.

Attribute Value Description cols % Specifies the number and size of columns in a

frameset rows %

Specifies the number and size of rows in a frameset.

frameborder 0 1 Specifies whether or not to display a border around a frame

longdesc URL Specifies a page that contains a long description of the content of a frame

marginheight PIXELS Specifies the top and bottom margins of a frame

marginwidth PIXELS Specifies the left and right margins of a frame

name TEXT Specifies the name of a frame

noresize noresize Specifies that a frame is not resizable

scrolling yes no

auto

Specifies whether or not to display scrollbars in a frame

src URL Specifies the URL of the document to show in a frame

Sample Program:

<html>

<head>

<title>using frames</title></head>

<frameset cols="50% , 50%">

<frame src="D:\udaya\p1.html">

<frame src="D:\udaya\p2.html">

<noframes>

<body>

</noframes>

</frameset>

</body>

</html>

Output:

https://www.w3schools.com/tags/att_frameset_cols.asp

https://www.w3schools.com/tags/att_frameset_rows.asp

Date post:	31-Jul-2020
Category:	Documents
Upload:	others
View:	19 times
Download:	0 times

UNIT 1: INTRODUCTION TO HTML · UNIT 1: INTRODUCTION TO HTML 1. What is HTML? HTML is the standard...

Documents