Many websites are filled with graphics, colors, sophisticated layouts, interactivity, and even music and videos . So you might think that to build a page or a site requires superhuman feats of programming. In fact, it's easy to build web pages and sites. That's because no programming is required. Pages are built using the Hypertext Markup Language (HTML) . Throughout this book, you'll build web pages in a variety of ways, such as by filling in forms on a website, or by using a program such as Netscape Composer. But when you build those pages, behind the scenes the website or program is taking your instructions and creating HTML pages, which are then posted on the server. You can also create HTML pages without use of an HTML tool by simply typing in HTML code into a text file.
Hypertext Markup Language (HTML) The language of the Web. A language used to build pages that contain instructions on how to display web pages.
When your browser visits a web server and requests to see a page, the server sends back to it an HTML page, which the browser then displays. This page is, in fact, nothing more than a text documentin other words, it's a document made up of letters , numbers , and a few special characters . Codes known as HTML tags on this page tell the browser how to display information.
Tags HTML tags are instructions that tell browsers how to display information. Tags are surrounded by brackets, like this: <B> . Generally, there is a beginning tag, like <B> , which tells the browser to display text as bold, and an ending tag, like </B> , which tells the browser to stop displaying the text as bold. The actual tag itself is merely a code to give instructions to the browser and isn't displayed itself.
For example, tags tell the browser how large to make text, what fonts to use, how to place the text, and similar information. And the tags also tell the browser how to display graphics and multimedia on the page. These graphics and multimedia are contained in separate files. The HTML document tells the browser where to find these files, and how they should be used on the page. Tags are enclosed in brackets, like this: <P> .
HTML can get quite complicated, but no matter how complicated it gets, the page itself is a plain-text page built using HTML tags.
On the Web, the world is an open book, literally. It's easy to take a look at the HTML code that builds any page you visit. If you're using Internet Explorer, click the View menu and choose Source. The actual code for the HTML page will open in a new window, in either Notepad or WordPad. If you're using Netscape Navigator, click on the View menu and choose Page Source. The code for the page will open in a separate window.
The basics of HTML are rather simple. To show you how simple, let's take a look at a very basic web page. We'll look at the code that builds the page itself, and then at how the page looks in a browser.
Here's the HTML code for the page:
<HTML> <HEAD> <TITLE> The Pick of the Best </TITLE> </HEAD> <BODY> <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 Preston's Picks, your guide to everything good in the world. </P> </BODY> </HTML>
And here's how the page looks in a browser:
Here's how a web built by the nearby HTML code looks in a browser.
You'll notice that this page is as basic as it gets. There are no graphics and no links. We're not going to go into the details of HTML right now, but take a look at the code and then examine how the page looks in a browser to get a feel for it.
The page is just made up of text. We can add a graphic and a link to it by adding a few simple HTML commands. Keep in mind that the graphic itself is a separate file from the HTML page. The HTML page tells the browser where to find the graphic to display, but the graphic itself is a separate file from the HTML page.
Shown here is the graphic we're going to add. Its filename is criticup.gif . I'm also adding some HTML code that will include a link. I've highlighted the new HTML code that I've added. Don't worry if you don't understand the code yet. In fact, throughout this book, you'll build web pages without having to use HTML, although a working knowledge of HTML is a good idea so that you can tweak your pages. You'll learn the basics of HTML in Chapter 2, "The Basics of HTML." We just wanted you to get a sense of what HTML looks like here.
<HTML> <HEAD> <TITLE> The Pick of the Best </TITLE> </HEAD> <BODY> <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 Preston's Picks, your guide to everything good in the world. </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. </BODY> </HTML>
Here's the graphic that will appear on our new web page.
And here's the new web page, complete with graphic and link.