Beginning an HTML Document

Today we will take on the role of a Web developer who creating a Web site for a local business offering equine-assisted life coaching.

We have a text document with the content and a couple of images that the business owner, Emme, wants to have visible on the home page. It is our task to build the Web page using the provided content.

We will spend this workshop building the home page for this Web site by writing the HTML and CSS code from scratch.

Before we do that, let's take a look at the final product we intend to reach by the end of the workshop.

Step1. Navigate to the Desktop.

Step2. To go into the epclass folder,

Double-Click the epclass folder

Step3. To go into the emmeHorse folder,

Double-Click the emmeHorse folder

Step4. To open the finished Web page in a browser,

Double-Click Final.html

We now see the final product for the workshop in the default Web browser for this operating system.

The Web site consists of two pages that describe what Equinurture does and who the founder is.

Now that we have an idea of what we're shooting for, let's start the Web page. The first half of the workshop will be devoted to creating the HTML, and the second half will be focused on CSS.

Beginning an HTML Document

An HTML document is just a text file, and can be created in virtually any text editor, including Notepad, which comes bundled with the Windows operating system, as well as TextEdit, which comes with Mac.

There are special text editors, commonly called code editors, that make a Web developer's job more convenient. These editors commonly include features that help make sure the code the developer is writing is correct, like a specialized spelling and grammar checker.

Code checking is just one of many benefits of code editors, and on top of that, a lot of this software is entirely free to use. A few examples include Notepad++ or Web Matrix for Windows and TextWrangler for Mac.

Understanding Default File Names

There are a handful of conventional default file names to use for an HTML file, which a Web browser will automatically be directed to if the user visits the domain directly (just types in your Web site's name). An example of a conventional default file name is index.html.

For example, if the home page is named index.html, then when a visitor goes to the Web site at http://www.mywebsite.com, the browser will automatically direct the visitor to http://www.mywebsite.com/index.html.

We'll save the Web page before we write any code.

Let's name our home page index.html.

Step1. Open a new document in a text editor.

Step2. To begin saving the file, press:

Control key+s

NOTE for MacOS Users: To begin saving the file, press Command key+s.

Step3. To navigate to the Desktop, on the left,

Click Desktop

Step4. To enter the epclass folder,

Double-Click epclass

Step5. To enter the emmeHorse folder,

Double-Click the emmeHorse folder

Let's now save the file in this folder.

Step6. To name the file index.html, type:

index.html  Enter

The document is now saved. We can begin writing the code now.