HTML is a coding language

8/7/2019 HTML is a coding language

http://slidepdf.com/reader/full/html-is-a-coding-language 1/23

HTML is a coding language. This means it doesn't require computerprogramming skills. Coding and programming are two different things. BecauseHTML is a coding language, it makes it a lot easier to learn! (If you want to do webprogramming after you learn to code HTML, look up JavaScript.)

HTML makes up all of the web sites on the Internet. Even sites like YouTube

and Facebook are created in HTML code. If you're looking to be a web designer, youcan learn HTML fairly quickly online, and it'll look great on your resume!

Even the most advanced, professional web page consists of two major sections:head and body.

This HTML code is fairly easily shown in a code sample snippet:

<html>

<head><title>the title for this web page is typed here</title></head>

<body>the actual content for the web page window (the viewport) goes here</body></html>

After reading over the code above, you probably noticed something.HTML is mainly just composed of words in brackets (less than and greater symbols).

In general, coders call these words in brackets tags. The start of the head sectionstarts with this tag:

<head>

and ends with this tag:

</head>

The first tag, head in brackets, is called the opening tag. The second tag listed, thehead in brackets started with a slash, is called the closing tag. So, we know that:

<head>

is an opening tag, and that

</head>

is a closing tag.

Most HTML tags are paired... meaning they have both an opening and closing tag. There are a few tags that are not paired, but we'll cover that later.

The stuff in the head of each web page loads before the stuff in the rest of the webpage. The title of the web page, which is seen as the tab label in most web browsers





2. We aren't telling anyone what language our web page is. We can makesomeone guess it's some version of English, but we shouldn't make anyoneguess that.

There are multiple versions of HTML, and web sites are written in many differentlanguages, so we're going to need to add a few extra parts to our page to make it

perfect.

A basic HTML web page will show up in a web browser decently without youspecifying what version of HTML you're using, but it'll most likely trigger whatdesigners call "Quirks Mode" which is absolutely no fun for anyone, so from now on,you're going to need to add a little bit of tedious code to the top of each HTML file tolet it know what version of HTML you're writing.

For now, we're going to use the HTML 4.01 version, although some pros use a versionof XHTML. I prefer HTML 4.01 because it's a bit more forgiving and I feel I can codemore creatively.

The HTML DOCTYPE

You may have guessed now that the version of HTML should be the first part of thepage, definitely before the head and body. If you guessed that, congratulations!

The DOCTYPE as we call it, which tells what version of HTML we're using,needs to go before even the first opening html tag. For HTML 4.01, you can actuallypick from several different copy-and-paste DOCTYPEs, but I'm going to use HTML4.01 transitional for the remainder of this guide.

Here is the DOCTYPE that lets everyone know we don't want Quirks Mode... we knowwhat we're doing here!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html>...rest of the HTML code for the web page</html>

As you learn more about web design, you'll be able to understand that linecompletely. For right now, I wouldn't spend too much thought on it. You shouldnotice, however, that it points to a web site at www.w3.org. The people who runthat web site are the W3C, and they decide web standards.

Do you really have to copy and paste that into every web page you write? Yes.

But, there is a happy note. The new version of HTML5, has a really easy to memorizeDOCTYPE:

<!DOCTYPE HTML>

This is one of the main reasons I'm totally excited about HTML5.

http://www.bobasyourguide.com/html_code_tutorial/html_head_title_and_body/

http://www.bobasyourguide.com/html_code_tutorial/html_head_title_and_body/



Unfortunately, HTML5 is not official yet, so we're all stuck using older versions fornow.

Character Encoding - What Language is this Web Page?

If you've been surfing the web for more than a few weeks, you may have noticedsometimes you read web pages with jumbled characters (sometimes weird questionmarks in a strange font) and you're thinking, "What the heck did they do to this webpage?" You might think of the English alphabet as the letters A to Z, the numbers 0 to9, and some symbols. But we actually use a lot more than that, and we need to beable to identify more than just that limited set.

Take the word "Computer." Each letter in computer, the C, the o, the m, and so on, isa character. But, quotation marks, and periods, are also characters. We're going towant our web page to follow a standard set of characters for full support on theInternet, so we're going to need to add another snippet of code to the head our webpages:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> This is another joyous occasion where I just suggest you copy-and-paste and learnthe details later. No one wants to start their web design career with a whole bunch of confusing details, so make a note that it'll be something "fun" to learn someday andlet's get to more HTML coding!

So, now including the DOCTYPE and encoding, our basic, full-fledged approved basicHTML page looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> Web Page Title! ... </title></head><body>...rest of the HTML code for the web page</body></html>

Yeah, that's a lot of code to do almost nothing... but the benefit is that the rest of HTML is actually really fun!

Learning the rest of HTML requires you to know just a little bit of Web history. TheInternet itself has been around for decades. The web part of the Internet, the part

you use to access Facebook, check stock quotes, and watch YouTube, actually onlystarted in the early 1990s. The web originally began as a way to link togetherscientific papers.

Playing games and watching videos was not part of the first few versions of HTML. The key was effective presentation of papers, which is why a lot of basic HTML has todo with section headings, paragraphs, lists, and quotes.



So, for your first real HTML tags for the body of your web page, Iintroduce, the h headers. They come in six divisions, from h1 to h6, which areintended to be nested like you would nest an outline for a book.

What do I mean? Well, h1 is really big. But it can have h2 under it, which can haveh3 under it, and so on, here's an example:

<h1>Bob's Web Design Club</h1><h2>Club Mission</h2><p>Some mission stuff here.</p><h2>Club Events</h2><h3>Events that Involve Sunlight and Fresh Air</h3><h3>Events that Involve Everyone Playing Computer Games</h3>

Here's what it looks like (I took a snapshot of it for you):

Before using cascading style sheets styling, which is covered later on my site, this iswhat the plain web page looks like. Sadly, all web pages start looking boring like thisbefore they're styled with cascading style sheets (CSS)!

But let's not get ahead of ourselves. You can see in the code, that Bob's Web DesignClub is the main point, and it has smaller points, the Club Mission, and Club Events.We made Club Mission and Club Events heading level 2 (h2) because it was aheading under the main point of Bob's Web Design Club (h1). The Events that InvolveSunlight and Events that Involve Computer Games are both level 3 headings becausethey're under the level 2 of Club Events.

I'm going to reshow the code again, but indented so you can have a visual look athow HTML headings are coded:

<h1>Bob's Web Design Club</h1><h2>Club Mission</h2><p>Some mission stuff here.</p><h2>Club Events</h2><h3>Events that Involve Sunlight and Fresh Air</h3><h3>Events that Involve Everyone Playing Computer Games</h3>



I'm going to cover how to make this sparkle with style later on, but we need to coversome more HTML tags before we jump to CSS styles.

HTML Paragraphs

The headings chapter talked about how a web page is broken into several sectionsusing tags like h1 and h2. In between these tags, we write text, which are usuallybroken into paragraphs. Paragraphs have a super simple opening tag p and it has amatching closing tag.

Here's the not so surprising example:

<p>Bob's Web Design Club was founded in 2010 to promote elegant webdesign. This next sentencehere is completely useless but it's a great demonstration of how toproperly use the HTML paragraphtag.</p>

Paragraphs on the Internet generally do not have an indent, but it'spossible to add one using CSS later. You can use many paragraphs in any web page.

The BR Break

Sometimes you will need to break up text beyond just using paragraphs. You shouldtry to use paragraphs first because they're the easiest way for your visitors to readlines of text, but if you ever need to force a break yourself, you can use br.

Example of the BR break:

Here is a line of text.<br>Here is another line after a forced break.

This example displays as:

Here is a line of text.Here is another line after a forced break.

The HR Horizontal Rule

Sometimes you will want a visual break between paragraphs or sections of a webpage. You can use the hr tag for this purpose. It's pretty simple, here's an example:

<p>Here is a short paragraph.</p>

<hr><p>Here is another short paragraph.</p>

The code displays as:

Here is a short paragraph.

Here is another short paragraph.



The line above is the horizontal rule.

Quotes and Text Formatting

Blockquote

As you probably read in an earlier chapter, the web started as a place to sharescientific papers. Papers are almost always written including some sort of quotesfrom other materials, and because of that, HTML comes with a built-in blockquotetag. Here's an example:

<blockquote>I think Bob's Web Design Club is absolutely fantastic!</blockquote>

This shows as:

I think Bob's Web Design Club is absolutely fantastic!

Longer examples will make even more sense, here's the extended quote:

<blockquote>I think Bob's Web Design Club is absolutely fantastic!I've never actually been to a meeting, but I know Bob very well andhe bribed me with pizza and asked if I could say something great abouthis club.</blockquote>

This code displays as:

I think Bob's Web Design Club is absolutely fantastic! I've never actually been to ameeting, but I know Bob very well and he bribed me with pizza and asked if I couldsay something great about his club.

A blockquote comes with an indentation automatically, although you can make itlook even fancier later with CSS.

Strong and Emphasis Tags

If you want a part of text to stand out, you can put strong tags around it, here's anexample:

Being on time to Bob's Web Design Club is <strong>completelyoptional.</strong>

This shows in HTML as:Being on time to Bob's Web Design Club is completely optional.

In the old days we used to just use b meaning bold, but we're probably not going tobe using b when HTML5 is done, so it's best to just get in the habit of using stronginstead right now.

Say you want to emphasis part of some text, you can use the em tag. Here's anexample:



Bob warns all newcomers that being late means<em>there will probably be absolutely no pizza left for you.</em>

This shows as: Bob warns all newcomers that being late means there will probably beabsolutely no pizza left for you.

In the old days we used to just used i for italics, but as noted above, it's best to justuse em because it'll be more compatible when HTML5 comes around!

Whitespace and Special Characters

When you're coding HTML, extra spaces and extra lines are combined together. If youtype 10 spaces, you won't get 10 spaces. Here's an example:

I typed this sentence. I typed this sentence after a bunchof spaces.

When the web page is displayed, it's shown as this without the spaces:

I typed this sentence. I typed this sentence after a bunch of spaces.

Lines do not capture your breaks, for example, you would guess this line would showup right:

A first line.A second line.A third line.

But in HTML, it'll just show as this:A first line. A second line. A third line.

If you want to separate lines, you'll have to use a br to force the break as noted inthe previous chapter.

A first line.<br>A second line after a forced break.

Special Characters

If you want to actually show a less than sign < you need to type < and if you wantto write a greater than sign, I recommend you type > (although some peoplewould argue it's not needed for the greater than since it doesn't start a tag like lessthan.)

< BOB >

That shows in HTML as:< Bob >

And no, Bob is not a valid HTML tag. I didn't win that fight.



To show an ampersand & you can use & and to show a copyright symbol © youcan use ©

There are many more special characters but for now those are the basic ones toremember.

Ordered Lists

Ordered lists are used when the order matters. Because of this, they usually show upas numbers automatically, without you having to type the number yourself. The listitself as an opening <ol> tag meaning ordered list, but each item in the list has anopening <li> tag. (They both have closing tags as well.) For example:

Preparations for Web Design Club<ol><li>Decide on Toppings</li><li>Call Pizzeria</li><li>Place Order</li><li>Wait for Delivery</li>

</ol>

When displayed as HTML, the numbers are added automatically like this:

Preparations for Web Design Club

1. Decide on Toppings2. Call Pizzeria3. Place Order4. Wait for Delivery

Unordered Lists

But what if we're picking from toppings? They don't need an order, so we could usean unordered list, which is almost identical to the ordered list, except we use ul tagsinstead of ol tags.

<ul><li>Pepperoni</li><li>Sausage</li><li>Filet Mignon</li>

</ul>

Those 3 toppings will show but without numbers like this:

• Pepperoni• Sausage

• Filet Mignon

Definition Lists



Sometimes you'll want to make a list of definitions. Remember, the web started as away to show science papers, so you might not use a definition list on every web siteyou make, but you need to know it!

The basics: dl starts the list, meaning definition list. Each definition term is called dtand each definition is called dd which I suspect stands for definition definition which

is sort of redundant but it's stylish.

Here's an example of a definition list:

Describing a Club Meeting<dl><dt>Good</dt><dd>Pizza arrived on time. Everyone had fun.</dd><dt>Excellent</dt><dd>Pizza was early.</dd><dt>Superb</dt><dd>Pizza was early and accidentally had a bonus filet mignon

pizza.</dd>

</dl>

This list displays as:

Describing a Club Meeting

GoodPizza arrived on time. Everyone had fun.

ExcellentPizza was early.

SuperbPizza was early and accidentally had a bonus filet mignon pizza.

When I first taught web design over ten years ago, I was able to describe links as thatblue text with the underline that you can click. Unfortunately, or fortunately,depending on how you look at it, links are not always blue, and don't always have anunderline. So basically, links are now just a part of a web page you can click to gosomewhere.

Let's say you want a link to go to the main bobasyourguide.com web page. You needto start the link with http:// which tells the computer that you're making a link to aweb server and not another server.

(There is also another server called a file transfer server. ftp servers also have links,that's why you can't just type bobasyourguide.com, it needs to behttp://www.bobasyourguide.com.)

A web link starts with an anchor tag a with an href attribute inside it, inquotes. So when you're coding, you first start with:

<a>



Next, you add the attribute code with the web link inside quotes:

<a href="http://www.bobasyourguide.com/">

Then, you add the text you to show as the link, and end it all with a closing /a:

<a href="http://www.bobasyourguide.com/">Learn Web Design From Bob</a>

The final product:Learn Web Design from Bob

Inside Site Links

When you launch your web site, you'll have your own domain name (the dot com, dotnet, dot info, whatever you choose) which will have something known as thedocument root, the very base of the web site. The full path document root forbobasyourguide.com for web links is:

http://www.bobasyourguide.com/

When someone links to my web site (thank you!) to my CSS guide that you'll betaking next, they have to use the full web address in the link, like this:

<a href="http://www.bobasyourguide.com/css_code_tutorial/">Bob's CSSCode Tutorial</a>

But for $5 a month, I proudly own bobasyourguide.com where I am teaching you webdesign. When I link to the CSS guide from this HTML guide, I use a relative path, notthe full insanely long document path. Here's what I get to cheat and use:

<a href="/css_code_tutorial/">CSS Code Tutorial</a>

What's this code mean? The first slash / means, automatically fill in the full documentroot path for me so I can spend my time in Photoshop or PaintShop Pro and not wasteit coding. I mean, to me, that's what it says. Let's just say it saves time.

I didn't have to type http://www.bobasyourguide.com/ because I own that site and I'mworking on pages inside that site. Pretty cool, huh? Once it sinks in, you'll realize howawesome it is!

Brain Reaches Capacity...

This stuff is all covered in depth with more explanations in the Web Hosting Tutorial which I just linked to with this code:

<a href="/web_hosting_tutorial/>Web Hosting Tutorial</a>

You'll find a lot more information about links in the web hosting tutorial, which willhelp make it all make better sense to you. But for now, we have to cover one morehuge important link concept, before we move onto amazing images (HTML is morethan just text!)


http://www.bobasyourguide.com/web_hosting_tutorial/





Named Page Anchors

Have you ever seen a little link at the bottom of a web page that says top or go totop? It's a great concept. Basically, you can just create an anchor point using thissort of code around your h1 heading or another part of the page. Here's an example Imade for the Inside Site Links page above. The header you just read, is a level 3

header h3 and I added an anchor name around it like this:

<a name="topSecretInfo"><h3>Inside Site Links</h3></a>

It's not really top secret, I just wanted to be creative. That's how I roll.

Now, to link to that named anchor, I need to use a # and the anchor name, which istopSecretInfo which I can code like this:

<a href="#topSecretInfo">Jump Back to Inside Site Links</a>

Here's that link in action. It'll take you back to that section when you click it:

Jump Back to Inside Site Links

If you've been following this guide in chapter order, you haven't really run intoimages at all yet. Images include graphics and pictures as well as art. Typically, websites use one of three types of images:

GIFUsed for simple artwork and line art with only a few colors (256 or fewer)

JPGUsed for photographs or complex graphics.

PNGUses vary, often used in place of GIF and sometimes in place of JPG.

(The definition list above is made from code from the HTML Lists chapter.)

The BMP file format, once common on Windows computers, should not beused on the web.

Okay, so I invested about 5 minutes in Photoshop (an image editor from a companycalled Adobe, the makers of Flash). I called it BobsWebDesignClub.png.

I transferred the image to my web site space at GreenGeeks Hosting (on my $5 amonth package, let me remind ya) using SFTP. You can read about copying files fromyour computer to your web space in my Web Hosting Tutorial.

When I copied the file over, I put it in the html_code_tutorial folder, and inside theimages folder I put in the html_code_tutorial folder. So on the web site, it's here:

/html_code_tutorial/images/BobsWebDesignClub.png

Like I said above, copying files and putting them in the right folders is all covered inthe Web Hosting Tutorial.

http://www.bobasyourguide.com/html_code_tutorial/html_links/#topSecretInfo%23topSecretInfo


http://www.bobasyourguide.com/html_code_tutorial/html_lists_ordered_unordered_and_definition_lists/












Geek Note: Folders on web hosts are actually called directories. So you might seetutorials write about directories instead of folders. That's completely normal.

We need to know a few pieces of information to load an image:

• the file location (we have that)

• the width and height in pixels (tiny dots across and dots down)• what we want someone who doesn't load the images to see instead of the

image (alt attribute)

I went back into Photoshop and found out that the width is 480 pixels and theheight is 50 pixels. If someone isn't loading images, I want it to say "Bob's WebDesign Club." You put what you want it to say instead of the image as the altattribute. If you don't want it to say anything, you just use alt="".

An image tag starts with img but it has no closing tag.

So, here's the code for this image:

<img src="/html_code_tutorial/images/BobsWebDesignClub.png"

width="480" height="50" alt="Bob's Web Design Club">

Notice that the width, height, and alt attributes are all surrounded by quotationmarks. That's how you should code attributes. Let me show you again:

<img src="/html_code_tutorial/images/BobsWebDesignClub.png"width="480" height="50" alt="Bob's Web Design Club">

Don't forget to quote your attributes!

And the image loaded with that HTML Code:

If you use really big images, it may slow your web page and take several minutes (orhours) to load, or may crash the web browser completely. You'll learn proper imageusage over time.

Links and Images Together -- Img'in That? No, A'Img'In,Nevermind.

You can combine links and images. Let's pretend I went into Photoshop and made anew image for bobasyourguide.com. We'll pretend its called BobLogo.png and it's ina folder I called images. I (thought to have) made it 150 pixels wide and 50 pixelstall. I want it to, not surprisingly, link to bobasyourguide.com. Here's the (pretend)code:

<a href="http://www.bobasyourguide.com/"><img

src="/images/BobLogo.png" width="150" height="50" alt="Bob, As YourGuide!"></a>



As you can see, you're just putting an image in the space you would have normallyput link text. Don't forget to add the /a at the end!

HTML doesn't let you pick the font you want. As you probably remembering reading in

the HTML Code Tutorial, you can use HTML to make something bold (strong) or italicized (em) but you can't change the font style itself with HTML.

So how do you change the font? You get to use cascading style sheets! CSS Styles are alot of fun when you know the basics.

Did you just finish the HTML Code Tutorial? When we learned about h1 headings, weused this HTML code:

<h1>Bob's Web Design Club</h1>

How would we change that heading to use an Arial font and have the whole heading begreen instead of the default black? Here you go:

h1 { color: green; font-family: Arial; }

This code would go in a special file or in a special section in the head area of the web page, which I'll explain shortly. But let me explain this line first.

Outside the curly brackets is what we call the selector. In this case, the selector is h1 ...notice that you do not use the brackets around the tag when it is a selector.

Placing h1 as the selector means "select all the h1 tags in the web page, and apply thisstyle to it."

color and font-family are called properties. So we're saying, select all the h1 tags, andset the color property of every h1 to the value green and set the font-family property

of every h1 to the value Arial.

When you set a style, you type the property name then place a colon : and then thevalue you want set, and then a semi-colon ;

Said another way, this is the way you create a style:

selector { property: value; property: value; property: value; }

The sample I just typed for you has 3 property/value pairs. A style statement can havezero or more property/value pairs. That means this is valid:

h1 { }

http://www.bobasyourguide.com/html_code_tutorial/

http://www.bobasyourguide.com/css_code_tutorial/








An empty selector statement like that does nothing, but it's legal and it can be used as a placeholder for when you add stuff later.

Most CSS files are many lines long. Sometimes a file can be hundreds (or eventhousands) of lines long. But let's talk a little about multiple line CSS files. The code:

h1 { color: green; font-family: Arial; }

and the code:h1 { color: green; }h1 { font-family: Arial; }

actually do the same thing. They both set the h1 tags in the page to green and Arial.

As you can guess, the combination statement is much more efficient and is the way itshould be done when possible.

Here's where it gets a little tricky. What if you typed:

h1 { color: green; font-family: Arial; }h1 { color: red; }

When you use these two lines together, the first line sets every h1 to the color green andthe Arial font, but when the second h1 line is hit, the green color is changed to red for allthe h1 tags, but the Arial stays automatically, meaning every h1 will still be Arial! CSSstatements add up. Welcome to the power of CSS!

You can put the styles for CSS in one of three places.

1. a separate file, linked2. the top of the web page in the head3. inline

I'll cover inline first, because it's rare but you need to know it.

To use inline CSS, you add a style attribute inside the tag. The following inline stylemakes this single h1 green.

<h1 style="color: green;">This Is a Green Heading</h1>

The problem with this is that you'd have to type that style into every single h1 youwanted green, which is pretty much a complete waste of time.

Your next option is to include the code in a special <style> section at the top of the web page. If you just finished the HTML Code Tutorial, you probably remember the tacky, boring Bob's Web Design Club headings example. We can do amazing things with thatfile with CSS!






First, let's look at the boring HTML code:

<h1>Bob's Web Design Club</h1><h2>Club Mission</h2><p>Some mission stuff here.</p><h2>Club Events</h2>

<h3>Events that Involve Sunlight and Fresh Air</h3><h3>Events that Involve Everyone Playing Computer Games</h3>

It looks like this when it's viewed:

Boring, right?

Now, we'll add some code at the top of the web page, to make all of the headings green,

and push the h2 to the right 20 pixels, and push the h3 to the right 40 pixels. This codewill go in the head section of the web page.

<style type="text/css">h1, h2, h3 { color: green; }h2 { margin-left: 20px; }h3 { margin-left: 40px; }</style>

The commas between h1, h2, and h3 means apply this to the first one, the second one,and the third one. If we instead said:

h1, p { color: green; }

all the h1 headings, and all the paragraphs would be green.

Adding the example mentioned above, our entire HTML file looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>



<head><title>Bob's Web Design Club</title><style type="text/css">h1, h2, h3 { color: green; }h2 { margin-left: 20px; }h3 { margin-left: 40px; }</style></head><body><h1>Bob's Web Design Club</h1><h2>Club Mission</h2><p>Some mission stuff here.</p><h2>Club Events</h2><h3>Events that Involve Sunlight and Fresh Air</h3><h3>Events that Involve Everyone Playing Computer Games</h3></body></html>

Our page now looks like this:

It's getting better, but we should really include that style sheet in a CSS file separate fromthe web page, so we don't have to type all that CSS code into every web page we make.

You can pick a name for your CSS files, but it needs to end with .css. When you put CSSin a separate file, you do not use the <style> tags, just the code itself.

I named our test .css file bobsclub.css and uploaded it to my web server (copying files toyour web server is covered in the Web Hosting Tutorial.) The CSS file itself just lookslike this:

h1, h2, h3 { color: green; }h2 { margin-left: 20px; }h3 { margin-left: 40px; }





Now, for every new web page we want to use that style sheet, we just use the link code inthe page head section, like this:<link rel="stylesheet" type="text/css" href="/bobsclub.css" media="all">

The web page looks exactly the same to our visitor, but our HTML code now looks likethis instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Bob's Web Design Club</title><link rel="stylesheet" type="text/css" href="/bobsclub.css" media="all"></head><body><h1>Bob's Web Design Club</h1><h2>Club Mission</h2><p>Some mission stuff here.</p><h2>Club Events</h2>

<h3>Events that Involve Sunlight and Fresh Air</h3><h3>Events that Involve Everyone Playing Computer Games</h3></body></html>

Notice that the head now includes a link to the CSS file, not actual CSS code. We canuse that link in every web page we want to style, and changing bobsclub.css will changeevery page on the web site linked automatically!

One of the first things you want to customize on a web page is the default page font. Toset the regular font used for the entire web page, you set the name of the font as the font-

family property. The font-family property is comma-separated, meaning it can have morethan one value (multiple fonts) with a comma between each value (that is, between eachfont). It's best to put at least two specific font names and then one default fallback font.Fallback fonts are covered a little bit later in this chapter.

In CSS 2.1 (the current version of CSS), the font has to be loaded on the computer thatvisits the web site before the web site is loaded. That means if you try to load "ReallyAwesome Font" and the visitor doesn't have "Really Awesome Font" already installed,the web page will show in the next one in the list, if that one is found. If none of the fontsare found, the default fallback font will be shown.

The typical fallback font, meaning the very last font in the comma-separated list, isgenerally named serif or sans-serif . Serif fonts have those little "feet" while sans-serif have no "feet." You can also pick from the set of default fonts listed below.

(List of Default Fonts Coming Soon)

Now, to the examples! If you used this simple code:



body { font-family: sans-serif; }

This code would make all of the web page between the opening body and the closing/body into the default fallback sans-serif font. You can then override the font and pick anew font for things like h1 headings, lists, paragraphs, or any other section of the pagewith a little bit extra code. I'll cover this below.

As I mentioned, you can try multiple fonts separated by commas, and the first font foundon the visitor's computer will be the one used on the web page.

The code below will set the page to Arial if Arial is installed on the computer, and if Arial is not found, a default sans-serif fallback font will be selected.

body { font-family: Arial, sans-serif; }

Pay particular attention to the comma. There are two fonts in the list, and a commaseparates them (hence the term, comma-separated list!) You could easily list three or four

fonts. If you read other designers CSS code, you may notice some use five or more fontsin their lists!

The next example is a little tacky (poor design) because it combines serif and sans-serif fonts in a way that might not look that great. I'm showing you for sake of example, Iwouldn't recommend mixing default fallback fonts in this way in a live, real web site.

I already showed you an example that changed the entire body area of the web page to asans-serif font, but for demonstration purposes here I'm adding a second rule that makesevery h1 into Times New Roman with a fallback of serif.

body { font-family: Arial, sans-serif; }h1 { font-family: "Times New Roman", serif; }

As you can see from this example, you use fonts for different areas of a web pagehowever you want. If you are using a font name with spaces in it, you need to put quotesaround the entire font name, before the comma. It's "Times New Roman" then a comma,not "Times New Roman," ... the comma comes after the last of the quotes.

Something you will run into often is the need to bold specific sections of a page. Imagineyou wanted to make all paragraphs show in bold. You could use this code:

p { font-weight: bold; }

There is no way I can explain every bit of CSS in a web site as short as my site. The bestway to learn all of CSS is to buy the book CSS: The Missing Manual. I have it on myshelf and it's amazing, I think every new web designer should read it.

Adjusting Font Sizes

http://www.bobasyourguide.com/affrdr/book_cssmissing2nd/





As you can imagine, you can also change font sizes for any section of the web page. Youcan use different measurements when changing sizes, such as px for pixels or ems, em being related to the current size. The use of em and px properly is beyond the scope of this particular page, because you can easily read 10 pages in a book on that topic! I'drecommend the book above, if you haven't already ordered a copy.

I'm going to describe how to use px in the examples below.

Imagine you wanted the regular body text to be 16px, but you wanted the h1 headingstags to be 32px. You could use this code:

body { font-size: 16px; }h1 { font-size: 32px; }

You can include multiple properties (combining things like font typeface, font-size, andcolor, which is covered next) into one selector statement, so you could type:

body { font-size: 16px; font-family: Arial, sans-serif; }h1 { font-size: 32px; }

Because h1 is always found inside the body, like this:

<body><h1>Random Heading</h1><p>A Paragraph.</p>

</body>...in this code, everything within the body is in the Arial font if itsinstalled on the visitor's computer, and sans-serif otherwise. All thetext automatically is sized to 16px, except the h1 which is increasedto 32px. Because h1 is inside the body and /body it inherits the font-family value.

Text, backgrounds, and borders can all have color assignments.

In this simple example, the text of all paragraphs is set to yellow.

p { color: yellow; }

If we set the color property for text, we should also set the background-color propertyso we know the text will be readable. Otherwise you could end up with a combination

that's not viewable, which upsets visitors and will most definitely make them close your site.

Here's how you could set the text to yellow and the background color to black. Noticethat when you set a background color with CSS, you need to use a dash between thewords background and color, that is you need to type background-color.

p { color: yellow; background-color: black; }



Please note that your background color does not have to bee that. *chuckle* You can pick your own colors.

A typical computer can show thousands or even millions of colors, and no one canmemorize millions of names. Instead of using names for colors, designers usually use

hexadecimal color codes, although there is over a dozen named colors (like red, green, blue, etc). When you use a hexadecimal color, you can get more exact colors to what youwant. No one wants a web site with colors that are just from a 16-pack crayon box!Variety is key.

CSS3, when released, will allow you to set a transparency called alpha that will let colors be partially see-through, but for now you're stuck with colors that are fully opaque (youcan't see through them at all). For now we're stuck with CSS2.1 support because a lot of people still view the web with old versions of Internet Explorer that don't work with thealpha channel properly.

Here's an example of three shades of green in hexadecimal, which starts with a #. Thefourth color is the named color green, just by using background-color: green

Color Code Color Display

#10982c

#4bd467

#aff0a7

Named color: green

green

Using color codes gives you a lot more choices than just picking from a named color.

People generally don't memorize color codes, but the five below are good to know.

Color Code Color Display

Black #000000

White #FFFFFF

Red #FF0000

Green #00FF00

Blue #0000FF

You can find color pickers and color scheme galleries on the web to help you selectcolors. Professionals can use a graphics application like Photoshop or PaintShop Pro tofind the color code they want as well.



PaintShop Pro is a great purchase. I started designing with PaintShop Pro because Icouldn't afford a copy of Photoshop, a $___ purchase, right away. Once I saved enoughmoney from my business, I was able to purchase Photoshop from Adobe, but it was yearslater. PaintShop Pro did me great for my beginning years.

The hexadecimal color code is typed directly after the colon in color: or background-color: ...this code would put red on white using hexadecimals in all paragraphs:

p { color: #FF0000; background-color: #FFFFFF; }

You must always include the # otherwise the codes will not work in 100% of browsers.

Tags usually inherit, so if the body is set to a color of red, and there is an h1 without acolor, the h1 will inherit the red from the body, as shown in this code:

body { color: red; font-size: 16px; }h1 { font-size: 32px; }

In the example above, the h1 will be red because it inherited the red found in the bodytag style around it. If instead, we wanted to force every h1 to be orange, while the rest of the body is red, we'd have to specify the color within the h1 like this:

h1 { color: orange; }

or by using a hexadecimal # color code we selected for orange.

Using hexadecimals may seem difficult at first, but mastering their usage allows you tomake a great-looking web site

When we think of web design, we often think of a graphic-rich, cutting-edge web site(probably costing thousands of dollars, or more) created with software designapplications like Adobe Dreamweaver and Photoshop. But web design isn't just anisolated field for people who like to do art. It's part of a greater field called interaction

design.

We all tend to do basic interaction with technology, often on a daily basis. If you've useda microwave oven, you've probably pressed buttons to set a cook time. Many microwaves beep when you push the button to set the time--this is a type of feedback . When themicrowave is done cooking, it most likely beeps again, which is also a form of feedback.

Now think of something in web design as simple as a web link. If you know much aboutcascading style sheets (CSS) you may know that there is a state for a link called :hover and a state for a link called :active. :hover is a style you want to be displayed when a pointer such as a mouse cursor is on the link but not yet clicked. :active is a style that isdisplayed when a link is clicked (aka activated.)








Web visitors are very accustomed to feedback and really expect it nearly all the time.When a text link can be clicked, people generally expect it to be shown with an underline,setting it apart from the rest of the web page, so they know it's a link. In the history of web design, web links started as blue and blue still dominates the expected color for links, which is why sites like Facebook and Google are still centered around the color

blue.

Just consider this example of two links called Link A and Link B.

Link A uses this style code:

a:link { color: black; text-decoration: none; }

Link B uses this style code:

a:link { color: blue; text-decoration: none; }a:hover { text-decoration: underline; }

Here are the links in action:This is a sample Link AThis is a sample link B

You should notice that Link A provides very little feedback, the only change when youmove over it with a mouse is that the cursor changes. Someone browsing with a touchscreen cell phone or a tablet like an iPad would have no idea that link A was a link.

Link B on the other hand, separates itself with a common, clear link color, and has afeedback-based hover that helps the site visitor to know its a clickable link.

These are the little things you'll need to take into account when you start developing websites, whether it's for yourself or for other people. The little details can make a good sitegreat, and missing the details could make a potentially great site into a complete disaster.

http://www.bobasyourguide.com/webdesign_tutorial/web_design_basics_thinking_of_the_visitor/#linkExampleAnchor%23linkExampleAnchor





Documents

HTML is a coding language