(I am creating a new document in Notepad++ text Editor on Windows 10)
Now that we have our new document, it’s time to get typing. A web page always starts with content, so that’s where we begin our demonstration. Exercise 4-1 walks you through entering the raw text content and saving the document in a new folder.
1.Type the content below for the home page into the new document in your text editor. Copy it exactly as you see it here, keeping the line breaks the same for the sake of playing along. The raw text for this exercise is available online at www. learningwebdesign.com/4e/materials/.
Black Goose Bistro
The Black Goose Bistro offers casual lunch and dinner fare in hip atmosphere. The menu changes regularly to highlight the freshest ingredients.
You have fun… we’ll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers.
Location and Hours
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
2. Select “Save” or “Save as” from the File menu to get the Save As dialog box. The first thing you need to do is create a new folder that will contain all of the files for the site (in other words, it’s the local root folder). Windows: Click the folder icon at the top to create the new folder. Mac: Click the “New Folder” button
Name the new folder bistro, and save the text file as index.html in it. Windows users, you will also need to choose “All Files” after “Save as type” to prevent Notepad from adding a “.txt” extension to your filename. The filename needs to end in .html to be recognized by the browser as a web document. See the sidebar “Naming Conventions” for more tips on naming files.
It is important that you follow these rules and conventions when naming your files:
Use proper suffixes for your files.
HTML and XHTML files must end with .html. Web graphics must be labeled according to their file format: .gif, .png, or .jpg (.jpeg is also acceptable).
Never use character spaces within filenames.
It is common to use an underline character or hyphen to visually separate words within filenames, such as robbins_bio.html or robbins-bio .html.
Avoid special characters such as ?, %, #, /, :, ;, •, etc. Limit filenames to letters, numbers, underscores, hyphens, and periods.
Filenames may be case-sensitive, depending on your server configuration. Consistently using all lowercase letters in filenames, although not necessary, is one way to make your filenames easier to manage.
Keep filenames short. Short names keep the character count and file size of your HTML file in check. If you really must give the file a long, multiword name, you can separate words with hyphens, such as a-long-document-title. html, to improve readability.
Self-imposed conventions. It is helpful to develop a consistent naming scheme for huge sites. For instance, always using lowercase with hyphens between words. This takes some of the guesswork out of remembering what you named a file when you go to link to it later.
3. Just for kicks, let’s take a look at index.html in a browser. Launch your favorite browser (I’m using Google Chrome) and choose “Open” or “Open File” from the File menu. Navigate to index.html, and then select the document to open it in the browser. You should see something like the page shown in Figure 1.0 We’ll talk
Figure 1.0 , A first look at the content in a browser.
Learning from Tutorial.3
Our content isn’t looking so good (Figure 1.0). The text is all run together— that’s not how it looked in the original document. There are a couple of things to be learned here. The first thing that is apparent is that the browser ignores line breaks in the source document. The sidebar “What Browsers Ignore” lists other information in the source that is not displayed in the browser window. Second, we see that simply typing in some content and naming the document .html is not enough. While the browser can display the text from the file, we haven’t indicated the structure of the content. That’s where HTML comes in. We’ll use markup to add structure: first to the HTML document itself (coming up in Step 2), then to the page’s content (Step 3). Once the browser knows the structure of the content, it can display the page in a more meaningful way.
What Browsers Ignore.
Some information in the source document will be ignored when it is viewed in a browser, including:
Multiple (white) spaces. When a browser encounters more than one consecutive blank character space, it displays a single space. So if the document contains: long, long ago the browser displays: long, long ago
Line breaks (carriage returns). Browsers convert carriage returns to white spaces, so following the earlier “ignore multiple white spaces rule,” line breaks have no effect on formatting the page. Text and elements wrap continuously until a new block element, such as a heading (h1) or paragraph (p), or the line break (br) element is encountered in the flow of the document text.
Tabs. Tabs are also converted to character spaces, so guess what? Useless.
Unrecognized markup. Browsers are instructed to ignore any tag they don’t understand or that was specified incorrectly. Depending on the element and the browser, this can have varied results. The browser may display nothing at all, or it may display the contents of the tag as though it were normal text.
Text in comments. Browsers will not display text between the special <!– and –> tags used to denote a comment. See the Adding Hidden Comments sidebar later in this chapter.