Web UNIT-1

305-01: Web Designing – 1
UNIT – 1 : Working with HTML5 and CSS

1. What is CSS?
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It
provides an additional feature to HTML. It is generally used with HTML to change the
style of web pages and user interfaces. It can also be used with any kind of XML
documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces
for web applications and user interfaces for many mobile applications.
2. 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 Example
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
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
- 1-
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 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.
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:
p {
color: red;
text-align: center;
}
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
3. Explain different types of CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.
There are several different types of selectors in CSS.
- 2-
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector

The element selector selects the HTML element by name.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
- 3-
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>
3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with
a period character . (full stop symbol) followed by the class name.
Let's take an example with a class "center".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.
Let's see an example.
1. <!DOCTYPE html>
- 4-
2. <html>
3. <head>
4. <style>
5. p.center {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the
pages.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. * {
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>
5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.
- 5-
Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.
Let's see the CSS code without group selector.
1. h1 {
3. color: blue;
4. }
5. h2 {
7. color: blue;
8. }
9. p {
11. color: blue;
12. }
As you can see, you need to define CSS properties for all the elements. It can be
grouped in following ways:
1. h1,h2,p {
3. color: blue;
4. }
Let's see the full example of CSS group selector.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
- 6-
15. </body>
16. </html>
5) How to Add CSS:

CSS is added to HTML pages to format the document according to information in the
style sheet. There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
1. Inline CSS :
We can apply CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML document. This
method mitigates some advantages of style sheets so it is advised to use this
method sparingly.
If you want to use inline CSS, you should use the style attribute to the relevant tag.
Syntax:
1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Example:
1. <h2 style="color:red;margin-
left:40px;">Inline CSS is applied on this heading.</h2>
2. <p>This paragraph is not affected.</p>
Output:
Inline CSS is applied on this heading.

This paragraph is not affected.
Disadvantages of Inline CSS :

o You cannot use quotations within inline CSS. If you use quotations the browser will
interpret this as an end of your style value.
o These styles cannot be reused anywhere else.
o These styles are tough to be edited because they are not stored at a single place.
- 7-
o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
o Inline CSS does not provide browser cache advantages.
2. Internal CSS :
The internal style sheet is used to add a unique style for a single document. It is
defined in <head> section of the HTML page inside the <style> tag.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-color: linen;
7. }
8. h1 {
9. color: red;
10. margin-left: 80px;
11. }
12. </style>
13. </head>
14. <body>
15. <h1>The internal style sheet is applied on this heading.</h1>
16. <p>This paragraph will not be affected.</p>
17. </body>
18. </html>
3. External CSS :
The external style sheet is generally used when you want to make changes on
multiple pages. It is ideal for this condition because it facilitates you to change the
look of the entire web site by changing just one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the
head section.
Example:
1. <head>
2. <link rel="stylesheet" type="text/css" href="mystyle.css">
- 8-
3. </head>
The external style sheet may be written in any text editor but must be saved with
a .css extension. This file should not contain HTML elements.
Let's take an example of a style sheet file named "mystyle.css".
File: mystyle.css
1. body {
2. background-color: lightblue;
3. }
4. h1 {
5. color: navy;
6. margin-left: 20px;
7. }
Note: You should not use a space between the property value and the unit. For
example: It should be margin-left:20px not margin-left:20 px.
6) HTML Links and Attributes:
1. Anchor Tag <a> :

The HTML anchor tag defines a hyperlink that links one page to another page. It can
create hyperlink to other web page as well as files, location, or any URL. The "href"
attribute is the most important attribute of the HTML a tag. and which links to
destination page or URL.
Attributes:
a.) href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other
words, it points out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>

Example:
<a href="second.html">Click for Second Page</a>
- 9-
b.) Target attribute of HTML anchor tag
If we want to open that link to another page then we can use target attribute of <a> tag.
With the help of this link will be open in next page.
Note:
o The target attribute can only use with href attribute in anchor tag.
o If we will not use target attribute then link will open in same page.
Syntax
<a target="_blank|_self|_parent|_top|framename">
Attribute Values
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is
default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="https://www.javatpoint.com/" target="_blank"> this-
link </a>to go on home page of JavaTpoint.</p>
8. </body>
9. </html>
7) Absolute URL and Relative URL in <href>:

Absolute URLs offer a full address for a website or other resource on the Internet. An
absolute URL includes the position within your website in your folder system names within
the URL and consists of the full address from the protocol (HTTPS) to the domain name
(www.tutorialspoint.com).
Example:
- 10-
<a href = "http://www.tutorialspoint.com/xyz.html">
This URL only includes the area after the domain and does not include the complete
website address. It is presumptuous to presume that any links you add will be on the
same website and belong to the same root domain.
The forward slash is the first character in the relative path, which directs the browser
to stay on the current website. A relative URL would look like this −
<a href = "/xyz.html">
Difference between Absolute URL and Relative URL:
Absolute URL Relative URL
The complete address of a document on The relative URL is a document’s online

the internet is known as an absolute URL. partial address.
All the information needed to locate files Only file names or file names with folder
online is contained in the absolute URL. names are contained in relative URLs.
The browser could not link to the precise We can use this URL form when the file is
line if the four components were missing. on the same server as the original
document.
- 11-
8) <img> tag and its attributes:
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
Let's see an example of HTML image.
1. <h2>HTML Image Example</h2>

2. <img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are
given below
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value
of the alt attribute describe the image in words. The alt attribute is considered good for
SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height
attribute.
9.) HTML forms and their Attributes:

Syntax:
1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>
HTML Form Tags

Let's see the list of HTML 5 form tags.
- 12-
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
1. HTML <form> Element:

The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text
area, password field, etc.
Syntax:
1. <form>
2. //Form elements
3. </form>
Attributes
Attribute Value Description
accept-charset character_set Specifies the character

encodings that are to be
used for the form
submission
action URL Specifies where to send

the form-data when a
form is submitted
- 13-
autocomplete on Specifies whether a form
off should have autocomplete
on or off
enctype application/x-www-form- Specifies how the form-

urlencoded data should be encoded
multipart/form-data when submitting it to the
text/plain server (only for
method="post")
method get Specifies the HTTP method

post to use when sending form-
data
name text Specifies the name of a

form
novalidate novalidate Specifies that the form

should not be validated
when submitted
rel external Specifies the relationship

help between a linked resource
license and the current document
next
nofollow
noopener
noreferrer
opener
prev
search
target _blank
_self
_parent
_top
→ <Form> element action attribute:
The action attribute of <form> element defines the process to be performed on form when
form is submitted, or it is a URI to process the form information.
The action attribute value defines the web page where information proceed. It can be .php,
.jsp, .asp, etc. or any URL where you want to process your form.
Example:
1. <form action="action.html" method="post">
- 14-
2. <label>User Name:</label><br>
3. <input type="text" name="name"><br><br>
4. <label>User Password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit">
7. </form>
→ <Form> element method attribute:

The method attribute defines the HTTP method which browser used to submit the form.
The possible values of method attribute can be:
1. post: We can use the post value of method attribute when we want to process the
sensitive data as it does not display the submitted data in URL.
Example:
<form action="action.html" method="post">
2. get: The get value of method attribute is default value while submitting the form. But
this is not secure as it displays data in URL after submitting the form.
Example:
<form action="action.html" method="get">
→ <Form> element target attribute:

The target attribute defines where to open the response after submitting the form. The
following are the keywords used with the target attribute.
1. _self: If we use _self as an attribute value, then the response will display in current page
only.
Example:
<form action="action.html" method="get" target="_self">
2. _blank: If we use _blank as an attribute it will load the response in a new page.
Example:
<form action="action.html" method="get" target="_blank">
→ <Form> element autocomplete attribute:
- 15-
The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an
input field to complete automatically. It can have two values "on" and "off" which enables
autocomplete either ON or OFF. The default value of autocomplete attribute is "on".
Example:
<form action="action.html" method="get" autocomplete="on">
→ <Form> element novalidate attribute:

The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this
attribute in form then it does not perform any type of validation and submit the form.
Example:
<form action = "action.html" method = "get" novalidate>
2. HTML <input> Element:

The HTML <input> element is fundamental form element. It is used to create form fields,
to take input from user. We can apply different input filed to gather different information
form user. Following is the example to show the simple text input.
Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
HTML Form Input Types

In HTML <input type=" "> is an important element of HTML form. The "type" attribute
of input element can be various types, which defines information field. Such as <input
type="text" name="name"> gives a text box.
Following is a list of all types of <input> element of HTML.
type=" " Description
text Defines a one-line text input field
- 16-
password Defines a one-line password input field
submit Defines a submit button to submit the form to server
reset Defines a reset button to reset all values in the form.
radio Defines a radio button which allows select one option.
checkbox Defines checkboxes which allow select multiple options form.
button Defines a simple push button, which can be programmed to perform a task on an event.
file Defines to select the file from device storage.
image Defines a graphical submit button.
HTML5 added new types on <input> element. Following is the list of types of elements
of HTML5
type=" " Description
color Defines an input field with a specific color.
date Defines an input field for selection of date.
datetime-local Defines an input field for entering a date without time zone.
email Defines an input field for entering an email address.
month Defines a control with month and year, without time zone.
number Defines an input field to enter a number.
url Defines a field for entering URL
week Defines a field to enter the date with week-year, without time zone.
search Defines a single line text field for entering a search string.
tel Defines an input field for entering the telephone number.
- 17-
Following is the description about types of <input> element with examples.
→ <input type="text">:
The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.
Example:
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>
→ <input type="password">:
The <input> element of type "password" allow a user to enter the password securely in a
webpage. The entered text in password filed converted into "*" or ".", so that it cannot be
read by another user.
Example:
1. <form>
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
→ <input type="submit">:
The <input> element of type "submit" defines a submit button to submit the form to the
server when the "click" event occurs.
Example:
1. <form action="https://www.javatpoint.com/html-tutorial">
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
- 18-
→ <input type="reset">:
The <input> type "reset" is also defined as a button but when the user performs a click
event, it by default reset the all inputted values.
Example:
1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>
→ <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing an option
between a set of related options. At a time only one radio button option can be selected at
a time.
Example:
1. <form>
2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
7. <input type="submit" value="submit">
8. </form>
→ <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be checked or
unchecked to select the choices from the given options.
Example:
1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
- 19-
5. <input type="checkbox" name="sport1" value="cricket">Cricket<br>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br>
7. <input type="checkbox" name="sport3" value="football">Football<br>
8. <input type="checkbox" name="sport4" value="baseball">Baseball<br>
9. <input type="checkbox" name="sport5" value="badminton">Badminton<br>
<br>
11. </form>
→ <input type="button">:
The <input> type "button" defines a simple push button, which can be programmed to
control a functionally on any event such as, click event.
Example:
1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are learning HTML
')">
3. </form>
→ <input type="file">:
The <input> element with type "file" is used to select one or more files from user device
storage. Once you select the file, and after submission, this file can be uploaded to the
server with the help of JS code and file API.
Example:
1. <form>
2. <label>Select file to upload:</label>
3. <input type="file" name="newfile">
5. </form>
Example:
→ <input type="image">:
The <input> type "image" is used to represent a submit button in the form of image.
1. <!DOCTYPE html>
2. <html>
3. <body>
- 20-
4. <h2>Input "image" type.</h2>
5. <p>We can create an image as submit button</p>
6. <form>
7. <label>User id:</label><br>
8. <input type="text" name="name"><br><br>
9. <input type="image" alt="Submit" src="login.png" width="100px">
10. </form>
11.
12. </body>
13. </html>
→ <input type=”date">:
The <input> element of type "date" generates an input field, which allows a user to input
the date in a given format. A user can enter the date by text field or by date picker interface.
Example:
1. <form>
2. Select Start and End Date: <br><br>
3. <input type="date" name="Startdate"> Start date:<br><br>
4. <input type="date" name="Enddate"> End date:<br><br>
6. </form>
→ <input type=”datetime-local">:
The <input> element of type "datetime-local" creates input filed which allow a user to
select the date as well as local time in the hour and minute without time zone information.
Example:
1. <form>
2. <label>
3. Select the meeting schedule: <br><br>
4. Select date & time: <input type="datetime-
local" name="meetingdate"> <br><br>
5. </label>
7. </form>
→ <input type=”email">:
- 21-
The <input> type "email" creates an input filed which allow a user to enter the e-mail
address with pattern validation. The multiple attributes allow a user to enter more than one
email address.
Example:
1. <form>
2. <label><b>Enter your Email-address</b></label>
3. <input type="email" name="email" required>
5. <p><strong>Note:</strong>User can also enter multiple email addresses s
eparating by comma or whitespace as following: </p>
6. <label><b>Enter multiple Email-addresses</b></label>
7. <input type="email" name="email" multiple>
9. </form>
→ <input type=”number">:
The <input> element type number creates input filed which allows a user to enter the
numeric value. You can also restrict to enter a minimum and maximum value using min and
max attribute.
Example:
1. <form>
2. <label>Enter your age: </label>
3. <input type="number" name="num" min="50" max="80">
5. </form>
→ <input type=”url">:
The <input> element of type "url" creates an input filed which enables user to enter the
URL.
Example:
<form>
1. <label>Enter your website URL: </label>
2. <input type="url" name="website" placeholder="http://example.com"><br>
3. <input type="submit" value="send data">
4. </form>
- 22-
3. HTML <textarea> Element:
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>
4. HTML <label> Element:

It is considered better to have label in form. As it makes the code parser/browser/user
friendly. If you click on the label tag, it will focus on the text control. To do so, you need to
have for attribute in label tag that must be same as id attribute of input tag.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>
10.) HTML <select> tag:

HTML <select> tag is used to create a drop down list with multiple options. The <option>
element is nested within <select> tag for defining options in a list. The <optgroup>
element can be used for grouping related options in a list. If you want to send data to server
then use <select> tag within <form> element.
Syntax:
<select>
<option></option>
</select>
- 23-
Attribute:
Attribute Value Description
autofocus autofocus This attribute let automatically focused the drop-down list on page
load.
disabled disabled It is used to disable the control and user cannot interact with the drop-
down list.
form form-id It specifies one or more forms, to which select belong to.
multiple multiple If it sets then a user can select multiple options from the list.
name name It determines the name for the drop-down list.
required required If it specified, user must select that field before submitting the form.
size number It specifies the visible number of options in the list.
Example:
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
11.) HTML <datalist> tag:

The HTML <datalist> tag is is used to provide an auto complete feature on form element.
It provides a list of predefined options to the users to select data. The datalist tag is
introduced in HTML5. The <datalist> tag should be used with an <input< element that
contains a "list" attribute. The value of "list" attribute is linked with the datalist id.
Example
Let's see the simple example of HTML5 datalist tag. If you press A, it will show a list of
cricketers starting with A letter.
1. <label>
2. Enter your favorite cricket player: Press any character<br />
3. <input type="text" id="favCktPlayer" list="CktPlayers">
4. <datalist id="CktPlayers">
5. <option value="Sachin Tendulkar">
6. <option value="Brian Lara">
- 24-
7. <option value="Jacques Kallis">
8. <option value="Ricky Ponting">
9. <option value="Rahul Dravid">
10. <option value="Shane Warne">
11. <option value="Rohit Sharma">
12. <option value="Donald Bradman">
13. <option value="Saurav Ganguly ">
14. <option value="AB diVilliers">
15. <option value="Mahendra Singh Dhoni">
16. <option value="Adam Gilchrist">
17. </datalist>
18. </label>
- 25-
12.) HTML <video> tag:
HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files
such as a movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:
• mp4
• webM
• ogg
Example
1. <video controls>
2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>
Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is not played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page loads.
src It specifies the source URL of the video file.
1. <video width="320" height="240" controls autoplay loop>

2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>
- 26-
12.) HTML <video> tag:
HTML audio tag is used to define sounds such as music and other audio clips. Currently
there are three supported file format for HTML 5 audio tag.
1. mp3
2. wav
3. ogg
Example
1. <audio controls>
2. <source src="koyal.mp3" type="audio/mpeg">
3. Your browser does not support the html audio tag.
4. </audio>
Attribute Description
controls It defines the audio controls which is displayed with play/pause buttons.
autoplay It specifies that the audio will start playing as soon as it is ready.
loop It specifies that the audio file will start over again, every time when it is completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file when the page loads.
src It specifies the source URL of the audio file.
- 27-

Web UNIT-1

Uploaded by

Copyright:

Available Formats

Web UNIT-1

Uploaded by

Document Information

Original Description:

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

Web UNIT-1

Uploaded by

Copyright:

Available Formats

305-01: Web Designing – 1

UNIT – 1 : Working with HTML5 and CSS

2. Why Use CSS?

CSS Solved a Big Problem

HTML was created to describe the content of a web page, like:

CSS removed the style formatting from the HTML page!

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

The declaration block contains one or more declarations separated by

Each declaration includes a CSS property name and a value, separated by a

Multiple CSS declarations are separated with semicolons, and declaration

3. Explain different types of CSS Selector

There are several different types of selectors in CSS.

1) CSS Element Selector

Let?s take an example with the id "para1".

3) CSS Class Selector

Let's take an example with a class "center".

CSS Class Selector for specific element

Let's see an example.

4) CSS Universal Selector

5) CSS Group Selector

Let's see the CSS code without group selector.

Let's see the full example of CSS group selector.

5) How to Add CSS:

1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Inline CSS is applied on this heading.

Disadvantages of Inline CSS :

Let's take an example of a style sheet file named "mystyle.css".

6) HTML Links and Attributes:

1. Anchor Tag <a> :

a.) href attribute of HTML anchor tag

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

_blank Opens the linked document in a new window or tab

_parent Opens the linked document in the parent frame

7) Absolute URL and Relative URL in <href>:

Difference between Absolute URL and Relative URL:

Absolute URL Relative URL

The complete address of a document on The relative URL is a document’s online

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>

Attributes of HTML img tag

The location of image may be on the same directory or another server.

9.) HTML forms and their Attributes:

HTML Form Tags

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

1. HTML <form> Element:

Attribute Value Description

accept-charset character_set Specifies the character

action URL Specifies where to send

enctype application/x-www-form- Specifies how the form-