Web Design Programming Chapter 2

WEB DESIGN PROGRAMMING : CHAPTER 2
(Static Webpage Development:HTML) ----JITENDRA SINGH
2.1 INTRODUCTION TO STATIC WEB PAGE DEVELOPMENT
Static web Page:- A static web page (sometimes called a flat page/stationary
page) is a web page that is delivered to the user exactly as stored, in contrast to dynamic web
pages which are generated by a web application.
Static web pages are often HTML documents stored as files in the file system and made available by
the web server over HTTP (nevertheless URLs ending with ".html" are not always static). However,
loose interpretations of the term could include web pages stored in a database, and could even
include pages formatted using a template and served through an application server, as long as the
page served is unchanging and presented essentially as stored.
Advantages of a static website
• Provide improved security over dynamic websites[1]

• Improved performance for end users compared to dynamic websites[2]
• Fewer or no dependencies on systems such as databases or other application servers
Disadvantages of a static website
• Dynamic functionality has to be added separately
2.2 WHAT IS HTML FILE

HTML is a Hypertext Markup Language file format used as the basis of a web page. HTML is a file
extension used interchangeably with HTM.
• 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:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>

• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward
slash inserted before the tag name
Note: The start tag is also called the opening tag, and the end tag the closing
tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) 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 Page Structure

Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the white area above) is
displayed in a browser.
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
2.3 HTML ELEMENTS

An HTML element usually consists of a start tag and end tag, with the content
inserted in between:
<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

</body>
</html>
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.

The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
The <h1> element defines a heading.
The <p> element defines a paragraph.
2.4 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

HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
Example
<a href="https://www.Ethioservices.com">This is a link</a>
The src Attribute

HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img src="img_university.jpg">
The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width and
height of the image:
Example
<img src="img_university.jpg" width="500" height="600">
The image size is specified in pixels: width="500" means 500 pixels wide.
The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot
be displayed.
The value of the attribute can be read by screen readers. This way, someone
"listening" to the webpage, e.g. a blind person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The alt attribute is also useful if the image does not exist:
The style Attribute

The style attribute is used to specify the styling of an element, like color, font,
size etc.
Example
<p style="color:red">I am a paragraph</p>
The title Attribute

Here, a title attribute is added to the <p> element. The value of the title
attribute will be displayed as a tooltip when you mouse over the paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
2.5 HYPER-LINKS
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
Note: A link does not have to be text. It can be an image or any other HTML
element.
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.jitendracourse.com/html/">Visit my HTML tutorial</a>
he href attribute specifies the destination address

(https://www.jitendracourse.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
HTML Links - Image as Link

It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
2.6 HTML TABLES

An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table
data/cell is defined with the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
The <td> elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.
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:
Example
table, th, td {
border: 1px solid black;
}
2.7 HTML IMAGES

Images can improve the design and the appearance of a web page.
Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.
Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the
web page.
However, it is common to store images in a sub-folder. You must then include

the folder name in the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Images on Another Server

Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="https://www.ethiopianservices.com/images/ethiopian_green.jpg" alt="
EthiopianServices.com">
Animated Images
HTML allows animated GIFs:
Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text:
Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley

face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Background Image
To add a background image on an HTML element, use the CSS
property background-image:
Example
To add a background image on a web page, specify the background-image
property on the BODY element:
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
2.8 HTML FORMS

HTML Form Example

jitendra singh
First name: Last name:
Submit
The <form> Element

The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <input> Element

The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on

the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Note: The default width of a text field is 20 characters.
Radio Button Input

<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
The Submit Button

<input type="submit"> defines a button for submitting the form data to
a form-handler.
The form-handler is typically a server page with a script for processing input
data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.
Normally, the form data is sent to a web page on the server when the user
clicks on the submit button.
In the example above, the form data is sent to a page on the server called
"/action_page.php". This page contains a server-side script that handles the
form data:
The Target Attribute

The target attribute specifies if the submitted result will open in a new browser
tab, a frame, or in the current window.
The default value is "_self" which means the form will be submitted in the
current window.
To make the form result open in a new browser tab, use the value "_blank":
Example
<form action="/action_page.php" target="_blank">
The <select> Element

The <select> element defines a drop-down list:
Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
The <button> Element

The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
HTML <fieldset> Tag

Example
Group related elements in a form:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
Input Type Password

<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Input Type Checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of

choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car

</form>
Input Type Email

The <input type="email"> is used for input fields that should contain an e-
mail address.
Depending on browser support, the e-mail address can be automatically

validated when submitted.
Some smartphones recognize the email type, and adds ".com" to the keyboard
to match email input.
Example
<form>
E-mail:
<input type="email" name="email">
</form>
2.9 HTTP-GET AND 2.10 HTTP-POST
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:
Example
<form action="/action_page.php" method="get">
or:
Example
<form action="/action_page.php" method="post">
When to Use GET?

The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the
page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Notes on GET:
• Appends form-data into the URL in name/value pairs

• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user want to bookmark the result
• GET is better for non-secure data, like query strings in Google
When to Use POST?

Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page address
field.
Notes on POST:
• POST has no size limitations, and can be used to send large amounts of
data.
• Form submissions with POST cannot be bookmarked
2.11 HTML LAYOUTS
HTML Layout Elements

Websites often display content in multiple columns (like a magazine or
newspaper).
HTML5 offers new semantic elements that define the different parts of a web
page:
• <header> - Defines a header for a document

or a section
• <nav> - Defines a container for navigation
links
• <section> - Defines a section in a document
• <article> - Defines an independent self-
contained article
• <aside> - Defines content aside from the
content (like a sidebar)
• <footer> - Defines a footer for a document
or a section
• <details> - Defines additional details
• <summary> - Defines a heading for the
<details> element
HTML Layout Techniques

There are four different ways to create multicolumn layouts. Each way has its
pros and cons:
• HTML tables
• CSS float property
• CSS framework
• CSS flexbox
2.12 HTML FRAMES

The Basic Idea Behind Frames
The basic concept behind frames is pretty simple:
• Use the frameset element in place of the body element in an HTML document.
• Use the frame element to create frames for the content of the web page.
• Use the src attribute to identify the resource that should be loaded inside each frame.
• Create a different file with the contents for each frame.
Let’s look at a few examples of how this works. First we need a few HTML documents
to work with. Let’s create four different HTML documents. Here’s what the first will
contain:
<!DOCTYPE html> <html> <body> <h1>Frame 1</h1>

<p>Contents of Frame 1</p> </body> </html>
The first document we’ll save as frame_1.html. The other three documents will have
similar contents and follow the same naming sequence.
Creating Vertical Columns

To create a set of four vertical columns, we need to use the frameset element with
the cols attribute. The cols attribute is used to define the number and size of columns
the frameset will contain. In our case, we have four files to display, so we need four
frames. To create four frames we need to assign four comma-separated values to
the cols attribute. To make things simple we’re going to assign the value * to each of
the frames, this will cause them to be automatically sized to fill the available space.
Here’s what our HTML markup looks like.
<!DOCTYPE html> <html> <frameset cols="*,*,*,*"> <frame

src="../file_path/frame_1.html"> <frame src="frame_2.html">
<frame src="frame_3.html"> <frame src="frame_4.html">
</frameset> </html>
Creating Horizontal Rows

Rows of frames can be created by using the rows attribute rather than
the cols attribute as shown in the HTML below.
<!DOCTYPE html> <html> <frameset rows="*,*,*,*"> <frame

src="frame_1.html"> <frame src="frame_2.html"> <frame
src="frame_3.html"> <frame src="frame_4.html"> </frameset>
</html>
2.13 CONTENT VS PRESENTATION

: Avoid inline CSS, use internal CSS and External CSS.
2.14 HTML <meta> Tag
Example
Describe metadata within an HTML document:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
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.
2.15 New Elements in HTML5
2.15 (A). New Semantic/Structural Elements

HTML5 offers new elements for better document structure:
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different

direction from other text outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content

<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby

annotations
<rt> Defines an explanation/pronunciation of characters (for East

Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
2.15 (B). New Form Elements

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
2.15 (c). New Input Types

New Input Types New Input Attributes
• color • autocomplete
• date • autofocus
• datetime • form
• datetime-local • formaction
• email • formenctype
• month • formmethod
• number • formnovalidate
• range • formtarget
• search • height and width
• tel • list
• time • min and max
• url • multiple
• week • pattern (regexp)
• placeholder
• required
• step
2.15 (d).HTML5 - New Attribute Syntax

HTML5 allows four different syntaxes for attributes.
This example demonstrates the different syntaxes used in an <input> tag:
Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double- <input type="text" value="John Doe">

quoted
Single- <input type="text" value='John Doe'>

quoted
2.15 (e). HTML5 Graphics

Tag Description
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics
2.15 (f). New Media Elements

Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements (<video> and
<audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie
2.16 Example of New Elements in HTML5

(A).HTML5 Semantic Elements
HTML5 <section> Element
The <section> element defines a section in a document.
According to W3C's HTML5 documentation: "A section is a thematic grouping of

content, typically with a heading."
A home page could normally be split into sections for introduction, content, and
contact information.
Example
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
HTML5 <article> Element

The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it
independently from the rest of the web site.
Examples of where an <article> element can be used:
• Forum post
• Blog post
• Newspaper article
Example
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML5 <header> Element

The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
The following example defines a header for an article:
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML5 <footer> Element

The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information,

links to terms of use, contact information, etc.
You may have several <footer> elements in one document.
Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
HTML5 <nav> Element

The <nav> element defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major block of navigation links.
Example
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML5 <aside> Element

The <aside> element defines some content aside from the content it is placed
in (like a sidebar).
The <aside> content should be related to the surrounding content.
Example
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
HTML5 <figure> and <figcaption> Elements

The purpose of a figure caption is to add a visual explanation to an image.
In HTML5, an image and a caption can be grouped together in

a <figure> element:
Example
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
The <img> element defines the image, the <figcaption> element defines the
caption.
HTML5 Canvas
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a
red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor
text.
What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
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.
Canvas Examples
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:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a script), and

a width and height attribute to define the size of the canvas. To add a border,
use the style attribute.
Here is an example of a basic, empty canvas:
Example
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
</canvas>
Example
Draw a Line
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Draw a Circle
<script>
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Draw a Text
<script>
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Stroke Text
<script>
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
HTML5 SVG
What is SVG?
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation
• The HTML <svg> Element

• The HTML <svg> element is a container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text, and
graphic images.
Example
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" />
</svg>
</body>
</html>
SVG Star
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG
DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG

object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is

forgotten by the browser. If its position should be changed, the entire scene
needs to be redrawn, including any objects that might have been covered by
the graphic.
Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:
Canvas SVG
• Resolution dependent • Resolution independent

• No support for event • Support for event handlers
handlers • Best suited for applications with large
• Poor text rendering rendering areas (Google Maps)
capabilities • Slow rendering if complex (anything
• You can save the resulting that uses the DOM a lot will be slow)
image as .png or .jpg • Not suited for game applications
• Well suited for graphic-
intensive games
HTML5 Form Elements

HTML5 added the following form elements:
• <datalist>
• <output>
• HTML5 <datalist> Element

• The <datalist> element specifies a list of pre-defined options for
an <input> element.
• Users will see a drop-down list of the pre-defined options as they input
data.
• The list attribute of the <input> element, must refer to the id attribute
of the <datalist> element.
Example
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed
by a script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
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.
HTML5 Video
The HTML <video> Element
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML5 Audio
Audio on the Web
Before HTML5, audio files could only be played in a browser with a plug-in (like
flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web
page.
The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:
Example
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
HTML YouTube Videos

YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a
video.
You can use this id, and refer to your video in the HTML code.
Playing a YouTube Video in HTML

To play your video on a web page, do the following:
• Upload the video to YouTube

• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL (see below)
Example - Using iFrame (recommended)

<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345"

src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</body>
</html>

Web Design Programming Chapter 2

Uploaded by

Web Design Programming Chapter 2

Uploaded by

WEB DESIGN PROGRAMMING : CHAPTER 2

(Static Webpage Development:HTML) ----JITENDRA SINGH

2.1 INTRODUCTION TO STATIC WEB PAGE DEVELOPMENT

• Provide improved security over dynamic websites[1]

• Dynamic functionality has to be added separately

2.2 WHAT IS HTML FILE

• HTML describes the structure of Web pages using markup

A Simple HTML Document

<h1>My First Heading</h1>

<tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p> and </p>

HTML Page Structure

<p>This is another paragraph.</p>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

2.3 HTML ELEMENTS

<tagname>Content goes here...</tagname>

<p>My first paragraph.</p>

<h1>My First Heading</h1>

The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

The <h1> element defines a heading.

The <p> element defines a paragraph.

2.4 HTML ATTRIBUTES

The href Attribute

The src Attribute

The filename of the image source is specified in the src attribute:

The width and height Attributes

The alt Attribute

The style Attribute

The title Attribute

You can click on a link and jump to another document.

In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

he href attribute specifies the destination address

HTML Links - Image as Link

2.6 HTML TABLES

The <td> elements are the data containers of the table.

HTML Table - Adding a Border

A border is set using the CSS border property:

2.7 HTML IMAGES

Image Size - Width and Height

Images in Another Folder

However, it is common to store images in a sub-folder. You must then include

Images on Another Server

<p><img src="smiley.gif" alt="Smiley

2.8 HTML FORMS

HTML Form Example

The <form> Element

An HTML form contains form elements.

The <input> Element

The <input> element can be displayed in several ways, depending on

Here are some examples:

<input type="text"> Defines a one-line text input field

<input type="submit"> Defines a submit button (for submitting the form)

Note: The default width of a text field is 20 characters.

Radio Button Input

Radio buttons let a user select ONE of a limited number of choices:

The Submit Button

The form-handler is specified in the form's action attribute:

The Action Attribute

The Target Attribute

The <select> Element

The <select> element defines a drop-down list:

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

The <textarea> Element

The cols attribute specifies the visible width of a text area.

The <button> Element

HTML <fieldset> Tag

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

<!DOCTYPE html> <html> <frameset cols=",,,"> <frame

<!DOCTYPE html> <html> <frameset rows=",,,"> <frame