Scribd
Upload
7 views

HTML 4

Uploaded by

dugopapavo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML 4

Uploaded by

dugopapavo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Ordered and Unordered List

► Ordered list: create a list in which item begin with a number or


letter.
► Unordered list: does not order it's items by letters or unletters.

Tag Description
<ol> Defines ordered list
<ul> Defines unordered list
<li> Defines list items
Attribute Description
type Type of ordering or unordering (circle,
square, disk)

1
List.html
<html> <head>
<title>Internet and WWW How to Program - Lists</title>
</head>
<body>
<h1>The Best Features of the Internet</h1> By inserting a list as an
<ul>
<li>You can meet new people from countries around
entry in another list,
the world.</li> lists can be nested.
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications
<ol type = "I">
Entries for an ordered list
<li>For business</li> must be placed between the
<li>For pleasure</li></ol>
</li> <ol> and </ol> tags.
<li>Around the clock news</li>
<li>Search engines</li>
<li>Shopping</li>
<li>Programming
<ol type = "a">
<li>XML</li>
<li>Java</li>
<li>XHTML</li>
The type attribute of the
<li>Scripts</li> ordered list element allows you
<li>New languages</li></ol></li></ul></li>
<li>Links</li> to select a sequence type to
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li></ul>orderText
theplaced
list. between
<h1>My 3 Favorite <em>CEOs</em></h1> the em tags will be
<ol>
<li>Harvey Deitel</li> italicized.
<li>Bill Gates</li>
<li>Michael Dell</li </ol>

2
</body>
</html>

List.html

Program Output

Nested lists are


indented underneath
the main list.
Some sequence types
available to order lists
are roman numerals,
letters and numbers.

3
Linking

Tag Description

<a> Defines an anchor, used


to create an anchor to
link for.

Attribute Description

href Used to address the


document to link to
target Defines where the link 4
document will be opened
Links.html
<html>
Text between
<head> strong tags will
<title>Internet and WWW How to Program - Links</title> appear bold.
</head>
<body>

<h1>Here are my favorite sites</h1> Linking is


accomplished in
<p><strong>Click on a name to go to that page.</strong></p>
XHTML with the
<p><a href = "http://www.deitel.com">Deitel</a></p> anchor (a)
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
element.
The text between the
<p><a href = "http://www.yahoo.com">Yahoo!</a></p> a tags is the anchor
<p><a href = "http://www.usatoday.com">USA Today</a></p> for the link.
The anchor links to
</body> the page that’s value is
</html>
given by the href
Elements placed betweenattribute.
paragraph tags will be set apart
from other elements on the
page with a vertical line before
and after it.

5
Program Output

Clicking on the “Deitel” link will open


up the Deitel homepage in a new
browser window.

6
Placing image on web page:

Tag Description

<img> Defines image

Attribute Description

Src defines the image file location.

Width specify the image width.

Height specify the image height.

Alt is an attribute give a description of the


image, the description is displayed if the
image cannot be displayed
Border defines the image border width

7
align defines the placement side of the image
(the default is left).
Aligning text with images
Aligning text with images:
<img align="top" src="img.gif"> text </>
<img align="middle" src="img.gif"> text </>
<img align="bottom" src="img.gif"> text </>
The value of the src
attribute of the image
<html>
<head>
element is the location of
<title>Internet and WWW How to Program - Welcome</title> the image file.
</head>

<body>

<p><img src = "xmlhtp.jpg" height = "238" width = "183"


alt = "XML How to Program book cover" />
<img src = "jhtp.jpg" height = "238" width = "183"
alt = "Java How to Program book cover" /></p>
</body>
</html>
The value of the alt
attribute gives a description
of the image. This The height and width
description is displayed if attributes of the image
the image cannot be element give the height
displayed. and width of the image.
8
Video and audio tags
• <video width="320" height="240" controls>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> Your
browser does not support the video tag.
</video>

Format
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Optional Attributes

Attribute Value Description

controls controls Specifies that video controls should be displayed


(such as a play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every
time it is finished
muted muted Specifies that the audio output of the video should be
muted
poster URL Specifies an image to be shown while the video is
downloading, or until the user hits the play button
src URL Specifies the URL of the video file
width pixels Sets the width of the video player

<video controls poster="/images/w.gif">


Audio tag
<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>

Format
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav
Optional Attributes

Attribute Value Description

controls controls Specifies that audio controls should be displayed (such as a


play/pause button etc)
loop loop Specifies that the audio will start over again, every time it is
finished
muted muted Specifies that the audio output should be muted

src URL Specifies the URL of the audio file

You might also like