WEB TECHNOLOGY CONCEPTS / WEB
TECHNOLOGIES
(BTCO15504 / BTCO13502)
INTRODUCTION TO HTML
[Link]
Prof. Bhumika Patel
Gheewala Sarvajanik College of Eng. & Tech., Surat HTML
WTP 1
INTRODUCTION TO HTML (Contd.)
•Study the Requirements
•Design
•Write the HTML Code
•Test
•Upload
•Re-Iterate
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 2
INTRODUCTION TO HTML (Contd.)
•Its important to make sure you understand what you are
being asked to do before you start
•Make some sketches at the start to play with ideas
•Work out which pages should link to each other
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 3
HTML: The Development Process
Design
•Tries to provide a solution to match the requirements
•Application like Dreamweaver in windows
•Websites can require a large amount of work with art and
graphics packages as well as code tools
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 4
HTML: The Development Process
Write Code
•Writing HTML code
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 5
HTML: The Development Process
Test
•After developing HTML, the next stage will be to point the
browser at the page.
•When working with IDE, it will show how a page looks like
simply by clicking a button.
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 6
HTML: The Development Process
Upload, Re-Iterate
•Upload for public viewing
•Correcting bugs / upgrading pages
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 7
Hyper Text Markup Language
(HTML)
•Text formatting language used to develop Web
Pages
•Interpreted by a browser
•Contains a set of special codes (TAGs)
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 8
Loading pages with the Browser
•A page can be loaded into a browser
By writing in a URL in the address bar
By going to the menu and clicking on ‘file’ > ‘open’ if it is a local
file
•Browser will try finding files beginning with [Link], then
[Link] then [Link]…
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 9
A Page on the Web
•If we point a web browser at a document, it will do its best to
read it.
•For example, if we use open on a file menu of the browser
and enter the name of a local file called [Link] containing
some simple text ‘Hello SCET’, it will actually read and display
it.
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 10
HTML Document Structure
•Make a file with extension .html or .htm
•Open a new blank file and write
<html>
A little bit of Hypertext.
</html>
•Anything written in <> is known as a Tag.
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 11
HTML TAGs
•TAGs are instructions that tell the browser to format
a text instead of just showing it on the screen.
•Begin with an open angle bracket (<) and
•End with a close angle bracket (>) i.e., <TAG>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 12
HTML TAGs
•Types of TAGs :
Paired Tags : Consists of a companion tag
e.g. <HTML> </HTML>, <B> </B>
Singular Tags : Does not have a companion tag
e.g. <BR>, <HR>
•Attributes of a TAG :
Additional information supplied to a tag
e.g. <IMG SRC=“[Link]” ALIGN=TOP HEIGHT=30>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 13
HTML TAGs
•Entire Webpage is enclosed within <HTML> </HTML> tags.
•<HTML> is divided into two parts :
Head portion : Denoted by <HEAD> </HEAD>
Body portion : Denoted by <BODY> </BODY>
•HEAD : Contains the header information for a document
<TITLE> : Shows title of webpage in title bar of browser
<SCRIPT> : Scripting language that can be used
•Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 14
HTML TAGs
•BODY : <BODY> … </BODY>
•Contains contents (text, images, audio files, video files) to be
displayed in a browser window.
•Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 15
HTML TAGs
•Attributes of <BODY> tag :
BGCOLOR
BACKGROUND
TEXT
LINK, ALINK (Active Link), VLINK (Visited Link)
•BGCOLOR :
Specifies the background color
Color name / equivalent hexadecimal number
Default color : White
e.g. < BODY BGCOLOR = yellow >
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 16
Attributes of <BODY> tag
•BACKGROUD :
Specifies the name of the image file that is used as the background
e.g. < BODY BACKGROUND = “[Link]” >
C:\
[Link]
TEST
[Link]
<BODY BACKGROUND = “../[Link]”>
[Link] <BODY BACKGROUND = “[Link]”>
<BODY BACKGROUND = “Images/[Link]”>
Images
[Link]
Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 17
Attributes of <BODY> tag
• TEXT :
Sets the Text color
Default color : Black
e.g. < BODY TEXT = red >
•LINK, ALINK (an Active Link), VLINK (Visited Link) :
LINK :Specifies color of hyperlink.
Default color : Blue
ALINK :Specifies color of hyperlink that we are activating.
VLINK :Specifies color of hyperlink that are visited.
Default color : Red
•Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 18
HTML Document Structure
•Example
<html>
<head>
<title>
The amazing art of Web Programming
</title>
</head>
<body>
A little bit of Hypertext
</body>
</html>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 19
Formatting and Fonts
• <br> Break Tag :
Break the line
e.g. <body> hypertext <br> makes the world <br> go round
</body>
•<i> … </i> Italic Tag :
Format the text in Italic format
•<b> … </b> Bold Tag :
Format the text in Bold format
•<tt> … </tt> Typewriter effect Tag :
Format the text in typewriter effect
•<em> … </em> emphasis Tag :
emphasis the text
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 20
Formatting and Fonts
• <blink> .. </blink> Blink Tag :
Makes the text blink
does not work in all browsers
•<sup> … </sup> Superscript Tag :
Format the text in Superscript format
•<sub> … </sub> Subscript Tag :
Format the text in Subscript format
•Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 21
Font Sizes
•<font size = … >
•<h..>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 22
Aligning the Text
• align attribute
•Ex: <p align=“center”> centered Text </p>
•<P> - paragraph tag
•Ex: <h1 align=“right”> right aligned text </h1>
•<h1> - heading tag
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 23
Commenting Codes
•Comments : <!-- … -->
•Ex: <!-- This is a complex part of the web page, it
adds a border and several types of font -->
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 24
Color
•<body bgcolor= value>
•<font color= value>
•Values are based on RGB scheme, usually entered as
hexadecimal numbers.
•Ex: <body bgcolor=“#800000”>
•Ex: <body text=“#FFFF00”>
•Ex: <font color=“yellow”>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 25
Color
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 26
Hyperlinks
•<a href=“URL”> The text link </a>
•To open selected link in a new window
<a href=“URL” target=“_blank”> The text link </a>
•Links within already loaded page
<html>
<a name=“thetop”> Intro </a> <br>
This is a long document <br> <hr>
<a href=“#thetop”> Back to the Top </a>
</html>
The name attribute specifies the name of an anchor
•Reference to sub-directories
<a href=“images/[Link]”> my day out </a>
•File above the directory
<a href=“../[Link]”> up to the other page </a>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 27
Lists
•Types of Lists :
Unordered List (Bullets)
Ordered List (Numbering)
Definition List
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 28
Types of Lists
•Unordered List :
Starts with <ul> and ends with </ul>
Each list item starts with <li>
Attribute : TYPE – Specifies the type of the bullet.
TYPE = fillround – solid round black bullet
TYPE = square – solid square black bullet
•Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 29
Types of Lists
• Ordered List :
Starts with <ol> and ends with </ol>
Each list item starts with <li>
Attributes :
TYPE – Controls numbering scheme
TYPE = “1” – numbers (1, 2, ….)
TYPE = “A” – uppercase letters (A, B, ….)
TYPE = “a” – lowercase letters (a, b, ….)
TYPE = “I” – uppercase roman numerals (I, II, ….)
TYPE = “i” – lowercase roman numerals (i, ii, ….)
START – Alters the numbering sequence
VALUE – Changes numbering sequence in middle of
ordered list
Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 30
Types of Lists
• Definition List :
Starts with <dl> and ends with </dl>
Consists of two parts:
Definition Term : appears after tag <DT>
Definition Description : appears after tag <DD>
Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 31
Nested Lists
•Nest one list within another
•Ex:
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 32
Tables
•Show data in a tabular form
•Table structure
<html>
<table>
<tr>
<td> column item 1 </td>
<td> column item 2 </td>
</tr>
<tr>
<td> another item </td>
<td> and another </td>
</tr>
</table>
</html>
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 33
Table Headers
•Table with properly defined headers: Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 34
Irregular Tables The rowspan attribute specifies the
number of rows a cell should span.
•Example : (Table_ex_2.html) The colspan attribute defines the number
<html>
<table border> of columns a cell should span.
<tr>
<th rowspan=2></th>
<th colspan=3> Tube Station </th>
</tr>
<tr>
<th> Green Park </th>
<th> Oxford Circus</th>
<th> Euston </th>
</tr>
<tr>
<th> Tube </th>
<td align=center> 5 mins </td>
<td align=center> 8 mins </td>
<td align=center> 10 mins </td>
</tr>
<tr>
<th> Bus </th>
<td> 12 mins </td>
<td> 14 mins </td>
<td> 20 mins </td>
</tr>
</table>
</html>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 35
Tables and Page Layout
•Tables can be used to format the layout of an HTML page
•Attributes
border: sets the border width in pixels around the table
width: percentage of the screen
cellpadding: gives the distance in pixels between the
inner border and the text
cellspacing: sets the spacing in pixels between the inner
and outer borders
valign: puts the data in the table at the top, middle or
bottom
•Example (Table_ex_3.html)
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 36
Images
•HTML can be used to place images within pages
•<img src=“filename”>
•Positioning and Placing Images
<html>
<img src=“[Link]”>
my holidays!!
<p> snow </p>
</html>
Above code places the image [Link] on a page with
the writing straight after it.
align attribute: makes any accompanying text wrap
around the image at various positions
(bottom/middle/top)
<center> tag places the image to the middle of the page
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 37
Images
•Positioning and Placing Images
hspace option: The hspace attribute specifies the
whitespace on left and right side of an image.
(left/right in pixels) e.g.
vspace option: The vspace attribute specifies the
whitespace on top and bottom of an image.
(above/below)
To display border around image, border=n
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 38
Images
•Resizing an Image
<img scr=“[Link]” height=100 width=100>
<img scr=“[Link]” height=50% width=25%>
If failed to load image, we can display message
using alt
<img scr=“[Link]” alt=“Image Mypicture is not
available”>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 39
Images
•Background images
<body background=“[Link]”>
•Image may also be used as a link rather than a text
<a href=“[Link]”> <img src=“[Link]”></a>
•Example (11_Image_Border_Width_Height_Hspace_Vspace_ALT.html)
•Image map:
•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.
•Examples…
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 40
HTML Forms
•Collect information from the user
•Making a form
<form action=“[Link]” method=“post”>
action: tells HTML where to send the collected
information
method: describes the way to send the information
GET:
Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user want to bookmark the result
GET is better for non-secure data, like query strings in Google
POST:
Appends form-data inside the body of the HTTP request (data is not shown
in URL)
Has no size limitations
Form submissions with POST cannot be bookmarked
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 41
HTML Forms
•Types of input
<input> tag: takes input from the user
Ex: Enter your id <input name=“id” size=35>
name: refers to name of the input
size: entry box in characters
<input type=“text” />
default input type
<input type=“password” />
Asterisk is printed instead of text
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 42
HTML Forms
•Types of input
<input type=“checkbox” />
Toggled between checked or unchecked
<input type=“radio” />
From a group of radio buttons, only one can be
selected
<input type=“file” />
Give a box to choose a file
<input type=“submit” />
Allows a form to be submitted
<input type=“image”>
Submits the form when selected
Requires src attribute to specify an associated image
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 43
HTML Forms
•Types of input
<input type=“button” />
Makes a button available
<input type=“reset” />
Resets the form to its initial state when selected
<input type=“hidden” />
Allows hidden data to be passed along with the form
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 44
HTML Forms
•Text Areas
Large text to write comments or a long message
Ex: Leave your comments here :
<textarea name=“comments” rows=“10” cols=“70”
wrap=“#wrap”> Message:
</textarea>
#wrap: off/virtual/physical
The wrap options are the most tricky part of text areas.
If we set wrap=“off”the text is handled as one long sequence
of text without linebreaks.
If we set wrap=“virtual” the text appears on your page as if it
recognized linebreaks - but when the form is submitted the
linebreaks are turned off.
If you set wrap=“physical” the text is submitted exactly as it
appears on the screen - linebreaks included.
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 45
HTML Forms
•Drop Down Menus
To choose one option from the drop down menu
Ex:
<select>
<option value=“selected1”> Option 1 </option>
<option value=“selected2”> Option 2 </option>
<option value=“selected3”> Option 3 </option>
</select>
When an option is selected, the value returned is set
appropriately to selected1, selected2 or selected3.
•All form values must have a name attribute
otherwise they cannot be processed properly.
•Example
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 46
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
•HTML Video
•The HTML <video> element is used to show a video on a web page.
•<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
•The controls attribute adds video controls, like play, pause, and volume.
•To start a video automatically use the autoplay attribute in place of
controls attribute.
•The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 47
HTML media
•HTML <audio> Element
•The HTML <audio> element is used to show a audio on a web page.
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
•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.
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 48
HTML media
•HTML Plug-ins
•Plug-ins are computer programs that extend the standard functionality of the
browser
• The <object> element is supported by all browsers.
• The <object> element defines an embedded object within an HTML document.
• It was designed to embed plug-ins (like Java applets, PDF readers, and Flash
Players) in web pages, but can also be used to include HTML in HTML:
<object width="100%" height="500px" data="[Link]"></object>
<object data="[Link]"></object>
•The <embed> element also defines an embedded object within an HTML
document. It has not been a part of the HTML specification before HTML5.
<embed width="100%" height="500px" src="[Link]“>
<embed src="[Link]">
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 49
HTML media
• HTML YouTube Videos
<iframe width="420" height="345"
src="[Link] </iframe>
YouTube - Autoplay + Muted
<iframe width="420" height="315"
src="[Link]
</iframe>
YouTube Loop
• Add loop=1 to let your video loop forever and 0 to let your video will play only once.
<iframe width="420" height="315“
src="[Link]
&loop=1"> </iframe>
YouTube Controls
• Add controls=0 to display controls in the video player.
• Value 0: Player controls does not display.
• Value 1 (default): Player controls display.
•<iframe width="420" height="315"
src="[Link]
</iframe>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 50
HTML API
• HTML Geolocation API
The HTML Geolocation API is used to locate a user's position.
Since this can compromise privacy, the position is not available unless the user approves it.
<!DOCTYPE html>
<html><body> <p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = [Link]("demo");
function getLocation() {
if ([Link]) {
[Link](showPosition);
} else {
[Link] = "Geolocation is not supported by this browser.";
} }
function showPosition(position) {
[Link] = "Latitude: " + [Link] +
"<br>Longitude: " + [Link]; }
</script> </body>
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 51
HTML API
Handling Errors and Rejections
The second parameter of the getCurrentPosition() method is used to handle errors. It
specifies a function to run if it fails to get the user's location:
[Link](showPosition, showError);
function showError(error) {
switch([Link]) {
case error.PERMISSION_DENIED:
[Link] = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
[Link] = "Location information is unavailable."
break;
case [Link]:
[Link] = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
[Link] = "An unknown error occurred."
break;
}
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 52
HTML API
Displaying the Result in a Map
• To display the result in a map, you need access to a map service, like Google
Maps.
• In the example below, the returned latitude and longitude is used to show the
location in a Google Map (using a static image):
Geolocation is also very useful for location-specific information, like:
• Up-to-date local information
• Showing Points-of-interest near the user
• Turn-by-turn navigation (GPS)
Geolocation Object - Other interesting Methods
• watchPosition() - Returns the current position of the user and continues to
return updated position as the user moves (like the GPS in a car).
• clearWatch() - Stops the watchPosition() method.
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 53
HTML5 tags and validation
HTML5
[Link]
[Link]
[Link]
HTML5 form controls :
[Link]
HTML5 Canvas
[Link]
HTML5 Geolocation API
[Link]
[Link]
HTML5 Drag and Drop API
[Link]
[Link]
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 54
Website Structure
•A website is a collection of pages associated by
hyperlinks.
•A website can be broken into several sub-sites.
•Same types of files in a separate folder
•A website generally has a root directory, then
several sub-directories
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 55
Website Structure
[Link]
[Link]
/images/
/hotels/
/holidays [Link]
[Link] [Link]
[Link] [Link]
/images/
[Link]
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 56
Website Structure
•In figure, the main site has a default [Link] page, which
will be picked up by the browser simply by going to
[Link]
•[Link] page uses several images that are collected under
an images sub-directory
•Two further sub-sites are hotels and holidays
•[Link] would give an error
message as there is no default page like [Link]
Prof. Jaydeep Gheewala Sarvajanik College of Eng. & Tech., Surat HTML 57
End
[Link]
Prof. Bhumika Patel
Gheewala Sarvajanik College of Eng. & Tech., Surat HTML
WTP 58