Web Technology

Web Technology

• The techniques or technologies used for web development• To create and access the web• general term referring to the many languages and

multimedia packages that are used in conjunction with one another, to produce dynamic web sites

• Web server • Web pages are on web server which offer access to them• Run the s/w that implements HTTP (Apache, IIS)• Accept requests from remote computers and send on the

information requested • Web client

• s/w program run on one m/c requesting for web page to view it

• Browsers (IE, Firefox, Opera, Netscape navigator)• Makes the requests to the remote server

• Static webpage – content of webpage not changed once it has been loaded (.htm, .html)

• Dynamic webpage – displays different content each time it's viewed (other than .html)

• Web site : collection of web pages, linked with hyper text• www / web : collection of website over the world• Script : series of comments written in scripting language to

make webpage dynamic

• Client-Side Scripting• runs on client computer, by the Web Browser• Client-side content is content that's generated on the user's

computer rather than the server• the user's web browser would download the web page

content from the server, process the code that's embedded in the web page, and then display the updated content to the user

• view the full script by simple going to page source• HTML, DHTML, JavaScript, VBScript and CSS

• Server-Side Scripting• runs on Web Servers to generate dynamic web pages• Server-side content is content that's generated when a web

page is loaded• For example, login pages, forums, submission forms, and

shopping carts - those web pages change according to what is submitted to it

• Nobody can view the programming code of server side scripting

• PHP, ASP, JSP, Perl, Ruby, ASP.Net, server-side VBScript, server-side JavaScript

• HTML – HyperText Markup Language• Not a programming language• Markup language used to describe web pages – markup

tags (HTML tags)• Not case sensitive• Surrounded by <> brackets

• HTML documents = Web pages• Describes web pages• Contains HTML tags & plain text• Appearance and layout of the web pages• Web browser read the HTML document & display the web

page• The browser doesn’t display tags, but use it to interpret the

contents of pages• Text editor or notepad• .htm or .html• View page source (Firefox) & view source (IE)

• An HTML element is everything from the start tag to the end tag

• HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end

tag • Also called opening tags and closing tags• Some HTML elements have empty content like </br>• Empty elements are closed in the start tag• Most HTML elements can be nested• Most HTML elements can have attributes• Attributes provide additional information about an element• Attributes are always specified in the start tag• Attributes come in name/value pairs like: name="value"• Attributes also case in-sensitive

Creating a HTML File1. Open Notepad2. Click on File -> Save as…3. In the File name pull-down box, type in webpage.html4. Click on Save5. Type in content for your file6. Once you finished the content, click on File -> Save

Document Structure Elements

<body> tag attributes• bgcolor• Specifies a background-color for a HTML page.

<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

• background• Specifies a background-image for a HTML page

<body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif">

<body> tag attributes• vlink• Specifies the color of the visited links in a document

<body vlink="red">• alink• Specifies the color of an active link in a document

<body alink="green">• link• Specifies the default color of unvisited links in a document

<body link="blue">• text• Specify the color of text in an HTML document

<body text="green">

• HTML Headings• HTML headings are defined with the <h1> to <h6> tags.

<html><body>

<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>

</body></html>

Output

This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6

• HTML Paragraphs• HTML paragraphs are defined with the <p> tag.• Browsers automatically add an empty line before and after

a paragraph.

<html><body background=“lib.jpg”>

<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>

</body></html>

Output

This is a paragraph.



• HTML Links• HTML links are defined with the <a> tag.• The <a> tag can be used in two ways:• To create a link to another document, by using the href attribute• To create a bookmark inside a document, by using the name

attribute• <a href="http://www.karunya.edu">This is a link</a>

<html><body>

<a href="http://www.karunya.edu">This is a link</a>

</body></html>

Output

This is a link

<html><body>

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>

</body></html> Output

A named anchor inside an HTML document:

<a href="#tips”>Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a name="tips “>Visit the Useful Tips Section</a>

HTML Links - The name AttributeThe name attribute specifies the name of an anchor.The name attribute is used to create a bookmark inside an HTML document.

<html><body>

<p><a href="#C4">See also Chapter 4.</a></p>

<h2>Chapter 1</h2><p>This chapter explains ...........</p>



<h2><a name="C4">Chapter 4</a></h2><p>This chapter explains ...........</p>


</body></html>

Output

• HTML Images• HTML images are defined with the <img> tag.<img src= " images.jpg" width="104" height="142" />

<html><body>

<img src= "images.jpg" width= " 100" height " 150" />

</body></html>

Output

<html><body>

<p>Create a link of an image:<a href="http://www.google.com"><img src="smiley.gif" width="32" height="32" /></a></p>

<p>No border around the image, but still a link:<a href="http://www.karunya.edu"><img border="0" src="smiley.gif" width="32" height="32" /></a></p>

</body></html>

Output

<html><body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.gif" /> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.gif" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.gif" /></map>

</body></html>

Output

• HTML Lines• The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content

<html><body><p>The hr tag defines a horizontal rule:</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p></body></html>

Output

• HTML Comments• Comments can be inserted into the HTML code to make it more

readable and understandable. Comments are ignored by the browser and are not displayed.

Example

<html><body>

<p>This is a regular paragraph</p>

</body></html>

Output

This is a regular paragraph

• HTML Line Breaks• Use the <br /> tag if you want a line break (a new line) without

starting a new paragraph

Example:

<html><body>

<p>This is<br />a para<br />graph with line breaks</p>

</body></html>

Output

This isa paragraph with line breaks

• HTML Text Formatting Tags<b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted

text <ins> Defines inserted text <del> Defines deleted text

<h1> ……. <h6> Defines headings<blockquote> Section of quote<pre> Defines preformatting<code> Like pre tag<font> Look of the text

Example:

<html><body>

<p><b>This text is bold</b></p><p><strong>This text is strong</strong></p><p><big>This text is big</big></p><p><i>This text is italic</i></p><p><em>This text is emphasized</em></p><p><code>This is computer output</code></p><p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body></html>

<html><body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

</body></html>

Output

<html><body>

<bdo dir="rtl">Here is some Hebrew text</bdo>

</body></html>

Output

<html><body>

A long quotation:<blockquote>This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>

A short quotation:<q>This is a short quotation</q>

<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>

</body></html>

BLOCKQUOTEMarks a section of text as a quote from other source

Output

• PRE Tag• PRE is short for preformatted• Shows text in a monospace font• Any text surrounded with the PRE tag pair will be shown

exactly as it appears in the source file

<html><body>

<pre>This ispreformatted text.It preserves both spacesand line breaks.</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>for i = 1 to 10 print inext i</pre>

</body></html>

Output

• One problem with PRE tag is that it automatically adds a line break and extra space

• CODE TAG• Like PRE tag but it does not add a line break before and after

the text

Output

<html><body>The <code> CODE </code> tag shown here is in monospace font.

If the <code> PRE </code> tag was used instead, the text would look like this:

The <pre> CODE </pre> tag shown here is in monospace font.</body></html>

• HTML Fonts<html><body>

<p><font size="5" face="arial" color="red">This paragraph is in Arial, size 5, and in red text color.</font></p>

<p><font size="3" face="verdana" color="blue">This paragraph is in Verdana, size 3, and in blue text color.</font></p>

<p>The font element is deprecated in HTML 4. Use CSS instead!</p>

</body></html>

<html><body>

<p style="font-family:verdana;font-size:110%;font-color:green">This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it.</p>

</body></html>

Output

<html><body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red;">This text is in Verdana and red</p>

<p style="font-family:times;color:green;">This text is in Times and green</p>

<p style="font-size:30px;">This text is 30 pixels high</p>

</body></html>

Output

<html><body style="background-color:yellow;"><h2 style="background-color:red;">This is a heading</h2><p style="background-color:green;">This is a paragraph.</p></body></html>

Output

<html><body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body></html>

Output

<html><body>

<address>Written by W3Schools.com<br /><a href="mailto:[email protected]">Email us</a><br />Address: Box 564, Disneyland<br />Phone: +12 34 56 78</address>

</body></html>

The content of the <address> element usually renders in italic. Most browsers will also add a line break before and after the <address> element.

Output

<marquee> tag creates a scrolling display

<html><body><MARQUEE behavior=“alternate/slide” direction=“right/left” loop=2>Hi There! <IMG SRC="Mountain.jpg" HEIGHT=33 WIDTH=82 ></MARQUEE>

<p>the Text before<MARQUEE width="20%">Hi There! <IMG SRC="Mountain.jpg" HEIGHT=33 WIDTH=82 ></MARQUEE>the Text After</p>

</body></html>

• Positioning Tags<center> <p><br><hr><center> tagCenter text between the sides of browser window

<html><body><center>This text is centered.</center>This text will not be centered.</body></html>

Output

<html><body>

<h1 style="text-align:center;">Center-aligned heading</h1><p>This is a paragraph.</p>

</body></html>

Output

<h4>Letters list:</h4><ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

<h4>Lowercase letters list:</h4><ol type=“1“ start=“5”> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> <h4>Circle bullets list:</h4><ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul>

<h4>Square bullets list:</h4><ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul>

Output

• HTML Tables• Tables are defined with the <table> tag.• A table is divided into rows (with the <tr> tag), and each row is

divided into data cells (with the <td> tag). • td stands for "table data," and holds the content of a data cell.• A <td> tag can contain text, links, images, lists, forms, other

tables, etc.

• <table> tag parameters• align, background, bgcolor, border, cellpadding, cellspacing,

cols, height, width• <tr> tag parameters

• align, background, bgcolor• <th> and <td> tag parameters

• align, background, bgcolor, colspan, rowspan, valign, width

<table border=1><tr><th rowspan=2>Name</th><th colspan=3>Subjects</th></tr><tr><th>M1</th><th>M2</th><th>M3</th></tr><tr><td>AAA</td><td>50</td><td>80</td><td>70</td></tr></table>

Output

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" />

</frameset>

</html>

Example 2

<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" />

</frameset>

</html>

Example 1

HTML Frames

HTML IframesAn iframe is used to display a web page within a web page.

<html><body>

<iframe src="http://www.karunya.edu" width="250" height="200"></iframe>

<p>Some older browsers don't support iframes.</p><p>If they don't, the iframe will not be visible.</p>

</body></html>

Example:

• HTML Forms and Input• HTML forms are used to pass data to a server.• A form can contain input elements like text fields, checkboxes,

radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

<html><body>

<form name="" action="" method="">First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form>

</body></html>

Output

<html><body>

<form action=""><fieldset><legend>Personal information:</legend>Name: <input type="text" size="30" /><br />E-mail: <input type="text" size="30" /><br />Date of birth: <input type="text" size="10" /></fieldset></form>

</body></html> Output

Commonly Used Character Entities

Result Description Entity Name

Non-breaking space

< Less than <

> Greater than >

& Ampersand &

“ Quotation mark "

© Copyright ©

• Loading audio & video files

<object width="400" height="400" data="helloworld.swf"></object>

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>

<embed src="helloworld.swf" />

<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mp3" /> Your browser does not support the audio tag.</audio>

Web Technology

Documents

Transcript of Web Technology