1 / 72

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

odysseus-sheppard
Download Presentation

Web Technology

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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)

  8. 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

  9. 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

  10. Document Structure Elements

  11. background Specifies a background-image for a HTML page <body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif"> <body> tag attributes • bgcolor • Specifies a background-color for a HTML page. <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

  12. <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">

  13. 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>

  14. 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. This is a paragraph. This is a paragraph.

  15. 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

  16. <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

  17. 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>

  18. <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> <p>This chapter explains ...........</p> <h2>Chapter 3</h2> <p>This chapter explains ...........</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ...........</p> <h2>Chapter 5</h2> <p>This chapter explains ...........</p> </body> </html> Output

  19. HTML Images • HTML images are defined with the <img> tag. <img src= " images.jpg" width="104" height="142" /> <html> <body> <imgsrc= "images.jpg" width= " 100" height " 150" /> </body> </html> Output

  20. <html> <body> <p>Create a link of an image: <a href="http://www.google.com"> <imgsrc="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

  21. <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <imgsrc="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

  22. 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

  23. 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

  24. 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

  25. <h1> ……. <h6>Defines headings <blockquote> Section of quote <pre> Defines preformatting <code> Like pre tag <font> Look of the text • 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

  26. 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>

  27. <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> <bdodir="rtl"> Here is some Hebrew text </bdo> </body> </html> Output

  28. 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>

  29. Output

  30. 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

  31. <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> <pre> for i = 1 to 10 print i next i </pre> </body> </html> Output

  32. 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

  33. <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

  34. <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 Fonts

  35. <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

  36. <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

  37. <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

  38. <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

  39. <html> <body> <address> Written by W3Schools.com<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </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.

  40. <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>

  41. 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

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

  43. <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

  44. <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”>

  45. 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.

More Related