Introduction

The Internet What is the Internet? The Internet is a communications network linking computers worldwide. It forms the nervous system of the World Wide Web (WWW) At the center of the Internet is a high speed “backbone” which carries data around the world. Telephone company landlines, ISDN lines, and other high-speed data connections link literally millions of homes and businesses to this backbone itself. You may also hear gateway computers referred to as Hosts, or servers. Your computer is referred to as a Client. However, the average computer user cannot link directly to the backbone. Instead, we connect to the Internet using a computer dedicated solely to maintaining an Internet connection, or Gateway. You can find a detailed history of the Internet from the sites http://www.isoc.org/internet-history/ How do I Connect to the Internet? There are a number of different ways to connect to a Internet:  Establish your own: Set up your own computer and domain name with a registrar authorised by Internic (http://www.internic.net/). Internic is the organization that controls registration of Internet domain names. Examples for registrars are Network Solutions (http://www.networksolutions.com) and Reigster.com (http://www.register.com)  Connect through an on-line service: Most of the large on-line services, such as CompuServe, America Online, and MSN have their own gateways, which you can use to connect to the Internet. This is a relatively simple, user-friendly way to access the Internet. However, the large volume of users on these services can slow down access. Connect through an Internet Service Provider: An Internet Service Provider (ISP) provides you with direct dial-up access to their gateway. This allows you the closest thing to direct Internet access without owning your own gateway. This can offer you the most reliable Internet connection, but you must be careful that you select a quality ISP. Unlike countries like India, UK, USA, there is only one ISP in Oman - Omantel (http://www.omantel.net.om) How do I Get Information from the Internet? There are several different types of services available to you on the Internet:  Communication Services: These services include e-mail and Tel-net. This is the simplest information access method: You connect to the Internet, and send and receive files directly from other computers. Information Search Services: These services allow you to search databases of information, plus learn of other Internet services which may have the information you need. These services include Gopher, WAIS and Archie File Transfer Protocol (FTP): This service allows you to transfer files from one location on the Internet to another. The World Wide Web (WWW): The World Wide Web is a graphical interface to information accessible on the Internet. You can access the WWW using any standard Web Browser The World Wide Web What is the WWW? The WWW is not actually a single entity. Rather, it is a client-server network that includes web servers, which are designed to deliver files that are written in HyperText Markup Language, or HTML, to your computer, which is the client. These computers use the Internet to connect to each other. How do I connect to the WWW? If you have a connection to the Internet, you can access the WWW using any web browser, such as Internet Explorer or Netscape. Web browsers interpret the HTML files stored on the web servers and display the result on your computer screen. All you need to know is the address of the HTML files you wish to view.  How do I find something on the WWW? To locate an HTML file on the WWW, you need to know its Uniform Resource Locator (URL). The URL is the ‘user-friendly’ representation of a file’s address on the Internet. So, a website might have an IP address of 199.222.333 — this is not easy to remember. However, the URL for that address might be http://www.microsoft.com To download an HTML file for which you know the URL, do the following: 1.    Start your web browser. 2.   Type the URL in the Location, Go To or Address field of the browser window, and press Enter. The name of the field may differ from browser to browser. However, it is always at the top of the web browser window. If You Do Not Have the URL If you do not know the URL for the file you want, you can use any one of the many search engines on the WWW. These are the URLs for some of the more popular search engines: http://www.yahoo.com Is the easiest search engine to use, and has a tremendous amount of content. http://www.lycos.com Probably has the best keyword search capability on the WWW. http://infoseek.com The URL Naming Convention The URL concept is a naming system used to guarantee that all files stored on the Internet use a common set of tags to show their location. URLs contain location data for a particular file: service://host/path/file.ext Service Indicates what Internet protocol you will use to access the document. Common services include the following:   Service Description ftp:// Download a file using FTP http:// Download an HTML file using HyperText Transfer Protocol telnet:// Access a remote computer using telnet. Host Indicates the machine from which you are downloading the file. Your host could be www.microsoft.com. Path Indicates where the file is located on the host. So, if you are downloading a file located in the “windows” directory on www.microsoft.com, then you would use the URL www.microsoft.com/windows/ file.ext Is the name of the file you are downloading. So, if you were downloading an HTML file called “page1.html”, located in the docs directory on www.mysite.com you would use the following URL: http://www.mysite.com/docs/page1.html How does it work? Exactly how your computer finds, retrieves and sends information to the WWW is outside the scope of this handout. For the purposes of this handout, however, one can break the process into five steps: 1. You enter the URL for a particular file into your web browser, or click on a link that connects to the file 2. The browser sends a request to the WWW for that file. 3. Your request is routed to the correct web server. 4. The web server delivers the file to the web browser on your PC. 5. Your web browser interprets the HTML coding in the file and displays the result on your screen. How your web browser actually finds the specific file requested in the millions of files on the WWW could be an entire book of its own, and is not covered here. What is a Web Site? A web site is simply a collection of files, linked together and stored on a web server. These files are text files, coded in the HTML language. Files are stored on a web server just as they are stored on a PC. They are saved in a directory or set of directories. There are many different terms used to define different components of a web site. Sometimes the entire web site is referred to as a web page, or home page. To avoid adding confusion to this subject, we will use the following terms throughout this Website: Web Site The completed collection of files installed on a web server. Page A single file or document in a web site. Home Page: The first page a web browser sees when it connects to a site. Hypertext Markup Language Linear Media Linear media describes with a defined beginning and a linear progression to the end. Forms of linear media such as films, audio and videotape, as well as most books are organised with this expectations. The World Wide Web (WWW), however, is organised differently. Hypermedia Hypermedia is about choice. Users simply select what interests them. A good example is an audio CD where you can choice song 4 and listen to it almost immediately. Contrast this with an audiotape where you would have to scan through from your current location on the tape to the beginning of the song. When this concept is applied to text, you will get hypertext, where by clicking on a link or hotspot (hyper link) you are transported to a new location within the same page or to a new page altogether.. When you interlink a large number of pages of text on different computers all over world, you get a spider web-like system of all links and pages. This is know as World Wide Web – system whereby pages stored on many different web servers, connected to the internet, are linked together. What is Hypertext Markup Language? The WWW connects a tremendous number and variety of computers: Macintoshes, PCs, UNIX terminals and other computers all share information on the Web. All of the users of these computers want to see graphically rich content, including photographs, formatted text, and tables. Somehow, all of these computers need to have a common language — a single piece of information should look nearly identical on all of the different platforms, even if it includes graphics and tables. HyperText Markup Language (HTML) is the language of the WWW. It is a common language that all web browsers are designed to interpret the same way. An HTML file displayed in Netscape on a Macintosh will almost match the look of an HTML file displayed in Internet Explorer on a PC. HTML allows the user to display formatted text and graphics on a wide variety of platforms using a single file. It also allows the user to link different files together using Hypertext links. A hypertext link is an area of text or graphics that, when clicked by a mouse, takes you to another area of text or graphics. The next few sections of this handout will discuss how you can write HTML.

Hypertext Markup Language (HTML)

Basic HTML Coding At the core of HTML are Tags and Elements. A tag is a set of text characters you use to format your document. For example, the <h1> tag will create a level one heading: <h1>Welcome to CAS</h1> will generate Welcome to the CAS when you view that phrase in a browser. Click here to view in the browser The text, and the beginning and ending tags, are known together as an “Element”. So, in the example above, <h1>Welcome to CAS</h1> is an element — in fact, it is an ‘h1 element’. HTML Attributes Many HTML elements can also have Attributes assigned to them. An attribute is an additional feature you can use to configure the element. For example, the <h1> tag can also have the attribute “align” assigned to it, so that <h1 align=”center”> will generate a centered level one heading. Attributes are optional, depending on how you want to modify the tag — an <h1> tag will work just as well as an <h1 align=”center”> tag. It just will be centered on the page.  This element… Element <h1 align=”center”>Welcome to CAS</h1> Attribute Tag Produces this text in the browser: Welcome to CAS Click here to View in the browser Closing An Element You probably noticed that for every <h1> tag in the examples above, there was a corresponding </h1> tag. Most HTML tags require the </tag> at the end of the element — that is how each web browser knows to look for a new element, and apply new formatting to that new element. So, if you use the <h1> tag to create a level one heading, then you have to add a </h1> at the end of the heading. You do not have to include the attributes in the closing tag. This is true of almost all HTML tags, with a few exceptions that we will discuss later. Basic HTML Structure HTML is a hierarchical language HTML is a hierarchical language. That means you place elements in location relative to other elements. Their location relative to each other determines their meaning and how text is displayed. Nesting HTML Elements You can place one HTML element inside the other. For example: <h1 align=”center”><i>This is an italicized level one heading aligned at the centre</i></h1> Click here to view in the browser However, you cannot overlap HTML elements: <h1 align=”center”><i>This is a mistake</h1></i> Your First HTML Document Now that you have seen the individual elements, you need to see it all together. Here is what you need to do to create and view your first HTML document: 1.  Start your text editor (notepad) 2.  Enter the text as shown below: <html> <head> <title>This is your sample HTML document</title> </head> <body> <h1 align="center"><i>This is a centered, italicized heading.</i></h1> Note how everything that is enclosed in the <b>body</b> element of this page is displayed as a document in the web browser. The text enclosed in the <b>title</b> element is displayed in the title bar of the web browser, instead, because the title element is enclosed within the <b>head</ b> element. . . . </body> </html> 3.  The .htm or .html file extension tells your computer that this file is readable by a WWW browser. 4.  Save the text in text-only format (also called ASCII or raw text on some UNIX and Windows-based computers) with the name first. html. 5.  Start your web browser. Open the file first.html using your browser’s “File - Open” option. This is your first web page! Good Job. Click here to view first.html in the browser. As you look at this sample HTML document, pay particular attention to the following: The structure of the elements Where text enclosed by the different elements is displayed in the web browser For now, do not worry about the actual tags and element names. In the next section, you will learn about basic HTML tags and how to use them. Now that you have a basic understanding of how tags and elements interact, we are going to take a close look at some of the different types of tags available. Types of Tags Within each element you will use different tags to create the effects you desire and insure your message is received. The different types of tags can be broken into four general categories: i. Structure These tags define the document and its different sections. ii. Descriptive These tags give a title to your document or provide other information that can be used by a browser or server. iii. Formatting Bold face, carriage returns, indents and anything related to layout. iv. Special These would allow for sounds to be played or animations to be run by browsers that support such features. Structure Tags Structure tags define and distinguish the different elements of an HTML document. There are four basic structure tags: Tag Name Description <HTML>...</HTML> HTML: The opening and closing tag of any HTML document. It allows the web browser to identify file contents as an HTML document <HEAD>...</HEAD> Header: The information you include within this tag will not appear in the document proper, but elsewhere — such as in the menu bar. The <head> tag follows the opening <HTML> tag and closes before the opening <BODY> tag. <BODY>...</BODY> Body: Encloses the main body of your document and, most likely, the majority of your work. <BODY> Attributes ALINK BACKGROUND   BGCOLOR BGPROPERTIES=FIXED LEFTMARGIN LINK TEXT TOPMARGIN VLINK   Specifies color of activated links Specifies an image to be used as a tiled background or wallpaper. Specifies the background color of the document “Fixes” the background image so it does not scroll. Specifies the left margin for the document Specifies the color of links in the document Specifies the color for text in the document. Specifies the top margin of the document. Specifies the color of links that have been followed. <!--...--.> Comment: This tag allows you to include messages, or “comments,” within your HTML document, without displaying those messages in the web browser. Your viewers will Not see these messages unless they decide to view your HTML code. The comment tag is commonly used to: Make notes about incomplete pages. Earmark areas that need improvement, for yourself or for someone else. Identify yourself or others, date the document, or insert other in-formation about the document it-self. Descriptive Tags Descriptive tags allow you to include information about your web page, such as a title, or information for use by search engines when they index your page. Descriptive tags must be inside the <head> element:   Tag Name Description <TITLE>...</TITLE> Title: This tag displays your document title in the menu bar of the web browser. <META>...</META> Meta: Search engines can use the meta tag to find and index web pages. You can also use the meta tag to describe the software used to generate the page, or to provide special information for custom applications. <Meta> Attributes Name     Content   Name is the attribute, which tells any program reading the web page the purpose of that <meta> tag. Name may include “description”, “author,” or many other descriptive terms.  Content follows the name attribute, and provides the text assigned to that <meta> tag.   Example:  <head> <title>My First Web Page</title> </head> This example would display “My First Web Page” in the menu bar of the web browser. Click here to view in the browser

WYSIWYG Authoring Tools

Web Development Fundamentals