Scribd
Upload
13 views

1 HTML List Images Links Table (Unit 2)

The document discusses HTML technology and provides definitions and examples of key HTML elements and tags. It covers HTML introduction, tags, elements, web browsers, HTML history, page structure, links, lists, images, tables and more. It defines HTML, tags, elements, browsers, and provides the history of HTML versions. It also provides examples of how to create a basic HTML page structure and use important tags like <body>, <head>, <title>, <h1>-<h6>, <p>, <br>, and <hr>.

Uploaded by

saurabh tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

1 HTML List Images Links Table (Unit 2)

The document discusses HTML technology and provides definitions and examples of key HTML elements and tags. It covers HTML introduction, tags, elements, web browsers, HTML history, page structure, links, lists, images, tables and more. It defines HTML, tags, elements, browsers, and provides the history of HTML versions. It also provides examples of how to create a basic HTML page structure and use important tags like <body>, <head>, <title>, <h1>-<h6>, <p>, <br>, and <hr>.

Uploaded by

saurabh tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

WEB

TECHNOLOGY
Contents
 HTML Introduction
 Tags, Elements,
 Web Browsers, HTML History
 Page Structure,
 Links, List,
 Images,
 Tables
Definitions
• HTML – HyperText Markup Language – The Language of Web Pages on the WWW.
• HTML is a text formatting language.
• Browser – A software program which is used to show web pages.
• “Normal text” surrounded by bracketed tags tell browsers how to display web pages

• Pages end with “.htm” or “.html”

3
Tag
s • HTML markup tags are usually called HTML tags
• HTML tags are keywords (tag names)
 enclosed in brackets
 Usually paired
<TITLE>My Web Page</TITLE>

The first tag in a pair is the start tag, the second tag is the end tag

• Start and end tags are also called opening tags and closing tags
• Not case sensitive
• <TITLE> = <title> = <Title>

4
HTML ELEMENTS

An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Some HTML elements have no content (like the <br> element).


These elements are called empty elements. Empty elements do
not have an end tag!
WEB BROWSERS

• A software application used to access information on the World Wide Web is called a
Web Browser.
• When a user requests some information, the web browser fetches the data from a
web
server and then displays the webpage on the user’s screen.
Examples of Web Browser:
• Google Chrome
• Internet Explorer
• Mosaic
• Firefox,
• Netscape Navigator
• Its purpose is to read HTML documents and display them as web pages.

• The browser does not display the HTML tags, but uses the tags to determine how the
content of the HTML page is to be presented/displayed to the user
HTML History

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
Choosing Text Editor

- There are many different programs that you can use to create web documents.
- HTML Editors enable users to create documents quickly and
easily; instead of entering all of the HTML codes by hand.
- These programs will generate the HTML Source Code for you.

Here, we will focus on using the standard Microsoft Windows text


editors, NotePad.
In the “File Name” text box, type in the entire name of your file
(including the extension name .htm or
.html).

8
Creating a Basic Starting Document
(HTML PAGE STRUCTURE)
<!DOCTYPE html>
Example Explained
<html> <head>
<title>Page Title</title> • <!DOCTYPE html> defines that this document is an HTML document
</head> • <html> is the root element of an HTML page
<body> • <head> contains meta information about the HTML page
<h1>My First Heading</h1>
• <title> specifies a title for the HTML page (which is shown in the
<p>My first paragraph.</p>
</body> browser's title bar or in the page's tab)

</html> • <body> defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
• <h1> defines a large heading
• <p> defines a paragraph

9
HTML Colors: 16 Basic Colors

10
Background Color

To set the document’s background color, edit the <BODY> element by adding the BGCOLOR attribute:

Example: Document with a blue color:

<BODY BGCOLOR=“#0000FF”></BODY>

TEXT Color TEXT attribute is used to control the color of all the normal text.
The default color for text is black.

Ex: document’s page color is blue and the text would be Yellow.

<BODY BGCOLOR=“#0000FF” TEXT=“#FFFF00”></BODY>


11
Put Image in Background

The BODY element also gives the ability of setting an image as the document’s background.

Example:

<html>
<BODY BACKGROUND="diya.png" BGCOLOR="#FFFFFF"></BODY>
</html>
Headings, <Hx> </Hx>

Inside the BODY element, heading elements are defined with <H1> through <H6> generally
used for major divisions of the document.
<h1> defines the most important heading. <h6> defines the least important heading:

<HTML>
<HEAD>
Example <TITLE> Example Page</TITLE>
</HEAD> O/P:
<BODY>
Heading 1
<H1> Heading 1 </H1> Heading 2
<H2> Heading 2 </H2>
<H3> Heading 3 </H3> Heading 3
<H4> Heading 4 </H4>
Heading 4
<H5> Heading 5 </H5>
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6

13
Paragraphs, <P> </P>

• Paragraphs allow to add text to a document in such a way that it will automatically
adjust the end of line to suite the window size of the browser in which it is being
displayed.
• Each line of text will stretch the entire length of the window.

<HTML><HEAD>
<TITLE> Example Page</TITLE> Heading 1
</HEAD>
Example: Paragraph 1,….
<BODY><H1> Heading 1 </H1>
Heading 2
<P> Paragraph 1, ….</P>
Paragraph 2,….
<H2> Heading 2 </H2>
<P> Paragraph 2, ….</P> Heading 3
<H3> Heading 3 </H3> Paragraph 3,….

<P> Paragraph 3, ….</P> Heading 4


<H4> Heading 4 </H4> Paragraph 4,….

<P> Paragraph 4, ….</P>


14
Break, <BR>
• Line breaks allow you to decide where the text will break on a line or continue to the
end of the window.
• A <BR> is an empty Element, meaning that it may contain attributes but it does not
contain content.
• The <BR> element does not have a closing tag.

<HTML>
Example: <HEAD>
<TITLE> Example Page</TITLE>
Heading 1
</HEAD> Paragraph 1,….
<BODY><H1> Heading 1 </H1> Line 2
<P>Paragraph 1, <BR> Line 3
Line 2 <BR> Line 3 <BR>…. ….
</P>

15
Horizontal Rule, <HR>

The <HR> element causes the browser to display a horizontal line (rule) in a document.
<HR> does not use a closing tag, </HR>.
EX: Attribute Description
<P>Paragraph 1, <BR>
Height of the rule in pixels(Default value 2 pixels)
Line 2 <BR> <HR> SIZE

O/P: Width of the rule in pixels or percentage of screen width(Default


WIDTH value 100%)
Paragraph 1,….
Line 2
NOSHADE Draw the rule with a flat look instead of a 3D look

ALIGN Aligns the line (Left, Center, Right)

COLOR Sets a color for the rule (IE 3.0 or later)


16
<pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
<pre>
Example: My book is on the table.

My book is on the table.

My book is on the table.

Bring it to me.
</pre>
Styles

This attribute is used to add styles to an element, such as color, font, size, and more.

syntax: <tagname style="property:value;">


The property is a CSS property. The value is a CSS value.

1) Text Color: The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

2) Fonts: font-family property defines the font to be used in document:

Example
<h1 style="font-family: verdana;">Welcome to all</h1>
<p style="font-family: courier;">This is WT.</p>
3) Text Size

font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

4) Text Alignment: The CSS text-align property defines the horizontal text
alignment for an HTML element:

Example
<h1 style="text-align:center;">MERE KRISHNA</h1>
<p style="text-align:center;">MERE KRISHNA</p>
<b> - Bold text <b>This text is bold</b>
Text Formatting Example
<strong> - text with strong importance : is important!</strong>
<strong>This text
It is to enhance our
page with Bold, Italics,
<i> - Italic text <i>This text is italic</i>
and other character
formatting options.
<em> - Emphasized text, displayed in italic <em>This text is emphasized</em>

<small> - defines smaller text <small>This is some smaller text.</small>


HTML Formatting
Elements: They were <mark> - text marked or highlighted <p>Attend <mark>SDP</mark> today.</p>
designed to display
<del> - Deleted text with a strike line <p>Price of pen is now
special types of text: <del>80</del> 65.</p>
<ins> - Inserted text, usually underlined <p>Price of pen is <del>80</del> 65.</p>

<sub> - Subscript text <p>H<sub>2</sub>O</p>

<sup> - Superscript text <p>AB <sup>2</sup> C</p>

20
Alignment

Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and
Horizontal Rules.

The Three alignment values are : LEFT, RIGHT, CENTER.


<CENTER></CENTER> Will center elements.

HTML Comments
HTML comments are not displayed in the browser. They help to document our
HTML
source code.
syntax: <!-- Write your comments here -->

21
HTML Links - Hyperlinks
• A link is specified using HTML tag <a> and </a>.
• The <A> tells where the link should start and the </A> indicates where the link ends.
• Everything between these two will work as a link.
• It allows to click on a link and jump to another document.
• Mouse arrow will turn into a little hand when a mouse is moved over a link.
• A link does not have to be text. A link can be an image or any other HTML element!

Links – Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
• href attribute: indicates the link's
destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will jump to the specified URL address.
Example: To create a link to WWW. KIET.EDU :
<a href="https://www.kiet.edu/">Visit KIET</a>
22
HTML Links - The target Attribute
• By default, the linked page will be displayed in the current browser window.
• To change this, we 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 (Defaul)t : 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

Example: Use target="_blank“ to open the document in a new browser window or tab:

<a href=“https://www.kiet.edu/” target="_blank"> Visit KIET</a>


Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:

Example:
<HTML>
<body>
<a href="d:\main.txt">
<img src="d:\diya.png" alt="HOMEWORK" style="width:42px;height:42px;">
</a>
</BODY>
</HTML>
Internal Links - Create
Bookmarks
• HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
• It is created inside large documents to simplify navigation. Its goal is to get the information quickly.
• Bookmarks can be useful if a web page is very long.
• To create a bookmark - first create the bookmark, then add a link to it.
• When the link is clicked, the page will scroll down or up to the location with the bookmark.
 Use the id attribute (id="value") to define bookmarks in a page
 Use the href attribute (href="  value") to link to the bookmark

First, use the id attribute to create a bookmark: <h2 id=“HL1">HTML-LINK</h2>


Then, with href, add a link to the bookmark ("Jump to HTML LINK"), from within the same

page:
<h2 id=“HL1">HTML-LINK </h2>
<a href=" HL1">Jump to HTML LINK</a>

We can also use attribute name as the attribute


id:

<A NAME="aa">TOP</A>
HTML Links Colors <style>
a:link
An HTML link is displayed in a different color depending {
on whether it has been visited, is unvisited, or is active. color:
green
By default, a link will appear as follows in all browsers: ;
background-color: transparent;
text-decoration: none;
• An unvisited link is underlined and blue
}
• A visited link is underlined and purple a:visited {
• An active link is underlined and red color: pink;
background-color: transparent;
We can change the link state colors, by using CSS: text-decoration: none;
}
a:hover
{ color:
red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
LISTS
• HTML lists allow us to group a set of related items in lists.
• HTML supplies several list elements. Most list elements are composed of one or more
<LI> (List Item) elements.

Types of List:
1. Unordered list.
2. Ordered list.
3. Definition list.
4. Nested Lists.

27
(1) UL Elements
• 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:

Ex: <UL> O/P: • Pen


<LI> Pen</LI> • Pencil
<LI> Pencil</LI>
</UL>

• We have the choice of 4 bullet types: disc(default), circle, square and none.
• These are controlled in Netscape Navigator by the “TYPE” attribute for the <UL> element.

Ex: <UL TYPE=“square”>


<LI> List item …</LI> O/P:
<LI> List item …</LI>  List item …
<LI> List item …</LI>  List item …
</UL>  List item … 28
(2) OL (Ordered List)
Items in this list are numbered automatically by the browser.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. O/P:
Ex. The list items will be marked with numbers by default: <OL> 1. Pen
<LI> Pen</LI>
2. Pencil
<LI> Pencil</LI>
<LI> Eraser</LI> 3. Eraser
</OL>

Setting the TYPE Attribute to one of five numbering styles: Ex: O/P:
TYPE Numbering Styles
<OL TYPE =“i”>
i. List item …
1 Arabic numbers 1,2,3, …… <LI> List item …</LI> ii. List item …
<LI> List item …</LI>
a Lower alpha a, b, c, …… Text ….
</OL>
<P> text ….</P> iii. List item …
A Upper alpha A, B, C, ……
<OL TYPE=“i” START=“3”>
i Lower roman i, ii, iii, ……
<LI> List item …</LI>
I Upper roman I, II, III, …… </OL>
29
3) DL: Definition List

• 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:

<DL>

Ex.: <DT> HTML </DT>


<DD> Hyper Text Markup Language </DD>
<DT> TEA </DT>
<DD> A hot beverage!</DD>
</DL>

HTML
O/P: Hyper Text Markup Language
TEA
A hot beverage! 30
4) Nesting Lists
We can nest lists by inserting a UL, OL, etc., inside a list item (LI).

O/P:
EX: <UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI>
</UL> 31
Images

Images enhance visual appearance of the web pages by making them more interesting
and colorful.
<IMG> used to insert images in the HTML documents. It is an empty element and
contains attributes only.

syntax of the <img> tag: <img src="url" alt="some_text">

<!DOCTYPE html>
<html>
<body>
Example: <img src=“krishna.jpg" alt=“Kanha">
</body>
</html>
• src stands for source: It tells the browser where to find the image
• Alt stands for "alternate text“: It tells the browser that if it can't
find the image, then just display this text. 32
Other attributes of Image

Width (WIDTH): is the width of the image in pixels.


Height (HEIGHT): is the height of the image in pixels.
Border (BORDER): is for a border around the image, specified in pixels.
HSPACE: is for Horizontal Space on both sides of the image specified in pixels. A setting of
5 will put 5 pixels of invisible space on both sides of the image.
VSPACE: is for Vertical Space on top and bottom of the image specified in pixels. A setting
of 5 will put 5 pixels of invisible space above and below the image.

Ex.:
1) <IMG SRC=“flower.gif“ border=4>
2) <IMG SRC=" flower.gif" width="60" height="60">
3) <IMG SRC=“flower.gif" ALT="This is a text that goes with the image">
4) <IMG SRC=" flower.gif “ Hspace="30" Vspace="10" border=20>
5) < IMG SRC =" flower.gif“ align="left"> 33
TABLE
S tables allow us to arrange data into rows and columns.
HTML
The <table> tag defines an HTML table.

The <TABLE></TABLE> element has four sub-elements:

Table Row: <TR></TR>.


Table Header: <TH></TH>.
Table Data: <TD></TD>.
Caption : <CAPTION></CAPTION>.
• By default, the text in <th> elements are bold and centered.
• By default, the text in <td> elements are regular and left-aligned.

The table row elements usually contain table header elements or table data elements.

34
Example: Tables

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2 Ex.


<table border=“1”>
<caption>List of Students</caption>
<tr>
<th> Roll No</th>
<th> Name </th>
</tr>
<tr>
O/P:
<td> 101</td>
<td> Abhineet </td>
</tr>
<tr>
<td> 102 </td>
<td> Aviral </td>
</tr> </table> 35
Tables Attributes
BGColor: Set background colors in a table.
Width: Specify table width(as well as cell) in pixels or a percentage of document width
Border: Specify the border width (in pixels).
CellSpacing: Represents the space between cells and is specified in pixels.
CellPadding: Represents space between cell border and cell contents(in pixels).
Align: Specify that the table can can have left, right, or center alignment.

Table Caption
It allows us to specify a line of text that will appear centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> My Table </CAPTION>

The Caption element has one attribute ALIGN that can be either TOP (Above the table) or BOTTOM
(below the table).
36
Table Header(TH)
Table Data cells are represented by the TD element.
Cells can also be TH (Table Header) elements where its content appear centered and bold.

Table Data and Table Header Attributes

Colspan: Specifies how many cell columns of the table this cell should span.

Rowspan: Specifies how many cell rows of the table this cell should span.

Align: cell data can have left, right, or center alignment.

Valign: cell data can have top, middle, or bottom alignment.

Width: can be specified in pixels or a percentage of the document width.

Height: can be specified in pixels or a percentage of the document height.


37
Table Data and Table Header Attributes

<html> <body>
<Table border=1 cellpadding =2>
<tr> <th> Roll No</th> <th>Name</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table></html>

38
Thank You

You might also like