1. 3-1 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Introduction to Web & HTML Sadiq M. Sait, Ph.D sadiq@ccse.kfupm.edu.sa Department of Computer Engineering King Fahd University of Petroleum and Minerals Dhahran, Saudi Arabia

2. 3-2 Copyright. All rights reserved. Not to be reproduced by any means without prior permission 3-2 Chapter 3 Introduction to WWW & HTML

3. 3-3 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Topics Covered in this Session l Web Page Design and HTML l Web Client/Server Software and HTTP l Images and Image Maps l Forms, and Web-database integration l Other topics

4. 3-4 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Lingo l HyperText: Enables linking to places l Link(s) l Hyperlinks: Hot spots on which a user can click to access other: » topics (in the same document) »documents, (other HTML files, for e.g.),or »Web sites l URL: Addresses on Internet to which hot spots connect

5. 3-5 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Lingo l GIF, JPEG, XBM, XPM (picture formats) l Netscape, Mosaic, Iexplorer (browsers) l WebEdit, HoTMetaL, FrontPage (editors/tools) l FTP, TCP/IP, HTTP (protocols) l Applets, J++, javac, Java Engine (Java programming) xv l xv, clipart, etc (graphics editors)

6. 3-6 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Why Design and for Who? l Personal Pages l Companies, Organizations » (schools, universities, research centers, etc) l News Networks l Journals l Events (conferences, international games, etc) l Internet/Intranet

7. 3-7 Copyright. All rights reserved. Not to be reproduced by any means without prior permission l What is HTML and why do we care? l WWW and HTTP l Logical versus Physical Formatting l HTML Document structure l Images and Hyperlinks l Tools for creating HTML l Beyond simple HTML What in this session ?

8. 3-8 Copyright. All rights reserved. Not to be reproduced by any means without prior permission What is HTML? l HTML is a structured language »rules of nesting l All WWW documents are written in HTML l WWW »World Wide Web »Most popular Internet information service

9. 3-9 Copyright. All rights reserved. Not to be reproduced by any means without prior permission What is Internet? l What is Internet? »Worlds largest network »Collection of interconnected networks built on the Internet protocol TCP/IP »Growing at an amazing rate »Open system with decentralized management l Estimated: 28.8 million people over 16 in the US have access, 16.4 million use the Internet and 11.5 million use the web.

10. 3-10 Copyright. All rights reserved. Not to be reproduced by any means without prior permission World Wide Web l Client/Server Architecture l Designed to make it easy for people to share information »Hides complexities of location of documents »Easy to distribute information »Fun to look at

11. 3-11 Copyright. All rights reserved. Not to be reproduced by any means without prior permission World Wide Web l Hyperlinks »Highlighted words or pictures »Item pointed to may be another document image, movie, sound clip etc

12. 3-12 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Example Visit NYSE city tours NY CITY TOURS NYSE sounds view sights sound audio Movie

13. 3-13 Copyright. All rights reserved. Not to be reproduced by any means without prior permission WWW Browsers l Interpret HTTP as well as other protocols »ftp, mailto, telnet, gopher, etc. l Display physical formatted HTML text »in-line images »hyperlinks

14. 3-14 Copyright. All rights reserved. Not to be reproduced by any means without prior permission WWW browsers (contd..) l Helper Applications »Programs on the user’s computer that can be used to display images, movies, sound, etc. that cannot be displayed on the browser itself –Sound files –Movies (MPEG) –Mail –Other file formats

15. 3-15 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Why learn HTML? l Everyone is a publisher »The architecture of the Internet allows almost anyone to become an information provider for a world wide audience l WWW documents must be in HTML »To create your own home page you need to know some HTML

16. 3-16 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Why learn HTML? (contd..) l Not a must »Can use tools to create HTML »Conversion tools can be used to convert existing HTML documents –Example: LaTeX2HTML –Word documents can be saved in HTML –FrameMaker documents too l It is very easy to learn

17. 3-17 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Creating an HTML Page l Requirements »Text or HTML Editor to enter TAGS »Graphics editors »Browser (Netscape, Internet Explorer, Lynx, etc.) l Focus »Usable and Eye-catching documents »Images in Web pages »Animation

18. 3-18 Copyright. All rights reserved. Not to be reproduced by any means without prior permission HTML Basics l HTML documents contain 3 things »Text +TAGS »External Multimedia such as graphics, sound, movies, etc. l Example » Your Text Here »Types, used in pairs, or not in pairs »Tags can be nested

19. 3-19 Copyright. All rights reserved. Not to be reproduced by any means without prior permission What are Tags? l Mark text as »headings, paragraphs »formatting (physical, logical) »list »quotations, etc. l Also for »creating hyperlinks »including images, making tables »fill-in forms, frames

20. 3-20 Copyright. All rights reserved. Not to be reproduced by any means without prior permission How do they look? l KFUPM »display KFUPM as a level 1 heading, can go down from H1 to H6 l A paragraph comes here l Anchor l for line breaks l for horizontal line

21. 3-21 Copyright. All rights reserved. Not to be reproduced by any means without prior permission HTML Document Structure l Basic Structure » » KFUPM » ….. ….. …… »

22. 3-22 Copyright. All rights reserved. Not to be reproduced by any means without prior permission HTML Document Structure l HTML= head + body »Body elements contain all the text and other material to be displayed l Line breaks and indentation exist only for human readability l Comment » l for pre-formatted text

23. 3-23 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Example head/title all elements of document Big heading Small heading a para of text comes here

24. 3-24 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Character formatting Markup l Physical Styles » bold » …. » Makes text subscripts » emphasized text » text in italics » changes font size » n=1,…,7

25. 3-25 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Character formatting Markup l Logical Styles » Marks computer code » without processing tags » emphasized text » Strong Emphasis

26. 3-26 Copyright. All rights reserved. Not to be reproduced by any means without prior permission List Markup l... … »UL specifies unordered list »LI specifies list item l OL specifies ordered list l specified a definition list l … ….. »provides a definition list »DT begins each item title »DD begins each item definition l unformatted text

27. 3-27 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Logical vs. Physical Formatting l Design Goal: »Specify logical organization of document »not designed to be an editor like Word, FrameMaker etc.. l Documents with sections of text marked as logical units »Titles »Paragraphs »Lists

28. 3-28 Copyright. All rights reserved. Not to be reproduced by any means without prior permission More on Tags l HTML elements »start tag and end tag – …. l Empty elements » l Attributes for elements » –tag names and attributes are case insensitive –filename is case sensitive

29. 3-29 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Spinning your HTML Web l To create hot spots (or Anchors) you need two things »URLs (Uniform Resource Locator) »Links l Anchors and Links allow readers to jump from place to place in the document l URL is a fancy way of saying address or location for information on the Internet

30. 3-30 Copyright. All rights reserved. Not to be reproduced by any means without prior permission URL Anatomy & Types l Example: http://www.ccse.kfupm.edu.sa/~sadiq/tut.html protocol indicator,hostname,directory/filename l Types: »Absolute URLs (also called complete URLs) »Relative URLs (are incomplete URLs) l Other Protocols (mailto, ftp, etc) ftp://ftp/pub/images/backgrounds/glosbgr.gif mailto:sadiq@ccse.kfupm.edu.sa

31. 3-31 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Examples l http://www.ccse.kfupm.edu.sa/~sadiq/tut.html l l <A HREF=“ mailto:sadiq@ccse.kfupm.edu.sa”> sadiq@ccse.kfupm.edu.sa

32. 3-32 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Building Anchors l Components required »The Tag: anchor_name »HREF: Indicates where to jump »NAME: Identifies an internal label l HREF: Lets users jump to either material on the same Web site or to other material on the Internet l NAME: Lets users jump to material within the same document

33. 3-33 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Named Anchor & Basic Links l anchor_name »something = #name –name=funny (for example) »something = filename.html[#name] –tutorial.html »something = a Web site, for example –http://www/uqu.edu.sa/~youssef/tutorial.html – ftp://www/ksu.edu.sa/~ahmed/jokes.html l Funny

34. 3-34 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Using Images in Web Pages l Including l Aligning l Using them as links l Making images load more quickly l Using thumbnail images

35. 3-35 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Adding Images l Must include them as GIF or JPG graphics l Use graphic editors, scanners, or, borrow l Must use an Image Tag l ALT="... " specifies text to be displayed if image not available l BORDER=# of pixels, controls the thickness of the border l Pictures can be aligned Left, Right, etc.

36. 3-36 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Example of Image Inclusion Biography Dr. Sadiq M. Saits Biography <IMG SRC="sadiq.gif" ALT="Picture of Sadiq Sait " ALIGN=RIGHT> Picture of Sadiq M. Sait for his biography...

37. 3-37 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Example of Image inclusion Biography Dr. Sadiq M. Saits Biography <IMG SRC="sadiq.gif" ALT="Picture of Sadiq Sait " ALIGN=RIGHT HSPACE=20 HEIGHT=100 WIDTH=50> Picture of Sadiq M. Sait for his biography...

38. 3-38 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Some notes on Images l Loading of images is made faster by telling the browser the size of the image l Size is specified in pixels l You can link by using images »Can have pictures with no borders l You can use thumbnail images to link to larger images l Making clickable images (image maps)

39. 3-39 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Pictures as Links Sadiq M. Sait’s brief biography comes here

40. 3-40 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Pictures as Links (contd..) <IMG SRC="sadiq.gif" ALT="Picture of Sadiq Sait" ALIGN=RIGHT HSPACE=20 HEIGHT=100 WIDTH=50 BORDER=0> Sadiq M. Sait was born in......

41. 3-41 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Using Thumbnails <IMG SRC="sadiqthumbnail.gif" ALT="Picture of Sadiq Sait"> Thumbnail of Sait’s picture….

42. 3-42 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Clickable Images l Enable readers to click on parts of images (e.g., click on a state or country in a map) l HTML tag used in l Define clickable areas l Examples »Map a rectangle, circle or polygons

43. 3-43 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Defining the map l Tells which area readers may click and what link to follow » »NAME= “ “ gives the map a name » specifies the shape of a ‘hot spot’ »COORDS=“x1,y1,x2,y2,…” »HREF=“URL” »SHAPE= “…” specifies type of shape as RECT, CIRC, POLYGON, etc.

44. 3-44 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Example <IMG ALT=“This is a clickable map.” SRC=“imagemap.gif” USEMAP=“demomap”> the above is an imagemap

45. 3-45 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Other Attributes l Choosing Colors »Background »Links (link, alink, vlink) »Text l Colors can be chosen for tables, background etc. l RGB concept (#FFFFFF=white) l Choosing background (using images,.gif files)

46. 3-46 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Some More Tags l CENTER, BLINK, HR, APPLET l »SELECT, OPTION, TEXTAREA l »TR, TH, TD, CAPTION l FRAME »FRAMESET l And many more….

47. 3-47 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Beyond Simple HTML l Tables l Forms l Frames l Simple animation l Inclusion of Java Applets l JavaScript and CGI programs

48. 3-48 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Tables in HTML l Caption l Alignment and Width l Table Header l Table Data l Table Rows l Color (of cells) l Border or not (and width)

49. 3-49 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Tables <TABLE BORDER=10 ALIGN=ABSCENTER bgcolor=#68d1cc> This is a table with a border Male Female Pop 0.49 0.51 Wealth 0.9 0.1

50. 3-50 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Forms in HTML l What are they used for »Surveys »Collect addresses of visitors to your Homepage »Allow people to register for something l Features »Submitted by mail »Security (Passwords) »Checkboxes and Radio buttons »Area for Text and Comments

51. 3-51 Copyright. All rights reserved. Not to be reproduced by any means without prior permission HTML TAGS/Attributes l … enclose form... l ACTION=“…” identifies what should happen when the form is submitted l identifies some type of input field l CHECKED shows which item is selected by default (check box/radio button) l TYPE indicates the type of field (text, password, radio, submit, reset, etc) l VALUE indicates the value of the button

52. 3-52 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Forms (Input Types) <FORM METHOD=POST ACTION= "http://www.salford.ac.uk/wibblefish"> Simple Your Name: <INPUT NAME="name" TYPE=TEXT size="24"> Password Input Your Password:

53. 3-53 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Selection/Options in Forms Sel ect from a group Dhahran Jeddah Riyadh Taif

54. 3-54 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Checkboxes in Forms Check box to choose a number of parameters Kent Canterbury Manchester Coventry

55. 3-55 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Radio Buttons in Forms Radio buttons to choose only one parameter Maybe Why not ? Yes No

56. 3-56 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Frames l SRC: URL of documents to be displayed l NAME: so this frame can be targeted by links in other documents l Physical dimensions: Height, width etc. l Other features: Scrolling, Resizing, etc. l They are a complete HTML document or a page

57. 3-57 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Spicing up your Web Page l Some HTML commands and Tricks »BLINK tag, etc l Animation and Sound l Using Java Applets

58. 3-58 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Java Applet inclusion l Compile the Java code (e.g., use javac) »example: javac Blinker l Creates file with extension.class, »example Blinker.class l Use the tags … l Specify parameters such as speed, color (for background and text, etc.)

59. 3-59 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Java Applet Inclusion (contd)

60. 3-60 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Java Applet Inclusion (contd..)

61. 3-61 Copyright. All rights reserved. Not to be reproduced by any means without prior permission CGI-bin l cgi-bin (common gateway interface) l Executable: Example » people visited this page. l Helper programs »to send mail »run audio/video applications »etc

62. 3-62 Copyright. All rights reserved. Not to be reproduced by any means without prior permission 3-62 Searching l On the internet we can »search for a file using Archie »Find an e-mail address –Internet White Pages (internic keeps records) »Finding a gopher site »etc l Search engines using the Web

63. 3-63 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Search Engines l Tools to discover Web resources on the internet l Help in locating information l They act as an agent between publishers and users

64. 3-64 Copyright. All rights reserved. Not to be reproduced by any means without prior permission 3-64 Other & Recent Technologies l Authoring Tools l VRML, Dynamic HTML, ASPs, etc l Video Streaming l Push Technology l Data-Base Integration l E-Commerce

65. 3-65 Copyright. All rights reserved. Not to be reproduced by any means without prior permission Finally…. l Summary l Examples l Demo