1 / 78

EE103 Web Technology

EE103 Web Technology. Lecturer : Dr. M Rajarajan Email: R.Muttukrishnan@city.ac.uk Web: http: //www.staff.city.ac.uk/~raj. Books. Course Text Book ‘ Sams Teach Yourself HTML and XHTML in 24 Hours’ , Dick Oliver, ISBN 0-672-32076-2, 2002. Recommended Reading

hayley-torres
Download Presentation

EE103 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. EE103 Web Technology Lecturer: Dr. M Rajarajan Email:R.Muttukrishnan@city.ac.uk Web:http://www.staff.city.ac.uk/~raj

  2. Books Course Text Book • ‘Sams Teach Yourself HTML and XHTML in 24 Hours’, Dick Oliver, ISBN 0-672-32076-2, 2002. Recommended Reading • ‘Internetworking with TCP/IP Principles, Protocols and Architectures’, Douglas E. Comer, ISBN 0-13-018380-6, 2000 • ‘Computer Networks and Internets with Internet Applications’, Douglas E. Comer, ISBN 0-13-091449-5, 2001

  3. Syllabus Week 1 • Understanding HTML and XHTML • A simple Web page • Linking to other Web pages • Publishing your HTML pages

  4. Week 2 • Text alignments, lists, and special characters • Advanced text formatting and links • Creating HTML forms • Creating your own web page graphics

  5. Week 3 • Putting graphics on a Web page • Custom backgrounds and colours • Creating animated graphics • Page design and layout

  6. Week 4 • Graphics links and imagemaps • Advanced layout with tables • Using style sheets • Embedding multimedia in Web pages

  7. Week 5 • Interactive pages with Applets and ActiveX • Web page scripting for non-programmers • Setting pages in motion with Dynamic HTML • Multipage layout with frames

  8. Week 6 • Organizing and managing a web site • Helping people find your web pages • Using XML to describe data • Planning for the future of HTML

  9. Week 7 • Email • FTP • Telnet • Search Engines and Agents

  10. Week 8 • Internet Structure • Layers Week 9 • Multimedia Technology • Video streaming and casting

  11. Week 10 • Internet Security • Fire walls, Proxy servers • Cookies, Web Tracking • Digital certificates and parental control

  12. What is HTML? • HyperText Markup Language is a tag based language that describes how documents are viewed and formatted through hypertext transfer protocol (http). • Documents can be designed to link to other documents, images, multimedia, etc. HTML is not a programming language, however, it is a structured document layout language. Hence, there is no logic being processed.

  13. Early History? • 1989 CERN - WWW project proposal • 1992 - Laying the foundations • Early browsers were cumbersome to install • 1993 NCSA Mosaic released, Web takes off

  14. What can html do? • Provides document layout • Links files • Links images • Links to multimedia (sound and video) • Provides presentation to the viewer

  15. What you need to create and launch your web page? • A Computer • A text editor • A browser (IE/Netscape) • An Internet connection You the web designer

  16. HTML Specification • HTML standards are upheld by the World Wide Web Consortium (W3C). • Set standards based on current technologies that best suite the language. Ensures that software developers create similar software implementations to achieve similar functionality • HTML is in version 4.01 • More information can be found at http://www.w3.org. • W3C also sets standards for XML, CSS, to mention a few.

  17. HTML in its basic form <html> <head> <title>MY HOME PAGE</title> </head> <body>This is the body that will appear in the viewer’s browser. </body> </html>

  18. XML XML – eXtensible Markup Language • Allows user defined tag names ( HTML uses predefined tags) • XML is used to explain how the data is organized

  19. XHTML • XHTML – eXtensible Hypertext Markup Langauge • This is an application of the XML • HTML is the set of codes (that's the "markup language") that a writer puts into a document to make it displayable on the World Wide Web. • XML is a structured set of rules for how one might define any kind of data to be shared on the Web • It's called an "extensible" markup language because anyone can invent a particular set of markup for a particular purpose and as long as everyone uses it (the writer and an application program at the receiver's end)

  20. XHTML • XHTML requires strict adherence to coding rules. Notably, it requires that you use closing as well as opening elements (this is known as well-formedsyntax) and that all elements be in lower case. HTML was much less rigorous about notation and browsers tended to be even more forgiving. • This means that XHTML files will tend to be "busier" than HTML. However, they won't necessarily be harder to read because rigor may force more order in coding. In addition, the major editing and file creation tools will probably lay out pages for easier readability.

  21. XHTML • XHTML would seem to encourage a more structured and conceptual way of thinking about content and, combined with the style sheet, a more creative way of displaying it. • XHTML will make it easier for people to dream up and add new elements (and develop browsers or other applications that support them).

  22. How Web Pages Work • The user types the page they are interested and the page appears on the screen • The advantage of the web pages over paper pages is that web pages are interactive. Web pages also have animations and sound

  23. Web Browsers • A web browser is a computer program that interprets the components of an HTML file to collect, arrange, and display the parts of a web page • HTML file contains HTML commands, dynamic contents such as small scripts, Java Applets, and ActiveX controls • Browsers can also use ‘plug-ins’ to interpret audio and video

  24. Example Web Pages

  25. <html> <head><title>The Toyologist</title></head> <body background="toyback3.gif" bgcolor="magenta" text="blue" link="purple" vlink="white" alink="magenta"> <img src="ologist4b.gif" align="right" /> <img src="toyolog7.gif" align="top" /> <ul> <li>FREE <a href="remind.htm">Birthday Remind-O-Matic</a></li> <li>INSTANT <a href="commend.htm">Toy Recommendation</a></li> <li>CUSTOM <a href="report.htm">E-Mail Toyology Report</a></li> <li>CONSULT <a href="consult.htm">with the Toyologist</a></li> <li>BUY A TOY <a href="order.htm">Online Order Form</a></b></li> </ul> <div align="center"> Brought to you by Once Upon a Time Toys in Stowe, Vermont, USA </div></body></html>

  26. <html> <head> <title>Example HTML </title> </head> <body>Document Content </body> </html> Being the document Document head Document head element Document Body End document HTML structure ALL HTML documents contain this basic structure.

  27. What Happens When You Surf the Web ? • When the user types an address such as http://www.city.ac.uk in the address window of the browser he/she acts as a client • The requested web address is sent to the directory server • The server translates the address into a machine readable form of addresses that can be used by the computers connected on the web. • The request is then routed to the computer that hosts the site

  28. HTML tags • HTML coded commands are called ‘tags’ because they “tag” pieces of text and tell the Web browser what kind of text it is. • HTML contains, in most situations, anopening tag and a closing tag. • <html> - beginning tag • </html> - ending tag • Tags are defined by reserved names (<a>, <html>, <p>, <br>, etc. • Tags also contain attributes that defines the display of text that is enclosed by the tags.

  29. URL • An address on the Web is known as a URL e.g: http://www.w3.org • URL – Uniform Resource Locator

  30. HTML Attributes • <p align=“left”> This text is aligned left</p> • <body bgcolor=“black” text=“white”>This text will appear white with a black background.</body> • <a href=http://www.city.ac.uk>City University</a> • align, bgcolor, text, and href are all attributes of their tags. They describe layout or positioning of text.

  31. Editing web pages • Type the text with any word processor or text editor and save as an html file (with extension .html) • To insert graphics, animations, video, or interactive scripts on the page you need to type HTML commands that will point to the source destination • The media files stay separate from the text files even though they appear as if they are part of the same document

  32. HTML Creaters • Microsoft FrontPage • Microsoft Visual InterDev • Macromedia Dreamweaver • Adobe GoLive

  33. Many Faces of HTML • Most web pages will look the same on Netscape Navigator and IE • They will look the same on PC’s , UNIX and Macintoshes • Users of the same version of the same browser can alter the font size and background • Web browsers usually change the background to white when sending pages to a printer

  34. How to view the source code of a web page ? • Click with the right mouse button • Select View Source from the pop-up menu. This is a great way to get an intuitive idea how HTML works and learn by other's examples.

  35. HTML Content • HTML can be written in any text editor or WYSIWYG (What you see is what you get) editor. • HTML is simply text that contains tags. • HTML pages are static, they don’t change unless the designer alters the page.

  36. Must have HTML tags • <html> - indicates that this is a web page • </html> - indicates that the end of the web page • <title> and </title> - Browser will display any text within the tags at the very top of the browser window • <body> and </body> - Used to define the contents of the web page • “HTml” tags are not case sensitive • XHTML standard require that all tag names be in lower case

  37. Paragraphs and Line Breaks • Browsers pays no attention to line endings or the number of spaces between words • When the text reaches the edge of the browser window, it automatically wraps down to the next line, no matter where the line breaks were in the original HTML file

  38. Paragraphs and Line Breaks (cont..) • XHTML defines white spaces as a space character, tab character, carriage return or as a line feed character • <p> and </p> - Used to skip a line between paragraphs • <br> - Forces a line break within a paragraph ( does not need a closing tag) – in XHTML standard <br />

  39. Comments You can use any text editor or word processor to create HTML Web pages. Though you may eventually want to use an editor especially designed for HTML, for now I recommend you use the editor or word processor you're most familiar with. That way you won't have to learn a new software program at the same time you're starting to learn HTML. Even a simple text editor like Windows Notepad will work just fine

  40. Linking to other web pages • The main tag to define links is called the anchor tag - <a> • Define the address of the page to link to in quotes after “href=“ <a href=http://www.google.com>Click Me!</a> • href – ‘hypertext reference’ and is called an attribute of the <a> tag.

  41. <html> <head><title>You Aren't There</title></head> <body> <h1>Wonders of the World</h1> Vacations aren't cheap. But who needs them anymore, with so many live cameras connected to the World Wide Web? Pack a picnic, and you can visit spacious pastures (complete with scenic cows) in <a href="http://www.accsyst.com/cow.html">Alloway, New Jersey</a> or, for the more scientifically minded, at <ahref="http://www.almaden.ibm.com/almaden/cattle/home_cow.htm">IBM Almaden Research Center</a>. Or if it's scenery you're after, adventure to <a href="http://www.inwap.com/backyard/">a half-paved backyard in Fremont, California.</a></p> </body> </html>

  42. Example web page with links

  43. web page with links cont .. • To create a link from one page to another page on the same computer does not need any internet address e.g < a href=“coursenotes.htm”>Click here to view the course notes. </a>

  44. web page with links cont ..

  45. Relative Addresses • A relative address describes the path from one Web page to another, instead of a full (or absolute) internet address e.g <a href=“lions/african.html”>Learn About African Lions </a> Note: The forward slash (/) is always used to separate directory folders in HTML

  46. Summary When you create a link from one page to another page on the same computer, it isn't necessary to specify a complete Internet address. If the two pages are in the same directory folder, you can simply use the name of the HTML file. Using just filenames instead of a complete Internet addresses saves you a lot of typing. And more importantly, the links between your pages will work properly no matter where the pages are located. You can test the links while the files are still right on your computer's hard drive. Then you can move them to a computer on the Internet, or to a CD-ROM or DVD disk, and all the links will still work correctly

  47. Questions ?? • Define the terms Internet, Web page and WWW. The Internet is the “network of networks” that connects millions of computers around the world • Can you create Web pages with Microsoft Word or Wordperfect ? Yes • How many files would you need to store on your computer to make a Web page with some text and two images ? Three files. One for the text, and one for each graphics image

  48. Questions?? • What is HTML ? HyperText Markup Language is a tag based language that describes how documents are viewed and formatted through hypertext transfer protocol (http). • What you need to create and launch your web page ? A computer A text editor A browser An Internet Connection

  49. Questions?? • Who defines the HTML standards ? W3C • What is the current version of HTML ? 4.01 • What are the basic tags you need to create a simple Web page? html head title body

  50. Questions ? • Define XML ? eXtensible Markup Language • Why XML more advanced ? Allows user defined tag names • XHTML requires opening and closing tags True / False • XHTML will make harder for people to add new elements True / False

More Related