Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
67 views

Web Programming: What? Why? How?

The document discusses web programming and various topics related to it including web pages, websites, browsers, HTML5 elements, and sections. It provides information on web development, different types of websites, and roles in web development projects.

Uploaded by

Jayashree Borkar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Web Programming: What? Why? How?

The document discusses web programming and various topics related to it including web pages, websites, browsers, HTML5 elements, and sections. It provides information on web development, different types of websites, and roles in web development projects.

Uploaded by

Jayashree Borkar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 71

Web Programming

What? Why? How?


1
“ Web Programming / Web Development

It refers to the writing, markup and coding involved in


Web development, which includes Web content, Web
client and server scripting and network security.

2
“ WEB

A collection of interconnected websites


and other resources like images, files etc.
It is a service provided on internet.
1. web 1.0 – static HTML websites
2. Web 2.0 - dynamic websites
3. Web 3.0 - personalized effect 3
“ Web Page

A document, commonly written in HTML,


that is viewed in a Web browser.

4
“ Website

A set of related web pages located under


single domain name.

5
“ Browsers

An application used to access and view


websites

6
• Web graphic • Web Application
designer Programmer
• Interactive designer • Page Engineer
• Media specialist • DBMS ADMIN
• Webmaster

Web
Graphics
technology

Project Site

• manager • HTML Page Coder


• Account executive • UI/ UX Designer
• Quality assurance •
• Content Specialist
• Marketing Strategist

7
HTML 5
HTML vs HTML5

▰ HTML 1.0 only 22 elements, separates presentation and logical structure


▰ HTML 2.0 file upload, table client side image map introduced
▰ HTML 3.0 support for style sheets
▰ HTML 4.0 complex tables, applets, embedded objects, img, frames,
▰ HTML 5.0 audio, video, content editable and many more new elements as
well as attributes

9
New Elements in HTML 5

▰ <article> ▰ <hgroup> ▰ <time>


▰ <aside> ▰ <main> ▰ <wbr>
▰ <bdi> ▰ <mark> ▰ <audio>
▰ <details> ▰ <menu> ▰ <video>
▰ <dialog> ▰ <menuitem> ▰ <canvas>
▰ <figcaption> ▰ <nav> ▰ <math>
▰ <figure> ▰ <rp> ▰ <map>
▰ <footer> ▰ <rt> ▰ <embed>
▰ <header> ▰ <ruby> ▰ <source>
10
▰ <summery> ▰ <section> ▰ <track>
Deprecated elements/ tags in HTML 5

▰ <acronym> ▰ <font>
▰ <applet> ▰ <frame>
▰ <basefont> ▰ <frameset>
▰ <big> ▰ <isindex>
▰ <center> ▰ <noframes>
▰ <dir> ▰ <s>
▰ <u> ▰ <strike>
▰ <tt>
11
UNIT-I Chapter 1- HTML 5

Topics to be covered Topics to be covered (cont’d)


✓ Fundamental Elements of ✓ Images on a Web Page
HTML
✓ Image Formats
✓ Formatting Text in HTML
✓ Image Maps
✓ Organizing Text in HTML
✓ Interactive Elements
✓ Links and URLs in HTML
✓ Working with Multimedia
✓ Tables in HTML
✓ Audio and Video File Formats
✓ Colors
✓ FORMs in HTML ✓ HTML elements for inserting
Audio / Video on a web page 12
1
Fundamental Elements of HTML
root, metadata, section, heading, flow,
phrasing, embedded, interactive 13
HTML element

HTML element has


▰ Opening tag / start tag
▰ Closing tag / end tag
▰ Content

14
Types of
Elements
Refer reference book mentioned in syllabus :

HTML 5 Black Book: Covers CSS3, Javasvript, XML, XHTML, AJAX, PHP and jQuery

15
<html> Heading Embedded
Tags to import from
h1, h2, …, h6, hgroup other source like
Root element
image, audio, video

Metadata tags Flow Interactive


Input, select, audio,
Title, link, base, meta, All elements which can
video, label and from
command , script, noscript, be used inside <body>
controls
style,

Section Phrasing
Body, section, nav, b, I, small, sub, sup and
article, header, footer, all text related tags 16
address
1] ROOT element - <html>

Root element Attributes of <html>


▰ Container for all elements ▰ Manifest
except <!DOCTYPE>
▰ Lang
▰ <html>……………. </html>
▰ Title

▰ Other global attributes

17
2] Metadata

Use : used to set the relationship with other documents

No-
Base Meta script Style

Title Link Com Script


mand

18
Placed in head Less than 256
tag characters

Title

Attributes- id, <title> First


class, lang, style Page </title>
19
Target for all links Placed as first
in HTML page, element in
default URL <head>

Base

Attributes- href, <base href = “url"


target />

20
Links one document to Placed as first element in
another <head>

link

<link
Attributes- href, hreflang, href="/media/examples/link-
media, rel, size, style element-example.css"
rel="stylesheet">

21
Provides Placed as first
information about element in
document <head>

meta

Attributes-
charset, contents, <meta charset="UTF-8">
http-equiv, name
22
New in HTML5,
Used with interactive
executes command
elements
when event is fired.

Command

<command
Attributes- type, label,
type="command"
icon, disabled,
label="Save"
checked, radiogroup,
onclick="save()">Sav
title
e</command>
23
used to display
alternative text if browser
Used in head, body tags
does not support
javascript or script

Noscript

<noscript>Your
browser does not
Attributes- supports
global attributes support
JavaScript!</noscript
>
24
used to embed a
Used inside
client-side script
head
(JavaScript)

script
<script>
Attributes- src, document.getElement
defer, type, ById("demo").innerHT
charset, async ML = "Hello JavaScript!";
</script>
25
used to apply a
simple style Used in head
sheet

style

<style>
Attributes- h1 {color:red;}
media, type p {color:blue;}
</style>
26
3] Section elements

• used to define the header for a document or a section


• contains all the contents of an HTML document
• new tag in HTML5
• Attributes
Body Header • Example

• used to define a footer of HTML document


• Defined section in a document
• contains author information, copyright information, carriers,
• Supports global attributes etc
Section • Example Footer • Example

• defines contact information for the nearest <article> or


• defines a set of navigation links <body>
• Declares navigational section in HTML documents • Supports global attributes
Nav • Supports global attributes Example Address • Example

• defines a self-contained composition in the HTML document


• Supports global attributes
Article • Example

Fundamental 27
body tag attributes

Attribute Description HTML Compatibility


Depreciated in HTML 4.01,
alink Color of text for selected hyperlinks
Obsolete in HTML5, use CSS
Depreciated in HTML 4.01,
background Image to be used a background
Obsolete in HTM L5, use CSS
Depreciated in HTML 4.01,
bgcolor Background color
Obsolete in HTML5, use CSS
Depreciated in HTML 4.01,
link Color of text for unvisited hyperlinks
Obsolete in HTML5, use CSS
onafterprint Function to call user has printed document HTML5
Function to call when user requests document
onbeforeprint HTML5
to be printed
Funtion to call when document is to be
onbeforeunload HTML5
unloaded
onblur Function to call when document has lost focus HTML5
onerror Function to call when document fails HTML5
onfocus Function to call when document has focus HTML5
Function to call when fragment identifier portion
onhaschange HTML5
of document's address has changed
28
onload Function to call when document has loaded HTML5
body tag attributes (continued)

onmessage Function to call when the document received a message HTML5

onoffline Function to call when Network communication fails HTML5

ononline Function to call when Network communication is restored HTML5

onpopstate Function to call when user navigated session history HTML5

onredo Function to call when user moved forward in undo history HTML5

onresize Function to call when document was resized HTML5


onstorage Function to call when storage area changed HTML5

onundo Function to call when user moved backward in undo history HTML5

onunload Function to call when document is being unloaded HTML5

Depreciated in HTML 4.01, Obsolete in


text Foreground color of text
HTML5, use CSS
Depreciated in HTML 4.01, Obsolete in
vlink Color of text for visited hyperlinks
HTML5, use CSS
29
body tag example

Output

Section tags 30
section tag example

Section tags 31
Output
article tag example
<!DOCTYPE html>

code
<html>
<head>
<title>Title of the document</title> </head>
<body>
<header> <h1>Programming Courses</h1> </header>
<nav>
<a href="/learn-html.html">HTML</a> |
<a href="/learn-css.html">CSS</a> |
<a href="/learn-javascript.html">JavaScript</a> | <a
href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>

Section tags 32
Output
article tag example
<!DOCTYPE html>

code
<html>
<head>
<title>First page for SYCS</title> </head>
<body bgcolor="LightSalmon" text="brown">
<article>
<h1>Heading for Article 1</h1>
<p>Text that appears under article 2</p>
</article>
<article>
<h1>Heading for Article 2</h1>
<p>Text that appears under article 2</p>
</article>
</body>
</html>

Section tags 33
Output
header tag example
<!DOCTYPE html>

code
<html>
<head>
<title>Header Tag</title>
</head>
<body>
<article>
<header>
<h1>This is the heading.</h1>
<h4>This is the sub-heading.</h4>
<p>This is the metadata.</p>
</header>
</article>
</body>
</html>

Section tags 34
Output
footer tag example
<!DOCTYPE html>

code
<html>
<body>

<h1>The footer element</h1>

<footer>
<p>Author: XYZ<br>
<a href="mailto:xyx@example.com"> XYZ
@example.com </a> </p>
</footer>

</body>
</html>

Section tags 35
Output
address tag example
<!DOCTYPE html>

code
<html>
<body>

<h1>The footer element</h1>

<address>
You can contact us at:<br>
Mumbai<br>
400011.<br>
Maharashtra, India
</address>

</body>
</html>

Section tags 36
4] heading elements
<h1>

<h2>
<!DOCTYPE html>
<html>
<h3>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2> <h4>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5> <h5>
<h6>Heading 6</h6>
</body>
</html> <h6>

37
2.
Formatting Text in
HTML
List of tags to format text in HTML

physical formatting logical formatting

b strong – similar to bold


i em – important text
abbr – abbreviation
small
code – text appears in monospance font
sub
samp - sample output
sup dfn
q – short quotation
blockquote - section of text
ins – inserted text
del –deleted text
var – var in math / program
bdo – bi directional override
kbd – keyboard input 39
Physical text formatting example
<!DOCTYPE html>
<html>
<head>
<title>
Demo for text formatting tags
</title>
</head>
<body>
<h1> This is demo for physical text formatting tags</h1>
<br>
tag &lt; b &gt; <b> This is an implementation of bold
</b><br> tag &lt; i &gt; <i> This is an implementation of italic </i><br>
tag &lt; sub &gt; H <sub>2 </sub> O <br>
tag &lt; sup &gt; X <sup>y</sup>
</body>
40
</html>
41
Logical text formatting example

42
Links and URL’s in HTML

Links in HTML

The target attribute specifies where to open the linked document.


<a href="url">link text</a> The target attribute can have one of the following values:
•_self - Default. Opens the document in the same window/tab as
it was clicked
HTML links are hyperlinks. •_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
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.

Links need not to be text only, it can be image, or


any other document also. 43
Example for link(anchor) element

44
URL (uniform resource locator )

▰ A URL is a string used to identify a resource.


▰ It can be seen as Absolute URLs and Relative
URLs
▰ A local link (a link to a page within the same
website) is specified with a relative URL
▰ An absolute URL is a full web address.
▰ URL is value for the href attribute
▰ In the following example the highlighted string is
an URL for google
<a href=http://google.co.in>Google</a>
45
Table tags in HTML5

46
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan & Rowspan Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th><th>Column 2</th>
<th>Column 3</th><th>Column 4</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
</tr>
<tr>
<td>Row 2 Cell 2</td><td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
</tr>
<tr> <td colspan="4">Row 3 Cell 1</td> </tr>
</table>
</body> 47
</html>
Table in HTML

48
Colors HTML

Colors in HTML can be used in 3 format


▰ HEX number format
▰ RGB format
▰ Color names
Color attribute is used for text color with font tag.
<font color=red>

bgcolor attribute for background color with body tag.


<body bgcolor=blue>

text is used for text color with body tag 49


<body text=blue>
50
Form in HTML
<form> is the
outermost element for
form. It has asttributes
Element Description
like action, method
<input> Used to create controls like textbox, submit button, reset button, ettc.
password field, checkbox, radio button
<textarea> Used to create multiline input
</textarea>
<button> Used to create button
<select> Used to create drop down list
<option> Used to add option in a list
<label> Used to show label for other elements
<datalist> Creates list option for <input> element
Keygen Public private key pair for form submission
Meter Displays values on bar
Output Outputs the result for some input elements
51
Progress Progress of web page
Different values for type attribute of input tag/element

52
List using <select> (drop down list)

53
Example of <datalist>

54
Example for <meter> and <output>

55
Images on web pages

<img src="image.png" alt="Text to display if no image ">

image formats
• gif (graphics interchange format)
• jpeg(joint photographic experts group)
• png (Portable Network Graphics)
image maps
• server side mapping
• client side mapping 56
Attributes of img tag

Attribute Value Description


alt text Specifies an alternate text for an image
crossorigin anonymous Allow images from third-party sites that allow cross-origin
use-credentials access to be used with canvas
height pixels Specifies the height of an image
ismap ismap Specifies an image as a server-side image map
longdesc URL Specifies a URL to a detailed description of an image
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to the image
srcset URL Specifies the path to an image to use in different situations
usemap #mapname Specifies an image as a client-side image map
width pixels Specifies the width of an image

57
Server-side mapping
• HTML supports server-side image maps that can be used
within HTML forms. With such maps, an image is drawn,
and when the user clicks on it, the coordinates of the click
are sent to a server-side program.
• server-side image maps are appropriate if the URL needs
to be computed, the regions change frequently, or other
form data needs to be included with the request.
• If a server-side image map is used simply to select among
a static set of destination URLs
• The ismap attribute is a boolean attribute.
• It specifies that the image is part of a server-side image
map
58
59
Client-side mapping

• The usemap attribute specifies an image as a client-side image map


• The usemap attribute is associated with a <map> element's name attribute, and
creates a relationship between the <img> and the <map>
• Syntax <img usemap="#mapname">
• An image map is an image with clickable areas. The areas are defined with one or
more tags.
• The image is inserted using the <img> tag. The only difference from other images is
that you must add a usemap attribute:
• Example
• <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
• You must define the shape of the clickable area, and you can choose one of these
values:
• rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region 60
61
Working with multimedia

What is multimedia? Multimedia formats

.wav
Multimedia comes in .mp3
many different formats.
It can be almost .mp4
anything you can hear
or see, like images, .mpg
music, sound, videos, .wmv
records, films,
animations, and more. .avi.
62
Video formats

Format File Description


MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format
.mpeg on the web. Not supported anymore in HTML.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras
and TV hardware. Plays well on Windows computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video
cameras and TV hardware. Plays well on Windows computers, but not in web browsers.

QuickTi .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware.
me Plays well on Apple computers, but not in web browsers.
RealVid .rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths.
eo .ram Does not play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in
.flv web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly used in video
or MP4 cameras and TV hardware. Supported by all browsers and recommended by YouTube. 63
Audio file format
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like
.midi synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that
can be played by electronics. Plays well on all computers and music hardware, but not in
web browsers.
RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths.
.ram Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers,
but not in web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays
well on Apple computers, but not in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux
operating systems. Supported by HTML.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for
music players. Combines good compression (small files) with high quality. Supported by all
browsers.
64
MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by all browsers.
<video width="400" controls>

video <source src="v1.mp4" type="video/mp4">


Your browser does not support HTML video.
</video>

<audio controls>
<source src="horse.ogg" type="audio/ogg">

audio
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

65
Questions

▰ What is HTML?
▰ Explain the difference between HTML and HTML5.
▰ List the HTML tag having no end tag.
▰ Describe the fundamental elements in HTML .
▰ Explain how colors are used in HTML.
▰ Explain different table tags .
▰ Explain input element of form.
▰ Explain how to create drop down list in HTML form .
▰ Explain how to create data list in HTML.
▰ Explain server-side mapping of image with suitable example .
66
Questions –continued

▰ Explain client-side mapping of image with example.


▰ Describe different heading tags.
▰ Describe various text formatting tags.
▰ Explain different formats of audio files.
▰ Explain different formats of video files.
▰ Explain audio tag with suitable example.
▰ Explain video tag with suitable example.
▰ How to create link in HTML? Explain with example.
▰ Explain various embedded elements in HTML.
67
Definitions

▻ Image mapping
▻ Web page
▻ Browser
▻ Website
▻ Multimedia
▻ Web
▻ Web page
▻ Website
68
Practice / Practical help

https://www.practiceboard.com/
https://html-online.com/editor/

69
Project ideas for HTML

Personal Portfolio / Technical Documentation

To-Do List

Tribute Page

Process Scrolls

Photo Album

Survey Page

Product Launching Page


70
THANKS!
Any questions?

71

You might also like