Download presentation
Presentation is loading. Please wait.
2
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
3
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
4
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
5
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
6
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
7
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
8
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)
9
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
10
Creating a HTML File Open Notepad Click on File -> Save as…
In the File name pull-down box, type in webpage.html Click on Save Type in content for your file Once you finished the content, click on File -> Save
11
Document Structure Elements
12
<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="
13
<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">
14
Output This is heading 1 This is heading 2 This is heading 3
HTML Headings HTML headings are defined with the <h1> to <h6> tags. Output This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 <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>
15
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> </body> </html> Output This is a paragraph.
16
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=" is a link</a> <html> <body> <a href=" This is a link</a> </body> </html> Output This is a link
17
<html> <body>
<a href=" 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
18
HTML Links - The name Attribute
The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. 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>
19
Output <html> <body> <p>
<a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains </p> <h2>Chapter 2</h2> <h2>Chapter 3</h2> <h2><a name="C4">Chapter 4</a></h2> <h2>Chapter 5</h2> </body> </html> Output
20
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
21
<p>Create a link of an image:
<html> <body> <p>Create a link of an image: <a href=" <img src="smiley.gif" width="32" height="32" /> </a> </p> <p>No border around the image, but still a link: <a href=" <img border="0" src="smiley.gif" width="32" height="32" /> </body> </html> Output
22
<map name="planetmap">
<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
23
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> </body> </html> Output
24
<!-- This is a comment -->
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. <!-- This is a comment --> Example <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html> Output This is a regular paragraph
25
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 is a para graph with line breaks
26
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
27
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>
28
<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
29
Marks a section of text as a quote from other source
BLOCKQUOTE Marks a section of text as a quote from other source <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>
30
Output
31
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
32
<html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> for i = 1 to 10 print i next i </body> </html> Output
33
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
34
<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> Output
35
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> <font size="3" face="verdana" color="blue"> This paragraph is in Verdana, size 3, and in blue text color. <p>The font element is deprecated in HTML 4. Use CSS instead!</p> </body> </html>
36
<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
37
<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
38
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
39
<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
40
<html> <body> <address> Written by W3Schools.com<br /> <a us</a><br /> Address: Box 564, Disneyland<br /> Phone: </address> </body> </html> Output The content of the <address> element usually renders in italic. Most browsers will also add a line break before and after the <address> element.
41
<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%"> the Text After</p> </body> </html>
42
Center text between the sides of browser window
Positioning Tags <center> <p> <br> <hr> <center> tag Center text between the sides of browser window <html> <body> <center>This text is centered.</center> This text will not be centered. </body> </html> Output
43
<html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html> Output
48
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”> <h4>Circle bullets list:</h4> <ul type="circle"> </ul> <h4>Square bullets list:</h4> <ul type="square"> Output
49
<ul type="square">
<ul type=“circle"> <ul type=“disc"> <ol type=“A“> <ol type=“a“> <ol type=“I“> <ol type=“1“> <ol type=“i“> <ol type=“1“ start=“5”>
50
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.
54
<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
55
<table border=1> <tr> <th rowspan=2>Name</th>
<th colspan=3>Subjects</th> </tr> <th>M1</th> <th>M2</th> <th>M3</th> <td>AAA</td> <td>50</td> <td>80</td> <td>70</td> </table> Output
56
HTML Frames Example 2 <html> Example 1
<frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> Example 1 <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
57
<html> <frameset rows="50%,50%"> <frame src="frame_a.htm" /> <frameset cols="25%,75%"> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm" /> <frame src="frame_a.htm" name="showframe" /> </frameset> </html>
58
An iframe is used to display a web page within a web page.
HTML Iframes An iframe is used to display a web page within a web page. Example: <html> <body> <iframe src=" 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>
59
HTML forms are used to pass data to a server.
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
70
<html> <body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30" /><br /> <input type="text" size="30" /><br /> Date of birth: <input type="text" size="10" /> </fieldset> </form> </body> </html> Output
71
Commonly Used Character Entities
Result Description Entity Name Non-breaking space < Less than > Greater than & Ampersand & “ Quotation mark " Copyright Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.
72
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>
Similar presentations
