Basic HTML creates a semantic structure forsophisticated CSS designs.

HTML and CSS | Intro to HTML and CSS

Course Developer: Christopher Schmitt Instructor: Margaret Penney, Mai Hlee Xiong, Hannah ShafferEditors: Gordon Drummond, Rachel Sokol

Christopher Schmitt

Hi there. Learning to writeprofessional, standards­compliant Web codesounds like a challenge foranyone without a pocketprotector or a computerscience degree. Goodnews, though. Thanks tothe efforts of the Webstandards movement,learning to correctly hand­code Web sites has actuallynever been easier. We'llexplore how the pros do it.

Intro to HTML and CSSFor visually­oriented designers,approaching the programmingaspects of Web design for the firsttime can be a challenge. But today'sWeb development practices offerclear ways to separate content anddesign, and that's where we'll beginour exploration of HTML and CSS.

First, some history: back in the1990s, Web designers used HTML(Hypertext Markup Language) tocraft the appearance of all contentthat appeared on a Web page.Today, designers continue to useHTML in combination with CSS(Cascading Style Sheets), along withsome other languages like JavaScript, to create much more sophisticateddesigns.

If you're new to Web coding, it might sound like learning to design Websites suddenly got a lot more challenging. Well fear not, friends. While thetechnologies that drive the Web get progressively richer every day, thebasic process of creating Web pages has become progressively morestreamlined and efficient.

In this class, you'll learn techniques that will prepare you for designingprofessional­standard Web pages using the up­to­the minute standards intechnology. Your bright, shining Web career starts right here...

In this lecture, you canexpect to:

Learn how today's Webdevelopment standardsevolved. Learn the benefits ofwriting standards­compliant code. Learn how to create avalid HTML page, writeHTML tags, and structurebasic page content. Learn how to addhyperlinks and insertimages to HTMLdocuments. Learn how to organizeWeb site files and FTPthem to the Web.

How The Web WorksGetting Started

Before we dive into the ins and outs of links and tags, let's make sureeveryone understands some important fundamentals about how the Webworks.

Below is a list of terms that I'll be using throughout the course, so let meknow now if any of this sounds like a foreign language to you!

The Web consists of millions of sites, each of which has aunique Web address or URL (for example,http://www.google.com).

Each site consists of many pages with related content.

Each page on a Web site can be viewed by a Web user on abrowser (such as Internet Explorer, Firefox, Safari) or on amobile device or tablet.

Web users navigate from one page to another by Weblinks, also called hyperlinks.

The most common format for creating a Web page is HTML

The original purpose ofHTML was to provide

structure to Webdocuments, not todictate how they

looked.

In this course, you willbe learning HTML 4.01

and HTML5.

Cascading StyleSheets (CSS) works inconjunction with HTML

to control thepresentation of

content.

(Hypertext Markup Language).

Designers create HTML and CSS documents that areuploaded to a Web server and published on the Internet.

Still with me? Good, because here's where it gets interesting for a designer.

A Short History of HTML

When HTML (Hypertext Markup Language) was originally developed in theearly 1990s, it was intended to provide structure to documents: to delineateheadings, paragraphs, block quotes, hyperlinks, and major sections of a Webpage. It was never intended to control the look of a Web page by specifyingfonts, colors, and the position of elements.

And yet, a funny thing happened on the way to the forum. As the Internetincreased in popularity, the demand to use HTML to control the look of Webpages increased too. And designers went along with it!

In order to emulate the kind of design control enjoyed in print media, Webdesigners manipulated HTML to do what it was never designed to do: markup the presentation of a document.

Imagine you were designing a Web site that consisted of twenty pages, andyou wanted to add certain design elements such as colors, fonts, sizing, andalignment to the site.

Using traditional HTML coding, every single element in a site's HTML pageneeded to be coded in order to create the specific colors, fonts, alignment,and layout that a designer wanted. The process was extremely tedious anderror­prone. A site's HTML documents quickly became bogged down withadditional code that made both content and code all but unmanageable.

CSS to the Rescue

This perilous situation could not last long, and CSS (Cascading Style Sheets)was developed to relieve HTML of the burden of presenting content. CSS is adistinct presentation language that is used in conjunction with HTML tocontrol the look of HTML elements.

The advent of CSS was a brave new world. You could use HTML to mark upthe structure of a Web page (to indicate "this is a paragraph" and "this is aheader"), and then use CSS to tell the browser what all of its componentslooked like ("paragraphs look like this; headers look like this").

A page using only HTML on the left, and the same page styled with CSS on the right

In addition, you could link multiple HTML documents to one CSS style sheet,letting you control the look of a whole site with one piece of code. This notonly made HTML documents much easier to work with (as HTML code wasnow much cleaner), but it also allowed designers to make site­wide changes

Using CSS facilitatessite design because alldesign styles can becreated, stored, and

edited in onedocument.

A site conforms toWeb standards when itmakes use of certaindesignated markup,presentation, and

scripting languages(like HTML, CSS, and

JavaScript).

Adhering to Webstandards benefits

everyone: designers,companies, and Web

users.

quickly and easily (by just changing the one CSS style sheet, rather thanhundreds of pages).

There was just one catch in CSS's rise to prominence. For years (and likelyfor years to come) HTML and CSS have both depended on the support of themanufacturers of Web browsers and other devices that allow people to viewpages on the Internet. When CSS was first developed, competing browsercompanies (Microsoft and Netscape) did not agree about which standards tosupport. Since "browser support" was spotty, CSS could not be guaranteed towork on all computers, slowing adoption.

As Web designers began to catch on to CSS's potential, however, and theWeb standards movement gained momentum, browser support became morereliable. Today it is the standard for designing the appearance of Web pages.

Innovations in HTML and CSS

Throughout this course, we are going to look at today's standard versions ofHTML and CSS (4.01 and 2.1 respectively) as well as the up­and­comingversions known as HTML5 and CSS3 (yes, these are really spelled withoutspaces in the names... it's all about the branding!). The standard versions willgive you everything you know to build and style your Web pages, whileHTML5 and CSS3 provide some special new features for easier coding andcutting­edge Web design.

These new features aren't entirely "ready for prime time," as they are notfully supported by all browsers yet, so we'll also discuss browser compatibilitythroughout the course. All this will give you a serious edge as a professionalWeb designer.

Course ObjectivesLearning Web Standards

What you are going to learn in this course is how to write standards­compliant code. Web standards are a set of "best practices" established bythe World Wide Web Consortium (among other organizations), whichattempts to standardize how we approach Web development.

When a Web page is said to adhere to Web standards, it means that, first ofall, it makes use of certain designated markup, presentation, and scriptinglanguages (like HTML, CSS, and JavaScript).

It also means that the designer has kept content and structure separate frompresentation (or the look of a Web page). HTML is used to mark up thestructure of the document, and CSS is used to tell the browser how all ofthese defined elements look (their color, size, position, and so on).

Learning to use Web standards offers huge benefits. Web standards areintended to make Web sites:

More accessible and usable. Your Web pagesshould be accessible by the widest possibleaudience and conform to good practices ofusability.

More cross­browser compatible. Your Webpages should be functional in every browser(including older and text­based browsers). Notethat this doesn't mean they should look exactly thesame in every browser (which is an impossibleendeavor, anyway).

Easier to maintain. You can edit, update, andredesign your Web site as efficiently as possible.

More likely to work in current and futurebrowsers and devices. Your Web site will be bestprepared for inevitable advances in technology.

CSS documents areeasier to update than

HTML documents,which often contain

"tag soup."

Less code in eachdocument makes forfaster downloadingand better search

engine optimization.

Do all of thesample

exercises ineach course

lecture. You'llinternalize the

concepts.

For you, the Web designer, there are also some very practical advantages toadopting Web standards and learning how to separate content frompresentation.

1. Code is cleaner and easier to maintain

Anyone who has muddled through coding (or worse, debugging!) an old­school HTML table­based layout knows the frustration of mucking throughhundreds of HTML tags. Using HTML to control the presentation of a pageresults in what's known as tag soup: a barely decipherable mess of codethat's difficult to maintain and prone to bugs.

By limiting your HTML code for what it was intended—structuring yourdocument—you end up with a clean, minimal document that's easy to read,easy to update, and easy to debug. It also makes it easier to make site­widechanges to the look of a Web site. If you want to, say, change the color of allyour links, instead of going through and changing each link, page by page,you just have to change one line of your global CSS style sheet.

2. Web pages are more accessible

Users who use alternative browsing methods (such as screen­readers or text­based browsers) will have a much easier time accessing your Web site if youkeep the HTML simple and semantically accurate. While such users mayrepresent a minority, there is basically no good reason to shut out theseusers from your Web site.

3. Smaller files = faster download

While modems are becoming increasingly faster, there are still plenty ofpeople who use dial­up, and even a small wait (a few seconds) can beirritating to users while waiting for a page to load. Using HTML in conjunctionwith CSS results in less code to download (and thus a faster loading time).Not only are the HTML files themselves smaller, but you generally only needto load one CSS file for an entire Web site.

4. Makes a site more search engine friendly

The more content that makes up an HTML document (rather thanpresentational markup), the easier it is for search engines like Google andYahoo! to accurately index it. And the more visible your site is to searchengines, the more visits you're likely to get. Search engine optimization isespecially important when designing sites for clients, who are likely todepend upon Web sites for their business!

A Note on Web Hosting Providers

By now you should have ad­free hosting set up for your sites. Assignmentsturned in with ad banners will be marked as incomplete. (You wouldn't wantto launch a client's Web site with pop­up ads and banners, much less yourown site, so please don't do it with your homework.)

You can pay for quality hosting, or try numerous sites that provide freehosting for minimal specs. Just like in the real world you'll have to determinewhich works best for you:

www.awardspace.comwww.biz.nfwww.agilityhoster.comwww.x10hosting.com

Please note: We are not affliated nor do we endorse these Web hosts. It isour reasonable assumption they will provide Web hosting at no cost to allowyou to host your assignments without interference from forced ads.

Elements like p and h1are enclosed in

brackets to createHTML tags: <p> and<h1>, for example.

How This Course Will Work

In this course, we're going to learn some pretty complex Web languages andhave fun doing it. In each lecture, you're going to learn coding hands­on,through a series of Try It Out exercises. You'll follow along with me as I showyou how to code different parts of a Web page.

There's no better way to understand and internalize code than writing it, so Iwant you to actually write and test code as you work through each lecture.You're going to apply the code that you've learned to each exercise thatfollows, so don't skim or skip over any topic!

In order to learn coding properly, I'm going to ask you to create all yourHTML and CSS documents using a text editor. A text editor is a softwareprogram that allows you to write text without any formatting (like Notepadfor Windows or TextEdit for Mac). Every PC has a text editor on it. It'srecommended to use a professional text editing tool like TextPad for PC orTextMate for Mac. jEdit is a great option that is available for Mac or PC).

Notepad for Windows (left) and TextEdit for Mac(right).

If you want to use your Apple computer's built in text editor, TextEdit, forediting pages (because, hey, it's free, right?), you might run into sometrouble with the editor stripping out your HTML. To work around that, go toTextEdit's preferences. Under New Document section, check "Plain text"under the Format subheading. Then in Open and Save section of preferences,select "Ignore rich text commands in HTML files." Hopefully that should getyou coding!

Don't use a word processing program like Microsoft Word or Apple Pages.These programs will add formatting to your text that will mess up your code.

Equally important, do not use an HTML editor such as Dreamweaver in thiscourse. As you develop proficiency as a designer, you may use an HTMLeditor in conjunction with hand­coding to create your page designs. For nowthough, you will learn best by hand­coding alone. You will learn coding that isvalid HTML, HTML5, and CSS (meaning that it doesn't break any rules) andproperly and semantically structured (separates structure from presentation).

In this first lecture, we'll start out slowly, by going over the basics of HTML.We'll cover how to make an HTML document, how to use some of the basicHTML tags to mark up your document, and how to organize a basic Web site.Your Web pages won't look great at this stage, but you will be building a firmfoundation for more visual designs in the lectures that follow.

Start off by downloading and expanding this ZIP file. This file contains alesson1 folder that you will use throughout this lecture. It is important thatyou do not move the files in this folder to new locations on your hard drive,so that all of the files work together properly.

Let's go!

Welcome to HTMLIf we merely wanted to display plain text in a Web browser, that would besimple. Suppose I wanted to display this content as a page on the Internet?

Open the barns folder inside the lesson1 folder you just downloaded. In thatfolder, open the barns_original.txt file in your text editor.

Get into a habitof closing alltags, like so:

<p>word</p>.

If I wanted to, I could just save this information as a text file(barns_original.txt) and post it to my Web server. Any Web browser iscapable of displaying a plain text file, and anyone looking at this file withtheir favorite browser would see something like this:

This page is minimally functional. All of the information is there. But where isthe text formatting? Where are the colors? The pictures? Most importantly,where are the links?

This page is missing everything that makes a Web page... a Web page! Notonly is it bereft of structure and visual interest, but it also lacks any form ofinteractivity. You can't click on anything. If the Internet were made up ofsuch stark, flat pages, it would be a sad place indeed.

We can begin breathing life into this bare document by structuring it withHTML. Let's start by covering the basic syntax of the language.

Writing TagsBrackets: Opening and Closing

The most fundamental piece of HTML syntax is the tag. HTML documents aremarked up entirely through tags. They specify not only the documentstructure (through delineating headers, paragraphs, lists, and the like), butalso specify other information about the document, like the document title ormeta­information.

The elements of an HTML document are short, 1­2 letter abbreviations forthe structural components of a page. These elements are enclosed in anopening and closing tag, like so:

<h1>Part One</h1>

Opening tags are made up of a less­than symbol (<), an abbreviation for anelement (here, h1), and the greater­than symbol (>).

Closing tags are just like opening tags, except the element abbreviation ispreceded by a forward slash (/). Note that there are generally no spacesbetween an element and a bracket.

The tags we're going to learn in this lecture are as follows:

Element Tags Element Tags

An HTML documentmust include a

DOCTYPE declaration,Head, and Body, and

be saved with an .htmlor .htm extension.

HTML documentsfollow strict nestingstructures. Head andbody tags must be

placed within the htmltags, for example, and

any content to bedisplayed on the Webpage must be includedwithin the body tags.

HTMLdocument

<html></html>

Definition list <dl></dl>

Page head <head></head>

Term <dt></dt>

Page title <title></title>

Definition ofterm

<dd></dd>

Page body <body></body>

Emphasis <em></em>

Header <h1>,<h2>...</h1>, </h2>

Strongemphasis

<strong></strong>

Paragraph <p></p> Computer code <code></code>

Orderedlist

<ol></ol> Short quote <q></q>

List item <li></li> Long quote <blockquote></blockquote>

Unorderedlist

<ul></ul> Anchor <a></a>

Image <img>

Note that in basic HTML, not all opening tags require a closing tag. Forexample, the browser knows that a paragraph has ended when a newparagraph begins, so a closing paragraph tag (</p>) is technically notrequired. It is, however, a good idea to get in the habit of closing all of yourtags.

Also note that a few tags are self­closing. For example, the horizontal­ruletag (<hr>) never actually encloses or wraps around any text: it simplyspecifies the presence of a horizontal line. It would be tedious to have toimmediately follow every opening horizontal­rule tag with a closing one, likethis: <hr></hr>. Instead, it's much easier to abbreviate: <hr /> Please notethat self­closing tags have a space before the final slash.

Creating an HTML Page

Now that we know what a tag looks like, let's start marking up our text file tocreate an HTML document.

Specify the DOCTYPE

In your favorite text editor, add the following tag to the top of yourdocument. (You can copy and paste this in.)

<!DOCTYPE html>

The first line in our HTML document is the DOCTYPE, or Document TypeDeclaration. The DOCTYPE lets the browser know which version of HTML youare using, and thus determines how the browser renders the page.

If you leave the DOCTYPE out of the document (or declare the wrongDOCTYPE), the browser will still display the page, but the document will notvalidate properly, and the page may look and behave differently thanexpected. (We will discuss different DOCTYPES more thoroughly in a laterlecture. For now, just make sure to include the tag at the beginning of yourdocument.)

When saving adocument in a

text editor, saveas All Files andUTF­8 format,and make sureto include the

.html fileextension.

Click an HTMLdocument on

your computerto open it inyour defaultbrowser. This

previews how itwill look on the

Web.

We're using the streamlined and simple HTML5 DOCTYPE declaration, whichyou'll learn more about in Lecture Two.

Mark up the Head, Body, and Title

Next, wrap the text of your document in an opening and closing html tag.Place the opening tag below the DOCTYPE and the closing tag at the end ofthe document.

<html></html>

Now you'll add tags to divide your document into two parts: the head and thebody.

The head of the page contains important information about the document,such as its title, author, and keywords (to improve its results in searchengines) and any other required metadata. Place this at the top, before thetext begins.

<head></head>

The body of the page contains the meat of the document: the content, orwhat is actually displayed in the browser window. Wrap the entirety of yourpage content in these tags:

<body></body>

The title tag is also placed within the Head tag pair. While most of the tagswithin the head of the page are optional, all HTML documents must have atitle. This is displayed to the Web user in the title bar of the browser. (This isthe only part of the head information that is displayed). Enter your title taglike so:

<title>American barns</title>

All HTML documents must have a DOCTYPE, head, and body—this is the basicskeleton of the document.

Your code should look like this.

It's important to note that we've just learned a principle called tag nesting.In order for HTML to work properly, certain tags need to be wrapped orenclosed within each other, like little Russian dolls:

1. Head and body tags always go inside the html tags.

2. Title tags always go inside the head tags.

3. Page content always goes inside the body tags.

The structure of a page is this:

<!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> My Web Page Lorem ipsum dolor sit amet, consectetuer adipiscing elit... </body> </html>

Up to six levels ofheader tag can beused: from <h1>through <h6>.

Headers help readersidentify major sections

on the Web page.

Each paragraph shouldbe wrapped in <p>

tags. Paragraphbreaks help "chunk"

the content, making iteasier to read on the

Web.

Save and View the Page

OK, now that we've added these tags, let's save your file as an HTMLdocument. Go to Save As in your text editor and save the file with theextension .html (as "barns.html"). Save it into your existing barns folder.

Note: If you're using TextEdit for Mac OS X, make sure to select "Make PlainText" from the "Format" window, and save it under Unicode (UTF­8) plaintext encoding. On a PC, make sure All Files and Unicode (UTF­8) are selected.

Once your page is properly saved as an HTML document, the file will displaywith an icon of your default Web browser (Internet Explorer, Safari, Firefox,etc). Simply double­click the page to view it in your browser, or go to File >Open in your browser:

Holy cow. While we've officially created an HTML Web page, none of the textis formatted! As we haven't marked up the actual content yet, the browserthinks that all of the text is one long paragraph.

Note that the browser ignores any extra line breaks or spaces we included inthe HTML document. If we want line breaks, extra spaces, or paragraphs, wehave to specify those elements within the document by adding markup tags.So let's make our Web page a bit more presentable by providing somestructure.

Structuring Page Content Add Header Tags <h1>, <h2>, et al

First, add header tags to delineate headers. Add <h1> tags to "Barns InAmerica," <h2> tags to "A Cultural Legacy," and <h3> tags to "Types of Barns" and "Regional Variations." Don't forget to close your tags!

Header tags can range from <h1>, the top­level header, down the line to<h6>, the smallest header. Use headers to organize your Web page and breakup your content into manageable chunks. This makes it much easier for usersto scan the page and find the information they're looking for.

Also, it's good practice to implement your tags in the right order. If you usethe <h2> tag, for example, the header underneath it should be wrapped inthe <h3> tag (not <h4> or <h5>). The title of the page should not be wrappedin the <h2> tag (use the <h1> tag). In short, don't skip header tags!

Using header tags in the right order is not only semantically correct, butsearch engines will rank information in order of importance according to theirheadings. Don't worry if the size or look of a particular heading bothers you—you will be learning how to change it to suit with CSS later in the course.

Add Paragraph Tags <p>

Lists can be ordered(numbered),

unordered (bulleted),or provide definitions.

The paragraph tag marks... (you guessed it!) paragraphs. By default, yourbrowser renders separate paragraphs by inserting a blank line before andafter the element. Add opening and closing paragraph tags to each majorsection.

Let's see what our page looks like so far:

Much better! Breaking the page up into headed paragraphs makes it muchmore legible, but it still needs some work.

List Items

You'll note that the fifth paragraph ("Hop barns. Used to store hops forbrewing. Pole barns....") is actually a list. Semantically, it's not supposed tobe a paragraph.

There are a number of ways to approach it, so let's try out each one. Let'screate a numbered list here by adding the following tags to our document:

<p>My List:</p> <ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item Four</li> </ol>

1. Creating an ordered list <ol>

First, wrap the entire list in <ol> tags. These specify that the list itemsenclosed make up a numbered list.

2. Specify list items <li>

Next, wrap each item in the list with the list item tag <li>. Make it a list ofthree types of barns.

The list is rendered like this:

Emphases <em>, bold<strong>, quotes <q>

and long quotes<blockquote>, andcode <code> are

examples of semanticformatting. They tellthe reader or browser

the purpose of aphrase or sentence.

Hyperlinks use theanchor tag with thehref attribute <a

href>. Links can beexternal (to pages onother sites), internal

(to pages within a site)or even link to anchors

3. Create an unordered list <ul>

Perhaps the numbers looked strange to you. If so, you can change the listformat by using an unordered list tag <ul>, which displays the list as bulletpoints. Use unordered lists when the order of the list items is of littleimportance.

Just replace the <ol> tags with <ul> tags. The code will look like this in abrowser:

4. Create a definition list (<dl>, <dt>, <dd>)

That was an improvement, but there's a third type of list you might consider.If you need to list a series of defined terms, mark them up as a definition list.A definition list works a bit differently than the ordered and unordered lists.Each item is broken down into two parts: the term (<dt>), and thedescription, or definition, of the term (<dd>):

Just replace the <ul> tags with <dl> tags. Then wrap each term in <dt> tagsand each definition in <dd> tags (removing <li> tags). The code will look likethis in a browser:

on the same page.

Absolute links create alink to a full URL(beginning with

http://www.sitename).

Basic Text FormattingNow let's add some semantic markup to the text. In your paragraphs, youmay want to add formatting to indicate the meaning of specific words orphrases.

Here are some common HTML tags used to format text:

<em>: Indicates emphasis. By default, browsersemphasize text by italicizing it.

<strong>: Indicates stronger emphasis. By default,browsers render strongly emphasized text by bolding it.

<code>: Indicates a bit of computer code. By default, itis rendered in a monotype font.

<q>: Defines a quotation. Browsers are supposed torender quotations by enclosing the text in quotationmarks (though Internet Explorer does not).

<blockquote>: Defines a longer quotation. By default,browsers indent the quoted text on both sides.

Click here to see a version of the page with these tags applied. (The only tagI didn't use was strong. I used the unordered list version of the document.)Add the tags in your document to try it out.

You'll note that we haven't included tags here that change text fonts, size, orcolors. Formatting the look of text lies in the realm of CSS. While it may looklike we are formatting the appearance of text here—italicizing text, boldingtext—that isn't really the intent of these tags.

The <em> tag, for example, is meant to indicate that the enclosed text isemphasized. While browsers italicize text by default to show emphasis, wecould just as easily emphasize text by coloring it differently (and we couldchange this tag's default appearance by simply altering the CSS). Like theother tags we've covered so far, these tags are meant to structure and givemeaning to the different parts of the HTML's content, not to make it look aspecific way.

Adding CSS Formatting

You'll learn how to create your own CSS formatting later in the course, butlet's see some CSS in action right now! I have created a CSS file for you,which is found in your downloads for this lecture. All you have to do is add aline of code to your HTML page telling it to use that CSS file for itsformatting.

Go to the top of your HTML code for the barns page and look for the <head>

Relative links create alink from a page orfrom a root folder toanother page within asite (page1.html, for

example, or../page1.html).

</head> tags you created earlier. Your page title is located there within<title> tags, and we're going to add a link tag there too, like this:

<head> <title>American barns</title> <link rel="stylesheet" type="text/css" href="css/barns.css"> </head>

The lines in bold above can be placed on all one line. They are broken herefor length on this course page.

You'll learn plenty more about how this code works later in the course. Fornow, simply enter the line in bold above in its proper place above the closing</head> tag, save the page, then open it in a browser window. You shouldsee this:

By "attaching" the CSS I created to your HTML page, the HTML has becomeformatted.

If you have trouble seeing the formatted version, make sure you haveentered the code exactly as shown above, and that your HTML file is saved tothe correct folder.

Using Hyperlinks

Arguably the most defining feature of the Web page is the link—if we weren'table to interconnect our Web pages together via hyperlinks, the World WideWeb would be much less, well, Web­like.

Let's switch to a new example here for our discussion of links and images.The treefrog folder within your lesson1 folder contains some HTML documentsto follow along with this explanation of hyperlinks.

We define hyperlinks using the anchor tag. The anchor tag <a> is used tolink some text or an image to either another document, or a different part ofthe current document.

This topic reminds me of another HTML fundamental that you must know:Some tags can be expanded by the addition of attributes and values. Anattribute is an abbreviation added to the opening tag with a single space.Each attribute must have a quoted value that's enclosed in quotation marks:

Image links use an<img src> tag andgenerally link to thelocation of an image

within the site:(images/frog.jpg).

1. Adding outside links

To create a link to another Web page, combine the anchor tag with the hrefattribute, like so:

<a href="http://wikipedia.org/"></a>

Try adding this link to the index.html page in your folder (wrap the word"Wikipedia"). The text that is embedded in the <a> tag will, by default, berendered as the all­familiar underlined, blue text.

2. Other link attributes

Use the title attribute to provide additional information about a link (or anyother element, for that matter). When a user hovers over a link (or anotherelement) with a title attribute, the browser will display a tooltip with thetitle's content.

<a href="http://wikipedia.org/" title="learn almost anything at Wikipedia">Wikipedia</a>

This result would look like this in a browser:

You can also link to certain elements within an HTML document by creatinganchors. You can create an anchor by assigning an id attribute to anelement.

<h2 id="facts">Fun Facts</h2>

Then, link to that anchor by prefacing the id name with a hash symbol (#):

<a href="#facts">Jump to Fun Facts</a>

When a user clicks on the link, she will be taken straight to the part of thedocument that has the corresponding id name. Designers use this concept tocreate a table of contents at the top of a Web page that lets you quicklynavigate to other parts of the document. This approach is particularly usefulon longer pages where users might need to scroll to access content.

Linking Within a Site

Broken links andimages aregenerally

caused by errorsin file path.

Let's take a look again at the first link we made:

<a href="http://wikipedia.org/">Wikipedia</a>

Note that the address above is known as an absolute link. Because the linkis a complete URL or page address, it can be visited regardless of where youare on the Internet.

1. Using relative links

When you are creating links within a site, you will sometimes want to userelative links instead. Relative links are addresses that are only valid if youare visiting from certain Web pages.

For example, suppose you have a Web sitecomposed of four pages: index.html,page1.html, page2.html, and page3.html.And suppose they are all located within thesame root folder. (The folder that contains asite's HTML documents is called the rootfolder.)

If you want to create a link from the index page to another page on the sameWeb site, instead of creating a link with an absolute path like this:

<a href="http://www.myWebsite.com/page1.html"></a>

You can instead use a relative link, such as this:

<a href="page1.html"></a>

Relative links do not contain the full http:// protocol, nor do they containthe domain name. When a browser navigates to a relative link, it looks forthe page relative to the page you are currently on. Try adding a relative linkfrom the index.html document to page1.html in your downloads folder. Itshould work like this. You could add a link back to the index page, too!

2. Navigating folders

Just as there are probably numerous folders containing numerous files onyour personal computer for a project, Web sites are also composed of foldersets and files. To link from one document to another document within thesame Web site, but different folders, use relative links.

For example, there is a main page within a folder called "subfolder." Thislinks to page1.html in a folder called "subfolder":

<a href="subfolder/page1.html"></a>

The folder must be in the same directory as the page you are navigatingfrom.

This next one links to page1.html, which is up one level from the currentpage. That is, the browser will navigate outside of the current folder, andlook for the file in the directory above it. The two dots and slash tell thebrowser to go up one folder level.

<a href="../page1.html"></a>

If you want to go up two levels, the link would be formatted like so:

<a href="../../page1.html"></a>

3. Using root relative links

Using relative links to move between folders of a Web site can be tricky, if

The alt attribute isimportant for any

device or Web userwho cannot see an

image.

Any typo orextra space in alink is likely tocause an error.

not convoluted, at times for large Web sites. Imagine all those dot­dot­slashes! Another linking method is to use a root relative link, which tellsthe browser to go right to the top of the folder stack and work its way downfrom there as indicated by the path.

Let's say there is a main page in a folder called "products," but the pagecurrently viewed is far away in some other folder chain. We use a slash to tellthe browser to get to the top of the folder stack, then look in the productsfolder for page1.html, like so:

<a href="/products/page1.html"></a>

Every Web site has a root directory—the main directory that contains thehome page and first set of subfolders. If you are in some subfolder within aWeb site, and you want to refer to a page in the root directory or one of itssubfolders, then precede the path with a forward slash ("/").

Let's review when to use the different types of links.

Use absolute links when you are referring to pages that are external to theWeb site. Use relative links when you are linking to a page within the Website. This saves you the pain of renaming all of your links in the case that youmove your pages to another Web site!

Inserting Images

Web pages, admittedly, would be pretty dry without pictures. What if Iwanted to insert a fancy frog into my Web page, like so?

To insert an image into a Web page, use the <img> tag with the srcattribute:

<img src="images/frog.jpg" alt="frog">

The src attribute specifies the address of the image. You can pull an addressoff anywhere off the Internet, or target one locally, as we did here. Thefrog.jpg image file is located in a local folder called "images."

The alt attribute (which is required for all image tags) tells the browser whattext to display in the case that the user, for whatever reason, is unable topull up the image.

(Perhaps the user has the images turned off, or is using a text­only browser,or the link to the image is broken.) So, instead of seeing a broken­linkedimage, like this, the user will see the alternate text:

For security,always make

index.html the"home page" ofany site folder.

The same image: the left without alternate text, the right withalternate text.

While the user won't get the full effect of the page with the image, she willget some indication as to what she's missing. This makes the page muchmore accessible to users with alternative browsers.

Optionally, you can also set the size of an image using the height and widthattributes. You set these values using pixels:

<img src="images/frog.jpg" alt="frog" height="50" width="75">

And, thus, you get a tiny frog, like so:

You can also turn images into links by just wrapping the image tag in ananchor:

<a href="page1.html"><img src="images/frog.jpg" alt="frog"></a>

Now your frog is clickable!

Want to see what this finished page will look like with a little CSS to dress itup? I've created a CSS document that is sitting in your CSS folder, waiting tobe linked by your HTML page. Just like the barn example earlier, add thefollowing code to your <head></head> tags. And notice that the path goes tothe CSS folder and grabs the treefrog.css file:

<head> <title>The Red-Eyed Tree Frog</title> <link rel="stylesheet" type="text/css" href="css/treefrog.css"> </head>

The result should look like this:

Review what you've learned about setting up an HTML page, adding basictags, and inserting images in the following video tutorial:

(Note: In some of the videos you will see the DOCTYPE declaration for HTML4.0. However, be aware that the current HTML5 DOCTYPE declaration is<!DOCTYPE html>.)

Keep your host'slogin

information

Web Site StructureFolders and Organization

Now let's talk about some principles for organizing files as you start to buildWeb sites with several pages.

Organizing the files of a Web site is much like organizing any other files. Evena small Web site of only a handful of pages can require dozens of image files,CSS files, and script files. If you throw all of these files into one big folder,you'll end up with a nightmare of a site that is difficult to update or maintain:finding, updating, linking, and deleting files will be frustrating.

Alternatively, you can structure and organize your site from the get­go, andsave yourself headaches in the long run. Here are some tips.

1. Make sure there is an index file in every navigable folder

The file name index.html is the universally recognized name for a site'shome page. In fact, all Web site home pages are named index.html. A Webbrowser cannot display a Web site without an index.html page. This is theonly page of your Web site where the naming is not optional. All other pagescan and should be given unique names that identify them.

When a browser navigates to some directory on the Internet, it immediatelytries to display the index file (named "index.html" or "index.htm"). If it can'tfind an index file, it will just display a list of all the files in that folder. At best,this is a bit ugly and, at worst, is a security risk! So, make sure that you putan index file in every folder that a user can navigate to on your Web site.

00:00 / 00:00

Creating an HTML Document

handy. You'llneed it when

you FTP files toyour server.

2. Use all lower­case names when naming your files

Some Unix systems have trouble with upper­case filenames (and many Web­servers are Unix­based), so make sure to use all lower­case letters whennaming your documents.

3. Reserve a separate folder for all image, script, and CSS files

It's a good idea to keep all of your images in a folder (named "images", forexample), as well as your script and CSS files. If you have only a few imagefiles, you can keep them all in one folder. As your Web site gets bigger, andyou are working with more and more images, you'll want to make sub­folderswithin your image folder, splitting them up by category.

4. Categorize your Web pages into folders

If you have a small Web site (ten pages or less), you may be able to getaway with putting all of your HTML files in the main (root) folder. But if yourWeb site is larger than that, you'll want to split up your files into separatefolders. Organize them in a way that makes sense to you: group like­pagestogether in their own folder.

For examples, all of your product pages can go into one folder, all of yourcontact pages can go into another, and you can create sub­folders asnecessary.

Posting to the Web with FTPWhen you're finished creating your fabulous Web site, it's time to upload it toa Web server for the world to see. We won't go into the technical details ofhow Web servers work here—it suffices to say you can "rent" Web serverspace fairly cheaply by purchasing Web hosting services. Some free hostingproviders were mentioned near the beginning of this lecture and are coveredagain in the exercise. If you are not familiar with terms like host, server,domain, and so on, please see our handy guide to Web vocabulary.

Once you have somewhere to host your Web site, you're nearly ready to putyour Web pages on the World Wide Web. How are they going to get there?Do you need to be a skilled computer technician to manage that? Don'tworry! You can do it all yourself with a few simple tips and tricks. Let's startwith the basics.

Choosing an FTP Program

The simplest way to move files from your computer onto your Web site (sopeople can see your pages on their computers) is through three little letters:FTP. This acronym stands for file transfer protocol, which is the basic waythat you can move your files from your computer onto your Web site. You'll

If your host requiresSFTP and you attemptto log in with regular

FTP, you will not log insuccessfully. Revisityour settings andadjust accordingly.

use an FTP client—a program specifically designed to make this transfer.

First, you need to decide which program you are going to use. There aremany free ones available for download for Windows and Mac. Here are just afew:

• FireFTP (Windows or Mac): This is not so much a program as afree add­on to the Firefox browser that can be used on Windowsor Mac. Once installed, it connects you quickly to your host, andit's easy to switch to a new tab in Firefox, upload your files,switch back, and see your changes.

Note: I use FireFTP for this course, so you may want to use ittoo so you can follow along more easily.

• WinSCP (Windows): WinSCP is a lightweight, yet full­featuredFTP application. Best of all, it's open­source and free.

• Transmit (Mac): This is one of the most popular FTP programsfor the Mac. With a slick interface and powerful features, manythink it's worth the price tag. (For a free Mac FTP application, tryCyberduck.

Once you've selected your program of choice, we can begin moving files fromyour computer to your Web site. Most FTP clients work in a similar fashion.First, you log in to your Web server using the correct FTP address, username,and password, so let's start there...

Getting the Proper FTP Login Information

If you've just signed up for hosting, be sure to check your email. An emailfrom your host is usually where your server name (for example,ftp.website.com), username, and password will be. Guard it closely!

This is the information you need to metaphorically walk into your Web sitestorage space on your Web host and deposit your files. If you are still unsureof your server name, username, and password after checking your email, callor email your Web host to find out this information. Otherwise, it's like havinga storage space without knowing the address or how to get there.

Connecting to Your Web Server

Once you have your login information, you'll need to connect to your Webserver in order to begin transferring files.

Open your FTP program. For the purposes of this example, we are usingFireFTP. While FTP programs function essentially the same, the user interfacemay differ, so you may need to adjust these steps depending on the FTPapplication you're using. When you first start FireFTP (by opening up Firefoxand selecting Tools > FireFTP), you'll see a window that looks somethinglike this:

Your hard drive files are on the left side of the interface. Many other FTPprograms work similarly.

FireFTP uses a two­pane interface common to many (but not all) FTPprograms. You'll see your local files (the files on your computer) in the left­hand pane, and remote files (the files on the Web server) in the right­handpane. Right now, we're not connected to the Web server, so the right­handpane is blank. We'll need to create a new account, using our server logininformation. Click on "Connect" (near the top of the window). This actionpulls up an Account Manager window, where we can enter in our logininformation:

Enter the username and password information provided byyour host.

Choose an Account Name. This can be anything, as it's just for you to identifyyour site when you have more than one. Choose something specific enoughso you can tell it apart from any others that you may build. You have yourHost information from your Web hosting service, which is a URL that usuallybegins with "ftp." You may choose your own login username and password,but, again, you would have set this up through your Web hosting service.

These three pieces of information (the host, username, and password) areusually sufficient to connect you to the Web server, but there may beoptional settings you may want to configure. Click on the "Connection" tab tosee more settings:

Use a consistentnaming

convention onyour hard driveand server, such

as all lower­case. Someservers are

case­sensitive.

Organize yourfiles the sameway on yourcomputer and

your hostserver.

More settings found under the Connection tab

Under "Connection Type" you see Security Mode. In that dropdown, you'represented with optional connection settings, such as SFTP ("secure" FTP).Most likely you will not need to adjust this setting; if an SFTP connection typeis required by your host, that should be noted in the login instructions thatyou received from your provider. If that is the case, you'll need to change itto SFTP (which also adjusts the Port number for you).

Now, let's look at the "Initial Directories" section. Here you can change thedefault folder paths that reflect where you want your login to begin, both onthe local and remote side. If you leave these boxes blank, you are taken to ahigh­level folder (like the root folder or your home directory) when youinitially connect to the server, and you will have to browse through yourfolders to get to the directory with the relevant Web site files. Setting theinitial directories here can save you some time, so that you need not browseto the relevant folders every time that you log in.

Once you've entered in all of your login information, click "OK", and, if allgoes well, you will connect with your Web server. If you cannot connect,check everything you entered against the login information provided by yourhost.

Transferring Files to the Web Server

Once you've logged in to the server, your screen looks something like this:

Note that the right­hand side is still blank, as we haven't transferred any files

to it yet. So, let's do that: All of our local Web site files are in the left­handpane. We're going to move all of them over to the server by first selecting allof the folders and files. Shift­click to select them all. Then, click on the right­pointing arrow in the middle of the window.

You'll witness the progress of the files transferring to the Web server via thestatus bar at the bottom of the window as well as the log, which echoes eachfile transfer's success as well as any errors. Once complete, your local Website files are mirrored in your Web server, and, if you have an index file(index.html), you will be able to see your Web site if you navigate to yoursite's address on your browser. (If you don't have an index file, you'llprobably just see a list of your files when you pull up the site URL. I'll explainmore on index files shortly.

What about updates? If you make changes to a file or two and need toupdate these files on your server, simply select the relevant files and uploadthem by clicking the right arrow button. If the file already exists on theserver, the FTP program usually warns you, and gives you the option ofoverriding the existing file or not.

As in a word processor, "overwrite" means that the version of the file you areuploading replaces the one that is already on the server. This route is fine ifyou are uploading a newer version of the same file, or if you would like toreplace the one you already have. But if by some coincidence you wereuploading a different file by the same name, you also have the option tocancel or skip uploading a file. This is a wonderful shield from accidentallydeleting or overwriting a file you've spent hours working on with a blank onethat happens to have the same name.

Note that you should have a backup of your files in case you overwrite them.You've probably been told that before... Just think of this note as anotherpre­I­told­you­so comment. Everyone loves those!

Other Common FTP Tasks

In addition to transferring files to and from your server, there are also a fewother common tasks you often perform in your FTP application that are worthmentioning.

Creating Folders on Your Web Server

To create a directory on your server, right­click (Control­click on a Mac) inthe right­hand pane, and select "Create Directory" from the menu thatappears. This action creates a folder on your server, which you can then

name to your liking. Note that you can create blank files on your Web serverthe same way.

Be careful altering the file structure of your site files in this way, however. Tokeep yourself organized, you should have a local set of files that exactlymirrors your server files. This makes updating your Web site much easier,and also keeps a backup of your Web site files on your local computer. So, ifyou do create directories and files on your server directly, you should alsodownload these files and directories to your set of local files as well (byclicking the left arrow).

A note on file and folder names: Keep in mind that when transferring filesfrom your computer to your Web server, you're often transferring files fromone operating system to another. Many Web servers, for example, are Unix­based. This means that the way the server handles files may differ from theway that your computer handles files. Some operating systems (Unix inparticular), are case­sensitive.

What does this mean for you? If you name a file "AboutPage.html", forexample, all references to that file should mirror the file name exactly. Inother words, a link within a Web page that points to "aboutpage.html" maynot send you to "AboutPage.html", and you'll end up with a dead link. Toavoid this problem, use the same naming and case convention for everyfolder and file in your site, such as all lower­case. This makes it much easierwhen referring to that file within your code—you need not look back at thefile name to remember that it is, for example, in all lower­case. A consistentnaming convention makes for a simpler and error­free system.

Changing Permissions

For every file and directory on your Web server, there are certain permissionsset that grant different people the right to read, write, and execute the file.It's important that the permissions for all of these files are set correctly. Forall of your Web documents, you'll want anyone to be able to see the Webpage ("read" the file), but you don't want just anyone able to change the file("write" to the file). And there are certain files that you don't want anyonebut yourself to be able to see (such as configuration files).

There is usually a set of permission defaults set for every file and directory(where the owner can read and write the file, and everyone else can just readthe file). These permissions work for most of the files you have on yourserver and you may never need to change them. But if you do need tochange the permissions of a file or directory on your server, you should knowhow.

Click here for my process for changing permissions. If you're alreadycomfortable with FTP in general, please read this now. If you're still workingto understand what FTP is all about, print this permissions page to check outmore carefully later.

Final FTP Tips

If you want to make your Web addresses look clean, you can add a littlepolish to them. For example, "example.com/recipes/" looks a lot cleaner than"www.example.com/cookingrecipes.html."

When a Web browser is told to point to a directory (like the "recipes"directory in the above example, as opposed to a specific HTML or image file),it always looks for a file called "index." So, by naming a Web page index.htmland placing it within a folder (like recipes), you can use an address that endswith a forward slash like "example.com/recipes/"

While this approach cleans up your Web addresses and also makes it easierfor you to organize your files on the server, you must be careful not tooverwrite your index files with ones from another directory. Otherwise,people may go to /recipes/ and find a blank page or worse, one completelyunrelated!

The main thing with FTP, as with any other computer transfer protocol, is toalways remember three tips:

1. Keep your host name, username, and password someplacesafe so you can always get to them should you forget, or have tomove to a new computer.

2. Stay organized. Keep your files in the same places: one foryour computer, and one for your host.

3. Remember that files online are always case sensitive, so usethe same case for files on your computer as well.

Finally, when troubleshooting, try to determine where the problem lies. If youcannot connect to your host using your FTP program, check your logininformation and/or contact your hosting provider. If you have problemsspecific to a particular FTP program, consult the help files as they tell you allyou need to know, or switch to a simpler FTP program. If you have problemswith files not appearing properly on the Web, check that you have FTPedthem to the correct location and are using the correct naming.

Learn the history andpurposes of the HTML tablein Web design. Learn how to accuratelycode an HTML table. Learn how to customize atable by modifying rows,columns, dimensions,spacing, borders, andbackground. Explore the purposes ofHTML5. Learn how to structure abasic HTML5 document.

Discussion Share your thoughts and opinions with other students atthe Discussions Board.

ExerciseStructure a Web page using the HTML techniques learnedin this lecture.