html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
, and common tags like

, , , , and

. It provides examples of basic HTML pages and uses of different tags.">
Scribd
Upload
13 views

Chapter 2, HTML Web

The document discusses HTML structure and tags. It explains elements like <html>, <head>, <body>, and common tags like <p>, <h1-h6>, <a>, <img>, and <div>. It provides examples of basic HTML pages and uses of different tags.

Uploaded by

dejenehundaol91
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
13 views

Chapter 2, HTML Web

The document discusses HTML structure and tags. It explains elements like <html>, <head>, <body>, and common tags like <p>, <h1-h6>, <a>, <img>, and <div>. It provides examples of basic HTML pages and uses of different tags.

Uploaded by

dejenehundaol91
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/ 76

Chapter Two

Web Page Development Using HTML

Compiled by Dawit Uta. (M. Tech.)


Computer Science Department, WSU
website address: www.davidtechnotips.com
1
HTML Structure
• HTML stands for hypertext markup language.
• HTML is comprised of “elements” and “tags”
– Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>

• Tags have attributes:


<img src="logo.jpg" alt="logo">

• HTML describes structure using two main sections: <head> and <body>

2 Compiled by Dawit U.
HTML Code Formatting
• The HTML source code should be formatted to increase readability and facilitate
debugging.

– Every block element should start on a new line.

– Every nested (block) element should be indented.

– Browsers ignore multiple whitespaces in the page source, so formatting is harmless.

• For performance reasons, formatting can be sacrificed

3 Compiled by Dawit U.
First HTML Page
All HTML documents must start with a <!DOCTYPE>
test.html declaration. The declaration is not an HTML tag. It is an
"information" to the browser about what document type to
<!DOCTYPE html> expect. In HTML 5, the declaration is simple:
<html> <!DOCTYPE html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text that will appear on the web page </p>
</body>
</html>

4 Compiled by Dawit U.
First HTML Page: Tags
<!DOCTYPE HTML>
<html>
Opening tag
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>

5 Compiled by Dawit U.
First HTML Page: Header
<!DOCTYPE HTML>
HTML header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

6 Compiled by Dawit U.
First HTML Page: Body
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body

7 Compiled by Dawit U.
Tags Attributes
• Tags can have attributes
– Attributes specify properties and behavior
– Example: Attribute alt with value "logo"
<img src="logo.gif" alt="logo" >

– Few attributes can apply to every element:


• id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the element is
hovered with the mouse
• Some elements have obligatory attributes

8 Compiled by Dawit U.
Some basic tags
• Hyperlink Tags
<a href="http://www.google.com/"
title=“Google">Link to google </a>

• Image Tags
<img src="logo.gif" alt="logo">

• Text formatting tags


This text is <em>emphasized.</em>
<br>new line<br>
This one is <strong>more emphasized.</strong>
9 Compiled by Dawit U.
Some basic
some-tags.html
tags – Example
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www. Google .com/" title=
“Google site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>

10 Compiled by Dawit U.
Headings and Paragraphs
• Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

• Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
• Sections: div and span
<div style="background: skyblue;">
This is a div</div>
11 Compiled by Dawit U.
Creating html documents. Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>

12 Compiled by Dawit U.
Headings and Paragraphs – Example (2)
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>

13 Compiled by Dawit U.
The <head> Section
• Contains information that doesn’t show directly on the viewable
page.
• Starts after the <!doctype> declaration
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• <meta charset=“character_set”>:The charset attribute specifies the
character encoding for the HTML document.
Common values:
UTF-8: Character encoding for Unicode
ISO-8859-1: Character encoding for the
Latin alphabet

14 Compiled by Dawit U.
The <head> Section cont…
Meta tag Usage
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML document. Metadata will
not be displayed on the page, but will be machine parsable.
• Meta elements are typically used to specify page description, keywords, author
of the document, last modified, and other metadata.
• The metadata can be used by browsers (how to display content or reload page),
search engines (keywords), or other web services.
Compiled by Dawit U. 15
 some other tags, in this section are also:
 <script>, <style>
• The <script> element is used to embed scripts into an HTML document
– Script are executed in the client's Web browser
– Scripts can live in the <head> and in the <body> sections
• Supported client-side scripting languages: are JavaScript (it is not Java!), CSS
16 Compiled by Dawit U.
Responsive web design
 Responsive web design is about creating web pages that look good on all
devices!
 A responsive web design will automatically adjust for different screen
sizes and viewports.
Responsive Web Design :
is about using HTML and
CSS to automatically
resize, hide, shrink, or
enlarge, a website, to
make it look good on all
devices (desktops,
tablets, and phones):
To create a responsive website, add
this <meta> tag to all your web pages
Compiled by Dawit U. 17
Setting The Viewport
 The viewport is the user's visible area of a web page. It varies with the
device - it will be smaller on a mobile phone than on a computer screen.

 You should include the following <meta> element in all your web pages:

Compiled by Dawit U. 18
The <body> Section
• The <body> section describes the viewable portion of the page
• Starts after the <head> </head> section
• Begins with <body> and ends with </body>

<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>
19 Compiled by Dawit U.
Text Formatting
• Text formatting tags modify the text between the
opening tag and the closing tag
– Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
20
Text Formatting – Example
textformatting.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re writing HMTL code<br>
Next line.</p>
</body>
</html>
21 Compiled by Dawit U.
Hyperlinks: <a> Tag
 Link to a document called form.html on the same server in the same
directory:
<a href="form.html">Fill Our Form</a>

 Link to a document called parent.html in different folder:

<a href="./parent.html">Parent</a>

22 Compiled by Dawit U.
Hyperlinks: <a> Tag

 Link to an external Web site:


<a href=“http://www.devbg.org” target="_blank">Go!!</a>

 Always use a full URL, including "http://", not just "www.somesite.com"


 Using the target="_blank" attribute opens the link in a new window
 Link to an e-mail address:

<a href="mailto:bugs@example.com">Please report bugs


here</a>

23 Compiled by Dawit U.
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com">Please report bugs
here</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />

24 Compiled by Dawit U.
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />

25 Compiled by Dawit U.
Images: <img> tag
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">

 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

 Example:
<img src="./php.png" alt="PHP Logo" />
Compiled by Dawit U. 26
26
Block and Inline Elements

 Block elements add a line break before and after


them
<div> is a block element and container for other tags
Other block elements are <table>, <hr>, headings, lists,
<p>,<br> and etc.
 Inline elements don’t break the text before and
after them
<span> is an inline element and container for other tags
Most HTML elements are inline, e.g. <a>,<input>,<hr>

27 Compiled by Dawit U.
The <div> Tag
• <div> creates logical divisions within a page
• Block style element
• Used with CSS
• Example:
div-and-span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
28 Compiled by Dawit U.
The <span> Tag
• Inline style element
• Useful for modifying a specific portion of text
– Don't create a separate area (paragraph) in the
document
• Very useful with CSS
span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
29 Compiled by Dawit U.
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
30
HTML Special Characters both in numeric and named entity

Compiled by Dawit U. 31
List there are three types of list.
1. Ordered Lists
 To Create an Ordered List use <ol></ol> Tag :
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
 Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
32 Compiled by Dawit U.
2. Unordered Lists
 To Create an Unordered List use <ul></ul>Tag :
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
 Attribute values for type are:
– disc, circle or square

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear
33 Compiled by Dawit U.
3. Definition lists
 To Create definition lists use <dl> tag
– Pairs of text and associated definition; text is in <dt> tag,
definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
– Renders without bullets
– Definition is indented
dl: definition list
dt: definition term
dd: definition description

34 Compiled by Dawit U.
<ol type="1">
Lists – Example
lists.html
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup language designed …</dd>
</dl>

35 Compiled by Dawit U.
HTML Tables

Compiled by Dawit U. 36
HTML Tables
• Tables represent tabular data
– A table consists of one or more rows
– Each row has one or more columns
• Tables comprised of several core tags: <table></table>
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
• Table have some features
1. bgcolor: Add a background color
2. background image: add a background image
3. Border, Cell padding, Cell spacing
4. rowspan/colspan: cells that span more than one row/column

37 Compiled by Dawit U.
Simple HTML Tables – Example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
38 Compiled by Dawit U.
Complete HTML Tables

Table rows split into three semantic sections: header, body and
footer
<thead> denotes table header and contains <th> elements, instead of
<td> elements
<tbody> denotes collection of table rows that contain the data
<tfoot> denotes table footer but comes BEFORE the <tbody> tag
<colgroup> and <col> define columns (most often used to set column
widths)

39 Compiled by Dawit U.
Complete HTML Table: Example
<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup> th
<thead>
header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body (data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
40 Compiled by Dawit U.
Complete HTML Table:
By default, header text is
Example
bold and centered.
(2)
<table> table-full.html
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell Although the footer
1.1</td><td>Cell is
1.2</td></tr>
<tr><td>Cell before the data in 2.2</td></tr>
2.1</td><td>Cell the
</tbody> code, it is displayed last
41
</table> Compiled by Dawit U.
Cell Spacing and Padding
Tables have two important attributes:

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the empty  Defines the empty space


space between around the cell content
cells
42 Compiled by Dawit U.
Cell Spacing and Padding – Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

43 Compiled by Dawit U.
Column and Row Span
• Table cells have two important attributes:
 colspan  rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"

cell[1,1] cell[1,2] cell[1,2]


cell[1,1]
cell[2,1] cell[2,1]

colspan="2" rowspan="1"
 Defines how  Defines how
many columns many rows the
44
the cell occupies Compiled by Dawit U.
cell occupies
Column and Row Span – Example
table.html
<html><head><title>table</title></head>
<body>
<table cellspacing="0" border ="3">
<tr><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
</body>
</html>

45 Compiled by Dawit U.
HTML Forms
Entering User Data from a Web Page

Compiled by Dawit U. 46
HTML Forms
 HTML form is any section of a web page where a user can input information and
submit to a web server.
 Your visitors can enter text into blank fields, make choices by checking boxes, select
options from menus, and then click a button to send it all away for processing.
Create a form block with below tag

<form></form> The “method" attribute tells how the form data


Example:
should be sent via HTTP GET or POST request

<form name="myForm" method="post"


action="path/to/some-script.php">
...
</form>
The "action" attribute tells where the form data
should beCompiled
sent and handlled
by Dawit U. 47
The Components of a Form
 The entirety of a form is wrapped within a single form tag that acts as a container for the
specialized elements that generate form controls.

 These controls are the text fields, checkboxes, radio buttons, menus, and buttons your
visitors will use to enter their information or make their selections.

 When the form is submitted, all the values of its various controls are sent as name/value
pairs to a form handler as part of a data set. Therefore, each control must carry a name
attribute so it can be correctly paired with its value.

 Many common form controls can be created with the inline input element, and each type
of input control is defined with a corresponding type attribute

Compiled by Dawit U. 48
 The INPUT tag is a multipurpose tag that creates many different types of controls
 The type of input is controlled by the TYPE attribute, so it can be TEXT, PASSWORD,
CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE, or BUTTON
 Almost all of these should have a NAME attribute
 The input element is also an empty element, so it can hold no text content, can hold no
other elements, and must be closed with a trailing slash (/>).
 Required Attributes
 name: Identifies the control so it can be matched with its value when the form is
submitted. A markup validator may not generate an error if this attribute is missing, but
it’s required in order to successfully handle the form.

Compiled by Dawit U. 49
Form Fields
 Single-line text input fields:
<input type="text" name="FirstName" value="This
is a text field" />
 Multi-line textarea fields:
<textarea name="Comments“ cols=“20”
rows=“40”>This is a multi-line text
field</textarea>
 Hidden fields contain data not shown to the user:
<input type="hidden" name="Account" value="This
is a hidden text field" />

– Often used by JavaScript code

50 Compiled by Dawit U.
Fieldsets
 Fieldsets tag are used to enclose a group of related form
fields.
 The legend tag assigns a caption to a field set.

<form method="post" action="form.php">


<fieldset>
<legend>Client Details</legend>
<input type="text" name="Name" />
<input type="text" name="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" name="Quantity" />
<textarea cols="40" rows="10"
name="Remarks"></textarea>
</fieldset>
</form>

51 Compiled by Dawit U.
Form Input Controls
 Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />
 Radio buttons:
<input type="radio" name="title" value=“M"/>

 Radio buttons can be grouped, allowing only one to be selected from a


group:
<input type="radio" name="city" value=“Rome" />
<input type="radio" name="city" value=“Turk" />

52 Compiled by Dawit U.
Other Form Controls

Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>

Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />

53 Compiled by Dawit U.
Other Form Controls…

 Reset button – brings the form to its initial state


<input type="reset" name="resetBtn"
value="Reset the form" />

 Image button – acts like submit but image is displayed and click
coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />

 Ordinary button – used for Javascript, no default action

<input type="button" value="click me" />


54 Compiled by Dawit U.
Other Form Controls…

 Password input – a text field which masks the entered text with *
signs
<input type="password" name="pass" />

 Multiple select field – displays the list of items in multiple lines,


instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
55 Compiled by Dawit U.
Other Form Controls…
 File input – a field used for uploading files
<input type="file" name="photo" />
– When used, it requires the form element to have a specific attribute:

<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
This attribute indicates how form data should be
</form>
encoded before the data being sent to the server.

56 Compiled by Dawit U.
Labels
 Form labels are used to associate an explanatory text to a form field
using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

 Clicking on a label focuses its associated field (checkboxes are


toggled, radio buttons are checked)
 Labels are both a usability and accessibility feature and are required
in order to pass accessibility validation.

57 Compiled by Dawit U.
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
58 <input type="text" name="lname" id="lname" /> U.
Compiled by Dawit
HTML Forms Example
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
59 Compiled by Dawit U.
HTML Forms – Example
form.html (continued)

60 Compiled by Dawit U.
Inserting multimedia in HTML
 Multimedia is a form of communication that combines different content forms such as text,
audio, images, animations, or video into a single interactive presentation, in contrast to
traditional mass media which features little to no interaction from users, such as printed
material or audio recordings.

Adding multimedia files


• <a href=“filename.extension> listen to sound file </a>
• <a href=“sound1.wav> listen to sound file </a>
• <a href=“movie1.mov> view movie clip </a>
Compiled by Dawit U. 61
Embed vs Video and Audio tags
 What is the difference between embed and video/audio?

 The difference between embedding and linking videos/audio. An


embedded video/audio lets you borrow the video/audio from another
platform. Visitors can watch/listen the video/audio on your website
without leaving the current page.

 In contrast, linking a video/audio shares the URL of the video/audio.

Compiled by Dawit U. 62
Different types of files

File Type Extention/Mime type


================================
plain text: .txt
HTML document: .html
GIF image: .gif or .jpg or .png
Acrobat file: .pdf
AIFF sound file: .aiff .au . wav
MP3 .mp3
QuickTime movie: .mov
MPEG movie: .mpeg or .mpg

Compiled by Dawit U. 63
HTML Frames
<frameset> and <frame>

Compiled by Dawit U. 64
HTML Frames
 Frame divides a browser window into several pieces or panes, each pane containing a
separate HTML page.
 The page can be split into separate views (frames) horizontally and vertically.

 One of the key advantages that frames offer is that you can then load and reload single
panes without having to reload the entire contents of the browser window.

 A collection of frames in the browser window is known as a frameset.

 When to Use Frames

A lot of beginners use frames in their sites, particularly creating one for navigation and the
other for content. But then as they learn more about HTML and XHTML they tend to move
toward using tables for layout and, increasingly, CSS.
65 Compiled by Dawit U.
HTML Frames cont…
A couple of other drawbacks you should be aware of with frames are as follows:

 Some browsers do not print well from framesets.

 Some smaller devices cannot cope with frames, often because their screen is not big
enough to be divided up

 Frames are not supported by all user agents (browsers, search engines, etc.)

 The browser’s Back button might not work as the user hopes and so on.

 when writing a frameset document, you use a different DOCTYPE declaration. This is
because frameset documents use a few elements in different ways than other XHTML
documents.

Compiled by Dawit U. 66
HTML Frames cont…
 To create a frameset document, first you need the <frameset> element, which is used
instead of the <body> element.

 The frameset defines the rows and columns your page is divided into, which in turn
specify where each individual frame will go. Each frame is then represented by a
<frame> element.
 You also need to use the <noframes> element, which provides a message for users whose
browsers do not support frames.
 The <frameset> element have many attributes rows, cols, noresize, scrolling, and src.

 But rows and cols attributes used to specify the number of rows and columns that make
up the frameset.
 The <frames /> elements indicate which page will be kept inside that frame using the src
attribute Compiled by Dawit U. 67
 You can specify the width of each column/rows in one of the four ways:

Absolute values in pixels Eg. cols="40, 60"

 A percentage of the browser window: eg. cols="40%, 60%"

 Using a wildcard symbol eg. cols="400, *"

Relative width b/n column eg. cols="3*, 2*, 1*"

Compiled by Dawit U. 68
Compiled by Dawit U. 69
HTML Iframes (internal frames)
 An HTML iframe is used to display a web page within a web page.
 The HTML <iframe> tag specifies an inline frame.
 An inline frame is used to embed another document within the current
HTML document.
 It is a good practice to always include a title attribute for the <iframe>.
This is used by screen readers to read out what the content of the iframe is.

Summary

Compiled by Dawit U. 70
HTML Graphics
 There are two modern web technologies for creating rich drawn graphics

within the browser: HTML5 Canvas and Scalable Vector Graphics (SVG).

 Canvas: A hypertext markup language element introduced in HTML5 for

creating and analyzing bitmap images as pixels.

 The Canvas specification provides a JavaScript API for accessing the

element's graphics context and performing drawing operations with it.

 Canvas is used to create high performance, interactive and complex scenes


Compiled by Dawit U. 71
 The HTML <canvas> element can be used to draw graphics on a web page

The <canvas> element is only a container for


graphics. You must use JavaScript to actually
draw the graphics. Canvas has several methods
for drawing paths, boxes, circles, text, and
adding images.

Compiled by Dawit U. 72
Canvas Example
• A canvas is a rectangular area on an HTML page. By default, a
canvas has no border and no content.
• The markup looks like this:

After creating the


rectangular canvas area,
you must add a JavaScript
to do the drawing.
Here are some examples:

Compiled by Dawit U. 73
Scalable Vector Graphics (SVG) in HTML.
 SVG: An XML-based vector graphics format. It is a markup language for describing

all aspects of an image or Web application, from the geometry of shapes, to the

styling of simple presentation, text and shapes.

 The HTML <svg> element allows vector based graphics in HTML:

 SVG can also be generated through JavaScript.

Compiled by Dawit U. 74
Scalable Vector Graphics (SVG) in HTML …

SVG has several methods for drawing paths, boxes, circles,


text, and graphic images. The stroke attribute is a presentation attribute defining the
color (or any SVG paint servers like gradients or patterns)
used to paint the outline of the shape; Note: As a presentation
attribute stroke can be used as a CSS property.
Example

Creates circles like this

Compiled by Dawit U. 75
76 Compiled by Dawit U.

You might also like