Ready, Set, Build
Ready, Set, Build
Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
You have your tools, a bit of background information, and enough knowledge about HTML to be very dangerous. It's time to build your very first Web page. Granted, it's going to be a short one, but it will be a Web page nonetheless.
A Web Page; Step By Step
A Web Page; Step By Step
There are several steps involved in building even the simplest of Web pages. As you become more familiar with HTML and Web development the majority of these steps become second nature. However, because this is your first Web page, don't be surprised if they take a bit of getting used to. You should follow along and build the simple page as you read through the remainder of the page.
Procedures to Practice
Procedures to Practice
Type the following code into the Notepad window to set up a basic HTML page, which appears in Figure 1-1.
Tip: in lieu of typing this code out, you can just as easily cut and paste it into your Notepad file, as long as you understand the meaning of the all of the html tag language.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<head>
<title>My First Web Page</title>
</head>
<body>
<p>This is my first Web page.</p>
</body>
</html>
Figure 1-1
Save the HTML file in your procedures folder as index.html. You will need to remove any instance of your computer automatically trying to save it as a text file (*.txt) by simply clearing the name field completely and typing in 'index.html'. With notepad or a similar text editing program, you will always have to type in the full name with file extension the first time you save. After that, you can simply save (instead of save as) and it will always save as an html file.
Open the File in a browser by double clicking it in the windows explorer.
The browser will show the Web page. The title of the page, “My First Web Page” displays in the title bar at the top of the screen oon the tab. In the Window browser you see the text “This is my first Web page”.
Figure 1-3: index.html displayed in a Web browser.
A Few Notes
A Few Notes
Viola! That's how you build a very simple Web page. There are a few things you should take note of now that will impact your future Web page building activities:
Did you notice that you saved the HTML file as index.html, with .html at the end instead of .txt or some other extension? It is very important that you always save your Web pages with an .html extension so that Web browsers know that your documents are Web pages and should be treated as such.
When you access Web pages saved on your hard drive -- known as local files -- you won't see the typical URL type address that you see when you are accessing files via the World Wide Web. Instead, you have to browse through your local file system, find the file, and then open it with the browser. You can also open it from most browsers by going to file and then open.
The document title -- My First Web Page -- described with the <title> . . . </title> tags, doesn't show up in the browser window, but instead is displayed in the browser window
title bar,
history,
bookmarks, and
back button,
as well in search engine results.
The title is a very important element for web usability
You should keep your text editor and Web browser open at the same time so you can easily switch back and forth between the two of them as you edit and review your work.
Your single Web page is actually open in two different applications -- the text editor and the Web browser -- when you are building Web pages. You make changes to the page in the text editor and view them in the Web browser.
Once you have closed your html files in Notepad (or other text editor), it can be a bit tricky to re-open them to edit the text because they are now going to open in a Web browser by default. There are couple different ways in which you can re-open these files in Notepad .
Right click on the file and choose to 'open with' and Notepad should be one of your options if you look through the other programs that can open the file besides the browser program. or
Simply open Notepad, go to File and then Open, and navigate to the folder where your html file is located. At this point, even thou the file is there, you probably won't be able to see it because Notepad is automatically set to only show text files. This is an easy fix. Simply choose to see 'All Files' instead of 'Text Documents (*txt)' and you will be able to see your html file. Click on it and open it.
Page updated
Report abuse