Scribd
Upload
3 views75 pages

HTML Modified Final

The document provides an introduction to HTML, explaining its purpose as a markup language for web page design and detailing the basic structure of HTML documents. It covers essential elements such as tags, attributes, lists, links, images, and tables, along with examples of how to implement them. Additionally, it discusses the anatomy of a website, including URLs, web servers, and browsers.

Uploaded by

mitali26dd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
3 views75 pages

HTML Modified Final

The document provides an introduction to HTML, explaining its purpose as a markup language for web page design and detailing the basic structure of HTML documents. It covers essential elements such as tags, attributes, lists, links, images, and tables, along with examples of how to implement them. Additionally, it discusses the anatomy of a website, including URLs, web servers, and browsers.

Uploaded by

mitali26dd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 75

Introduction to HTML

Web Technology

What is HTML?
• HTML stands for Hyper Text Markup Language
• Basic tool for designing a web page.
• Documentation language to mark the headings, title,
table and forms.
• An HTML file is a text file containing small markup
tags
• The markup tags tell the Web browser how to display
the page
• An HTML file must have an htm or html file
extension
• An HTML file can be created using a simple text
editor (notepad)

2
Web Technology

The Anatomy of a Web Site:


• URLs – Uniform Resource Locator : A web address.
Ex. www.nirmauni.ac.in
• Web Servers: A computer, running special software,
which always connected to the Internet. A system on
the internet containing one or more web site.
• Pages: ex. www.nirmauni.ac.in/index.html
• Web Browsers: Is a piece of software that runs on
your PC and enables you to view web pages.
Ex. Microsoft Internet Explorer, Mozilla based
browsers, Netscape Navigator, etc….

3
Web Technology

The Anatomy of a Web Site:


• Web site: a collection of one or more web pages
• Web pages: single disk file with a single file name
• Home pages: first page in website
Think about the followings before working your Web
pages.
• Think about the sort of information(content) you want to
put on the Web.
• Set the goals for the Web site.
• Organize your content into main topics.
• Come up with a general structure for pages and topics.

4
HTML Tags and Basic Page Structure
Web Technology

HTML Tags
• HTML tags are used to mark-up HTML elements
• 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>
• exceptions: <P>, <br>, <li> tags …
• 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>
6
How to Create and View an HTML
document?
1.Use an text editor such as Notepad to write the
document.
2.Save the file as filename.html on a PC. This is called
the Document Source.
3.Open Internet Explorer (or any browser) Off-Line.
4.Click on File, Open File and select the filename.html
document that you just created.
5.Your HTML page should now appear just like any
other Web page in explorer.
How to Create and View an HTML
document?
7.You may now switch back and forth between the
Source and the HTML Document
• switch to Notepad with the Document Source
• make changes
• save the document again
• switch back to explorer.
• click on REFRESH and view the new HTML
Document
• switch to Notepad with the Document Source......
Web Technology

HTML Elements
• Example:1
• This is an HTML element:
<b>This text is bold</b>
• Example:2
• This HTML element starts with the start tag <body>,
and ends with the end tag </body>.
• The purpose of the <body> tag is to define the HTML
element that contains the body of the HTML
document.

9
Web Technology

Headings
• Defined with the <h1> to <h6> tags
• <h1> defines the largest heading
• <h6> defines the smallest heading
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

10
Web Technology

Paragraphs
• Defined with the <p> tag
<p>This is a paragraph</p>
<p>This is another paragraph</p>
• Note: Paragraphs can be written without end tags
</p>
<p>This is a paragraph
<p>This is another paragraph

11
Web Technology

Line Breaks
• <br> tag is used when you want to break a line, but
don't want to start a new paragraph
<p>This <br> is a para<br>graph with line breaks</p>
• The <br> tag is an empty tag. It has no end tag
• <br> tag written like this: <br /> Because the <br>
tag has no end tag

12
Web Technology

Horizontal Rule
• The <hr> tag is used to insert a horizontal rule (line)
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>

13
Web Technology

Single Space
• The &nbsp; is used when you want to insert a space
between words.
<p>The&nbsp;hr tag defines a horizontal rule:</p>
• Example:3

14
HTML Attributes
Web Technology

HTML Tag Attribute


• Provides additional information to an HTML element
• Attributes always come in name/value pairs like this:
name="value".
• Attributes are always specified in the start tag of an
HTML element
• Example:4
• Example:5

16
HTML Fonts
Web Technology

The HTML <font> Tag


• You can specify both the size and the type of fonts
Example:14
• Font Attributes
Attribute Example Purpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color

18
Web Technology

Font Style and Font Size


• Example:15
• Example:16

Font Colors
• Example:17
• Example:18

19
HTML Character Entities
Web Technology

Character Entities
• Characters like the < character, have a special
meaning in HTML, and therefore cannot be used in
the text.
• To display a less than sign (<) in HTML, we have to
use a character entity.
• A character entity has three parts: an amp
WEersand (&), an entity name or a # and an entity
number, and finally a semicolon (;)
• To display a less than sign in an HTML document we
must write: &lt; or &#60;
• Note that the entities are case sensitive.

21
Web Technology

The Most Common Character Entities


Entity
Result Description Entity Name
Number
non-breaking
&nbsp; &#160;
space
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
&apos; (does not work in
' apostrophe &#39;
IE)

Example:19
22
Web Technology
Some Other Commonly Used Character
Entities
Result Description Entity Name Entity Number
¢ Cent &cent; &#162;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
€ Euro &euro; &#8364;
§ Section &sect; &#167;
© copyright &copy; &#169;
registered
® &reg; &#174;
trademark
× multiplication &times; &#215;
÷ division &divide; &#247;
23
HTML Lists
Web Technology

Types of List
• Unordered List
• Ordered Lists
• Definition lists

25
Web Technology

Unordered Lists
• An unordered list is a list of items.
• The list items are marked with bullets (typically small
black circles).
• An unordered list starts with the <ul> tag.
• Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

26
Web Technology

Unordered Lists
• Here is how it looks in a browser:
• Coffee
• Milk
• Example:27

27
Web Technology

Ordered Lists
• An ordered list is also a list of items. The list items are marked
with numbers.
• An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
• Here is how it looks in a browser:
1. Coffee
2. Milk

28
Web Technology

Ordered Lists
• Inside a list item you can put paragraphs, line breaks,
images, links, other lists, etc.
• Example:28

29
Web Technology

Definition Lists
• A definition list is not a list of items. This is a list of
terms and explanation of the terms.
• A definition list starts with the <dl> tag.
• Each definition-list term starts with the <dt> tag.
• Each definition-list definition starts with the <dd>
tag.

30
Web Technology

Definition Lists
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink

31
Web Technology

Definition Lists
• Inside a definition-list definition (the <dd> tag) you
can put paragraphs, line breaks, images, links, other
lists, etc.
• Example:29
• Example:30
• Example:31
• Example:32

32
HTML Background
Web Technology

Background and Text Color


• A good background can make a Web site look really
great.
• Example:43
• Example:44

34
Web Technology

Backgrounds
• The <body> tag has two attributes where you can
specify backgrounds.
• The background can be a color or an image.

35
Web Technology

Bgcolor
• The bgcolor attribute specifies a background-color for
an HTML page.
• The value of this attribute can be a hexadecimal
number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
• The lines above all set the background-color to
black.

36
Web Technology

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.
• If the image is smaller than the browser window, the
image will repeat itself until it fills the entire browser
window.

37
Background (cont…)
<body background="clouds.gif">
<body
background="http://www.w3schools.com/clouds.
gif">
• The URL can be relative (as in the first line above) or
absolute (as in the second line above).
• Example:45
• Example:46
• Example:47

38
HTML Links
Web Technology

Hyperlinks
• HTML uses a hyperlink to link to another document
on the Web.
• It is used to create links in an HTML document.
• Example:20
• Images as a link
• Example:21

40
Web Technology

The Anchor Tag and the Href Attribute


• HTML uses the <a> (anchor) tag to create a link to
another document.
• An anchor can point to any resource on the Web: an
HTML page, an image, a sound file, a movie, etc.
• The syntax of creating an anchor:
<a href="url">Text to be displayed</a>

41
Web Technology
The Anchor Tag and the Href Attribute
(cont…)

• The <a> tag is used to create an anchor to link from,


the href attribute is used to address the document to
link to, and the words between the open and close of
the anchor tag will be displayed as a hyperlink.
• This anchor defines a link to Nirma University:
<a href="http://www.nirmauni.ac.in">Visit
Nirma University!</a>

42
Web Technology

The Target Attribute


• With the target attribute, you can define where the
linked document will be opened.
• The line below will open the document in a new
browser window:
<a
href="http://www.nirmauni.ac.in"target="_blank">Vi
sit Nirma University!</a>

43
Web Technology

Open a link in a new browser window


• Example:22
• Link to a location on the same page
• Example:23
• Break out of a frame
• Example:24
• Create a mailto link
• Example:25
• Example:26

44
HTML Images
Web Technology

The Image Tag and the Src Attribute


• The syntax of defining an image:
<img src="url">
• The URL points to the location where the image is
stored. An image named "boat.gif" located in the
directory "images" on "www.w3schools.com" has the
URL: http://www.w3schools.com/images/boat.gif.
• The browser puts the image where the image tag
occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first
paragraph, then the image, and then the second
paragraph.

46
Web Technology

• Example:33
• Insert Images from different locations
• Example:34

47
Web Technology

Background Image
• Example:35
• Aligning images
• Example:36
• Let the image float
• Example:37
• Adjust images to different sizes
• Example:38
• Display an alternate text for an image
• Example:39

48
Web Technology

• Make a hyperlink of an image


• Example:40
• Create an image map
• Example:41
• Turn an image into an image map
• Example:42

49
HTML Tables
HTML Tables
• With HTML you can create tables.
• Tables are defined with the <table> tag.
• A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag).
• The letters td stands for "table data," which is the
content of a data cell.
• A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
• Example:48

51
Web Technology

Tables and Border Attributes


• If you do not specify a border attribute the table will
be displayed without any borders.
• Sometimes this can be useful, but most of the time,
you want the borders to show.
• To display a table with borders, you will have to use
the border attribute.
• Example:49

• bordercolor attribute

52
Web Technology

Headings in a Table
• Headings in a table are defined with the <th> tag
• Example:50

53
Web Technology

More Examples…
• Table with no borders
• Example:55
• Headings in Table
• Example:56
• Empty Cells
• Example:57
• Table with a caption
• Example:58

54
Web Technology

More Examples…
• Table cells that span more than one row/column
• Example:59
• Tags inside a table
• Example:60
• Cell padding
• Example:61
• Cell spacing
• Example:62

55
HTML Frames
Web Technology

Frames
• With frames, you can display more than one Web
page in the same browser window.
• With frames, you can display more than one HTML
document in the same browser window.
• Each HTML document is called a frame, and each
frame is independent of the others.
• The disadvantages of using frames are:
• The web developer must keep track of more HTML
documents
• It is difficult to print the entire page

57
Web Technology

The Frameset Tag


• The <frameset> tag defines how to divide the window
into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the amount
of screen area each row/column will occupy

58
Web Technology

The Frame Tag


• The <frame> tag defines what HTML document to
put into each frame
• In the example below we have a frameset with two
columns.
• The first column is set to 25% of the width of the
browser window.
• The second column is set to 75% of the width of the
browser window.

59
Web Technology

The Frame Tag


<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Note: The frameset column size value can also be set in
pixels (cols="200,500"), and one of the columns can
be set to use the remaining space (cols="25%,*").

60
Web Technology

Frameset
• Vertical Frameset
• Example:68
• Horizontal Frameset
• Example:69

61
Web Technology

Mixed frameset
• Example:71

62
HTML Forms
Web Technology

Form
• Form is an area that can contain form elements.
• Form elements are elements that allow the user to
enter information (like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.) in
a form.
• A form is defined with the <form> tag.
<form>
<input>
<input>
</form>

64
Web Technology

Input
• The most used form tag is the <input> tag.
• The type of input is specified with the type attribute.
• The most commonly used input types are explained
below.

65
Web Technology

Text Fields
• Text fields are used when you want the user to type
letters, numbers, etc. in a form.

<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

66
Web Technology

Text Fields
• How it looks in a browser:
First name:
Last name:
• Note that the form itself is not visible. Also note that
in most browsers, the width of the text field is 20
characters by default.

67
Web Technology

Radio Buttons
• Radio Buttons are used when you want the user to
select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female">
Female
</form>

68
Web Technology

Radio Buttons
• How it looks in a browser:
Male
Female
• Note that only one option can be chosen.

69
Web Technology

Check Boxes
• Checkboxes are used when you want the user to
select one or more options of a limited number of
choices.

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br>
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form> 70
Web Technology

Check Boxes
<form>
I have a bike:
<input type="checkbox" name="vehicle"
value="Bike">
<br>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br>
I have an airplane:
<input type="checkbox" name="vehicle"
value="Airplane">
</form>
71
Web Technology

Check Boxes
• How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:

72
Web Technology
Form’s Action Attribute and Submit
Button
• When the user clicks on the "Submit" button, the
content of the form is sent to another file.
• The form's action attribute defines the name of the
file to send the content to.
• The file defined in the action attribute usually does
something with the received input.

73
Web Technology
Form’s Action Attribute and Submit
Button
<form name="input"
action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
• How it looks in a browser:
Username: Submit

74
Web Technology

More Examples
• Create Button
Example:82
• Input Fields and Submit button
Example:83
• Form with Checkbox
Example:84
• Form with Radio Buttons
Example:85
• Send E-Mail from a form
• Example:86
75

You might also like