Ip PPT1 PDF

Internet
Programming
HTML, CSS, JAVA SCRIPT
Dharmendra Sutariya
Asst. Prof. CSE Dept, UVPCE
Dharmendra.sutariya@ganpatuniversity.ac.in
 The web as a platform for applications
Feature Web app. Desktop app.

Graphics Strong Unlimited
User interaction Strong Unlimited
Network usage High Varies
Accessible from Any computer Where installed
Upgrade cost Update servers Update desktop
Data backup cost Backup servers Backup desktop
Popularity Increasing Dominant
2
Website Development
 To develop a website, three steps :
1. Obtain the appropriate equipment

Web Server – hardware and software
2. Register the Web Server to an Internet
Service Provider (ISP)
Obtain the IP address and DNS address
3. Develop the contents
Internet Programming
3
How the Web Works?
 WWW use classical client / server architecture
 HTTP is text-based request-response protocol
HTTP
Page request
HTTP
Server response
Server running Web

Client running a
Server Software
Web Browser
(IIS, Apache, etc.)
4
What is WWW ?
 World Wide Web is a network of information
resources
 Three Mechanism to make these resources
available to all
 A uniform naming scheme for locating
resources on the Web (e.g., URIs)
 Protocols, for access to named resources
over the Web (e.g., HTTP)
 Hypertext, for easy navigation among
resources (e.g., HTML)
5
What is a Web Page?
 Web pages are text files containing HTML
 HTML – Hyper Text Markup Language
 A notation for describing
 document structure (semantic markup)
 formatting (presentation markup)
 Looks (looked?) like:
 A Microsoft Word document
 The markup tagsprovide information about
the page content structure
6
Creating HTML Pages
 An HTML file must have an .htm or .html file
extension
 HTML files can be created with text editors:
 NotePad, Vi, Gedit

 Or HTML editors (WYSIWYG Editors):
 Microsoft FrontPage
 Macromedia Dreamweaver
 Mozilla Firefox
 Google Chrome
 Visual Studio 7
History of HTML
1991 HTML first published
1995 HTML 2.0

After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2
1999 HTML 4.01 XHTML 2.0 had even stricter standards

than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.
Though HTML5 was published officially in 2012, it

2012 HTML5
has been in development since 2004.
World Wide Web Consortium (W3C) – Defines & Publishes HTML Standards
Syllabus
 HTML Basic:
 Introduction of HTML, HTML Elements, HTML Basic Tags,
HTML Formatting, HTML Entities, HTML Links, HTML Frames,
HTML Tables, HTML Lists, HTML Forms, HTML Images, HTML
Background, HTML Colors, HTML Color-values, HTML Color-
names, Meta-tags and search engine, HTML URL-encode,
Publishing HTML on web.
 Cascaded Style Sheet:
 CSS Introduction, Syntax, Setting Background, Text, Font,
Border, Margin, Padding, List, Dimension, Classification,
Positioning, Pseudo-class, Pseudo-element, CSS Media Types,
External, Internal and Inline style sheet.
9
 Java Scripts:
 Variables declaration, If...Else statement, Switch statement,
Operators statement, Popup Boxes, Functions, For Loop,
While Loop, Break Loops, For...In, Events, Try...Catch, Throw,
onerror, Java Script Objects String, Date, Array, Boolean,
Math, JS Browser, JS Cookies, Validation, Animation, Image
Maps, Timing, Create Object, Accessing Important properties
of HTML controls in a Java Script
Reference Books:
1. HTML4 BIBLE ByBrayn Omdex
2. ABC of JavascriptBy Purcell lee BPB publication
3. Pure java Script By Gilliam Johnson Techmedia
4. Sams Teach Yourself HTML and CSS in 24 Hours by Julie Meloni, Michael Morrison
5. HTML5 Programming with JavaScript For Dummies by JohnPaul Muller , Wiley
Publication
10
HTML Structure
 HTML is comprised of “elements” and “tags”

 Begins with <html> and ends with </html>
 Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
 Tags have attributes:
<img src="logo.jpg" alt="logo" />
 HTML describes structure using two main sections:
<head> and <body>
11
HTML Tags
 HTML tags are used to mark-up HTML elements
 Surrounded by the two characters < and > called
angle brackets
 Normally come in pairs like <b> and </b>
 First tag in pair is called start tag and second tag
is called end tag
 Text between start and end tags is the element
content
 Not case sensitive, <b> and <B> are same
12
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
13
First HTML Page: Tags
<!DOCTYPE HTML>
<html>
Opening tag
<head>
</head>
<body> Closing tag
</body>
</html>
An HTML element consists of an opening tag, a closing tag

and the content inside.
14
First HTML Page: Header
<!DOCTYPE HTML>
HTML header
<html>
<head>
</head>
<body>
</body>
</html>
15
First HTML Page: Body
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
HTML body
16
Introduction to HTML
HTML Document Structure in Depth
The <!DOCTYPE> Declaration
 HTML documents must start with a document
type definition (DTD)
 It tells web browsers what type is the served code
 Possible versions: HTML 4.01, XHTML 1.0
(Transitional or Strict), XHTML 1.1, HTML 5
 Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
 See http://w3.org/QA/2002/04/valid-dtd-list.html for a list

of possible doctypes
18
The <head> Section
 Contains information that doesn’t show
directly on the viewable page
 Starts after the <!doctype> declaration
 Begins with <head> and ends with </head>
 Contains mandatory single <title> tag

 Can contain some other tags, e.g.
 <meta>
 <script>
 <style>
 <!–- comments --> 19
<head> Section: <title> tag
 Title should be placed between <head> and
</head> tags
<title>Welcome to UVPCE </title>
 Used to specify a title in the window title bar

 Search engines and people rely on titles
20
<head> Section: <meta>
 Meta tags additionally
describe the content
contained within the page
<meta name="description" content="HTML
tutorial" />
<meta name="keywords" content="html, web

design, styles" />
<meta name="author" content="Chris Brewer" />
<meta http-equiv="refresh" content="5;

url=http://www.telerik.com" />
21
<head> Section: <script>
 The <script> element is used to embed
scripts into an HTML document
 Script are executed in the client's Web browser
 Scripts can live in the <head> and in the <body>
sections
 Supported client-side scripting languages:
 JavaScript (it is not Java!)
 VBScript
 JScript
22
The <script> Tag – Example
<!DOCTYPE HTML> scripts-example.html
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
23
<head> Section: <style>
 The <style> element embeds formatting
information (CSS styles) into an HTML page
<html> style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>
24
Comments:  Tag
 Comments can exist anywhere between the
<html></html> tags
 Comments start with 
<!–- Telerik Logo (a JPG file) -->

<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...
25
<body> Section: Introduction
 The <body> section describes the viewable
portion of the page
 Starts after the <head> </head> section
 Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>

</body>
</html>
26
Attributes of Body Tag
 <body bgcolor=“white” text=“red”

alink=“green” vlink = “yellow”>
27
<body background=“webimage1.gif” >
 The .gif file should be present in the current working directory
 If not relative path should be defined for the image
 Consider working with file main.htm. To use all the different

.gif files as background, the tag specifications will change as
follows:
28
HTML Basic Tags
 Tags that define headings, paragraphs and line
breaks
 The <HTML> and <BODY> tag included in
HTML basic Tags
 Paragraph breaks (<P>)
 Moves onto new line, skipping one line
between the previous line and the new line.
29
 Line breaks (<BR>)
 Line breaks with out skipping a blank line
 This is an empty tag (not have a closing tag)
 Heading Styles
 A heading in HTML is just as a title or subtitle.
 By placing text inside of <h1> (heading) tags, the text
displays bold and the size of the text depends on the
number of heading (1‐6) means h1, h2, h3, h4, h5, h6.
 Headings are numbered 1‐6, with 1 being the largest
heading and 6 being the smallest.
30
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a sample Web page.</p>
<p align=“center”> Next paragraph: Preformatted.</p>
<p>Contact:<BR> U.V.Patel College of Engineering
<BR> Ganpat University </p>
<h1> Computer Science and Engineering </h1>
</body>
</html> 31
 Drawing Lines <HR>
 Draws a horizontalline across the whole

page, wherever specified
 This is another empty tag
32
<html>
<head>
<title>UVPCE</title>
</head>
<body>
<hr size = 5>
<p>This is a sample Web page.</p>
<hr size = 5 align = “left” noshade = “true” width = “425”
color = “blue” >
</body>
</html>
33
Text Formatting
 Text formatting tags modify the text between the opening
tag and the closing tag
 Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<del></del> Deleted text – strike through
<big></big> text in big
<small> </small> text in small
<ins> </ins> text ins
34
Text Formatting – Example
text-formatting.html
<html>
<head>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
35
Text Formatting – Example (2)
text-formatting.html
<html>
<head>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
36
Computer Output Tags
<tt></tt> computer science Type writer Font
<code></code> computer science Computer Code Text
<kbd></kbd> computer science Keyboard Text
<samp></samp> computer science sample computer code
<var></var> computer science variable

<pre></pre> computer science preformatted text
<html>
<head> </head>
<body>
<pre width =20>
This text is
In a fixed-pitch
Font, and it preserves
Both spaces and
Line breaks
</pre> </body> </html> 37
Citations, Quotations and Definition Tags
 Abbreviations Text<abbr>
 Indicates an abbreviated form, like ʺInc.ʺ, ʺetc.ʺ
 By marking up abbreviations you can give useful
information to browsers.
 Tag used as <abbr title="et cetera">etc.</abbr>
 Text Directions<bdo>(Bi‐Direction override)
 If your browser supports bi‐directional override (bdo), the
next line will be written from the right to the left (rtl)
 The tag used are between <bdo> …… </bdo>
 Attributes
Attribute Value Description
Dir Rtl, ltr Defines the text direction
38
 Code:‐
<bdo dir=ʺrtlʺ>U.V.Patel College of Engineering</bdo>
 Output:‐ gnireenignE fo egelloC letaP.V.U
 Definition term<dfn>
 It is the defining instance of the enclosed term.
 The tag used are between<dfn>……</dfn>
 Code:‐
<p>The <dfn title="Hyper Text Markup Language"> HTML
</dfn> is the publishing language of the World Wide Web.</p>
 Output:‐
The HTML is the publishing language of the World Wide Web.
39

Ip PPT1 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ip PPT1 PDF

Caricato da

Copyright:

Formati disponibili

Internet

Feature Web app. Desktop app.

1. Obtain the appropriate equipment

Server running Web

 NotePad, Vi, Gedit

1991 HTML first published

1995 HTML 2.0

1999 HTML 4.01 XHTML 2.0 had even stricter standards

Though HTML5 was published officially in 2012, it

 HTML is comprised of “elements” and “tags”

An HTML element consists of an opening tag, a closing tag

 See http://w3.org/QA/2002/04/valid-dtd-list.html for a list

 Begins with <head> and ends with </head>

 Contains mandatory single <title> tag

 Used to specify a title in the window title bar

<meta name="keywords" content="html, web

<meta name="author" content="Chris Brewer" />

<meta http-equiv="refresh" content="5;

<!–- Telerik Logo (a JPG file) -->

 Begins with <body> and ends with </body>

 <body bgcolor=“white” text=“red”

 If not relative path should be defined for the image

 Consider working with file main.htm. To use all the different

 Draws a horizontalline across the whole

<var></var> computer science variable

Potrebbero piacerti anche