Scribd
Upload
6 views21 pages

IWP Notes Unit 2

The document provides an overview of Hyper Text Markup Language (HTML), detailing its history, structure, and essential components for creating web pages. It covers tags, elements, attributes, and various HTML features such as forms, tables, and multimedia elements. Additionally, it includes examples of HTML code and explanations of character entities, symbols, and URLs.

Uploaded by

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

IWP Notes Unit 2

The document provides an overview of Hyper Text Markup Language (HTML), detailing its history, structure, and essential components for creating web pages. It covers tags, elements, attributes, and various HTML features such as forms, tables, and multimedia elements. Additionally, it includes examples of HTML code and explanations of character entities, symbols, and URLs.

Uploaded by

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

Unit - II

Hyper Text Markup Language (HTML)


- Internet scripting programming to develop software (Web Pages)
- ARPAnet – US – defense – network to share & communicate
- 1981 – Standard generalized markup language
- Woking with CERN & decided to have a language for web
- 1989 – started creating the simplified version of HTML
- Founder of HTML – Tim Berner’s Lee
- 1991- HTML V1 made public
o 1993 – Mosaic browser
- 1994 – HTML V2 – IETF – standardised
o 1994 – 96 – Netscape & IE
- 1996 – HTML 3.2 (W3C Standard)
- 1999 – HTML 4.01 – W3C – XHTML standard
- 2014 October – HTML5 released - W3C recommendation
HTML
- HTML allows to create webpages that contains both text and graphics
- All browsers are designed to understand and interpret HTML language
- Hypertext – piece of text with special features of linking to another document
- Markup language – uses tags to markup a text document & instruct the browser how
to display the text
Tags, Element, Attributes
- Tag - Building block of a web page (start with ‘<’ & ends with ‘>’)
- Element – Content within the tag – block-level (Start new line)-p, h1, text-level
- Attribute – specified as property name and value inside the element
Rules
- Tags are not case-sensitive
- Elements opening & closing also Values are case sensitive
- Properly nested
Basic Tags
- Html – fundamental tag – everything within this tag only
- Head – title, link, meta, style
- Body – Content to be displayed in browser
Eg) <!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ………… Web Page Contents ……………….. -->
</body>
</html>

Tags (Elements)
- Paired Tags – (<html> </html>)
- Unpaired Tags (<br>, <hr>, <img>)

Concepts: (All elements has should be marked with Angular Brackets)


Formatting Tags – pre, div, span, p, b, i, u, strong, code, em, mark, small, del, ins, sub, sup,
q, blockquote, address, cite, bdo, font – face, size, color
Heading Tags – h1, h2, h3, h4, h5, h6
Style tags – type=text/css, @import url(fn.css)
Attributes – align, color, bgcolor, rgb(255,0,0), hsl(0,100%,50%), href, src, width, height,
dir- rtl, ltr
Comment - <!-- Contents commented here -- >
Colors – color, background-color, background-image
Anchor links - <a href=”fn.html”>click here</a>
Bookmarks - <a href=”#”>click here</a>
Images - <img src=”/…..Path…../fn.jpg” alt=”University”>
List – ul -li, type – circle, square, disc, ol – li,start, type reversed – A, a, I, i , dl – dt, dd
Tables – table – border, tr, th, td, caption – valign, colspan, rowspan

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Product</th>
</tr>
<tr><th>P No</th>
<th>P Name</th>
<th>Count</th>
</tr>
<tr>
<td>1</td>
<td>Soap</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>2</td>
<td>Detergent</td>
</tr>
</table>
</body>
</html>

Iframes – src, title, width, height


Form – name, method, action, input – text, password, radio, checkbox, date, submit, file,
email, button

Form – activating components


- <form name=”f” method=”get/post” action=”fn.html”>… </form>
- <input type=text name=a1>
- Radio (type=radio)
- Checkbox (type=checkbox)
- Submit (type=submit)
- Button (type=button)
- Color (type=color)
- Tel (type=tel)
- Email (type=email)
- Date (type=date)
- File (type=file)
- Textarea <textarea rows=10 cols=35></textarea>
- Select <select> <option value=a1>apple</option>… </select>
- <input type="button">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="reset">
- <input type="search">
- <input type="submit">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
-
Example
<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many


choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Target Attribute
- <a href=”h1.html” target=”_blank”>click </a>
- Target is: self, parent, top, blank
Mail
- <a href=mailto:[email protected]> Send mail</a>

The Target Attribute


The target attribute specifies where to display the response that is received after
submitting the form.

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

The HTML <form> Elements


 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element


<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

The <select> Element


<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <textarea> Element


<textarea name="message" rows="10" cols="30">
Welcome to Engineering University </textarea>

The <button> Element


<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The <fieldset> and <legend> Elements


<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

The <datalist> Element


<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Text: <input type="text" id="username" name="username"><br>
Password: <input type="password" id="pwd" name="pwd">
Submit: <input type="submit" value="Submit">

Reset: <input type="reset">


Radio: <input type="radio" id="html" name="r1" value="HTML">
<input type="radio" id="css" name="r1" value="CSS">
Checkbox:
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
Button: <input type="button" onclick="alert('Hello World!')" value="Click
Me!">
Color: <input type="color" id="favcolor" name="favcolor">
Date: <input type="date" id="datemin" name="datemin" min="2000-01-02">
Datetime-local: <input type="datetime-local" id="birthdaytime" name="b1">
Email: <input type="email" id="email" name="email">
File: <input type="file" id="myfile" name="myfile">
Hidden: <input type="hidden" id="custId" name="custId" value="3487">
Month: <input type="month" id="bdaymonth" name="bdaymonth">
Number: <input type="number" id="quantity" name="quantity" min="0" max="
100" step="10" value="30">
Range: <input type="range" id="vol" name="vol" min="0" max="50">
Search: <input type="search" id="gsearch" name="gsearch">
Tel: <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]
{2}-[0-9]{3}">
Time: <input type="time" id="appt" name="appt">
URL: <input type="url" id="homepage" name="homepage">
Week: <input type="week" id="week" name="week">

Attributes:

Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")

disabled Specifies that an input field should be disabled

Max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

HTML Character Entities


- Easy to remember
- &lt; || &#60; , &gt; || &#62;
- Non breaking space - &nbsp;
- Ampersand - &amp; || &#38;
- Euro - &euro; || &#8364;
- Copyright - &copy; || &#169;

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" double quotation mark &quot; &#34;

' single quotation mark (apostrophe) &apos; &#39;

¢ cent &cent; &#162;

£ pound &pound; &#163;


¥ yen &yen; &#165;

€ euro &euro; &#8364;

© copyright &copy; &#169;

® registered trademark &reg; &#174;

HTML Symbols
Symbols that are not present on your keyboard can also be added by using entities.

Display the euro sign, €, with an entity name, a decimal, and a hexadecimal value:

Char Number Entity Description

∀ &#8704; &forall; FOR ALL

∂ &#8706; &part; PARTIAL DIFFERENTIAL

∃ &#8707; &exist; THERE EXISTS

∅ &#8709; &empty; EMPTY SETS

∇ &#8711; &nabla; NABLA

∈ &#8712; &isin; ELEMENT OF

∉ &#8713; &notin; NOT AN ELEMENT OF

∋ &#8715; &ni; CONTAINS AS MEMBER

∏ &#8719; &prod; N-ARY PRODUCT

∑ &#8721; &sum; N-ARY SUMMATION

UTF-8 Characters
- Charset
o 48 – 57 – numbers 0 - 9
o 65 – 90 – Alphabets A-Z
o 97 – 122 – Alphabets a-z
<body>
<p>I will display A B C</p>
<p>I will display &#65; &#66; &#67;</p>
</body>
Language Charset
- Language code
o <html lang=en>
o <html lang=en-IN> (country code)

Emojis in HTML
Emojis are characters from the UTF-8 character set: 😄 😍 💗

What are Emojis?


Emojis look like images, or icons, but they are not.

- &#128516;
- &#128507;
- &#129510;

Emojis are also characters from the UTF-8 alphabet:

 😄 is 128516
 😍 is 128525
 💗 is 128151

<h1>My First Emoji</h1>


<p>&#128512;</p>

HTML Uniform Resource Locators


URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL.

A Uniform Resource Locator (URL) is used to address a document (or other data) on the
web.

scheme://prefix.domain:port/path/filename

 scheme - defines the type of Internet service (most common is http or https)
 prefix - defines a domain prefix (default for http is www)
 domain - defines the Internet domain name (like w3schools.com)
 port - defines the port number at the host (default for http is 80)
 path - defines a path at the server (If omitted: the root directory of the site)
 filename - defines the name of a document or resource

Common URL Schemes


The table below lists some common schemes:

Scheme Short for Used for

http HyperText Transfer Protocol Common web pages. Not encrypted

https Secure HyperText Transfer Protocol Secure web pages. Encrypted

ftp File Transfer Protocol Downloading or uploading files

file A file on your computer

Audio / Video Controls


- <audio controls autoplay>
<source src=”song.mp3” type=”audio/mpeg”>
</audio>
- <video width=300 height=300 controls>
<source src=”fn.mp4” type=”Video/mp4”>
</video>
Conversion Measures:
- Px to em convertor
- 16px=1em
- H1 – 2em
- H2 – 1.5em
- H3 – 1.17em
- H4 – 1 em
- H5 – 0.83 em
- H6 – 0.75 em

HTML Image Maps


The HTML <map> tag defines an image map. An image map is an image with clickable
areas. The areas are defined with one or more <area> tags.

The <map> element is used to create an image map, and is linked to the image by using
the required name attribute:
<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute .

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Shape – rect, circle,poly, default

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from
the top:

<map name="workmap">

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

<area shape="circle" coords="337,300,44" href="coffee.htm">

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,8


5,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm"></map>

HTML - Frames
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.
A collection of frames in the browser window is known as a frameset. The window is
divided into frames in a similar way the tables are organized into rows and columns.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in
your webpages −
 Some smaller devices cannot cope with frames often because their screen is not
big enough to be divided up.
 Sometimes your page will be displayed differently on different computers due
to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag
defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated
by <frame> tag and it defines which HTML document shall open into the frame.
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

HTML Canvas Graphics


- HTML5 Canvas – draws 2D graphics
- Resolution dependent
<canvas id=myid width=500 height=500 style=”border:1px solid #000000”>
<canvas>
<script>
var c=document.getElementById(“myid”);
var ctx=c.getContext(“2D”);
ctx.lineTo(200,400);
ctx.font=”40px”;
ctx.fillText(“Welcome”,20,80);
</script>

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

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and
no content.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid


#000000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
For Circle:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
For Text:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Stroke Text:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Linear Gradient
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

Circular Gradient
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

For Image:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>

HTML SVG Graphics


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

SVG (Scalar Vector Graphics)


- Language for describing 2D lang
- Container for graphics
- Drawing, boxes, circles, text, images…
- Support for event handlers
- Not suited for gaming applications
<svg width=100 height=100>
<circle cx=50 cy=50 r=40 stroke=green stroke-width=4 fill=Yellow/>
<rect width=200 height=200 style=”fill:rgb(0,0,255); stroke-width:10;
stroke:rgb(0,0,255)”>
</svg>

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" />
</svg>

</body>
</html>

SVG Rectangle
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;
stroke:rgb(0,0,0) " />
</svg>

SVG Rounded Rectangle


<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" />
</svg>

SVG Star
<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;" />
</svg>

Differences Between SVG and Canvas


Comparison of Canvas and SVG
Canvas SVG

 Resolution dependent  Resolution independent


 No support for event  Support for event handlers
handlers  Best suited for applications with
 Poor text rendering large rendering areas (Google
capabilities Maps)
 You can save the resulting  Slow rendering if complex
image as .png or .jpg (anything that uses the DOM a lot
 Well suited for graphic- will be slow)
intensive games  Not suited for game applications

<path d=…..>
M, L, V, H, C, S, Q, T, Z
- Absolute
m, l, v, h – relative

eg)
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round"
strokeLinejoin="round"
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-
2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25
2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-
1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>

HTML Layout Elements and Techniques


Websites often display content in multiple columns

HTML Layout
Special Tags
- <code> <kbd>
Semantic Tags – describes the meaning to both browser and developer
- Non semantic – div, span
- Semantic – Form, Table, List, article, all layout tags

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

HTML Responsive Web Design


A responsive web design will automatically adjust for different screen sizes and
viewports.
What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize, hide,
shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and
phones)

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>

Responsive Text Size


The text size can be set with a "vw" unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Hello World
Resize the browser window to see how the text size scales.

<h1 style="font-size:10vw">Hello World</h1>

HTML Computer Code Elements


HTML contains several elements for defining user input and computer code.

<code>
x = 5;
y = 6;
z = x + y;
</code>
The HTML <kbd> element is used to define keyboard input. The content inside is
displayed in the browser's default monospace font.

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

HTML Semantic Elements


Semantic elements = elements with a meaning.

What are Semantic Elements?


A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML


 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

HTML <nav> Element


The <nav> element defines a set of navigation links.

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML <aside> Element


The <aside> element defines some content aside from the content it is placed in (like a
sidebar).

<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my family!
</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</aside>

You might also like