Short names keep the character count and file size of your HTML file in check. Consistently using all lowercase letters in filenames, although not necessary, is one way to make your filenames easier to manage. Limit filenames to letters, numbers, underscores, hyphens, and periods.įilenames may be case-sensitive, depending on your server configuration. 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.Īvoid special characters such as ?, %, #, /, :,,

Never use character spaces within filenames.

Web graphics must be labeled according to their file format. We’ll start with Notepad Mac users can jump ahead. Even if you’ve used these programs before, skim through for some special settings that will make the exercises go more smoothly. This section shows how to open new documents in Notepad and TextEdit. It is also crucial for troubleshooting broken pages or fine-tuning the default formatting that web tools produce.Īnd for what it’s worth, professional web developers tend to mark up content manually because it gives them better control over the code and allows them to make deliberate decisions about what elements are used. In addition, you will be glad that you can look at a source file and understand what you’re seeing. It doesn’t take long to develop a feel for marking up documents properly.Īlthough you may choose to use a web-authoring tool down the line, understanding HTML will make using your tools easier and more efficient. There’s no better way to truly understand how markup works than typing it out, one tag at a time, then opening your page in a browser. I stand by my method of teaching HTML the old-fashioned way- by hand. But because this is an introduction to HTML, it is helpful to see the cause and effect of each small change to the source file along the way. We’ll be checking our work in a browser frequently throughout this demonstration-probably more than you would in real life. It’s not very fancy, but you have to start somewhere. Step 5: Change the page appearance with a style sheet. This exercise gives you a taste of formatting content with Cascading Style Sheets.īy the time we’re finished, you will have written the source document for the page shown in Figure 4-1.

Step 4: Add an image. By adding an image to the page, you’ll learn about attributes and empty elements. You’ll describe the content using the appropriate text elements and learn about the proper way to use HTML.

Step 2: Give the document structure. You’ll learn about HTML element syntax and the elements that give a document its structure. Step 1: Start with content. As a starting point, we’ll write up raw text content and see what browsers do with it.

Flower frame for word document