Coding Language There are many computer languages for writing code. When you're writing Web pages...

Coding Language There are many computer languages for writing code. When you're writing Web pages and some other kinds of electronic documents, the main language you'll use to write your code is HTMLHypertext Markup Language.

Tags Hypertext Markup Language consists of tags that define what each element in a document is. There are about 100 different tags, and they all have one thing in common: Each tag starts with an opening angle bracket ( ).

There are certain mandatory tags that every Web page must contain. You'll create a Web page that contains those mandatory tags. To get started, you'll need to open Notepad. In that editor, start by typing this tag:

Accuracy Counts When it comes to typing code, you have to be very accurate and type exactly what I show you. It's not like typing text for humans, where you can make all kinds of mistakes and the person reading it can figure out what you meant anyway. Computers don't have eyes to see with or brains to figure things out with. You have to type the code correctly and without mistakes. So notice that the first tag I had you type contains no blank spaces and uses all lowercase letters. If you typed yours differently, now would be a good time to correct it.

Now, please press ENTER to start a new line. Then type one more tag as shown below.

Next, we'll type a couple of tags right next to each other. Notice that here you'll start to see that some tags contain a forward slash (/). That's not the same as a backslash (\), which leans back on the letter that precedes it. Make sure you always use a forward slash (/) in your HTML tags. Here are the two tags I want you to type next to each other now:

Required Tags Now, you can press ENTER to end that line. And let's just go ahead and type in the rest of the required tags. I'll discuss what they all mean and why they're there in a moment.

Sample Web Page Your sample Web page should look like this if you're using Notepad as your editor: Do you see any errors in your own code? If so, now would be a good time to correct them.

Saving your web page Before we go any further, let's save all this hard work. I'm going to have you save it as index.htm, because that's a common name for a site's home page (the first page one sees when visiting your site). Here are the steps: Close your editor. In Windows, click Close (X) in the upper right corner, or choose File > Exit from the menu bar. In TextEdit, click the red Close button. When asked if you want to save your work, click Save or Yesor whatever indicates the affirmative in your program. Choose MyWebsite as the folder that you want to save the file in. Type index.htm as the filename

Save yo Shhhtuff

At this point, the editor and page should close. The page is saved with the filename you specified in the folder you specified. The exact size and shape of the icon depends on how you're viewing icons in the folder. And the icon you see will match the icon of your default browser, which may be different from the examples shown. But the filename should be index.htm.

Browsing and Editing Pages Let's begin by covering some of the basics about files. The index.htm page you created in Chapter 2 is a Web pagea plain text file that contains HTML tags, and the filename has a.htm filename extension. All operating systems treat the.htm and.html filename extensions equally as Web pages. There's no advantage or disadvantage to using one extension or the other.

Text Editor vs. Web Browser When you look at the page in your text editor, you see the source codethe HTML tags you typed there. To see the page as the rest of the world would see it, you have to view the page in a Web browser. When you open the file in a Web browser, you see the rendered page rather than the source code. You'll see a few examples in this lesson.

Default Web Browser To open index.htm in a Web browser, you just have to double-click the index.htm file's icon in your MyWebsite folder. The page will open in your default Web browser. That'll be whatever you've defined as your default browser in the past. When you open index.htm in a browser, you won't see any source code at all. It's there! You just won't see it. In fact, you won't see anything but an empty page. Why? Because the tags you put into the page define the structure of the page only. You didn't yet put in any content for people to see.

My Blank Web page

User Agents Even though our index.htm page looks empty, it's not empty to user agents. To a user agent, the tags in the source code are still there and provide useful information. A user agent (sometimes abbreviated UA) is any program that might access the page. Your Web browser is a user agent. The Web-crawling infobots (also called spiders, crawlers, and bots) that the search engines like Google use to index your page and make it easy for people to find are user agents. The various browsers and browser-like programs on cellphones, e- readers, and tablets are also user agents. User agents need information about the page to best decide how to present it to the user (the person using the user agent). The tags you typed provideinformation that's for the user agent rather than the human user's eyes.

Editing your web page Nobody wants to look at an empty Web page. So needless to say, your index.htm page isn't exactly ready for publishing to the Web. To be useful, you need to add some content to the page. (Recall that content is what people see, unlike code, which is what programs see). If you try to just start typing content into your browser, nothing will happen. Why? Because Web browsers are for viewing Web pages, not for creating or editing Web pages. If you want to change or add to a page, you're going to have to open it in your editor again.

Opening a Page for Editing To edit (change) a Web page, you'll need to open it in your editor again. This should be easy to do: Open the folder that you stored the page in (MyWebsite in this course). In Windows, right-click the page's icon (index.htm), point to Open With, and then click the name of your editor (Notepad unless you're using something else). See the image below.

Right Click Open With

Indentations In your editor, you're now back to seeing the source code, which means that you can see all the tags. In the code below, I've added some indentations that might make it easier to see how some tags are contained within other tag pairs. The indentations aren't required. Your code works the same with or without them. The indentations are for your eyes only

Indentations Example

The very first tag,, tells the user agent that's opening the page that it's about to encounter an html document. That very first tag will vary depending on the version of HTML or XHTML you're using. The tag is kind of a plain vanilla tag that'll work for right now. But it's nothing to be concerned about right now, because the rest of the tags are core HTMLwhich means that they're exactly the same regardless of which version of HTML or XHTML you're using to create your page.

: At the very bottom of the page, you see That tags tells the user agent that it has reached the end of the html document. End of Document

Opening and Closing tags Note As you can see, most of the tags come in pairs. For example, at the top of the page and at the bottom. Most tags in HTML come in pairs like that. The first tag in the pair is called the opening tag for the pair, and never has a slash (/) in it. The second tag is called the closing tag and is always the same as the opening tag except that it has a slash (/) right after the < at the start of the tag.

: After the tag comes the tag. That starts the head element in the page. The head element will contain metadata. Metadata is information about the page for user agents to use. It's not information that's visible on the page body for people to see.

and : Inside the head element are and tags. These tags will contain the page title. Not a title that appears on the page. It that appears in the Web browser program window, as you'll see shortly.

and and : Below the head section are and tags. Those define the body element of the page. All the content of the page goes between those tags. The content is the stuff that people will see when they visit your website using their Web browsers.

Required Tags The tags above are the only tags that all pages require. From here on out, you can be creative with your tags and content. Can you name all the required tags??? What are they?

Add Content With index.htm still open in your editor, type the words My Website between the tags, as below. (Feel free to make it more personal by using your own name if you'd like). My Website Between the and tags, type Welcome to My Site. Press ENTER to start a new line Type This is text on my home page.

In the image below, I've indicated in red the new text you added to your page. In your page, you just want to make sure the new title text is between the tags and the rest is between the tags.

Save yo Changes Any changes you make to a web page aren't saved until you save them. Press CTRL + S (in Windows). Or choose File > Save from the program's menu bar. Any changes you make are saved to the existing file

Reload/Refresh Also, the changes won't automatically show up in the Web browser if the page is already open in the browser. For changes to show up in the browser, you have to click the browser's Reload or Refresh button. The location and name of the button varies slightly from one browser to the next, typically, it's a rounded arrow, and when you point to it, the tooltip at the mouse pointer shows Reload or Refresh, like in the examples below. Clicking that button forces the Web browser to fetch the latest saved copy of the file.

In the editor, you might (or might not have) indented your code using spaces. Those indents are called whitespace. And you might have broken the text into two lines, like this:

The truth is, the browser doesn't care if you did or didn't indent lines, or if you put text on multiple lines. It's going to show that text as one long, left-aligned line of text either way. The browser doesn't use the whitespace or line breaks in your code to determine where to break or indent lines of text. The Web browser (and all other user agents that display your page) cares only about markup. they use the HTML tags to determine how the page looks.

To illustrate, I'll introduce you to a couple of new HTML tags. The first are the heading 1 tags (h1 tags), which look like this: Any text placed between those tags is considered a level-1 heading. Translation to plain English would be "the main title at the top," such as a story title or headline. There are h2 headings for subheadings, h3 for sub- subheadings and so forth.

There are tags that mark the beginning and end of each paragraph. A paragraph is any sentence or group of sentences that have some empty space above and below them. To mark the beginning and end of a paragraph use the tags:

Adding more content Let's try these new tags out and see what effect they have on our page. Follow these steps: Open index.htm in your editor. (How you do this will always be the same, as discussed under "Opening a Page for Editing" in Chapter 3. If you've forgotten how, you can review now.) Type an tag to the left of the word Welcome, and after Site. Type a tag in front of the word This, and a after the period at the end of that sentence. Use the image below as a guide. But again, the red just shows you what to type where; it won't actually be red in your editor.

Double-check to make sure you typed everything correctly. Save your page (press CTRL + S or COMMAND+S in your editor, or close your editor and choose Yes or Save when asked about saving your changes). Then, open the page in your browser again, or just Refresh or Reload the page in the browser if you already have it open there.

What you should see

What you see Of course, in the browser, you don't see the tags. You see the rendered page. The h1 text renders as larger text on its own line. The paragraph renders on its own line with some space above. They're on separate lines because headings and paragraphs are block elements, meaning that they always start on a new line.

More Tags Open index.htm for editing in your editor. Click just to the left of the, and add a couple spaces after the period and the sentence I am a sentence that contains some boldface text and some italic text.

Note The new text you type may automatically wrap to two or more lines. Or it might just be one long line. It really doesn't matter because the Web browser ignores all that. So don't worry about if or where the lines break. Just worry about typing the tags correctly.

After adding the new text and saving it, open the page in your browser again. Or, if it's already open in your Web browser, refresh or reload the page. In the browser, the text in the body will now look something like this: Some more text and tags added to the page Your text may all be on one line though, because the text in a browser will always word wrap automatically to stay within the width of the browser window (so no text gets cut off). We use the term word wrap because it'll always try to break to the next line between two words, not in the middle of a word.

The word italic is slanted. That's because that word is enclosed in tags. The em is short for emphasis, and it makes the text look italic on the screen, italics

Inline vs. Block Here's something else you might notice: Before, when you put in the h1 and p tags, it separated the heading text from the paragraph with a blank line. That's because those are block elements, meaning they always start on a new line (start a new block of text). The strong and em tags you added didn't do that. In other words, the and tags don't cause the text to start on a new line. They allow the text to continue to flow normally. Strong and em are inline elements as opposed to block elements. Inline elements stay in line with the rest of the text on the line, rather than start a new line.

What have we learned so far To create a page, open a text editor (or some program specifically designed for creating Web pages). Then, save the page, and make sure you give it an.htm or.html filename extension (they're equal, so use whichever you like). To view a page in your Web browser, double-click its icon. The browser shows the rendered page, which is how the rest of the world sees your page. To change the page, open it in a text editor again so you can see and change the source code. Typically, you right-click (Windows) or CTRL + click (Mac) the icon and choose Open With to open the page in an editor.

Every page contains code (instructions for the computer) and content (text and pictures that people see in their Web browsers). Most of the code consists of HTML tags, each of which starts with. Changing the source code won't affect how the page looks in a browser immediately. You have to save the changes first. Then, if the page is already open in the browser, Refresh or Reload the page.

Create a new page

Save your page Open your editor I colored the content red and the tags black above, just to keep them separated visually. Save the page by choosing File > Save, or by using the CTRL + S or COMMAND + S shortcut. Put the file in your MyWebsite folder, and name it recipe.htm.

Headings You've already learned about level-1 headings, defined by tags. A level-1 heading is the main title or headline at the top of a Web page or other document. HTML offers six levels of headings, and each uses similar tags as indicated below

Headings (cont.) Many beginning Web developers look at that and think heading tags must exist to control the size of text. But that's not true at all. We use HTML to define what an element is, not how it looks. As you'll learn later, you use CSS (another language) to control how things look. What an element is, in terms of headings, relates to its outline level. To really understand that think about when you were encouraged to create an outline before writing a paper. The purpose of the outline was to organize the paper in advance, to make it easier to write and easier for readers to understand. The outline was all about organizing topics and subtopics within topics, perhaps something like this:

Heading Example

Subheadings h1 is the main title, and any subtitles would be h2 headings. If an h2 heading needs to be divided into two or more subtopics, their headings would be h3 titles. If an h3-level heading needs to be divided into two or more subtopics, those would be titled as h4 headings so forth down the line

Recipe.htm The sample recipe.htm page we're creating here isn't long enough to need a whole lot of headings or subheadings. In fact, if we were to bother creating an outline for such a short page, we'd just have a couple of section headings under the main title like this: Hot Dogs Ingredients Directions

Adding Subheadings In our recipe page, we already put in the h1 heading. So now you just have to add the h2 headings. We'll put them under the first paragraph. Under the first paragraph, type Ingredients, press ENTER a couple of times, and then type Directions.

What it should look like

Lists Lists are common in Web pages and print alike. You've probably seen thousands of them. They come in two basic varieties: the unordered list and the ordered list

Unordered List An unordered list works best when listing a set of facts (or ingredients) where the order doesn't matter. This style of list is sometimes called a bulleted list, because each item in the list starts with a small circle called a bullet. Here's an example: Great luxury at an affordable price Better gas mileage than most cars Highest resale value in its class

Ordered List We use an ordered list when the order of the items in the list matters. This type of list is sometimes called a numbered list, because each item in the list starts with a sequential number. This type of list is used for step-by-step instructions, as in this example: 1. Put the key in ignition, and turn the key to start the motor. 2. Release the hand brake, and press the brake pedal on the floor. 3. Switch the gearshift lever to D (Drive).

List Tags Both types of lists are so common that HTML has tags for them. We use tags to define an unordered list. And we use tags to define an ordered list. Regardless of which type of list you're creating, you use tags to define each list item. Notice that the tags indicate the type of element each creates. Use ul for an unordered list, ol for an ordered list, and li for each list item within either type of list.

Create an Unordered List Let's suppose we want to put an unordered list of ingredients under the Ingredients heading in recipe.htm. The first step, of course, is to open recipe.htm in an editor so you can make changes. Then, click where you want to start typing (just below the Ingredients heading). I f there isn't a blank line under that heading, click at the end of the Ingredients line, and press ENTER to get the cursor under that heading.

To create the list, first type both the opening and closing ul tags, and put each on its own line. Technically, you're not required to type both the opening and closing tags at the same time. However, typing both right away is a good habit to get into, because one of the most common mistakes in HTML is forgetting to type the closing tag. If you type both tags right from the get-go, you won't have to worry about forgetting. Type your and tags under the Ingredients heading now.

The tag marks the beginning of a list, and the tag marks the end of a list. Right now, it's an empty list, because we haven't typed any list items yet. A list can contain any number of list items. But it can only contain list items. It can't contain headings, paragraphs, or any other type of element.

Entering the List Each item in the list must start with a (list item) tag, and end with a tag. To keep things simple, we'll add three items to our list. Here are the steps: 1. Click just past the opening tag, and press ENTER to start a new line under that tag. 2. Type Hot dogs, and press ENTER. 3. Type Hot dog buns, and press ENTER. 4. Type Mustard, relish, chopped onions. 5. Make sure you put all of the list items between the and tags, as shown below. Again, I made the text red and the code black to distinguish, but it will all be black when you type it.

What it should look like

How it works Looking at the rendered content in the page, and thinking back to the code you wrote, it all plays out like this: The tag marks the start of the unordered list. In the browser, the list has some blank space above it and is indented. An tag marks the start of each item. In the browser, each item starts on a new line and has a bullet to its left. A tag marks the end of each item in the list. The tag marks the end of the list. Text below the tag in the page no longer looks like list items.

Creating a Numbered List The tags for an ordered (numbered) list are almost identical to those of an unordered list. The only difference is that the ordered list starts with and ends with. Let's add a numbered list to our recipe page. Here are the steps: 1. Open recipe.htm for editing, or switch to its window if it's already open. 2. Click to the right of the Directions, and press ENTER to put a new blank line under it. 3. Type both the and tags now (so you don't forget to type the closing tag later). 4. Put the cursor between the and tags. 5. Type Preheat grill to 350 degrees., and press ENTER. 6. Type Place dogs on grill, roll occasionally for even cooking., and press ENTER. 7. Type Place cooked dogs in buns., and press ENTER. 8. Type Apply mustard, relish, and onions to taste., and press ENTER. 9. Move the cursor down so it's just past the closing tag. 10. Press ENTER, and add the paragraph Eat and enjoy!.

List Summary Use to start an unordered list, or to start a numbered list. Use to start each item in the list, and to end each list. Use to end the entire unordered list, or to end the entire ordered list. Unordered lists are sometimes called bulleted lists, because each list item starts with a bullet (small circle). Ordered lists are sometimes called numbered lists, because each item in the list is numbered in sequential order. We often use numbered lists for step-by-step instructions.

Special Characters Every letter, number, and punctuation mark that you can type at the keyboard is a character. You can type quite a few characters right from your keyboard But every now and then, you may need one that you can't find on your keyboard, such as for copyright. We call these special characters.

Special Characters (cont.) HTML character entities are special codes you can type to make special characters show on your page. Each special character can be represented by brief name or numbers. And each starts with an ampersand (&) and ends with a semicolon (;). If you use the number rather than the name, you must follow the ampersand with a # (pound) character. There are hundreds of character entities.

CharacterNameEntityDecimal Copyright sign Trademark Registered trademark Degrees Lowercase e with acute Lowercase i with acute Lowercase n with tilde Nonbreaking space

Using Special Characters Let's get some practice using one of the character entities. Let's replace the word Degrees in recipe.htm with the character entity for the degree sign. Here are the steps: Open recipe.htm for editing (or switch to that window if it's still open). Right after the 350 in the directions, delete the space and the word degrees. Type to replace the word you just deleted.

The image below shows the entity in the correct place. NOTE: I'm only showing code and text near the change to make it easier for you to see this one small change.

Creating Hyperlinks Hyperlinks allow you to get from one place to another with a simple click of the mouse or tap on a touch screen. You can create links to other peoples' pages. If your site contains multiple pages, you can put in links to other pages within your own site. You can create links to other documents, such as PDF files, for people to download.

Hyperlinks (cont.) To create a link, you need to provide two pieces of information: The link text: The text that shows on the page for the user to click. The target: The address of the page that opens when the user clicks the link.

link text The link text is the word or words that appear on the screen for a person to click (or tap). Link text appears between and tags. The a stands for anchor point. It's an anchor point because once the user clicks the link, they're sent to some other page. But they can always click the Back button in their browser to return to the page that contains your original link.

target text The tags alone aren't enough though. For example, suppose I put something like this on a page: More Recipes There's some link text between tags. But there's nothing there that says what should happen when the user clicks the link text. We do that by adding an href attribute to the tag. Attributes are part of the HTML language and are used by some (but not all) tags to store additional information about an element.

Attributes An attribute is additional code that appears inside some tags. There are several attributes and several tags that use them attributes have rules of syntax, like all other code. For attributes, the syntax is this: attributename="value"

Name and value Whenever you see italic text in a syntax description, the italic text is just a placeholdernot text that you type literally. In other words, the proper syntax for an attribute is for you to first correctly type an attribute name, followed by an equal sign, followed by some value enclosed in quotation marks. The attribute name and value will vary depending on what you're doing at the moment

href The attribute we use to specify where a link should take the user is href, short for hypertext reference. The value is the address of the page that the user should be taken to. And that address can be either an absolute reference or a relative reference

Absolute Reference An absolute reference is a URL (Uniform Resource Locator) or FQDN (Fully Qualified Domain Name). These are technical terms for a complete Web address that starts with http:// Every page on the Web has such an address. You can link to any page once you know that address.

Relative Reference A relative reference is a reference to a resource within your own website. You can use a relative reference to make links to other pages within your site. a relative reference doesn't need to be a URL or FQDN It just has to be a path to the resource, relative to the page that contains the link. If the page that contains the link, and the page that you're linking to, are in the same folder on your site, then the relative path is just the filename of the file that you're linking to.

Creating an Absolute Reference We'll add an absolute reference, linking to the popular AllRecipes website from our recipe.htm page. The URL for that page is http://www.allrecipes.com, so that'll be our absolute reference. We'll put the new link in its own separate paragraph ( tags), so there's some space between it and the last paragraph that's currently on the page. Follow these steps to create the tag: 1. Open recipe.htm for editing (or if it's still open for editing, just switch to that window). 2. Click just after the last tag but just above the tag, and press ENTER. 3. Type to insert a new paragraph. (Type the closing tag in now so you don't forget to type it later!) 4. Put the cursor between the and tags, and press ENTER. 5. Type the link tag shown below: 6. More Great Recipes

Test the link To test the link, click it. To return to your own page from AllRecipes, click the Back button near the upper left corner of your browser's program window. If your link doesn't work, make sure you clicked on the link (not just near the link), and make sure you typed your code correctly, exactly as shown in the instructions above. Anatomy of a link

The link starts with an tag. The tag uses an href attribute whose value defines the target of the link (where the link takes the user). There must be a space before the href, an = sign after it, and the value must be enclosed in quotation marks. After the tag comes the link text, the text that's visible on the page that the user will click. The tag comes after the link text and marks the end of the link.

Adding a relative reference Open index.htm (in notepad) Move the cursor to the end of the last paragraph in the page, so the cursor is somewhere between the last and the tag. Press ENTER, and then type the tags for a new, empty paragraph ( and ). You can press ENTER to put those tags on two separate lines. Between the new and tags you just typed, add the following link: See My Hot Dog Recipe

Open recipe.htm Move the cursor down to between the last tag and tag, and press the SPACEBAR to insert a blank space. This will serve as a blank space between the link that's in the page already and the new link you're about to add. Type the link shown here: Home The image below shows the new code in place within the last paragraph. NOTE: It's not absolutely necessary to put the new link on a new line like that, or to have the tags on their own lines.

Adding Pictures Nothing spruces up a Web page like pictures. You can use just about any picture, such as a picture from a digital camera, as well as clip art illustrations that you can purchase or even find for free online. Before we go any further, though, it's important to understand that not everything you see on your screen is free for you to copy and use as you please. Many images on many websites are copyrighted. Using copyrighted images without permission from the copyright holder is called copyright infringement. It's against the law and exposes you to some stiff fines.

Acquiring Pictures Every computer picture is stored in a file. To use a picture in your website, you first need the picture file. It has to be a file that contains a picture in one of the following formats: GIF: The Graphics Interchange Format supports 256 colors plus transparent. Clip art images and other non-photographic illustrations are commonly saved in this format. The filename extension is.gif. JPEG: The Joint Photographic Experts Group supports millions of colors and is one of the most common formats for photographs. Common filename extensions are.jpg and.jpeg. PNG: The Portable Network Format supports millions of colors (like JPEG), plus transparent (like GIF), making it suitable for both types of images. The filename extension is.png. NOTE: If you have a picture, but it doesn't have the right filename extension, simply renaming the file and changing the extension won't help.

Copying a Picture from a Web Page Once you find an image, your first step will be to download (copy) the picture from the page to your own site's folder (MyWebsite).

Go to bpi.edu Download hot_dog and welcome and save them in your Website folder

If you did everything correctly, you now have a file named hotdog.png in your MyWebsite folder. To verify that, open your MyWebsite folder and take a look. You should still have your index.htm and recipe.htm files, plus hotdog.png. If the folder was already open, you may need to close and then reopen it.

Adding a picture to your website Putting a picture into your website folder won't make it show up in any of your Web pages. That's part of the process, but not the whole process. You use the HTML tag to display the picture in a page.

Putting Images in Pages Once you have a JPEG, GIF, or PNG image in your website folder, the next step is to specify where you want it to show. You'll use the HTML (image) tag for that step. The syntax for the img tag is as follows:

src and alt As in all syntax examples, never type the words path or alternateText. The italics indicate that those are placeholders for values you need to supply on your own. Let's take a look! src: This indicates the source of the image. This can be a relative or absolute path to the image file. If the image is in the same folder as the page that contains the tag, then the path is simply the image filename. alt: This means alternate text, a few words that describe the image for screen readers for the blind to read aloud.

Empty Tags Note that unlike other tags you've seen, there's no tag pair here. In other words, it isn't.... And there are no words between tags. We call such tags empty tags. It may seem a bit of a misnomer because the img tag itself isn't empty. It contains two attributes, src= and alt=. In this context, "empty" means "no opening and closing tags with words in between."

XHTML Note In XHTML, empty tags like img end in /> rather than >. In traditional HTML, they end in >. For now, you don't need to worry about this distinction. The tag will work with or without the / near the end. We'll talk more about the differences between HTML and XHTML a little later in this course.

Add the picture To make that happen, we have to open the source code for the page in an editor, as we've done in the past, and put an img tag at that location. To ensure that the image appears on its own line with some space above and below, we'll put the image tag in... (paragraph) tags. Here are the steps: Open recipe.htm in your editor (right-click and choose Open With > Notepad in Windows, or CTRL + click and choose Open With > TextEdit on a Mac, if you're not using some other method of your own). Put the cursor just after the tag of the main title, and press ENTER to start a new line under that. Type in the p tags and img tag, and src= and alt= attributes, exactly as shown below. If you'd like, you can add some blank lines to make the code less cluttered. But it's not necessary to add blank lines. The image below shows the new tag in the page in the correct location under the h1 tag. Save the change (choose File > Save in your editor, or close your editor and choose Save when asked about saving your changes).

Debugging Pictures If your image doesn't show when you try to show it in your page, here are some troubleshooting tips you can follow: Open the folder that contains the image (MyWebsite in this case), and verify that the image is in that folder. Make sure your image has a.gif,.png,.jpeg, or.jpg filename extension. Other file types don't work. Jot down the filename exactly as it's spelled in the folder. That includes blank spaces, because the filename hotdog.png isn't the same as the filename hot dog.png (one contains a space, and one doesn't). Open the page that contains the tag. Verify that the img tag starts with img or something else). Verify that after the img there's a space and src=. That space is required, and make sure you typed src= not scr= or something else! Verify that the image name comes next, is spelled exactly as it's spelled in the folder (including any spaces), and that the image name is enclosed in quotation marks. Verify that there's a space after the image name, and then alt= followed by some text in quotation marks. That alternate text is regular text, not code, and there aren't any specific rules, except that it must be enclosed in quotation marks. Verify that the img tag ends in />.

Add Welcome.jpg to your home page

Sizing an Image Every image has a size expressed in pixels. A pixel is one tiny dot of light on your screen. The individual dots are too tiny to see with the naked eye.

Pixels You don't need to see, or work with, individual pixels. You can size an image by specifying its width, height, or both in pixels. A ballpark estimate converting to more familiar units of measure would be 100 pixels = 1 inch (or 2.5 centimeters). That's not an exact ratio, because a lot depends on the size of the screen that's showing the Web page. Here's an example: The square below is exactly 100 pixels tall and 100 pixels wide.

Width To specify the image width, use the width attribute in the img tag. Here's the syntax for this: width="x" Never type the letter x. Rather, replace x with the number of pixels wide you want the image to be. If you specify only the width, the height will be calculated automatically to maintain the same aspect ratio. The aspect ratio is the ratio of the width to the height, and it defines the shape of the image.

Change the width As an example, here's an img tag for displaying the hot dog image with a width of 100 pixels. As always, put a space before the attribute and enclose the value in quotation marks. The image below shows the hot dog picture with a width of 100 pixels. The original is 200 pixels, so the one below is about half its size.

height To specify the height, use height= with a similar syntax: height="y" Replace y with the height you want, in pixels. If you specify only the height, the width will be calculated automatically to maintain the original shape. Here's an example of specifying only a height for the hot dog image in an img tag:

Distortions You can specify both a width and a height there won't be any automatic calculations to ensure that the image retains its original shape (aspect ratio). If you change the shape, you distort the picture Try this and see what happens

Using Pictures Wisely You've learned how to copy pictures from the Web, and how to incorporate pictures into your website using the img tag. You learned to control the visual size of an image using the width= and height= attributes in the img tag. But if you really want to get serious about images, like the pros, you need to understand that the visual size of an image isn't all that matters. The file size matters too. And file size isn't measured in pixels. It's measured in bytes.

Size Matters Every picture file has a file size, usually expressed in KB or MB. And there are two reasons why file size matters to Web developers: The larger a file, the longer it takes to download, so the longer the visitor has to wait. Folks can be impatient. So if they have to wait too long, they might just navigate away from your site before they even see the picture. Most hosting services charge for bandwidth, or the number of bytes your site services. A free hosting service will often put a limit on how many bytes you can serve, and it'll just stop serving if you exceed your limit. If you use larger files, it's more likely that you'll exceed your bandwidth limit.

Speed matters Exactly how long it takes to download a file depends on the speed of the user's Internet connection, which can vary a lot. There's no exact cutoff point for what's acceptable and what isn't. Rather, the goal is just to be prudent in terms of not using files that are unnecessarily huge. File sizes under 1MB are good. Under half a megabyte (500K) is even better.

Digital Camera pics Pictures you download from the Internet are usually fine, in terms of file size, because the people who served them to you already understand how it all works and probably already made the picture a reasonable size. But pictures from digital cameras tend to be huge, because huge is good for printing and good for editing in graphics editing programs. Huge files aren't good for use in Web pages.

Changing file types If you use Windows, and the picture is currently in a format that you can open with Paint, you can edit it with Paint as follows: Still in the folder where you can see that picture's icon, right- click the icon and choose Open With > Paint. click the File tab (just to the left of the Home tab). Or click File on the menu bar in other Windows versions. Then choose Save As from the file menu. In the Save As dialog box, specify your website folder as the place to save the file. If you want to change the filename, type a simpler filename in the File Name box. If you need to change the file type, click the Save as type arrow and choose JPEG, PNG, or GIF. PNG is probably the best quality, and it's okay for photos as well as illustrations.

Creating Tables Introduction Tables are also quite common design elements, and we use them to organize information into clear, easy-to- read, rows and columns. Here's an example:

Table Basics Tables are a common design element for organizing information into rows and columns. Rows stretch horizontally across the table, and columns are vertical. At the junction of each row and column is a cell.

rows vs columns Tip To remember the definitions of row and column, think of a boat you row across a lake, and columns standing vertically in front of a building.

Table tags Here are the tags we use to create tables:... : Mark the beginning and end of a table.... : Mark the beginning and end of a table row.... : Marks the beginning and end of a table header cell.... : Marks the beginning and end of a table data cell.

Create a table A header cell is typically the topmost cell in a column, or the leftmost cell in a row. We'll create a table and put it in the recipe.htm page. Open your MyWebsite folder. Right-click (or CTRL + Click) recipe.htm, and open it with your editor (Notepad or TextEdit).

Adding rows and columns Put the cursor at the end of the line that reads Eat and enjoy!, and press ENTER to start a new blank line. To define a table, start by typing the following: Press ENTER a couple of times, and then type this: Put the cursor between the tags and that you just typed. Now type the tags to define a table row: Next, we'll add a couple of header cells inside that row. Put the cursor between the and tags you just typed. Then, type the following code and content: Ingredient Calories

Add data cells Let's add some more rows (with tr tags) and some data cells (with td tags). Put the cursor past the tag, and press ENTER to start a new row. Type the following tags and content so that the new row is under the first row: Hot Dog 150 Press ENTER, and type the next row as follows: Bun 90 Press ENTER, and type one more row of tags and text as follows: Ketchup 10

What you should see It won't look quite like a table (yet) The words and numbers organized into rows and columns There are no borders (lines) between the table cells. (yet)

Adding Borders To add borders, you can add a border= attribute to the tag. This is the syntax:border="x

border = 1

Breaking it down

Header and data cells

There's no rule that says you must arrange the tags as I did you could type the table we just typed like this: Ingredient Calories Hot Dog 150 Bun 90 Ketchup 10

Basic Table Styles When you use only tags to create a table, the content is displayed in neat rows and columns, but without border lines between the cells. The border attribute lets you define the width of the line used to separate border cells. The default is zero (so that's why you don't see any border lines between cells if you don't put in a border. ) If you add border="1" to the tag, then you get a nice thin 1-pixel border around the cells. You can use another attribute, cellspacing, to control that spacing between the cells.

The Cellspacing Attribute The cellspacing attribute allows you to control the empty space between cells. The syntax is (all one word, no spaces, all lowercase) cellspacing="x" The default is 2, which means that if you don't use cellspacing at all, or if you put in cellspacing="2, you get two pixels of space between cells.

If you want to get rid of that space between cells, you can remove the cellspacing by setting the cellspacing attribute to zero. Ingredient Calories Hot Dog 150 Bun 90 Ketchup 10

cellspacing = 0

Try this

cellspacing = 10

The Cellpadding Attribute The cellpadding attribute controls the amount of space inside cells. The syntax is similar to that of other attributes: cellpadding="x The default is 1.

cellpadding = 10

cellpadding vs. cellspacing

padding inside the box It isn't always easy to remember the difference between spacing and padding Notice how each cell is like a box that contains some information. When you ship a cardboard box that contains something valuable, you put padding inside the box to protect the contents of the box:

Try some values

Try it

Aligning Text in Columns The table we've created could use one minor formatting improvement. The numbers in the second column are left-aligned. Usually, numbers in a table are a little more readable if you make them right-aligned, as below.

align = To align the contents of a cell, add an align= attribute to the or cell whose contents you want to align. The syntax is as follows: align="value" Replace the word value with one of the following words: left center right

align = right Hot Dog 150 Bun 90 Ketchup 10

Merging Cells When creating tables, you'll typically want to ensure that each row contains exactly the same number of cells, as that's what gives your table an organized appearance. There may be times, however, when creating exceptionally large tables, where you might want to combine cells.

Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 2 Column 1 Row 2 Column 2 Row 3 Column 1 Row 3 Column 2 Row 3 Column 3

colspan Of course, you could just put in the... tags for the missing cell. But if for whatever reason you really only need two cells in that row, you could make either of the existing cells span the width of two columns. To do that, you use a colspan attribute with the following syntax: colspan="x"

colspan = 2 Row 2 Column 1 Row 2 Column 2

colspan = 3 Row 2 Column 1

rowspan You can also make a cell expand multiple rows if you'd like. To do this, you use the rowspan attribute rather than colspan attribute. The syntax is rowspan="x

Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 2 Column 1 Row 2 Column 2 Row 3 Column 1 Row 3 Column 2

Using Programmer Comments programmer comments, often called comments for short are like notes to yourself The comments don't show up in the Web browser They're not required. Comments have no effect on how the code functions, Comments can still be useful. Most programmers don't use them enough. The idea behind comments is to simply jot down notes in your code that might serve as a reminder to yourself It can even be helpful to quickly scan through the code looking at the plain-English comments rather than the more complex code. The syntax for using comments in HTML is the following:

Coding Language There are many computer languages for writing code. When you're writing Web pages...

Documents

Transcript of Coding Language There are many computer languages for writing code. When you're writing Web pages...