Unit-2

• HTML is referred to as the primary language of the World Wide Web.
HTML has many updates

over time, and the latest HTML version is HTML5.
The audio Element:
• The <audio> tag is used to embed sound content in a document, such as music or other audio
streams.
• The <audio> tag contains one or more <source> tags with different audio sources. The
browser will choose the first source it supports.
• The text between the <audio> and </audio> tags will only be displayed in browsers that do
not support the <audio> element.
• There are three supported audio formats in HTML: MP3, WAV, and OGG.
• The only commonly used attribute of the audio element is controls, which we always set to
"controls". This attribute, when present, creates a display of a start/stop button, a clock, a
slider of the progress of the play, the total time of the file, and a slider for volume control
General Syntax:
<audio attributes>
<source src = "filename1">
...
Your browser does not support the audio element
</audio>
<!DOCTYPE html>
<html>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="horse.ogg">
<source src="horse.mp3">
Your browser does not support the audio element.
</audio>
</body>
https://www.w3schools.com/tags/tag_audio.asp
The video Element:
• Prior to HTML5, there was no standard way of including video clips in a Web document. The
most common approach to video on the Web was the use of the Flash plug-in.
• The <video> tag is used to embed video content in a document, such as a movie clip or other
video streams.
• The <video> tag contains one or more <source> tags with different video sources. The browser
will choose the first source it supports.
• The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
• There are three supported video formats in HTML: MP4, WebM, and OGG.
General Syntax:
<video attributes>
...
Your browser does not support the video element
</video>
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<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>
Playing YouTube Video:
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=S74VxPWPh7k">
</iframe>
The Canvas Element:
• The HTML canvas element is used to draw graphics on the web page.
• The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.
• The <canvas> element is only a container for graphics, you must need a scripting language to
draw the graphics.
• There are several methods in canvas to draw paths, boxes, circles, text and add images.
• A canvas is a rectangle like area on an HTML page. It is specified with canvas element.
• By default, the <canvas> element has no border and no content, it is like a container.
• 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.
<canvas id="myCanvas" width="300" height="100" style="border:2px solid;">
Your browser does not support the HTML5 canvas tag.
</canvas>
• https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_empty
New Form Elements:
• HTML5 introduces a number of new form elements. Some of them are <datalist>, <output>,
<progress> and <meter>.
<datalist>
• The <datalist> tag specifies a list of pre-defined options for an <input> element.
• The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a
drop-down list of pre-defined options as they input data.
• The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds
them together).
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<output>
• The <output> element is used to display the result of a calculation. You can add the for
attribute to specify the relationship between the result of the calculation and the elements
used in the calculation.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_output
• The <progress> tag represents the completion progress of a task.
• Use the <progress> tag in conjunction with JavaScript to display the progress of a task.
• <label for="file">Downloading progress:</label>

<progress id="file" value="32" max="100"> 32% </progress>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_progress
• The <meter> tag defines a scalar measurement within a known range, or a fractional value.
This is also known as a gauge. Example: Disk usage
• The <meter> tag isn’t used to indicate progress.
• https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_meter
New Input Type Attribute Values:
https://www.c-sharpcorner.com/article/list-of-new-input-types-in-html-5/
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_date
Cascading Style Sheets:
• HTML is concerned primarily with content rather than the details of how that content is
presented by browsers. Some tags—for example, <style>
• However, these presentation specifications can be more precisely and more consistently
described with style sheets.
• Furthermore, many of the tags and attributes that can be used for describing presentation
details have been deprecated in favor of style sheets.
• Most HTML tags have associated properties that store presentation information for browsers.
• Browsers use default values for these properties when the document does not specify values.
For example, the <h2> tag has the font-size property, for which a browser would have the
default value of a particular size.
• A document could specify that the font-size property for <h2> be set to a larger size, which
would override the default value.
• The new value could apply to one occurrence of an <h2> element, some subset of the
occurrences, or all such occurrences in the document, depending on how the property value is
set.
• A style sheet is a syntactic mechanism for specifying style information.
• The first stylesheet specification for use in HTML documents, Cascading Style Sheets (CSS1),
was developed in 1996 by the W3C.
• In mid-1998, the second standard, CSS2, was released. CSS2 added many properties and
property values to CSS1.
• It also extended presentation control to media other than Web browsers, such as printers.
• As a result of the incomplete implementation of (and perhaps a lack of interest in) parts of
CSS2 by browser implementors, W3C developed a new standard, CSS2.1, which reflected the
level of acceptance of CSS2.
• Internet Explorer 8 and later ( IE8+), Chrome 5 and later (C5+), and Firefox 3 and later
( FX3+) fully support CSS2.1.
• CSS3 has been in development since the late 1990s. Current versions of browsers already have
implemented some parts of CSS3.
• CSS style sheets are called cascading style sheets because they can be defined at three different
levels to specify the style of a document.
• Lower-level style sheets can override higher level style sheets, so the style of the content of an
element is determined, in effect, through a cascade of style-sheet applications.
Levels of Style Sheets:
• The three levels of style sheets, in order from lowest level to highest level, are inline,
document level, and external.
• Inline style sheets apply to the content of a single HTML element, document-level style sheets
apply to the whole body of a document, and external style sheets can apply to the bodies of any
number of documents.
• Inline style sheets have precedence over document style sheets, which have precedence over
external style sheets.
• For example, if an external style sheet specifies a value for a particular property of a particular
element, that value is used until a different value is specified in either a document style sheet
or an inline style sheet.
• Likewise, document style sheet property values can be overridden by different property values
in an inline style sheet.
• In effect, the properties of a specific element are those that result from a merge of all
applicable style sheets.
• A particular browser may not be capable of using the property values specified in a style sheet.
For example, if the value of the font-size property of a paragraph is set to a particular size, but
the browser cannot display the particular font being used in that size, the browser obviously
cannot fulfill the property specification. In this case, the browser either would substitute an
alternative value or would simply ignore the given font-size value and use its default font size.
• Inline style specifications appear within the opening tag and apply only to the content of that
element.
• Inline style specifications appear within the opening tag and apply only to the content of that
element.
• This fine-grain application of style defeats one of the primary advantages of style sheets—that
of imposing a uniform style on the elements of at least one whole document.
• Another disadvantage of inline style sheets is that they result in style information, which is
expressed in a language distinct from HTML markup, being embedded in various places in
documents.
• It is better to keep style specifications separate from HTML markup
• Document-level style specifications appear in the document head section and apply to the
entire body of the document.
• This is obviously an effective way to impose a uniform style on the presentation of all of the
content of a single document.
• In many cases, it is desirable to have a style sheet apply to more than one document.
• That is the purpose of external style sheets, which are not part of any of the documents to
which they apply. They are stored separately and are referenced in all documents that use them.
• Another advantage of external style sheets is that their use cleanly separates CSS from HTML.
• The browser fetches external style sheets just as it fetches HTML documents. The <link> tag is
used to specify external style sheets.
• Within <link>, the rel attribute is used to specify the relationship of the linked-to document to
the document in which the link appears. The href attribute of <link> is used to specify the URL
of the style sheet document.
<link rel = "stylesheet" type = "text/css"
href = "http://www.cs.usc.edu/styles/wbook.css" />
• The link to an external style sheet must appear in the head of the document. If the external
style sheet resides on the Web server computer, only its path address must be given as the value
of href
• CSS is the language we use to style an HTML document.
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files.
Why Use CSS?
• CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
CSS Solved a Big Problem
• HTML was NEVER intended to contain tags for formatting a web page!
• HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and color
information were added to every single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• CSS removed the style formatting from the HTML page!
• The style definitions are normally saved in external .css files.
• With an external stylesheet file, you can change the look of an entire website by changing just
one file!
CSS Syntax:
• A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
p {
color: red;
text-align: center;
}
CSS Properties:
https://www.w3schools.com/cssref/index.php
Types of CSS:
• Inline CSS
• Internal or Embedded CSS
• External CSS
Types of CSS:
• Inline CSS
• Internal or Embedded CSS
• External CSS
CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
Inline CSS:
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to blue, and the text color of the
<p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS:
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
• The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p>
elements to red. In addition, the page will be displayed with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
External CSS:
• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of each HTML page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
• With an external style sheet, you can change the look of an entire web site, by changing one
file!
• Inline CSS: Inline CSS contains the CSS property in the body section attached to the element
is known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute.
• Inline CSS, adding CSS rules to HTML elements is time-consuming and messes up the HTML
structure.
• It styles multiple elements at the same time which can affect the page size and download time
of the page.
• Internal or Embedded CSS: This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in the head section i.e. the CSS is
embedded within the <style> tag inside head section of the HTML file.
• Adding code in the HTML document will reduce the page size and loading time of the
webpage.
• External CSS: External CSS contains separate CSS files that contain only style properties with
the help of tag attributes (For example class, id, heading, … etc). CSS property written in a
separate file with .css extension and should be linked to the HTML document using link tag. It
means that, for each element, style can be set only once and will be applied across web pages.
• Priorities of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed
by External CSS which has the least priority. Multiple style sheets can be defined on one page.
For an HTML tag, styles can be defined in multiple style types and follow the below order.
• As Inline has the highest priority, any styles that are defined in the internal and external style sheets are
overridden by Inline styles.
• Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
• External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet
then external style sheet rules are applied for the HTML tags.
• The pages cannot be delivered correctly before the external CSS is loaded.
• In External CSS, uploading many CSS files can increase the download time of a website.
CSS Styling:
https://www.w3schools.com/css/css_background.asp
https://www.w3schools.com/css/css_text.asp
https://www.javatpoint.com/css-font

Unit-2

Uploaded by

Copyright:

Available Formats

You might also like

Unit-2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit-2

Uploaded by

Copyright:

Available Formats

• HTML is referred to as the primary language of the World Wide Web.

HTML has many updates

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<h1>The video element</h1>

<video width="320" height="240" controls>

• <label for="file">Downloading progress:</label>

• The selector points to the HTML element you want to style.

CSS can be added to HTML documents in 3 ways:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

You might also like