Higher Institute of Technology Ramadan Tenth Computer Sciences Department

----------------------------------------

Lecture Notes on

Internet Programming
Prepared by

Dr. Sayed Saber Talab
Associate Professor of Computer Applications

Cairo, 2009

1

World Wide Web
The World Wide Web ("WWW" or simply the "Web") is a system of interlinked, hypertext documents that runs over the Internet. With a Web browser, a user views Web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks. The Web was created around 1990 by the Englishman Tim Berners-Lee.

Basic terms
The World Wide Web is the combination of four basic ideas:

Hypertext: a format of information which allows, in a computer environment, one to move from one part of a document to another or from one document to another through internal connections among these documents (called "hyperlinks");

Resource Identifiers: unique identifiers used to locate a particular resource (computer file, document or other resource) on the network - this is commonly known as a URL or URI.

The Client-server model of computing: a system in which client software or a client computer makes requests of server software or a server computer that provides the client with resources or services, such as data or files; and

Markup language: characters or codes embedded in text which indicate structure, semantic meaning, or advice on presentation.

On the World Wide Web, a client program called a user agent retrieves information resources, such as Web pages and other computer files, from Web servers using their URLs. If the user agent is a kind of Web browser, it displays the resources on a user's computer. The user can then follow

2

hyperlinks in each web page to other World Wide Web resources, whose location is embedded in the hyperlinks. It is also possible, for example by filling in and submitting web forms, to post information back to a Web server for it to save or process in some way. Web pages are often arranged in collections of related material called "Web sites." The act of following hyperlinks from one Web site to another is referred to as "browsing" or sometimes as "surfing" the Web. Although the English word worldwide is normally written as one word (without a space or hyphen), the proper name World Wide Web and abbreviation WWW are now well-established even in formal English.

How the Web works
Viewing a Web page or other resource on the World Wide Web normally begins either by typing the URL of the page into a Web browser, or by following a hypertext link to that page or resource. The first step, behind the scenes, is for the server-name part of the URL to be resolved into an IP address by the global, distributed Internet database. The next step is for an HTTP request to be sent to the Web server at that IP address, requesting the resource. In the case of a typical Web page, the HTML text is first requested and parsed by the browser, which then makes additional requests for graphics and any other files that form a part of the page in quick succession. This is the distinction between a single page view and the many hits or web requests that are often necessary to view the page. The Web browser then renders the page as described by the HTML, CSS and other files received, incorporating the images and other resources as necessary. This produces the on-screen 'page' that the viewer sees. Most Web pages will themselves contain hyperlinks to other relevant and informative pages and perhaps to downloads, source documents, definitions and other Web resources. Such a collection of useful, related resources, interconnected via hypertext links, is what has been dubbed a 'web' of information. Making it available on the Internet created what Tim Berners-Lee first called the World Wide Web in the early 1990s.

3

Thus even on sites with highly dynamic content. it is possible for designers of dynamically generated web pages to control the HTTP headers sent back to requesting users. It is worth it for any Web site designer to collect all the CSS and JavaScript into a few site-wide files so that they can be downloaded into users' caches and reduce page download times and demands on the server. so that pages are not cached when they should not be — for example Internet banking and news pages..If the user returns to a page fairly soon. the Web is made up of three standards: the Uniform Resource Identifier (URI). Web standards At its core. • • the HyperText Transfer Protocol (HTTP). the cached version will be reused in the rendering step. and • • the HyperText Markup Language (HTML). many of the basic resources are only supplied once per session or less. which specifies how the browser and server communicate with each other. such as Web pages. Some search engines such as Google also store cached content from Web sites. used to define the structure and content of hypertext documents. as well as for the HTML itself). again. JavaScript file etc. An HTTP request will be sent by the browser that asks for the data only if it has been updated since the last download. • 4 . stylesheet. If it has not. Apart from the facilities built into Web servers that can ascertain when physical files have been updated. as above. This is particularly valuable in reducing the amount of web traffic on the internet. which is a universal system for referencing resources on the Web. There are other components of the Internet that can cache Web content. it is likely that the data will not be retrieved from the source Web server. By default. browsers cache all web resources on the local hard drive. The most common in practice are often built into corporate and academic firewalls where they cache web resources requested by one user for the benefit of all. The decision about expiration is made independently for each resource (image.

Although some Web sites are available in multiple languages. In order to "publish" a Web page. especially if the place is in one of the developed countries. etc. It is not broken down into the hierarchy of chapters.. Unlike books and documents. and potential readers could be found in all corners of the globe.Publishing Web pages The Web is available to individuals outside mass media. and other materials are easier to access. sections. Additionally. one does not have to go through a publisher or other media institution. facilitated by the emergence of free Web hosting services. etc. These factors would challenge the notion that the World Wide Web will bring a unity to the world. and for those who wish to know other societies. their cultures and peoples. many are in the local language only. subsections. Many different kinds of information are now available on the Web. and RTL languages. government publications. for the users of the Internet. When travelling in a foreign country or a remote town. small shops. and therefore the variety of information obtainable with the same effort may be said to have increased. as well as pages by families. it has become easier. The increased opportunity to publish materials is certainly observable in the countless personal pages. not all software supports all special characters. 5 . one might be able to find some information about the place on the Web. Local newspapers. hypertext does not have a linear order from beginning to end.

particularly mobile phones. In 2003. Although browsers are typically used to access the World Wide Web. such as w3m. Microsoft announced that Internet Explorer would no longer be made available as a separate product but would be part of the evolution of its Windows platform. they can also be used to access information provided by web servers in private networks or content in file systems Opera. Mozilla Firefox. There are also several text-mode browsers with advanced features. Text and images on a web page can contain hyperlinks to other web pages at the same or different websites. While the Macintosh scene too has traditionally been dominated by Internet Explorer and Netscape. and Opera. Web browsers allow a user to quickly and easily access information provided on many web pages at many websites by traversing these links. derived from the KHTML layout engine of the open source Konqueror browser. The Lynx browser remains popular for Unix shell users and with vision impaired users due to its entirely text-based nature. Safari is the default browser on Mac OS X. the future appears to belong to Apple's Safari which is based on Apple's WebKit layout engine. It is available on the Nintendo DS Lite and has been confirmed for Nintendo's Wii console. as well as on PCs in some countries was released in 1996 and remains a niche player in the PC web browser market. Web browsers are the most commonly used type of HTTP user agent. and other information typically located on a web page at a website on the World Wide Web or a local area network. Netscape. Web browsers available for personal computers include Microsoft Internet Explorer. an innovative. in order of descending popularity (as of August 2006). and that no more releases for the Macintosh would be 6 . and the Links forks such as ELinks.Web browser A web browser is a software application that enables a user to display and interact with text. images. speedy browser popular in handheld devices. Links (which can operate both in text and graphical mode).

which stores or creates 7 . However. Its original purpose was to provide a way to publish and retrieve HTML pages. Modern browsers and web pages tend to utilize many features and techniques that did not exist in the early days of the web. XML and XHTML • Graphics file formats including GIF.made. As noted earlier. The destination server. or other end-user tool. PNG. more recently in early 2005. Features Different browsers can be distinguished from each other by the features they support. The originating client. with the browser wars there was a rapid and chaotic expansion of browser and World Wide Web feature sets. The following is a list of some of the most notable features: HTTP and HTTPS • HTML. JPEG. and SVG • Cascading Style Sheets (CSS) • Digital certificates • Bookmark manager • Caching of web contents • Support of media types via plugins such as Macromedia Flash and QuickTime • Autocompletion of URLs and form data • Tabbed browsing • Pop-up advertisement blocker • Protocols and standards Hypertext Transfer Protocol Hypertext Transfer Protocol (HTTP) is a method used to transfer or convey information on the World Wide Web. such as a web browser. is referred to as the user agent. Development of HTTP was coordinated by the World Wide Web Consortium and the Internet Engineering Task Force. spider. HTTP is a request/response protocol between clients and servers. Microsoft changed its plans and released version 7 of Internet Explorer for Windows in October 2006.

Internet Explorer does not fully support HTML 4. Most browsers natively support a variety of formats in addition to HTML. In between the user agent and origin server may be several intermediaries. Currently 8 . Many browsers also support a variety of other URL types and their corresponding protocols. The file format for a web page is usually HTML (hyper-text markup language) and is identified in the HTTP protocol. such as ftp: for FTP (file transfer protocol). and https: for HTTPS (an SSL encrypted version of HTTP). such as proxies. which is treated as an address. is called the origin server. rtsp: for RTSP (realtime streaming protocol). Modern web browsers support standards-based HTML and XHTML. gateways. or to make them accessible through the web page. The rapid development of proprietary web browsers led to the development of non-standard dialects of HTML. and tunnels. and streaming media into a web page. An HTTP server listening on that port waits for the client to send a request message. see List of TCP and UDP port numbers). Web browsers communicate with web servers primarily using HTTP (hypertext transfer protocol) to fetch webpages. sound. and can be extended to support more through the use of plugins. Pages are located by means of a URL (uniform resource locator). beginning with http: for HTTP access. The most commonly used HTTP is HTTP/1. PNG and GIF image formats. HTTP allows web browsers to submit information to web servers as well as fetch web pages from them. such as the JPEG. animations. The combination of HTTP content type and URL protocol specification allows web page designers to embed images. An HTTP client initiates a request by establishing a Transmission Control Protocol (TCP) connection to a particular port on a remote host (port 80 by default. video. Early web browsers supported only a very simple version of HTML. leading to problems with Web interoperability.resources such as HTML files and images. which should display in the same way across all browsers. Resources to be accessed by HTTP are identified using Uniform Resource Identifiers (URIs) (or.x yet. URLs) using the http: or https URI schemes. more specifically.01 and XHTML 1.

On 30 April 1993. so the distinction between individual sites. HTML (Hyper Text Markup Language) and are accessed using a software program called a Web browser. All publicly accessible websites are seen as constituting a mammoth "World Wide Web" of information. typically written in HTML. The URLs of the pages organize them into a hierarchy. and usually reside on the same physical server. These often generate non-standard HTML by default. hindering the work of the W3C in developing standards. also known as an HTTP client. created by Tim Berners-Lee. that is almost always accessible via HTTP. or dynamically converted to. used for page layout). Any website can contain a hyperlink to any other website. a protocol that transfers information from the website's server to display in the user's web browser. may sometimes be blurred. The first on-line website appeared in 1991. Overview A website may be the work of an individual. is kept here. Web pages can be viewed or 9 . A copy of the original first Web page. Websites are written in. specifically with XHTML and CSS (cascading style sheets.many sites are designed using WYSIWYG HTML generation programs such as Macromedia Dreamweaver or Microsoft Frontpage. typically common to a particular domain name or subdomain on the World Wide Web on the Internet. although the hyperlinks between them control how the reader perceives the overall structure and how the traffic flows between the different parts of the sites. CERN announced that the World Wide Web would be free to anyone. as perceived by the user. A web page is a document. The pages of a website will be accessed from a common root URL called the homepage. a business or other organization and is typically dedicated to some particular topic or purpose. Website A website (or Web site) is a collection of web pages.

Yahoo). Two examples are: Internet Archive. each specialising in a particular type of content or use. blogger. Commission Junction). Ebay) and consumer (e. • • • • • • Business site: used for promoting a business or service. Affiliate Agencies (e.000. which may include discussion forums (e. 10 . PDAs and cell phones. Commerce site or eCommerce site: for purchasing goods.otherwise accessed from a range of computer based and Internet enabled devices of various sizes.g. A website is hosted on a computer system known as a web server.g. including desktop computers. • • Blog (or web log) site: site used to log online readings or to post online diaries. also called an HTTP server. Types of websites There are many varieties of Web sites.000 messages posted to Usenet news/discussion groups. and they may be arbitrarily classified in any number of ways.com. Combinations exist (e. which since 1996 has preserved billions of old (and new) Web pages. Xanga).g. Advertisers (e. A few such classifications might include: Affiliate: enabled portal that renders not only its custom CMS but also syndicated content from other content providers for an agreed fee. Adbrite). There are usually three relationship tiers. • • Archive site: used to preserve valuable electronic content threatened with extinction. such as Amazon. which in early 2005 was archiving over 845. and these terms can also refer to the software that runs on these system and that retrieves and delivers the Web pages in response to requests from the website users. laptop computers.g.g. and Google Groups. Apache is the most commonly used Web server software (according to Netcraft statistics) and Microsoft's Internet Information Server (IIS) is also commonly used.

• • Development site: a site whose purpose is to provide information and resources related to software development. A prospective employee can locate and fill out a job application or submit a résumé for the advertised position. such as MSN Games and Pogo. Web design and the like. Virginia.com. • Geodomain refers to domain names that are the same as those of geographic entities. such as: RateMyProfessors. but not necessarily for commercial purposes. such as software. • 11 . Richmond. parodies or otherwise exists solely to amuse. • • Employment site: allows employers to post job requirements for a position or positions to be filled using the Internet to advertise world wide.com[1]is the geodomain for Richmond. • • Download site: strictly used for downloading electronic content. • • Directory site: a site that contains varied contents which are divided into categories and subcategories.Community site: a site where persons with similar interests communicate with each other. government. such as cities and countries. usually by chat or message boards. corporation.com. • • Gripe site: a site devoted to the critique of a person. place. or institution. such as Yahoo! directory. • • Game site: a site that is itself a game or "playground" where many people come to play. game demos or computer wallpaper. For example. Free Internet Lexicon and Encyclopedia. such as MySpace. • • Database site: a site whose main use is the search and display of a specific database's content such as the Internet Movie Database or the Political Graveyard. Google directory and Open Directory Project. • • Information site: contains content that is intended to inform visitors. • • Humor site: satirizes.

and the most widely known extended type is Yahoo!.g. often sharing stories. a gateway. • Wedsite: a website that details a couple's wedding event. Rating site: A site on which people can praise or disparage what is featured (e. ratemypet.com). • • Review site: A site on which people can post reviews for products or services. and event information. to other resources on the Internet or an intranet. and hotornot. • • Phish site: a website created to fraudulently acquire sensitive information.com. • • • • • Mirror (computing) site: A complete reproduction of a website.g. • • • • • • Political site: A site on which people may voice political views. Personal homepage: run by an individual or a small group (such as a family) that contains information or any content that the individual wishes to include. News site: similar to an information site. rotten. ratemycar. but dedicated to dispensing news and commentary.Most government. educational and non-profit institutions have an informational site. Pornography (porn) site: a site that shows pornographic images and videos.com). • 12 . • • Search engine site: a site that provides general information and is intended as a gateway or lookup for other sites. or portal. • • Web portal site: a website that provides a starting point. A pure example is Google.com.com. photos. such as passwords and credit card details. • Shock site: includes images or other material that is intended to be offensive to most viewers (e. (see Phishing). by masquerading as a trustworthy person or business (such as Social Security Administration.com and ratemypoo. PayPal) in an electronic communication. ratemygun.

13 . Websites are constrained by architectural limits (e. such as Cisco Content Services Switches. Combined with a data network and suitable access protocol. employ many servers and load balancing equipment. is a reference or navigation element in a document to another section of the same document. that automatically brings the referred information to the user when the navigation element is selected by the user. • Some websites may be included in one or more of these categories. a porn site is a specific type of eCommerce site or business site (that is.Wiki site: a site which users collaboratively edit (such as Wikipedia). but may also host informative documents. such as Yahoo!.g. or a specified section of another document. Hyperlink A hyperlink (often referred to as simply a link). As such it is similar to a citation in literature. A fan site may be a vanity site on which the administrator is paying homage to a celebrity. a business website may promote the business's products. There are also numerous sub-categories to the ones listed above. the computing power dedicated to the website). For example. but with the distinction of automatic instant access. and Google. another document. Very large websites. such as white papers. an advertisement that can be browsed around. For example. Microsoft. it is trying to sell memberships for access to its site). a computer can be instructed to fetch the resource referenced. Some websites act as vehicles for users to communicate with other people via Web chat. Many business websites have the appearance of brochures—that is.

These web publishing tools offer free page creation and hosting up to a certain size limit. During the initial creation of a web page. any text editor can view it. e. not the final product. This is a type of software that can retrieve web pages from the Internet. or it may publish pages on the World Wide Web. In order to upload the created web page to a web server. A design can be made according to ones own preference. Viewing a web page in a text editor will display the source code. Creating a web page To create a web page. 14 . Web pages may consist of files of static text within the web server's file system (static web pages). The design of a web page is highly personal. a corporate intranet. traditionally an FTP client is needed. Web Templates let web page designers edit the content of a web page without having to worry about the overall aesthetics. The web server may restrict pages to a private network. or the web server may read files of computer code that instruct it how to construct the (X)HTML for each web page when it is requested by a browser (dynamic web pages). Web pages may be retrieved from a local computer or from a remote web server. This information is usually in HTML or XHTML format. or Angelfire. Viewing a web page In order to view a web page. Many people publish their own web pages using products like Geocities from Yahoo. a text editor or a specialized HTML editor is needed. or a pre-made web template can be used.WEB PAGE A web page or webpage is a resource of information that is suitable for the World Wide Web and can be accessed through a web browser.g. before it is uploaded to the web server. Tripod. Web pages are requested and served from web servers using Hypertext Transfer Protocol (HTTP). a web browser is needed. and may provide navigation to other web pages via hypertext links.

give the option to not only print the currently viewed web page to a printer. There are always rules to follow. either within the body of the page or perhaps listed at then end. Mozilla and Mozilla Firefox only support this if the MAF plugin has been installed. An MHTML file is based upon the MHTML standard.All images will be saved.Other ways of making a web page is to download specialized software. other hyperlinks may be shown with the link destinations made explicit. 15 . fortunately. but optionally to "print" to a file which can be viewed or printed later. These options allow for quick and easy creation of a web page which is typically dynamic. Saving a web page A local copy of a web page may be saved to one's computer. stylesheets and scripts into a single MHTML file. which will be useless on paper. menus and other navigation items. are rendered into print with this in mind. the rules are few in number and what they offer is large. This is supported by Internet Explorer. but displayed as plain text • • Saving the HTML file as it was served . For HTML. These include. or forum. Mozilla and Mozilla Firefox.Overall structure will be preserved. CMS. Space-wasting menus and navigational blocks may be absent from the printed version.Hyperlinks will be preserved • • Saving the entire web page . so that hyperlinks. • Common web browsers.. like Mozilla Firefox and Internet Explorer. as well as links being changed to absolute • • Saving the HTML file including all images. Most GUI browsers will contain all the options for saving a web page. like a Wiki. as long as no copyright laws are violated.. for example by use of CSS. but are not limited to: Saving the rendered text without formatting or images Hyperlinks are not identified. Some web pages are designed. although some links may be broken • • Saving the HTML file and changing relative links to absolute ones .

0 • HTML.This is just an introduction to some concepts behind HTML. known as HTML 2. yet people have found ways (some might say "tricks") to attempt to use HTML for precise web page formatting. is how a web browser displays its multimedia documents.0. This version is starting to move towards a more 16 . By its original design. The early set of standards. Things got somewhat more complicated with the features included in HTML 3. The documents themselves are plain text files (ASCII) with special "tags" or codes that a browser knows how to interpret and display on your screen. By using "standard" HTML. and were at first supported by certain web browsers. It has exploded beyond everybody's expectations. are supported by nearly all web browsers. About those standards The World Wide Web is exciting. It is everywhere. HTML 3.2 since Netscape and Microsoft have introduced many features that go beyond standard HTML. The web really took off in popularity during the time of the 3. After this lesson you will be able to: Express the importance of HTML standards • Describe some of the differences between HTML 2. Where does HTML fit into this? What we cover in this notes is aimed toward producing documents that comply with current HTML standards. your work is going to be most widely "shareable" in the fast changing future of the 'net.0 which contain more features for HTML and some attempts to reduce the complexities of different web browsers. and HTML 4. HTML was not designed as a formatting tool. Keep in mind that the thing that makes the Web (and the Internet in general) work are agreed-upon rules ("standards") that allow users of almost any kind of computer to be able to communicate and share information.0. or HyperText Markup Language.2 standard. The current set of proposed standards is HTML 4.2.

web standards have made much more progress. Not only that. but their monitor size and fonts may not be the same as on the system you designed the pages. see the Web Standards Project for more information). Creating Your First HTML Document After this lesson you will be able to: Identify the meaning and purpose of HTML tags. this may limit what you'd like to put in a web page! If you include HTML that may look snazzy only in Netscape but not Internet Explorer. • Use a text editor to create the basic HTML structure for any web page. you can make the decision to use more of the "deluxe" features. let's start using it. you are probably not going to spend all of this time designing web pages that are for your viewing only! The idea is to make something that the world can view. via "Style Sheets" which allow the precise formatting web designers wish for. yes?) These "standards" turn out to be recommendations as no one has the authority to enforce them! (Note. Of course. From there."logical" method of formatting web pages. However. • Insert non-displayed comments into your HTML files. So the first section of lessons will take you through the most widely accepted features of HTML. 17 . making it easy to update an entire web site. you may turn people away from your site. it will take some time before this functionality is common and there are still bothersome differences between different web browser software (some "standards". • Open up a workspace for creating new HTML documents. and in a way that separates format from content. • Open your document within your web browser to see how it is displayed. as of 2006. viewers of your web pages may not only be using different browsers. What does this mean? For accessibility on the widest range of possible web browsers and versions out there. • Now that you know what HTML is. stick with the most basic set of HTML code. After all. 1.

. <h3>. make it into a header. and looks for special codes or "tags" that are marked by the < and > signs... HTML tags may tell a web browser to bold the text. This "/" slash tells a web browser to stop tagging the text. if you make a typographical error in HTML you will not get a "bomb" or "crash" the system. It is quick and easy to go inside the HTML and make the changes. The general format for a HTML tag is: <tag_name>string of text</tag_name> As an example. it will ignore it! For example. It is important to note that the ending tag. </tag_name> contains the "/" slash character. NOTE: A web browser does not care if you use upper or lower case. producing undesirable results (as an experiment you may want to try this later). Your browser has a small but open vocabulary! An interesting aspect of HTML is that if the browser does not know what to do with a given tag. it reads from a plain text file.. italicize it. If you forget the slash.What are HTML tags? When a web browser displays a page such as the one you are reading now. a web browser will continue the tag for the rest of the text in your document. Many HTML tags are paired this way.</H3> Unlike computer programming. the header tag for this section really looks like this: 18 . For example. your web page will simply look... the title for this section uses a header tag: <h3>What are HTML tags?</h3> This tag tells a web browser to display the text What are HTML tags? in the style of header level 3 (We'll learn more about these tags later). or make it be a hypertext link to another web page. wrong.</h3> is no different from <H3>. in this document you are viewing. well.

So you will want to be pretty comfortable jumping between different applications and windows on your computer. If our instructions say. Here are the steps for setting up your "workspace": 1. plus open your text editor application in a third window. Just ignore that for now. NOTE: This is a good place to remind you that we will provide directions that are somewhat general as the menu names and file names can differ depending on which web browser you are using. Opening Up Your Workspace To complete the lessons in this tutorial. from the File Menu" and your web browser does not have that exact choice.. Think of the first window as your "textbook" and the second clone window as your "workspace" for completing the HTML lessons. you should create a second web window (this allows you to keep this window with the lesson instructions and one window as your "workspace"). a new browser window opens with either a copy of the page you are viewing or your home page. In some web browsers (notable Internet Explorer). Another option is to print out the lesson instructions (but we really do not want to promote that kind of excessive tree carnage). perhaps in the future it could cause the text to wave across the screen?). I might decide to add the functionality for the <Dodo> tag into my software. A second web window should appear. "Select Open Location. From the File menu of your web browser..<Dodo> <h3>What are HTML tags?</h3> </Dodo> but since your browser probably does not support a <Dodo> tag (I made it up. If I were programming a new web browser. it proceeds with what it knows how to do. we will load new content in it below. select New Window or New Web Browser (The exact name of the menu command can be different depending on what browser you are using). 19 . try to find the closest equivalent option in your own web browser.

TextEdit for the Mac OSX (but you need to know how to save files as Plain Text-. You could also bookmark this web page or jump back here via your Go or History menu.. It will make your life simpler. Also. When you have got a few lessons under your belt. The head contains information about the document that is not displayed on the screen. Mac users can download the free and wonderfully simple Plain Old HTML Editor) or the Windows NotePad. it will help you if you first create a new directory/folder on your computer that will be your work area. The body then contains everything else that is displayed as part of the web page. well. NOTE: You will need to move back and forth between the different windows to complete these lessons. we most STRONGLY recommend that you use the simplest text editor available -. just make sure that you keep all of the files you create in this one area. Next. be sure to save in plain text (or ASCII) format. 20 . at least while working on this tutorial! Creating Your HTML Document An HTML document contains two distinct parts. You can call it workarea or myspace or whatever you like. you need to jump out of the web browser. Why not use those nifty HTML editors? It is sound instructional design that you first learn the concepts and THEN look for shortcuts or helpers that make the work less tedious. It is not mandatory to have two windows open. If you are using a word processor program to create your HTML. 2. then check out some of our recommended free HTML Editors. the head and the body. go to your desktop and open your text editor program.NOTE: The only reason to have two windows here is so that you can read the instructions for the lessons and also view your working document. it just makes your work easier..as an alternative. If you are just starting out. You may choose to resize the three windows so that they all fit on your screen or layer your windows so you can click on any of them to bring it to the front. This can be a challenge depending on the size of your monitor.

When your web pages get complicated (like you will see when we get into tables.. 21 .. not displayed on the page --> </head> <body> <!-.</html> tags. Also note the comment tags enclosed by <!—hi hi hi -->.</body> sections. The text between the tags is NOT displayed in the web page but is for information that might be of use to you or anyone else who might look at the HTML code behind the web page.The basic structure then of any HTML page is: <html> <head> <!-..header info used to contain extra information about this document.all the HTML for display --> : : : </body> </html> : : : Enclose all HTML content within <html>. the comments will be very helpful when you need to update a page you may have created long ago... frames. Inside is first your <head>.</head> and then the <body>. and other fun stuff about 20 lessons from now!)..

Save the document as a file called "volc. <body> 10. <!—Edited and updated by for the Writing HTML Tutorial by Dr.</head> portion and thus will not be visible on the screen. you will learn how to add a string of text for a title that will appear directly on your web page. Save all of your HTML files with names that end in ..HTM. What does it do? The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window. 3. launch your text editor program.. Are you ready? 1. the web browser will word wrap all text): 4. be sure to save in plain text (or ASCII) format. 13. If it is not open already. It is in the <head>. By using this file name extension..HTML. In the following. a web browser will know to read these text files as HTML and properly display the web page. if you are using a word processor program to create your HTML.Here are the steps for creating your first HTML file.. Also. </html> NOTE: Look where the <title>. Enter the following text (you do not have to press RETURN at the end of each line. 6. information on volcanoes and then write a report on 12. In this lesson you will use the Internet to research 11. 7.HTM or Volc.HTML so in this case your file should be VOLC. or . <html> <head> <title>Volcano Web</title> </head> 8. Sayed Saber --> 9. 22 . your results.</title> tag is located. 15. Go to the text editor window. 2.html" and keep it in the "work area" folder/directory you set up for this tutorial. 5. Also note that we have inserted a comment tag that lists the name of the author and the date the document was created. You could write anything in between the comment tags but it is only visible when you look at the source HTML for a web page. </body> 14.

the page is full of odd garbage characters. "volc. The most common mistake that beginners make here is that they try using a word processing program to type HTML and then are unable to open it in their browser. Make changes in your HTML document using the text editor. or if it does. (If you do not have a second browser window open yet.... When you are starting out. you should see it in the title bar of the web browser window.. Modifying an HTML Document Now that you have created your first HTML document." 1. Select Open File.. You should now see in the title bar of the workspace window the text "Volcano Web" and in the web page below. 2. (Note: For users of Internet Explorer. "In this lesson.html" 4. the one sentence of <body> text you wrote. click the Browse button to select your file) 3. After this lesson.). A common mistake we hear is. you will learn how to swiftly make changes in your document and view the updates within your web browser. you will be able to: • • • Re-open the workspace for your web page. from the File menu.</title> tag is NOT displayed on the web page. we urge you to use the most basic text editor. Use the dialog box to find and open the file you created. Reload the document in your web browser to see your changes. "I cannot see the title!" You shouldn't! The text within the <title>. Re-opening Your Workspace 23 . select New Window or New Browser from the File window.Displaying Your Document in a Web Browser Return to the web browser window you are using for your "work space".. Look for shortcuts later! 2.

command from the File menu to find and open the HTML file you created in the previous lesson. Note that the new text you entered in the previous steps may not yet be visible. To see the changes. Select Save from the File menu to update the changes in your HTML file. This instructs your web browser to read in the same HTML file and display it with whatever changes have been made. 4. Reloading the Document in your Web Browser Return to the web browser workspace where the previous version of your file was displayed. Here are the steps for re-opening your workspace (remember that the exact name of the menu commands may be different depending which web browser you are using): If not open. 24 . you will need to create a second web browser window and re-open the text editor window you used in the first lesson. Note that this text should be above the </body> and </html> tags at the bottom of your HTML file. 8. slow lava flow. or more quietly. You should now see the new text that you entered. 1. press RETURN a few times and type the following text: A volcano is a location where magma. 3. 6. open the file ("volc. Below the text you typed from the previous lesson. Making Changes in Your HTML Document 1. create a new web browser window by selecting New Window from the File menu. In the text editor. 9. use the Reload button or menu item in your web browser. 7. or hot melted rock from within a planet. 2. Re-open your text editor program.html") you created in the previous lesson. reaches the surface. 3. in a massive supersonic explosion..To complete this lesson. 2. as a sticky. It may happen violently. Use the Open File. 4. Go to the text editor window.. 5.

Headings: Six Levels Deep As you see in this web page.. you will be able to: Identify the different levels of headings in HTML and the tags associated with them.Six Levels Deep". different colors and fonts. Your browser determines the exact font and size for display. However. Voilà! your page will display if your computer supports drag and drop operations (It works for operating for Macintosh OS 7.. Of course. • HTML Headings You created headings in HTML by "tagging" certain chunks of text with heading tags.) appear as different sizes and. "Lesson". HTML provides tags for designating headings in six levels of significance.Note that the web browser ignores all blank lines and extra spaces (carriage returns) that you enter in the HTML file. between paragraphs). • Place different level headings within your HTML document and view the changes within your web browser. when you are writing HTML. the section headings ("Headings -.htm" file right into your web browser window. It will also ignore any extra space characters (beyond the one between words). You just passed a location in this very page! In Lesson 4 we will learn how to do this. it makes it easier to locate the correct location to make the changes...5 and Windows 95 or newer). "Objectives". "HTML Headings" . when you need to go back and edit content. Simply click and drag the icon for your "vol. The format for an HTML heading tag is: 25 .html" or "vol. You will have to arrange your computer desktop so that you can see the icon for your HTML files adjacent to your web browser window.g. Drag and Drop Bonus There may be an easier way for you to load and view your HTML pages. it will help you greatly to separate major sections by some blank lines. After this lesson. perhaps. there will be times that you want your web pages to have blank space between sections (e.

"volc. First. we will use the tag to display the title as the biggest header. <h1>Volcano Web</h1> Re-open your workspace (if not already opened). Below the text already entered. your heading levels should have logical.<hN>Text to Appear in Heading</hN> where N is a number from 1 to 6 identifying the heading size. Open the HTML text file you created in lesson 2. <H1>. consistent order and be parallel.html". Placing HTML Headings in Your Document 1. 5. Like an outline. Go to the text editor window. create other headings for future sections of your Volcano Web page. Enter the following headings inside the body of your web page (Note that some are H3 and others are H2 tags): 26 . Enter the following above the existing body text and after the </head><body> tags: 6. 2. 4. 3. Here are some examples of different heading sizes: Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6 Heading levels range from level 1 (Most Important) to level 6 (Least Important).

14. 19. h2 tags as Helvetica font and 24 point. 21. 20. 17. 16. Open and Reload the HTML file. 9. Note that on the computer you are using now. For example. 18. take a look at what happens when you make a typographical error. 23. 8. etc. HTML codes designate only that the headers are of a certain type (h1 to h6). on one computer you could have a browser display h1 tags as Times font and 36 point. Open your HTML document in the text editor and delete the slash (/) in the <h1> tag. <h2>Introduction</h2> <h2>Volcano Terminology</h2> <h2>Volcanic Places in the USA</h2> <h3>Mount St Helens</h3> <h3>Long Valley</h3> <h2>Volcanic Places on Mars</h2> <h2>Research Project</h2> <h3>References</h3> 22. your web browser interprets all of the succeeding text as part of that header! After trying this you should go back to your document and re-insert the slash in the correct spot. after the header Volcano Web: <h1>Volcano Web<h1> [missing "/" ------------^^^] Save the changes and reload into your web browser. 11. Save changes in your text editor. 15. 12. As an optional exercise.7. Return to your web browser. you can use the settings in your web browser to define the fonts and/or size of the headings. Without the correct ending of the h1 tag. how it is displayed is controlled by the user of the web browser. 13. 10. 27 .

the <h> tags have a built in break so it is unnecessary to put <p> tag before a header tag: <p> <h2>Hi Hi Hi Hi Hi </h2> Inserting Paragraph Breaks 28 . But. For basic HTML coding. for now you do not need to use: </p> In a later lesson we will see why we want to use <p> a closing </p> for the more current HTML coding standards. it inserts a blank line and starts a new paragraph. • Insert paragraph breaks into the text of your HTML document and view the changes within your web browser. let's keep it simple for now. wherever a browser sees the paragraph tag. • Copy text from the web page and paste it in another document.Paragraphing HTML Documents Now we will discuss the followings: Identify the paragraph break tag in HTML. The HTML code for forcing a paragraph break is: <p> Note that this tag is special in that it does not require an ending tag. • HTML Paragraph Breaks We've seen earlier that a web browser will ignore all of the CARRIAGE RETURNS typed into your text editor. Also.

Follow the directions below to insert and view a paragraph break in your HTML document. Use the Open Local. 2. as a sticky."). 7.. 3. we want to add some more text. Select Reload from the File menu.. It may happen violently. and then enter the paragraph tag: 17. 16. You should now see the two sentences of the Introduction. Re-open your workspace (if not already opened). 5. 1. or more quietly. in the text editor (if not already opened). return to your HTML document in the text editor. and paste this text after the existing sentences under the <h2>Introduction</h2> heading.. Again. volc. 14. This section should now look like: <h2>Introduction</h2> A volcano is a location where magma. reaches the surface. 4. If your working document is not visible. 12. 11. 8.. <p> 29 .") so that they are under the Introduction heading. command from the File menu to open the document. <p> 10. Compare the history of human beings. return to your HTML document in the text editor. or hot melted rock from within a planet. over four billion years in the making. Save the changes in the text editor. Now. Use the mouse to cut and paste this text in the proper location. a few million years in the making. But rather than re-typing this in. slow lava flow. in a massive supersonic explosion. Volcanoes have been a part of earth's history long before humans. First we want to move the sentences ("A volcano is . After the second sentence under <h2>Introduction</h2> (the one that ends " as a sticky. press RETURN (it is not necessary but it makes the HTML more readable as you work on it). After these sentences.. Go to the text editor window.. Open your working document. 15. slow lava flow. We now want to put a paragraph break between these sentences. 9. 13. Return to your web browser.html. to that of the Earth. from this web page use your mouse to select and copy the sentences: 6.

Moving on. This will help to separate the opening sentence of the lesson from the other portions that will follow. <p> the more tags you write. when writing the lines of a poem. <p> Moving on. to that of the Earth. we could all see at once the brilliant purpose of the paragraph tag.<br> Result And then. <p> Moving on. Other types of breaks To separate major sections of a web page. <br> the more tags you write. etc. the better you will feel? Paragraph <p> and Line Break <br> tags HTML And then. 19. a few million years in the making. use the horizontal rule or hr tag. Save the changes in the text editor. we could all see<br> at once the brilliant purpose<br> of the paragraph tag. Compare the history of human beings.Volcanoes have been a part of earth's history long before humans. Return to your web browser and Reload the document. The HTML format for a horizontal rule tag is: <hr> Let's try it now! Put an hr tag above the Introduction heading. 30 . over four billion years in the making. 18. The two sentences of the introduction should now be separate paragraphs. Compare the differences between using the <br> and <p> in these two examples: Paragraph <p> tags Only HTML And then. And finally... we could all see at once the brilliant purpose of the paragraph tag. but without inserting a blank line.. the more tags you write.. we could all see at once the brilliant purpose of the paragraph tag.. the better you will feel? Result And then.. This inserts a straight line like you see right above the heading for this section. there is the <br> tag which forces text to a new line like the <p> tag. You might use this tag when making a list of items.

<h4>The New Cheese Edict</h4> Later. Result and in the end it was all for naught. the header tags <h1>. the more tags you write. <b> <br> tags NOTE! The <b> tag is covered in the next lesson but all it does is make the text bold. and in the end it was all for naught.. 31 . sir Longhorn declared that all makers of cheese would have to be certified before commencing production. <p> <b>The New Cheese Edict</b><br> Later.the better you will feel? Moving on.. <h2>. sir Longhorn declared that all makers of cheese would have to be certified before commencing production. .. The New Cheese Edict Later.. The New Cheese Edict Later. Some web page authors prefer a style that controls this white space. Section titles with Header Tags HTML and in the end it was all for naught. sir Longhorn declared that all makers of cheese would have to be certified before commencing production. automatically insert white space above and below the text of the header tag. sir Longhorn declared that all makers of cheese would have to be certified before commencing production. If you notice. the better you will feel? The <br> tag can be used for a different layout style for your section headings. Section titles with HTML and Result and in the end it was all for naught.

HTML can tell a web browser to display certain portions of text in Italic or Bold Style or even a combination. Note how the different style tags are opened and closed around the words they style and how the heading tags surround the whole text for the heading. This section of HTML discuss the following: Identify the HTML tags for the text styles: bold. • Enter text in your HTML document in these different text styles and view the changes within your web browser. HTML Result <i><b>This is Bold AND Italic</b></i> <b><i>And So is This</i></b> This is Bold AND Italic And So is This Furthermore.</tt> Result This is Bold This is Italic This is Typewriter Note how you can combine the style tags as long as they are correctly nested. you can also add style to the text that appears in heading tags. • HTML Style Tags HTML offers several tags for adding style to your text. 32 . the italic tags are both within the bold tags. Note also..</b> <i>This is Italic. too much can make the text uncomfortable to read.. Just remember to be judicious and consistent in the use of styles.. that the order does not matter. and typewriter (mono-spaced)... Style tags HTML <b>This is Bold.</i> <tt>This is Typewriter.Style Just like a word processor. italic....

Enter <b>. 33 . <p> Volcanoes have been a part of earth's history long before humans. over four <b><i>billion</i></b> years in the making. we will use the typewriter. a few million years in the making. Under The study of volcanoes. volc. tag to indicate a special word. includes many odd terms. Return to your HTML document. 10.. 13.</i> tags around the word billion so this section looks like: 7. Now we will modify the second paragraph with the bold and italic tags to emphasize a word. 2.. 14. or <tt>Volcanology</tt>. 11.. Compare the history of human beings. enter the following: 15. Save in the text editor and Reload in your web browser. 9. 8. 3.</b> and <i>. to that of the Earth..HTML Hi Hi Hi Hi <h2><i>New</i> and <tt>Improved!</tt></h2> Hi Hi Hi Hi Result Hi Hi Hi Hi New and Improved! Hi Hi Hi Hi Entering Styled Text in HTML Document Follow these steps to apply style tags to your HTML document.html. 1. <b>volcano</b> 6. Re-open your workspace (if not already opened). Find the word "volcano" in the first sentence of the Introduction. 12. 4. Insert the tags to make this word appear as bold text: 5. the Volcano Terminology heading. Finally. in the text editor. We are going to make this bold to highlight an important word.

in Geneva it is a large round dot). • Place different list types within your HTML document and view the changes within your web page.these may be items preceded with a "bullet" (Unordered) or a sequentially numbered list (Ordered). the bullets are the option-8 character -. </ul> tags. lurking under the next heading! After this lesson. Lists are also handy for creating an index or table of contents to a series of documents or chapters. The bullet marks will depend on the particular version of your web browser and the font specified for displaying normal WWW text (e. Here is an example of an unordered list: My Unordered List: • • • Item 1 Item 2 Item 3 And this is the HTML format for producing this format: <b>My Unordered List:</b> <ul> <li> Item 1 <li> Item 2 34 . These lists are easy to format in HTML. and nested lists for a web page. Unordered Lists Unordered Lists.in Times font this is a small square. In fact..g. ordered. are ones that appear as a list of items with "bullets" or markers in the front. or <ul> . for Macintosh. and they may even be nested (lists of lists) to produce an outline format.Lists Lists can present items of information in an easy-to-read format. there is a list right here. • Many web pages display lists of items -. you will be able to: Identify HTML codes for creating unordered.

Your major concern will be to verify that each list is properly terminated and the nesting order is correct.<li> Item 3 </ul> The <ul> tag marks the beginning and end of the list. Using the example from above: My Ordered List: 1. but just try to remember the basic structure: <ul> <ol> <li> <li> </ol> <li> <li> </ul> Here is an example of an unordered list with sublevels of other lists: 35 . and the <li> indicates each list item. each will be indented appropriately by your web browser. Item 1 Item 2 Item 3 And this is the HTML format for producing this format: <b>My Ordered List:</b> <ol> <li> Item 1 <li> Item 2 <li> Item 3 </ol> Nested Lists Ordered Lists and Unordered lists can have different levels. 2. It can start to look complicated with all of those <ol> <li> </ul> <li> tags floating around. 3." Note that the only difference is changing the ul tag to ol tag. Ordered Lists Ordered lists are ones where the browser numbers each successive list item starting with "1.

And this is the HTML format for producing this format: <b>Nested Unordered List</b> <ul> <li>This is the first item <li>This is the second item <ul> <li> This is the first subitem of the second item <ul> <li> And this is a subitem of a subitem <li> Getting lost yet? </ul> <li> This is the second subitem of the second item <li> This is the third subitem of the second item </ul> <li>This is the third item </ul> Nested Lists -.Nested Unordered List • • This is the first item This is the second item o This is the first subitem of the second item  And this is a subitem of a subitem  Getting lost yet? o This is the second subitem of the second item o This is the third subitem of the second item This is the third item • Note how the bullet marks change for different levels of the list. this ordered list includes a nested unordered list: 36 . but watch how lists completely contain other lists. Hold onto your hats! The HTML starts to look pretty ugly. but you can also mix and match list types.Mixing them together Not only can you include ordered lists within ordered lists. For example.

Nested Unordered List Nested Unordered List 1. 2. 37 . Re-open your workspace (if not already opened). 1. This is the first item This is the second item o This is the first subitem of the second item 1. Note how the HTML has been indented to make it easier to read: <b>Nested Unordered List</b> <ol> <li>This is the first item <li>This is the second item <ul> <li> This is the first subitem of the second item <ol> <li> And this is a numbered subitem of a subitem <li> And this is another numbered subitem of a subitem <li> Getting lost yet? </ol> <li> This is the second subitem of the second item <li> This is the third subitem of the second item </ul> <li>This is the third item </ol> Placing Lists in Your HTML Document Using the list tags. Getting lost yet? o This is the second subitem of the second item o This is the third subitem of the second item This is the third item 3. And this is the HTML format for producing this format. An this is another numbered subitem of a subitem 3. An this is a numbered subitem of a subitem 2. you will now add an ordered and an unordered list to your Volcano Web page.

11. 10. Under the Volcano Terminology header we will use an unordered list to display examples of technical words used in the study of volcanoes. 9.this might be a good time to copy and paste from the web page. Under the Research Project heading. unless you enjoy typing in text!) 38 . Open your HTML document in the text editor. First add the following sentence. 7. 3. 4. Now enter the HTML format to create the list of terms: <ul> <li>caldera <li>vesicularity <li>pahoehoe <li>rheology <li>lahar </ul> 13. Go to this section in your HTML document. 8. Now we will use an ordered list to define the required parts of the assignment in this lesson. 5. enter the following: (HINT -. 12. How many of these do you know? 6.2.

BMP. PNG. <li>Dates of most recent and most destructive eruptions. Your mission is to find information and report on a volcano. <li>Other events associated with the recent eruptions 23. 27. distance. Then. (earthquakes.. other than the ones listed above... Save your HTML file and Reload in your web browser.14. when the information in that format is received by your Macintosh 39 . Speculate on what you would do if you were in charge of minimizing the risk to the population. It sounds like cryptic poetry. • • Lean back and relax! This lesson is mostly an introduction to graphics for the Web. write a one page description on the major hazards to humans in the vicinity of this volcano. Geek poetry! The way a web browser displays graphics in HTML format indicates the location of a graphic file in a single format that can be interpreted by different types of computers. PICT. TIFF. not to mention EPS. The Web's Graphic Format There are numerous file formats for computer graphics.. mudslides. Graphics Sending text over the Internet is just old fashioned e-mail. 22. But we'll have you do a little activity below. <p> 26. 15. Discuss key points to consider when including graphics in WWW documents. <ol> 18. GIF. and population of nearest major city 21. Your reports must include: 17. PCX. <li>Geographic location 20. JPEG. People have been doing it for decades! When you can include Pictures. 100 years. that has erupted in the last 16. you will be able to: Identify the graphic formats for the World Wide Web. • Download a graphic file to your computer. <li>Name. Bad poetry. etc) 24. For example. <li>Type of volcano 19. floods. • Use the correct HTML format for including pictures in your web page. </ol> 25. your message can be much more informative! After this lesson.

when that same information is received by your Windows browser. GIF images have the feature of defining a color to be "transparent" so images can appear to have nonrectangular boundaries. The standard format that can display within a web page is GIF or Graphics Interchange Format. see the SITO page on Graphics File Compression. JPEG offers some dramatic compression in filesize. The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. Newer ones such as ImageReady from Adobe and Fireworks from Macromedia have been specifically designed for creating web graphics. The other file format used on the web is JPEG (named after the Joint Photographic Expert Group that designed this format). GIF compression is most effective on graphics that have contiguous areas of solid color.g. In the early web years. and compression is even greater when the color is continuous in the horizontal direction. But most web browsers these days support JPEG images to be displayed right in the web page too. which may be at a trade-off for some image quality. JPEG compression is very effective for photographic images where the colors can vary spatially over short distances ("grainy" images). You can find other shareware programs/utilities for converting graphics to web format from download. JPEG images were not displayed in the page but were displayed in a separate window. If your web pages include graphics. For more information about these file formats. you should become familiar with creating pictures in either GIF or JPEG format. sometimes by a factor of 10 (e. However. If you are in the mood for a great book. we would say that this picture format is platform independent. using an external "helper" application. a 1500 kb file reduced to 150 kb). More and more graphics programs have built-in features to save files as GIF format.computer. JPEG images do not have the ability to have transparency. the images start to appear soon and "dissolve" to the final image. We will show you how to get a copy of the images that you will need. They can also be saved in the "interlaced" format so that when you see a web page.com. consider the following: 40 . it is displayed as a Windows graphic. as you begin to develop your own web pages. try Lynda Weinman's Designing Web Graphics. the web browser knows to display it as a picture format for Macintosh. you do not have to use one of these graphics programs. In technical jargon. since plain text characters can be understood by any computer. However. Some Points to Consider When Using Graphics For this tutorial. HTML itself is platform independent.

• Some graphics programs offer options for "no dithering" when converting to GIF -.com Yahoo's Clip Art 41 . The 'net is a busy place and getting busier every second.Large and numerous images may look great on a high-end computer. • Many dark grey tones on Macintosh computers are not discernible on Windows computers. Saving and Including Pictures in Your Web Page For the next lesson you will first need to download a copy of a GIF image of a volcano (watch out for that hot lava!). Independent Practice Surf the web and browse for pictures. but may be excruciatingly slow by a viewer using a slow modem over a busy network. • Most importantly. If you have numerous pictures to display. Just a few places you might try: • • • • ClipArt Connection CoolText Online Graphics Generator Ditto.g. • Color gradients may look pretty but for GIF images they do not compress as much as solid color areas and they can sometimes come out "banded". loaded with large pictures. • You may design a beautiful web page. but they will frustrate users who must wait for images to be sent over the network. that may load nicely from your computer. As a suggestion. • Not all of us have a 21-inch computer monitor! Keep graphic images no wider than 480 pixels and no higher than 300 pixels to avoid forcing users to scroll or resize their web browser window. • A single image (e. make sure that the images are ones that add meaning to your HTML documents. keep the total file size of all images on a web less than 100k (we aim for less than 50k each). Just follow the instructions on the Lesson 7 Image Studio and then return here to complete this lesson. Try to download at least one image that might be useful for your page. • Rather than displaying all of the images on the web page. a small "bullet") can appear several times in a web page with little added delay each time you use that same image. • Many web browsers "cache" images (storing them on your computer) meaning that using the same file in several web pages will load them from the viewer's computer rather than loading them across the Internet. try to break the web page into a series of linked pages. have them linked as external images that are downloaded only when a viewer clicks on a hypertext item.this can reduce the amount of "noise" in a solid background.

.. how in the H T M L do you display it in your document 42 .. You have the image. Now..• • • • • Lycos' Picture Search Yahoo's ImageSurf The Free Site Free Graphics Store Barry's Clip Art Server Coming Next..

43 . called anchors. However. These extended links can be multidirectional. the term link is often used for the source anchor. Hyperlinks were therefore integral to the creation of the World Wide Web. It also describes simple links which are unidirectional and therefore offer no more functionality than hyperlinks in HTML. or to a position in a webpage. e. XLink: Hyperlinks in XML The W3C Recommendation called XLink describes hyperlinks which offer a far greater degree of functionality than those offered in HTML.Hyperlinks in various technologies Hyperlinks in HTML Tim Berners-Lee saw the possibility of using hyperlinks to link any unit of information to any other unit of information over the Internet. spreadsheets. How hyperlinks work in HTML A link has two ends. a webpage. The URL of the position is the URL of the webpage with "#attribute name" appended.g. Hyperlinks in other technologies Hyperlinks are used in e-mails. The latter is achieved by means of a HTML element with a "name" or "id" attribute at that position of the HTML document. PDF documents. The most common link target is a URL used in the World Wide Web. and a direction. while the destination anchor is called the link target. or other resource. The link starts at the source anchor and points to the destination anchor. Text editors. linking from. word processing documents. and between XML documents. within. This can refer to a document. Links are specified in HTML using the <a> (anchor) elements. Apple's HyperCard and many other places.

When linking to PDF documents from a HTML page the "attribute name" can be replaced with syntax that references a page number or another element of the PDF. or comment. the complex link string is reduced to. 44 . and "class" or "id": <a href="URL" title="link title" target="link target" class="link class">link label</a> Example: To embed a link into a Page. e. This contributes to a clean. another program may be activated to open the file. links are displayed in underlined blue text when not cached. In most graphical web browsers. In a graphical user interface. easy to read text or document."#page=386".wikipedia.org">Wikipedia</a> Thus. blogpost. for example page=[pageNo] . "target". font or style. depending on the file type and on the browser and its plugins. If the target is not a HTML file.g. the usage of a mouse cursor may also change into a hand motif to indicate a link. The behaviour and style of links can be specified using the Cascading Style Sheets (CSS) language. it may take this form: <a href="http://www. but underlined purple text when cached. When the user activates the link (e. Link behavior in web browsers A web browser usually displays a hyperlink in some distinguishing way.g. [Wikipedia]. in a different colour. by clicking on it with the mouse) the browser will display the target of the link. The HTML code contains some or all of the five main characteristics of a link: • • • • • link destination ("href" pointing to a URL) link label link title link target link class or link id It uses the HTML element "a" with the attribute "href" and optionally also the attributes "title".

The intention in that case is to ensure that the person browsing is aware that there is no endorsement of the site being linked to by the site that was linked from. and that identifier can be used to refer to it later in the browsing session. If no current window exists with that name. some informative text about the link can be shown: It pops up. but sites that use frames and multiple windows for navigation can add a special "target" attribute to specify where the link will be loaded. which causes any frames in the current window to be cleared away so that browsing can continue in the full window. However. The closest contemporary analogy would be to build a list of bookmarks to 45 . the special window names "_blank" and "_new" are usually available. Nelson had been inspired by "As We May Think. In order to prevent accidental reuse of a window. IE and Mozilla Firefox show the title. and will always cause a new window to be created. the attribute is sometimes overused and can sometimes cause many windows to be created even while browsing a single site. and then scroll back and forth among pages in a trail as if they were on a single microfilm reel. not in a regular window." a popular essay by Vannevar Bush. the URL may be shown in the status bar. Opera also shows the URL. but in a special hover box.When the cursor hovers over a link. Another special page name is "_top". Windows can be named upon creation. Creation of new windows is probably the most common use of the "target" attribute. and reappears when the cursor is moved away and back). Bush described a microfilm-based machine in which one could link any two pages of information into a "trail" of related information. depending on the browser and/or graphical user interface. History of the hyperlink The term "hyperlink" was coined in 1965 (or possibly 1964) by Ted Nelson at the start of Project Xanadu. a link will open in the current frame or window. a new window will be created using the ID. It is especially common to see this type of link when one large website links to an external page. • Normally. In the essay. which disappears when the cursor is moved away (sometimes it disappears anyway after a few seconds. • In addition.

Some sites use the phrase "Link Free" on their websites to indicate that they will not be upset by unauthorized linking. although there is not much case law to support it. In a series of books and articles published from 1964 through 1980. In the Netherlands. for example. generalized it from a local desk-sized machine to a theoretical worldwide computer network. made it applicable to specific text strings rather than whole pages. and advocated the creation of such a network. In 2000. ruling that British Telecom's patent did not actually cover web hyperlinks.662 ) on web hyperlinks. some have argued that hyperlinks could infringe the "making available right" provided in the WIPO Internet treatises. Karin Spaink was initially convicted of copyright infringement for linking. some websites have claimed that linking to them is not allowed without permission. In some jurisdictions it is or has been held that hyperlinks are not merely references or citations. However.873. although this ruling was overturned in 2003. but are devices for copying web pages. after costly litigation. the courts that adhere to it see the mere publication of a hyperlink that connects to illegal material to be an illegal act in itself. working independently.without getting permission beforehand. a court found for Prodigy. Meanwhile. it is considered rude to link to a personal website-especially that of an artist-.S. a team led by Douglas Engelbart (with Jeff Rulifson as chief programmer) was the first to implement the hyperlink concept for scrolling within a single document (1966). In Japan. Patent 4. [1] Moreover. British Telecom sued Prodigy claiming that Prodigy infringed its patent (U. Although this principle is generally rejected by digerati. regardless of whether referencing illegal material is illegal. See NLS.topically related Web pages and then allow the user to scroll forward and backward through the list. 46 . Nelson transposed Bush's concept of automated cross-referencing into the computer context. and soon after for connecting between paragraphs within separate documents (1968). Legal and moral issues concerning hyperlinks While hyperlinking among pages of Internet content has long been considered an intrinsic feature of the Internet.

The consortium was created to get all those vendors to agree on a set of core principles and components which would be supported by everyone. It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the W3. the primary author of the original URL (Uniform Resource Locator). W3C also engages in education and outreach. and Comcast vs. Hightech Electronics Inc [2] and there are examples where sites have not been proven liable for linking. using specific protocols. Reimerdes. Google Inc.When linking to illegal or infringing copyrighted content the law of linking liability is currently considered a grey area. The Consortium is headed by Tim Berners-Lee. incompatible versions of HTML were offered by different vendors. World Wide Web Consortium The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (W3). Inc. 47 . for example Perfect 10 v. History The consortium was created to ensure compatibility and agreement among industry members in the adoption of new standards. increasing the potential for inconsistency between web pages. The cases of websites are proved liable outweigh those where websites were not liable. There are examples where sites have been proven liable such as Plaintiff Intellectual Reserve vs Utah Lighthouse Ministry. is a compact string of characters used to identify or name a resource. The main purpose of this identification is to enable interaction with representations of the resource over a network. Universal City Studios. Prior to its creation. develops software and serves as an open forum for discussion about the Web. v. URIs are defined in schemes defining a specific syntax and associated protocols. the principal technologies that form the basis of the World Wide Web. Uniform Resource Identifier A Uniform Resource Identifier (URI). typically the World Wide Web. HTTP (HyperText Transfer Protocol) and HTML (HyperText Markup Language) specifications.

HTML 4.w3. newlines.org/TR/html4/strict.01//EN" 48 . Here's an example of a simple HTML document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. The document type declaration names the document type definition (DTD) in use for the document. a declarative header section (delimited by the HEAD element). use this document type declaration: • • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. a body. which contains the document's actual content. so authors must include one of the following document type declarations in their documents. For documents that use this DTD.01 specifies three DTDs.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. a line containing HTML version information. tabs.The global structure of an HTML document Introduction to the structure of an HTML document An HTML document is composed of three parts: 1. White space (spaces. The HTML 4.01//EN" "http://www.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML> HTML version information A valid HTML document declares what version of HTML is used in the document. Sections 2 and 3 should be delimited by the HTML element. 3. The DTDs vary in the elements they support. The body may be implemented by the BODY element or the FRAMESET element. and comments) may appear before or after each section. 2.

Special entities The binding between public identifiers and files can be specified using a catalog file following the format recommended by the Oasis Open Consortium (see [OASISOPEN]).01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation).loose DTD "frameset. use this document type declaration: • • "http://www. The last two letters of the declaration indicate the language of the DTD. • This means that in a document type declaration. For HTML.w3. W3C will make every effort to make archival documents indefinitely available at their original address in their original form. authors may safely use a system identifier that refers to the latest version of an HTML 4 DTD.dtd"> The URI in each document type declaration allows user agents to download the DTD and any entity sets that are needed. use this document type declaration: • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.default strict DTD "loose.The HTML 4.01.w3.ent" -.Latin-1 entities "HTMLsymbol.01 is included at the beginning of the section on SGML reference information for HTML.org/TR/html4/loose. this is always English ("EN").ent" -.dtd" -. • Software conforming to the DTDs of the present specification may ignore features of future HTML 4 DTDs that it does not recognize.dtd"> • • • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. For documents that use this DTD.01 Transitional//EN" "http://www. For documents that use this DTD. 49 . The HTML Working Group reserves the right to correct known bugs.01 Frameset//EN" • "http://www.dtd" -. the HTML Working Group commits to the following policy: Any changes to future HTML 4 DTDs will not invalidate documents that conform to the DTDs of the present specification.Symbol entities "HTMLspecial. The following (relative) URIs refer to DTDs and entity sets for HTML 4: • • • • • • "strict.ent" -.w3. Note. As of the 24 December version of HTML 4.org/TR/html4/frameset. A sample catalog file for HTML 4.dtd"> The HTML 4.DTD for frameset documents "HTMLlat1.org/TR/html4/strict.dtd" -.01 Frameset DTD includes everything in the transitional DTD plus frames as well. Authors may also choose to use a system identifier that refers to a specific (dated) version of an HTML 4 DTD when validation to that particular DTD is required.

Attributes defined elsewhere • lang (language information).misc. dir -> Start tag: optional..dtd"> <HTML> .content.) -. The value of this attribute specifies which HTML DTD version governs the current document.document root element --> <!ATTLIST HTML %i18n.) -. This attribute has been deprecated because it is redundant with version information provided by the document type declaration. -. body.lang. Thus. a typical HTML document has this structure: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4..misc.org/TR/html4/strict. #IMPLIED -.content "TITLE & BASE?"> <!ELEMENT HEAD O O (%head. the remainder of an HTML document is contained by the HTML element.named dictionary of meta info -> Start tag: optional.lang. etc.document head --> <!ATTLIST HEAD %i18n. End tag: optional Attribute definitions version = cdata [CN] Deprecated.The head. BODY"> <!ELEMENT HTML O O (%html. </HTML> The document head The HEAD element <!-.01//EN" "http://www. goes here.content "HEAD.) +(%head.. dir -profile %URI.The HTML element <!ENTITY % html.%head.content..w3. defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" --> <!ENTITY % head. dir (text direction) After document type declaration. -. End tag: optional 50 .

--> <!ELEMENT TITLE . which doesn't provide much contextual background. for example as the page header or window title.misc.document title --> <!ATTLIST TITLE %i18n> Start tag: required. 51 . authors should provide context-rich titles. spoken). Thus. such as its title.The TITLE element is not considered part of the flow of text. dir (text direction) Every HTML document must have a TITLE element in the HEAD section. authors should supply a title such as "Introduction to Medieval BeeKeeping" instead. however.g.Attribute definitions profile = uri [CT] This attribute specifies the location of one or more meta data profiles. Exactly one title is required per document. End tag: required Attributes defined elsewhere • lang (language information)..(#PCDATA) -(%head.. The TITLE element <!-. make information in the HEAD available to users through other mechanisms. user agents must always make the content of the TITLE element available to users (including TITLE elements that occur in frames). For future extensions. user agents should consider the value to be a list even though this specification only considers the first URI to be significant. Attributes defined elsewhere • lang (language information). keywords that may be useful to search engines. dir (text direction) The HEAD element contains information about the current document. as a caption.) -. Since users often consult documents out of context. and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content. separated by white space. The mechanism for doing so depends on the user agent (e. It should be displayed. They may. Profiles are discussed below in the section on meta data. Authors should use the TITLE element to identify the contents of a document. instead of a title such as "Introduction". For reasons of accessibility.

the title attribute may annotate any number of elements....). For example. visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object).. but may not contain other markup (including comments)..com/neatstuff. which provides information about an entire document and may only appear once. </BODY> </HTML> The title attribute Attribute definitions title = text [CS] This attribute offers advisory information about the element for which it is set.some text.org/TR/html4/strict.. other head elements.Titles may contain character entities (for accented characters.some more text...01//EN" "http://www.gif" title="Me scuba diving"> me scuba diving last summer </A> . Values of the title attribute may be rendered by user agents in a variety of ways. document body...... Please consult an element's definition to verify that it supports this attribute.. </HEAD> <BODY> .dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> . setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource: . Here's a photo of <A href="http://someplace. 52 .w3.. Audio user agents may speak the title information in a similar context. Unlike the TITLE element. etc. Please consult the section on links and style sheets for details. Here is a sample document title: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. special characters.. The title attribute has an additional role when used with the LINK element to designate an external style sheet. For instance.

2.Note. For example. one may use the META element as follows: <META name="Author" content="Dave Raggett"> The META element specifies a property (here "Author") and assigns a value to it (here "Dave Raggett"). by linking to meta data via the LINK element (see the section on link types). "copyright". User agents are not required to support meta data mechanisms. Meta data Note. The W3C Resource Description Framework (see [RDF10]) became a W3C Recommendation in February 1999. specifying meta data involves two steps: 1.generic metainformation --> 53 . This specification does not define a set of legal meta data properties.information about a document rather than document content -. The meaning of a property and the set of legal values for that property should be defined in a reference lexicon called a profile. Declaring a property and a value for that property. For those that choose to support meta data. To designate a profile. RDF allows authors to specify machine-readable metadata about HTML documents and other network-accessible resources. From outside a document. 2. HTML lets authors specify meta data -. use the profile attribute of the HEAD element. this specification does not define how meta data should be interpreted. From within a document. Referring to a profile where the property and its legal values are defined. To improve the quality of speech synthesis for cases handled poorly by standard techniques.in a variety of ways. etc. future versions of HTML may include an attribute for encoding phonemic and prosodic information. via the META element. The META element <!ELEMENT META . to specify the author of a document. "keywords". the same profile applies to all META and LINK elements in the document head.O EMPTY -. Note that since a profile is defined for the HEAD element. a profile designed to help search engines index documents might define properties such as "author". For example. This may be done in two ways: 1. Specifying meta data In general.

for use with content -#IMPLIED -.g. End tag: forbidden Attribute definitions For the following attributes. expiration date. a list of key words. This specification does not list legal values for this attribute. 54 . the following declaration sets a value for the Author property: <META name="Author" content="Dave Raggett"> The lang attribute can be used with META to specify the language for the value of the content attribute. This enables speech synthesizers to apply language dependent pronunciation rules. The name attribute identifies the property and the content attribute specifies the property's value. For example. Attributes defined elsewhere • lang (language information). the permitted values and their interpretation are profile dependent: name = name [CS] This attribute identifies a property name.select form of content -- Start tag: required. This specification does not define a normative set of properties.metainformation name -#REQUIRED -. http-equiv = name [CI] This attribute may be used in place of the name attribute. Each META element specifies a property/value pair.<!ATTLIST META %i18n.. dir (text direction) The META element can be used to identify properties of a document (e. scheme = cdata [CS] This attribute names a scheme to be used to interpret the property's value (see the section on profiles for details). author.) and assign values to those properties. dir.lang. content = cdata [CS] This attribute specifies a property's value. HTTP servers use this attribute to gather information for HTTP response message headers.HTTP response header name -#IMPLIED -. http-equiv NAME name NAME content CDATA scheme CDATA > -. This specification does not list legal values for this attribute. etc.associated information -#IMPLIED -.

some HTML elements and attributes already handle certain pieces of meta data and may be used by authors instead of META to specify those pieces: the TITLE element. Thus. the author's name is declared to be French: <META name="Author" lang="fr" content="Arnaud Le Hors"> Note. as this makes the page inaccessible to some users.txt"> might also be written: <LINK rel="DC.org/rfc/rfc1866. When a property specified by a META element takes a value that is a URI. Instead. The following sample META declaration: <META http-equiv="Expires" content="Tue. The META element is a generic mechanism for specifying meta data. Please see the HTTP specification ([RFC2616]) for details on valid HTTP headers.txt"> META and HTTP headers The http-equiv attribute can be used in place of the name attribute and has a special significance when documents are retrieved via the Hypertext Transfer Protocol (HTTP). 20 Aug 1996 14:25:27 GMT This can be used by caches to determine when to fetch a fresh copy of the associated document. 20 Aug 1996 14:25:27 GMT"> will result in the HTTP header: Expires: Tue. Note. some authors prefer to specify the meta data via the LINK element.In this example. Note. HTTP servers may use the property name specified by the http-equiv attribute to create an [RFC822]-style header in the HTTP response.identifier" type="text/plain" href="http://www.ietf. Some user agents support the use of META to refresh the current page after a specified number of seconds. automatic page forwarding should be done using server-side redirects. However. and the cite attribute. the ADDRESS element. Authors should not use this technique to forward users to different pages.identifier" content="http://www. the following meta data declaration: <META name="DC. the INS and DEL elements.org/rfc/rfc1866. with the option of replacing it by a different URI.ietf. 55 . the title attribute.

11.gcf.For speakers of US English --> <META name="keywords" lang="en-us" content="vacation. When several META elements provide languagedependent information about a document.g. search engines may filter on the lang attribute to display search results using the language preferences of the user. For example.1 label: <HEAD> <META http-equiv="PICS-Label" content=' (PICS-1.5 density 0 color/hue 1)) '> <TITLE>..ce.12. and intellectual property rights management.31T23:59-0000" for "http://w3. sunshine"> <-. Gr&egrave. links to an appropriate starting point for browsing the collection.. specified in [PICS]) is an infrastructure for associating labels (meta data) with Internet content.1 "http://www. This example illustrates how one can use a META declaration to include a PICS 1. Originally designed to help parents and teachers control what children can access on the Internet. Further help is provided in the section on helping search engines index your Web site.For speakers of British English --> <META name="keywords" lang="en" content="holiday..For speakers of French --> <META name="keywords" lang="fr" content="vacances. <-. sunshine"> <-. Greece.. including code signing.org/v2.META and search engines A common use for META is to specify keywords that a search engine may use to improve the quality of search results. it also facilitates other uses for labels. privacy. soleil"> The effectiveness of search engines can also be increased by using the LINK element to specify links to translations of the document in other languages.html" ratings (suds 0.05T08:15-0500" until "1995. META and PICS The Platform for Internet Content Selection (PICS. document title .org/PICS/Overview. Greece.. PDF).</TITLE> </HEAD> META and default information 56 . links to versions of the document in other media (e. when the document is part of a collection.5" labels on "1994. and.

"copyright". The value of the profile attribute is a URI. For instance. The following example specifies the character encoding for a document as being ISO8859-5 <META http-equiv="Content-Type" content="text/html. and "date" -. The document character encoding.including "author". charset=ISO-8859-5"> Meta data profiles The profile attribute of the HEAD specifies the location of a meta data profile. an author might specify a 57 . For more information. such additional information may be critical. As these formats are relatively hard to process.cataloging"> <META name="date" content="1994-11-06T08:49:37+00:00"> </HEAD> As this specification is being written.com/profiles/core"> <TITLE>How to complete Memorandum cover sheets</TITLE> <META name="author" content="John Doe"> <META name="copyright" content="&copy. The default style sheet language. authorize the usage of the profile within the current HTML document)..3. User agents may use this URI in two ways: As a globally unique name. we recommend that authors use the [ISO8601] date format. "keywords". The scheme attribute allows authors to provide user agents more context for the correct interpretation of meta data."> <META name="keywords" content="corporate. The properties defined by this profile -. At times. it is common practice to use the date formats described in [RFC2616].The META element may be used to specify the default information for a document in the following instances: • • • The default scripting language. section 3.guidelines. 1997 Acme Corp. • As a link. see the sections on the INS and DEL elements. This specification does not define formats for profiles. User agents may dereference the URI and perform some activity based on the actual definitions within the profile (e.acme.g. search engines could provide an interface for searching through catalogs of HTML documents.have their values set by subsequent META declarations. • This example refers to a hypothetical profile that defines useful properties for document indexing. For example. where these documents all use the same profile for representing catalog entries. as when meta data may be specified in different formats. User agents may be able to recognize the name (without actually retrieving the profile) and perform some activity based on known conventions for that profile. <HEAD profile="http://www.

date in the (ambiguous) format "10-9-97"; does this mean 9 October 1997 or 10 September 1997? The scheme attribute value "Month-Day-Year" would disambiguate this date value. At other times, the scheme attribute may provide helpful but non-critical information to user agents. For example, the following scheme declaration may help a user agent determine that the value of the "identifier" property is an ISBN code number: <META scheme="ISBN" name="identifier" content="0-8230-2355-9"> Values for the scheme attribute depend on the property name and the associated profile. Note. One sample profile is the Dublin Core (see [DCORE]). This profile defines a set of recommended properties for electronic bibliographic descriptions, and is intended to promote interoperability among disparate description models.

The document body
7.5.1 The BODY element
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> <!ATTLIST BODY %attrs; -- %coreattrs, %i18n, %events -onload %Script; #IMPLIED -- the document has been loaded -onunload %Script; #IMPLIED -- the document has been removed -> Start tag: optional, End tag: optional Attribute definitions background = uri [CT] Deprecated. The value of this attribute is a URI that designates an image resource. The image generally tiles the background (for visual browsers). text = color [CI] Deprecated. This attribute sets the foreground color for text (for visual browsers). link = color [CI] Deprecated. This attribute sets the color of text marking unvisited hypertext links (for visual browsers). vlink = color [CI] Deprecated. This attribute sets the color of text marking visited hypertext links (for visual browsers). alink = color [CI]

58

Deprecated. This attribute sets the color of text marking hypertext links when selected by the user (for visual browsers). Attributes defined elsewhere id, class (document-wide identifiers) lang (language information), dir (text direction) title (element title) style (inline style information) bgcolor (background color) onload, onunload (intrinsic events) onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
• • • • • • •

The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. For audio user agents, the same content may be spoken. Since style sheets are now the preferred way to specify a document's presentation, the presentational attributes of BODY have been deprecated. DEPRECATED EXAMPLE: The following HTML fragment illustrates the use of the deprecated attributes. It sets the background color of the canvas to white, the text foreground color to black, and the color of hyperlinks to red initially, fuchsia when activated, and maroon once visited. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... document body... </BODY> </HTML> Using style sheets, the same effect could be accomplished as follows: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <STYLE type="text/css">

59

BODY { background: white; color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } </STYLE> </HEAD> <BODY> ... document body... </BODY> </HTML> Using external (linked) style sheets gives you the flexibility to change the presentation without revising the source HTML document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <LINK rel="stylesheet" type="text/css" href="smartstyle.css"> </HEAD> <BODY> ... document body... </BODY> </HTML> Framesets and HTML bodies. Documents that contain framesets replace the BODY element by the FRAMESET element. Please consult the section on frames for more information.

Element identifiers: the id and class attributes
Attribute definitions id = name [CS] This attribute assigns a name to an element. This name must be unique in a document. class = cdata-list [CS] This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters. The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser). For example, the following paragraphs are distinguished by their id values: <P id="myparagraph"> This is a uniquely named paragraph.</P> <P id="yourparagraph"> This is also a uniquely named paragraph.</P>

60

Almost every HTML element may be assigned identifier and class information. and error messages in red: SPAN.English messages --> <P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN> <P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN> <P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN> <!-. 61 . <!-. The class attribute has several roles in HTML: As a style sheet selector (when an author wishes to assign style information to a set of elements). As a target anchor for hypertext links. As a means to reference a particular element from a script. for identifying fields when extracting data from HTML pages into a database. • For general purpose processing by user agents. • In the following example.clar&eacute. For general purpose processing by user agents (e. etc.finie</SPAN> <P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN> The following CSS style rules would tell visual user agents to display informational messages in green.).g. the SPAN element is used in conjunction with the id and class attributes to markup document messages. translating HTML documents into other formats.error { color: red } Note that the French "msg1" and the English "msg1" may not appear in the same document since they share the same id value. the element may be said to belong to these classes.e deux fois</SPAN> <P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute. make them target anchors. Messages appear in both English and French versions. Authors may make further use of the id attribute to refine the presentation of individual messages. As the name of a declared OBJECT element. A class name may be shared by several element instances. on the other hand.info { color: green } SPAN.The id attribute has several roles in HTML: As a style sheet selector. etc.French messages --> <P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute. assigns one or more class names to an element. warning messages in yellow.warning { color: yellow } SPAN. • • • • • The class attribute.

For details.example { background : green } </STYLE> </HEAD> <BODY> <PRE class="example" id="example-1"> . <HEAD> <TITLE>. we can (1) create a hyperlink to it and (2) override class style information with instance style information. Generally. line breaks. The distinction is founded on several notions: Content model Generally. Formatting By default.. inline elements do not. block-level elements begin on new lines. We use the PRE element to format the examples. for example. </PRE> </BODY> By setting the id attribute for this example. Generally. that we are writing a document about a programming language. such as an inline style 62 . Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. We also assign a background color (green) to all instances of the PRE element belonging to the class "example". Style sheets provide the means to specify the rendering of arbitrary elements... including whether an element is rendered as block or inline..Suppose.. please consult the section on text. In some cases.. block-level and inline elements differ in how they inherit directionality information. The document is to include a number of preformatted examples. block-level elements may contain inline elements and other block-level elements. inline elements may contain only data and other inline elements. The id attribute shares the same name space as the name attribute when used for anchor names. Note. Directionality For technical reasons involving the [UNICODE] bidirectional text algorithm. Block-level and inline elements Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level").. Please consult the section on anchors with id for more information. For information about white space.example code here. document title . see the section on inheritance of text direction.. block-level elements are formatted differently than inline elements. and block formatting.</TITLE> <STYLE type="text/css"> PRE.

dir (text direction) title (element title) style (inline style information) align (alignment) onclick.%coreattrs.)* -. %events -. for example.)* -. the lang attribute. in conjunction with the id and class attributes.Name: Stephane Boyera. 7.. We might use the TABLE element as follows to structure the information: <!-. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.(%inline. onmousedown. -. End tag: required Attributes defined elsewhere id. See the section on the effect of style sheets on bidirectionality for more information. onmouseup. Since HTML does not include elements that identify objects such as "client"..for list elements. %i18n. ondblclick. Thus. authors are discouraged from overriding the conventional interpretation of HTML elements in this way. that we wanted to generate an HTML document based on a database of client information. this may be appropriate. The alteration of the traditional presentation idioms for block level and inline elements also has an impact on the bidirectional text algorithm. onmouseover. onkeydown. Email: sb@foo.5. class (document-wide identifiers) lang (language information).4 Grouping elements: the DIV and SPAN elements <!ELEMENT DIV .Example of data from the client database: --> <!-. offer a generic mechanism for adding structure to documents. we use DIV and SPAN to achieve the desired structural and presentational effects.(%flow. but generally speaking. onkeypress. to tailor HTML to their own needs and tastes.generic language/style container --> <!ATTLIST DIV %attrs.. onkeyup (intrinsic events) • • • • • • The DIV and SPAN elements.. onmousemove. Suppose. %i18n. "telephone number". etc.> Start tag: required. authors may use these elements in conjunction with style sheets. -.org --> <DIV id="client-boyera" class="client"> <P><SPAN class="client-title">Client information:</SPAN> 63 .%coreattrs. "email address". %events -> <!ELEMENT SPAN . etc.generic language/style container --> <!ATTLIST SPAN %attrs. onmouseout. Tel: (212) 555-1212.

H4.)* -. for instance: <P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV> which is typically rendered as: aaaaaaaaa bbbbbbbbb ccccc ccccc Headings: The H1. --> <!ELEMENT (%heading.) .com</TR> </TABLE> </DIV> Later.(%inline. For another example of usage.org</TR> </TABLE> </DIV> <DIV id="client-lafon" class="client"> <P><SPAN class="client-title">Client information:</SPAN> <TABLE class="client-data"> <TR><TH>Last name:<TD>Lafon</TR> <TR><TH>First name:<TD>Yves</TR> <TR><TH>Tel:<TD>(617) 555-1212</TR> <TR><TH>Email:<TD>yves@coucou.. H5.<TABLE class="client-data"> <TR><TH>Last name:<TD>Boyera</TR> <TR><TH>First name:<TD>Stephane</TR> <TR><TH>Tel:<TD>(212) 555-1212</TR> <TR><TH>Email:<TD>sb@foo. H6 elements <!ENTITY % heading "H1|H2|H3|H4|H5|H6"> <!-There are six levels of headings from H1 (the most important) to H6 (the least important). H2. we may easily add style sheet declarations to fine tune the presentation of these database entries.heading --> 64 . H3. Visual user agents generally place a line break before and after DIV elements. please consult the example in the section on the class and id attributes.

. There are six levels of headings in HTML with H1 as the most important and H6 as the least. dir (text direction) title (element title) style (inline style information) align (alignment) onclick.) %attrs...) with style sheets. we discuss the lesser known forest elephants. font-size: 12pt} DIV. onkeyup (intrinsic events) • • • • • • A heading element briefly describes the topic of the section it introduces. The following example shows how to use the DIV element to associate a heading with the document section that follows it. ... document title . %events -. set the font.<!ATTLIST (%heading. Heading information may be used by user agents. onmousedown. class (document-wide identifiers) lang (language information). onmouseover.this section continues.section { text-align: justify. <DIV class="subsection" id="forest-habitat" > <H2>Habitat</H2> <P>Forest elephants do not live in trees but among them. to construct a table of contents for a document automatically. %i18n. -. onmouseout. color: green } 65 ... Visual browsers usually render more important headings in larger fonts than less important ones. Doing so allows you to define a style for the section (color the background.. End tag: required Attributes defined elsewhere id.this subsection continues.. . onkeydown..subsection { text-indent: 2em } H1 { font-style: italic..</TITLE> <STYLE type="text/css"> DIV. <DIV class="section" id="forest-elephants" > <H1>Forest elephants</H1> <P>In this section.. onkeypress. </DIV> </DIV> This structure may be decorated with style information such as: <HEAD> <TITLE>. ondblclick. etc. onmouseup.%coreattrs.> Start tag: required. onmousemove. for example.

onmousedown. For example... onkeyup (intrinsic events) • • • • • The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form./People/Raggett/">Dave Raggett</A>. onmouseup.. %i18n. as in "See section 7. onkeypress. <A href=". Soon. onmouseout. onmousemove. however. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.> Start tag: required. onkeydown. a page at the W3C Web site related to HTML might include the following contact information: <ADDRESS> <A href=".information on author --> <!ATTLIST ADDRESS %attrs./People/Arnaud/">Arnaud Le Hors</A>. onmouseover.H2 { color: green } </STYLE> </HEAD> Numbered sections and references HTML does not itself cause section numbers to be generated from headings. Some people consider skipping heading levels to be bad practice. %events -.%coreattrs. style sheet languages such as CSS will allow authors to control the generation of section numbers (handy for forward references in printed documents. class (document-wide identifiers) lang (language information). End tag: required Attributes defined elsewhere id. dir (text direction) title (element title) style (inline style information) onclick. ondblclick. This facility may be offered by user agents. The ADDRESS element <!ELEMENT ADDRESS . contact persons for the <A href="Activity">W3C HTML Activity</A><BR> $Date: 1999/12/24 23:37:50 $ </ADDRESS> previous next contents elements attributes index 66 .2"). -.)* -. This element often appears at the beginning or end of a document.(%inline.

and a variety of other structures. hypertext links. These elements have properties: both attributes and content. the discussion of elements within this article focuses on the final SGML based HTML. the HTML 4. though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.01. However. lists. the discussion remains applicable (see HTML for a discussion of the minor differences in content between XHTML 1. yet are supported by some browsers and used by some web pages.0 supports the same elements as HTML 4 and in most cases valid XHTML 1.0 documents will be valid or nearly valid HTML 4 documents. embedded media.0 migrates HTML from its SGML underpinnings to an XML foundation. HTML elements are sometimes referred to as "tags" (an example of synecdoche). defining desired behavior or indicating additional element properties. an HTML element is an SGML element that meets the requirements of one or more of the HTML Document Type Definitions (DTDs). and 4) an end tag. XHTML 1. version 4.0 and HTML 4. Informally.01 strict DTD). an empty element has no content and requires no end tag. Elements may represent headings. 67 .0 elements remain identical to the HTML 4. More specifically. Accordingly.01). 2) any number of attributes (and their associated values). The end tag is optional for many elements. paragraphs. Such elements may be ignored or displayed improperly on browsers not supporting them. an HTML element indicates structure in an HTML document and a way of hierarchically arranging content. XHTML is the successor to HTML 4. Many HTML elements include attributes in their start tags. in a minimal case. Syntactically HTML elements are constructed with: 1) a start tag marking the beginning of an element. 3) some amount of content (characters and other elements)'. There are a few elements that are not part of any official DTDs.01 (unless noted otherwise). as specified (both allowable and required) according to the appropriate HTML DTD (for example.01 elements. XHTML 1. to the extent that XHTML 1.HTML element In computing.

but most may contain either block-level or inline elements. inline elements. Inline or text-level elements — such as hyperlinks. Incorrect <p>Mary kissed <em>Jimmy</p></em> Correct <p>Mary kissed <em>Jimmy</em></p> Some block-level elements (e. Nesting of elements Many HTML elements can be nested. citations. They are usually displayed as independent "blocks" separated from other blocks by vertical space (margins).</p> Nesting may be arbitrarily deep. They may contain only text or other inline elements. and some (e. Document elements Root elements provide the containers enclosing all other HTML elements. quotations. c'est <em>moi</em>!</q> (<cite><a href="/wiki/Louis_XIV_of_France">Wikipedia</a></cite>). paragraphs. below). The surrounding tags may be omitted. lists) must contain only block-level child elements. forms. first out). <html>…</html> 68 . but the elements must be closed in the reverse order that they were opened for the code to remain valid (this pattern is known as Last in. or tables — are "large" structures containing other blocks. paragraphs) may contain only inline elements. or contained within other HTML elements: <p>You <em>rock</em></p> Nesting can be more complex: <p>King Louis said. Every HTML page has these elements. or images — are "small" structures that represent or describe small pieces of text or data. lists. <q lang="fr">L'état. and are usually displayed one after another on a line within the block that contains them.Block-level and inline elements HTML elements are classified as either block-level or inline (text-level). or text (but see nesting rules. some utilities may not recognize or correctly handle the document if this is done.g.g. However. Block-level elements — such as headings.

unordered list (ul). There are seven possible head elements including a meta element for extensible specification of metadata. which contains the displayed content of the page. definition list (dl). form (form).. division (div). and address (address). fieldset (fieldset). below. instead of an XML or another class document). arranged in any order to suit the meaning and also typically the presentation of the document. ordered list (ol). </body> </html> Head elements <title>…</title> Define a document title. Different user agents may make use of the title in different ways. The ins and del elements are also permissible within the body element when used as block level elements.h6). No other HTML elements are valid within the body element. heading (h1. </head> <body> At least one of either a block element or a script element must occur. (See Frames. which contains information about the page. table (table). block quotation (blockquote).. for an exception where body is not used. 69 . Title is the only required head element. This element is required in every HTML and XHTML document. The only contents allowed in an HTML element is one head element and one body element. The head element basically contains the metadata for the document.) <head>…</head> Delimit the header section of the document.(though any number may occur).e. These root elements are arranged as follows: <html> <head> Any of the various head related elements arranged in any order and occurring any number of times except base and title which can only occur once each. <body>…</body> Delimit the body section of the document. The other block elements are: paragraph (p). no script support (noscript).Delimit an HTML document (i. The HTML element takes the attributes lang for the primary language for the document (such as en for English) and a profile for a URI specifying metadata for the document (rarely used).

Must appear before any element that refers to an external resource. A common use is to link to external stylesheets. [4] <object>…</object> Use for including generic objects within the head. [3] <style>…</style> Specifies a style for the document. and in the task bar when it is minimized. <script>…</script> Used to add JavaScript or other scripts to the document. Deprecated in favor of stylesheets. HTML permits only one base element for each document. Used together with font elements. using the form: <link rel="stylesheet" type="text/css" href="url" title="description of style" />[2] (deprecated) Specifies a base font size.Web browsers usually display it in the title bar when the window is open. or alternate versions [1]. An HTML head may contain any number of link elements. The base element has attributes. this could potentially be used to extract foreign data. The title element must not contain any nested tags (in other words it cannot contain any other elements). </style>. typeface and color of the document. <base/> Specifies a base URL for all relative href and other links in the document. Only one title element is permitted in a document. usually: <style type="text/css">…</style> The CSS statements may be literally typed between the style tags and/or it may be in separate resources whose URLs are specified in @import directives such as: <style> @import "url". 70 . Search engines' web crawlers may pay particular attention to the words used in the title element. The script code may be literally typed between the script tags and/or it may be in a separate resource whose URL is specified in script's optional src attribute. relevant to the document. The link element has attributes. and associate this data with the current document. such as 'previous' and 'next' links. <link/> Specifies links to other documents. but no contents. Though rarely used as a head element. It may become the default filename when saving the page. but no contents.

<q>…</q> A quotation containing only inline elements (for quotations containing block level elements see blockquote below). with a value of 'bar'. publication date. a meta element specifies name and associated content attributes describing aspects of the HTML page.<meta/> Can be used to specify author. meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from web server to client. meta elements specify key-value pairs. a third optional scheme attribute may be supplied to specify a semantic framework that defines the meaning of the key and its value. By the specification. Rather. Practical concerns due to 71 . the meta element identifies itself as containing the 'foo' element. page description. In one form. see the W3C specification. An oral user agent may use different voices for emphasis. the author should not include quotation marks. General phrase elements <em>…</em> Emphasis (conventionally displayed in italics) <strong>…</strong> strong emphasis (conventionally displayed bold). keywords and any other metadata not provided through the other head elements and attributes. Quote elements may be nested. expiry date. quotation marks — including nested quotation marks — should be rendered through stylesheet properties or the browser's default stylesheet. They must be wholly nested within block-level elements (see block elements below). To prevent possible ambiguity. For more specific information of the use of the meta element in HTML. from the DC or Dublin Core resource description framework. Inline Inline elements cannot be placed directly inside the body element for valid HTML. For example: <meta http-equiv="foo" content="bar" /> This example specifies that the page should be served with an HTTP header called 'foo' that has a value 'bar' In the general form. Because of their generic nature. For example <meta name="foo" content="bar" scheme="DC" /> In this example.

. using Cascading Stylesheets. For example: <q class='lengthy'>An inline quotation of significant length (say 25 words. An alternative. user input (<kbd>).</q>. requires some presentational markup to manually classify the element as a lengthy quotation. Reference for a quote or statement in the document. Note: within semantic HTML. The cite attribute gives the source. Computer code phrase elements These elements are useful primarily for documenting computer code development and user interaction through differentation of source code (<code>).. One method is to use an XSLT to select quotation elements exceeding a certain length (in terms of characters or words. <dfn>…</dfn> Defining first instance of a term <abbr>…</abbr> Contains an abbreviation like HTML <acronym>…</acronym> Contains an acronym similar to the abbr element.) for indented block presentation.browser non-compliance may force authors to find work-arounds. and terminal output (<samp>). Conventionally rendered in a monospace font: Code snippet. the display of a lengthy inline quotation as an indented block should be handled through stylesheet presentation. <cite>…</cite> A citation. and must be a fully qualified URI. source code variables (<var>). <code>…</code> A code snippet. <samp>…</samp> Sample output (from a program or script) <kbd>…</kbd> 72 . etc. for example) goes here.

text to be entered by the user <var>…</var> Variable Special inline elements <sub>…</sub> <sup>…</sup> Create subscript or superscript text: Equivalent CSS: {vertical-align: sub} or {vertical-align: super} <del>…</del> Deleted text. both ins and del elements may be used as block elements: containing other block and inline elements. and a third. to indicate the deletion in the intervening paragraphs. the query string is appended to the current URL and the document is displayed with these keywords highlighted. used as a block element. Generally if the server supports this feature it will add the iisindex elements to documents without author intervention. Links and anchors <a>…</a> Creates an element that becomes a hyperlink with the href attribute set to a URL. Note. Visually presents a one-line text input for keyword entry. However. some informative text about the link: 73 . Typically rendered as a strikethrough: <ins>…</ins> Inserted text. When submitted. (deprecated) The :isindex element requires server side support for indexing documents. Two del elements would be required as inline element to indicate the deletion of text in the first and last paragraphs. Typically rendered underlined: Inserted text.Keyboard . Often used to markup replacement text for <del>'d text. For example deleting text from the middle of one paragraph across several other paragraph and ending in a final paragraph would need to use three separate del elements. these elements must still remain wholly within their parent element to maintain a well-formed HTML document). additionally the attribute title may be set to a hover box text.

<a href="URL" title="additional information">link text</a> In most graphical browsers. depending what has been exposed in this way by the object's developers. when the cursor hovers over the link. <map>…</map> Specifies a client-side image map. This may be in any MIME-type the Web browser understands. font. etc. Examples include width. 74 . code to be handled by a plug-in such as Flash. <object>…</object> Includes an object in the page of the type specified by the type attribute. but in a special "hover box". acts as a link target (a "document fragment"). which disappears when the cursor is moved away. although Microsoft Internet Explorer renders it as a tooltip. each <param/> sets a parameter for the object. Alternatively (and sometimes concurrently). Using attributes such as name and value. the element becomes an anchor with the name attribute set. the required alt provides alternative text in case the image cannot be displayed. not in a regular window. <param>…</param> or <param/> This element may only appear inside an object element. <br> <br/> (XML compatible) Specifies a line-break. a sound file. though this is technically incorrect. Alt is intended as alternative text. typically causing a Web browser to scroll directly to that point of the page. so using <a name="foo"> is not necessary. usually similar to a Tooltip. the cursor typically changes into a hand with a stretched index finger and the additional information pops up. Some browsers render alt text the same way. and appended to the URL. the title attribute is the tooltip text. a Java applet. See also:link Images and objects <img/> Includes an image with the src attribute. background colour. such as an embedded page. <area> <area/> (XML compatible) Specifies an area in the map. height. Any element can be made into an anchor by using the id attribute. etc. which preceded by a number sign '#'.

Deprecated. General block elements <p>…</p> Creates a paragraph. Some are block-level. (deprecated) Includes a Java applet in the page. Like most HTML elements.<embed>…</embed> (proprietary) Calls a plug-in handler for the type specified by the type attribute. and must be a fully qualified Uniform Resource Identifier. The blockquote element is often misunderstood. Span element <span>…</span> Creates an inline logical division. but most are inline and can be included in the normal flow of text. <noembed>…</noembed> (proprietary) Specifies alternative content. Headings 75 . The cite attribute may give the source. Used for embedding Flash files. For quotations not containing block level elements see the quote (q) element. quoting several paragraphs). Block Many HTML elements are designed for altering the semantic structure or meaning of a document. which can then be referenced from CSS or DOM call. In HTML strict DTDs inline elements are prohibited from blockquote elements. It is an element meant to contain quotations that are themselves block level. <hr/> Inserts a horizontal rule. etc. perhaps the most common block level element. for example so as to apply an id or class attribute. <blockquote>…</blockquote> Contains quoted material when the quotation itself includes block level elements (for instance. The closing tag is not required in HTML. Horizontal rules can also be handled through the CSS properties. span also supports inline CSS in its optional style attribute). This is a proprietary Netscape extension to HTML. if the embed cannot be rendered. This may be used to identify a part of the HTML page. sound files. In other words. it contains a complete paragraph or many paragraphs. <object> is now preferred. <object> is the W3C standard method.

The lowest level heading is <h6>. <h3> for a level below that. <tfoot>…</tfoot> Specifies the footer part of a table. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media). Combined with a first-class javascript engine.<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>… </h6> Section headings at different levels. <td>…</td> Creates a table data cell within a row. Tables <table>…</table> Creates a table <tr>…</tr> Creates a row in the table. Some programs use them to generate outlines and tables of contents. contents are conventionally displayed bold and centered. <th>…</th> Creates a table header cell within a row. and so on. <caption>…</caption> Specifies a caption for the entire table. <col/> Specifies attributes for an entire column in a table. Most web browsers will show <h1> as large text in a different font. Use <h1> for the highest-level heading (the major sections). but this can be overridden with CSS. and <h6> as small bold-faced text. The heading elements are not intended merely for creating large or bold text: they describe something about the document's structure and organization. these controls provide support for rich user interfaces. <colgroup>…</colgroup> Specifies a column group in a table. <h2> for the next level down (sub-section). Like <thead>. <thead>…</thead> Specifies the header part of a table. Main article: HTML form 76 . this section may be repeated by the user agent if the table is split across pages (in printing or other paged media) Forms These elements can be combined into a form or used separately as user-interface controls. An aural user agent may use a louder voice for these items. <tbody>…</tbody> Specifies the main part of a table.

<option value="x"/> Creates a menu item in a menu list. <select name="xyz">…</select> Create a menu list. <input type="button"/> Creates a general-purpose button.e. Can be checked or unchecked. However. <form action="url">…</form> Creates a form. some form of script either server-side or client side must be used to process the user's input once it is submitted. <input type="image"/> Creates a button using an image. and the method by which it will be submitted. The image URL may be specified with the src tag. <input type="text"/> 77 . If multiple radio buttons are given the same name. the user will only be able to select one of them from this group. if the client supports it) which provides richer possibilities. from which the user can select a single option. May be rendered as a dropdown menu. <input type="checkbox"/> Creates a checkbox.HTML specifies the elements that make up a form. But it's advised to use <button> if possible (i. <input type="submit"/> Creates a submit button. <input type="radio"/> Creates a radio button. <input type="reset"/> Creates a reset button for resetting the form to default values.

These approaches differ in some ways (World Wide Web Consortium [5]). <label for="name">…</label> Creates a label for a form input (e. or region. The frames layout is given by comma separated lists in the rows and cols attributes. A different document linked with the src attribute appears inside. Frames An HTML document may contain a header and a body or a header and a frameset. Text in between the tags appears in the text area when the page is loaded. The only difference is that inputted text is masked: usually every character is shown as an asterisk or a dot. however. Maxlength sets the maximum number of characters the user can enter (which may be greater than size). that the value is submitted to the server as clear text. which embeds another HTML document. A similar effect can also be achieved using the object element. but not both.Creates a one-line text input. See also Framing (World Wide Web). <textarea rows="8">…</textarea> Create a multiple-line text area. So an underlying secure transport layer like HTTPS is needed if confidentiality is a matter. Presentational markup 78 . <frame>…</frame> Delimit a single frame. within the frameset. radio button). For frames the Frames DTD must be used. <noframes>…</noframes> Contains a normal <body> element with child elements that will appear in web browsers that don't support frames. <frameset>…</frameset> Delimit the frameset. It should be noted. the size of which is specified by cols and rows attributes. The size attribute specifies the default width of the input in character-widths. <iframe>…</iframe> An inline frame inside a normal HTML <body>. <input type="password"/> Creates a variation of one-line text input.g. Clicking on the label toggles the control.

The equivalent CSS should be used instead. Deprecated elements are only valid in the Transitional and Frameset variants of HTML 4. 79 . unless otherwise specified in the <body> or other tags. Examples (all the examples are deprecated. <font size="+1">text</font> creates text with size 1 bigger than the standard. 5. 2. <font color="#1f4099">text</font> creates text with hexadecimal color #1f4099. typeface with the face attribute.0. use CSS equivalents if possible): 1.Official The use of presentational markup is discouraged. Equivalent CSS: {font-size: larger}. Equivalent CSS: {text-decoration: underline} <font [color=color. <font face="Courier">text</font> makes text with Courier font.0 and XHTML 1. <b>…</b> and <i>…</i> are invalid in the current draft of XHTML2. See template:fontcolor.0. 3.01 and XHTML1. Sizes are from 1 to 7. and absolute or relative size with the size attribute. Equivalent CSS: {font-style: italic} <big>…</big> Creates bigger text.1. <b>…</b> Use boldface type. May also center-align all text. <font size="4">text</font> creates text with size 4. <small>…</small> Creates smaller text. <font color="green">text</font> creates green text. Equivalent CSS: {font-size: smaller} (deprecated) (deprecated) Create strike-through text: Strikethrough Equivalent CSS: {textdecoration: line-through} <tt>…</tt> Use a typewriter-like (fixed-width) font. They are invalid in the Strict variants of HTML 4. Equivalent CSS: {font-weight: bold} <i>…</i> Use italic type. The standard size is 3.01.] [size=size. (deprecated) Creates a block-level centered division. Equivalent CSS: {font-family: monospace} (deprecated) (deprecated) Use an underlined font.] [face=face]>…</font> Can specify the font color with the color attribute. Deprecated in favor of <div> or another element with centering defined using CSS. 4. <font size="-1">text</font> is opposite.. XHTML1.

• <font color="red"> corresponds to {color: red} • <font face="Courier"> corresponds to {font-family: Courier} • Unofficial These are unofficial presentational elements that may not be supported in all browsers. For compatibility with some pre-1995 browsers. A client should render none of its enclosed contents. 80 . SGML comments are sometimes used inside <style> or <script> tags. nor does it define a unit). but this is not necessary and may in fact cause undesired effects. use scripting instead.Equivalent CSS for font attributes: <font size="N"> corresponds to {font-size: Yunits} (the HTML specification does not define the relationship between size N and unit-size Y. This is an SGML tag and not limited to HTML. The closing ">" is required. Can be done with CSS where supported: {textdecoration: blink} <marquee>…</marquee> (unofficial) Creates scrolling text. <blink>…</blink> (unofficial) Causes text to blink. Can be done with CSS: {whitespace: nowrap} HTML Comment <!--…--> Encloses a comment. No equivalent with CSS. <nobr>…</nobr> (unofficial) Causes text to not return at end of line. so it may appear anywhere in the document. even before the DTD or after </html>.

especially standards produced by the IETF and the W3C. and some schemes embody aspects of both categories – or neither. A URI can be classified as a locator or a name or both.org. For example. The contemporary point of view among the working group that oversees URIs is that the terms URL and URN are context-dependent aspects of URIs. and rarely need to be distinguished. However. They are also. because all URIs can be treated as names. as encoded characters) is obtainable via HTTP from a network host named www. A URN can be used to talk about a resource without implying its location or how to dereference it. disjoint sets. generally. the URL http://www.org/ is a URI that identifies a resource (Wikipedia's home page) and implies that a representation of that resource (such as the home page's current HTML code. Schemes in the URL (locator) and URN (name) categories both function as resource IDs. A Uniform Resource Locator (URL) is a URI that. so URL and URN are subsets of URI. A Uniform Resource Name (URN) is a URI that identifies a resource by name in a particular namespace.[1] In technical publications. like an International Standard Book Number (ISBN). allows one to talk about a book. many schemes can't be categorized as strictly one or the other.wikipedia. the term URL has long been deprecated. provides means of acting upon or obtaining a representation of the resource by describing its primary access mechanism or network "location".wikipedia. the URN urn:isbn:0-395-36341-1 is a URI that. in addition to identifying a resource. as it is rarely necessary to distinguish between URLs 81 . For example.Relationship to URL and URN Venn diagram of Uniform Resource Identifier (URI) scheme categories. but doesn't suggest where and how to obtain an actual copy of it.

addressing. and then a scheme-specific part. "ftp". The idea of a URL — a short string representing a resource that is the target of a hyperlink — was implicitly introduced in late 1990 in Tim Berners-Lee's proposals for HyperText [1]. HTTP. and the more contentious Uniform Resource Name came to represent strings used for the latter purpose. in nontechnical contexts and in software for the World Wide Web. reserves certain characters for special purposes. The syntax and semantics of the scheme-specific part are determined by the specifications that govern the schemes.and URIs. The URI syntax also enforces restrictions on the scheme-specific part. etc. although it generally refers only to 'http' and 'https' URIs. Syntax The URI syntax is essentially a URI scheme name like "http". During the debate over how to best define URLs and URNs. is often used in nontechnical publications as a synonym for URL or URI. and Web browsers were developed. followed by a colon character. a need to distinguish between strings that provide an address for resources and those that merely name resources emerged. "mailto". the term Uniform Resource Locator came to represent strings used for the former purpose.. At the time. Percentencoding is an often misunderstood aspect of URI syntax. and identifying resources URIs and URLs have a shared history. provide for a degree of consistency when the part has a hierarchical structure. which has no formal definition. "mms". although the URI syntax does force all schemes to adhere to a certain generic syntax that. the term web address. without always saying what those purposes are. as the World Wide Web's core technologies of HTML (the HyperText Markup Language). the term URL remains ubiquitous. Additionally. However. it became evident that the two concepts embodied by the terms were merely aspects of 82 . it was called a hypertext name or document name[2] Over the next three-and-a-half years. for example. "rtsp". among other things. in order to. Although not yet formally defined. History Naming. "urn".

this RFC attempted to summarize the syntax of URL schemes that were in use at the time. It does not. In addition. coordinated by RFC 2396 co-author Roy Fielding. those are still governed by RFC 1738. In December 1999. define how relative URLs were to be resolved to absolute form. refines the "http" scheme. With the publication of RFC 2396 in 1998. It also acknowledged.the fundamental. the IETF published Berners-Lee's RFC 1630: the first RFC that (in its non-normative text) acknowledged the existence of URLs and URNs. This community effort. and all parts of RFCs 1630 and 1738 relating to URIs and URLs in general were revised and expanded. The content of RFC 3986 was simultaneously published by the IETF as the full standard STD 66. RFC 1738 was published in order to formally define relative and absolute URLs. allowing URIs to accommodate IPv6 addresses. render the details of existing URL schemes obsolete. refine the general URL syntax. and better enumerate the URL schemes that were in use at the time. 83 . the existence of relative URLs and fragment identifiers. and it renders RFC 2396 obsolete. in June 1994. except where otherwise superseded — RFC 2616 for example. reflecting the establishment of the URI generic syntax as an official Internet protocol. but did not standardize. RFC 2732 provided a minor update to RFC 2396. overarching notion of resource identification. more importantly. So. however. Refinement of specifications In December 1994. defined a formal syntax for Universal Resource Identifiers — URL-like strings whose precise syntax and semantics were dependent upon their scheme. Some time later. This RFC is the current version of the URI syntax recommended for use on the Internet. Only those portions of RFC 1738 that summarized existing URL schemes were not rendered obsolete by RFC 2396. culminated in the publication of RFC 3986 in January 2005. In the new RFC. The definition and syntax of URNs was not settled upon until the publication of RFC 2141 in May 1997. and most parts of RFCs 1630 and 1738 became obsolete. and. a number of shortcomings discovered in the two specifications led to the development of a number of draft revisions under the title rfc2396bis. the "U" in "URI" was changed to represent "Uniform" rather than "Universal". the URI syntax became a separate specification.

If a fragment identifier is present in the base URI. It now serves only as a reminder that some URIs act as addresses because they have schemes that imply some kind of network accessibility. despite its ubiquity in the vernacular of the Internet-aware public at large. The part of the reference before the "#" indirectly identifies a resource. although if the reference itself is absolute. resource identification need not be coupled with the retrieval of resource representations over the Internet. preceded by "#". The base URI is typically the URI that identifies the document containing the URI reference. or even some trailing component thereof—even the empty string. it is ignored during the merging process. the resource identified by that URI. The URI reference is considered to be relative to the base URI. and. The distinction between a URI and a URI reference is not often maintained in informal usage. An optional fragment identifier. A URI reference may take the form of a full URI. As URI-based standards such as Resource Description Framework make evident. in turn. may be present at the end of a URI reference. If a fragment identifier is present in the URI reference. URI reference A URI reference is another type of string that represents a URI. faded into near-obsolescence. such as external documents or specific portions of the same logical document. nor does it need to be associated with network-bound resources at all. then the base is irrelevant. URI references are frequently used in places where there is a need to point to other resources. or just the schemespecific portion of one. but protocol documents should not allow for ambiguity. it is preserved during the merging process. the URI reference is converted to "absolute" form by merging it with an absolute "base" URI. In web document markup languages. according to a fixed algorithm. regardless of whether they are actually being used for that purpose. RFC 3305 pointed out that the term URL has. Uses of URI references in markup languages 84 . and the fragment identifier identifies some portion of that resource.In August 2002. In order to derive a URI from a URI reference. although this can be overridden by declarations made within the document or as part of an external data transmission protocol.

In HTML./resource. The "resolver" component in document processing software generally provides both services.txt urn:issn:1535- Examples of URI references • • • • • • • • • http://example/resource.txt#frag01 http://somehost/absolute/URI/with/absolute/path/to/resource.txt resource. • In XML.txt#frag01 #frag01 (empty string) URI resolution To "resolve" a URI means either to convert a relative URI reference to absolute form.txt /resource./.txt /relative/URI/with/absolute/path/to/resource./.. as is the first argument to the document() function. • In XSLT. as is the value of the href attribute of the a or link element. a new representation should not be fetched.. This is only a recommendation.txt relative/path/to/resource.txt ftp://somehost/resource. or to dereference a URI or URI reference by attempting to obtain a representation of the resource that it identifies. A URI reference may be considered to be a same-document reference: a reference to the document containing the URI reference itself. • Examples of absolute URIs • • • http://somehost/absolute/URI/with/absolute/path/to/resource. the value of the src attribute of the img element is a URI reference. and 85 . the system identifier appearing after the SYSTEM keyword in a DTD is a fragmentless URI reference.txt .. the value of the href attribute of the xsl:import element/instruction is a URI reference. Document processing software is encouraged to use its current representation of the document to satisfy the resolution of a same-document reference.

a URI reference is a same-document reference if it is an empty string or consists of only the "#" character followed by an optional fragment. it is identical to the base URI that is in effect for the reference.document processing software is free to use other mechanisms to determine whether obtaining a new representation is warranted. the namespace name is not considered to be a URI because the "URI-ness" of strings is. according to the URI specification. There has been much debate about this among XML professionals on the xml-dev electronic mailing list. Relation to XML namespaces XML has a concept of a namespace. The consensus seems to be. for example. for example. which was made obsolete by RFC 3986 but is still used as the basis of many specifications and implementations. though. likely has nothing to do with the HTTP protocol. RFC 3986 also formally defines URI equivalence. the namespace name was allowed to match the syntax of any non-empty URI reference. still represents the same resource and thus can be considered to be a same-document reference. According to this specification. in effect. which must adhere to the generic URI syntax. a namespace name beginning with "http:". Typically. A namespace name also does not necessarily imply any of the semantics of URI schemes. but the use of relative URI references was later 86 . XSLT 1. and since the Namespaces in XML specification says that the namespace name is a URI reference. An XML namespace is identified by a character string. while not identical to the base URI. since the collection of names comprising a particular namespace could be considered to be a resource that is being identified. not just their lexical components. RFC 3986. based on how they are intended to be used. the namespace name. Initially.0. the base URI is the URI of the document containing the reference. Same-document references were determined differently according to RFC 2396. a URI reference is a same-document reference if. an abstract domain to which a collection of element and attribute names can be assigned. According to the current URI specification. when resolved to absolute form. implements this functionality. some feel that a namespace name could be a URI. nothing more. has a document() function that. that a namespace name is just a string that happens to look like a URI. However. which can be used in order to determine that a URI reference.

XML document authors were encouraged to put RDDL documents in locations such that if a namespace name in their document was somehow dereferenced. In the early times. In order to mitigate the confusion that began to arise among newcomers to XML from the use of URIs (particularly HTTP URLs) for namespaces.1. by the time the RFC 1630 formally defined the term URI as a generic term best suited for the concept. which has continued to this day. URI/URL syntax in brief Main article: URI scheme#Generic syntax 87 . A popular synonym for "URI" The idea of a uniform syntax for global identifiers of networkretrievable documents was the core idea of the World Wide Web. to be used as the basis for namespace names. thus satisfying the desire among many developers for a namespace name to point to a network-accessible resource. since not all identifiers were locators. these identifiers were variously called "document names". but some people pronounce “URL” as an acronym (“Earl”).and human-readable information about a particular namespace and about the XML documents that use it. the term "URL" gained widespread popularity. But these names were misleading. then an RDDL document would be obtained. But. a descriptive language called RDDL was developed. and allows IRI references. An RDDL document can provide machine. A separate specification was issued for namespaces for XML 1. and even for those that were it was not the defining characteristics.deprecated by an erratum to the Namespaces In XML Recommendation. The standard pronunciation of “URL” is as an initialism (“U-R-L”). not just URI references. "Web addresses" and "Uniform Resource Locators".

g. its network ‘location’).org/ by performing a HTTP request to the host example.” Clean URLs Clean URLs are URLs used by dynamic web pages yet look as if they were static web pages because they are free from any parameters. "example. Dereferencing URI mailto:bob@example.. an IP address or other network address might be used instead. They are also free from filename extensions. a URL is a URI which.org. • URI scheme 88 . “in addition to identifying a resource. Most Web-enabled programs will try to dereference a URI according to the semantics of its scheme and a context-specific heuristics. For example.com will usually open a "Compose e-mail" window with the address bob@example. purpose and syntax of the remaining part of the URI.com" is a domain name. at the default HTTP port.com in the "To" field. a Web browser will usually dereference a http://example. [provides] a means of locating the resource by describing its primary access mechanism (e.Here is a typical URI dissected: http://user:pass@example. URLs as locators In its current strict technical meaning. thus hiding the type of server side technology used in the web application.com:992/animal/bird? species=seagull#wings \___/ \_______/ \_________/ \_/\__________/\______________/\____/ | | | | | | protocol login host port path anchor/fragment | query Every URI (and therefore every URL) begins with the scheme name which defines its namespace.

period (". 89 . and is terminated by a colon (":"). or specifically as URI protocols or URL protocols. or hyphen ("-") characters. Furthermore. for instance. All URIs and absolute URI references are formed with a scheme name. but not the current STD 66/RFC 3986) the scheme-specific part.g. The http: scheme."). RFC 2717 describes the procedures for registering new URI schemes.g. and the plus ("+"). URI schemes are sometimes erroneously referred to as "protocols". that are not related to the protocol. is generally used for interacting with Web resources using HyperText Transfer Protocol. URI schemes should be registered with IANA. Today. some URI schemes are not associated with any specific protocol (e. digits. subject to certain constraints such as reserved characters and how to "escape" them. Every URI is defined as consisting of four parts. RFC 2718 provides guidelines for the development of new URI schemes. such as RDF resource identifiers and XML namespaces. "news:"). as follows: <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ] The scheme name consist of a letter followed by any combination of letters. although many nonregistered schemes are used in practice. Both of these RFCs are currently undergoing revision. and often have the same name. Generic syntax Internet standard STD 66 (also RFC 3986) defines the generic syntax to be used in all URI schemes. followed by a colon character. The syntax and semantics of the scheme-specific part are left largely to the specifications governing individual schemes.A URI scheme is the top level of the URI (Uniform Resource Identifier) naming structure. URIs with that scheme are also used for other purposes. since most were originally designed to be used with a particular protocol. "file:") and many others do not use the name of a protocol as their prefix (e. and the remainder of the URI called (in the outdated RFCs 1738 and 2396.

key1=value1&key2=value2&key3=value3. a hostname (i. Its syntax is not generically defined. though not necessarily representing them) separated by a forward slash ("/"). The query is an optional part separated with a question mark. a section heading in an article identified by the remainder of the URI. The authority part holds an optional user information part terminated with "@" (e."). username:password@).com:8042/over/there?name=ferret#nose \_/ \______________/\_________/ \_________/ \__/ | | | | | scheme authority path query fragment | _____________________|__ / \ / \ urn:example:animal:ferret:nose Domain name 90 . e. Usually this part begins with a double forward slash ("//").g. Each segment can contain parameters separated from it using a semicolon (". Examples The following are two example URIs and their component parts (taken from STD 66): foo://example. but is commonly organized as a sequence of <key>=<value> pairs separated by an ampersand. It holds additional identifying information which allows indirect identification of a secondary resource.g. domain name or IP address). e. g.The hierarchical part of the URI is intended to hold identification information hierarchical in nature. The fragment is an optional part separated from the front parts by a hash ("#"). followed by an authority part and an optional path. which contains additional identification information which is not hierarchical in nature. and an optional port number preceded by a colon ":". The path part is a sequence of segments (conceptually similar to directories. though this is rarely used in practice.e.

and end with a letter or digit. such as a longer minimum length. digits. Labels must be between 1 and 63 characters long (inclusive). They allow for any service to move to a different location in the topology of the Internet (or another internet). Fully qualified domain names (FQDNs) are sometimes written with a final dot. which have relaxed over the course of time. Later it became permissible for labels to commence with a digit (but not for domain names to be entirely numeric). domain names allow Internet users to easily find and communicate with Web sites and other server-based services.The term domain name has multiple related meanings: A name that is entered into a computer (e. The flexibility of the domain name system allows multiple IP addresses to be assigned to a single domain name. The authoritative definition is that given in the RFCs that define the DNS. These are the rules imposed by the way names are looked up ("resolved") by DNS. digits and hyphens between the dots is called a label in the parlance of the domain name system (DNS). and for labels to contain internal underscores. Valid labels are subject to certain rules. • A name looked up in the DNS for other purposes. any intervening characters may be letters. domain names are compared case-insensitively.g. on some labels. Some top level domains impose more rules. or hyphens. By making possible the use of unique alphabetical addresses instead of numeric ones. This means that one server may have multiple roles (such as hosting multiple independent Web sites). Letters are ASCII A– Z and a–z. which would then have a different IP address. or an e-mail address) then looked up in the global Domain Name System (DNS) which informs the computer of the IP address(es) assigned to that name. as part of a Web site or other URL. • The product that registrars provide to their customers. or multiple domain names to be assigned to a single IP address. Each string of letters. but support for such domain names is uneven. The original rules state that labels must start with a letter. • They are sometimes colloquially (and incorrectly) referred to by marketers as "Web addresses". or one role can be spread among many 91 . • Domain names are hostnames that provide more memorable names to stand in for numeric IP addresses.

such as with anycast and hijacked IP space.34. These are the names directly to the left of . Top-level domains are sometimes also called first-level domains.servers. To accommodate this. there are second-level domain (SLD) names.com As a general rule.com. This feature goes under the name virtual hosting and is commonly used by Web hosts. the data corresponding to the hostname requested. one server with one IP address can provide different sites for different domain names. the server at 192. For example. This way. is served to the user.com/ Domain name: example. the server will not have any way to know which was used. the IP address and the server name are interchangeable. Examples The following example illustrates the difference between a URL (Uniform Resource Locator) and a domain name: URL: http://www. However. or a two characters territory code based on ISO-3166 (there are few exceptions and new codes are integrated case by case).net. the explosion of interest in the Web means that there are far more Web sites than servers. and the 92 .com example2. For most Internet services. One IP address can even be assigned to several servers.net example3. . Other-level domains In addition to the top-level domains.166 handles all of the following sites: example1. the hypertext transfer protocol (HTTP) specifies that the client tells the server which name is being used. which is always either one of a small list of generic names (three or more characters).0.example.org When a request is made. Top-level domains Every domain name ends in a top-level domain (TLD) name.

with a variety of models adopted to recoup the costs to the provider. When the DNS was new. A domain owner can generally give away or sell infinite subdomains of their domain. the domain registry is typically controlled by the government of that country. below-cost or even free domain registrations. generic top-level domains (gTLDs) are governed directly under ICANN which means all terms and conditions are defined by ICANN with the cooperation of the gTLD registries. In the en.edu. As an example.wikipedia.wikipedia.org.example. Domains of third or higher level are also known as subdomains. advertising.other top-level domains. though this term technically applies to a domain of any level.edu could provide domains that are subdomains.edu and foo. due to a significant impact on online brand building. in the domain en. Official assignment ICANN (Internet Corporation for Assigned Names and Numbers) has overall responsibility for managing the DNS. Domain names which are theoretically leased can be considered in the same way as real estate. e.bar. " is the second-level domain. These usually require that domains are hosted on their site in a framework or portal. "en" is a third-level domain. It controls the root domain. search engine optimization.org example. etc. such as foo. the owner of example. For ccTLDs. since even a top-level domain is a "subdomain" of the "root" domain (a "zeroth-level" domain that is designated by a dot alone).example. revenue from which allows the provider to recoup the costs.g. ICANN has a consultation role in these domain registries but is in no position to regulate the terms and conditions of how a domain name is allocated or who allocates it in each of these country level domain registries. with advertising wrapped around the user's content. domain registrations were free. On the next level are third-level domains. These domains are immediately to the left of a second-level domain. Uses and abuses 93 . A few companies have offered low-cost. delegating control over each top-level domain to a domain name registry. On the other hand.

generally with only one name per machine. branches. they began to be used in manners that in many cases did not fit in their intended structure. such as their being generic words as well as trademarks in a particular context. As originally planned. rather than just the technical audience for which they were originally intended. A Web site found at http://www. the structure of domain names followed a strict hierarchy in which the top level domain indicated the type of organization (commercial. site operators frequently wished to have memorable addresses.org" into a Web browser. regardless of whether they fit properly in the structure. The popularity of domain names also led to uses which were regarded as abusive by established companies with trademark rights. in India. but these were sometimes themselves abused by overzealous companies committing reverse domain hijacking against domain users who had legitimate grounds to hold their names.As domain names became attractive to marketers. and in most cases can be reached by just entering "example. various laws and policies were enacted to allow abusive registrations to be forcibly transferred.com). even noncommercial sites would often get addresses under it. and subsidiaries of a parent organization would have addresses which were subdomains of the parent domain. for instance.com instead of news. Laws that specifically address domain name conflicts include the Anticybersquatting Consumer Protection Act in the United States and the Trademarks Act. in which somebody took a name that resembled a trademark in order to profit from traffic to that address. etc. and addresses would be nested down to third. fourth.example. 1999. which vary in how they interpret incomplete addresses).). this was known as cybersquatting. and sites of all sorts wished to have second-level domain registrations even if they were parts of a larger entity where a logical subdomain would have made sense (e. or their use in the context of fan or protest sites with free speech rights of their own. 94 . However. or further levels to express complex structures. Also.com.g. since the . once the World Wide Web became popular. In the case of a .abc. governmental. hostnames were intended to correspond to actual physical machines on the network. departments.com domain was the most popular and memorable.org will often be advertised without the "http://". To combat this. where. thus. the Web site can sometimes be reached by just entering "example" (depending on browser versions and configuration settings.. abcnews.

respectively. Certain domains.com. For generic or commonly used names. there has been tremendous growth in the number and size of literary festivals around the world in recent years.us and blo. respectively. especially those related to business. parties are generally free to select an unallocated domain name as their own on a first come.org is available to the first literary festival organisation which is able to obtain registration. Some critics would argue that there is greater amenity in reserving such domain names for the use of. this may sometimes lead to the use of a domain name which is inaccurate or misleading.gs. This problem can be seen with regard to the ownership or control of domain names for a generic product or service. for example. By way of illustration. Non-working examples that spell 'James' are j@m. Commercial resale of domain names An economic effect of the widespread usage of domain names has been the resale market for generic domain names that has sprung up in the last decade.es and j@mes. domain hacks. have been gaining popularity.icio. and other commercially lucrative fields of digital world trade have become very much in demand to corporations and entrepreneurs due to 95 .Generic domain names — problems arising out of unregulated name selection Within a particular top-level domain. many unconventional domain names. They make use of the top-level domain as an integral part of the Web site's title. In this context.es) and mes. Unconventional domain names are also used to create unconventional email addresses. Two popular domain hack Web sites are del.es (of Spain's . Unconventional domain names Due to the rarity of one-word dot-com domain names.com. even if the festival in question is very young or obscure. which use the domain names m. a regional or umbrella grouping of festivals. currently a generic domain name such as literary. which spell out "delicious" and "blogs". first served basis. gambling. pornography. Related issues may also arise in relation to non-commercial domain names.

There are disputes about the high values of domain names claimed and the actual prices of many sales. Large numbers of registered domain names lapse and are deleted each year. Annually tens of millions of dollars change hands due to the resale of domains. they attract clients seeking services and products who simply type in the generic name. granting them the same legal protections. was stolen from its rightful owner by means of a forged transfer instruction via fax.5 million. not sold.com which was resold in 1999 for $7. the domain was earning millions of dollars per month in advertising revenue from the large influx of visitors that arrived daily. lawsuits resulted.their intrinsic value in attracting clients. the court found in favor of the plaintiff. one against the thief and one against the domain registrar VeriSign[2]. generic domain names such as movies. During the height of the dot-com era. On average 25. In one of the cases. according to Guinness World Records. Another high value domain name. MIME Multipurpose Internet Mail Extensions (MIME) is an Internet Standard that extends the format of e-mail to support text in character sets 96 .000 domain names drop (are deleted) every day.com are extremely easy for potential customers to remember. Furthermore.com which was the name of their new operating system. sex. leading to an unprecedented ruling that classified domain names as property.com. it remains strong and is currently experiencing solid growth again.[3] One of the reasons for the value of domain names is that even without advertising or marketing. for $2 million and may even be worth less today Newsweek [1]. is business. Network Solutions. Kremen v. People who buy and sell domain names are known as domainers. Later the stock was valued at.com with internet entrepreneur Bob Kerstein for the name Windows2000. not in cash.5 million in stock options.S. Although the current domain market is nowhere as strong as it was during the dot-com heyday. Two long-running U. In 1999. The most expensive Internet domain name to date. Microsoft traded the valuable name Bob.com or Books. but this was $7. increasing the probability that they become repeat customers or regular clients.

What steps did you use for inserting a paragraph break in your document? 10. How might you set up a nested list? 20. What are the different tags used for different styles of text? 14. How can a graphic file display on different computers? 23. Where is the text of the title tag displayed? 5. The content types defined by MIME standards are also of importance outside of e-mail. *Extra Credit: How can these styles be useful in creating a web page or lesson? 16. multi-part message bodies. Internet e-mail is so closely associated with the SMTP and MIME standards that it is sometimes called SMTP/MIME e-mail. What are HTML tags? 4. What is the HTML tag for a paragraph break? 9.other than US-ASCII. What is the HTML tag for a unordered list? 18. How did you save the lava graphic for use in your WWW document? 97 . How did you display and view the changes in your web browser? 11. What steps did you use in adding a list to your HTML document? 21. How can you display your HTML document in a web browser? 8. non-text attachments. What are HTML style tags? 13. such as in communication protocols like HTTP for the World Wide Web. and header information in non-ASCII character sets. How are lists valuable in a web page? 17. What are some key points to consider when including graphics in web pages? 24. Why should you be concerned about differences in HTML standards? 3. What is HTML? 2. 1. Virtually all human-written Internet e-mail and a fairly large proportion of automated e-mail is transmitted via SMTP in MIME format. HTTP requires that data be transmitted in the context of e-mail-like messages. What steps are involved in creating a simple HTML document? 6. What is the tag for a ordered list? 19. How do you create a comment tag? 7. even though the data may not actually be e-mail. * Extra Credit: What is a horizontal rule <hr> tag? a <br> tag? 12. What are the two graphic formats used for the World Wide Web? 22. What steps did you use in entering styled text into your HTML document? 15.

Note how the text immediately follows the "Big M" above. • Specify the dimensions of inline image. you will be able to: Place an inline image within your HTML document. such as this picture of "Big M". The HTML format for the inline image tag is: <img src="filename. this means that a web browser will display the image in between text. simply insert a paragraph tag before the image tag: 98 . What if we want the "Big M" sitting on its very own line? To force the image to appear on a separate line. By "inline". Select how the pictures align with surrounding text.7a. Inline Graphics WWW Mathematics: Text + Pictures = Multimedia Multimedia + WWW = Global HyperMedia After this lesson... Modify the inline image tag to account for viewers using a non-graphic browser.gif"> where filename.gif is the name of a GIF file that resides in the same directory/folder as your HTML document. • • • Let's see how with HTML you can include pictures like the "Big M" in a web page. HTML Tags for Inline Graphics An "inline" image is one that appears within the text of a WWW page.

The align attribute. Arizona..<p> <img src="filename.gif"> is for Maricopa Community Colleges located in the 99 . Arizona.. Our license plates say that we are the Grand Canyon State. added inside the <img> tag.gif"> is for Maricopa Community Colleges located in the Valley of the Sun.> tag. metropolitan Phoenix. can produce the following effects: align=top <img align=top src="filename. align=middle <img align=middle src="filename.gif"> Alignment of Text and Inline Graphics With an attribute to the <img. metropolitan Phoenix.... you can also control how text adjacent to the image aligns with the picture.. align=bottom (default) <img align=bottom src="filename.gif"> is for Maricopa Community Colleges located in the Valley of the Sun. Our license plates say that we are the Grand Canyon State.

gif"> 100 . they will not be able to view any inline images. In this Lesson.. In this exercise. Above the <h1>Volcano Web</h1> heading.. Under these conditions.. 1.> tag allows for substitution of a descriptive string of text to hold the place of the image.> tag.. Re-open your workspace (if not already open). in our lesson we could add "A Lesson on:" by modifying the <img> to read: <img alt="A Lesson on:" src="lava. An attribute for the <img . you will add an introductory picture of a volcano to your lesson..h2. 4. You could modify the <img> tag so that rather than using the place holder.h3. In placing the image..html document with the text editor. metropolitan Phoenix. at the very top of your page.Valley of the Sun. a viewer with a text browser will see a place holder so that the top of our lesson page looks like: [IMAGE] Volcano Web In this lesson you will use the Internet to research information on volcanoes and then write a report on your results." attribute If your web pages will be viewed by users using a text-only browser (such as lynx).. it displays a text string. 2.. This is because the following text was a header.. the lava picture that 5.. users will turn off the loading of inline images to save time on downloading over slow network connections. Arizona. Our license plates say that we are the Grand Canyon State. Open your volc.gif"> This HTML format will insert. Or sometimes. Save and reload in your web browser. enter the following: <img src="lava. A web browser always inserts a paragraph break before and after an <h1. ----------------------------------------------------------------- This lets the viewer know that there is a graphic inserted at the top of this page. The alt=". For example. 3. you may have wondered why we did not need to put a <p> tag after the image.

Often we are asked if you can alter the size of the image by inserting numbers other than the actual dimensions of the image.you may be able to drag and drop the icon for the image into your browser window -.html file to read: <img alt="A Lesson on:" src="lava. Sometimes this can be a useful effect on images with large areas of 101 .. If you insert larger numbers (to make the image bigger) the result will be a "blocky" picture. the loading of your page can be faster if you specify these numbers in your HTML. You can usually use some sort of graphics program or utility to determine these numbers. it would now appear: A Lesson On Volcano Web In this lesson you will use the Internet to research information on volcanoes and then write a report on your results... For our example in this lesson.The alt=". The answers is yes but the results may be undesirable. Why? Normally. make this same edit to your HTML file for the <img> tag that displays the picture of the volcano. the lava. So you should edit your volc.gif" width=X height=Y > where X is the width of the image and Y is the height of the image in pixels. your web browser has to determine these dimensions as it reads in the image. The format for including this option is: <img src="filename.and the height and width will be displayed in the title bar of the browser.." attribute replaces the place holder with a text string so that from a textonly browser (or when loading of images is shut off). ---------------------------------------------------------------In this Lesson...gif" width=300 height=259> NOTE: the order of the attributes inside the <img> tag does not matter. At this time.> tags are two attributes that give the dimensions of the image in pixels. Height and Width attributes Another option you may want to include in your <img.gif image is 300 pixels wide and 259 pixels high. Another way to find the dimensions of an image is to load it into your web browser -.

solid color. Take a look at our example of Going from Small to Big. If you use lower numbers (to make the image smaller) the result may be a distorted picture. Also, the full size image still has to be downloaded, so there is no real savings in terms of time to download the image. Any re-sizing of the image requires extra "work" by the web browser to recalculate the page layout. You could experiment and see for yourself. We just might be wrong! You can also specify the size of an inline image in dimensions that are percentages of the current browser window size, so that the image will resize itself if the viewer expands or reduces the size of their browser window. Take a look at our example of Percentage Scaling. Caveat Emptor! This may not work on all web browsers!

Independent Practice
Add an inline image to your web page using a GIF picture file that is stored on your computer or one that you have downloaded from the Internet.

Review Topics
1. What is the HTML format for an inline image? 2. What type of tag must you put before an image tag to make the image appear on a separate line? 3. How did you add the lava picture to your document? 4. What does the alt="...." attribute do? What does the height="...." attribute do?

102

8. Linking it with Anchors
Relax... this lesson is quick and easy! In fact, it is just information for you to read...

What is a URL?
The real power of the web is the ability to create hypertext links to related information. That other information may be other web pages, graphics, sounds, digital movies, animations, software programs, contents of a file server, a log-in session to a remote computer, a software archive, or an "ftp" site. The World Wide Web uses an addressing scheme known as URLs, or Uniform Resource Locators (sometimes also called "Universal Resource Locator"), to indicate the location of such items. These hypertext links, the ones usually underlined in blue, are known as anchors (This should not be news to you as you followed several to get this far!). In the next lessons we will: Review the concept of URLs. Find and copy URLs from your web browser to your HTML text document. • Write an HTML anchor to link to another document in the same directory as our first document. • Write an HTML anchor to link to another document in a different directory as our first document. • Write an HTML anchor to link to another web document on the Internet. • Write an HTML anchor that links to another section of the same document. • Incorporate a graphic that acts as a "hyperlink" to another document.
• •

After all, without the hypertext, we would be only calling this "Writing TML" and not Writing HTML

103

8a. Linking to Local Files
Can my document talk to my document? Well, they can at least be linked! After this lesson, you will be able to: Create a link to an HTML document in the same directory/folder as your main document. • Create a link to display a graphic image. • Create a link to a file in a different directory/folder than your main document. • Reorganize the structure of your web.

Now, you will take your first step of "anchoring" by creating a hypertext link to a second web page. These links are called "local" because they reside on the same computer as the working document (they do not have to venture out on the Internet). You will also be shuffling around the parts of your growing web site (do you see how this becomes more than just a "home page"?).

Link to Local Files
The simplest anchor link is one that opens another HTML file in the same directory as the presently displayed web page. The HTML format for doing this is: <a href="filename.html">text that responds to link</a> Think of it as "a" for anchor link and "href" for "hypertext reference". The filename must be another HTML file. Whatever text occurs after the first > and before the closing </a> symbols will be the "hypertext" that appears underlined and "hyper." Now follow these steps to build an anchor link in your HTML document to a local file: 1. Open your HTML document, volc.html, in the text editor. 2. First, under the Volcanic Places in the USA heading, enter the following text which introduces the two volcanoes discussed in later sections. 3. 4. Listed below are two places in the United States that are considered "active" volcanic areas.

104

1980. the link to the image file has succeeded. you can also create a link to display a graphic file. after a long period of rest. The text "detailed observations" will link the viewer to a second HTML document called msh. </head> 18. 12. Regardless of the action. it should connect you to the new page about Mount St. 10. NOTE: Most web browsers will display such a link to an image file directly in your web browser. This second HTML file does not yet exist. Enter the following text in the new window: 13. Test the hypertext link for the words "detailed observations". if you get that far. <head> 16. <html> 15. detailed observations</a> on the mechanics of highly explosive eruptions. </html> 24. Helens" heading. Reload volc. you may be promoted to either save the file or to select an application to display the file. open a window for a New document. were toppled over like toothpicks. Anchor Link to a Graphic we learned how to display an "inline" graphic that would appear in your web page. When the anchor link is selected. Save and close your HTML document 11. With the anchor tag. with your text editor. 105 . enter: 7. Now. it will download the image file and display the image by itself in your web browser. <h1>Mount St Helens</h1> 20. Save this file as msh. <body> 19. 14.html"> 9. 26. When selected. mountain in Washington provided <a href="msh.html).5.html in the same directory/folder as your working HTML file (volc. Helens. and the preferences/settings on your computer. this quiet 8. 25.html in your web browser. 6.html. 22. Below the "Mount St. </body> 23. On May 18. we will construct it in steps (5) and (6). Depending on the web browser. <title>Mount St Helens</title> 17. The towering pine trees of this once-quiet mountain 21.

Download a copy of a GIF image from the Lesson 8a Image Studio. The format for creating a hypertext link to a graphic is the same as above for linking to another HTML document: <a href="filename. create a sub-directory/folder called pictures in the same location where your volc.gif file to this new sub-directory/folder. 6. we may wish to keep all of the graphics in a separate directory/folder called pictures. Modify the text to include a link to the image of Mount St.html file in the text editor. Now follow these steps to add a link to a graphic file in your HTML document: 1. 6. Helens. 2. 5. Links to other directories The anchor tags can also link to an HTML document or graphic file in another directory/folder in relation to the document that contains the anchor. 106 . Open the msh. 7.gif">toppled over like toothpicks</a>.html file is stored. 2. The towering pine trees of this once-quiet mountain 7.html file and Reload in your web browser Now click on the link you just created in step (3). For example. in our lesson.The simplest anchor link is to a file in the same directory/folder as the document that calls it. Move the msh. Edit the anchor tag for the graphic to read: 5. Let's do that now: 1. 4.gif">text that responds to link</a> where filename.gif">toppled over like toothpicks</a>. The towering pine trees of this once-quiet mountain were <a href="msh. were <a href="pictures/msh. keeping the image files in its own area will make things a bit more organized for you. 3. 4.gif is the name of a GIF image file. Open the msh. A picture of blown down trees should be displayed. As you create more and more HTML files. Save the msh. 3. 8. From your computer system.html file in your text editor.

/home.html">return to home</a> Each instance of ". Note that you can also construct a link that connects to a higher level directory as well by using this HTML: <a href=". and move them to another computer -. meaning a web browser can construct the full URL based upon the current location of the HTML page and the link information in the <a href=./... test them.html.html pictures msh. a sub-directory or folder within the directory/folder that contains the working HTML file) by using the "/" character to indicate the change to a sub-directory called "pictures.all the relative links will stay intact. In this lesson we saw how to construct a hyperlink to a document that is stored in a directory lower than the working HTML page.NOTE: With HTML you can direct your web browser to open any document/graphic at a directory level lower (i.e." work area volc./" the URL of an anchor link tells the web browser to go to a higher level directory/folder relative to the current page. let's say that our pictures sub directory was not in the same directory/folder as the volc. If all went well. This is very powerful because you can build all your web pages on one computer..> tags. the link in the sentence describing the blown-down trees should now call up the graphic file stored in the pictures sub-directory/folder. Anchor Links to a Higher Level Directory The types of links we have constructed here are known as "relative" links. 107 ..gif 8. Save the HTML document and Reload in your web browser. In our example..html file but was actually one level higher. in this case to go up two directory/folder levels and look for a file called home.

one that holds your HTML files (volcano) and another one that holds the graphics (pictures): work area pictures lava.gif"> Now.html file. we want to reorganize our web structure so that the pictures folder/directory is at a higher level.gif"> so the web browser looks for a folder called "pictures" that is stored one level up from our volc. Read this carefully! It may be feeling like it's getting complicated. Now.gif volcano 108 . move the two HTML files volc. This requires that you are familiar with moving files and directories around on your computer.html file to the msh. create a new folder/directory and name it volcano (it is recommended to keep the file names in all lower case).gif file that we added in lesson 7a into the pictures folder. So now it is time to do a little re-organizing of our HTML files.html and msh.In the previous section we constructed a link from the volc.gif file inside) so that it is in the same level as the new volcano folder/directory. Move the pictures folder/directory (along with the msh. 2. The link is now written: <img src=". So your entire workarea directory should now contain two subdirectories -. Also.. First. 4. move the lava.html into this new folder/directory.gif file in a subdirectory: <img src="pictures/msh. An advantage of this structure is that it would be easier to store a large number of graphics in this upper folder/directory that can be shared in other web pages. We may do another lesson on landforms that makes use of the pictures stored in this folder/directory.gif msh. 3. but it will all be clear soon! 1./pictures/msh.

The towering pine trees of this once-quiet mountain 14. mountain in Washington provided <a href="msh.html msh.. But now let's look at the link to the picture of Mt. St Helens that we created in the msh. observations</a> on the mechanics of highly explosive 11.html file is still in the same relative directory as volc.html 5.gif 15. Open this file in your text editor and edit the link to read: The towering pine trees of this once-quiet mountain were <a href=". First.. after a long period of rest. were <a href="pictures/msh.volc. NOTE: Since the msh. 1980. You will have to update the <img. we do not have to change any of this HTML! Can you see how relative file linking is one of the powerful features of HTML? 12. Open the volc.html.html file: 6. this quiet 9.html file: 13./pictures/lava.html">detailed 10.gif">toppled over like toothpicks</a>..gif" width=300 height=259> 109 . look at the first local link we built in the volc.> tag that displays the title graphic.. <h3>Mount St Helens</h3> 8. This relative link tells the web browser to go up one level from the current folder/directory (volcano) and look there for another folder/directory called pictures that contains a GIF image called msh. We've moved some things around so now we will have to update the anchor links in our HTML files. 7.gif">toppled over like toothpicks</a>. On May 18.html file in your text editor and modify the line just below the <body> tag to read: <img alt="A Lesson on:" src=". eruptions./pictures/msh.

You should then Open the volc. The last thing you should do in this lesson is to change the name of your working file from volc. eh? Now here is the promised explanation -.. Why are we doing this? Let's say you have finished this lesson and are ready to store it on a World Wide Web server for the world to see. And let's assume that the Internet address for this server at Big University is: http://www.bigu.edu/ And your file will be stored in a series of directories: --= top level of server: www.html.edu/courses/science/geology/volcano/vol c.bigu. You should do this using the normal way of editing a file's name from the computer desktop (on the Macintosh click on the file name.html Pretty long. you will not see the ".html.html so that the URL for the Volcano Web might be: http://www. so in that case.on most WWW servers you can designate one standard name that is the "default" web page for that directory and on most systems that name is.html to index. the computer knows that there is a ". Note also for Windows users that if you use a special editor program to create HTML files. but we will explain it shortly. One More Small Change This last small step may not be obvious.edu/courses/science/geology/volcano/ is equivalent to 110 . What this means is that the Internet address: http://www.html and then try the link to the picture of Mount St Helens.bigu.html" at the end.edu /courses /science /geology /volc.html file in your web browser and test the link to msh. you would change the file name from volc to index because under the hood.16..bigu. index.html" extension on the desktop file name. Save your file. on Windows right-mouse click on the icon and select the option for Rename)..

l

http://www.bigu.edu/courses/science/geology/volcano/index.htm

This might make you think that it is a lot of energy to cut 20 letters out of a URL! But it does tend to make your URL look a bit more professional -- If you were creating the Longhorn Cheese Home page, http://www.cheese.com/longhorn/ looks less redundant in print than http://www.cheese.com/longhorn/longhorn.html which comes into play when people read about your URL and are trying to connect by typing it into their web browser. Note also that this special file name index.html is used on most web servers but it might also be default.htm-- check with the people that run your web server.

Independent Practice
Create a second HTML document that uses the HTML formatting that you are familiar with at this point. Return to the first one you created and make an anchor that links to this new one.

Review Topics
1. What were the steps you used in creating a link within your document to a local file? 2. What steps did you use to create a link which displayed a graphic in an external window? 3. How did you create a link to a file in a lower directory/folder than your main document? a higher directory? 4. What is the significance of a file called index.html on a WWW server?

111

8b. URLs: Pointers to the Internet
URL? Earl? Yurl? hurl? gyrl? It's getting time to link to that Big Wide Web using the web's addressing scheme. After this lesson you will be able to:
• • •

Identify the function of Uniform Resource Locators (URLs). Recognize the structure of a URL. Examine the URLs in the hypertext links of any web page.

Note: For this lesson, you will not need your HTML text file. This is another loweffort lesson!

What is a URL?
The Uniform Resource Locator (URL) is what the WWW uses to find the location of files and documents from computers on the Internet. On your web browser screen, the URL for this document is typically displayed in the upper part of the Web browser window. The URL includes:
• • •

an identifier for the type of Internet server; an Internet address; and a file path to the particular item of interest.

The URL is what you will need to build a link from the web page that you are creating to connect to some other piece of information available on the Internet. For more information, see Curling Up To URLs (v0.2)

How are URLs Structured?
The structure of a URL is: type://in.ter.net.address/directory/subdirectory/.../filename The "type" indicates the type of Internet server being accessed: http a web server, "HttP" stands for HyperText Transfer Protocol gopher an Internet Gopher site or menu driven directories of files and information ftp an anonymous File Transfer Protocol (FTP) site, archives of files. 112

telnet initiates a Telnet session to log on remotely to another computer When selected, your web browser will launch a Telnet external program and connect to the specified site. WAIS Wide Area Indexed Server -- a site to search a collection of subject oriented documents by keywords file A file on your local computer system (hard drive, floppy, local file server) The type is always followed by "://" and the Internet address of a remote computer. This is in the structure of: host.domain.domain.domain For example: machine.department.college.edu 123.45.6.78 office.company.com agency.branch.gov machine.organization.country If the URL is to the main level of this host (its "home page"), then the URL is terminated with a slash "/". If you are linking to a sub-directory or a file, you must also add the exact path to that item using the slash character to indicate the entire file path. Note: For most web servers spelling does count! So does capitalization! File names on UNIX computers are case sensitive, meaning that a file named
SpiffyText.html

is a different file than

spiffytext.html

Experimenting With URLs
Note that URLs can link to any site, directory, subdirectory, text file, image, digital movie, or sound file on any Internet site that is set up for public access. The best way to see different URLs is just to move your mouse over any hypertext link in any web page -- if you look at the bottom of your web browser, it should display the URL that you would connect to if you clicked on that link. You could go to a big site such as Yahoo and "peek" at URLs (did you see the URL for Yahoo when you moved your mouse over the link in the this sentence?) Here is an easy way to copy a URL for a link in any page. You first must access the "secret" pop-up menu from any hypertext link in a web page -- click and hold the 113

The full HTML format for an anchor link to an item on the Internet is: <a href="URL">Text to Activate Link</a> where URL is the full Uniform Resource Locator. What purpose do URLs serve for the World Wide Web? Where are URLs found on a WWW screen? What is the basic structure of an URL? How can you see the URLs that a hypertext link will jump to? Independent Practice Find some sites on the Internet that intrigue you. select Copy This Link Location (or similar menu item). See if you can copy and paste the URLs into a text document. 2. You will use this list later to add links from your own web pages to these sites that you found. The string Text to Activate Link is what will show up as hypertext in your web browser (usually but not always) underlined and in blue. in quotes. Remember that a URL can be a link to another 114 . the web browser will link them to the Internet site indicated by the URL. 3. 8c. HTML for Anchors to the Internet Linking to a site on the Internet combines what we have worked on earlier in the lessons on Links to Local Files by incorporating what we have learned about URLs. Links to the World: Internet Sites You've been revving your engines. the address for the Internet site where you want to send the viewer. jump to any text document and select Paste from the Edit menu. Quickly copy the URL for a site and use it in your HTML document. 4.mouse for Macintosh. right? Here. From this menu. Voilà! You've just nabbed a URL from a link in the web page (this way. you can copy a URL without even visiting the page it links to!) Review Topics 1. When a viewer clicks on this hypertext. and itching to hit the Information SuperHighway. After this lesson you will be able to: • • Create an anchor to link to an Internet site. we will extend our use of anchor tags to create links to resources out there on the Internet. record its name and its URL displayed near the top of your browser window. For each one. click the right mouse button for Windows and Unix. After releasing the mouse button.

6.World Wide Web (WWW) server. Olympus Mons</a> Note: We've made a link to two different types of information. or any text. Follow these directions to add anchor links on your HTML document: 1.html You can use your mouse to select and copy a URL from the web browser display and then paste it in the anchor tag of your HTML document.com/browse/mgs/mgsmons1. A Quick 'n Easy Way to Enter URLs in Anchor Tags As you navigate among different web pages. graphic. Volcanic Places on Mars. enter the following text: <a href="http://solarviews. Save and Reload in your web browser. 8.com/eng/mars. Gopher server. The first hyperlink connects to a web page that describes information about the planet Mars. but you can find it's remnants from the Internet Archive's WayBack Machine). see a Plea from the Widows Web (Note.solarviews.mcli.maricopa. this web site has vanished. Below the heading.dist. For more information on this issue.htm"> Mars</a> has its fair share of volcanic landforms. 3. Note: We have shown you how to link directly to an image from another web server. as of April 2002. the URL looks something like: http://www.including the largest known volcano in the solar system. 2.jpg"> 7. web site owners are penalized or charged for excessive accesses. we will add a hypertext link to a site that has information about volcanoes on the planet Mars. We strongly urge you to contact the site's creator and ask permission. 5. video file on these servers. Open your index.html file in the text editor. Now. sound. This is much more efficient than writing URLs down on paper (some are quite long!). in this document.edu/tut/tut8c. For example. FTP site. In some cases.<a href="http://www. The second is a link to a large JPEG image of a Martian volcano. 115 . 4. the URL of the currently visible page can be viewed at the top of the web browser window (You may have to look for a menu option to Display URLs). You could quite easily use an off-site URL in your IMG tags for your own web pages.

116 . What steps did you take for creating an anchor link to the NASA Internet Site? 3.html in the text editor Under the heading "References". 12. 3. Tell a colleague or friend about any other links that you put in your document. The final anchor tag should look like: 16.gov/education/index. 10. Open your HTML document index. explore some of the following Internet sites with resources on Geology and/or Volcanoes. 17.Now we will add some links to other sites that we will list under the References section of our Volcano lesson. 7. Copy the URL. Click the mouse once between the two quote marks you inserted in step #2 and Paste the text you copied in step #5. Copy the URLs and construct the hypertext links to at least two more sites in your References section: Review Topics 1. enter: Use these references to start your research: <ul> <li> <a href="">Educational Resources from the USGS</a> </ul> NOTE: We've constructed the hypertext link but we still need to enter a URL between the quotes. What is the address for an item on the Internet? 2.er. return to your HTML document index. Connect to the US Geological Survey Education Index. 6. 4. From the Edit menu. 11. use the mouse to Select the URL as displayed in the URL display field. 14. 8. 5.html 15.usgs. 13. Now. 2.htm l"> 18. <ahref="http://info. Educational Resources from the USGS</a> Note: You have just set up the HTML structure for an Unordered For additional practice. 9. Follow these steps: 1. One such site that might offer relevant information is the US Geological Survey. What shortcut was identified for putting an URL into an anchor link? 4. From the web page.

Once you click on a link to this named anchor. your web browser will jump so this line is at the top of the screen. What if you wanted to connect to a specific section within a document? YOU CAN! After this lesson you will be able to: • Create a hidden reference marker for a particular section within an HTML file. that we learned about. Then. Links to Sections of a Page You have seen how to link to other web pages.. This might be used to link to a different section of the same page if it is long. • Build a hypertext link that will connect to a particular section within another HTML file. The HTML format for creating the named anchor is: <a name="NAME">Text to Link To</a> or for the link you just tried above: <a name="check">Check Your Work</a> Notice how this subtly differs from the anchor link <a href=. Writing a Link to a Named Anchor 117 . on this page you are viewing. I write an anchor link that connects to this section of this document. 8d. • Create a hypertext table of contents for a web page. I could create a hidden marker called "check" that marked the heading below "Check Your Work". • The Named Anchor A named anchor is a hidden reference marker for a particular section of your HTML file.. For example. whether they are ones you created or have found elsewhere on the Internet.Independent Practice Create anchor links from your own web page that connect to some of the URLs addresses you have discovered. or to a marked section of another page. Build a hypertext link that will connect to a particular section within an HTML file.

the named anchor "intro". Open your index. see lesson 8a) to a named anchor. <h2><A NAME="usa">Volcanic Places in the USA</a></h2> 118 . The entries for this will be the headings we have already created. 2. Each will act as a hypertext link to a particular section of our lesson. 3. The first step is to create a named anchor for each of the heading sections in your Volcano Web lesson: 1. When you select or click on the hypertext.When you want to create a hypertext link (or an "anchor link".html file in the text editor Find the heading for the Introduction. 5. <h2><A NAME="term">Volcano Terminology</a></h2> 6. it brings the part of the document that contains the named anchor to the top of the screen. 7. we will build a table of contents for our lesson that will appear at the top of our Volcano Web page. In a similar manner. use the following HTML: <a href="#xxxxx">Text to act as hypertext</a> or for the link you just tried that sent you to the section below: Go to <a href="#check">Check Your Work</a> The "#" symbol instructs your web browser to look through the HTML document for a named anchor called "xxxxxx" or in our example "check". Adding Named Anchors to the Volcano Web Lesson Now. Change it from: <h2>Introduction</h2> so that it looks like: <h2><a name="intro">Introduction</a></h2> NOTE: You have just marked the line that contains the header "Introduction" with a hidden reference marker. change all header <h2> tags for the other sections: 4.

<b>In this Lesson. 13. The named anchor tags we have just added are hidden from the user's view. we will use a variation of the basic anchor link. <h2><A NAME="project">Research Project</a></h2> 12. Rather then linking to another file. <li>Volcano Terminology 9.. The Italic style is used on the entries for the text. 4. <hr> 5.. Below we will add the HTML to make the links active. <ul><i> 7. you will not notice any visible change. <li>Introduction 8. Save and Reload into in your web browser. 2.html file in the text editor. 11. We will use an unordered list to create this list: 1. To do this. we link to one of the named anchors (the hidden markers that you created above) within the same HTML file. <li>Volcanic Places in the USA 10. Finally. If not already open. </ul> NOTE: This index is marked off above and below by a solid line using the <hr> tag. <li>Research Project</i> 12. If you Reload now from your web browser. Below the first sentence under the Volcano Web heading enter the following text: 3.</b> 6. <li>Volcanic Places on Mars 11. At this point we have only entered the text of the index entries. open your index. We indicate a named anchor by preceding the reference marker name with a "#" symbol: 119 . <h2><A NAME="mars">Volcanic Places on Mars</a></h2> 10. Adding Links to a Named Anchor in the Same Document Now we will set up a table of contents that will appear at the top of the screen. 9. we want to make each item of the list act as a hypertext link to another section of the document.8.

NOTE:Your web browser will try its best to bring to the top of the browser the text enclosed by the <a name="xxx">. Adding Links to a Named Anchor in Another Document You can create a link that jumps to a section of another HTML document that is marked by a named anchor. 7.1.html#NAME">Text to activate link</a> and if the document exists on another web site: 120 . You should now be able to fill in the other links to named anchors so that the section looks like: 6.</a> occurs. <li><a href="#mars">Volcanic Places on Mars</a> 14. When you click on an item in your index.. If you really wish to make this happen. Change it from: <li>Introduction to look like: <li><a href="#intro">Introduction</a> 5. 4. </ul> 16. <b>In this Lesson. there is no content after the last few examples. 3. you can insert 10-20 of <br> tags. <ul><i> 10. 2. In this case. <li><a href="#intro">Introduction</a> 11.. <li><a href="#term">Volcano Terminology</a> 12. <hr> 8. <li><a href="#project">Research Project</a></i> 15. <li><a href="#usa">Volcanic Places in the USA</a> 13. until we write more content under this heading in youre document.</b> 9.. the browser should display the associated section at the top of your screen. The HTML for building a link to a named anchor in another local HTML document is: <a href="file..html file in the text editor Go to the first list item in your index section. Open your index. Save and Reload into your web browser. so when you click on the link to Research Project it will not jump to the very top of the screen.

a separate HTML file. 6.html page. Open your msh. How do you create a table of contents for a web page? 121 . the syntax would be: <ahref="http://www..html#colby">Colby Cheese</a> In lesson 8a we created a hypertext link that jumped from the section of our lesson on Mount St.mcli.maricopa.<a href="http://www.org/pub/recipe.dist. Review Topics 1.. Near the bottom of the HTML (but above the </body> tag) enter the following text: 3.html file in the text editor 2. However. When you click on one of the hypertext links at the bottom of the msh.html#intro">Introduction to Volcano Web</a> The reference marker "#anchor_name" is tacked onto the end of the URL. <a href="index. 1. Now we will add a link in that second document that will return to the original section of the main Volcano page. In this case the link is just the name of another HTML file. in the same directory as the index.html. How do you modify an anchor link to connect to a named anchor in another HTML document? 4. 4. <hr> 5. msh. you should jump back to the "Volcanic Places in the USA" section of the Volcano Web lesson. How do you identify a named anchor? 2.</i> within the text marked by the named anchor "usa".edu/tut/final/inde x.cheese.html. Helens to msh. you can use a full URL to link to a named anchor in an HTML file on a remote computer. Save and Reload into your web browser. For example.html#usa">Return to <i>Volcano Web</i></a> NOTE: We have included the Italic Style tag <i>.html file. What are the steps for creating a link to a different section within a document? 3. to create a link to the "Introduction" section of an HTML file stored on the MCLI WWW server.

html. we want to add a button that when clicked will link a reader back to the main lesson page. What is the difference in function between the tags <a href=".. msh. 8e. If you recall.> and <a name=". Helens. that described Mount St. in an earlier lesson we linked some text in our Volcano Web page. • A HyperLink Button From the previous lessons. expand the versatility of your web pages by having pictures act as hyperlinks (Just try clicking the cube!). After this lesson you will be able to: Insert a graphic button in your web page that links to another HTML document. 122 . to a second page...5..html.> ? Independent Practice Create named anchors for the headings in your own web page and build an index that will link to these sub-sections. index. Now in the latter page. You can also use inline images to act in a "hyper" manner. HyperGraphics Text does not have a monopoly on being "hyper". text within your documents that connects a viewer to related information... • Insert a small graphic that acts as a "postage stamp" button for a link to display a larger copy of the image. you have (hopefully) become comfortable with creating hypertext.

gif"> 6. 8..>) is completely within the anchor between the > that marks the end of the URL and the </a> that marks the end of the hypertext. a "HyperGraphic" generally is surrounded by a colored box matching the color of hypertext on your web page. And finally. <a href="index. At the bottom. msh. modify the last line to: 3. Return to your web browser.html"> <img src="graphic. You should now have a copy of the image file somewhere on your computer (You should move it to the pictures folder/directory in your workarea). 4. Select Reload from the File menu to update the changes. Open the second HTML file.gif"> Go to Document X</a> In your web page.. 9. you can identify a hyperlink area on a web page by looking for a change in the cursor as it passes over a "hot" region.html#usa"> <img src=". Also note how the <i> tag is used within the active hypertext to emphasize the title of the lesson. NOTE: Many browsers now can alter the color of hypertext and some pages have suppressed the display of the outline around HyperGraphic links.> tag in case the viewer has turned off the loading of images. Return to <i>Volcano Web</i></a> Note: The inlineimage tag (<img. Next.. we have used the <hr> tag to put a horizontal rule or a line above the button graphic. add the HTML to make the button work: 1. 123 . 7.. From a design standpoint. 2.html. The image alone could be a hyperlink. so you know that it is "active". The cursor usually changes from an arrow to a hand when it passes over an active link. we recommend that if you use pictures to act as hyperlinks that you offer also a text link or use the ALT= attribute in the <IMG. this HTML code will display an inline image and the text Go to Document X.The way to do this is to put the HTML tags for inline images within the hypertext portion of the anchor tag: <a href="fileX. Save the HTML file.html in your text editor. clicking on either the text or the picture will tell your web browser to go to the HTML file fileX. Both will act as hyperlinks. and select Open Local from the File menu to read in the msh.. In the World Wide Web. <hr> 5. Generally./pictures/left.html file.

. with subsurface volcanic forces and may help to predict 6. In our hypertext link we provide information that this image is 55k in size.[full size image. your web browser will display the larger image in a browser page. </a> The inline image./pictures/seismo. 55k] --". First. WIDTH="62" HEIGHT="85"> 12. <a href=".[full size image.> tag as well as the ALT=. <img src=".10.gif acts as a hyperlink to a larger image. Tableland" formed by a major eruption 600.gif image in the <img. One way around this is to create miniature-size copies of the graphic. Then. or "postage stamps" which are displayed as inline graphics.jpg. Test the hyperlink to the Mount St. 8. Open the index. When a user clicks on either the "postage stamp" or the text "-. you need to get a copy of the two image files from the (These files should be stored in your pictures folder/directory of your workarea). This field seismometer measures earthquakes associated 5. Helens page and the new button that should return you to the Volcano Web page. we advised against using large inline images in your web pages because viewers might have to wait a long time for images to download to their computer.gif" ALT="link to large image" 11. By doing this. It sits on a plateau known as the "Volcanic 7. Note the use of the dimensions of the stamp.jpg"> 10. -.html file in your text editor.. seismo. <p> 9.000 years ago. the large images are downloaded only if the viewer decides to see it. future events. create the postage stamp link in your main text file: 1. using the same steps as above. 55k] -13. "Postage Stamp" Images Previously. attribute.. Next.. In this way. stamp./pictures/stamp. 4. 2.. you can make the "postage stamp" image act as a hyperlink that links to the full size image. you provide the viewer the choice if they want to download 124 . Under the heading Long Valley enter the following: 3..

14.

an image of that size... If the link leads to something that is 1.6 Mb, as a viewer you might want to know that before you tried to view such a large file size. Save and Reload in your web browser.

Review
Review topics for this lesson: 1. How did you create the graphic button in your web page? 2. How are "postage stamp" links useful in including graphics in your web page? 3. How did you create your "postage stamp" link in your document?

Independent Practice
Try to add buttons that link two web pages to each other. In a later lesson we will learn how to avoide the "box" around a hypergraphic.

9. Preformatted Text
How do you display text where return

space, characters

TABS count?

and

carriage

After this lesson you will be able to: Create a table of aligned text Control the placement of text on a page when tabs and spaces are important.
• •

In previous lessons we have seen that a web browser will ignore extraneous space characters, tabs, and carriage returns in your HTML files. However, there are some instances where it will be important to maintain these aspects of page layout. In this lesson, the example will be where we want to insert a table of text with aligned columns. The preformat tag instructs your web browser to display the text exactly as typed in the HTML document, including spaces, tabs, and carriage returns. A browser typically displays such text as a

125

m o n o s p a c e d type, meaning a font in which every character has the same width. Here is example of what the preformat does:

<pre> We have indented with 5 space characters. And used the carriage return to jump to a new line. Here use spaces create text </pre> Without the <pre> and </pre> tags, the same HTML produce: we to a table.

We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table. With the preformat tag, it helps if the text editor you are using can display in a monospaced font (such as "Courier" or "Monaco"); if not, you will have to count spaces when aligning text into columns (and you will mutter bad words under your breath). For our Volcano lesson, we want to add a table under the Introduction section that lists several well-known volcanoes, when they erupted, and the volume of erupted material. To do this: 1. Open the second HTML file, index.html in your text editor. 2. Under the last portion of the Introduction section, place a header of level 4 (<h4>) with the text Volumes of Some Well-Known Volcanic Eruptions (If you do not remember how to make headers). 3. Below this heading, enter the following text exactly as follows (this would by an opportune time to cut and paste from this web page!):
4.

5.

<pre>

126

6. Eruption Date Volume in km^3 7. -----------------------8. Paricutin, Mexico 1943 1.3 9. Mt. Vesuvius, Italy 79 A.D. 3 10. Mount St. Helen, Washington 1980 4 11. Krakatoa, Indonesia 1883 18 12. Long Valley, California pre-historic 500 - 600 13. Yellowstone, Wyoming pre-historic 2400 14. </pre>

In this example we use space characters to make the first column left justified and the other 2 columns center-justified. The dashes are used to highlight the column headings. 15. Save and Reload in your web browser.

Review
Review topics for this lesson: 1. How does the preformat tag change the way that a web browser interprets HTML? 2. In what other situations might you use this tag?

More Information
You can still use HTML tags inside text that is marked by the preformat tag. For example we can add a hypertext link and some style tags that are within the <pre>...</pre> tags: HTML <pre> This tutorial is copyright 1995, 1996 <b>Be sure to tell all of your friends about it!</b> <i>We Welcome Your 127 Result This tutorial is copyright 1995, 1996 Be sure to tell all of your

mcli Note that the HTML tags do not count as spaces.. Independent Practice Add a table or chart to your HTML document using the preformat tag.mcli. then your web browser does not support the ISO character set. >>>Æ ñ Þóßÿ ? NOTE: If the above characters do not display various accents or diacritical markers.maricopa.Feedback</i> fondly..</pre> tags with carriage returns in between to add white space between text or graphics in their web pages -. Some web page developers will use the <pre>.dist. </pre> . Special Characters How do you say. Cheese was long since <pre> abolished from the Orient.especially if they wish more white space than provided by the <p> tag. You would likely want to skip this lesson.. 128 .. .until Sir Longhorn arrived with the great Cheese Crusade of 1167. they are ignored within the preformat region.. For example: HTML Result Cheese was long since abolished from the Orient.until Sir Longhorn arrived with the great Cheese Crusade of 1167.edu/"> mcli</a> </pre> friends about it! We Welcome Your Feedback fondly.. 10.. <a href= "http://www..

For example. • Accent Marks Sometime you may need to use a special character in an HTML document. (1904) 129 .: nu&eacute. 5. The ones that are known as ISO These special characters are marked in HTML as: &xxxx. Open the HTML file. we want to add an explanation of a technical term that was used to describe a particular type of volcanic flow. Now we will add a sentence to our HTML document that uses an accented letter: 1. To create the special character for the German umlaut (ü). so that the word appears as nuée ardente. an accent or diacritical mark. but to use the proper spelling we need an "acute" accent. Under the list of terms of the Volcanology Terminology section enter the The term <I>nu&eacute. • Override the HTML use of < and > symbols when you need them in a document. 2. see the list of special ISO characters.After this lesson you will be able to: Use the HTML codes for ISO Latin 1 characters to display accent marks for non-English letters.html in your text editor. This term nuee ardente is from the French term for "glowing cloud". index. In this case.e ardente. we need to use the HTML: &uuml.</I> or "glowing cloud" was first used by La Croix 4. we replace the first e in nuee with the HTML for the acute accented "e" &eacute. where XXXX is the code name for the special character.e ardente For reference on these codes. in the Terminology section of our Volcano lesson. text: 3. • Add extra spaces in between words and letters in a document.

4. To do this: 1. California pre-historic 500 . Open the HTML file. HTML Escape Sequences The HTML for the accent mark is an example of the more general class of tags known as escape sequences. It may look strange! Be sure that you replace the letter with the sequence that displays the same letter with the accent mark. &lt. use the escape sequences: &lt. Save and Reload the HTML file. the 1902 eruption of Mt Pel&eacute.e.6.600 and change it to: Long Valley. California &gt. in his description of the volcanic flows he observed in 7. index. NOTE: We have applied the acute accent mark for two "e" letters in this sentence. Long Valley.html in your text editor. 9. note how a web browser properly interprets and displays the special characters. Let's say one of the values (500-600) for Long Valley is not very accurate (often such values are estimates). 130 . and we would like the entry to read >450 & <700. is used for & Now let's apply one of these symbols in our Volcano lesson.450 &amp.700 pre-historic NOTE: Although we are using the escape sequences within a preformatted text. In entering HTML so far. In the previous. Instead. plus the & (ampersand) have special meaning in HTML and cannot be used as typed. is used for > &amp. 2. is used for < &gt. find the line for Long Valley in our table: 3. The escape sequences can thus be used in all portions of an HTML document including headings and anchor links. Under the heading of Volumes of Some Well-Known Volcanic Eruptions. we added a table that lists several volcanoes and how much material was erupted from each. active volcano on the island of Martinique. you may have wondered what you do when you need to use a < (less-than) or a > (greater-than) sign? These two characters. a historically 8.

And once again. H &nbsp. When Sir Longhorn When Sir Longhorn had tragically died. What if you wanted to indent the first sentence of every paragraph? How about having a single word with its individual letters spaced far apart? An HTML code for adding a space character is the special character known as the "nonbreaking space": &nbsp. And no cheese. And no cheese. left to carry on his tradition. Save and Reload the HTML file. Here are some examples of how you might use the non-breaking space: HTML Result Two non-breaking spaces are used to spread the letters in a word farther apart <b><tt> C &nbsp. Extra Spaces As you may have seen. cheese was sadness plentiful. E C H E E S E &nbsp. There was much sadness in no one was left to the land. there may be times when you really want to have more than one space. However. carry on his tradition. When? Some writers like to have two spaces following the period at the end of the sentence. &nbsp. E &nbsp. cheese 131 . <p> &nbsp. in the land. &nbsp. a web browser will ignore all extraneous spaces in your HTML files. But then the young genius Sheila Colby discovered the missing ingredient. E </tt></b> HTML Result Two non-breaking spaces are used to indent the first sentence of each paragraph &nbsp.5. But then the young genius Sheila Colby discovered There was much the missing ingredient. S &nbsp. And once again. no one was had tragically died.

You may want to experiment with different ways to use the non-breaking space. &not. &micro. &nbsp. &reg. no one was had tragically died. &nbsp. And once again. but you may. carry on his tradition. Result © ® ¢ ° « µ · ¬ ¶ 132 . But then the young genius Sheila Colby discovered the missing ingredient. &middot.was plentiful. &nbsp. cheese was plentiful. if you wish. More Information Here are some more special characters that you may find useful: Name Copyright Trademark Cent Degree sign double-less than micron Midline dot Negation. When Sir Longhorn When Sir Longhorn had tragically died. cheese was sadness in plentiful. &para. And no cheese. &nbsp. But then the young genius Sheila Colby discovered There was much the missing ingredient. &laquo. &nbsp. And no cheese. <p> &nbsp. &nbsp. left to carry on his tradition. At this time. we will not modify our HTML documents. &cent. add the code for indenting each opening sentence of all paragraphs using two instances of the special code for the non-breaking space. the land. And once again. HTML Result One extra space is used to add an extra space after the end of each sentence. There was much sadness no one was left to in the land. continuation line Paragraph HTML &copy. &deg.

</ul> lists.</ol> and unordered <ul>. ± £ » § ¥ Review Review topics for this lesson: 1. 2. Definition Lists Yet another variety of • lists o lists  lists. &sect. After this lesson you will be able to: • • build a list of items with indented text block definitions create a bibliography with a definition list We saw how to create two types of lists: ordered <ol>.. add a foreign word that requires a special accent or a mathematical expression that uses the < or > symbol. Unlike the lists we have seen earlier. The format for a definition list tag is: 133 .. In HTML. Or. &pound... but by its pattern of indentation. We now introduce a third variety. add some extra spaces to indent your paragraphs.Plus/Minus British Pound double greater than Section Yen &plusmn. 3. &raquo. the definition list. &yen. what is the correct way to display a German umlaut (ü)? What happens if you do not use an escape sequence for < and >? Why would you need a special escape sequence for the & character? How can you indent paragraphs? Independent Practice In your own HTML document. 4... the definition list marks its entries not with a bullet marker or a number. 11.

Viewed in a web browser.. the above example looks like this: 134 . </dl>.. tags include alternating pairs of titles <dt> and definitions <dd>..<dl> <dt> <dd> <dt> <dd> title1 definition1 title2 definition2 : : : <dt> titleN <dd> definitionN </dl> The <dl> . A Web browser will typically generate the list with each definition indented to offset it from the title.

V.W. U. J.e et ses &Eacute. and Mullineaux (eds). London: Allen &amp. R. <dt>Lipman.ruptions. After the unordered list under the heading References enter the following: 3. index. Review 135 . Paris: Masson 14. Unwin. <dt>La Croix. Open the HTML file. <dd><I>La Montagna Pel&eacute. Washington. <dl> 7. Geological Survey Professional Paper 1250. If you are unfamiliar with the HTML special characters.title1 definition1 title2 definition2 : : titleN definitionN The definition list might be used as a glossary . but for our example we will use it to create a short bibliography for our Volcano Web lesson: 1. <h3>Bibliography</h3> 5. 18. Save and Reload into your web browser. 15. (1987). (1981) 16.A.</I> 17. 4.</I> 13. and Wright. <dd><I>Volcanic Successions: Modern and Ancient. 19. 10. (1904) 12. 2. <dt>Cas. Check your library for these books: 6.S. </dl> NOTE: We have used some of the Special Characters for the ampersand symbol ("&") in the first reference and for the accent marks in the second reference.html in your text editor. A.</I> 9. <dd><I>The 1980 Eruptions of Mount St. 11. P.F. 8. Helens.

atomic structure sometimes can allow bonding of water molecules • • Gypsum (plaster) Barite (drilling mud) The HTML to produce this is: <dl> <dt><b>Oxides</b> <dd>Combinations of metal ions with Oxygen. abrasive) </ul> <dt><b>Sulfates</b> 136 . and a sublist of minerals in each group and how they are used in society. let's say we are making a list of the major mineral groups.Review topics for this lesson: 1. We wish it to look like (just a few entries are shown): Oxides Combinations of metal ions with Oxygen. with a description of their characteristics. For example. comprises the major ores extracted in mining operations <ul> <li>Hematite (iron ore) <li>Magnetite (iron ore. magnetic mineral) <li>Corundum (gemstone. comprises the major ores extracted in mining operations • • • Hematite (iron ore) Magnetite (iron ore. abrasive) Sulfates Metal ions combine with the Sulfate ion (SO4). magnetic mineral) Corundum (gemstone. More Information You can include other ordered/unordered lists within a definition list. How does the definition list differ from the ordered and unordered lists? In what instances might you use a definition list? What is the difference between the <dt> and the <dd> tags? Independent Practice Use a definition list to add a glossary or bibliography to your own HTML page. 3. 2.

see the footers at the bottom of every web page in this tutorial. In composing your own style.autograph it with a footer! Let people on the web send you an e-mail message right from your web page! After this lesson you will be able to: • • insert a stylized footer at the bottom of a page create a hypertext link that will send an e-mail message A worthwhile feature of web pages is a "footer" at the bottom of a page that provides information about the author and the document. and consistent between your different web pages. take a look at other web pages for ideas. atomic structure sometimes can allow bonding of water molecules <ul> <li>Gypsum (plaster) <li>Barite (drilling mud) </ul> </dl> 12. maybe the last date it was modified. It is a good idea to make footers brief. informative. Imitation still is a very high form of flattery! The HTML format for the address tag looks like: <address> text text text text text text text text text text text text text text text text text text </address> 137 . as well as a means to send the author a message by e-mail. Some useful information to include is: • • • • • Title or subject of the current page Date it was created/updated Copyright if appropriate (or even meaningful?) Name and e-mail for the web page author Name and hypertext link to affiliation/organization As examples.<dd>Metal ions combines with the Sulfate ion (SO4). This is the place for the address tag which just stylizes a block of text in italic and offsets it to a new line. Address Footers and E-Mail Links Hey! You created a snazzy web page -.

maricopa. 1999 Web Page by Alan Levine (webdude@jade. line breaks. If you wanted to send the same message to more than one address.pres@ whitehouse.mcli.maricopa. say the President and Vice-President.edu? subject=hi from lesson 12"> send an e-mail to alan</a> And there is more you can do by adding on to the mailto link.gov.dist.dist. you can also insert a default subject line for the e-mail message (NOTE: this may not work on all browsers): <ahref="mailto:webdude@jade. Wouldn't it be great if you could send email from your Web browser? Well.mcli.maricopa. vice-pres@whitehouse.maricopa.maricopa. the web browser will bring up a screen where you can compose a message and send it to me.mcli.mcli.edu">sen d an e-mail to alan</a> When the text send an e-mail to alan is clicked. What's more.mcli.dist. so we might modify it with bold tags.edu) <br> <a href="http://www.Note that all other HTML inside the address tag is legal. most web browsers now can! The way to do this is to create a hypertext link with the mailto type in the URL Create an email hypertext link like this: <ahref="mailto:webdude@jade.edu/"> Maricopa Community Colleges</a><br> </address> Result Page Title Last Updated February 31.dist.mcli.maricopa. we have broken it up so it displays better here): <ahref="mailto:webdude@jade. They would have to write down your e-mail address.edu) Maricopa Community Colleges Now. you just put the email addresses separated by commas (note that in your HTML code this should be one long line.gov?subject=hi from lesson 12"> 138 .dist. suppose someone was reading your page and wanted to send you a comment on how nice your page looked. and a hypertext link tag: HTML <address> <b>Page Title</b><br> Last Updated February 31. and send you a message. 1999<br> Web Page by Alan Levine (webdude@jade.dist. launch another program.edu.

pres@white house.gov.maricopa. the pres.maricopa. you can try to insert a default message using the syntax body= and the text that should be placed in the body part of the email message window: <ahref="mailto:webdude@jade.gov. just add another string after the subject using cc= and the email address. let's return to our Volcano example.dis t.gov &body=Hi there.maricopa. cc: the vicepres</a> And lastly.edu. and the vicepres</a> Let's say the Vice-President should only be carbon copied ("cc:") on this message. So in the previous example.mcli. HTML <address> <b>Page Title</b><br> Last Updated February 31.mcli.gov"> send an e-mail to alan.edu"> (webdude@jade. the pres. cc: the vicepres.maricopa. Note that you can have any text (or graphic) act as the hypertext link. with a default message</a> Please do not try sending these messages! Alan likes e-mail but don't bother the folks in the Whitehouse! Now.edu.maricop Result Page Title Last Updated February 31. ?subject=hi from lesson 12&cc=vicepres@whitehouse. 1999 Web Page by Alan Levine (webdude@jade.dist. 1999<br> Web Page by Alan Levine <a href="mailto:webdude@jade. we would modify the HTML to have the internet address create the link for e-mail. I think Alan deserves a dinner at your place. ?subject=hi from lesson 12&cc=vicepres@whitehouse.pres@ whitehouse.mcli.dist.mcli.dist.dist.send an e-mail to alan."> send an e-mail to alan. Note that the Subject= string and the cc= string are separated by a &: <a href="mailto:webdude@jade.maricopa.e du)</a> <br> <a href="http://www.e du) Maricopa Community Colleges 139 .dist.mcli. the pres.mcli. To do this.

edu/"> Maricopa Community Colleges</a><br> </address> And finally. 4.mcli.maricopa.mcli..mcli.bigu. 1999 Web Page by Alan Levine Web Page by Alan Levine <a href="mailto:webdude@jade. Why? What if someone prints out your web page but does not bookmark it or write down its URL? Including the URL on the page provides a handy reference.bigu. we recommend that you also put in the footer the URL for the page. For this example. 2.a.mcli.edu/"> Maricopa Community Colleges</a><br> </address> <p> <tt> URL: http://www.mari copa. add the following: 3.dist.edu/ tut/ </tt> Now it is time to add a footer to your HTML file. Open the HTML file..maricopa.mcli.maricopa.</address> tag: HTML Result <address> <b>Page Title</b><br> Last Updated February 31. Just modify the above example (note how this HTML is below the <address>. <hr> 5.dist.edu">lava@pele.e du) t.dist.edu/tut/ a. we assume you are "Lorrie Lava" a staff Volcanologist at Big University (feel free to put your own information in place of what is below): 1. At the bottom of the document (but above the </body></html> tags).e Maricopa Community Colleges du)</a> <br> URL: <a href="http://www. Volcanic Studies.dist.mcli.maricop http://www. index.dist. <a href="http://www.maricopa.html in your text editor.edu"> (webdude@jade.bigu.edu</a ><br> 7. <address><b>Volcano Web</b> <br> 6.dis (webdude@jade. <a href="mailto:lava@pele.edu/">Big University</a><p> 140 . 1999<br> Page Title Last Updated February 31. created by Lorrie Lava.

Also note the extra <p> tag at the bottom. 13.. HTML also includes this capability via the <blockquote>. </address> 10.edu/web/index. Save and Reload the HTML file. <tt>URL: http://www. Review Review topics for this lesson: 1. You Can Blockquote Me on That! Yet another simple HTML tag for re-arranging your text: "What is going on here?" asked the <blockquote> tag to the <p> and <br> tags..8.bigu.</blockquote> tag: <blockquote> "This is a long quotation from a very famous person. 12. How do you create a tag that will e-mail to you? to someone else? With a subject line? Independent Practice Add an address footer and e-mail links to your own HTML documents. "We are not sure. but you are very different from us!" After this lesson you will be able to: • • Insert a block of text that is indented from the body text Apply style tags within blockquote text In traditional writing. 1995</tt> 9. Since it is so long 141 . They replied. What does an address tag do? 2. this makes sure the last line of text is always visible..html</tt> NOTE: We've used several HTML tags that have been covered in previous lessons. quotations of three or more sentences are set off from the main text as an indented block of text. Does an address tag have to be at the bottom? 3. <tt>last modified: April 1. <p> 11.

it should really be <pre> set off</pre> from the rest of the text.and interesting. </ul> </blockquote> which yields the following: 142 . Since it is so long and interesting." </blockquote> which yields: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah "This is a long quotation from a very famous person.edu/alan/"> very famous person</a>. This indicates clearly that the quote is from someone other than the writer.maricopa. This indicates clearly that the quote is from someone other than the writer." blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Note that we can apply any and all HTML we have learned so far inside of the <blockquote> tags.dist. it should really be set off from the rest of the text.mcli. it should really be set off from the rest of the text. such as this example: <blockquote> <H2>A Manifesto</H2> This is a <b>long</b> quotation from a <a href="http://www. <p> <I>This indicates</I>: <ul> <li>clearly that <li>the quote is from <li>someone other than the writer. Since it is so long and interesting.

<b><I> 6. Since it is so long and interesting.<a href="http://www. -. We will use blockquote from the Roman naturalist. Pliny the Elder</a>. "Nature raves savagely.blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah A Manifesto This is a long quotation from a very famous person. 12. </I></b><br> 8. eruption of Mount Vesuvius. threatening the lands" 7. add the following: 4.html"> 9. who witnessed the eruption of the volcano Vesuvius in 79 A. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Let's add a blockquote to the introduction of our Volcano web page. observing the destruction of Pompeii by the 11. Under the <h1>Volcano Web</h1> heading. who died of asphyxiation after 10.html in your text editor. 1. Open the HTML file. Pliny. <BLOCKQUOTE> 5. 2.D.livius. 79 A. it should really be set off from the rest of the text. This indicates: • • • clearly that the quote is from someone other than the writer. index.D. </bLOCKQUOTE> 143 . 3.org/pipm/pliny/pliny_e.

there is a great deal of potential in the creative use of the number of tags. </bLOCKQUOTE> tags. that while HTML may be limited in terms of control over page layout.. for more tags. <BLOCKQUOTE> <BLOCKQUOTE> <BLOCKQUOTE>"Oh." If had just used one set of <BLOCKQUOTE> . there is a great deal of potential in the creative use of the number of tags. that while HTML may be limited in terms of control over page layout. "Remember." he lamented. The <blockquote> tag is one way to avoid having many pages full worth of plain text paragraphs. 2. What does the <blockquote> tag do? Why don't you need a <p> tag before a blockquote? Independent Practice Experiment with the <blockquote> tag in your own web page. For example. Do not just think in terms of using it only for quotations.. dear. Replied she. we would have seen: 144 ." he lamented. The tag can be effective for adding some variety to your web page layout. "Remember. Review Review topics for this lesson: 1. <p>Replied she.13. dear. Some developers will use two or three (or more) nested <blockquote> tags to create an effect of wider margins." </bLOCKQUOTE> </bLOCKQUOTE> </bLOCKQUOTE> produces: "Oh. Save and Reload the HTML file. for more tags.

" You cannot predict the exact amount of spacing this will provide on the sides of the pages. but it is an easy and effective variation for presenting text."Oh. "Remember. that while HTML may be limited in terms of control over page layout. dear. 145 ." he lamented. there is a great deal of potential in the creative use of the number of tags. for more tags. Replied she.

html. Scrolling through long web pages is often tedious.html that has links that point to each of the other parts of our lesson: 146 . the lesson. a second web page). So far we have built one web page with a link to a shorter page. It also becomes important to build in hypertext links that help the reader navigate your information web as well as providing visual clues about their location within the web. These same divisions might be sensible breakpoints for splitting the single long page into sub-pages. and msh. In many cases. Long. We will now split the single Volcano Web file into a series of web pages. it is time to transform your ordinary long-scrolling "page" into a logically connected "web" of information. there is no magical formula. you can identify logical points to "split" information into multiple web-pages. We also have a second directory called pictures that contains our graphic image files. You should strike a balance between pages with breaks that parallel the content yet avoid forcing the reader to click through too many screens of options and sub-options before getting to the desired information. We created a list of links that works as a table of contents by connecting them to named anchors for the different sections of the Volcano Web lesson.14. sometimes it's better to "lump" things together. NOW. Splitting You made a single web page! But. index. and opinions will vary. The entry point is a main index/cover page.html. After this lesson you will be able to: • • • Transform a single web page to a series of linked pages Create a template for multiple web pages Build navigational features for connecting multiple web pages Are you a lumper or a splitter? Neither? Both? For organizing information. single web pages take longer to load over networks when compare to a series of smaller pages. linked as shown in this schematic diagram. Lumping vs. Up to now we have created a directory called volc that contains our two HTML files (index. other times it is better to "split" them apart. However.

147 .

jpg stamp.html and msh.html] • Each part of the lesson will link back to the index as well as to the preceding and following pages.html new file structure work area pictures lava.gif seismo.html] • Research Project [proj.gif msh.html msh.html intro.html] • Volcanic Places on Mars [mars.html proj.html volc index. Also note the two-way link between usa.html] • Volcanic Places in the USA [usa.Introduction [intro.jpg stamp.gif left.gif 148 .gif seismo.html mars.html Or if you prefer a more traditional directory listing structure: existing file structure work area pictures lava.gif left.gif msh.html] • Volcano Terminology [term.html msh.html usa.html term.gif volcano volc.

7. </dl> You may want to compare your HTML file to an example of how it should look at this point. <a name="term">. which will be the "cover" page for our Volcano Web lesson: 1. Also.S.W. but also not shrinking them too short that they are cryptic) The first thing we will do is create the new index. Now look at the section labeled "In this Lesson. Now we will modify these anchor links so that each jumps to another web page (which we will create below).html file. First make a copy of the index. Be sure that you are comfortable jumping around between the different application and document windows on your computer. : through : <dt>Lipman. we will remove the sections that will be "split" out to other web pages.html or something like that.</a>) in the same document (see lesson 8a). and Mullineaux (eds).. We are going to use the picture. P.g." In our previous work. or hot melted rock from within a planet. 149 . To do this. A <b>volcano</b> is a location where magma. Now open the original version of the index. This is a very good habit when you start making major changes to your web pages! 2.</I> U.. (1981) <dd><I>The 1980 Eruptions of Mount St. Geological Survey Professional Paper 1250. <h2><A NAME="intro">Introduction</a></h2> 6.NOTE:To complete this lesson. Helens.html file you have been working on and name it old. the opening text/quotation. Delete the sections from Introduction to Bilbiography. and the table of contents as the content for our title page. 8. This is our lesson that we have been working on to this point. that is everything from: 4.. we used hypertext links to jump to a named anchor (e. we have changed the name of the volcano directory/folder to a shorter volc. Washington. 3.html file in your text editor. reaches the surface. we will have to create quite a few new files and do a fair amount of copy/pasting from the files you have been working on. <hr> 5. (We like trying to keep our URLs from getting too long.

Find the portion that reads: 9..html">Volcanic Places on Mars</a> <li><a href="proj. It will be easier if we first create a template file that we can modify for each of the different pages. <li><a href="#project">Research Project</a></i> </ul> and edit it to read: <b>In this Lesson. put the following HTML (If you wish.html">go to questions</a> The next thing we will have to do is create the individual files for the other parts of our lesson. <ul><i> 11. <li><a href="#term">Volcano Terminology</a> 13..html">Introduction</a> <li><a href="term.html 2. create a new file called temp.</b> 10. <li><a href="#mars">Volcanic Places on Mars</a> 15. <b>In this Lesson.html">Volcanic Places in the USA</a> <li><a href="mars.html">Volcano Terminology</a> <li><a href="usa. you can copy an example template file): HTML <html> Notes HEAD: In the head 150 .html">Research Project</a></i> </ul> Compare your HTML file to an example of how it should look at this point. <li><a href="#usa">Volcanic Places in the USA</a> 14.</b> <ul><i> <li><a href="intro. <li><a href="#intro">Introduction</a> 12.. In your text editor. In this file. 1. NOTE: Be sure you understand the difference between a link written: <a href="#quest">go to questions</a> and another one written: <a href="quest..

Now you should make 5 copies of the template file and make the appropriate changes to the template: 151 .html">back</a> / <a href="xxxx.edu</a> <br> Volcanic Studies. Placing the name of the page here adds another important visual clue to the location of this page in the structure of the web we are creating.edu"> lava@pele.edu/web/xxxxxxxx.<head> <title>XXXXXXXX</title> </head> <body> <h5>Volcano Web / <a href="index. 1995</tt> </address> <p> ADDRESS FOOTER: Note how the footer is now set up to indicate the name of the main web page (with a link back to it) as well as a line of text that indicates the name of the current section XXXXXXXX.html </body> </html> 3.bigu.bigu.bigu. XXXXXXXX is the name of that section NAVIGATION: At the top of each page we use a small header (h=5) to create navigation links. Notice how this provides a common visual clue to each of our web pages. <h2>XXXXXXXX</h2> : : : <hr> <address> <b><a href="index. next and back link to the following and preceding pages. <a href="mailto:lava@pele.html">Index</a> / <a href="xxxx.html">next</a></h5> portion of each document.html"> Volcano WebL</a> : XXXXXXXX </b><p> created by Lorrie Lava. You will have to fill in the appropriate file name in for xxxx.edu/"> Big University</a><p> <tt>last modified: April 1. <a href="http://www.html the line that indicates the </tt> document's URL to reflect <p> its file name xxxxxxxx. Index points back to the main cover page. HEADER: Use a header=2 to put a title for that page.bigu. <tt>URL: URL: Be sure to modify http://www.html.

you will have to modify the link in msh. <a href="usa.html file (that we re-named old. remove the line from the navigation section: <a href="xxxx.html"> 7. Now..html) in your text editor.. Note that Volcanic Places in the US and Research Projects both include sub-sections that have <h3>.File Name intro.edu"> lava@pele. it returned to a named anchor in the main lesson (the section for Volcanic Places in the US) where now it should link to the usa.gif" alt="** "> 8.bigu. 5.. open the old index.html">next</a> 4. you should also make the footer look like: <hr> <address> <b><a href="index. Finally..</h3> headers.bigu.html usa.</h2> header and paste it into the new files you created in the previous step.html file. <img src=". <a href="http://www.bigu.html file in your text editor and edit the line to read: 6. <a href="mailto:lava@pele. Open msh.html Volcano Terminology Volcanic Places in the USA Volcanic Places on Mars Research Project As this is the last section.html file.edu/"> 152 ..html mars. For each of the new files.html Section Introduction Notes As this is the first section. remove the line from the navigation section: <a href="xxxx. Previously. you will have to copy the HTML that was underneath that section's <h2>.html"> Volcano Web</a> : <a href="usa.edu</a><br> Volcanic Studies. Helens</b> <p> created by Lorrie Lava./pictures/left.html"> Volcanic Places in the USA</a> : Mount St.html proj.html">back</a> term. Return to <i>Volcano Web</i></a> Just to be consistent.

multiple web pages over a single. If your pages are different from the sample or the hypertext links do not work correctly.edu/web/msh. review the text you entered in the text editor. This becomes more important as you create more web pages that have hypertext to link them together. What would have happened if we did not modify the hypertext link in the msh. Compare: "click here" links In the spring of 1980. What were the navigational features we added to our lesson? More Information Stylistically. Helens took heed of the scientists' warning about an impending volcanic eruption.html</tt> </body> </html> Check Your Work Compare your web pages with this sample of how it should appear. What are some advantages of short. 1995</tt> </address> <p> <tt>URL: http://www. (Click here to see a picture of Mount St.html file? 3. Review Review topics for this lesson: 1. In that same year. In this lesson we created quite a few files and it is very easy to make typographical errors. no such event occurred. several were insistent on staying in their homes and sadly perished in the May 18 event. Helens) However. long web page? 2. measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley. and residents were angrily resentful for what they 153 . (Click here to see a seismometer) However.bigu. and order a large evacuation of the Mammoth resort area. most people living in the vicinity of Mount St. your web pages are more readable if the hypertext links are integrated into the text of the content. California.Big University</a><p> <tt>last modified: April 1.

The "Click here. but the link text "here" is not related to the intended item. measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley. Is it getting very long? Is there a logical division where you could "split" the page? Set up a cover/page index to your web pages and design appropriate links for navigating between them." hypertext not only disrupts the flow of the text. However. However. and residents were angrily resentful for what they perceived as a false warning that caused great economic loss. integrated hypertext links In the spring of 1980..perceived as a false warning that caused great economic loss. -. here is a short lesson without any work to do! After this lesson you will be able to: • • Decide whether to use HTML that may not work for all web browsers View the source HTML of any web page 154 . write a clean link. In that same year. several were insistent on staying in their homes and sadly perished in the May 18 event.. But you will also face more issues to address as HTML becomes less "standard" (and more complex)." Now ask some friends/colleagues to view your pages. Helens took heed of the scientists' warning about an impending volcanic eruption.Here you will find more features and styles you can use in your web pages.html">Home Page</a> -. Since you have worked so hard up to this point. Independent Practice Take a look at the web page you are developing. As a suggestion. <a href="home. "Standard" and "Enhanced" HTML Enter into the next realm of HTML. most people living in the vicinity of Mount St. Instead. Make the content readable and choose the link words to clearly indicate that the link leads to something related.g. California. avoid writing any lines like "click here to return to the home page". e. Do they prefer the "split" pages or the "lumped" one? Could they easily negotiate their way through your information? 15. and order a large evacuation of the Mammoth resort area.the clicking is inherent in the use of the web browser. no such event occurred. Then design a template for your "sub-pages.

and more. Netscape was faster and more reliable than the NCSA Mosaic. The international commission was faced with a dilemma. You began to see web pages that said. As the major online services opened up to the web." How about a little history? Long. Extremely popular. ago ("in a galaxy far away?"). by following the standards. in HTML. Other programmers began to build web browsers that offered the same functionality as Mosaic (because they supported all of the HTML features contained within the international standards).its mascot was "Mozilla". the World Wide Web was a text-based system based upon the HyperText MarkUp Language. ("Mosaic" + "Godzilla") with a brand new web browser known as Netscape Navigator.0 PLUS more tags for things that you could not do in HTML 2. we will just review some of the related issues before you venture ahead into the "danger zone. long. well around 1990.0. the standards were followed to the letter. The Mozilla Netscape was immensely popular and quickly grabbed 3/4 of the webbrowser pie.We introduced you to the concept of "standard" HTML. Here. It had a cool mascot! NetScape grew popular quickly perhaps because it contained functionalities that included all of HTML 2. the browser market got even more crowded (and noisy). Insanely popular. As the rules for HTML 155 . This was the key to the "web" becoming "world wide" because. the information was completely independent of the computer from which it was viewed.0. A group that included the original developer of Mosaic formed a new company -. formatted tables of text.. text that wrapped around the side of images. Other browsers began to include support for the Netscape "HTML 2. The web started to get popular. The tags and interpretation were all built upon standards (HTML 1. Even when NCSA Mosaic burst upon the scene in 1993 as the first graphical web browser (created by whiz kid Marc Andreessen and others).0+" features. These "extensions" or "enhancements" have caused (and still cause) a great deal of arguments between HTML purists and those that like the "less than standard" features that Netscape added. Now. you could include colored backgrounds to your pages. "This page optimized for Netscape". which at that time were updated to HTML 2.0) set by an international committee. The subsequent lessons in this tutorial will show you how to use some other HTML tags that may not be viewable on all web browsers. as the market was largely demanding these "non-standard" tags to become part of HTML..

different fonts. For example. More commonly. you will be "publishing" web pages from an Internet server and have no idea what browser is being used or even what kind of computer it is used on.3. Netscape and Microsoft. we consider this a short sighted approach that may down the road force you to do massive. they began to include most (but not all) of the tags Netscape had introduced. you should consider what your readers will be using to access your pages. plus new features for easily internationalizing content and providing more accessibility features for the visually impaired. The standards process seemed to move too slowly for many people.if a browser encounters a tag it does not know how to deal with or display. As we will see in later sections. You can add special warnings to your page. So what does this mean for you? As you develop web pages.all of which may cause the display to vary in size. If you can try out your web pages on different computers. This latest evolution is meant to be a step that will provide a great deal of flexibility for future changes without them being mere "bolton" tags that have occurred to date. let's say my browser supports the <drip>. different text color preferences. a fancy effect for my home page: <drip><H2 align=center>Welcome</H2></drip> 156 .. This tag makes all text inside appears normal and then slowly "drip" toward the bottom of the page (editorial note -.I MADE THIS UP!). You can stick closer to the standards that are most widely supported on all web browsers. switch the standard fonts. Even if you do use special tags. Most importantly. it simply ignores these tags. Style Sheets provide a very efficient means for updating an entire web site with more consistent appearances.0 is the suggested standard that should be adopted by all web browsers. the original design for HTML has a very open and forgiving set of rules -. The most recent action has been the proposal of HTML 3..0 and Netscape. there are usually ways to have an alternative that will not cause havoc for users of other browsers. Then you can be comfortable designing and testing on only one browser. Would HTML become more Babel-like? For more information about the HTML battle. which encompasses most of the features supported by the big players in the browser arena now.. stretch and shrink the browser window.0 were being developed.</drip> tag. Fortunately.2. And the battle grew bigger into 1996 when Microsoft introduced their own special HTML tags. tedious updates to your HTML coded pages. we refer you to Andy King's HTML 3. However. Perhaps you are a teacher in one school or an information department in a company that is sure all of their users will be using a particular browser. The most recent position statement reflecting HTML 4.. layout or appearance from how it looks on your computer. different monitor sizes -. do not become fixated on how the page looks on just your own computer! Your readers may have different browsers.

your web browser menu will have an item called View from which you can select Source or Page Source. Look out for the puddles! If your browser doesn't support this tag it just skips over it completely. This is one of the best responses to the question. On your browser that does not support this feature.. if you can "peek under the hood" of a web page and examine its HTML. it will download the HTML source code corresponding to the URL of the current page in view.. Another way to grab the HTML source of a page in view is to select Save as. "creatively borrow". isn't it? Peeking at the Source If you have not learned this already. NOTE: This will save for you the HTML file for the page in view. It's a brilliant concept. you will see: Welcome to my sloppy home page!. Typically... if you find a web page design that you like.. This will bring up your familiar Save dialog box where you can select a location on your computer's drive and a file name. or find yourself asking.be sure to select the option labeled Source.. and display this HTML code for you to see. but not any of the images used in the page. You should also see in the dialog box a pop-up menu labeled Format -.to my sloppy home page!. But. Look out for the puddles! which works like a charm on my home made browser because it has been programmed to understand how to display the <drip>. rather than bombing or presenting an error message.. from the File menu of your browser. you can understand and perhaps re-purpose interesting design techniques... Some newer web browsers as well as third party tools 157 . "Why should I learn all of this darn HTML gunk when I can just use a visual editor such as ________________"? You cannot learn much from other websites if you depend upon a helper application to make your web pages. The exact menu names for doing this are different depending on which web browser and version you are using.. "How did they do that?" the easy thing to do is to look at their HTML code! It is sitting there waiting for you. the best secret for learning how to design web pages is to . When you select this.</drip> tags. We are not advocating stealing HTML! But.

If you see an interesting design of someone's web page. Why should you care about the standards of HTML? 2. the instructions will get a bit longer and more complicated.provide the functionality to download everything in that web page as a single package. As we go on into these more advanced lessons. And a third way to get to the HTML source is to access the hidden menu-.right mouse click for Windows and Unix users. What happens when a browser encounters an HTML tag it does not understand? 4. But you've gotten this far ok! Review 1. see how quickly you can see and save the HTML source code for this lesson page. control-click for Macintosh users-. how can you learn how it was constructed? 158 .on any blank area of a web page. As practice. In what settings can you be most comfortable using non-standard HTML? 3.

‬ ‫والن هيا بنا ننطلق إلى الدرس التالي لكي ترى أساسيات الهتمل المهمة:(.‫يا هل ومرحبا بكل من أراد تعلم لغة الهتمل‬ ‫يا ترى ما هو السؤال الذي يراودك الن؟؟؟؟‬ ‫وبأي نقطة تود أن أبدأ بالشرح؟؟‬ ‫مهل قبل أن تطرح أي سؤال ، وقبل أن تمر على كل الدروس ، ما هو معنى كلمة ‪HTML‬؟‬ ‫من الطبيعي أن تعرف معناها ما دمت نويت تعلم هذه اللغة الرائعة السهلة .‬ ‫إن كلمة ‪ HTML‬هي اختصار لـ ‪Hyper Text Markup Language‬‬ ‫ولغة الهتمل ليست كما تراها الن أمام الشاشة ، بل هي عبارة عن رموز ‪ ، <>Tags‬ويوجد لكل‬ ‫رمز عمل معين يقوم به ليؤدي وظيفة ما .‬ ‫951‬ .‬ ‫وهذه هي لغة الهتمل كل رمز بها يقوم بعمل خاص به ، فهذا رمز للتلوين وهذا رمز آخر لوضع‬ ‫خط تحت العبارة ، ورمز يقوم بإضافة موسيقى ..‬ ‫هل هناك ملحظة معينة قبل أن ابدأ بتعلم الدروس ؟‬ ‫نعم هنالك ملحظة صغيرة ومهمة جدا جدا ، أل وهي عند تخزين ملف الهتمل في المفكرة مثل‬ ‫بإسم ‪ lesson‬لتنسى أن تخزنها بإمتداد ‪ html‬أو ‪<htm‬‬ ‫وهكذا اذهب بعدها للمتصفح وافتحه هناك لكي ترى النتيجة وبالطبع ليس شرطا ان تكون متصل‬ ‫بالنترنت لكي ترى النتيجة....‬ ‫فمثل تخيل معي ، بيت يتكون من عشرين غرفة ، ولكل غرفة باب خاص به ، وهذا الباب بالطبع له‬ ‫مفتاح ل يشابه اي مفتاح في أي غرفة أخرى ، لذلك فمثل المفتاح رقم واحد يقوم بفتح غرفة‬ ‫الطعام ومفتاح رقم اثنين يقوم بفتح غرفة الجلوس وهكذا ..‬ ‫هل تحتاج لغة الهتمل إلى برنامج معين لكي اكتب فيه الرموز؟‬ ‫ل تحتاج لغة الهتمل إلى برنامج معين بل كل ما تحتاجه هو في متناول اليد ، والذي هو عبارة عن‬ ‫محرر لكتابة النصوص مثل برنامج المفكرة ‪ notepad‬ومتصفح لكي تظهر عليه النتيجة وترى‬ ‫ثمار تعبك والمتصفحات كثيرة ولكن انصحك بانترنت اكسبلورر أو نتسكايب نفيجيتور.

.‬ ‫والن سوف تجد كل نوع من الخطوط مع المر الذي يجب ان تكتبه له ..واختر الذي يعجبك‬ ‫061‬ .؟؟؟المر بغاية السهولة ستجد الن أنواع الحجام مع المر‬ ‫الذي تكتبه له...‬ ‫وإذا حاز أي نوع من الخطوط على إعجابك فكل ما عليك هو حفظ المر أو نسخه لتستعمله في‬ ‫موقعك الخاص بك.‫في هذه المرحلة من الدروس سوف نتعلم درس مهم جدا وممتع أل وهو كيفية إضافة وإدراج‬ ‫أنواع من الخطوط وبأحجام مختلفة.‬ ‫لكي تظهر لك العبارة في الوسط‬ ‫كما في المثال التالي‬ ‫هنا سوف اتعلم كيفية إدراج الخطوط‬ ‫اكتب المر التالي‬ ‫>‪</center‬هنا سوف اتعلم كيفية إدراج الخطوط>‪<center‬‬ ‫ولكي يظهر لك ذلك‬ ‫ططط ططط ططططط ططططط ططططط طططططط‬ ‫اكتب المر التالي‬ ‫>‪</i‬هنا سوف اتعلم كيفية إدراج الخطوط>‪<i‬‬ ‫وهكذا سوف تجد كل مثال مع المر المطلوب له‬ ‫هنا سوف اتعلم كيفية إدراج الخطوط‬ ‫>‪</b‬هنا سوف اتعلم كيفية إدراج الخطوط>‪<b‬‬ ‫هنا سوف اتعلم كيفية إدراج الخطوط‬ ‫>‪</strike‬هنا سوف اتعلم كيفية إدراج الخطوط>‪<strike‬‬ ‫هنا سوف اتعلم كيفية إدراج الخطوط‬ ‫>‪</u‬هنا سوف اتعلم كيفية إدراج الخطوط >‪<u‬‬ ‫والن ماذا عن حجم خط العناوين...

‫>1‪</h‬هذا الحجم رقم واحد>1‪<h‬‬ ‫>2‪</h‬هذا الحجم رقم اثنين>2‪<h‬‬ ‫>3‪</h‬هذا الحجم رقم ثلثة>3‪<h‬‬ ‫>4‪</h‬هذا الحجم رقم أربعة>4‪<h‬‬ ‫>5‪</h‬هذا الحجم رقم خمسة>5‪<h‬‬ ‫>6‪</h‬هذا الحجم رقم ستة>6‪<h‬‬ ‫وتوجد أيضا طريقة للتحكم في حجم الخط‬ ‫فأنت تستطيع كتابة حجم الخط ما بين رقم واحد إلى الرقم سبعة‬ ‫بهذا المر‬ ‫>5=‪<font size‬‬ ‫-----‬‫-----‬‫العبارة‬ ‫----‬‫>‪</font‬‬ ‫وسوف ترى بنفسك ماذا اقصد بهذه الرقام ، من خلل المثلة التالية‬ ‫>‪</font‬موسوعة الكمبيوتر والنترنت العربية>1=‪<font size‬‬ ‫>‪</font‬موسوعة الكمبيوتر والنترنت العربية>2=‪<font size‬‬ ‫>‪</font‬موسوعة الكمبيوتر والنترنت العربية>3=‪<font size‬‬ ‫>‪</font‬موسوعة الكمبيوتر والنترنت العربية>4=‪<font size‬‬ ‫>‪</font‬موسوعة الكمبيوتر والنترنت العربية>5=‪<font size‬‬ ‫161‬ .

Arabic Transparent.‫تركت لك الحجم رقم ستة وسبعة لكي تجربهما بنفسك‬ ‫وهنالك طريقة أخرى وهي باستخدام اشارة الجمع أو الطرح بهذه الطريقة‬ ‫وهي تصغير او تكبير الخط عدة درجات بحسب الدرجة التي تريدها، وطبعا اختيار الدرجات يتم ما‬ ‫بين الرقم واحد إلى الرقم سته‬ ‫كما في المثال التالي‬ ‫>‪</font‬كبرت الحجم بمقدار درجتين >"2+"=‪<font size‬‬ ‫>‪</font‬صغرت الحجم بمقدار درجتين>"2-"=‪<font size‬‬ ‫وهكذا حاول أن تجرب جميع الدرجات لتكتشف بنفسك كيفية عملها.‬ ‫وبعد أن تعلمت كيفية التحكم بحجم الخط ، ل بد منك أن تتعلم كيفية تعيين نمط الخط الذي يعجبك،‬ ‫ومن الفضل دائما ان تعين ثلثة خطوط على القل ، وذلك لكي إذا وجد المتصفح صعوبة في إيجاد‬ ‫الخط الول فهو ينتقل الى الخط الثاني وهكذا‬ ‫ويتم ذلك من خلل هذا المر . Simplified‬‬ ‫>"‪Arabic‬‬ ‫-------‬‫------‬‫العبارات‬ ‫------‬‫-----‬‫>‪</font‬‬ ‫والن ارجوا منك أن ل تنتقل من درس إلى آخر إل عندما تنتهي من تطبيق كل درس عمليا ، وأنا‬ ‫بانتظار اي استفسار منك‬ ‫يا ترى ما هي الفكرة التي أخذتها من الدرس السابق التي كانت عبارة عن دردشة خفيفة في‬ ‫الهتمل؟‬ ‫261‬ .‬ ‫‪<font face="Traditional Arabic.

‫اتمنى بالفعل أن تكون قد نويت استكمال تعلم الهتمل ، والن هيا بنا الن لنشرح بطريقة عملية في‬ ‫الهتمل.‬ ‫ما هو التركيب الساسي لي ملف في الهتمل؟‬ ‫حينما تفتح المفكرة لكي تكتب فيها ، ل بد من أساس تطبق عليه كل الرموز، الساس هو كالتالي:‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title‬‬ ‫هنا يكتب العنوان الذي سوف يظهر في شريط المتصفح‬ ‫>/‪<title‬‬ ‫>/‪<head‬‬ ‫>‪<body‬‬ ‫-------‬‫-------‬‫هنا نكتب كل ما نريد ادراجه في صفحات الموقع من صور ومواضيع‬ ‫-------‬‫-------‬‫>/‪<body‬‬ ‫>/‪<html‬‬ ‫والن إليك هذا المثال البسيط :‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫361‬ .

‬ ‫>‪<br‬‬ ‫يستخدم هذا الوسم لنهاية السطر والبدء بسطر جديد‬ ‫>‪<p‬‬ ‫يقوم هذا الوسم بنفس عمل الوسم السابق ال انه يترك سطر فارغ بين الفقرات‬ ‫&‪..فما رأيك لو تطبق هذا المثال وشاهد‬ ‫بنفسك كيف يتكون كصفحة بسيطة تكون بداية لتعلمك تصميم المواقع‬ ‫والن ما هو الشيء الذي لم تتعلمه في الساسيات؟؟؟‬ ‫إنها الفراغات وترك السطر، فلغة الهتمل ل تهتم بعدد السطر الفارغة التي تركتها ول بعدد‬ ‫المسافات بين الكلمات ، فإذا كنت ترغب بترك سطر فهنالك وسم معين له ، وكذلك للفراغات .ولكن هذا الوسم يستخدم اذا كنا نريد اكثر من فراغ واحد بين‬ ‫الكلمات‬ ‫والن إليك هذا المثال الذي سوف يوضح تلك الوسوم الثلث التي تعلمتها الن‬ ‫>‪<html‬‬ ‫>‪head> This is my page‬‬ ‫>‪title> Sayed‬‬ ‫461‬ ...‫>‪<title‬‬ ‫صفحتي الولى‬ ‫>/‪<title‬‬ ‫>/‪<head‬‬ ‫>‪<body‬‬ ‫ما زلت حتى الن اتعلم الدرس الول‬ ‫>/‪<body‬‬ ‫>/‪<html‬‬ ‫وهكذا اصبحت الن قادرا على كتابة أساسيات الهتمل .nbsp‬‬ ‫يقوم هذا الوسم بترك فراغ بين الكلمات ، وهو يمثل فراغ واحد وهكذا كلما كتبت هذا الوسم يترك‬ ‫فراغ واحد ولكن بالطبع فإنه ليس من الضروري كتابته بين كل كلمة وكلمة ، فتلقائيا سوف يترك‬ ‫فراغ بين الكلمات للتفريق بينها.

Here is my C.nbsp‬‬ ‫>‪<p‬‬ ‫والن سوف انتقل الى سطر جديد بدون ترك سطر فارغ‬ ‫وهكذا تعلمت تلك الوسوم الثلث بكل سهولة‬ ‫>/‪<body‬‬ ‫>/‪<html‬‬ ‫والن ما رأيك ان تطبق المثال السابق وترى بنفسك كيف سوف يظهر في متصفحك .nbsp‬‬ ‫&‪.nbsp‬‬ ‫&‪.‬ ‫إنها اللوان وكيفية إدراجها كخلفية او كلون للعبارات أو العناوين في صفحات النترنت .‬ ‫يا ترى ما الذي تريد تعلمه من هذا الدرس؟‬ ‫بالطبع عرفت ماذا سوف تتعلم من عنوان الدرس .‫صفحتي الولى‬ ‫>/‪title> Sayed‬‬ ‫>/‪head> I’m Doctor‬‬ ‫>‪<body‬‬ ‫‪My name is sayed saber‬‬ ‫‪.‬ ‫561‬ .V‬‬ ‫‪Here is my name‬‬ ‫>‪<body‬‬ ‫&‪.‬ ‫ل تنسى عند مواجهة أي مشكلة مع الهتمل مراسلتي لكي أساعدك في معرفة النقطة التي مثلت لك‬ ‫مشكلة.nbsp‬‬ ‫&‪.

.، وأعدك خلل هذه اليام‬ ‫سوف أقوم بوضع جدول يحتوي على ألوان متعددة ورموزها...‬ ‫انظر معي إلى هذا المر:‬ ‫>321321#=‪<font color‬‬ ‫-----‬‫-----‬‫>/‪<font‬‬ ‫لقد تعاملنا مسبقا مع الرمز ‪ font‬ولكن هذه المرة أدخلنا كلمة ‪ color‬وهكذا اختر اللون الذي‬ ‫يعجبك وسوف ترى النتيجة بنفسك عند استخدامك لها .‬ ‫وبالطبع لك الحق في أن تتسائل عن هذه الرموز ومن أين تأتي بها.ليفوتني أن أذكر أنه يمكن‬ ‫661‬ .‬ ‫ولكن تذكر دائما بأن تضع إشارة # قبل الرمز الذي اخترته لكي يتعرف المتصفح على اللون.‬ ‫إذن الن تعلمت لون الخلفية فيا ترى ماذا عن لون العبارات والفقرات ..‫في البداية هيا نتعلم كيفية إضافة لون كخلفية‬ ‫وهذا يأتي من خلل المر التالي :‬ ‫>‪<body bgcolor=#ffffff‬‬ ‫------‬‫------‬‫>/‪<body‬‬ ‫ولقد استخدمت أنا اللون البيض وذلك من خلل الرمز ‪ ffffff‬كخلفية وهذا يأتي من المر السابق.‬ ‫وهكذا تستطيع اختيار لون الخلفية الذي يناسبك وتستبدله بذلك اللون الذي انا اخترته مسبقا.

..‫التعاض عن وضع هذه الرقام بالنسبة لللوان المشهورة كالبيض أو السود أو حتى الزرق‬ ‫بمجرد وضع إسم اللون باللغة النجليزية بدل هذه الرقام .‬ ‫أول : إضافة الصورة‬ ‫والن وصلنا معا إلى هذا الدرس المفيد جدا ......jpg‬‬ ‫ثانيا: التحكم في عرض وطول الصورة‬ ‫761‬ .فهنا سوف تتعلم معنا كيفية إضافة الصور الى‬ ‫موقعك‬ ‫وهنالك وسم معين لضافة الصور أل وهو‬ ‫>‪<IMG‬‬ ‫مع الخاصية‬ ‫‪SRC‬‬ ‫والن هيا معا إلى التطبيق.هذا الدرس مسلي جدا فهو سيعلمك كيفية إضافة الصور............نفترض بأن لديك صورة قد اسميتها‬ ‫1‪image‬‬ ‫فكيف تستطيع إدراجها في موقعك؟؟؟‬ ‫حسنا فلنكتب المر معا‬ ‫سيكون بهذه الطريقة‬ ‫>‪<"IMG SRC="image1.‬ ‫هل.

ولكن بعد إضافتها ربما لم يعجبك عرض وطول‬ ‫الصورة‬ ‫لذلك سوف نتعلم الن كيفية تغيير عرض وطول الصورة ولن يكلفنا هذا تعلم وسم جديد.jpg" HEIGHT="200" WIDTH‬‬ ‫ثالثا: كتابة نص بديل عن الصورة‬ ‫ربما قد تلحظ حينما تتصفح موقعا بأن تحميل الصور بعض الحيان يكون بطيئا وقبل ظهور‬ ‫الصورة يكون هنالك نصا مكتوبا في مكان الصورة‬ ‫فيا ترى كيف ظهر ذلك النص؟؟‬ ‫المر في غاية السهولة ، فقط يلزمك استخدام خاصية جديدة في نفس الوسم السابق‬ ‫وهذه الخاصية تسمى‬ ‫‪ALT‬‬ ‫نفترض انك تريد اضافة الجملة التالية لتكون خلف الصورة ليراها كل من تحميله للصور بطيء او‬ ‫ان اتصاله يكون بدون صور‬ ‫861‬ .‫وهكذا استطعت معرفة كيفية إضافة الصور. WIDTH‬‬ ‫سوف اذكر لك مثال الن لتتعلم كيفية استخدام تلك الخصائص‬ ‫>003"=‪<"IMG SRC="image1.......بل‬ ‫سوف نستخدم الوسم الذي تعلمته منذ قليل مع خصائص جديدة وهذه الخصائص هي‬ ‫‪HEIGHT .

...‫وهذه الجملة هي: صورة للموسوعة العربية للكمبيوتر والنترنت‬ ‫لذلك كل ما علينا فعله هو كتابة التالي‬ ‫>‪"=IMG SRC="image1..jpg" BORDER‬‬ ‫961‬ .jpg" ALT‬صورة للموسوعة العربية للكمبيوتر والنترنت "<‬ ‫رابعا: إضافة إطار للصورة‬ ‫في بعض الحيان تحتاج إلى إضافة إطار للصور التي تضيفها للموقع..أو لكي يستدل الزائر على بريدك....ربما لكي تكون كوصلة‬ ‫تشعبية لصفحة أخرى.أو حتى لمجرد تحسين مظهر الصورة‬ ‫وهكذا سوف نتعلم معا خاصية جديدة تستعملها أيضا مع نفس الوسم السابق أل وهي‬ ‫‪BORDER‬‬ ‫وتستطيع تحديد سمك الطار حسب رغبتك‬ ‫وسوف أذكر لك مثال يوضح كلمي والقيم التي تضيفها هي قيم بالبيكسل‬ ‫>"4"=‪<IMG SRC="image1..

‬ ‫اتجاه الحركة:‬ ‫071‬ ..‬ ‫مرحبا بكم في هذا الدرس الرائع .‫اتمنى أن يكون الدرس أعجبك.....له رمز معين في الهتمل ال وهو:‬ ‫>‪.</marquee‬النص...‬ ‫ما رأيك بهذا المثال؟‬ ‫إذن هو عبارةعن نص متحرك.والنص المتحرك ..الذي به الكثير من المتعة لنكم سوف تتعلمون هنا كيفية كتابة‬ ‫النصوص المتحركة والتحكم بحركتها!!‬ ‫فللننطلق مباشرة الى موضوع الدرس..‬ ‫والن هيا بنا لدرس آخر..>‪<marquee‬‬ ‫الن بعد أن عرفت القاعدة الساسية لتحريك أي نص ، ننتقل الن الى معرفة خصائص هذا الرمز‬ ‫وذلك لكي نستطيع اضافة المزيد من التحكم به مثل اتجاهه او لونه وغير ذلك...

...‬ ‫>‪</marquee‬ل تهجروا القرآن>‪<marquee direction=right‬‬ ‫>‪</marquee‬خيركم من تعلم القرآن وعلمه>‪<marquee direction=left‬‬ ‫.alternate‬‬ ‫>‪</marquee‬وتزودوا فإن خير الزاد التقوى>‪<marquee behavior=scrol‬‬ ‫>‪</marquee‬الحرص على طاعة الوالدين>‪<marquee behavior=slide‬‬ ‫171‬ . left‬‬ ‫والن سوف لن أطيل الحديث كثيرا .‪<marquee behavior=#> #scrol...لني وضعت لك عدة أمثلة مع الرمز المستخدم‬ ‫لعملها.‫‪<marquee direction=#> #=right .slide.لذلك كل ما عليك هو رؤية الرمز والتدقيق فيه والمقارنة بينه وبين المثلة الخرى لكي‬ ‫تعرف الفرق بينها..

<marquee behavior=alternate>‫رحمة الحيوان تثمر لك المغفرة‬ ‫/<والرحمة‬marquee> ‫<عليك الوفاء بالعهد وإنجاز‬marquee loop=2 width=50% behavior=scroll> <marquee/>‫الوعد‬ />‫<ل تغضب ولك الجنة‬marquee loop=9 width=50% behavior=slide> <marquee ‫<ل تنسى شكر ال على‬marquee loop=1 width=50% behavior=alternate> <marquee/>‫نعمه‬ <marquee/>‫<أكثر من الدعاء في الرخاء‬marquee scrollamount=50> 172 .

....وهما:‬ ‫>‪<marquee bgcolor=lime‬ل تنسى مساعدة أخوانك وأخواتك>/‪<marquee‬‬ ‫وهنا أضفنا خاصية تعيين لون للخلفية وهذا المر تعلمناه سابقا في درس اضافة اللوان‬ ‫....‫والن بعد أن تعلمت تلك الرموز للتحكم في النصوص المتحرك ، أل تود إضافة المزيد من التنسيق‬ ‫في النص المتحركة ..‬ ‫فهنالك أمرين أود أن تتعلمهما هنا في الدرس ، ال وهما كيفية تنسيق خلفية للنص المتحرك مع‬ ‫التحكم في حجم الخلفية التي سوف تعرض فيها النص المتحرك............أمي هبة‬ ‫الرحمن>/‪<marquee‬‬ ‫واعذرني على إطالة الدرس.إذا كنت تود معرفة المزيد.‬ ‫>‪<marquee height=70 width=50% bgcolor=aaaeea‬أمي هي نبع حنان..اتمنى أن تقوم مباشرة بتطبيقه وذلك لكي تتعود التعامل‬ ‫مع‬ ‫رموز الهتمل الرائعة..سوف اكتب‬ ‫لك المثال التالي ولقد اخترت قياسات محددة وتستطيع وضع قياسات أخرى .إذا واجهت أي صعوبة فأنا بانتظار أي تساؤل منك.:((‬ ‫وها قد انتهينا من هذا الدرس الممتع....ونستطيع تطبيقه هنا وبالطبع تستطيع وضع أي لون تريده والمر السابق سوف يظهر لك‬ ‫بالشكل التالي:‬ ‫والن نود التحكم في ارتفاع وعرض الخلفية التي سوف نعرض فيها النص المتحرك .....فقط جرب دائما‬ ‫لتعرف الفرق.فلقد فضلت كتابة جميع المثلة المتعلقة برمز النصوص المتحركة‬ ‫في درس واحد دون تجزأة لكي يسهل عليك المقارنة بينها جميعا..‬ ‫371‬ ..

2. How did you re-open your workspace? 2. Review Review topics for this lesson: 1. modify your own HTML document that you started in the last lesson. Review Topics 1. What are the different levels of headings in HTML? What are the tags associated with these different levels? What steps did you use in placing headings in your HTML document? What happens if you forget a slash at the end of a header tag? 174 . Now create your own HTML text file that includes a <title> tag and a few introductory sentences. 3. You might want to create a different folder/directory for this file so you do not get it mixed up with all of the volcano pages you will create for this tutorial. Save the HTML file and reload it in your web browser. How did you display and view these changes in your web browser? Independent Practice As you did in the lesson.Independent Practice Think of a topic for your own web page. 4. Add a few more sentences and see if you can successfully reload the modified document into your web browser. What steps did you use to make changes in your HTML document? 3.

2) any number of attributes (and their associated values). XHTML is the successor to HTML 4. in a minimal case. version 4.01 elements. an HTML element indicates structure in an HTML document and a way of hierarchically arranging content. and a variety of other structures.0 supports the same elements as HTML 4 and in most cases valid XHTML 1.01).0 migrates HTML from its SGML underpinnings to an XML foundation. Informally. However. as specified (both allowable and required) according to the appropriate HTML DTD (for example. 3) some amount of content (characters and other elements)'. though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element. the discussion remains applicable (see HTML for a discussion of the minor differences in content between XHTML 1. 175 . XHTML 1. Accordingly. an HTML element is an SGML element that meets the requirements of one or more of the HTML Document Type Definitions (DTDs). Syntactically HTML elements are constructed with: 1) a start tag marking the beginning of an element.0 documents will be valid or nearly valid HTML 4 documents. Many HTML elements include attributes in their start tags. an empty element has no content and requires no end tag. Such elements may be ignored or displayed improperly on browsers not supporting them. defining desired behavior or indicating additional element properties.0 and HTML 4.0 elements remain identical to the HTML 4. paragraphs. XHTML 1. These elements have properties: both attributes and content.01 (unless noted otherwise).HTML element In computing. hypertext links.01.01 strict DTD). the HTML 4. There are a few elements that are not part of any official DTDs. the discussion of elements within this article focuses on the final SGML based HTML. and 4) an end tag. The end tag is optional for many elements. to the extent that XHTML 1. HTML elements are sometimes referred to as "tags" (an example of synecdoche). lists. yet are supported by some browsers and used by some web pages. Elements may represent headings. More specifically. embedded media.

Inline or text-level elements — such as hyperlinks.1 General phrase elements o 4. (See "The global structure of an HTML document") [edit] Nesting of elements 176 . quotations.2 Unofficial 8 HTML Comment 9 External links [edit] Block-level and inline elements HTML elements are classified as either block-level or inline (text-level).2 Computer code phrase elements o 4. They may contain only text or other inline elements. Block-level elements — such as headings. and are usually displayed one after another on a line within the block that contains them. or images — are "small" structures that represent or describe small pieces of text or data.2 Headings o 5.3 Special inline elements o 4.1 Official o 7.1 Nesting of elements 2 Document elements 3 Head elements 4 Inline o 4.Contents • • • • • • • • • 1 Block-level and inline elements o 1. paragraphs. They are usually displayed as independent "blocks" separated from other blocks by vertical space (margins). lists.6 Span element 5 Block o 5. citations. below).4 Forms 6 Frames 7 Presentational markup o 7. or tables — are "large" structures containing other blocks. or text (but see nesting rules. inline elements.1 General block elements o 5.4 Links and anchors o 4.3 Tables o 5.5 Images and objects o 4.

</p> Nesting may be arbitrarily deep. There are seven possible head elements including a meta element for extensible specification of metadata. 177 . paragraphs) may contain only inline elements. Every HTML page has these elements. However. forms. instead of an XML or another class document). which contains information about the page. [edit] Document elements Root elements provide the containers enclosing all other HTML elements.g. but most may contain either block-level or inline elements.) <head>…</head> Delimit the header section of the document. some utilities may not recognize or correctly handle the document if this is done. The head element basically contains the metadata for the document.Many HTML elements can be nested. <q lang="fr">L'état. <html>…</html> Delimit an HTML document (i. lists) must contain only block-level child elements. below. Incorrect Correct <p>Mary kissed <em>Jimmy</em></p> <p>Mary kissed <em>Jimmy</p></em> Some block-level elements (e. but the elements must be closed in the reverse order that they were opened for the code to remain valid (this pattern is known as Last in. which contains the displayed content of the page.g. The surrounding tags may be omitted. first out). for an exception where body is not used.e. and some (e. or contained within other HTML elements: <p>You <em>rock</em></p> Nesting can be more complex: <p>King Louis said. The HTML element takes the attributes lang for the primary language for the document (such as en for English) and a profile for a URI specifying metadata for the document (rarely used). The only contents allowed in an HTML element is one head element and one body element. <body>…</body> Delimit the body section of the document. c'est <em>moi</em>!</q> (<cite><a href="/wiki/Louis_XIV_of_France">Wikipedia</a></cite>). (See Frames.

Title is the only required head element. no script support (noscript). No other HTML elements are valid within the body element. </body> </html> [edit] Head elements <title>…</title> Define a document title.. An HTML head may contain any number of link elements. ordered list (ol). The other block elements are: paragraph (p). division (div). Search engines' web crawlers may pay particular attention to the words used in the title element. fieldset (fieldset). </head> <body> At least one of either a block element or a script element must occur. The 178 ..These root elements are arranged as follows: <html> <head> Any of the various head related elements arranged in any order and occurring any number of times except base and title which can only occur once each. It may become the default filename when saving the page. and address (address). The title element must not contain any nested tags (in other words it cannot contain any other elements). such as 'previous' and 'next' links. form (form). block quotation (blockquote). <base/> Specifies a base URL for all relative href and other links in the document. <link/> Specifies links to other documents. The ins and del elements are also permissible within the body element when used as block level elements. unordered list (ul).h6). but no contents. or alternate versions [1]. table (table). Web browsers usually display it in the title bar when the window is open. Only one title element is permitted in a document.(though any number may occur). Must appear before any element that refers to an external resource. arranged in any order to suit the meaning and also typically the presentation of the document. heading (h1. This element is required in every HTML and XHTML document. Different user agents may make use of the title in different ways. The base element has attributes. and in the task bar when it is minimized. definition list (dl). HTML permits only one base element for each document.

relevant to the document. <script>…</script> Used to add JavaScript or other scripts to the document. and associate this data with the current document. Deprecated in favor of stylesheets. page description. but no contents. usually: <style type="text/css">…</style> The CSS statements may be literally typed between the style tags and/or it may be in separate resources whose URLs are specified in @import directives such as: <style> @import "url". typeface and color of the document. To prevent possible ambiguity. meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from web server to client. expiry date. [3] <style>…</style> Specifies a style for the document. publication date. using the form: link <link rel="stylesheet" type="text/css" href="url" title="description of style" />[2] <basefont/> (deprecated) Specifies a base font size. </style>. In one form. Used together with font elements. [4] <object>…</object> Use for including generic objects within the head. Though rarely used as a head element. For example <meta name="foo" content="bar" scheme="DC" /> 179 . this could potentially be used to extract foreign data. a third optional scheme attribute may be supplied to specify a semantic framework that defines the meaning of the key and its value. A common use is to link to external stylesheets. meta elements specify key-value pairs. The script code may be literally typed between the script tags and/or it may be in a separate resource whose URL is specified in script's optional src attribute. a meta element specifies name and associated content attributes describing aspects of the HTML page.element has attributes. <meta/> Can be used to specify author. keywords and any other metadata not provided through the other head elements and attributes. Because of their generic nature. For example: <meta http-equiv="foo" content="bar" /> This example specifies that the page should be served with an HTTP header called 'foo' that has a value 'bar' In the general form.

<dfn>…</dfn> Defining first instance of a term 180 .. etc. with a value of 'bar'. for example) goes here.) for indented block presentation. <q>…</q> A quotation containing only inline elements (for quotations containing block level elements see blockquote below). [edit] General phrase elements <em>…</em> Emphasis (conventionally displayed in italics) <strong>…</strong> strong emphasis (conventionally displayed bold). An oral user agent may use different voices for emphasis. <cite>…</cite> A citation. Practical concerns due to browser non-compliance may force authors to find work-arounds. Reference for a quote or statement in the document. [edit] Inline Inline elements cannot be placed directly inside the body element for valid HTML. The cite attribute gives the source. An alternative.. and must be a fully qualified URI.</q>. requires some presentational markup to manually classify the element as a lengthy quotation. the author should not include quotation marks. Quote elements may be nested. For example: <q class='lengthy'>An inline quotation of significant length (say 25 words. quotation marks — including nested quotation marks — should be rendered through stylesheet properties or the browser's default stylesheet. the meta element identifies itself as containing the 'foo' element.In this example. By the specification. They must be wholly nested within block-level elements (see block elements below). using Cascading Stylesheets. see the W3C specification. the display of a lengthy inline quotation as an indented block should be handled through stylesheet presentation. Rather. For more specific information of the use of the meta element in HTML. from the DC or Dublin Core resource description framework. Note: within semantic HTML. One method is to use an XSLT to select quotation elements exceeding a certain length (in terms of characters or words.

<samp>…</samp> Sample output (from a program or script) <kbd>…</kbd> Keyboard . source code variables (<var>). Often used to markup replacement text for <del>'d text. Typically rendered as a strikethrough: Deleted text. user input (<kbd>).<abbr>…</abbr> Contains an abbreviation like HTML <acronym>…</acronym> Contains an acronym similar to the abbr element. Conventionally rendered in a monospace font: Code snippet.text to be entered by the user <var>…</var> Variable [edit] Special inline elements <sub>…</sub> <sup>…</sup> Create subscript or superscript text: Equivalent CSS: {vertical-align: sub} or {vertical-align: super} <del>…</del> Deleted text. Typically rendered underlined: Inserted text. Note. <code>…</code> A code snippet. [edit] Computer code phrase elements These elements are useful primarily for documenting computer code development and user interaction through differentation of source code (<code>). and terminal output (<samp>). <ins>…</ins> Inserted text. For 181 . However. both ins and del elements may be used as block elements: containing other block and inline elements. these elements must still remain wholly within their parent element to maintain a well-formed HTML document).

and a third. Alternatively (and sometimes concurrently). Any element can be made into an anchor by using the id attribute. though this is technically incorrect. additionally the attribute title may be set to a hover box text. some informative text about the link: In most graphical browsers. although Microsoft Internet Explorer renders it as a tooltip. which disappears when the cursor is moved away. the cursor typically changes into a hand with a stretched index finger and the additional information pops up. the title attribute is the tooltip text. the query string is appended to the current URL and the document is displayed with these keywords highlighted. acts as a link target (a "document fragment"). When submitted. when the cursor hovers over the link. used as a block element. and appended to the URL. the element becomes an anchor with the name attribute set. to indicate the deletion in the intervening paragraphs. <isindex>…</isindex> (deprecated) The :isindex element requires server side support for indexing documents. so using <a name="foo"> is not necessary. the required alt provides alternative text in case the image cannot be displayed.example deleting text from the middle of one paragraph across several other paragraph and ending in a final paragraph would need to use three separate del elements. 182 . Visually presents a one-line text input for keyword entry. <br> <br/> (XML compatible) Specifies a line-break. which preceded by a number sign '#'. Some browsers render alt text the same way. usually similar to a Tooltip. not in a regular window. but in a special "hover box". Two del elements would be required as inline element to indicate the deletion of text in the first and last paragraphs. See also:link [edit] Images and objects <img/> Includes an image with the src attribute. typically causing a Web browser to scroll directly to that point of the page. Generally if the server supports this feature it will add the iisindex elements to documents without author intervention. [edit] Links and anchors <a>…</a> <a href="URL" title="additional information">link text</a> Creates an element that becomes a hyperlink with the href attribute set to a URL. Alt is intended as alternative text.

This may be in any MIME-type the Web browser understands. <object> is now preferred. a Java applet. if the embed cannot be rendered. <embed>…</embed> (proprietary) Calls a plug-in handler for the type specified by the type attribute. background colour. Using attributes such as name and value. <object> is the W3C standard method. <applet>…</applet> (deprecated) Includes a Java applet in the page. a sound file. Deprecated. but most are inline and can be included in the normal flow of text. <area> <area/> (XML compatible) <object>…</object> Specifies an area in the map. depending what has been exposed in this way by the object's developers. font. This is a proprietary Netscape extension to HTML. Some are block-level. Includes an object in the page of the type specified by the type attribute. etc. [edit] General block elements 183 . sound files. <noembed>…</noembed> (proprietary) Specifies alternative content. Used for embedding Flash files. [edit] Block Many HTML elements are designed for altering the semantic structure or meaning of a document. <param>…</param> or <param/> This element may only appear inside an object element. which can then be referenced from CSS or DOM call. for example so as to apply an id or class attribute. etc. Examples include width. such as an embedded page. This may be used to identify a part of the HTML page. [edit] Span element <span>…</span> Creates an inline logical division. Like most HTML elements. each <param/> sets a parameter for the object. code to be handled by a plug-in such as Flash. etc. span also supports inline CSS in its optional style attribute). height.<map>…</map> Specifies a client-side image map.

Specifies a column group in a table. Some programs use them to generate outlines and tables of contents. 184 . perhaps the most common block level element. [edit] Tables <table>…</table> Creates a table <tr>…</tr> <th>…</th> Creates a row in the table. Most web browsers will show <h1> as large text in a different font. Specifies attributes for an entire column in a table. <h2> for the next level down (sub-section). The cite attribute may give the source. An aural user agent may use a louder voice for these items. and <h6> as small bold-faced text. <p>…</p> <blockquote>…</blockquote> Contains quoted material when the quotation itself includes block level elements (for instance. It is an element meant to contain quotations that are themselves block level. [edit] Headings <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> Section headings at different levels. contents are conventionally displayed bold and centered. Use <h1> for the highest-level heading (the major sections). quoting several paragraphs). In other words. In HTML strict DTDs inline elements are prohibited from blockquote elements. <h3> for a level below that. The lowest level heading is <h6>. The heading elements are not intended merely for creating large or bold text: they describe something about the document's structure and organization. The blockquote element is often misunderstood.Creates a paragraph. For quotations not containing block level elements see the quote (q) element. it contains a complete paragraph or many paragraphs. The closing tag is not required in HTML. <td>…</td> <colgroup>…</colgroup> <col/> <caption>…</caption> Creates a table data cell within a row. and must be a fully qualified Uniform Resource Identifier. Creates a table header cell within a row. Horizontal rules can also be handled through the CSS properties. and so on. but this can be overridden with CSS. <hr/> Inserts a horizontal rule.

these controls provide support for rich user interfaces. Combined with a first-class javascript engine. <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot> Specifies the header part of a table. <input type="button"/> Creates a general-purpose button.Specifies a caption for the entire table. from which the user can select a single option. this section may be repeated by the user agent if the table is split across pages (in printing or other paged media) [edit] Forms These elements can be combined into a form or used separately as user-interface controls. But it's advised to use <button> if possible (i. Specifies the main part of a table. Main article: HTML form HTML specifies the elements that make up a form. <form action="url">…</form> Creates a form. <input type="radio"/> Creates a radio button. May be rendered as a dropdown menu. <option value="x"/> Creates a menu item in a menu list. Can be checked or unchecked. <select name="xyz">…</select> Create a menu list. the user will only be able to select one of them from this group. if the client supports it) which provides richer possibilities. and the method by which it will be submitted. Specifies the footer part of a table. If multiple radio buttons are given the same name. some form of script either server-side or client side must be used to process the user's input once it is submitted. Like <thead>. <input type="checkbox"/> Creates a checkbox. 185 . However.e. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media).

Text in between the tags appears in the text area when the page is loaded. The size attribute specifies the default width of the input in character-widths. The only difference is that inputted text is masked: usually every character is shown as an asterisk or a dot. <frameset>…</frameset> Delimit the frameset. It should be noted. <label for="name">…</label> Creates a label for a form input (e. <input type="text"/> Creates a one-line text input. <textarea rows="8">…</textarea> Create a multiple-line text area. So an underlying secure transport layer like HTTPS is needed if confidentiality is a matter. The frames layout is given by comma separated lists in the rows and cols attributes. the size of which is specified by cols and rows attributes. [edit] Frames An HTML document may contain a header and a body or a header and a frameset. The image URL may be specified with the src tag. Maxlength sets the maximum number of characters the user can enter (which may be greater than size). radio button).<input type="submit"/> Creates a submit button. For frames the Frames DTD must be used.g. but not both. Clicking on the label toggles the control. <input type="image"/> Creates a button using an image. <input type="reset"/> Creates a reset button for resetting the form to default values. <input type="password"/> Creates a variation of one-line text input. <frame>…</frame> 186 . however. that the value is submitted to the server as clear text.

Delimit a single frame. A similar effect can also be achieved using the object element.] [size=size. use CSS equivalents if possible): 187 . <center>…</center> (deprecated) Creates a block-level centered division. See also Framing (World Wide Web).0. The equivalent CSS should be used instead. [edit] Presentational markup [edit] Official The use of presentational markup is discouraged.1. typeface with the face attribute. and absolute or relative size with the size attribute. which embeds another HTML document. Equivalent CSS: {font-weight: bold} Use italic type.] [face=face]>…</font> Can specify the font color with the color attribute. Equivalent CSS: {text-decoration: underline} <font>…</font> (deprecated) <font [color=color. or region. These approaches differ in some ways (World Wide Web Consortium [5]). <small>…</small> Creates smaller text.01 and XHTML1. Deprecated elements are only valid in the Transitional and Frameset variants of HTML 4. Equivalent CSS: {font-style: italic} <big>…</big> Creates bigger text. They are invalid in the Strict variants of HTML 4. Equivalent CSS: {font-family: monospace} <u>…</u> (deprecated) Use an underlined font. A different document linked with the src attribute appears inside.01. <iframe>…</iframe> An inline frame inside a normal HTML <body>. <b>…</b> and <i>…</i> are invalid in the current draft of XHTML2. Equivalent CSS: {font-size: larger}.0. Deprecated in favor of <div> or another element with centering defined using CSS. within the frameset. May also center-align all text.0 and XHTML 1. Equivalent CSS: {font-size: smaller} <s>…</s> (deprecated) <strike>…</strike> (deprecated) Create strike-through text: Strikethrough Equivalent CSS: {text-decoration: line-through} <tt>…</tt> Use a typewriter-like (fixed-width) font. XHTML1. Examples (all the examples are deprecated. <b>…</b> <i>…</i> Use boldface type. <noframes>…</noframes> Contains a normal <body> element with child elements that will appear in web browsers that don't support frames.

unless otherwise specified in the <body> or other tags. <nobr>…</nobr> (unofficial) Causes text to not return at end of line. For compatibility with some pre-1995 browsers. so it may appear anywhere in the document. Equivalent CSS for font attributes: <font size="N"> corresponds to {font-size: Yunits} (the HTML specification does not define the relationship between size N and unit-size Y. 4. <font color="#1f4099">text</font> creates text with hexadecimal color #1f4099. use scripting instead. <font size="+1">text</font> creates text with size 1 bigger than the standard. Can be done with CSS: {white-space: nowrap} [edit] HTML Comment <!--…--> Encloses a comment. 2.1. Can be done with CSS where supported: {text- Creates scrolling text. <font size="-1">text</font> is opposite. A client should render none of its enclosed contents. The closing ">" is required. This is an SGML tag and not limited to HTML.. 5. See template:fontcolor. 3. <font size="4">text</font> creates text with size 4. Sizes are from 1 to 7. but this is not necessary and may in fact cause undesired effects. nor does it define a unit). The standard size is 3. [edit] External links 188 . <font color="green">text</font> creates green text. <blink>…</blink> decoration: blink} <marquee>…</marquee> (unofficial) (unofficial) Causes text to blink. SGML comments are sometimes used inside <style> or <script> tags. • <font color="red"> corresponds to {color: red} • <font face="Courier"> corresponds to {font-family: • Courier} [edit] Unofficial These are unofficial presentational elements that may not be supported in all browsers. <font face="Courier">text</font> makes text with Courier font. even before the DTD or after </html>. No equivalent with CSS.

org/wiki/HTML_element" Categories: World Wide Web | HTML Views • • • • Personal tools • Article Discussion Edit this page History Sign in / create account Navigation • • • • • • • • • Search þÿ Go Search Main page Community portal Featured content Current events Recent changes Random article Help Contact Wikipedia Donations Toolbox • • • • • • • What links here Related changes Upload file Special pages Printable version Permanent link Cite this article In other languages 189 .• Complete lists of elements and attributes for HTML 4.wikipedia.01 Retrieved from "http://en.

) Wikipedia® is a registered trademark of the Wikimedia Foundation. Inc. All text is available under the terms of the GNU Free Documentation License. • Privacy policy • About Wikipedia • Disclaimers • • 190 . (See Copyrights for details.• • • • • • • Interlingua Italiano Lietuvių Nederlands Português Русский ไทย This page was last modified 23:42. 17 December 2006.

8. ISBN 0-201-17805-2. Instead.01 as published in HTML 4 Errata.01 Recommendations each contain a hyperlink labeled "latest version of HTML" that. ^ Development of HTML 4.2 10. ^ http://www. 4. It endorses both XHTML and HTML as current technologies. 3. Raggett on HTML 4. returns a copy of the latest edition of XHTML 1. – This search indicates that no publications exist on the W3C web site stating that HTML has been advanced into the W3C's Rescinded Recommendation publication track.html#h-4. ^ Raggett. 'replaced'.2. Retrieved on 2006-09-14. ^ http://www. 5.01 and XHTML 1. and 2. ^ http://www. as "Previous Versions of HTML". the HTML 4.useit.0 occurred in parallel throughout 1998 and 1999. Retrieved on 2006-0914. World Wide Web Consortium.01. ^ http://www.0. 3. as of 2006.fi/~jkorpela/qattr.0 and 4. Retrieved on 2006-09-14. Dave (1998).0. – This is the W3C's primary index of all its current publications." – HTML Working Group Roadmap. – This is the W3C's primary index of its current publications and activity relating to HTML and XHTML. In early 2000.html 191 . further work is focusing on a reformulation of HTML in XML. namely XHTML.org/TR/html401/intro/sgmltut. HTML working group charter (2000–2002). but not 4. the HTML Working Group's charter shifted to concentrate on XHTML. Retrieved on 2006-09-14.w3. [1][2][3][4][5] XHTML is not considered part of nor a mentioned as superseding the updates to HTML 4.01 and XHTML 1.w3. There is likewise an absence. ^ W3C Technical Reports and Publications (index of all current W3C publications).2. It also explicitly refers to HTML 4.org HTML "Rescinded Recommendation"'. World Wide Web Consortium. It endorses both XHTML and HTML as current technologies.0. World Wide Web Consortium. or 'deprecated'.html#h-3. chap.cs.[edit] References 1. ^ The "successor" reference is only in informal prose on the HTML Home Page. after HTML 4. ^ Google web search using terms 'site:w3. 6. which are the terms the organization usually uses to discourage the use of one of its publications. Retrieved on 2006-09-14. World Wide Web Consortium. HTML working group charter (2002– 2004). of references or designation of any edition of HTML as 'obsolete'. World Wide Web Consortium. 7.com/alertbox/20050103. Retrieved on 2006-09-14. Retrieved on 2006-09-14. cited below.html 9. 2. Additionally. in the W3C's XHTML-related Recommendations.tut.org/TR/xhtml1/diffs. Addison-Wesley. 2: A history of HTML. ^ "W3C has no intention to extend HTML 4 as such. World Wide Web Consortium.4 11. ^ HyperText Markup Language (HTML) Home Page. 'superseded'.0 were published.

192 .

Sign up to vote on this title
UsefulNot useful