You are on page 1of 27

HTML

&
Video On Demand
Introduction

 Invented by Tim Berners-Lee at CERN,


the European Laboratory for Particle
Physics in Geneva for internet.
 Documents can be created using any
text editor.
e.g.-Vi on UNIX, Edit on Macintosh,
Notepad on Windows.
 File saved as .html is a HTML document.
What is HTML ?
Hyper Text Markup Language (HTML) is
the language for specifying mainly the
static content of Web pages and creation
of web pages and other information
viewable in a browser
 hypertextrefers to the fact that Web pages
are more than just text
 cancontain multimedia, provide links for
jumping within & without
 markup refers to the fact that it works by
augmenting text with special symbols
(tags) that identify structure and content
type
HTML Facts

 Web authoring software language.


 Is a language for describing web pages.
 Is not a programming language.
 Is a markup language.
 Uses mark up tags to define web pages.
 Is a language which runs on a computer
that has a web browser installed in it.
Contents of a HTML
document
 HTML document is constructed using HTML tags
 Certain tags are always part of a standard HTML
document.
 Every HTML document should start with the tag
<html> and end with the tag </html> which
tells the browser that this is an HTML document.
 Each HTML document includes a head and a
body. The head includes information about the
document (possibly the title, author, date of
creation, software used to create the document)
and the body contains the content of the
document. There are tags used to identify these
sections:
 <head> </head> these tags surround the
head of the document and come first
(before the body tags).
 <body> </body> these tags surround the
content of the document.
 Within the title tags the document should
contain a document title - this title is
typically shown in the title bar of the
browser window. Document titles should
convey something useful about the
content of the document.
Typical HTML document
structure
<html>
<head>
<title> Page Title Goes Here </title>
</head>
<body>
content goes here
</body>
</html>
Text in HTML
 Anything in the body of an HTML document,
unless marked otherwise, is text
 You can make text italic by surrounding it with <i>
and </i> tags
 You can make text boldface by surrounding it
with <b> and </b> tags
 You can put headers in your document with <h1>,
<h2>, <h3>, <h4>, <h5>, or <h6> tags (and the
corresponding end tag, </h1> through </h6>)
 <h1> is quite large; <h6> is very small
 Each header goes on a line by itself
Whitespace
 Whitespace is any non-printing characters
(space, tab, newline, and a few others)
 HTML treats all whitespace as word separators,
and automatically flows text from one line to the
next, depending on the width of the page
 To group text into paragraphs, with a blank line
between paragraphs, enclose each paragraph in
<p> and </p> tags
 To force HTML to use whitespace exactly as you
wrote it, enclose your text in <pre> and </pre>
tags (“pre” stands for “preformatted”)
 <pre> also uses a monospace font
 <pre> is handy for displaying programs
Lists
 Two of the kinds of lists  Example:
in HTML are ordered, The four main food
<ol> to </ol>, and groups are:
unordered, <ul> to </ul> <ul>
 Ordered lists typically <li>Sugar</li>
use numbers: 1, 2, 3, ... <li>Chips</li>
 Unordered lists typically <li>Caffeine</li>
use bullets (•) <li>Chocolate</li>
</ul>
 The elements of a list
(either kind) are
surrounded by <li> and
</li>
Links
 To link to another page, enclose the
link text in <a href="URL"> to </a>
 Example: I'm taking
<a href = "http://www.cis.upenn.edu/~matuszek/cit597.html">Dr.
Dave's CIT597 course</a> this semester.
 Link text will automatically be underlined
and blue (or purple if recently visited)
 To link to another part of the same page,
 Insert a named anchor: <a name="refs">References</a>
 And link to it with: <a href="#refs">My references</a>
 To link to a named anchor from a different page,
use
<a href="PageURL#refs">My references</a>
Images
 Images (pictures) are not part of an HTML page;
the HTML just tells where to find the image
 To add an image to a page, use:
<img src="URL" alt="text description" width="150"
height="100">
 The src attribute is required; the others are optional
 Attributes may be in any order
 The URL may refer to any .gif, .jpg, or .png file
 Other graphic formats are not recognized
 The alt attribute provides a text representation of the
image if the actual image is not downloaded
 The height and width attributes, if included, will improve
the display as the page is being downloaded
 If height or width is incorrect, the image will be distorted
 There is no </img> end tag, because <img> is not a
container
Tables
 Tables are used to organize information in two
dimensions (rows and columns)
 A <table> contains one or more table rows, <tr>
 Each table row contains one or more table data
cells, <td>, or table header cells, <th>
 The difference between <td> and <th> cells is just
formatting--text in <th> cells is boldface and centered
 Each table row should contain the same number
of table cells
 To put borders around every cell, add the
attribute border="1" to the <table> start tag
Example table
<table border="1">
<tr>
<th>Name</th> <th>Phone</th>
</tr>
<tr>
<td>Dick</td> <td>555-1234</td>
</tr>
<tr>
<td>Jane</td> <td>555-2345</td>
</tr>
<tr>
<td>Sally</td> <td>555-3456</td>
</tr>
</table>
More about tables
 Tables, with or without borders, are excellent for
arranging things in rows and columns
 Wider borders can be set with border="n"
 Text in cells is less crowded if you add the attribute
cellpadding="n" to the <table> start tag
 Tables can be nested within tables, to any
(reasonable) depth
 This is very convenient but gets confusing
 Tables, rows, or individual cells may be set to any
background color (with bgcolor="color")
 Columns have to be colored one cell at a time
 You can also add bgcolor="color" to the <body> start tag
Creating an HTML file
 Notepad or Wordpad (PC) or SimpleText
(Mac)
 First tag: <html>
 Indicates that you are starting an HTML document
 Last tag: </html>
 Indicates that you are ending an HTML document
 *Note* the open & close structure to HTML

 Save file as index.html


 This is a typical default title for home pages
 Windows may seem to prefer .htm but .html will
also work just fine.
Index.html Example
<html>

</html>
Creating Text in HTML
 Body Tags
 <body> and </body>
 *Note* that all text that appears on the page must
be encapsulated within the body tags
 Text headings
 <h1> and </h1>
 There are six defined heading sizes

 <h1> (largest) through <h6> (smallest)

 Paragraphs
 <p> and </p>
Text Example
<html>
<head>
<title>Literature.Culture.Media Center</title>
</head>
<body>

<h1>This is a big heading!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>
Text Example (cont.)
This is a big heading!
This is a smaller heading!

This is an example of a paragraph.


HTML Organization
 Spacing
 Spacing organizes your work!
 Spacing makes your files easy to read!
 Spacing makes no functional difference
to your web browser
 Comments
 Comments are notes in your HTML file
 Comments make no functional
difference to your web browser
 “<!--” begins a comment, and “ -->” ends
it
Comments Example
<html>
<head>
<title>Literature.Culture.Media Center</title>
</head>
<body>

<h1>This is a big header!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>

<!-- This is an example of a comment.-->


Video On Demand
 Refers to the practice of ordering videos
as per customer likings.
 Service in which user will order on its
demand which videos/movies the user
wants to see.
 Being used by the new DTH companies
coming over as a strategy to attract
customers.
 Cable operators provide such service by
providing a telephone no. and users can
request any video.
Video on Demand System
Switch

Fiber
ATM or
Video SONET
Server Local
Backbo Spooling
Server
ne
Network
Local
Distributi
on
Audio
Server Network
Requirements for VoD
 Need Video Servers
 Capable of storing and outputting a large
number of movies simultaneously
 MPEG-4 new format for transmitting
videos in digital picture quality.
 Storage Capacity is huge
 Video Server Software
How To Get VoD ?
 Local Cable Operators
 Rental Houses

 Online Rental

 DTH companies like Digital

TV, Big TV, Dish TV.


THANKS

You might also like