CSE4001 - Internet and Web Programming
Course Type: LTP Credits: 4
Prepared by
Dr Komarasamy G
Associate Professor (Grade-2)
School of Computing Science and Engineering
VIT Bhopal University
Unit-2 HTML and CSS
HTML5 Basics – Formatting – Colors – Images
– Links – Tables – Lists – Layout –
Forms–Canvas –Media.
CSS3 Basics – Selectors - Box Model -
Backgrounds and Borders -Text Effects –
Advanced Features.
Unit-2 HTML & CSS / Dr Komarasamy G 2
HTML5 Basics
• HTML5 is the next major revision of the HTML standard superseding
HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
structuring and presenting content on the World Wide Web.
• HTML5 is a cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working Group
(WHATWG).
• The new standard incorporates features like video playback and
drag-and-drop that have been previously dependent on third-party
browser plug-ins such as Adobe Flash, Microsoft Silverlight, and
Google Gears.
• Browser Support
• The latest versions of Apple Safari, Google Chrome, Mozilla Firefox,
and Opera all support many HTML5 features and Internet Explorer 9.0
will also have support for some HTML5 functionality.
• The mobile web browsers that come pre-installed on iPhones, iPads,
and Android phones all have excellent support for HTML5.
Unit-2 HTML & CSS / Dr Komarasamy G 3
HTML5 - New Features
• HTML5 introduces a number of new elements and attributes that can
help you in building modern websites. Here is a set of some of the
most prominent features introduced in HTML5.
• New Semantic Elements − These are like <header>, <footer>, and
<section>.
• Forms 2.0 − Improvements to HTML web forms where new attributes
have been introduced for <input> tag.
• Persistent Local Storage − To achieve without resorting to third-party
plugins.
• WebSocket − A next-generation bidirectional communication
technology for web applications.
• Server-Sent Events − HTML5 introduces events which flow from web
server to the web browsers and they are called Server-Sent Events
(SSE).
• Canvas − This supports a two-dimensional drawing surface that you
can program with JavaScript.
Unit-2 HTML & CSS / Dr Komarasamy G 4
HTML5 - New Features
• Audio & Video − You can embed audio or video on your webpages
without resorting to third-party plugins.
• Geolocation − Now visitors can choose to share their physical
location with your web application.
• Microdata − This lets you create your own vocabularies beyond
HTML5 and extend your web pages with custom semantics.
• Drag and drop − Drag and drop the items from one location to
another location on the same webpage.
Unit-2 HTML & CSS / Dr Komarasamy G 5
HTML5
• What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
Unit-2 HTML & CSS / Dr Komarasamy G 6
HTML5
Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Output:
</body> My First Heading
</html> My first paragraph.
Unit-2 HTML & CSS / Dr Komarasamy G 7
HTML5
• Example Explained
• The <!DOCTYPE html> declaration defines that this document is
an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the
HTML page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
Unit-2 HTML & CSS / Dr Komarasamy G 8
HTML5
• What is an HTML Element?
• An HTML element is defined by a start tag, some content, and
an end tag:
• <tagname>Content goes here...</tagname>
• The HTML element is everything from the start tag to the end
tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Unit-2 HTML & CSS / Dr Komarasamy G 9
HTML5
• Web Browsers
• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is
to read HTML documents and display them correctly.
• A browser does not display the HTML tags, but uses them to
determine how to display the document:
Unit-2 HTML & CSS / Dr Komarasamy G 10
HTML5
• HTML Page Structure
• Below is a visualization of an HTML page structure:
Unit-2 HTML & CSS / Dr Komarasamy G 11
HTML5
• HTML Page Structure
• Below is a visualization of an HTML page structure:
Unit-2 HTML & CSS / Dr Komarasamy G 12
HTML5
• HTML Page Structure
• Below is a visualization of an HTML page structure:
Unit-2 HTML & CSS / Dr Komarasamy G 13
HTML5
• HTML History
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Unit-2 HTML & CSS / Dr Komarasamy G 14
HTML5
• HTML Editors
• Learn HTML Using Notepad or TextEdit
• Web pages can be created and modified by using professional HTML editors.
• However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
• We believe in that using a simple text editor is a good way to learn HTML.
• Follow the steps below to create your first web page with Notepad or
TextEdit.
• Step 1: Open Notepad (PC)
• Windows 8 or later:
• Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.
• Windows 7 or earlier:
• Open Start > Programs > Accessories > Notepad
Unit-2 HTML & CSS / Dr Komarasamy G 15
HTML5
• Step 2: Write Some HTML
• Write or copy the following HTML code into Notepad:
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 16
HTML5
• Step 3: Save the HTML Page
• Save the file on your computer. Select File > Save as in the Notepad menu.
• Name the file "index.htm" and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).
Tip: You can use either .htm or .html as file extension. There is no
difference, it is up to you.
Unit-2 HTML & CSS / Dr Komarasamy G 17
HTML5
• Step 4: View the HTML Page in Your Browser
• Open the saved HTML file in your favorite browser (double click on the file,
or right-click - and choose "Open with").
• The result will look much like this:
Unit-2 HTML & CSS / Dr Komarasamy G 18
HTML5 Formatting
• HTML contains several elements for defining text with a special meaning.
• HTML Formatting Elements
• Formatting elements were designed to display special types of text:
▪ <b> - Bold text
▪ <strong> - Important text
▪ <i> - Italic text
▪ <em> - Emphasized text
▪ <mark> - Marked text
▪ <small> - Smaller text
▪ <del> - Deleted text
▪ <ins> - Inserted text
▪ <sub> - Subscript text
▪ <sup> - Superscript text
Unit-2 HTML & CSS / Dr Komarasamy G 19
HTML5 Formatting This text is bold
This text is italic
This is subscript and superscript
<!DOCTYPE html> This text is important!
<html> This text is italic.
This text is emphasized.
<body> This is some smaller text.
<p><b>This text is bold</b></p> Do not forget to buy milk today.
My favorite color is blue red.
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p><strong>This text is important!</strong></p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p></body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 20
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or
mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML all tags : https://www.w3schools.com/tags/ref_byfunc.asp
Unit-2 HTML & CSS / Dr Komarasamy G 21
HTML Colors
• HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.
• Color Names
• In HTML, a color can be specified by using a color name:
Unit-2 HTML & CSS / Dr Komarasamy G 22
HTML Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 23
HTML Colors
Output:
Unit-2 HTML & CSS / Dr Komarasamy G 24
HTML Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
VIT Welcome
</p>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 25
HTML Colors
Text Color
You can set the color of text
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">VIT welcome</p>
<p style="color:MediumSeaGreen;"> Enjoy</p>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 26
HTML Colors
Border Color
You can set the color of borders
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 3px solid Tomato;">Hello World</h1>
<h1 style="border: 6px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 10px solid Violet;">Hello World</h1>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 27
HTML Colors
An RGB color value represents RED, GREEN, and BLUE light sources.
An RGBA color value is an extension of RGB with an Alpha channel (opacity).
RGB Color Values
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255), and the other two (green and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its
highest value (255), and the other two (red and blue) are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Unit-2 HTML & CSS / Dr Komarasamy G 28
HTML Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 29
HTML Colors
RGBA Color Values
RGBA color values are an extension of RGB color values with an Alpha channel -
which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">Welcome</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);"> To </h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">VIT </h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);"> Bhopal</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">Happy </h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">Life Enjoy</h1>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 30
Images
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web 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 is empty, it contains attributes only, and does not have a closing
tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
The src Attribute
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that gets the
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text are
shown if the browser cannot find the image.
https://www.w3schools.com/html/html_images.asp
Unit-2 HTML & CSS / Dr Komarasamy G 31
Images
Images can improve the design and the appearance of a web page.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="C:\Users\Admin\Desktop\img\bird.jpg" alt="VIT1" width="500"
height="333">
</body> </html>
Unit-2 HTML & CSS / Dr Komarasamy G 32
Images
All your image and HTML file should be in same directory.
Unit-2 HTML & CSS / Dr Komarasamy G 33
Images
Common Image Formats
Here are the most common image file types, which are supported in all
browsers (Chrome, Edge, Firefox, Safari, Opera):
Abb File Format File Extension
APNG Animated Portable Network .apng
Graphics
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,
image .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
https://www.w3schools.com/html/html_images.asp
Unit-2 HTML & CSS / Dr Komarasamy G 34
Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
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.
✔ Note: A link does not have to be text. A link can be an image or any other
HTML element!
HTML Links - Syntax
• The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
• 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.
Unit-2 HTML & CSS / Dr Komarasamy G 35
Lists
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
https://www.w3schools.com/html/html_lists.asp
Unit-2 HTML & CSS / Dr Komarasamy G 36
Lists
<!DOCTYPE html>
<html>
<body>
HTML Links
Visit VIT Bhopal/
<h1>HTML Links</h1>
<p><a href="https://vitbhopal.ac.in/">Visit VIT Bhopal/</a></p>
</body>
</html>
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
Unit-2 HTML & CSS / Dr Komarasamy G 37
List
HTML lists allow web developers to group a set of related items in lists.
Example
Unit-2 HTML & CSS / Dr Komarasamy G 38
List
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html> Unit-2 HTML & CSS / Dr Komarasamy G 39
List
HTML Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Example
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body> https://www.w3schools.com/html/html_lists.asp
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 40
HTML Layout
Websites often display content in multiple columns (like a magazine or a
newspaper).
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web
page:
• <header> - Defines a header for a document or a
section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained
content
• <aside> - Defines content aside from the content
(like a sidebar)
• <footer> - Defines a footer for a document or a
section
• <details> - Defines additional details that the user
can open and close on demand
• <summary> - Defines a heading for
the <details> element
https://www.w3schools.com/html/html_layout.asp
Unit-2 HTML & CSS / Dr Komarasamy G 41
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to
a server for processing.
The HTML <form> Elements
The HTML <form> element can contain one or more of the following form
elements:
<input>
<label> https://www.w3schools.com/html/html_forms.asp
<select>
<textarea> https://www.w3schools.com/html/html_form_elements.asp
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
Unit-2 HTML & CSS / Dr Komarasamy G 42
HTML Canvas
• The HTML <canvas> element is used to draw graphics on a web page.
• The graphic to the left is created with <canvas>. It shows four elements: a red
rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.
What is HTML Canvas?
• The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript.
• The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.
• Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
https://www.w3schools.com/html/html5_canvas.asp
Unit-2 HTML & CSS / Dr Komarasamy G 43
HTML Canvas
• <!DOCTYPE html>
• <html>
• <body>
• <canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
• Your browser does not support the HTML canvas tag.
• </canvas>
• </body>
• </html>
Unit-2 HTML & CSS / Dr Komarasamy G 44
HTML Canvas
✔ SVG defines vector-based graphics in XML format.
What is SVG?
✔ SVG stands for Scalable Vector Graphics
✔ SVG is used to define graphics for the Web
✔ SVG is a W3C recommendation
The HTML <svg> Element
✔ The HTML <svg> element is a container for SVG graphics.
✔ SVG has several methods for drawing paths, boxes, circles, text, and graphic
images.
Unit-2 HTML & CSS / Dr Komarasamy G 45
HTML Canvas
SVG Circle
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 46
HTML Canvas
SVG Rectangle
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 47
HTML Canvas
SVG Rounded Rectangle
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Unit-2 HTML & CSS / Dr Komarasamy G 48
HTML Canvas
SVG Star
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
https://www.w3schools.com/html/html5_svg.asp
Unit-2 HTML & CSS / Dr Komarasamy G 49
HTML Media
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.
Browser Support
• The first web browsers had support for text only, limited to a single font in a
single color.
• Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia 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.
Unit-2 HTML & CSS / Dr Komarasamy G 50
HTML Media
Common Video Formats
There are many video formats out there.
The MP4, WebM, and Ogg formats are supported by HTML.
The MP4 format is recommended by YouTube.
Unit-2 HTML & CSS / Dr Komarasamy G 51
HTML Media
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first
.mpeg popular video format on the web. Not supported anymore in
HTML.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly
used in video cameras and TV hardware. Plays well on Windows
computers, but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft.
Commonly used in video cameras and TV hardware. Plays well
on Windows computers, but not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video
cameras and TV hardware. Plays well on Apple computers, but
not in web browsers.
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming
.ram with low bandwidths. Does not play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra
.flv component (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported
by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google.
Supported by HTML.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group.
Unit-2 HTML & CSS / Dr Komarasamy G 52
or MP4 Commonly used in video cameras and TV hardware. Supported
HTML Media
Common Audio Formats
• MP3 is the best format for compressed recorded music. The
term MP3 has become synonymous with digital music.
• If your website is about recorded music, MP3 is the choice.
Unit-2 HTML & CSS / Dr Komarasamy G 53
Unit-2 HTML
• Reference Links
• https://www.tutorialrepublic.com/html-tutorial/
• https://www.tutorialspoint.com/html5/index.htm
• https://www.w3schools.com/html/
Unit-2 HTML & CSS / Dr Komarasamy G 54
