HTML Session2

HTML
INTRODUCTION
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for
creating Web pages.
 HTML elements are the building blocks of HTML
pages
 HTML elements are represented by tags
STRUCTURE OF HTML
<html>
<head>
<title>Document title</title>
</head>
<body>
Markup-text
</body>
</html>
OUTPUT
RULES & GUIDELINES
 Element names are “case in-sensitive”.
 Ex:<html></HTML> both are same
 Element names should not contain spaces
 Ex: <I M G> Incorrect Format
 Elements should be nested properly.
 Ex: <B><I> Correct Format </I></B>
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"]
 Ex: <img src=”pic.gif”>

HEADING TAG:
Many web pages contains different section headings

with different sizes and perhaps different colors and
fonts.HTML provides tags for such section headings.
There are total six levels of headings h1 to h6.
CODE FOR HEADINGS
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
OUTPUT FOR HEADING TAGS
ATTRIBUTES FOR HEADING TAG
align: It is used to place the heading at left, center,
right. By default, headings are left aligned.
Syntax for HTML Element:

<H1 Align=”right”> Example Heading</H1>
Start Tag End tag
HTML ELEMENT
PARAGRAPH TAG
web browsers ignore any carriage return or new line
character encountered in the HTML document.
HTML provides <p>, which is used to start fresh
paragraph.
Syntax: <p>
----------------------------
Lines of text
-----------------------------
</p>
ATTRIBUTES FOR PARAGRAPH TAG
align: It is used to place the paragraph at left, center, right.
By default, headings are left aligned.
<P Align=”center”>Example Paragraph </P>
Attribute name attribute value

CODE FOR PARAGRAPH TAG
<html>
<body>
<p>This is a paragraph.
<p>Don't forget to close your HTML tags!</p>
</body>
</html>
OUTPUT FOR PARAGRAPH TAG
BREAK TAG
Browsers ignores new line characters inserted in the
HTML source file and text is displayed continuously.
This <br> tag is used to insert line break. It is called
as “Empty tag”.
Syntax: <br>
CODE FOR BREAK TAG
<html>
<body>
<p>
To break lines<br>in a text,<br>use the br
element.
</p>
</body>
</html>
OUTPUT FOR BREAK TAG
FONT TAG
It provides visibility and appearance for a text content placed on web
browser surface. Here, visibility and appearance means the color of
the text content, character size and character face. By default the text
color is black.
Attributes:
 Face: The face attribute specifies the font of the text inside a <font>
element.
 Size: The size attribute specifies the size of the text inside a <font>
element.
 Color: The color attribute specifies the color of the text inside a <font>
element.
CODE FOR FONT TAG
<html>
<head>
<title> Font size variation </title>
</head>
<body>
<h2 align="center"> <font face=“Arial” color="red">Java </font>
</h2>
<p><font color=“blue”> it is an object oriented programming
language</font>
<p>it is an open source,<font size=6> platform independent </font>
<font size=+2>programming</font>
<font size=+6> language </font>
</body>
</html>
OUTPUT FOR FONT TAG
HORIZONTAL RULER TAG
This is used to create an horizontal graphical line on web
page. This <hr> tag is used to insert line break. It is called as
“Empty tag”.
Syntax :<hr>
CODE FOR HR TAG
<html>
<head>
<title> Horizontal Rule Tag </title>
</head>
<body>
<p>This is the first paragraph of text. This is the first paragraph of text.
This is the first paragraph of text. This is the first paragraph of text.</p>
<hr color=“red”>
<p>This is second paragraph of text. This is second paragraph of text.

This is second paragraph of text. This is second paragraph of text.</p>
</body>
</html>
OUTPUT FOR HR TAG
TEXT FORMATTING TAGS
 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

Code
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<strong>This text is strong</strong>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
<h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
Output
MARQUEE TAG
 The <marquee> is a HTML tag which was used
to create a scrolling text or an image. It was used
to make the text/image scroll horizontally across
or vertically down the web page.
 <marquee>Any Text </marquee>
CODE FOR MARQUEE TAG
 <body bgcolor="yellow">
 <h1><font color="blue">
 <marquee behavior="alternate"
direction="left">WEB TECHNOLOGY
 </font>
 </marquee>
 </h1>
 </body>
OUTPUT FOR MARQUEE TAG
IMAGE TAG
we can also place images on web browsers surface as web
pages content. The attributes are:
1. src: indicates the URL of the image file.
<img src=”url of the file”>
2. width : specifies the width of the image.
<img src=”url of the file” width=”n”>
3. height: specifies the height of the image.
<img src=”url of the file” height=”n”>
4. Alt: It was set to provide alternative text for user agents that
do not display the images. It act as tool tip or place holder for
information in image based browsers.
<img src=”url of the file” alt=”message”>
CODE FOR IMAGE TAG
<<html>
<head>
<title> Image Demo </title>
</head>
<body>
<img src="Tulips.jpg" alt="tulip flower"width="100"
height="80" border="5px" hspace=" 10px"
vspace="10px">
</body>
</html>
OUTPUT FOR IMAGE TAG
HYPERLINKS
These are also called as “Anchors”. These provide linking
between different web pages. By using this, we can navigate
form one page to another web page. By clicking on the
hyperlink, the next web page contents will be displayed. The
attributes are:
1. Alt: It was set to provide alternative text for user agents
that do not display the images. It act as tool tip or place
holder for information in image based browsers.
2. Target: The value of the target refers to the frame where
the document is to be loaded. The value of the target attribute
must be an existing frame name.
CODE FOR HYPERLINK
<html>
<head>
<title>URL creation </title>
</head>
<body>
<a href="https://www.google.com">click here</a> will
create a link to the Google.
</body>
</html>
OUTPUT FOR HYPERLINK
IMAGE AS A LINK
 We can provide image as a link.
 <a href="first.html">
 <img src="kmitlogo.jpg">
 </a>
CODE FOR IMAGE LINK
 <!DOCTYPE html>
 <html>
 <body>
 <h2>Image Links</h2>
 <p>The image is a link. You can click on it.</p>
 <a href="first.html">
 <img src="kmitlogo.jpg">
 </a>
 </body>
 </html>
OUTPUT FOR IMAGE LINK
LIST
A list is a collection of one or more elements. HTML supports
3 types of list . The lists can also be nested.
 Unordered list: collection of items or data values are placed
in the webpage in the form of list, with each item
predefined by a bullet symbol.
Syntax:
<ul type=“disc”/”square”/”circle”>
<li>Item 1</li>
<li>Item 2 </li>
</ul>
CONTD…
Ordered list: collection of items or data values are
placed in the webpage in the form of list, with each
item predefined by a sequence of numbers or
alphabets.
Syntax:
<ol type=“1”/”a”/”A”/”I”/”i”>
<li>Item 1</li>
<li>Item 2 </li>
</ol>
CODE FOR UNORDERED LIST
<body>
<ul type="disc" >
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
OUTPUT FOR UNORDERED LIST
CODE FOR ORDERED LIST
<!DOCTYPE html>
<html>
<body>
<h2>The start attribute</h2>

<p>By default, an ordered list will start counting from 1. Use the start attribute
to start counting from a specified number:</p>
<ol start="5">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a" start="5">

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
OUTPUT FOR ORDERED LIST
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:
CODE FOR DESCRIPTION LIST
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
OUTPUT FOR DESCRIPTION LIST
TABLE TAG
It is sometimes useful to display data in a two-dimensional
tabular format. Tables are also powerful tools for
formatting your web pages. A table is created with basic
tags:
table, tr, td, th, caption.
Syntax: <table>
<tr>
<td> table data</td>
</tr>
</table>
ATTRIBUTES FOR TABLE TAG
a. bgcolor: specifies the back ground color for the table.
<table bgcolor=”colorname”>
b. background: provides image as background for the table.
<table background=”filename”> .
c. border: specifies that a border has to be used. Its value indicates the
thickness of the outermost boundary in pixels. A value 0 indicates no border.
<table border=”n”>
d. bordercolor: specifies the border color.
<table bordercolor=”colorname”>
e. width: specifies the width for the table
<table width=”n”>
f. height: specifies the height of the table
<table height=”n”>
g. cellspacing: it provides space between two adjacent cells in table.
<table cellspacing=”n”>
h. cellpadding: it provides the distance between cell content and cell edges
<table cellpadding=”n”>
CODE FOR TABLE
<body>
<table border=”5” align="center"bordercolor=”blue” width=”50” height=”10”cellpadding="10px"cellspacing="10px">
<caption>Marks</caption>
<tr>
<th >Name</th>
<th>Sub1</th>
<th>sub2 </th>
</tr>
<tr>
<td>prem</td>
<td>82</td>
<td>90</td>
</tr>
<tr>
<td>pranathi</td>
<td>80</td>
<td>85</td>
</tr>
</table>
</body>
OUTPUT FOR TABLE
ROWSPAN
It provides spanning of the particular cell to number of rows (or) it

indicates how a particular cell expands to number of rows.
<th rowspan=”n”>
Layout:
C
Programming Languages
Java
CODE FOR ROWSPAN
<body>
<table border="1">
<tr>
<th>Student Name</th>
<td>X</td>
</tr>
<tr>
<th rowspan="2">Subjects</th>
<td>Physics</td>
</tr>
<tr>
<td>Maths</td>
</tr>
</table>
</body>
OUTPUT FOR ROWSPAN
COLSPAN
It provides spanning of the particular cell to number of
columns (or) it indicates how a particular cell expands to
number of columns.
<th colspan=”n”>
Layout:
Qualifications
B.Tech M.Tech PhD

CODE FOR COLSPAN
<body>
<table border="1">
<tr>
<th>Student Name</th>
<th colspan="2">Subjects</th>
</tr>
<tr>
<td>X</td>
<td>Physics</td>
<td>Maths</td>
</tr>
<tr>
<td>Y</td>
<td>Physics</td>
<td>Biology</td>
</tr>
</table>
</body>
OUTPUT FOR COLSPAN

HTML Session2

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

HTML Session2

Hochgeladen von

Copyright:

HTML

 Element names should not contain spaces

 Ex: <I M G> Incorrect Format

 Elements should be nested properly.

 Ex: <B><I> Correct Format </I></B>

 Attributes are always specified in the start tag

 Attributes come in name/value pairs like: name="value"]

 Ex: <img src=”pic.gif”>

Many web pages contains different section headings

Syntax for HTML Element:

Start Tag End tag

<P Align=”center”>Example Paragraph </P>

Attribute name attribute value

<p>Don't forget to close your HTML tags!</p>

<p>This is second paragraph of text. This is second paragraph of text.

 <b> - Bold text

 <i> - Italic text

 <em> - Emphasized text

 <mark> - Marked text

 <small> - Small text

 <del> - Deleted text

 <ins> - Inserted text

 <sub> - Subscript text

 <sup> - Superscript text

 <p>The image is a link. You can click on it.</p>

<h2>The start attribute</h2>

<ol type="a" start="5">

 A description list is a list of terms, with a

<h2>A Description List</h2>

It provides spanning of the particular cell to number of rows (or) it

B.Tech M.Tech PhD

Das könnte Ihnen auch gefallen