Scribd
Upload
38 views4 pages

Your First Web Page: Hands-On Practice 1.1

Uploaded by

je404566
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views4 pages

Your First Web Page: Hands-On Practice 1.1

Uploaded by

je404566
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Your First Web Page

No special software is needed to create a web page document—all you need is a text
editor. The Notepad text editor is included with Microsoft Windows. TextEdit is distributed
with the Mac OS operating system. An alternative to using a simple text editor or word
processor is to use a commercial web authoring tool, such as Adobe Dreamweaver. There
are also many free or shareware editors available, including Notepad++, Brackets, Visual
Your First Studio Code, and BBEdit. Regardless of the tool you use, having a solid foundation in HTML
Web Page will be useful. The examples in this book use Notepad.

Hands-On Practice 1.1


Now that you’re familiar with the basic elements used on every web page, it’s your turn to
create your first web page, shown in Figure 1.11.

FIGURE 1.11
Your first web
page.

Create a Folder
You’ll find it helpful to create folders to organize your files as you develop web pages
and create your own websites. Use your operating system to create a new folder named
chapter1 on your hard drive or on a portable flash drive.
To create a new folder on a Mac:
1. In the Finder, go to the location where you’d like to create the new folder.
2. Choose File > New Folder. An untitled folder is created.
3. To rename the folder with a new name: select the folder and click on the current
name. Type a name for the folder and press the Return key.

20 Chapter 1 ◗ Internet and Web Basics


To create a new folder with Windows:
1. Right-click on the Start Button and select File Explorer. Then, navigate to the location
where you’d like to create the new folder, such as Documents, your C: drive, or an
external USB drive.
2. Select the Home tab. Select New folder.
3. To rename the new folder: right-click on it, select Rename from the context-sensitive
menu, type the new name, and press the Enter key.
Now, you are ready to create your first web page. Launch Notepad or another text editor.
Type in the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>

Notice that the first line in the file contains the DTD. The HTML code begins with an open-
ing <html> tag and ends with a closing </html> tag. The purpose of these tags is to indi-
cate that the content between the tags makes up
a web page.
The head section is delimited by <head> and
</head> tags and contains a pair of title tags
with the words “My First HTML5 Web Page” in
between along with a <meta> tag to indicate the
character encoding.
The body section is delimited by <body> and
</body> tags. The words “Hello World” are
typed on a line between the body tags. See
Figure 1.12 for a screenshot of the code as
it would appear in Notepad. You have just
created the source code for a web page FIGURE 1.12 Your web page source code displayed in
document. Notepad.

Do I have to start each tag on its own line?


No, you are not required to start each tag on a separate line. A web browser can display a
page even if all the tags follow each other on one line with no spaces. Humans, however,
find it easier to write and read web page code if line breaks and indentation are used.

Your First Web Page 21


Save Your File
Web pages use either an .htm or .html file extension. A common file name for the home
page of a website is index.html or index.htm. The web pages in this book use the .html file
extension.
You will save your file with the name of index.html.
1. Display your file in Notepad or another text editor.
2. Select File from the menu bar, and then select Save As.
3. The Save As dialog box appears. Using Figure 1.13 as an example, type the file name.
4. Click the Save button.

FIGURE 1.13 Save and name your file.

Sample solutions for Hands-On Practice exercises are available in the student files. If you
would like, compare your work with the solution (chapter1/index.html) before you test
your page.

Why does my file have a .txt file extension?


In some older versions of Windows, Notepad will automatically append a .txt file extension. If
this happens, rename your file index.html.

Why should I create a folder, why not just use the desktop?
Folders will help you to organize your work. If you just used the desktop, it would quickly
become cluttered and disorganized. It’s also important to know that websites are organized
on web servers within folders. By starting to use folders right away to organize related web pages, you are
on your way to becoming a successful web designer.

22 Chapter 1 ◗ Internet and Web Basics


Test Your Page
There are two ways to test your page:
1. In Windows Explorer (Windows) or the Finder (Mac), navigate to your index.html file.
Double-click index.html. The default web browser will launch and will display your
index.html page.
2. Launch a web browser. Select File > Open, and navigate to your index.html file.
Double-click index.html and click OK. The browser will display your index.html page.
If you are using Microsoft Edge, your page should look similar to the one shown in
Figure 1.14. A display of the page using Firefox is shown in Figure 1.11. Notice how the
title text, “My First HTML5 Web Page” displays in the tab and the title bar of the browser
window. Some search engines use the text surrounded by the <title> and </title>
tags to help determine relevance of keyword searches, so make certain that your pages
contain descriptive titles. The <title> tag is also used when viewers bookmark your
page or add it to their Favorites. An engaging and descriptive page title may entice a
visitor to revisit your page. If your web page is for a company or an organization, it’s a
good idea to include the name of the company or organization in the title.

FIGURE 1.14 Web page displayed by Microsoft Edge. Courtesy of Microsoft Corporation.

When I viewed my page in a web browser, the file name was index.html.html—why did
this happen?
This usually happens when your operating system is configured to hide file extension
names. You will correct the file name, using one of the following two methods:
◗ Use the operating system to rename the file from “index.html.html” to “index.html”.
OR
◗ Open the index.html.html file in your text editor and save it with the name “index.html”.

It’s a good idea to change the settings in your operating system to show file extension names. Follow the
steps at the resources below to show file extension names:
◗ Windows: http://www.file-extensions.org/article/show-and-hide-file-extensions-in-windows-10
◗ Mac: http://www.fileinfo.com/help/mac_show_extensions

Your First Web Page 23

You might also like