Scribd
Upload
21 views96 pages

Unit1 1

The document provides an overview of HTML, its origins, and evolution, explaining its role as a markup language for web development. It outlines the reasons to learn HTML, its features, syntax, and various text formatting tags. Additionally, it covers HTML elements such as links, images, and the use of the <font> tag for text styling.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views96 pages

Unit1 1

The document provides an overview of HTML, its origins, and evolution, explaining its role as a markup language for web development. It outlines the reasons to learn HTML, its features, syntax, and various text formatting tags. Additionally, it covers HTML elements such as links, images, and the use of the <font> tag for text styling.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 96

Computer Multimedia

&
Animation
Unit I

Web Design
Origins and evolution of HTML
• HyperText Markup Language (HTML) was initially
developed by Sir Tim Berners-Lee in late 1991. It was
designed as a standard language for creating and
formatting documents on the World Wide Web. All
the web pages on the internet are made from HTML.

• From 1990 to 1995, HTML underwent changes and


extensions, initially at CERN and then at the IETF. The
World Wide Web Consortium (W3C) became the new
home for HTML development.
• HTML stands for HyperText Markup Language. It is
the standard language used to create and structure
content on the web.

• HTML is a markup language, not a programming


language, meaning it annotates text to define how it is
structured and displayed by web browsers.

• It forms the building blocks of all websites and is


complemented by CSS for style and JavaScript for
interactivity.
History and Evolution
History and Evolution
WHATWG stands for Web
Hypertext Application
Technology Working Group. It's
a community that develops and
maintains web standards,
Why Learn HTML?
5 common reasons to learn HTML:
1.Build Websites: HTML is the basic building block for creating any website. Learning
HTML can help you pursue a career in web development.

2.Customize Content: Allows you to edit web pages, emails, or templates to fit your
needs.

3.Understand how the web works: Helps you grasp how the internet works and how
web pages are structured.

4.Employment Opportunities: According to Bureau of Labor Statistics projects that


employment for web developers will grow 16% between 2022-2032, which is much
faster than the average across all occupations.

5.Learn Easily: HTML is beginner-friendly, making it a great first step into the world
of coding and technology
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.


BCA FOURTH SEM
•All HTML tags must enclosed within < > these
brackets.

•Every tag in HTML perform different tasks.

•If you have used an open tag <tag>, then you


must use a close tag </tag> (except some tags)

Syntax
<tag> content </tag>
How to Save an HTML file?
To save an HTML file, follow these steps −

•Open a text editor (like Notepad, Sublime Text, Atom, etc.) on your system.

•Write your HTML code.

•Click on the "File" menu in your text editor.

•Click on "Save As".

•In the dialogue box, choose the location where you want to save the file.

•Type a name for your file, followed by the .html extension so that the browser

interprets it as an HTML file. For example, index.html.

•Click "Save".
<html>
<head> Output
<title>
heading tags
</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Blockquotes
The Content of <blockquote> can be made to look different from the surrounding
text .It set a block of text off from the normal flow and appearance of text.
Browsers often indent, and sometimes italicize

<!DOCTYPE html> Output


<html>
<body>
<h1>Blockquote </h1> Blockquote
<blockquote>
blockquote content on web page
blockquote content on web page
</blockquote>
</body>
</html>
Categories of HTML Text Formatting

HTML text formatting can be divided into two main categories: Logical
Tags and Physical Tags.

1. Logical Tags
Logical tags convey the meaning or importance of the text without
necessarily altering its visual appearance. These tags help browsers,
search engines, and assistive technologies understand the purpose of the
text.
•<em>: Emphasizes text, typically rendered in italics. It implies that the
text carries special importance or requires emphasis.
•<strong>: Marks text as important, often displayed in bold. It implies the
content is of strong importance.
2. Physical Tags

Physical tags directly affect how text looks on the


webpage by changing the font, size, or style.

•<b>: Displays text in bold without implying


importance.

•<i>: Italicizes text without any implied emphasis.


Here’s a list of commonly used HTML text formatting tags and their description:

Tags Description
<i> Showcases italicized text.

<small> Renders text in a smaller font size.

<ins> Highlights added or inserted text.

<sub> Creates subscript text.

<strong> Emphasizes text with importance, often in bold.

<b> Displays text in a bold format.

<mark> Accentuates text with a background highlight.

<del> Strikes through text to signify deletion.

<em> Adds emphasis to text, commonly styled as italic.

<sup> Formats text as superscript.


HTML Formatting Elements
1. <i> – Italicizes text
Use the <i> tag to display text in italics without implying emphasis.
<i>This is italic text.</i>
2. <small> – Reduces the font size of the text
The <small> tag renders text in a smaller font than the surrounding text.
<small>This text is smaller than the rest.</small>
3. <ins> – Highlights inserted text
The <ins> tag marks text as newly added or inserted, often displayed with an underline.
<ins>This is inserted text.</ins>
4. <sub> – Displays subscript text
Use the <sub> tag for subscripted text, often used in chemical formulas or footnotes.
H<sub>2</sub>O
5. <strong> – Emphasizes important text, often rendered in bold
The <strong> tag is semantically meaningful and indicates that the text is of high importance.
<strong>This text is bold and important.</strong>
6. <b> – Makes text bold
The <b> tag visually makes the text bold but does not imply any special significance.
<b>This is bold text.</b>
7. <mark> – Highlights text with a background color
The <mark> tag highlights text with a background color, similar to using a highlighter on
paper.
<mark>This text is highlighted.</mark>
8. <del> – Strikes through text
The <del> tag is used to show that text has been deleted or is no longer relevant.
<del>This text is crossed out.</del>
9. <em> – Emphasizes text, typically italicized
The <em> tag is used for emphasized text and is usually rendered in italics to highlight
importance.
<em>This text is emphasized.</em>
10. <sup> – Displays superscript text
Use the <sup> tag to show superscripted text, commonly used in exponents or footnotes.
E = mc<sup>2</sup>
Basic Text Formatting
<!DOCTYPE html>
<html lang="en"> <em>Emphasized:</em>
This text is emphasized and italic.
</p>
<head> <p>
<meta charset="UTF-8"> <b>Bold:</b>
<title>Text Formatting This text is bold.
Example</title> </p>
<p>
</head> <i>Italic:</i>
This text is italic.
<body> </p>
<p> <p>
<strong>Strong:</strong> <mark>Marked:</mark>
This text is highlighted.
This text is important and bold. </p>
</p> </body>
<p>
</html>
Combining Logical and Physical Tags

<!DOCTYPE html>
<html lang="en"> <p>The chemical formula of water is
<head> H<sub>2</sub>O.</p>
<meta charset="UTF-8"> <p> <del>Deleted text</del> and
<!--UTF-8 is a character encoding standard that's used in <ins>inserted text</ins>
HTML to display webpages. It's the default encoding for are shown here.
HTML5. --> </p>
<title>Advanced Text Formatting</title> <p><small>Smaller text</small> </p>
</head> <p>Normal flow of Text</p>
<p><big>Bigger text</big> </p>
<body>
<p>This is a <p>E = mc<sup>2</sup></p>
<strong><em>very important</em></strong> </body>
message. </p>
</html>
Output
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The less-than sign: &lt;</h2>


HTML Entity Example
</body> The less-than sign: <
</html>
<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The ampersand (and) sign:


&amp;</h2> HTML Entity Example
The ampersand (and) sign: &

</body>
</html>
output
<html>
<body>
<p>Horizontal line</p>
<hr>
<h1 align="center">HTML</h1>
<hr color="red" align="center" width="100" size="10"/>
<h1 align="center">CSS</h1>
<hr color="blue" align="center" width="100" size="10"/>
<h1 align="center">JAVASCRIPT</h1>
<hr color="green" align="center" width="200"
size="10"/>
</body>
</html>
HTML font Tag
The HTML <font> Tag plays an important role in
the web page to create an attractive and readable
web page. The font tag is used to change the
color, size, and style of a text and it was used in
HTML4. The base font tag is used to set all the
text to the same size, color, and face.
Syntax

<font size="number" face="font_family"


color="color_name|hex_number|rgb_number">

Font Attributes

•Font Size
•Font Type
•Font Color
<!DOCTYPE html>
<html>
<body>
<p>This is sample paragraph</p>
<font face="Arial" size="4" color="green">
This paragraph style by font tag
</font>
</body>

</html>
Font Size
The Font size attribute is used to adjust the size of the text in the
HTML document using a font tag with the size attribute. The range
of size of the font in HTML is from 1 to 7 and the default size is 3.
<font size="5">BCA IV th SEM - CMA</font><br />
<!DOCTYPE html> <font size="6">BCA IV th SEM - CMA</font><br />
<html> <font size="7">BCA IV th SEM - CMA</font>
<body> <!--HTML font size tag ends here-->
<!--HTML font size tag starts here--> </body>
<font size="1"></font><br /> </html>
<font size="2">BCA IV th SEM - CMA</font><br />
<font size="3">BCA IV th SEM - CMA</font><br />
<font size="4">BCA IV th SEM - CMA</font><br />
HTML font color Attribute
The HTML font color attribute is used to specify the text color within the <font> tag.

Syntax
<font color="color_name|hex_number|rgb_number">
Attribute Values:

Type How It Works Example Usage


Pick from common color names
Color Name "red"
to set the text color.

Use a 6-digit hex code to define


Hex Code "#0000ff"
specific colors.

Define colors using the RGB


RGB Code model with three values for red, "rgb(0, 153, 0)"
green, and blue.
<!DOCTYPE html> <font size="6" face="arial" color="#008000">
<html> BCA IV th SEM - CMA
</font>
<head>
<title> <br>
HTML | <font> color Attribute
</title> <font size="6" color="rgb(128, 128, 0)">
</head>
</font>
<body>
</body>
<font size="6" face="verdana"
color="green">
BCA IV th SEM - CMA </html>
</font>
<br>
HTML Images
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.
Image Formats:
1. GIF (Graphic Interchange Format)8-bit color (256 different
colors)
2. JPEG (Joint Photographic Experts Group)
3. It has 24-bit color representation (16 million different
colors). Both use compression, but JPEGcompression is
better.
4. Portable Network Graphics (PNG)
5. It is relatively new. Should eventually replace both gif and
jpeg
Images are inserted into a document with the <img /> tag with the
src attribute. Src means source of the image. The alt attribute
means” Alternate Text” which is required by XHTML where the
image cannot be loaded by the browser. Purpose of alt attribute is
for non graphical browsers and browsers with images turned off.

<img src = “COMPUTER.jpg" alt = "Picture of COMPUTER " />

The <img> tag has 30 different attributes, including width and


height (in pixels)
OUTPUT
<html>
<head>
<title>
Image
</title>
</head>
<body>
<img src=“SCANNER.jpg" height="300"
width="400" border="4">
</body>
</html>
Hypertext Link
Link is the convenient way for the browser user to get from one
document to any logically related document. A hypertext link acts as a
pointer to some resource. The resource can be an HTML document
anywhere on the web, or it may be another place in the same document or
be a specific place (rather than the top) in some other document.
A link is specified with the href (hypertext reference) attribute of <a> (the
anchor tag).<a> tag is inline tag.
The content of <a> is the visual link in the document (clickable link). Links
are implicitly rendered in a different color than the surrounding text.
Sometimes they underlined.
HTML Links - 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.

Example:
<a href="https://www.google.com/">Visit Google Site</a>

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
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
•_self - Default. Opens the document in the same window/tab as it was clicked

•_blank - Opens the document in a new window or tab

•_parent - Opens the document in the parent frame

•_top - Opens the document in the full body of the window

Example:
<a href=https://www.google.com/ target="_blank" >Visit Google Site</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email program (to let
them send a new email):

<a href="mailto:[email protected]">Send email</a>

<html>
<head>
<title>
linking page
output
</title>
</head>
<body>
<a href="2.html">Click here</a><br>
<a href="file1.docx">My Word File</a><br>
<a href="file1.xlsx">My Excel File</a><br>
<a href="file1.pptx">My Powerpoint File</a>
</body>
</html>
<ol type="i">
<html>
<li>C</li>
Output
<head>
<li>Python</li>
<title>
<li>Java</li>
order listing
</title>
</ol>
</head>
<ol type="A">
<body>
<li>C</li>
<H2>ORDERED LIST</H2>
<li>Python</li>
<ol>
<li>Java</li>
<li>C</li>
<li>Python</li>
</ol>
<li>Java</li>
<ol type="a">
</ol>
<li>C</li>
<ol type="I">
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>Java</li>
</ol>
</body>
</ol>
</html>
<html> <ul type="circle">
Output
<head> <li>C</li>
<title> <li>Python</li>
Unorder listing <li>Java</li>
</title>
</head> </ul>
<body> <ul type="disc">
<H2>UNORDERED LIST</H2> <li>C</li>
<ul> <li>Python</li>
<li>C</li> <li>Java</li>
<li>Python</li>
<li>Java</li> </ul>
</ul> </body>
<ul type="square"> </html>
<li>C</li>
<li>Python</li>
<li>Java</li>
</ul>
<html> <li>Web Designing subjects </li>
<head> <ul type="circle">
<title> <li>HTML</li>
Output
Nested listing <li>CSS</li>
<li>JAVA SCRIPT</li>
</title>
</ul>
</head> </li>
<body> </li>
<ol>
<li>Programming </body>
</html>
subjects
<ul type="square">
<li>C</li>
<li>Python</li>
<li>Java</li>
</ul>
<html>
<head>
<title>definition list</title>
</head> Output
<body>
<h2>Definition List</h2>
<dl>
<dt>COMPUTER</dt>
<dd>Computer is an electronic device accepts data
from
user and process the data ,gives you required
result as output
</dd>
</dt>
</dl>
<dl>
<dt>What is HTML?</dt>
<dd>HTML is the standard markup language for
creating Web pages.
</dd>
</dt>
</dl>
</body>
</html>
Forms
• A form is the usual way getting information from a browser to a server.
• HTML has tags to create a collection of objects that implement this
information gathering
– The objects are called widgets or controls (e.g., radio buttons, checkboxes, text
,password ,reset, submit )
– All control tags are inline tags
– Most controls are used to gather information from the user in the form of
either text or button selections
– Every form data requires submit button
• When the Submit button of a form is clicked, the form data is encoded and
are sent to the server for processing
The form Element
All of the widgets, or components of a form are defined in the content of a
<form> tag. The only required attribute of <form> is action, which specifies
the URL of the application on the web server that is to be called when the
Submit button is clicked.
action = http://www.jsssmi.com/index.php
If the form has no action, the value of action is the empty string.
The method attribute of <form> specifies one of the two possible techniques
of transferring the form data to the server, get and post. The method
attribute specifies how to send form- data to the server. Default is get. In
both techniques the form data is coded into a text string when the user clicks
the Submit button. This text string is often called query string .
Elements Descriptions
<label> It defines labels for <form> elements.
It is used to get input data from the form in various types such
<input>
as text, password, email, etc by changing its type.
It defines a clickable button to control other elements or
<button>
execute a functionality.
<select> It is used to create a drop-down list.
<textarea> It is used to get input long text content.
It is used to draw a box around other form elements and group
<fieldset>
the related data.
<legend> It defines a caption for fieldset elements
<datalist> It is used to specify pre-defined list options for input controls.
<output> It displays the output of performed calculations.
<option> It is used to define options in a drop-down list.
<optgroup> It is used to define group-related options in a drop-down list.
The< input> tag
Many of the commonly used controls such as text, passwords checkboxes,
Reset, Submit ,radio buttons etc.are created with the <input> tag.
The type attribute of <input> specifies the kind of widget being created such as
checkbox, text, password,radio button etc.
All the previously listed controls except Reset and submit also require a name
attribute which becomes the name of the value of the control within the form data.
The controls for checkboxes and radio buttons require value attributes which
initializes the value of the control.

Textboxes as well as most other control elements should be labeled.

Eg: <label> Phone: <input type = “text” name = “phone” /> </label>
• Text

Text control is often used to gather information from the user such as the user’s
name or address. Creates a horizontal box for text input. Default size is 20; it can be
changed with the size attribute. If more characters are entered than will fit, the box is
scrolled (shifted) left.
<input type = "text" name = "Phone" size = “25“ />
If you don’t want to allow the user to type more characters than will fit, set
maxlength, which causes excess input to be ignored
<input type = "text" name = "Phone” size = “25“ maxlength =“25” />
If the contents of the textbox should not be displayed when it is entered by the user,
a password control can be used.
<input type= “password” name = “myPassword” size = “10” maxlength = “10”
– />
Checkboxes
It is used to collect multiple choice input. A checkbox control is a single
button that is either on/off (checked or not) . Every checkbox requires a name
attribute and value attribute, which is the widget’s value in the form data when
the checkbox is ‘checked’. A checkbox that is not ‘checked’ (off) contribute no
value to the form data. To initialize a checkbox to ‘checked’, the checked
attribute of checkbox must be set to "checked“.

Check box should appear in the label elements.


<!DOCTYPE html>
<html lang="en">

<head>
<title>Html Forms</title>
</head>

<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>

<input type="submit" value="Submit">


</form>
</body>

</html>
Earlier Versions of HTML
With emerging technologies and changing industry standards, HTML has evolved to meet these needs.
Below is a brief overview of earlier HTML versions.
HTML 1.0
It is the first version of HTML language which was released in 1991. That was the basic version of HTML
language with fewer features than the latest versions.
HTML 2.0
HTML 2.0 was developed in 1995 with the intention of improving the first version. This version supported
features like forms with basic elements such as text boxes, buttons, etc.
HTML 3.2
After HTML 2.0, HTML 3.2 was released in 1997. This version provided extra features for form elements and
could make tables. Another important feature in this version was support for CSS (Cascading Style Sheet). CSS
delivers features that make HTML tags look better and style HTML elements. Most browsers nowadays also
support this version.
HTML 4.01
This version came in 1999 and provided extra support for CSS. This version supported external styling. Now
CSS files need not be embedded in the HTML file itself. Instead, They can be included in HTML. That helped
to avoid writing repetitive styles for HTML pages.
Overview of HTML5
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.
HTML HTML5
It didn’t support audio and video without the use of flash It supports audio and video controls with the use of
player support. <audio> and <video> tags.
It uses SQL databases and application cache to store offline
It uses cookies to store temporary data.
data.
Allows JavaScript to run in the background. This is possible
Does not allow JavaScript to run in the browser.
due to JS Web worker API in HTML5.
Vector graphics are possible in HTML with the help of Vector graphics are additionally an integral part of HTML5
various technologies such as VML, Silver-light, Flash, etc. like SVG and Canvas.
It does not allow drag and drop effects. It allows drag and drop effects.
Not possible to draw shapes like circle, rectangle, triangle HTML5 allows to draw shapes like circle, rectangle, triangle
etc. etc.
It supported by all new browser like Firefox, Mozilla,
It works with all old browsers.
Chrome, Safari, etc.
It can not handle inaccurate syntax. It is capable of handling inaccurate syntax.
Being an older version , it is not fast , flexible , and efficient It is efficient, flexible and more fast in comparison to
as compared to HTML5. HTML.
Attributes like charset, async and ping are absent in HTML. Attributes of charset, async and ping are a part of HTML 5.
HTML HTML5
<HTML>,<Body> , and <Head> tags are These tags can be omitted while writing
mandatory while writing a HTML code. HTML code.
Older version of HTML are less mobile-
HTML5 language is more mobile-friendly.
friendly.
Doctype declaration is too long and Doctype declaration is quite simple and
complicated. easy.
New element for web structure like nav,
Elements like nav, header were not present.
header, footer etc.
Character encoding is long and complicated. Character encoding is simple and easy.
It is almost impossible to get true
One can track the GeoLocation of a user
GeoLocation of user with the help of
easily by using JS GeoLocation API.
browser.

You might also like