Scribd
Upload
5 views

web tech l4

Uploaded by

gracious pezoh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

web tech l4

Uploaded by

gracious pezoh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Multimedia and embedding

We've looked at a lot of text so far in this course, but the web would be really boring only using text.
Let's start looking at how to make the web come alive with more interesting content! This module
explores how to use HTML to include multimedia in your web pages, including the different ways that
images can be included, and how to embed video, audio, and even entire webpages.

Images in HTML

There are other types of multimedia to consider, but it is logical to start with the humble <img> element
used to embed a simple image in a webpage. In this article we'll look at how to use it in more depth,
including basics, annotating it with captions using <figure>, and how it relates to CSS background
images.

Video and audio content

Next, we'll look at how to use the HTML <video> and <audio> elements to embed video and audio on
our pages, including basics, providing access to different file formats to different browsers, adding
captions and subtitles, and how to add fallbacks for older browsers.

Division
Example

A <div> section in a document that is styled with CSS:

<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>

Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated
with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after the <div> element

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes,
radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

The <label> Element

Notice the use of the <label> element in the example above.


The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the
label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the
radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together

HTML Form Elements

❮ PreviousNext ❯

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

 <input>

 <label>

 <select>

 <textarea>

 <button>

 <fieldset>

 <legend>

 <datalist>

 <output>

 <option>

 <optgroup>

The <input> Element

One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.
Example

<label for="fname">First name:</label>


<input type="text" id="fname" name="fname">

The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the
label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the
radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.

The <select> Element

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

Example

<label for="cars">Choose a car:</label>


<select id="cars" 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> element 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>

C)

Inline CSS
Style rules can be applied to individual HTML elements using inline CSS. Inlining CSS is the process of
embedding CSS into an HTML file rather than using an external CSS file. Because inline CSS only allows us
to apply a single style to one HTML element, it's only useful for establishing unique properties. Inline CSS
is advantageous since it decreases the number of files that the browser must download before the web
page can be shown. The browser loads an HTML file first, then downloads the CSS file when using
external CSS. We only need to download one HTML file instead of two using inline CSS, which speeds up
the process.

The inline styles will only affect the HTML element to which the style attribute with CSS-property values
is applied. The first paragraph in the example below will be styled in red with a 20px font size. The
properties apply just to the first line of the code, not the full code.

Example 1:

<body>

<p style=”color:red; font-size: 20px;”>This is our first HTML code.</p>

<p>This is our second HTML code</p>

</body>

Internal CSS

Internal CSS is one of the most popular CSS forms for updating, customizing, and modifying a single web
page's unique styles. You can use the internal CSS by integrating the <style> element in the <head>
section of a HTML web page.

Internal CSS can be used to style a single web page, but not multiple web pages, and we can style
numerous web pages with the same code.

Example 1:

<!DOCTYPE html>

<html>

<head>

<style>

body {
background-color: grey;

h1 {

color: red;

margin-left: 75px;

</style>

External CSS

External CSS is one of the most often used CSS forms for updating, styling, and adjusting the different
styles in a large number of HTML web pages at the same time. There are two ways to include an external
style sheet in an HTML document. One method is to use the <link> tag in the HTML document head.
Another option is to use a combination of external CSS functions and integrated CSS.

One of the distinguishing characteristics of external CSS is that it can be written in any text editor, but it
must always be saved with the.css extension and must not contain any HTML elements.

We use the external style sheet when we need to make changes to multiple pages. It's ideal for this
circumstance because it allows us to change the appearance of the entire website with just one file
change. It comes in handy while working on large projects or several HTML web pages.

We must define the filename of the CSS sheet with the "mystyle.css" extension within the <link>
element within the <head> section of the HTML page to use external CSS:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href=mystyle.css>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
</body>

</html>

Use of Different Types of CSS

Inline CSS is advantageous since it decreases the number of files that the browser must download
before the web page can be shown. The browser loads an HTML file first, then downloads the CSS file
when using external CSS. We only need to download one HTML file instead of two using inline CSS,
which speeds up the process.

Here are a few more advantages of using inline CSS:

 Lower the HTTP Request: The main advantage of utilizing Inline CSS is that it requires fewer
HTTP requests, which implies that the page loads faster than when using External CSS.

 For Testing Purposes: When working on new projects, many web designers choose to use Inline
CSS because it is easier to scroll up in the source rather than changing the source file. Some
people use it to debug their websites if they run into a problem that can’t be easily fixed. This
can be used in conjunction with CSS's important rule.

HTML Markup. To the end user, it's pretty much invisible. Usually we take it for granted or forget that
it's there, doing its thing behind the scenes. It's easy forget that there is so much more to a web page
than just visible content. What we see in our browsers is only a part of what the computer sees.

So, if we don't always see what HTML tags do, what are they doing?

Tags -- like <title>, <h>, <p>, and others -- but all have a common purpose: they are containers that
define the function and hierarchy of their contents. Some of these tags have attributes. Those attributes
can further define the role, relationship, or unique identity of that particular element.

HTML Markup tells browsers what a container is. A title? A paragraph? Emphasised text? A link? CSS
markup (or rules) tells the browser how to display each of those containers.

When a web page has logical HTML markup that follows the flow of the document it displays, you can
remove all the CSS (styling) and it would still remain readable. On other sites that follow a less logical,
less organized markup, entire pages could end up terribly messy, making the site difficult to navigate.

RULES AND STYLE SHEETs

There are two ways to create CSSs. You can either use a normal text editor and write the style sheets
"by hand," or you can use a dedicated tool - for example a Web page design application - which supports
CSS. The dedicated tools allow you to create style sheets without learning the syntax of the CSS
language. However, in many cases the designer will want to tweak the style sheet by hand afterwards,
so we recommend that you learn to write and edit CSSs by hand. Let's get started!
H1 { color: green }

What you see above is a simple CSS rule that contains one rule. A rule is a statement about one stylistic
aspect of one or more elements. A style sheet is a set of one or more rules that apply to an HTML
document. The rule above sets the color of all first-level headings (h1). Let's take a quick look at what
the visual result of the rule could be:

Anatomy of a rule

A rule consists of two parts:

Selector - the part before the left curly brace

Declaration - the part within the curly braces

[image]

The selector is the link between the HTML document and the style. It specifies what elements are
affected by the declaration. The declaration is that part of the rule that sets forth what the effect will be.
In the example above, the selector is h1 and the declaration is "color: green." Hence, all h1 elements will
be affected by the declaration, that is, they will be turned green. (The color property just affects the
foreground text color, there are other properties for background, border, etc.)

The above selector is based on the type of the element: it selects all elements of type "h1." This kind of
selector is called type selector. Any HTML element type can be used as a type selector. Type selectors
are the simplest kind of selectors. We discuss other kinds of selectors in See CSS selectors. , "CSS
selectors.

Anatomy of a declaration

A declaration has two parts separated by a colon:

Property - that part before the colon

Value - that part after the colon

[image]
The property is a quality or characteristic that something possesses. In the previous example, it is color.
CSS2 (see separate box) defines around 120 properties and we can assign values to all of them.

Grouping selectors and rules

In designing CSS, brevity was a goal. We figured that if we could reduce the size of style sheets, we could
enable designers to write and edit style sheets "by hand." Also, short style sheets load faster than longer
ones. CSS therefore includes several mechanisms to shorten style sheets by way of grouping selectors
and declarations.

For example, consider these three rules:

H1 { font-weight: bold }

H2 { font-weight: bold }

H3 { font-weight: bold }

All three rules have exactly the same declaration - they set the font to be bold. (This is done using the
font-weight property, which we discuss in See Fonts. .) Since all three declarations are identical, we can
group the selectors into a comma-separated list and only list the declaration once, like this:

H1, H2, H3 { font-style: bold }

This rule will produce the same result as the first three.

A selector may have more than one declaration. For example, we could write a style sheet with these
two rules:

H1 { color: green }

H1 { text-align: center }

All declarations must be contained within the pair of curly braces. A semicolon separates the
declarations and may - but doesn't have to - also appear at the end of the last declaration. Also, to make
your code easier to read, we suggest you place each declaration on its own line, as we did here.
(Browsers won't care, they'll just ignore all the extra whitespace and line breaks.)

Now you have the basics of how to create CSS rules and style sheets. However, you're not done yet. In
order for the style sheet to have any effect you have to "glue" your style sheet to your HTML document.

Adding style to HTML

Note. The sample default style sheet for HTML 4 that is included in [CSS2] expresses generally accepted
default style information for each element. Authors and implementors alike might find this a useful
resource.

HTML documents may contain style sheet rules directly in them or they may import style sheets.

Any style sheet language may be used with HTML. A simple style sheet language may suffice for the
needs of most users, but other languages may be more suited to highly specialized needs. This
specification uses the style language "Cascading Style Sheets" ([CSS1]), abbreviated CSS, for examples.

The syntax of style data depends on the style sheet language.

14.2.1 Setting the default style sheet language

Authors must specify the style sheet language of style information associated with an HTML document.

Authors should use the META element to set the default style sheet language for a document. For
example, to set the default to CSS, authors should put the following declaration in the HEAD of their
documents:

<META http-equiv="Content-Style-Type" content="text/css">

The default style sheet language may also be set with HTTP headers. The above META declaration is
equivalent to the HTTP header:

Content-Style-Type: text/css

User agents should determine the default style sheet language for a document according to the
following steps (highest to lowest priority):

1. If any META declarations specify the "Content-Style-Type", the last one in the character stream
determines the default style sheet language.

2. Otherwise, if any HTTP headers specify the "Content-Style-Type", the last one in the character
stream determines the default style sheet language.

3. Otherwise, the default style sheet language is "text/css".


Documents that include elements that set the style attribute but which don't define a default style sheet
language are incorrect. Authoring tools should generate default style sheet language information
(typically a META declaration) so that user agents do not have to rely on a default of "text/css".

Inline style information

Attribute definitions

style = style [CN]

This attribute specifies style information for the current element.

The syntax of the value of the style attribute is determined by the default style sheet language. For
example, for [[CSS2]] inline style, use the declaration block syntax described in section 4.1.8 (without
curly brace delimiters).

This CSS example sets color and font size information for the text in a specific paragraph.

<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?

In CSS, property declarations have the form "name : value" and are separated by a semi-colon.

To specify style information for more than one element, authors should use the STYLE element. For
optimal flexibility, authors should define styles in external style sheet

External style sheets

Authors may separate style sheets from HTML documents. This offers several benefits:

 Authors and Web site managers may share style sheets across a number of documents (and
sites).

 Authors may change the style sheet without requiring modifications to the document.

 User agents may load style sheets selectively (based on media descriptions).

14.3.1 Preferred and alternate style sheets

HTML allows authors to associate any number of external style sheets with a document. The style sheet
language defines how multiple external style sheets interact (for example, the CSS "cascade" rules).
Authors may specify a number of mutually exclusive style sheets called alternate style sheets. Users may
select their favorite among these depending on their preferences. For instance, an author may specify
one style sheet designed for small screens and another for users with weak vision (e.g., large fonts).
User agents should allow users to select from alternate style sheets.

The author may specify that one of the alternates is a preferred style sheet. User agents should apply
the author's preferred style sheet unless the user has selected a different alternate.

Authors may group several alternate style sheets (including the author's preferred style sheets) under a
single style name. When a user selects a named style, the user agent must apply all style sheets with
that name. User agents must not apply alternate style sheets with a different style name. The section
on specifying external style sheets explains how to name a group of style sheets.

Authors may also specify persistent style sheets that user agents must apply in addition to any alternate
style sheet.

User agents must respect media descriptors when applying any style sheet.

User agents should also allow users to disable the author's style sheets entirely, in which case the user
agent must not apply any persistent or alternate style sheets.

Linking to style sheets with HTTP headers

This section only applies to user agents conforming to versions of HTTP that define a Link header field.
Note that HTTP 1.1 as defined by [RFC2616] does not include a Link header field (refer to section 19.6.3).

Web server managers may find it convenient to configure a server so that a style sheet will be applied to
a group of pages. The HTTP Link header has the same effect as a LINK element with the same attributes
and values. Multiple Link headers correspond to multiple LINK elements occurring in the same order. For
instance,

Link: <http://www.acme.com/corporate.css>; REL=stylesheet

corresponds to:

<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">

It is possible to specify several alternate styles using multiple Link headers, and then use the rel attribute
to determine the default style.

In the following example, "compact" is applied by default since it omits the "alternate" keyword for
the rel attribute.

Link: <compact.css>; rel="stylesheet"; title="compact"

Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"


This should also work when HTML documents are sent by email. Some email agents can alter the
ordering of [RFC822] headers. To protect against this affecting the cascading order for style sheets
specified by Link headers, authors can use header concatenation to merge several instances of the same
header field. The quote marks are only needed when the attribute values include whitespace. Use SGML
entities to reference characters that are otherwise not permitted within HTTP or email headers, or that
are likely to be affected by transit through gateways.

e)

Cascading style sheets

Cascading style sheet languages such as CSS allow style information from several sources to be blended
together. However, not all style sheet languages support cascading. To define a cascade, authors specify
a sequence of LINK and/or STYLE elements. The style information is cascaded in the order the elements
appear in the HEAD.

Note. This specification does not specify how style sheets from different style languages cascade.
Authors should avoid mixing style sheet languages.

In the following example, we specify two alternate style sheets named "compact". If the user selects the
"compact" style, the user agent must apply both external style sheets, as well as the persistent
"common.css" style sheet. If the user selects the "big print" style, only the alternate style sheet
"bigprint.css" and the persistent "common.css" will be applied.

<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">

<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">

<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">

<LINK rel="stylesheet" href="common.css" type="text/css">

Here is a cascade example that involves both the LINK and STYLE elements.

<LINK rel="stylesheet" href="corporate.css" type="text/css">

<LINK rel="stylesheet" href="techreport.css" type="text/css">

<STYLE type="text/css">

p.special { color: rgb(230, 100, 180) }

</STYLE>

14.4.1 Media-dependent cascades


A cascade may include style sheets applicable to different media. Both LINK and STYLE may be used with
the media attribute. The user agent is then responsible for filtering out those style sheets that do not
apply to the current medium.

In the following example, we define a cascade where the "corporate" style sheet is provided in several
versions: one suited to printing, one for screen use and one for speech-based browsers (useful, say,
when reading email in the car). The "techreport" stylesheet applies to all media. The color rule defined
by the STYLE element is used for print and screen but not for aural rendering.

Inheritance and cascading

When the user agent wants to render a document, it needs to find values for style properties, e.g. the
font family, font style, size, line height, text color and so on. The exact mechanism depends on the style
sheet language, but the following description is generally applicable:

The cascading mechanism is used when a number of style rules all apply directly to an element. The
mechanism allows the user agent to sort the rules by specificity, to determine which rule to apply. If no
rule can be found, the next step depends on whether the style property can be inherited or not. Not all
properties can be inherited. For these properties the style sheet language provides default values for
use when there are no explicit rules for a particular element.

If the property can be inherited, the user agent examines the immediately enclosing element to see if a
rule applies to that. This process continues until an applicable rule is found. This mechanism allows style
sheets to be specified compactly. For instance, authors may specify the font family for all elements
within the BODY by a single rule that applies to the BODY element.

You might also like