Unit-1 Working with HTML5 and CSS
1.1 Concepts of CSS:
What is CSS?
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 style sheets 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!
CSS Saves a Lot of Work!
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
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.
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
<style>
p{
color: red;
text-align: center;
}
</style>
Example Explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
1.1.1 Adding CSS (Inline, Internal, External)
1. 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:
Example:
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
2. 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:
Example:
<html>
<head>
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. 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:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
1.1.1 HTML Links and attributes
HTML Links - Hyperlinks
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.
Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
</body>
</html>
HTML Links - The target attribute
By default, the linked page will be displayed in the current browser window. To change
this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
1. _self - Default. Opens the document in the same window/tab as it was clicked
2. _blank - Opens the document in a new window or tab
3. _parent - Opens the document in the parent frame
4. _top - Opens the document in the full body of the window
Example
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
</body>
</html>
1.1.2 Absolute URL and Relative URL in <href>
Absolute URL
An absolute link is a hyperlink containing a full URL, which includes all the information
needed to find a particular site, page or document or other addressable item on the Internet. This
information includes: The protocol to use, such as HTTP (Hypertext Transfer Protocol) or FTP
(File Transfer Protocol).
Relative URL
Relative hyperlinks are addresses that are relative to the current domain or location. They
only contain the name of the target page prefixed with any necessary folder moves (for example,
default. html)
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
Example
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="images_bs.html">HTML Images</a></p>
<p><a href="button.html">CSS Tutorial</a></p>
</body>
</html>
1.1.3 <img> tag and its attributes
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image, if the image for some reason cannot be
displayed
Note: Also, always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see
example below).
Example
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid
black">
</body>
</html>
1.2 HTML Forms:
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
<form>
.
form elements
.
</form>
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
1.2.1 Form Elements and their attributes:
1.2.1.1 Form (action. Method, novalidate, autocomplete, target)
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit
button.
In the example below, the form data is sent to a file called "home.html". This file contains a
server-side script that handles the form data:
<html>
<body>
<h2>HTML Forms</h2>
<form action="home.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"home.html".</p>
</body>
</html>
The Method Attribute
The method attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
The default HTTP method when submitting form data is GET.
Example
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>
<form action="home.html" target="_blank" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
<p>After you submit, notice that the form values is visible in the address bar of the new browser
tab.</p>
</body>
</html>
novalidate attribute:
The novalidate attribute is a Boolean attribute. When present, it specifies that the form-data
(input) should not be validated when submitted.
Example:
<html>
<body>
<h1>The form novalidate attribute</h1>
<form action="home.html" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Safari 10
(or earlier).</p>
</body>
</html>
autocomplete attribute
The autocomplete attribute specifies whether or not an input field should have autocomplete
enabled. Autocomplete allows the browser to predict the value. When a user starts to type in a
field, the browser should display options to fill in the field, based on earlier typed values.
Note: The autocomplete attribute works with the following input types: text, search, url, tel,
email, password, datepickers, range, and color.
Example
<html>
<body>
<h1>The autocomplete attribute</h1>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>
<form action="home.html" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit">
</form>
</body>
</html>
target attribute
The target attribute specifies a name or a keyword that indicates where to display the
response that is received after submitting the form.
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
The target attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or
inline frame).
Example
<html>
<body>
<h1>The form target attribute</h1>
<form action="home.html" method="get" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Attribute Values
Description
Value
_blank The response is displayed in a new window or tab
_self The response is displayed in the same frame (this is default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
1.2.1.2 label, input (text, radio, button, Checkboxes, submit/reset)
label
The <label> tag defines a label for several elements: <input>, <meter>, <progress>, <select>,
<textarea>, etc.
Example
<html>
<body>
<h1>The label element</h1>
<p>Click on one of the text labels to toggle the related radio button:</p>
<form action="home.html">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
input
The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
The different input types are as follows:
<input type="text"> (default value)
<input type="radio">
<input type="button">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="range">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">
Note: Always use the <label> tag to define labels for <input type="text">, <input
type="checkbox">, <input type="radio">, <input type="file">, and <input
type="password">.
Example
<html>
<body>
<h1>The input element</h1>
<form action="home.html">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "home.html".</p>
</body>
</html>
1.2.1.3 select (id, name, <option>)
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit
the name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select> element define the available options in the drop-down list.
Example
<html>
<body>
<h1>The optgroup element</h1>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form action="home.html">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
1.2.1.4 textarea
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font
(usually Courier).
The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).
The name attribute is needed to reference the form data after the form is submitted (if you omit
the name attribute, no data from the text area will be submitted).
The id attribute is needed to associate the text area with a label.
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
Example
<html>
<body>
<h1>The textarea element</h1>
<form action="home.html">
<p><label for="w3review">Review of W3Schools:</label></p>
<textarea id="w3review" name="w3review" rows="4" cols="50">At w3schools.com you will
learn how to make a website. They offer free tutorials in all web development
technologies.</textarea>
<br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "home.html".</p>
</body>
</html>
1.2.1.5 button
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.).
That is not possible with a button created with the <input> element!
Note: Always specify the type attribute for a <button> element, to tell browsers what type of
button it is.
Example
<html>
<body>
<h1>The button Element</h1>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>
1.2.1.6 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).
Example
<html>
<body>
<h1>The datalist element</h1>
<form action="home.html" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
</body>
</html>
1.2.2 Media: Video, Audio
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and
.avi.
HTML Video
The HTML <video> element is used to show a video on a web page.
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.
<source> Defines multiple media resources for media elements, such as <video> and <audio>
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
Add muted after autoplay to let your video start playing automatically (but muted):
Example
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
Unit-1 Working with HTML5 and CSS
</video>
</body>
</html>
HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
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.
Example
<html>
<body>
<audio controls autoplay>
<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>
Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali
