The Anatomy of a Web Page

The Anatomy of a Web Page

The web pages we just showed you are pretty simple. The pages you're going to build will be far more complex. But all web pages, no matter how simple or how complex, are built largely the same way, and made up of the same components . In this section, we'll take a look at those common componentsthe anatomy of a web page. We're going to look at both the HTML code that builds the page, as well as what the page looks like in the browser. We'll take the page we've just built and use that as a starting point, but add a few extras to the page as well.

How the Page Appears in a Browser

We'll start off with the anatomy of a web page, as it appears in a browser.

NOTE

Not all browsers display the same HTML page exactly the same. Internet Explorer might display a page slightly differently than Netscape Navigator or another browser. So when building a web page, it's a good idea to view it in both Internet Explorer and Netscape Navigator. But because the vast majority of people use Internet Explorer, you should in general design your pages for that browser.


As you can see here, we've added a few new elements to the page that we've already built. The callouts on the figure detail different parts of the page. Note that this is a very basic web page, with only the very simplest elements.

Here are more details about basic elements of the page:

  • Title This is what appears in the browser's title bar. Don't confuse this with the main heading on a web page (in this instance, "Welcome to Preston's Picks"). On a web page, the title is only what appears in the title bar, and is not a heading on the page itself.

  • Headings These divide up the web page. You can have up to six levels of headings on a web page. The two largest are shown here.

  • Text You can format text on a web page in many different ways, such as using boldface, italic, different fonts, and different colors.

  • Background You can change the background of your web page in several ways. The simplest is to pick a particular color . You can use graphics as backgrounds, as well.

  • Links These are the heart of the Web. Links can be not just to other web pages, but can perform other functions, as well. For example, this page includes a link that, when clicked, launches the browser's email program and addresses an email.

  • Horizontal line A simple way of dividing a web page is by adding a horizontal line, also known as a horizontal rule.

  • Graphics Graphics are great for web pages, but you have to be careful to keep them as small as possible so that it doesn't take a long time to load the page. Commonly, web graphics are in .JPG or .GIF formats. Web pages also can have multimedia content, such as video or music.

A closer look: Here are the basic parts of any web page.

How the Page Appears as HTML Code

Now that you see the basic components of a web page, it's time to take a look behind the scenes and examine the HTML code that produced it. Don't worry if you don't understand most of what you seewe're just going to look at the basic components of an HTML page.

Here's the code that produced that page, along with details about the basic components of the HTML file:

 <HTML> <HEAD> <META NAME="description" CONTENT="Preston Gralla picks the best of books, movies and CDs"> <META NAME="AUTHOR" CONTENT="Preston Gralla"> <TITLE> The Pick of the Best </TITLE> </HEAD> <BODY> <BODY BGCOLOR="CCCCCC"> <! -- Remember to include new editions of my books -- > <H1> Welcome to Preston's Picks</H1> <P> If you're looking to find out about the best books, movies and CDs, you've come to the right place. Welcome to <B>Preston's Picks</B>, your guide to everything good in the world. </P> <H2>New Books</H2> <P><IMG SRC="criticup.gif"><A HREF="http://www.fsbassociates.com/ fsg/corrections.htm">The Corrections</A> is a scathing and hilarious look at life in contemporary America.</P> <P><IMG SRC="criticup.gif"><A HREF="http://www.amazon.com/ exec/obidos/tg/detail/-/0789729733/qid=1096580232/sr=8-1/ ref=sr_8_xs_ap_i1_xgl14/103-7003297-3323050?v=glance&s=books&n=507846"> How the Internet Works</A>, the newest book by yours truly, is a visual guide to how wireless technologies work.</P> <HR> <P>Want to let me know what you think of my picks? <A HREF="mailto:preston@gralla.com">Click here</A> to send me email. </BODY> </HTML> 

  • Header This portion of the HTML document includes information that describes the web page, such as its title. A great deal of information can go in the header, not just the basic information you see here. For example, it can include JavaScript codea technique for adding interactivity to web pagesas well as linking the page to style sheets, which can give many pages on a single website the same basic style elements, such as colors and fonts.

  • Meta tags These are tags in the header that aren't displayed, but instead are used as a way to let search sites and indexing sites know about what kind of content is on the web page. The tags typically contain keywords and descriptions.

  • Body This portion of an HTML document contains the actual content itself, including text, graphics, and multimedia, as well as information about the background, colors, text, and similar information.

  • Background You can specify that the background of a page be a specific color. As you'll see later on in the book, there are many different ways to do this, including typing in the name of a specific color, or using codes, like you see here. In this instance, the background color is gray. You also can specify that the background be a picture.

  • Comments A lot of time, when you're putting together an HTML page, you'll want to put in comments to yourself or anyone else who might look at the HTML code. You might want to put in a comment that reminds you why you coded a page a certain way, or possibly a reminder to yourself to update the comment. When comments are put on an HTML document, they'll be ignored by the browser and won't be displayed.

  • Headings These tell the browser how large to make text that you want to use as headings. HTML lets you use up to six levels of headings.

  • Links These are at the heart of the Web. With HTML, you can link from a web page other web pages or any kind of Internet resource, including multimedia and files.

  • Images HTML makes it easy to display graphics, or play music or video on web pages.



Sams Teach Yourself Creating Web Pages All in One
Sams Teach Yourself Creating Web Pages All in One
ISBN: 0672326906
EAN: 2147483647
Year: 2006
Pages: 276

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net