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.
Slide 3
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 ( ).
Slide 4
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:
Slide 5
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.
Slide 6
Now, please press ENTER to start a new line. Then type one more
tag as shown below.
Slide 7
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:
Slide 8
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.
Slide 9
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.
Slide 10
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
Slide 11
Save yo Shhhtuff
Slide 12
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.
Slide 13
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.
Slide 14
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.
Slide 15
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.
Slide 16
My Blank Web page
Slide 17
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.
Slide 18
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.
Slide 19
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.
Slide 20
Right Click Open With
Slide 21
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
Slide 22
Indentations Example
Slide 23
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.
Slide 24
: 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
Slide 25
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.
Slide 26
: 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.
Slide 27
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.
Slide 28
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.
Slide 29
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?
Slide 30
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.
Slide 31
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.
Slide 32
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
Slide 33
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.
Slide 34
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:
Slide 35
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.
Slide 36
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.
Slide 37
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:
Slide 38
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.
Slide 39
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.
Slide 40
What you should see
Slide 41
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.
Slide 42
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.
Slide 43
Slide 44
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.
Slide 45
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.
Slide 46
Slide 47
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
Slide 48
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.
Slide 49
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.
Slide 50
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.
Slide 51
Create a new page
Slide 52
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.
Slide 53
Slide 54
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
Slide 55
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:
Slide 56
Heading Example
Slide 57
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
Slide 58
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
Slide 59
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.
Slide 60
Slide 61
What it should look like
Slide 62
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
Slide 63
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
Slide 64
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).
Slide 65
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.
Slide 66
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.
Slide 67
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.
Slide 68
Slide 69
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.
Slide 70
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.
Slide 71
Slide 72
What it should look like
Slide 73
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.
Slide 74
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!.
Slide 75
Slide 76
Slide 77
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.
Slide 78
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.
Slide 79
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.
Slide 80
CharacterNameEntityDecimal Copyright sign Trademark Registered
trademark Degrees Lowercase e with acute Lowercase i with acute
Lowercase n with tilde Nonbreaking space
Slide 81
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.
Slide 82
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.
Slide 83
Slide 84
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.
Slide 85
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.
Slide 86
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.
Slide 87
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.
Slide 88
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"
Slide 89
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
Slide 90
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
Slide 91
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.
Slide 92
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.
Slide 93
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
Slide 94
Slide 95
Slide 96
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
Slide 97
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.
Slide 98
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
Slide 99
Slide 100
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.
Slide 101
Slide 102
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.
Slide 103
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.
Slide 104
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).
Slide 105
Go to bpi.edu Download hot_dog and welcome and save them in
your Website folder
Slide 106
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.
Slide 107
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.
Slide 108
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:
Slide 109
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.
Slide 110
Slide 111
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."
Slide 112
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.
Slide 113
Slide 114
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).
Slide 115
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 />.
Slide 116
Add Welcome.jpg to your home page
Slide 117
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.
Slide 118
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.
Slide 119
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.
Slide 120
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.
Slide 121
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:
Slide 122
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
Slide 123
yummy
Slide 124
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.
Slide 125
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.
Slide 126
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.
Slide 127
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.
Slide 128
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.
Slide 129
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:
Slide 130
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.
Slide 131
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.
Slide 132
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.
Slide 133
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).
Slide 134
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
Slide 135
Slide 136
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
Slide 137
Slide 138
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)
Slide 139
Adding Borders To add borders, you can add a border= attribute
to the tag. This is the syntax:border="x
Slide 140
Slide 141
border = 1
Slide 142
Breaking it down
Slide 143
Header and data cells
Slide 144
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
Slide 145
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.
Slide 146
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.
Slide 147
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
Slide 148
cellspacing = 0
Slide 149
Try this
Slide 150
cellspacing = 10
Slide 151
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.
Slide 152
cellpadding = 10
Slide 153
cellpadding vs. cellspacing
Slide 154
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:
Slide 155
Try some values
Slide 156
Try it
Slide 157
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.
Slide 158
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
Slide 159
align = right Hot Dog 150 Bun 90 Ketchup 10
Slide 160
Slide 161
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.
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"
Slide 165
colspan = 2 Row 2 Column 1 Row 2 Column 2
Slide 166
colspan = 3 Row 2 Column 1
Slide 167
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
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: