AGI: Dynamic Learning Dreamweaver CS3

108

Dynamic Learning Dreamweaver CS3
Page 6

How web sites work

X-Ray Magazine v5n2: It's time for a move: Quark Interactive Designer

QuarkXPress 7.31 includes many web tools. To learn more, click here to read online X-Ray Magazine v5n2: It's Time for a Move: Quark Interactive Designer, or click here to read the PDF Version.

Before embarking on the task of building web pages (and in turn, a web site), it's a good idea to know the basics of how web sites work, how your users view them, and what you need to know to make sure your web site looks and works its best.

A simple flow chart

What happens when you type in a web site address? Most people don't even think about it; they just type in a URL, and a web site appears in a flash. They likely don't realize how many things are going on behind the scenes to make sure that pages gets delivered to their computers so that they can do their shopping, check their email, or research a project.

AGI: Dynamic Learning Dreamweaver CS3 Figure 23

When you type in a URL or IP address, you are connecting to a remote computer (referred to as a server) and downloading the documents, images, and resources necessary to reconstruct the pages you will view at that site. Web pages aren't delivered as a finished product; your web browser (Internet Explorer, Firefox, Safari, etc.) is responsible for reconstructing and formatting the pages based on the HTML code included in the pages. HTML (Hypertext Markup Language) is a simple, tag-based language that instructs your browser how and where to insert and format pictures, text, and media files. Web pages are written in HTML, and Dreamweaver builds HTML for you behind the scenes as you construct your page in the Design view.

An Internet service provider (ISP) enables you to connect to the Internet. Some well-known ISPs include America Online and Earthlink. You view web pages over an Internet connection using a browser, such as Internet Explorer, Firefox, or Safari. A browser can decipher and display web pages and their content, including images, text, and video.

Domain names and IP addresses

When you type in a web site address, you usually enter the web site's domain name (e.g., Ebay.com). The web site owner purchased this domain name and uses it to mask an IP address, which is a numerical address used to locate and dial up the pages and files associated with a specific web site.

So how does the Web know what domains match what IP address (and in turn, which web sites)? It uses a DNS (Domain Name Service) server, which makes connections between domain names and IP addresses.

Servers and web hosts

QuarkXPress 6.5 and 7 have a number of built-in web tools. To learn more, click here to read PDF articles X-Ray Magazine v3n2: Make Web-ready HTML Pages, X-Ray Magazine v3n4: Web Forms Part One, or X-Ray Magazine v3n5: Web Forms Part Two.

A DNS server is responsible for matching a domain name with its companion IP address. Think of the DNS server as the operator at the phone company that connects calls through a massive switchboard. DNS servers are typically maintained by either the web host or the registrar from which the domain was purchased. Once the match is made, the request from your user is routed to the appropriate server and folder where your web site resides. When the request reaches the correct account, the server directs it to the first page of the web site, which is typically named index.html, default.html, or whatever the server is set up to recognize as a default starting page.

A server is a machine very much like your desktop PC, but it's capable of handling traffic from thousands of users (often at the same time!), and it maintains a constant connection to the Internet so that your web site is available 24 hours a day. Servers are typically maintained by web hosts, companies that charge a fee to host and serve your web site to the public. A single server can sometimes host hundreds of web sites. Web hosting services are available from a variety of providers, including well-known Internet service companies, such as Yahoo!, and large, dedicated hosting companies, such as GoDaddy. It is also common for a large company to maintain its own servers and web sites on its premises.

The role of web browsers

A web browser is an application that downloads and displays HTML pages. Every time you request a page by clicking a link or typing in a web site address, you are requesting an HTML page and any files it includes. The browser's job is to reconstruct and display that page based on the instructions in the HTML code, which guides the layout and formatting of the text, images, and other assets used in the page. The HTML code works like a set of assembly instructions for the browser to use.

An introduction to HTML

HTML is what makes the Web work; web pages are built using HTML code, which in turn is read and used by your web browser to lay out and format text, images, and video on your page. As you design and lay out web pages in Design view, Dreamweaver writes the code behind the scenes necessary to display and format your page in a web browser.

Contrary to what you may think, HTML is not a programming language, but rather a simple text-based markup language. HTML is not proprietary to Dreamweaver-you can create and edit HTML in any text editor, even simple applications such as Windows Notepad and Mac OS X's TextEdit. Dreamweaver's job is to give you a visual way to create web pages without having to code by hand. If you like to work with code, however, Dreamweaver's Code view, discussed earlier, is a fully featured text editor with color-coding and formatting tools that make it far easier to write and read HTML and other languages.

Tag structure and attributes

HTML uses tags, or bracketed keywords, that you can use to place or format content. Many tags require a closing tag, which is the keyword preceded by a forward slash (/).

To download the resource files for this lesson, click here.

Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select BasicHTML.html and press Open.

Select the Split button in the Document toolbar to see the layout as well as the code that makes up the page.

Take a look at line 9 (indicated at the left edge of the Code panel). The text My Bold Title is inside a Bold tag, which is simply the letter b contained within angled brackets. Any words or characters inside these tags will be formatted in bold, and will appear as shown in the Design view.

AGI: Dynamic Learning Dreamweaver CS3 Figure 24

Tags can also accept attributes that specify additional information for how the tag should display the content. Attributes are always placed inside the opening tag, and very often they can take a number of different values, such as a size, a color, or a direction in which to align something. Take a look at the line that reads This text will appear inside of its own paragraph. This line is enclosed in a p (paragraph) tag, which separates it from the other text by a line above and below. You can add attributes to this to align the text in whichever direction you want.

Highlight the entire line that reads This text will appear inside of its own paragraph at the bottom of the Design view.

Locate the paragraph align buttons in the Property inspector. Click the one that centers text.

The text is now centered. Take a look at the Code view, and you'll see that the align attribute has been added to the opening <p> tag, and has been set to a value of center.