Scribd
Upload
19 views117 pages

INFOT 2 Chapter 4

Uploaded by

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

INFOT 2 Chapter 4

Uploaded by

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

Chapter 4:

Lesson 1:

HTML Introduction
What is HTML?
HTML is the standard markup language for creating
Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using
markup
• HTML elements are the building blocks of HTML
pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them
to render the content of the page
A Simple HTML Document
Example Explained
HTML Page Structure
Below is a visualization of an HTML page
structure:
Web Browsers
• The purpose of a web browser (Chrome, IE, Firefox,
Safari, etc.) is to read HTML documents and display
them.
• The browser does not display the HTML tags, but uses
them to determine how to display the document:
HTML Tags
HTML tags are element names surrounded by
angle brackets:
The <!DOCTYPE> Declaration
HTML Versions
HTML Editors
Write HTML Using Notepad or TextEdit
• Web pages can be created and modified by
using professional HTML editors.
• However, for learning HTML we recommend a
simple text editor like Notepad (PC) or
TextEdit (Mac).
• We believe using a simple text editor is a good
way to learn HTML.
Step 1: Open Notepad (PC)
The Notepad Window

Program Control
Title Bar Buttons
Menu Bar

Text Area

Scroll
Bar
Step 2: Write Some HTML
Step 3: Save the HTML Page
Step 4: View the HTML Page
in Your Browser
Open the saved HTML file in your favorite browser (double click
on the file, or right-click - and choose "Open with").
The result will look much like this:
HTML Basic Examples
HTML Documents
Example
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the
least important heading:
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
HTML Links
HTML Images
HTML Buttons
HTML Lists
HTML Elements
Do Not Forget the End Tag

• Some HTML elements will display correctly,


even if you forget the end tag:
Empty HTML Elements
Use Lowercase Tags
• HTML tags are not case sensitive: <P> means the same
as <p>.
• The HTML5 standard does not require lowercase tags,
but W3C recommends lowercase in HTML,
and demands lowercase for stricter document types
like XHTML.
HTML Attributes
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional
information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
The href Attribute
The src Attribute
The width and height Attributes
The width and height Attributes
The alt Attribute
The style Attribute
The lang Attribute
The title Attribute
HTML Headings
HTML Headings
Headings Are Important
Bigger Headings
HTML Horizontal Rules
The HTML <head> Element
How to View HTML Source?
HTML Paragraphs
HTML Display
• You cannot be sure how HTML will be
displayed.
• Large or small screens, and resized windows
will create different results.
• With HTML, you cannot change the output by
adding extra spaces or extra lines in your
HTML code.
• The browser will remove any extra spaces
and extra lines when the page is displayed:
HTML Line Breaks
The Poem Problem
The HTML <pre> Element
HTML Styles
HTML Background Color
HTML Text Color
HTML Fonts
HTML Text Size
HTML Text Alignment
HTML Text Formatting
HTML Formatting Elements
HTML Formatting Elements
HTML <b> and <strong> Elements
HTML <i> and <em> Elements
HTML <i> and <em> Elements
HTML <small> Element
HTML <mark> Element
HTML <del> Element
HTML <sup> Element
HTML <sub> Element
HTML Tables
Defining an HTML Table
HTML Table Example
HTML Table –
Adding a Border
• If you do not specify a border for the table,
it will be displayed without borders.
• A border is set using the
CSS border property:
<!DOCTYPE html> <tr>
<html>
<head> <td>Eve</td>
<style> <td>Jackson</td>
table, th, td { <td>94</td>
border: 1px solid black;
} </tr>
</style> <tr>
</head> <td>John</td>
<body>
<h2>Bordered Table</h2> <td>Doe</td>
<p>Use the CSS border property to add a <td>80</td>
border to the table.</p> </tr>
<table style="width:100%">
<tr> </table>
<th>Firstname</th> </body>
<th>Lastname</th> </html>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML Table –
Collapsed Borders
If you want the borders to collapse into one
border, add the CSS border-collapse property:
<table style="width:100%">
<!DOCTYPE html> <tr>
<th>Firstname</th>
<html> <th>Lastname</th>
<head> <th>Age</th>
<style> </tr>
<tr>
table, th, td { <td>Jill</td>
border: 1px solid black; <td>Smith</td>
border-collapse: collapse; <td>50</td>
</tr>
} <tr>
</style> <td>Eve</td>
</head> <td>Jackson</td>
<td>94</td>
<body> </tr>
<tr>
<h2>Collapsed Borders</h2> <td>John</td>
<td>Doe</td>
<p>If you want the borders to <td>80</td>
collapse into one border, add the </tr>
CSS border-collapse property.</p> </table>
</body>
</html>
HTML Table -
Adding Cell Padding
• Cell padding specifies the space between the
cell content and its borders.
• If you do not specify a padding, the table cells
will be displayed without padding.
• To set the padding, use the
CSS padding property:
Adding Cell Padding
<h2>Cellpadding</h2> <tr>
<!DOCTYPE html>
<p>Cell padding specifies the <td>Eve</td>
<html>
space between the cell content <td>Jackson</td>
<head>
and its borders.</p> <td>94</td>
<style>
</tr>
table, th, td {
<table style="width:100%"> <tr>
border: 1px solid black;
<tr> <td>John</td>
border-collapse: collapse;
<th>Firstname</th> <td>Doe</td>
}
<th>Lastname</th> <td>80</td>
th, td {
<th>Age</th> </tr>
padding: 15px;
</tr> </table>
}
<tr>
</style>
<td>Jill</td> <p>Try to change the
</head>
<td>Smith</td> padding to 5px.</p>
<body>
<td>50</td>
</tr> </body>
</html>
HTML Table –
Adding Border Spacing
• Border spacing specifies the space between
the cells.
• To set the border spacing for a table, use
the CSS border-spacing property:
<!DOCTYPE <h2>Border
<tr>
html> Spacing</h2>
<td>Eve</td>
<html> <p>Border spacing
<td>Jackson</td>
<head> specifies the space
<td>94</td>
<style> between the cells.</p>
</tr>
table, th, td {
<tr>
border: 1px <table
<td>John</td>
solid black; style="width:100%">
<td>Doe</td>
padding: 5px; <tr>
<td>80</td>
} <th>Firstname</th>
</tr>
table { <th>Lastname</th>
</table>
border-spacing: <th>Age</th>
15px; </tr>
<p>Try to change the border
} <tr>
-spacing to 5px.</p>
</style> <td>Jill</td>
</head> <td>Smith</td>
</body>
<body> <td>50</td>
</html>
</tr>
Border Spacing
Border spacing specifies the space between the
cells.
HTML Table - Cells that
Span Two /Many Rows
• To make a cell span more than one row, use
the rowspan attribute:
<!DOCTYPE html> <h2>Cell that spans two rows</h2>
<html> <p>To make a cell span more than one
<head> row, use the rowspan attribute.</p>
<style> <table style="width:100%">
table, th, td { <tr>
border: 1px solid <th>Name:</th>
black; <td>Bill Gates</td>
border-collapse: </tr>
<tr>
collapse; <th rowspan="2">Telephone:</th>
} <td>55577854</td>
th, td { </tr>
padding: 5px; <tr>
text-align: left; <td>55577855</td>
</tr>
} </table>
</style>
</head> </body>
<body> </html>
HTML Table - Adding a
Caption
• To add a caption to a table, use
the <caption> tag:
Note: The <caption> tag must be inserted
immediately after the <table> tag.
<!DOCTYPE html> <h2>Table Caption</h2>
<p>To add a caption to a table, use the caption
<html> tag.</p>
<head>
<style> <table style="width:100%">
<caption>Monthly savings</caption>
table, th, td { <tr>
border: 1px solid <th>Month</th>
black; <th>Savings</th>
</tr>
border-collapse: <tr>
collapse; <td>January</td>
} <td>$100</td>
</tr>
th, td { <tr>
padding: 5px; <td>February</td>
text-align: left; <td>$50</td>
</tr>
} </table>
</style>
</head> </body>
</html>
<body>
HTML Multimedia
What is Multimedia?
• Multimedia comes in many different
formats. It can be almost anything you can
hear or see.
• Examples: Images, music, sound, videos,
records, films, animations, and more.
• Web pages often contain multimedia
elements of different types and formats.
Browser Support
• The first web browsers had support for text
only, limited to a single font in a single color.
• Later came browsers with support for colors
and fonts, and images!
• Audio, video, and animation have been
handled differently by the major browsers.
Different formats have been supported, and
some formats require extra helper programs
(plug-ins) to work.
Multimedia Formats
• Multimedia elements (like audio or
video) are stored in media files.
• The most common way to discover the
type of a file, is to look at the file
extension.
• Multimedia files have formats and
different extensions like: .swf, .wav, .mp3,
.mp4, .mpg, .wmv, and .avi.
•
Common Video Formats
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the
.mpeg web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4).

AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV
hardware. Plays well on Windows computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and
TV hardware. Plays well on Windows computers, but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well
on Apple computers, but not in web browsers. (See MP4)

RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still
.ram used for online video and Internet TV, but does not play in web browsers.

Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web
.flv browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in
or MP4 newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by
YouTube.
Audio Formats
• MP3 is the newest format for
compressed recorded music. The term
MP3 has become synonymous with
digital music.
• If your website is about recorded music,
MP3 is the choice.
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all
.midi electronic music devices like synthesizers and PC sound cards. MIDI
files do not contain sound, but digital notes that can be played by
electronics. Plays well on all computers and music hardware, but not
in web browsers.
RealAu .rm RealAudio. Developed by Real Media to allow streaming of audio with
dio .ram low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Commonly
used in music players. Plays well on Windows computers, but not in
web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default
format for iTunes. Plays well on Apple computers, but not in web
browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
popular format for music players. Combines good compression (small
files) with high quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video is
the upcoming video format on the internet. This leads to automatic
support for MP4 audio by all browsers.
HTML5 Video
Playing Videos in HTML
• Before HTML5, a video could only be played in
a browser with a plug-in (like flash).
• The HTML5 <video> element specifies a
standard way to embed a video in a web page.
Browser Support
• The numbers in the table specify the first
browser version that fully supports
the <video>element.
The HTML <video> Element
To show a video in HTML, use the <video> element:
<!DOCTYPE html> <script>
<html> var myVideo = document.getElementById("video1");
<body> function playPause() {
<div style="text-align:center"> if (myVideo.paused)
<button myVideo.play();
else
onclick="playPause()">Play/Pause</butto myVideo.pause();
n> }
<button
onclick="makeBig()">Big</button> function makeBig() {
myVideo.width = 560;
<button }
onclick="makeSmall()">Small</button>
<button function makeSmall() {
onclick="makeNormal()">Normal</button myVideo.width = 320;
}
>
<br><br> function makeNormal() {
<video id="video1" width="420"> myVideo.width = 420;
<source src="mov_bbb.mp4" }
</script>
type="video/mp4"> </body>
</video> </html>
</div>
How it Works
HTML Video - Media Types
HTML Video - Browser Support
Next Topic

Chapter 6

You might also like