Scribd
Upload
9 views65 pages

Unit-I - HTML

html

Uploaded by

hithesh.karthikeya.lanka
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
9 views65 pages

Unit-I - HTML

html

Uploaded by

hithesh.karthikeya.lanka
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/ 65

Introducing HTML

HTML stands for Hypertext Markup Language, and it is the most widely used language to write
Web Pages. As its name suggests, HTML is a markup language.

Hypertext refers to the way in which Web pages (HTML documents) are linked together.
When you click a link in a Web page, you are using hypertext.

Markup Language describes how HTML works. With a markup language, you simply "mark up" a
text document with tags that tell a Web browser how to structure it to display.

1
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>

HTML tags normally come in pairs like <p> and </p>


The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name.

A one-sided tag contains no content; general syntax for a one-sided tag: <element/>
Elements that employ one-sided tags are called empty elements since
they contain no content. An example is line break <br/>

A third type of tag is the comment tag, which you can use to add notes to your HTML code
<!–- comment -->

2
HTML Page Structure
A HTML document starts and ends with <html> and </html> tags. These tags tell the browser that the
entire document is composed in HTML.

Inside these two tags, the document is split into two sections:

 The <head>...</head> elements, which contain information about the document such as title of the
document, author of the document etc. Information inside this tag does not display outside.

 The <body>...</body> elements, which contain the real content of the document that you see on
your screen.

3
HTML Page Structure

4
The Structure of a HTML
File
 An HTML document is divided into two parts: the head and the body
 The head element contains information about the document, e.g. document title or keywords
 The content of the head element is not displayed within the Web page
 The body element contains all of the content to be displayed in the Web page
 The body element can contain code that tells the browser how to render the content

5
HTML Structure
• The <head> section has tags used by browser and search engines etc. The only tag that is
displayed (in the tile bar not the web page) is the <title>:
– should be short, descriptive, only text
– used by search engines to index your pages
– appears in visitor's browser history lists and bookmarks

• Example:
-- <title>Web technologies</title>
– In Expression Web, you can select file properties to change thepage title

6
HTML Example
<!DOCTYPE HTML >
<html>
<head>
<title> My first HTML document </title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

• In the example, we see a very simple document that has been marked up as HTML. This is the standard framework followed by all
HTML documents.
• The first two lines are what is called as a Document Type Definition (DTD) (version information).
• A HTML file begins with the <html> tag and ends with </html>. All HTML code is inserted between these tags..
• The opening <html> tag marks the start of an HTML document, and the closing </html> tag tells a browser when it has reached the end
of that HTML document
7

7
Displaying a HTML
File
• As you work on a Web page, you should occasionally view it with your Web browser to verify that
the file contains no syntax errors or other problems
• Install and view your page using different browsers on your computer to check for
compatibility

8
Creating a HTML Document

9
Initial HTML code in chemistry.html

1
0

10
Initial Web Page

11
Creating an HTML
Document
• In planning, identify a document’s different elements. An element is a distinct object in the
document, like a paragraph, a heading, or a page’s title
• Formatting features such as boldfaced font, and italicized text may be used

12
Two identical (?) Web
pages

<HTML> <html>
<HEAD> <head>
</HEAD> </head>
<BODY> <body>
<p>One paragraph <p>One paragraph over
over several lines. several lines. </p>
</p> </body>
</BODY> </html>
</HTML>

appears
One paragraph over several
as
lines.

HTML is case-insensitive
13
Basic HTML Tags

14
Formatting Tags

15
Forms and Input

16
Links & Frames

17
Images

18
Audio/video

19
Lists

20
Headings - Screenshot

21
Creating Lists
• HTML supports three kinds of lists: ordered, unordered, and
definition
• You use an ordered list for items that must appear in a
particular sequential order
• You use an unordered list for items that do not need to occur
in any special order
• One list can contain another list; this is called a nested list

22
Basic HTML: lists
• Unordered List
– The <ul> … </ul> element represents an
unordered list.
Items in the list are marked with the <li> element.
For example,
My shopping list:
My shopping list:
<ul>  Apples
<li>Apples</li>  Bananas
<li>Bananas</li>
</ul>

23
Basic HTML: lists
(cont.)
• Ordered lists
– The <ol> … </ol> element represents an ordered list.
Items in the list are marked with the <li> element. For
example,
My shopping list:
My shopping list:
<ol> 1. Apples
<li>Apples</li> 2. Bananas
<li>Bananas</li>
</ol>

24
Applying a Style to a List

25
Creating Lists
• HTML supports three kinds of lists: ordered, unordered, and definition
• You use an ordered list for items that must appear in a particular
sequential order
• You use an unordered list for items that do not need to occur in any
special order
• One list can contain another list; this is called a nested list

26
Applying a Style to a list

27
Tables

28
Element Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes usually come in name/value pairs like: name="value"
• Many tags contain attributes that control the behavior, and in some cases the
appearance, of elements in the page
• Attributes are inserted within the tag brackets

<element attribute1="value1" attribute2="value2" …/>


for one-side tags

<element attribute1="value1“ attribute2="value2"


…>content</element>
for two-sided tags

29
Some useful html tags & their attributes

30
Some useful html tags & their attributes

31
Some useful html tags & their attributes

32
Some useful html tags & their attributes

33
Some useful html tags & their attributes

34
Some useful html tags & their attributes

35
Working with Block-Level Elements

• In a Web page, most content is marked as either a block-level element or an inline element
• A block-level element contains content displayed in a separate section within the page, setting it off
from other blocks

• An inline element is part of the same block as its surrounding content—for example individual words
or phrases within a paragraph

36
Using Other Block-Level Elements

• HTML supports the address element to indicate contact information. Most browsers display an
address element in an italicized font
• You can indicate long quoted passages by applying the blockquote element. The text is typically
indented
Here is a long quotation:
<blockquote>
Click to add text
This is a long quotation
</blockquote>
Notice the indentation.

Here is a long quotation:


This is a long quotation
Notice the indentation.
37
Working with Inline Elements

Character formatting elements:


Welcome to our WT Classes
<p> Welcome to our <b>WT Classes</b></p>
Same presentation as:
<p> Welcome to our <strong>WT Classes</strong></p>

• <i>… </i> for italics, same presentation as <emph> … </emph>


• <strong> and <emph> are logical elements.
• <b> and <i> are physical elements.

38
Logical and Physical Elements

• A logical element describes the nature of the enclosed content, but not necessarily how that content should
appear. (ex <h1>, <address>, <em>, <strong>,…)
• A physical element describes how content should appear, but doesn’t indicate the content’s nature. (ex <b>, <i>,
…)
• Different browsers determine how to display a logical element.
• You should use a logical element that accurately describes the enclosed content whenever possible, and use physical
elements only for general content.

39
Working with Empty Elements

• Empty elements cannot have any child nodes ( no nested elements or text nodes)
• You can insert a horizontal line by using the one-sided tag : – <hr />
• To display a graphic, you insert an inline image into the page. An inline image displays a graphic image
located in a separate file within the contents of a block- level element.
• Inserting an image on a page is easy with the <img> tag. The important attribute here is that you
specify the name of the file holding the image.
• We can also resize the image by specifying the height and width attributes, but this is NOT a good idea!
The quality of the image will be degraded.
• A pixel is a dot on your computer screen that measures about 1/72” square
<img src=“image.gif” height=“150” width=“200” alt=“File Structure”>
• Other empty elements you may wish to use in your Web page include line breaks <br/> and
meta elements <meta>
• Meta elements are placed in the document’s head and contain information about the document that
may be of use to programs that run on Web servers

40
Working with Special Characters

• Occasionally you will want to include special characters in your Web page that do not appear
on your keyboard

₤
®use of character symbols that are identified by a code number or name
• HTML supports the

&code;
• Example: <span>&#36;</span> for dollar
<span>&#8377;</span> for Rupee

41
WORKING WITH SPECIAL CHARACTERS

42
• Defining Tables
• Creating Hyperlinks
• Formatting Text
• Meta-data

4
3

43
Creating a Newspaper-Style Layout

4
4

44
Table for Page
Layout
• HTML tables are most often
used to define the layout of
an entire Web page
• If you want to design a page
that displays text in
newspaper style columns, or
separates the page into
distinct sections, you’ll find
tables an essential and
useful tool

4
5

45
A Simple Table

<body>
<table border>
<caption>The Caption</caption>
<tr><th>Heading1</th><th>Heading2</th></tr>
<tr><td>Line1</td><td>Line1</td></tr>
<tr><td>Line2</td><td>Line2</td></tr>
</table>
</body>

The Caption
Heading1 Heading2
Line1 Line1
4
6 Line2 Line2
46
Table Elements
• The basic elements in tables are:
– table border – A table with borders
– tr – Table Row
– th – Table Heading (appeared in bold face and centered)
– td – Table Data
• Additional Attributes to add complexity:
– th and td have the attribute colspan and rowspan

4
7

47
A Complex Table
<body>
<table border>
<caption>The Caption</caption>
<tr><th>Heading1</th><th>Heading2</th></tr>
<tr><td
rowspan="2">Weekends</td><td>Saturday</td></tr>
<tr><td>Sunday</td></tr>
</table>
</body>

The Caption
Heading1 Heading2
Saturday
Weekends
4 Sunday
8

48
Another Complex Table
<body>
<table border>
<caption>The Caption</caption>
<tr><th colspan="2">Heading</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</body>
The Caption
Heading
1 2
3 4
4
9

49
Example of Spanning
Cells

50
More Table Attributes

• The th and td element also supports the following attributes


– width – as a number of pixels, or a % of table width, or relative
real number to other columns (may auto-adjust according to
window width if unspecified)
– height – as a number of pixels (may auto-adjust according to
the amount of text if unspecified)
– align – left, center, or right
– valign – top, middle, or bottom
• The thickness of the border of a table can be set using the
border attribute, e.g.
– <table border=“2”>

51
The align and valign attribute

52
52
More Table Attributes
(cont.)
• The colour scheme can be adjusted as attributes table or td. For
example,
– <td bgcolor=“yellow”>
• cellpadding and cellspacing are often used in table element
– cellpadding adjusts the space around content within cells
– cellspacing adjusts the space between cells
• Blank table cells need something in them so they don’t
collapse on themselves.
– <td>&nbsp;</td>

53
Creating Links Within a Document

54
54
Hyperlinks and
Anchors
• A hyperlink is a reference (an address) to a resource on the web:
– an HTML page
– an image
– a sound file
– a movie, etc.
• An anchor is a term used to define a hyperlink destination inside a document.
• The HTML anchor element <a>, is used to define both hyperlinks and anchors.

55
Creating
Hyperlinks

56
Creating Anchors

57
Creating
Anchors

• An anchor element marks a specific location within a document.


• An anchor can include most inline elements and empty elements;
however, anchors cannot include block-level elements.
• A link’s content is not limited to text, an image can be used as a link content
as well.

58
Anchor Using id or name?
• Use id or name? Should consider:
– The id attribute can act as more than just an anchor name (e.g., style sheet selector,
processing identifier, etc.).
– Some older browsers don't support anchors created with the id attribute.
– The name attribute allows richer anchor names (e.g. with special characters).

59
Quoting
• Quotations can be incorporated in HTML using the blockquote
tag (the quoted tag will be indented). For example,
<p>Quotation of the day by Robert X. Cringely at InfoWorld
Magazine:</p>
<blockquote>
If the automobile had followed the same development cycle as the
computer, a Rolls-Royce would today cost
$100, get a million miles per gallon, and explode once a year, killing
everyone inside.
</blockquote>
Produces

60
Centering
<center>This goes in the center.</center>
<div align=“center”>This goes in the center.</div>
<div style=“text-align:center”>This goes in the
center.</div>

• All produce:
This goes in the center.
• However, first two usages are deprecated in favour
of Cascading Style Sheets (CSS).
• We will discuss controlling presentation using CSS
later.

61
head
• A HTML document is made of two main parts: a <head> and a <body>. As
we have seen so far, displayable document content goes in <body>.
• The <head> element is used as a container for information about the
document, additional to the document content.
• We’ve already used the <title> elements. Other possible elements are
<meta>,<link>,<script> and <style>.
• <script> and <style> will be introduced when we discuss
JavaScript and Cascading Style Sheets in later lectures.

62
META-data
• The <meta> element is used to store metadata about a document, such as a short
description of its content, keywords that maybe used for search engine indexing,
or to include details about the page author. For example,
<head>
<title>Web Technologies</title>
<meta name="author" content="Wei Liu"/>
<meta name="description" content="This is a webpage of Web
Technologies"/>
<meta name="keywords" content="Internet, Web, HTML, CSS,
JavaScript, XML"/>

63
META-refresh
• The <meta> element can also be used to redirect vistors to another document:
<meta http-equiv=refresh
content="5; url="http://www.vce.ac.in">
Five seconds after loading this document containing this
<meta> data, most modern browsers will start automatically loading the
web pages at http://www.vce.ac.in/.

64
Frames and iframes

• <object> element - used for generic chunk of data to include images, sound track,
video clip, applet or another HTML document.
• <applet> element to include a Java Applet.

• <frameset>, <frame> and <iframe> elements for displaying multiple HTML


documents in one browser window.
– hard to bookmark, difficult to maintain & navigate with non- graphical browsers, search
engine problems.

– think really hard before using frames.

65

You might also like