Web Technologies: Prepared by

WEB TECHNOLOGIES
Prepared By G. Ramesh Chandra Associate professor VNRVJIET
OBJECTIVE OF THE COURSE

To learn the basic technologies required for creating and processing the content on Internet websites. To learn Markup languages like HTML, Dynamic HTML and XML. To learn scripting language like JavaScript. To learn Java Technologies like AWT, Swings Java Beans, Servelets, JSP and JDBC. To learn Java Frame work like struts
ACRONYMS
HTML (Hyper Text Markup Language) DHTML (Dynamic Hyper Text Markup Language) XML (Extensible Markup Language) JSP (Java Server Pages) JDBC (Java Data Base Connectivity) HTTP (Hyper Text Transfer Protocol)
ACRONYMS
WWW (World Wide Web) W3C ( World Wide Web Consortium). WYSIWYG ( What You See Is What You Get): These editors display documents which you edit them in the same as they will appear when finished. MIME (Multipurpose Internet Mail Extensions)
What is Internet, WWW and W3C?
Internet: It is a network of computers. The collection of servers around the world which can share data. World Wide Web (WWW) : A hypertext system which links documents on millions of servers around the globe. W3C : The World Wide Web Consortium is a voluntary group which creates and approves standards for web applications.
What is HTML?
Hypertext Markup Language (HTML): is the language used to format documents for use on the World Wide Web. Hypertext : Documents can be linked together based upon context and meaning. Markup: Commands placed within text documents to define how they are structured or presented.
More on HTML
HTML Documents are displayed by Web browsers( Netscape Navigator, Internet Explorer, Mozilla Firefox etc.) At present HTML Standard is HTML 5.0, which is decided by W3C. XHTML: The latest W3C recommendation for HTML. This brings together the strict rules applied to XML and conventional HTML tags.
HTML Example
Structure of an HTML Document
They have a head which contains control information used by the browser and server and a large body. The body contains the content that displays on the screen and tags which control how that content is formatted by the browser.
Structure of an HTML Document

<html> <head> <title> First HTML document</title> </head> <body> .. </body> </html>
HTML Document Template
Main HTML Elements
Main HTML Elements (Cont)
META Element
This specifies the general information about a

document which is useful for page ratings, page refresh time, cache control, and other useful things
META Element Example
HTML Tags

A tag is a format name surrounded by angle brackets. End tags which switch a format off also contain a forward slash. For example: <h1> Text in an H1 style </h1>
Ending of the HTML tag
Starting of the HTML tag
HTML Tags(Cont.)
Tags are delimited by angled brackets: <h1> They are not case sensitive: <HEAD>, <head>, and <hEaD> are equivalents. Styles must be switched off by an end tag. There are few exceptions. Some characters have to be replaced in the text by escape sequences.
HTML Tags(Cont.)
White space, tabs, and new lines are ignored by the browser. Actually theyre not ignored, but multiple which spaces as single space, new lines and tabs are treated as spaces. If a browser doesnt understand a tag it will usually ignore it.
Commenting HTML Document

The following is the format for commenting HTML Document <!--- This is example------- for showing-----------commenting----- >
Block-level Elements
Block-Level Elements (Cont..)
Blocks of HTML

The two major blocks of text in HTML documents are the paragraph and the heading. Almost all text and images in documents will be part of either a heading or a paragraph. The exceptions are lists and tables. The syntax of paragraph <p [align=left | center | right]> .</p>
Headings
The heading elements are used to create headlines in documents. Six differenet levels of headings are supported: <h1>,<h2>,<h3>,<h4>,<h5>,<h6> The syntax is: <h1 [align=left| center | right]>.</h1> <h6 [align=left| center | right]>.</h6>
Horizontal Line
The syntax of placing a horizontal line is: <hr [align=left| center | right] [size=n] [noshade] [width=nn%]> The size option specifies the thickness of the rule in pixels, noshade draws the rule as a single thick line, width of the line is a percentage of the line among available screen size. For example: <hr width=50%> The < hr> tag does not require an end tag
Example 1

<html> <head>
<title>Web Technologies</title>
</head> <body>
<h1> Web Technologies</h1> <h2> About this Course</h2> <p> The objtective of this course is to learn the basic technologies required for creating and processing the content on Internet websites.Here we can learn Markup languages like HTML, Dynamic HTML and XML.Here we learn scripting language like JavaScript.We also learn Java Technologies like Java Beans, Servelets, JSP and JDBC.</p> <h3>Instructor</h3> <p align="center"> G.Ramesh Chandra, Associate Professor, VNR vignana Jyothi institute of technology, Bachupally, Hyderabad-500072.</p> <hr width="50%"> </body> </html>
Output of Example1
Pre-Formatted Tag(<pre>)
Sometimes you will want to include readyformatted text on a web page, for instance program code, recipes, or poetry. Inside a <pre> tag the text is only wrapped when the source has a line break and tabs or multiple white spaces are not converted to a single space. The syntax of Pre formatted text is: <pre></pre> (Example will be covered in further slides)
Pre Formatted Paragraphs
OL: Ordered (numbered) Lists
Nested Ordered Lists
UL: Un-Ordered (Bulleted) Lists
UL Custom Bullets
Text-Level Elements
Text-Level Elements (Cont..)
Text In HTML Page
Basefont Tag: This tag lets you specify minimum font size for basic text but not for headings. The size argument takes an integer from 1 to 7. The syntax is: <basefont size=n> Font Tag: Sets the font size relative to either the default value or to any size by <basefont>. The syntax is: <font size=[+|-]n color=#rrggbb>
Font Tag
Absolute font sizes can be forced by using an integer from 1 to 7; relative font sizes are set by using +/- 1 to 7.
The color of the text is set with the color argument. This takes a hex value which represents the amounts of red, green, and blue in the chosen color.
Example2
<html> <head> <title>Changing Font Sizes</title> </head> <body> <h1>Changing Font Sizes</h1> <basefont size=3> <p>Here is some text in size three <p>And here is some <font size=7>larger</font> <font size=+3>t</font> <font size=+2>e</font> <font size=+1>x</font> <font size=-1>t</font> </basefont> </body> </html>
Output of Example2
Character Formatting Elements

Elements
<i>..</i>
Meaning
Italics
Notes
<b></b> <tt></tt> <u></u> <s></s> <strike>..</strike> <sub></sub> <sup></sup> <big></big> <small>..</small>
Bold Monospaced Underline Strikethrough Strikethrough Subscript Superscript Bigger font Smaller font
Deprecated
Deprecated Deprecated
Break- <br> tag
This tag forces a line break within a passage of text where a paragraph is not desirable. On complex tables it is sometimes useful to put a <br> before and after tables, lists, or <hr> as this simplifies rendering for the browser. The syntax is: <br> This tag doesn't require end tag.
Example 3

<html> <head>
<title> Character-Formatting elements </title>

</head> <body> <h1 align="center"> Physical Text Elements</h1> <hr> <p> This is <b> Bold</b> This is <i> Italic</i> This is <tt> Monospaced </tt> This is <u> Underline</u> This is also <s> Strike-Through</s> This is <big> Big </big> This is <small> Small </small> This is even<big><big>Bigger</big></big> <br> This is even<small><small>Smaller</small></small> <br> This is <sup> SuperScript </sup> This is <sub> SubScript </sub> This is <b><i><u>Bold,Italic, and underlined</u></i></b> </p> </body> </html>
<br> <br> <br> <br> <br> <br> <br>
<br> <br>
Output of Example 3
Logical Character Styles Example
Logical Character Styles Result
Assignment 1
Write assignment on Logical-character formatting elements and a working example about it Reference: The Complete Reference HTML & XHTML Fourth edition, Thomas A.Powell, Tata Mc.Graw Hill.
More on Text
<ins> Tag : This tag is used to show inserted text and might appear underlined in a browser. The syntax is : <ins></ins> <del> Tag: This tag is used to indicate deleted text and generally appears as struck text. The syntax is : <del></del>
Character Entities
Numeric Named Symbol Value Value Description
" & < > © ®
" & < > ™ © ®
& < >
Quotation Ampersand Less than Greater than Trademark Non-breaking space Copyright symbol Registered trademark
Example 4
<html>
<head>
<title>Character entities, Inserted & deleted text, preformatted text</title> </head> <body> <h2 align="center"> Character Entities</h2> <p> The symbol for ampersend is & <br> Inserting S P A C E S <br> The symbol for less than is < <br> The symbol for greater than is > <br> The symbol for trade mark is ™ <br> The symbol for Copyright is © <br> The symbol for registered trademark is ® <br> <h2 align="center"> Pre-formatted text</h2> <pre> Dr.E.G.Rajan, MIG 1109, Huda Colony, Mehdipatnam, Hyderabad-500050. </pre> <h2 align="center"> Inserted and deleted text</h2> <ins><h1>Inserted Text </h1> </ins> <del><h1>Deleted Text </h1> </del> </p> </body> </html>
Example 4
Linking Documents
The documents can be linked using<a href> tag. This called Hyperlinking. The syntax of <a href> tag is: <a href=address></a> For example: <a href=pagetwo.html>Nextpage</a> <a href=http://www.yahoo.com/in.html>yahoo</a> <a href=c:\webpage\in.doc> india </a>
Hyper Text Links
Hyper Text Links (Cont..)
Example 5

<html> <head> <title>Web technologies</title> </head> <body> <h3>Linking to Another Page</h3> <p>This is course is for M.Tech I st students.In each section 18 students are there. one example of web page is <a href="a simple table.html"> click here</a> <hr> </body> </html>
Outputs of Example 5
After Clicking Here
This Document opens
IMG: Embedding Images
Image Alignment Example
Image Alignment Result
Tables
Table Element Attributes
Table Element Attributes (cont..)
Table Element Attributes (cont..)
Table Caption
TR : Table Row
Table Cells: TH and TD
Table Cells: TH and TD (Cont..)
Summary

Web Technologies: Prepared by

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies: Prepared by

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGIES

Prepared By G. Ramesh Chandra Associate professor VNRVJIET

OBJECTIVE OF THE COURSE

What is Internet, WWW and W3C?

Structure of an HTML Document

Structure of an HTML Document

HTML Document Template

Main HTML Elements

Main HTML Elements (Cont)

This specifies the general information about a

META Element Example

Starting of the HTML tag

Commenting HTML Document

Block-Level Elements (Cont..)

Pre Formatted Paragraphs

OL: Ordered (numbered) Lists

Nested Ordered Lists

UL: Un-Ordered (Bulleted) Lists

Text-Level Elements (Cont..)

Text In HTML Page

Character Formatting Elements

<b></b> <tt></tt> <u></u> <s></s> <strike>..</strike> <sub></sub> <sup></sup> <big></big> <small>..</small>

Break- <br> tag

<title> Character-Formatting elements </title>

<br> <br> <br> <br> <br> <br> <br>

Logical Character Styles Example

Logical Character Styles Result

&#034; &#038; &#060; &#062; &#153; &#160; &#169; &#174;

&quot; &amp; &lt; &gt; &trade; &nbsp; &copy; &reg;

& < >

Hyper Text Links

Hyper Text Links (Cont..)

After Clicking Here

This Document opens

IMG: Embedding Images

Image Alignment Example

Image Alignment Result

Table Element Attributes

Table Element Attributes (cont..)

Table Element Attributes (cont..)

Table Cells: TH and TD

Table Cells: TH and TD (Cont..)

You might also like

" & < > © ®

" & < > ™ © ®