In our previous segment, Introduction to HTML, we discovered some basic information about HTML, what does and what it does not do. We also learned something about the technique of writing HTML and the tools that we use. In this segment we will set up a basic site and create a page.
Getting Started
To get started with you Web project you need to set up your site with the proper structure. Site structure is very simple. Your project has a “root folder” that contains all of the files associated with the site. Inside the root folder (which, by the way, can have any name you wish, it doesn’t have to be called “root”) will be sub folders for specific types of files. While the HTML Web pages will be “loose” in the root folder, all the images will be in an image folder, PDF files in a PDF folder, and so on. The diagram on the right illustrates a standard Web site structure with three HTML pages and two sub folders.
Use your computer to set up a rood folder with a sub folder named “images”.
One you have your site set up on your computer with a root folder and the “images” sub folder you can start to build your first Web page. This will be your home page. Unless instructed otherwise, your home page will have one of these names:
index.htm
index.html
default.htm
default.html
The exact name will be specified by your Web master maintaining the host server for your site or by your Web host company. Most Web hosting servers have a hierarchy of names. When a site visitor types into his or her browser the URL of a Web site, the browser is directed to the host server. The host server automatically looks for the name of the home page based on the order of the list, and when it is found it sends the page and all of its associated files to the visitor’s computer where the browser assembles it on the screen.
If the server doesn’t find the preferred home page name in the collection of HTML files it automatically looks for the second file name in the hierarchy. If that page isn’t found it looks for the third page name, and so on. It is helpful to giver your home page the preferred home page name on your host server so that the time lost to the search process is reduced.
Create a new document with Notepad (or whichever program you decide to use) and then save it in your root folder with one of the home page names noted above.
Setting Up the Basic Code
A Web page consists of two parts, the head and the body. The head contains information about the page, such as meta tags, when it was made, and the specifications of the code itself. The body contains the material that is seen when the page is viewed. The data in the head is not visible, although it may specify how the “stuff” in the body is displayed. All the tags, including the head and body tags, are located inside what can be called the “ultimate container tags,” <html></html>, which tell the browser that everything inside them is for a Web page.
Start by typing the opening and closing HTML tags <html></html> like this:
<html> <html>
The <html> tag specifies where the HTML code starts and ends.
Now add the opening and closing tags for the head of the HTML page so that the code looks like this:
<html> <head> </head> </html>
The head of a Web page is the part of the code that contains all sorts of important information that includes how a page will be displayed and elements for search engine optimization. For now, we will continue to build a basic page.
So far, so good. Now add the body tag.
<html> <head> </head> <body> </body> </html>
The body of the page is the portion that visitors to a Web site see, as opposed to the head, which is invisible.
Save the file with the name “index.html” inside your root folder that you made earlier.
Now add some text into your Web page so that you have something to see when you test it. It must be typed in the body, between the opening and closing body tags.
<html> <head> </head> <body> This is my first Web page! </body> </html>
Now you can start your Web browser, Edge, Firefox, Chrome, Safari, Opera, or whatever your favorite is. Open your new Web page and view the file. (In most browsers you will click File> Open (or Open File)> then navigate to your saved Web page and click OK.)
It isn’t fancy, but it is a good start.