Web Technology

Unit 6
Introduction
• Web development refers to the building, creating, and maintaining of
websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an
application that works over the internet i.e. websites.
• The word Web Development is made up of two words, that is:
• Web: It refers to websites, web pages or anything that works over the
internet.
• Development: Building the application.
 WEB PAGE
• A web page or webpage is a document, commonly
written in HTML, that is viewed in an Internet browser.
A web page can be accessed by entering a URL address
into a browser's address bar. A web page may contain
text, graphics, and hyperlinks to other web pages and
files.
• A web page is often used to provide information to
viewers, including pictures or videos to help illustrate
important topics. A web page may also be used as a
method to sell products or services to viewers.
WEBSITE
• As the name implies, a website refers to a ‘site’ on the ‘web’ where
you can put information about yourself, your business, or any other
topic and users can access it by using the internet
• And, just like the address of your house, your website also will have a
unique address called ‘web address’. With the web address, internet
users can easily find your website and access the information on it.
• Technically, a website is a collection of interlinked pages on the
internet grouped together under a unique name or online address.
Web Browser
• A web browser (commonly referred to as a browser) is application
software for accessing the World Wide Web. When a user requests a
web page from a particular website, the web browser retrieves the
necessary content from a web server and then displays the page on
the user's device.
• Web browsers are used on a range of devices, including desktops,
laptops, tablets, and smartphones. In 2020, an estimated 4.9 billion
people used a browser. The most used browser is Google Chrome,
with a 65% global market share on all devices, followed by Safari with
18%.
 Search Engine
• A search engine is a software system that is designed to carry out web
searches. They search the World Wide Web in a systematic way for
particular information specified in a textual web search query.
• The search results are generally presented in a line of results, often
referred to as search engine results pages .
• The information may be a mix of links to web pages, images, videos,
infographics, articles, research papers, and other types of files.
• Google, Yahoo, Bing, Baidu, and DuckDuckGo are popular search engines.
Google is one of the most used search engines worldwide that is used with
the Chrome browser. So, almost everyone is familiar with it.
 Some Other terms
• WWW
• WWW stands for World Wide Web. A technical definition of the World Wide Web is
− All the resources and users on the Internet that are using the Hypertext Transfer
Protocol (HTTP).
• HTTP
• HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to
transfer hypertext documents that makes the World Wide Web possible.
• URL
• URL stands for Uniform Resource Locator, and is used to specify addresses on the
World Wide Web. A URL is the fundamental network identification for any resource
connected to the web (e.g., hypertext pages, images, and sound files).
 Web Technology
• Web Technology refers to the various tools and techniques that are utilized in
the process of communication between different types of devices over the
internet. A web browser is used to access web pages.
• Web technologies include the following:
• Mark-up languages, such as HTML, CSS, XML, and HTTP (Front-end or Client-side
technologies)
• Programming languages and technologies that help create applications for the web. Some
of these are Perl, C#, Java, Visual Basic, and .NET (Back-end or Server-side technologies)
• Web server and server technologies that enable request handling on a network, where
different users have to share the same resources and communicate with each other
• Databases, which are extremely important for data and information storage on a computer
network
• Business applications that are customized for specific execution of tasks on a network
•
Internet technology
• Internet technology refers to devices, Software, Hardware and
transmission protocol used to connect computers together in order to
receive or send data from one computer to another within a small
network or as part of a Small network within a large network such as
the internet.
• Included are local area network, wide area networks, bridging,
switching and routing, voice and data integration, wireless
integration, dialup Technology, cable access Technology, network
security and network management.
Content Management Software
• Also known as CMS, this system is used for creating and managing the
content of websites. It basically simplifies the creation and editing of
digital content. A CMS gives you the ability to upload, modify, and
delete content from your website without needing to know HTML,
CSS, or other coding languages. It is the all-in-one workplace for
content creation and distribution.
• Managing your website with content management software is a great
way to streamline workflows and make sure that your staff can easily
upload and manage your website’s content.
• Example. Wordpress, joomla, drupal
 HTML
• HTML stands for HyperText Markup Language. It is used to design web
pages using a markup language.
• HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between the web pages. A markup language is used to
define the text document within tag which defines the structure of web
pages.
• This language is used to annotate (make notes for the computer) text so
that a machine can understand it and manipulate text accordingly.
• Most markup languages (e.g. HTML) are human-readable. The language
uses tags to define what manipulation has to be done on the text.
• Objective of HTML
• HTML HyperText Markup Language is used to create Web pages and tells the browser
how to display them. It designs the basic layout and formatting of Web pages.HTML is
made up of elements or tags and attributes which work together to identify document
parts and tell the browser how to display them.
• Features of HTML:
• It is easy to learn and easy to use.
• It is platform-independent.
• Images, videos, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.
• Advantages:
• HTML is used to build websites.
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript, etc.

• Disadvantages:
• HTML can only create static web pages. For dynamic web pages, other languages
have to be used.
• A large amount of code has to be written to create a simple web page.
• The security feature is not good.
 Basic structure of an HTML document
• An HTML document has two main parts:
• Head. The head element contains title and meta
data of a web document.
• Body. The body element contains the information
that you want to display on a web page.
• To make your web pages compatible with
HTML 4, you need to add a document type
declaration (DTD) before the HTML element.
• In a web page, the first tag (specifically,
<html>) indicates the markup language that is
being used for the document. The <head> tag
contains information about the web page.
Lastly, the content appears in the <body> tag.
 Web hosting and Publishing
• Web hosting:
• Web hosting is a service of providing online space for storage of web pages. These web
pages are made available via World Wide Web. The companies which offer website
hosting are known as Web hosts.
• The servers on which web site is hosted remain switched on 24 x7. These servers are
run by web hosting companies. Each server has its own IP address. Since IP addresses
are difficult to remember therefore, webmaster points their domain name to the IP
address of the server their website is stored on.
• Web Publishing:
• Web Publishing, as the name suggests, is the process of creating a website and placing
it on the webserver, and published content may include text, images, videos, and other
types of media. Its main aim is to facilitate communication simply by adding context
through style, emotion, and space. It is also known as online publishing.
 HTML Tag and Attribute
• HTML is the basic language for all other web technologies. It helps to
create the structure of the web pages.
• Tag and attribute are two concepts related to HTML. The main difference
between tag and attribute is that a tag is a way of representing an HTML
element in the program, while an attribute is a way of describing the
characteristics of an HTML element.
 Some Basic HTML Tag
• HTML:
• The <html> …….. </html> tag represents the root of an HTML document. The <html>
tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
• HEAD
• The <head> ……..</head> element is a container for metadata (data about data) and
is placed between the <html> tag and the <body> tag.
• Metadata is data about the HTML document. Metadata is not displayed.
• Metadata typically define the document title, character set, styles, scripts, and other
meta information.
• TITLE
• The <title> ……. </title> tag defines the title of the document. The title must be text-
only, and it is shown in the browser's title bar or in the page's tab.
 BODY tag
<!DOCTYPE html>
• The <body> tag defines the document's <html>
body. <head>
<title>Page Title</title>
• The <body> element contains all the </head>
contents of an HTML document, such as <body>
headings, paragraphs, images,
hyperlinks, tables, lists, etc. <h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
16 Basic Colors

19
Background Color
▪ It is very common to see web pages with their background color set
to white or some other colors.
▪ To set your document’s background color, you need to edit the
<BODY> element by adding the BGCOLOR attribute. The following
example will display a document with a White background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
 TEXT Color
▪ The TEXT attribute is used to control the color of all the normal text in
the document. The default color for text is black. The TEXT attribute
would be added as follows:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”></BODY>
In this example the document’s page color is white and the text would be
red.
Using Image Background
▪ The BODY element also gives you ability of setting an image as the
document’s background.
▪ An example of a background image’s HTML code is as follows:

<BODY BACKGROUND=“hi.gif” ></BODY>

 Headings, <Hx> </Hx>
▪ Inside the BODY element, heading elements
H1 through H6 are generally used for major
divisions of the document. Headings are
permitted to appear in any order, but you will
obtain the best results when your documents
are displayed in a browser if you follow these
guidelines:
1. H1: should be used as the highest level of heading, H2
as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should
not appear after an H1, unless there is an H2 between
them.

23
 Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>

24
 HTML | <h1> to <h6> align Attribute
• The HTML <h1> to <h6> align Attribute is used to
specify the alignment of the <h> element or the
content present inside the Heading Element.
<!DOCTYPE html>
• Syntax: <html>
• <h1 align="left | right | center | justify">
<body>
• Attribute Values:
– left: It sets the content to the left-align. <h1 align="center">center</h1>
<h2 align="left">left 2</h2>
– right: It sets the content to the right-align. <h3 align="right">right 3</h3>
– center: I sets the div element to the center. <h4 align="justify">justify</h4>
– justify: It sets the content to the justify position.
</body>

</html>
25
 Font Tag in HTML
• Font Tag in HTML is one of the
most important attributes used to <body>
make webpage or HTML <p> <font size=”2” color=”blue” face=”Calibri”> Font Tag
in HTML is one of the most important attributes used to
documents more attractive. It has make webpage or HTML documents more attractive.
the properties to change the size, </font>
</p>
color, and style of included text. </body>
The text enclosed within <font> tag
is used to define style to the text
Size can be 1-7
included in it. Color: red, White, Green, Blue etc.
Face: verdana, arial, calbiri etc.

• Syntax:
<font size =” ” face =” ” color=” ”>
26
 Basefont, big, small tag
• The HTML <basefont> tag defines the default font-family, font-size
and color for the text in the HTML document.
<head>
<basefont color="red" face="Verdana, Geneva, sans-serif" size="12">
</head>
• <big> Tag: The HTML <big> tag makes the one size bigger font in the HTML
document. Small is converted to medium, medium is converted to large and
similarly large is converted to x-large.
– Syntax:
– <big> Text... </big>
• <small> Tag: The HTML <small> tag defines smaller text. It makes text one
font smaller than the available text. x-large is converted to large, large is
converted to medium, and similarly medium is converted to small.
– Syntax:
– <small> Text... </small> 27
 HTML Paragraphs
• The <p> tag in HTML defines a
paragraph. These have both <!DOCTYPE html>
<html>
opening and closing tags. So
<body>
anything mentioned within <p> <h2>Welcome To Pashupati Ma. Vi</h2>

and </p> is treated as a <!-- Use of <p> tag -->

<p>A computer science class for Student.</p>
paragraph.
</body>
– Syntax:
</html>
– <p> Content </p>

28
 Break, <BR> tag
▪ Line breaks allow you to decide where the text will break on a line
or continue to the end of the window.
▪ A <BR> is an empty Element, meaning that it may contain
attributes but it does not contain content.
▪ The <BR> element does not have a closing tag.

29
 Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>…. Line 2
</P> Line 3
</BODY> ….
</HTML>

30
The HTML Comment Tag
• This element is used to add a comment to an HTML document. An
HTML comment begins with <!–– and the comment closes with ––>.
HTML comments are visible to anyone that views the page source
code, but are not display on browser.
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
 HTML Text Formatting <!DOCTYPE html>
<html>
<body>
• HTML contains several elements for
<p><b>This text is bold</b></p>
defining text with a special meaning. <p><i>This text is italic</i></p>
<p>This is_subscript </p>
HTML Formatting Elements
<p>This is^superscript</p>
• <strong>This text is important!</strong>
• Formatting elements were designed to <em>This text is emphasized</em>
display special types of text: <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
•<b> - Bold text
•<strong> - Important text </body>
•<i> - Italic text </html>
•<em> - Emphasized text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
 HTML <blockquote> <!DOCTYPE html>
<html>
<body>

• The <blockquote> tag in HTML is used <h1>The blockquote element</h1>

to display the long quotations (a
<p>Here is a quote from WWF's website:</p>
section that is quoted from another
source). It changes the alignment to <blockquote>
make it unique from others. It contains For 50 years, WWF has been protecting the future of
nature. The world's leading conservation organization,
both opening and closing tags. In WWF works in 100 countries and is supported by 1.2
blockquote tag, we can use elements million members in the United States and close to 5 million
globally.
like heading, list, paragraph, etc. </blockquote>
• Syntax:
• <blockquote> Contents... </blockquote> </body>
</html>
 preformatted text <!DOCTYPE html>
<html>
<body>
• The <pre> tag defines preformatted text.
• Text in a <pre> element is displayed in a fixed- <h2>Standard pre</h2>
<pre>This is a standard pre. It will use as
width font, and the text preserves both spaces much space as it needs.</pre>
and line breaks. The text will be displayed
<h2>Fixed width pre</h2>
exactly as written in the HTML source code. <p>
<pre>This is a pre with a fixed width. It will
use as much space as specified.</pre>
</p>

</body>
</html>
HTML Lists
• HTML lists allow web developers to group a set of related items in lists.
HTML Supports following List element:
• An unordered HTML list:
• Item
• Item
• Item
• Item
• An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
HTML Ordered Lists
<!DOCTYPE html>
<html>
• The HTML <ol> tag defines an <body>
ordered list. An ordered list can
<h2>An ordered HTML list</h2>
be numerical or alphabetical. <ol>
• An ordered list starts with the <li>Coffee</li>
<li>Tea</li>
<ol> tag. Each list item starts <li>Milk</li>
with the <li> tag. </ol>

• The list items will be marked </body>

</html>
with numbers by default:
 Ordered HTML List - The Type and Start Attribute
• The type attribute of the <ol> tag, • The start attribute specifies the start value of
defines the type of the list item the first list item in an ordered list.
marker: • This value is always an integer, even when
the numbering type is letters or romans. E.g.,
•Type Description
to start counting list items from the letter "c"
type="1" The list items will be numbered with
numbers (default) or the roman number "iii", use start="3".
type="A" The list items will be numbered with
uppercase letters • Syntax
type="a" The list items will be numbered with
<ol start="number">
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers
Example:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<ol type="i" start="5"> <ol type="a“ start=“2”>
<li>HTML</li> <li>HTML</li>
<li>Java</li> <li>Java</li>
<li>JavaScript</li> <li>JavaScript</li>
<li>SQL</li> <li>SQL</li>
</ol> </ol>
</body> </body>
</html> </html>
 Unordered HTML List <!DOCTYPE html>
<html>
• An unordered list starts with the <ul> <body>
tag. Each list item starts with the <li> <ul>
<li>HTML</li>
tag. <li>Java</li>
• The list items will be marked with <li>JavaScript</li>
bullets (small black circles) by default <li>SQL</li>
</ul>
• To represent different ordered lists,
there are 4 types of attributes in <ul> <ul type="circle">
tag. Type Description
<li>HTML</li>
<li>Java</li>
Type "disc" This is the default style. In this style, the list <li>JavaScript</li>
items are marked with bullets. <li>SQL</li>
</ul>
Type "circle" In this style, the list items are marked with
circles.
</body>
Type "square" In this style, the list items are marked with </html>
squares.
Type "none" In this style, the list items are not marked .
 HTML Definition List
<!DOCTYPE html>
<html>
• HTML Description List or Definition <body>
List displays elements in definition <dl>
form like in dictionary. The <dl>, <dt> <dt>HTML</dt>
and <dd> tags are used to define <dd>is a markup language</dd>
description list. <dt>Java</dt>
<dd>is a programming language and
• The 3 HTML description list tags are platform</dd>
given below: <dt>JavaScript</dt>
• <dl> tag defines the description list. <dd>is a scripting language</dd>
• <dt> tag defines data term. <dt>SQL</dt>
<dd>is a query language</dd>
• <dd> tag defines data definition
(description) </dl>
</body>
</html>
 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!
• 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.
Link Example
<!DOCTYPE html>
<html>
<body>
<h2> URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
</body>
</html>
 <!DOCTYPE html>
<html>
Link to other place in <head>
</head>
same html document <body>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
• HTML internal link name is followed by <br />
the hash sign(#). You have to assign an <p id="lession1">Introduction of Lession.1</p>
<p>This is sub topic.1</p>
id to refer section of your page, which is <p>This is sub topic.2</p>
referred to as an internal link to the <p>This is sub topic.3</p>
<p>This is sub topic.4</p>
same page. <br />
<br />
<p id="lession2">Introduction of Lession.2</p>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
</body>
</html>
 Link to other html document
<html>
• HTML Link - External HTML Links is linked to external <head>
web page. This link is may be absolute path or relative </head>
<body>
link path. <a href="html.php">HTML</a>
• Absolute File Paths <br />
<br />
• An absolute file path is the full URL to a file: <a href="css.php">CSS</a>
• Example <br />
<br />
• <img src="https://www.w3schools.com/images/picture.jpg" <a href="javascript.php">Java
alt="Mountain"> Script</a>
<br />
• Relative File Paths </body>
• A relative file path points to a file relative to the current </html>
page.
• <a href="html.php">HTML</a>
 <!DOCTYPE html>
<html>
HTML Tables <body>
<h2>TH elements define table
• HTML tables allow web developers to arrange data into headers</h2>
<table border=1 cellspacing=0>
rows and columns. <tr>
• A table in HTML consists of table cells inside rows and <th>Person 1</th>
columns <th>Person 2</th>
<th>Person 3</th>
• Table Cells </tr>
• Each table cell is defined by a <td> and a </td> tag. <tr>
• td stands for table data. <td>Emil</td>
<td>Tobias</td>
• Everything between <td> and </td> are the content of the table <td>Linus</td>
cell. </tr>
• Table Rows <tr>
• Each table row starts with a <tr> and end with a </tr> tag. <td>16</td>
<td>14</td>
• tr stands for table row. <td>10</td>
• Table Headers </tr>
• Sometimes you want your cells to be headers, in those cases </table>
use the <th> tag instead of the <td> tag: </body>
</html>
HTML Forms
• HTML Forms are required when you want to collect some data from
the site visitor.
• For example during user registration you would like to collect
information such as name, email address, credit card, etc.
• A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc.
• The back-end application will perform required processing on the
passed data based on defined business logic inside the application.
• Elements in forms
• There are various form elements available like:
• Text fields
• Text area fields
• Drop-down menus
• Radio buttons
• Checkboxes etc.
• Syntax
• The HTML <form> tag is used to create an HTML form and it has following
syntax:
<form action="Script URL“ method="GET|POST"> form elements like input,
textarea etc. </form>
 Form Attributes
• HTML Form Controls
• There are different types of form controls that you can use to collect data using
HTML form:
– Text Input Controls
– Checkboxes Controls
– Radio Box Controls
– Select Box Controls
– Submit
 Text Input Controls
• There are three types of text input used on forms:
• Single-line text input controls-This control is used for items that require
only one line of user input, such as search boxes or names. They are
created using HTML <input> tag.
• Password input controls - This is also a single-line text input but it masks
the character as soon as a user enters it. They are also created using HTMl
<input> tag.
• Multi-line text input controls - This is used when the user is required to give
details that may be longer than a single sentence. Multi-line input controls
are created using HTML <textarea> tag.
 HTML <input> and <textarea> tag
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" /> </br>
Last name: <input type="text" name="last_name" /> </br>
User ID : <input type="text" name="user_id" /> </br>
Password: <input type="password" name="password" />
<textarea rows="5" cols="50" name="description"> Enter description here... </textarea>
</form>
</body>
</html>
 • Example

Checkbox Control <html>

<head>
<title>Checkbox Control</title>
• Checkboxes are used
</head>
when more than one
<body>
option is required to be
<form>
selected.
<input type="checkbox“ name="maths" value=“math”>Maths
• They are also created <input type="checkbox" name="physics" value=“physics”> >Physics
using HTML <input> </form>
tag but type attribute is </body>
set to checkbox.
</html>
 • Example
Radio Button <html>

Control <head>
<title>Radio Box Control</title>
• Radio buttons are used
</head>
when out of many
options, just one option <body>
is required to be <form>
selected. <input type="radio" name="subject“ value="maths"> Maths
• They are also created <input type="radio" name="subject“ value="physics"> Physics
using HTML <input> tag </form>
but type attribute is set </body>
to radio.
</html>
 • Example
<html>
Button Controls <head>
<title>Buttons</title>
</head>
• There are various ways in
<body>
HTML to create clickable
<form>
buttons.
<input type="submit" name="submit" value="Submit" />
• You can also create a clickable <input type="reset" name="reset" value="Reset" />
button using <input> tag by <input type="button" name="ok" value="OK" />
setting its type attribute to
<input type="image" name="imagebutton" src="images/logo.jpg" />
button.
</form>
• The type attribute can take </body>
the following values: </html>
 HTML 5
• HTML5 is the latest version of Hypertext Markup Language, the code that
describes web pages. It's actually three kinds of code: HTML, which
provides the structure; Cascading Style Sheets (CSS), which take care of
presentation; and JavaScript, which makes things happen.
• HTML5 has been designed to deliver almost everything you'd want to do
online without requiring additional software such as browser plugins. It
does everything from animation to apps, music to movies, and can also be
used to build incredibly complicated webpage that run in your browser.
 HTML Audio
• The HTML <audio> element is used to play an audio file on a web page.
• Example
• <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
• HTML Audio - 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.
 HTML Video
• The HTML <video> element is used to show a video on a web page.
• Example
<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>
• How it Works
• 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.
• The text between the <video> and </video> tags will only be displayed in browsers that
do not support the <video> element.
 HTML <track> tag
• HTML <track> tag is used to define time-based text tracks for a media file.
The <track> tag must use as child element of <audio> and <video>
elements.
• The <track> tag is used to add subtitle, caption, or any other form of text
which displayed when a media file plays.
• Example
<video controls="controls">
<source src="flower.mp4" type="video/mp4">
<track src="flower.vtt" kind="subtitles" srclang="en" label="English">
Sorry!Your browser does not support the track
</video>
 HTML <source> Tag
• The <source> tag is used to specify multiple media resources for media
elements, such as <video>, <audio>, and <picture>.
• The <source> tag allows you to specify alternative video/audio/image
files which the browser may choose from, based on browser support or
viewport width. The browser will choose the first <source> it supports.
 HTML <embed> Tag
• The <embed> tag defines a container for an external resource, such as a
web page, a picture, a media player, or a plug-in application.
• Example
• An embedded image:
• <embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">
• An embedded HTML page:
• <embed type="text/html" src="snippet.html" width="500" height="200">
• An embedded video:
• <embed type="video/webm" src="video.mp4" width="400" height="300">
 HTML Canvas Graphics
• 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.
 Convas example to draw line
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
 HTML SVG Graphics
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• The HTML <svg> element is a container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
• Example: Circle

<!DOCTYPE html> Rectangle:

<html> <!DOCTYPE html>
<body> <html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" /> <svg width="400" height="100">
Sorry, your browser does not support inline SVG. <rect width="400" height="100"
</svg> style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</body>
</html> </svg>

</body>
</html>
 Domain Names
• A domain name is your website name. A domain name is the address where
Internet users can access your website.
• A domain name is used for finding and identifying computers on the Internet.
Computers use IP addresses, which are a series of number. However, it is
difficult for humans to remember strings of numbers. Because of this, domain
names were developed and used to identify entities on the Internet rather
than using IP addresses.
• A domain name can be any combination of letters and numbers, and it can be
used in combination of the various domain name extensions, such as .com,
.net and more.
• The domain name must be registered before you can use it. Every domain
name is unique. No two websites can have the same domain name.
 CSS Introduction
• CSS is the language we use to style a Web page.
• 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
• 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 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.
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
CSS Selectors
• CSS selectors are used to "find" (or select) the HTML elements you
want to style. Some Example of CSS Selector are:
• Element Selector
• Class Selector
• Id Selector
The CSS element Selector
• The element selector selects HTML elements based on the element
name.
• Example
• Here, all <p> elements on the page will be center-aligned, with a red text
color:

p{
text-align: center;
color: red;
}
The CSS id Selector

• The id selector uses the id attribute of an HTML element to select a specific

element.
• The id of an element is unique within a page, so the id selector is used to select
one unique element!
• To select an element with a specific id, write a hash (#) character, followed by the
id of the element.
• Example
• The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}
The CSS class Selector
• The class selector selects HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.) character,
followed by the class name.
• Example
• In this example all HTML elements with class="center" will be red and center-
aligned:
.center {
text-align: center;
color: red;
}
How To Add CSS on HTML
• There are three ways of inserting a style sheet:
1. External CSS
2. Internal CSS
3. Inline CSS
 <!DOCTYPE html>
External CSS <html>
<head>
• With an external style sheet, you can change <link rel="stylesheet" href="mystyle.css">
the look of an entire website by changing just </head>
one file! <body>

• Each HTML page must include a reference to <h1>This is a heading</h1>

the external style sheet file inside the <link> <p>This is a paragraph.</p>
element, inside the head section.
</body>
• External styles are defined within the <link> </html>
element, inside the <head> section of an HTML
page: body {
• An external style sheet can be written in any background-color: lightblue;
text editor, and must be saved with a .css }
extension. h1 {
• The external .css file should not contain any color: navy;
HTML tags. margin-left: 20px;
}
• Here is how the "mystyle.css" file looks:
 <!DOCTYPE html>
<html>
Internal CSS <head>
<style>
body {
background-color: green;
• An internal style sheet may be used if }
one single HTML page has a unique h1 {
style. color: maroon;
margin-left: 40px;
• The internal style is defined inside the }
<style> element, inside the head </style>
</head>
section. <body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
 Inline CSS
• An inline style may be used to apply a
unique style for a single element.
• To use inline styles, add the style attribute
to the relevant element. The style
attribute can contain any CSS property. <!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
 Useful CSS properties
Property Description Values
color Element color
background-color Background color
background-image Sets the background image
width Element width
height Element height
margin Outter margins property
padding Inner margin property
border Border property
border-color Border color
border-width Border width
border-style Border style {none, solid, dotted, inset, dashed solid ...}
border-radius Border radius
font Font properties
font-family Defines the font
font-style Font style {normal, italic, oblique}
font-weight Thickness of the font {normal, bold, lighter, bolder}