EE 103 Web Technology Lecturer Dr M Rajarajan

EE 103 Web Technology Lecturer: Dr. M Rajarajan Email: R. Muttukrishnan@city. ac. uk Web: http: //www. staff. city. ac. uk/~raj

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

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

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

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

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

Week 5 n Interactive pages with Applets and Active. X n Web page scripting for non-programmers n Setting pages in motion with Dynamic HTML n Multipage layout with frames

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

Week 7 n Email n FTP n Telnet n Search Engines and Agents

Week 8 n Internet Structure n Layers Week 9 n Multimedia Technology n Video streaming and casting

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

What is HTML? n n Hyper. Text 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.

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

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

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

HTML Specification n n HTML standards are upheld by the World Wide Web Consortium (W 3 C). 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. w 3. org. W 3 C also sets standards for XML, CSS, to mention a few.

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>

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

XHTML n n n XHTML – e. Xtensible 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)

XHTML n n XHTML requires strict adherence to coding rules. Notably, it requires that you use closing as well as opening elements (this is known as well-formed syntax) 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.

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

How Web Pages Work n n 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

Web Browsers n n n 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 Active. X controls Browsers can also use ‘plug-ins’ to interpret audio and video

Example Web Pages

<html> <head><title>The Toyologist</title></head> <body background="toyback 3. gif" bgcolor="magenta" text="blue" link="purple" vlink="white" alink="magenta"> <img src="ologist 4 b. gif" align="right" /> <img src="toyolog 7. 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>

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

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

HTML tags n n n 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, an opening tag and a closing tag. <html> - beginning tag </html> - ending tag Tags are defined by reserved names (<a>, <html>, <p>, , etc. Tags also contain attributes that defines the display of text that is enclosed by the tags.

URL n n An address on the Web is known as a URL e. g: http: //www. w 3. org URL – Uniform Resource Locator

HTML Attributes n n <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.

Editing web pages n n n 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

HTML Creaters n Microsoft Front. Page n Microsoft Visual Inter. Dev n Macromedia Dreamweaver n Adobe Go. Live

Many Faces of HTML n n 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

How to view the source code of a web page ? n n 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.

HTML Content n n n 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.

Must have HTML tags n <html> - indicates that this is a web page </html> - indicates that the end of the web n <title> and </title> - Browser will display any n n page 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

Paragraphs and Line Breaks n n 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

Paragraphs and Line Breaks (cont. . ) n n n 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 - Forces a line break within a paragraph ( does not need a closing tag) – in XHTML standard

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

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.

<html> <head><title>You Aren't There</title></head> <body> <h 1>Wonders of the World</h 1> 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 <a href="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>

Example web page with links

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>

web page with links cont. .

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

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

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

Questions? ? § What is HTML ? Hyper. Text Markup Language is a tag based n 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

Questions? ? n n n Who defines the HTML standards ? W 3 C 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

Questions ? n n Define XML ? e. Xtensible 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

Questions ? n n n What does a HTML file contains ? HTML commands Scripts Java Applets Active. X What is the <a> tag used for ? To link to another destination What tag is defined within the <head> and </head> tag <title>

Questions ? n n n When you type a Web address on the browser window you act as a server True / False What does the server do ? Translates the address into a machine readable form of addresses What is the name for the HTML coded commands ? tags

Questions ? What is an ‘attribute’ ? Defines the display of text that is enclosed by the tags n Define URL ? Uniform Resource Locator n Check the syntax of the code below: <body bgcolor=blue text=“red” </body> n How to save a HTML file ? Use. html extension n

Questions ? n n n How to view the source code of a Web page ? Click the right mouse Select view source Simple HTML pages are dynamic – True/False HTML is case sensitive – True/False How to skip a line between paragraphs ? <p> and </p> How to force a line break

Questions ? n What is a relative address ? It describes the path from one Web page to another, instead of a full Internet address

Setting up an Internet Web Site § To make the web page publicly accessible you need to put it on a web server § It is common practice to use web servers from internet service providers (ISP) to host your pages § You can use one company to host your web site and another separate company to access the Internet

Transferring pages to a web server § Web server computer sends web pages to people using the Hypertext Transfer Protocol (HTTP) information exchange standard § To upload a page to your web site an older communication standard called the File Transfer Protocol (FTP) is used

Transferring pages to a web server cont… (using FTP program) § ftp to the City University web server (e. g city. ac. uk) § Give your ‘username’ and ‘password’’ § Select the ‘public_html’ directory on the right side § highlight the files on the left side of the screen and transfer them using the ‘----->’ to the right side § Exit from the ftp window § rlogin to ‘paddington’ or ‘euston’ and give your ‘username’ and ‘password’ § Type ‘websetup’ on the UNIX command prompt

Publishing web pages on the server § From the Public Access Windows PCs, choose Start , Programs, Internet Utilities, then Telnet to City § From a normal Windows build (with an internet connection), choose Start, then Run and type telnet unix. city. ac. uk 1. Login in to the Unix server using your Computing Services login name and password. 2. If you get a menu of options, type H for Publish HTML documents, then say Y (yes) to all the questions or If you get a prompt, type websetup, then say Y (yes) to all the questions

HTML Common Tags <html> <body> <a> - <a href=“”> <a name=“”> <p> <ul> <li> <table> <frameset> <frame> <I> <b>

Images <html> <head> <title>Image Example</title> </head> <body> <img src=“image. File. gif”> </body> </html> Images are added with the img tag. Common image file types are *. gif and *. jpg

Text Alignment, Lists, and Special Characters n n To align a paragraph to the right margin, you use the align= “right” inside the <p> tag If an attribute is left out then the system uses the default attribute The word ‘align’ is called the ‘attribute’ Attributes control the functionality of the tag

Text Alignment, Lists, and Special Characters n n The attributes can be in lowercase or upper case. But for compatibility with XHTML uses use lowercase. The new standard will also require quotation marks around attribute values To set the alignment of more than one paragraph or heading at a time use the align attribute with the <div> or division tag

Special characters § Special characters can be inserted using the look up table. These can be found online at http: //www. w 3. org/tr/rechtml 40/sgml/entities. html § For example the word café would look like this: café or café § Most of the characters found in the world’s languages have been assigned numeric values in a coding system known as Unicode e. g. first six lowercase characters of the Greek alphabet are assigned the numbers 945 -950

Entities § § An entity is a sequence of characters that tells a browser to substitute a character for the sequence § They always contain an ampersand as a prefix and a semicolon as the suffix § The XHTML defining documents include the definitions of many entities. These defintions are found in documents that are known as Document Type Definition or DTD documents For more details http: //www. w 3. org/TR/xhtml 1/DTD/xhtml-symbol. ent

Types of HTML Lists § The bulleted list is called an unordered list - <ul> Bullets appear at each <li> instead of numbers § The numbered list at the top is called an ordered list <ol> - Numbers and line breaks appear automatically at each <li>, and the entire list is intended § The list of terms and their meaning is called a definition list - <dl> The <dt> tag goes in front of each term to be defined, with a <dd> tag in front of each definition

Types of HTML Lists

Advanced Text Formatting and Links § For boldface text, use the <b> at the beginning and the </b> at the end sis the text § For italic use the <I> tag and the </I> tag § To make something bold and italic use the <b><i> and </i></b> tags § Can use italics in headings but boldface won’t show in headings as they are already bold §

Example of <div> tag

Typeface § The latest version of Netscape and IE font control § The <font face> attribute enables you to specify the actual typeface that should be used to display text e. g: <font face = “lucida sans unicode, arial, helvetical”> §It starts with a bang. Then everything industrialists revolt this time. Japan gets nuked and takes over the world economy, the Berlin wall and Soviets fall, and the United States all sue Microsoft over the Internet. The end.

Linking your email address into a web page § Using the <a> tag you can link to your email address § Using this method the readers of your web page can talk back to you § E. g: <a href=mailto: raj@city. ac. uk> Send any comments</a> When someone clicks ‘send any comments’ a mail window will appear in which the message can be typed and sent

Linking your email address into a web page examples § Emmanuel Kant, President manny@24 hourhtmlcafe. com §Martin Heidegger, Secretary marty@24 hourhtmlcafe. com §Georg Wilhelm Friedrick Hegel, Senior Officer will-fred@24 hourhtmlcafe. com § The email address from the link is entered automatically, and the user can simply click the mail button to send the message

Font size and colour § The font ‘size’ and ‘colour’ attributes give control over the appearance of the text e. g: <font size=5 colour=“red”>This text will be big and red. </font> The ‘size’ attribute can take any value from 1 to 7 ( 3 being the default) The colour attribute can take any of the following colours: Black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, maroon. Purple, navy, olive, silver, or teal

HTML tags that add special formatting to text <small> - Small text <big> - Big small text <sup> - Superscript small <sub> Subscript small <strike> - Strikethrough Small <u> - Undeline small <strong> - Strong text <pre> - Monospaced smallfont; preserves spaces and line breaks

Using named anchors <html><head><title>Alphabetical. Shakespeare</title></head> <body> <a name="top"></a> <h 2>First Lines of Every Shakespearean Sonnet</h 2> <p><a href="#top">Return to Index. </a></p> <hr /> </body></html> Note: The # symbol means that the word top refers to a named anchor point within the current document, rather than to a separate page

Sample code for Forms <html><head><title>FREE!</title></head> <body> <h 1>Free Electronic Junk Mail!</h 1> enter your e-mail address below and click on the <i>Sign. UP!</i> button. <form method="post" action="/cgibin/cgiemail/mail 2. txt"> <input name="success" type="hidden" value="http: //24 hour. HTMLcafe. com/hour 8/thanks. htm" /> <input type="text" name="anotherone" size="25" /> <input type="image" src="signup. gif" border="0" align="top" /> </form> </body></html>

HTML Help View the lecture slides@ http: //www. staff. city. ac. uk/~raj For complete spec, http: //www. w 3 c. org

Assignment 1 n Create a simple web page with a standard text editor (Notepad/Word. Pad) n Remember to save in. htm or. html format n Post page on the university server. n If you are stuck check my links @: http: //www. staff. city. ac. uk/~raj/webtec. html ** n Check the Web. Tec coursework at : http: //www. staff. city. ac. uk/~raj/ee 301 CW. htm **10% of the Course Work mark is for attendance