Essentials of HTML (2007)

Web Design using HTMLWeb Design using HTMLwww.freeu.com www.compuskills.com

your instructor: matthew [email protected]

<html><head><title>page sent! </title></head><map name="tlbmap"><area shape="rect" coords="0,0,63,16" href="http://www.attws.com/nohost/tb_map.html"><area shape="rect" href="http://www.attws.com/nohost/home.html"></map><table border="0" width="570" cellpadding="0"align="left" alt="toolbar" usemap="#tlbmap"><td width="570" align="left" valign="top"> <img src="../../images/messcntr.gif" alt="message center" width="220"height="33" align="left">thank you for using at&t, your page has been submitted! <a href="nonmsg.html">return to messaging center </a>.</center>

Colorado Free UniversityColorado Free University

getting startedgetting started

quick introductions -- customizing this coursequick introductions -- customizing this course administriviaadministrivia how to make this a better classhow to make this a better class menu of possible class topicsmenu of possible class topics


quick introductionsquick introductionscustomizing this coursecustomizing this course

who are you and what do you do?who are you and what do you do? what is your experience with computers, what is your experience with computers,

the Internet, and the World Wide Web?the Internet, and the World Wide Web? what is your experience with web design, what is your experience with web design,

HTML, and HTML editors? HTML, and HTML editors? what are your goals today? what do you what are your goals today? what do you

hope to get from this class?hope to get from this class? what is something interesting about you?what is something interesting about you?


quick introductionsquick introductions

matthew wyllyamzsoftware instructor since 1993, with an emphasis on multimedia, graphics, and

internet development.

taught Apple Macintosh classes exclusively for five years.

have created courses for Jefferson County Adult Ed, CCU in Lakewood, Productivity Point, and the DOD (at Rocky Flats).

corporate webmaster for two years, blogmaster for seven years.

learned HTML in 1995. used MS FrontPage exclusively for 10 years. recently converted to Macromedia Dreamweaver and Flash for web development.

TODAY: independent contractor, technical & creative consultant, artist, amateur photographer, and author. BA in English writing, and have sold three books.


administriviaadministrivia

class tickets and/or confirmation numbersclass tickets and/or confirmation numbers facilities …facilities …

– bathrooms, vending, free coffee & water, microwave …bathrooms, vending, free coffee & water, microwave …– the projection systemthe projection system

course schedule: 9am – 4pmcourse schedule: 9am – 4pm– Two morning sessions (10-15 min short break)Two morning sessions (10-15 min short break)– One hour lunch break around 12 or 12:30One hour lunch break around 12 or 12:30– Two afternoon sessions (10-15 min short break)Two afternoon sessions (10-15 min short break)

class evaluationsclass evaluations


please set pagers and cell phones to silent or turn off.please set pagers and cell phones to silent or turn off. understanding "concentrated computer training":understanding "concentrated computer training":

– class is part discussion, part lecture, part hands-on– breaks can be short, but effective.– bathroom visits: anytime is the right time!– watch the screen, then try it yourself.– PARTICIPATE! ask questions. answer questions. take notes.– this is a cooperative learning environment:

We are here to learn from each other.

keep in mind that this course was designed for akeep in mind that this course was designed for aparticular level of student:particular level of student:

how to make this a better classhow to make this a better class



keep in mind that this course was designed for a keep in mind that this course was designed for a particular level of student:particular level of student:

Created for- a semi-experienced computer user with a comfortable working knowledge of the Windows environment.- the beginning web designer who knows what the Web and HTML are, but has never or rarely worked with HTML or web pages directly.

NOT created for- the beginning computer user.

- the experienced web designer.

most importantly …most importantly …



most importantly …most importantly …

Make it fun! Make it fun!


menu of possible class topicsmenu of possible class topics

An introduction to HTMLCreating a simple web page

from scratchSite design vs. page designUnderstanding the underlying

structure of a websiteAn overview of MS FrontPageAn overview of DreamweaverCreating new pages in your webEssential formatting:

– Words, paragraphs, and pages

Understanding web server addressing

Aspects of hyperlinksDifferent graphics formats and

their usesHow monitor size and screen

resolution can affect your designs

Working with frames pagesUtilizing tablesSite management & publishing

and how the book works …(pages x-xiii)

http://www.cookwood.com/htmlvqj /examples

http://www.cookwood.com/htmlvqj

Moving on …Moving on …Moving on …Moving on …


An introduction to HTMLAn introduction to HTML"HTML, short for HyperText Markup Language, is the predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of tags, created by "angle brackets" ( < and > ). HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors."

Do you need to know it? Why learn it? (page vii) The more you understand the limits of HTML, the more it will help you. A markup language, not a programming language Virtually all of HTML is in the structure of nested tags:

content goes here

Always remember the importance of syntax!

http://en.wikipedia.org/wiki/Html

http://www.w3schools.com

http://en.wikipedia.org/wiki/Markup_language

http://en.wikipedia.org/wiki/Web_page

http://en.wikipedia.org/wiki/Semantics

http://en.wikipedia.org/wiki/Scripting_language

http://en.wikipedia.org/wiki/Web_browser

http://en.wikipedia.org/wiki/Html

http://www.w3schools.com/


An introduction to (X)HTMLAn introduction to (X)HTML

"Early versions of HTML were defined with loose syntactic rules, which helped its adoption by those unfamiliar with web publishing. Web browsers commonly made assumptions about intent and proceeded with rendering of the page. Over time, as the use of authoring tools increased, the trend in the official standards has been to create an increasingly strict language syntax. However, browsers still continue to render pages that are far from valid HTML."

Understanding the different "flavors." eg: (X)HTML–Who comes up with the HTML standards? W3C.org–HTML vs. XHTML vs. XML ("strict," "transitional," etc.)–What are "deprecated" tags?–Doctype declarations (DTD)

http://en.wikipedia.org/wiki/World_Wide_Web_ConsortiumIf you want to know more about "doctype switching"

HTML or XHTML - does it really matter?XHMTL Syntax

http://en.wikipedia.org/wiki/HTML_editor

http://www.w3c.org/

http://en.wikipedia.org/wiki/World_Wide_Web_Consortium

http://en.wikipedia.org/wiki/World_Wide_Web_Consortium

http://www.quirksmode.org/css/quirksmode.html



http://www.456bereastreet.com/archive/200601/html_or_xhtml_does_it_really_matter/


What software do you needWhat software do you needto code and create HTML pages manually?to code and create HTML pages manually?

(pages xiv-xv) A simple text editor

– Notepad, WordPad, or TextEdit– Save your pages as .htm not as .txt .rtf etc.– Is there a difference between .htm and .html?

Web browsers for testing– Internet Explorer, Mozilla Firefox, Safari, etc.– Drag and drop your .htm files onto the browser's icon.– Use the keyboard shortcut F5 to refresh your pages.

Image editing software– Adobe Photoshop, Fireworks, The Gimp, etc.– Save images as .jpg or .gif

File management applications– Windows explorer or Macintosh Finder to manipulate local files– FTP (or equivalent) to upload web files to remote server

http://qa.techinterviews.com/q/20060816033303AAzgnu7




Creating new pages/folders in your webCreating new pages/folders in your web

Creating new web structures is easy.

File and folder naming conventions:

– Is there a difference between .htm and .html?

– Lowercase, no spaces, no special characters

– Remember: file names = web page addresses

– Search engines use key words in file names to help rank your pages' importance

Be consistent in your file-naming scheme.

– When coding pages manually in HTML, renaming a single file in your site can have catastrophic effects.

– The importance of managing files from within a site management application


What exactly is a "web browser"?What exactly is a "web browser"?

"A web browser is a software application that enables a user to display and interact with text, images, and other information typically located on a web page at a website on the World Wide Web or a local area network. Web browsers allow a user to quickly and easily access information provided on many web pages at many websites by traversing these links. Web browsers convert HTML coding for display, so the appearance of a web page may differ between browsers. Web browsers available for personal computers include Internet Explorer, Mozilla Firefox, Safari, Netscape, and Opera in order of descending popularity (as of August 2006)."

• More than 10 years ago, Netscape Navigator was the widest used graphical-based client and server program for the Internet with 71% market share.

• As a web designer, you must give a lot of thought to the browsers people are using and test your pages accordingly.

"2005: Market share for the open-source Mozilla Firefox climbed above 6%, while Microsoft's Internet Explorer share dropped below 90%."

http://en.wikipedia.org/wiki/Web_page

http://en.wikipedia.org/wiki/Website

http://en.wikipedia.org/wiki/World_Wide_Web

http://en.wikipedia.org/wiki/HTML

http://en.wikipedia.org/wiki/Internet_Explorer

http://en.wikipedia.org/wiki/Mozilla_Foundation

http://en.wikipedia.org/wiki/Mozilla_Firefox

http://en.wikipedia.org/wiki/Safari_%28web_browser%29

http://en.wikipedia.org/wiki/Netscape_%28web_browser%29

http://www.informationweek.com/story/showArticle.jhtml?articleID=159902316







Today the two most popular browsersfor the WWW are:

MS Internet Explorer (60%) Mozilla Firefox (32%)

Current and updated browser statistics

Which browsers should you test your pages in?Which browsers should you test your pages in?

http://www.w3schools.com/browsers/browsers_stats.asp


Page titles are different than file namesPage titles are different than file names

(page 9)

Page titles are used to identify your pages in …

– The web page's title bar

– Browser histories and bookmarks/favorites

– Search engine results lists

Search engines also use page titles to rank your pages

Therefore, page titles should be be descriptive and use key words.

It is also important to include:Description & key words "meta tags"


Intro to Cascading Style Sheets (CSS)Intro to Cascading Style Sheets (CSS)

(pages 11-12) The nature of style sheets

Although you may think of "cascading" as the way in which your styles flow from one document to another across your site, the term technically refers to the way in which styles can build on each other and take precedence over one another.

Why use them?– Easy application of formatting across pages of an entire site– More control over a many different page elements– You can even redefine the properties of common HTML tags

Inline vs. internal vs. external style sheets Multiple style sheets can be used to combine styles, however for

simplicity sake, that practice should be avoided. (59-60) Is CSS widely supported?

http://en.wikipedia.org/wiki/Cascading_Style_Sheetshttp://www.dustindiaz.com/css-shorthand/

http://www.design215.com/toolbox/css_guide.php

XHTML has stricter rules thanXHTML has stricter rules thanplain old traditional HTMLplain old traditional HTML

Always use lowercase tags – no capital letters whatsoever.

Attributes are always contained within quotation marks.

Tags always close, even "empty" tags.

http://www.cyberartsweb.org/cpace/ht/strain/web-standards/xhtml.html

<A HREF="index.php?page=10&display=5"><IMG SRC="MyPicture.jpg"WIDTH=50 HEIGHT=30></A>

<a href="index.php?page=10&display=5"><img src="MyPicture.jpg" width="50" height="30" /></a>


Essential formatting:Essential formatting: character-level (words) character-level (words)

Basic character-level formatting

– Heading (format) tags do more than effect size, but also designatethe *importance* of the content. (page 14)

– "Font combination groups" for web design (pg. 15)

Changing the entire page vs. altering individual text selections

– Understanding the "web-safe" color palette's 216 colors and their hexadecimal codes (pg. 16)

– Size: relative vs. absolute definitions (30, 80)

(Prefer pixels [px] as the measurement of choice for web dev.)

– Bold, italic, underline, etc. … (pg. 38)

Adding special characters, including non-breaking spaces (28, 79)

Using HTML Heading Tags


Inserting images and understanding graphicsInserting images and understanding graphics

Prefer to use "camera-ready" images.

How images are saved into your web

– A web page is simple text, typed as code.

– Multimedia content is NOT embedded into the page.

– It is simply addressed or linked to.

Using HTML code to resize images (page 25)

"Alt text" and "accessibility" (26, 68)

Understanding text wrap and alignment (31-32, 44)

Placeholders, borders, and image margins


Different image formats and their usesDifferent image formats and their uses

(pages 19-24) JPG: good compression can lead to poor quality GIF: transparencies and animation PNG: smaller files, better quality, less support

Understanding resolution and "resampling."

The Rule: You can sample down, but not up.The Rule: You can sample down, but not up.

Using image "slices" for faster downloads How big should a web page be?

– For all files loading on a single page:Dial-up: 50kBroadband: 100k

– The closer a page is to the top of your site, the faster it should be.

Essential formatting:Essential formatting: block-level (paragraphs) block-level (paragraphs)

(pages 34-35)

Two different kinds of line breaks (pg. 37)

– (vs.) or 

Paragraph or "block-level" formatting is different thancharacter-level formatting

– Block-level formatting always applies to entire blocks of text within 

Block-level formatting includes:alignment, indents, bulleted & numbered lists

Don't forget about simple horizontal lines <hr> or <hr />


Site design vs. page designSite design vs. page design

Be thinking of both as you prepare and as you work.

– Remember, not all web pages are containedwithin a web site.

"Information architecture" or …

Planning and designing your site

– Storyboarding page designs, and …

– Diagramming work flow

To safely work on a site, you should createa local copy.


UnderstandingUnderstandingthe underlying structure of a websitethe underlying structure of a website

Addressing appears in the HTML code for:Links, images, and any other embedded content.

How is site/page addressing affected by file and directory names?

Folders or "directories" and understanding root levels

Understanding index.htm as the "magical file name“

Absolute & relative paths

– Absolute paths: http://www.macromedia.com/support/dreamweaver/contents.html

– Document-relative paths: dreamweaver/contents.html

– Site-root relative paths: /support/dreamweaver/contents.html

The whole / and ../ thing

Path addressing is much easier to create and maintain inan HTML editor.


Aspects of hyperlinksAspects of hyperlinks

(pages 71-72)

A hyperlink has two parts

– Its form: text or image

– Its coding: address & optional target

The wording of your links is important.

Hyperlink styles (pg. 72)

– Base, active, visited, hover, focus …

Creating image links with borders (75-77)

Targeting links for onsite and offsite links

"Jump" links, aka: "bookmark" or "anchor" links

Email links

Always test your links!


Understanding more about background imagesUnderstanding more about background images

(pages 61-64)

Why set a background color and a background image?

Images can be set as backgrounds of pages, frames, tables, table cells, and divisions and/or layers.

Background images automatically tile when they are smaller than the set area.

It is important to understand how monitor size and screen resolution can affect your web designs.

Use background images appropriately.

– Page text and background color/image should contrast.

– Readability of online documents is key!

Free background images on the web

Working with divisions & layersWorking with divisions & layers

(pages 57, 84-85)

In XHTML the <div> tag replaces traditional table layouts.

Creating, naming, and modifying divisions/layers

Understanding what a layer is and does

Individual divisions/layers can be customized much in the same way as table rows, columns, and cells:

– Background color, image, etc.

"Stacking order" through "z-index"

Some HTML editors can convert layers into tables.

http://www.yourhtmlsource.com/stylesheets/csslayout.html


How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web design

Understanding the situation – everybody's computer is different!

– Varying monitor sizes, resolutions, web browsers, and OSs make controlling web page output impossible.

This issue affects:

Table layouts, divisions/layers, framesets, and background images.

Different methods of dealing with this phenomenon:

– Understanding "relative" vs. "absolute" size definitions

– Rigid designs vs. flexible designs (and combinations)

– Left-justified designs vs. centered designs

– Using images to prevent collapsing columns

Utilize different methods of web page resolution preview.

Test your pages everywhere you possibly can!


http://www.alltm.orgcolumn at nearly 100% of window, looks more amateur, body text more difficult to read.

http://www.abos-littleton.com simple, small, rigid, left-justified design, even works in 640x480.

http://www.lacitybeat.com centered rigid columns with flexible "white space" side bars, optimized for 800x600 and 1024x768, but "fails gracefully" in 640x480.

There are varying design methods you can use to your advantage, but realize that each may have its drawbacks also.

As a general rule, optimize your pages for 1024 x 768,but they should also look good in 800 x 600 … and on larger displays.

http://www.markhorrell.com/tools/browser.html http://www.useit.com/alertbox/screen_resolution.html

http://www.netmechanic.com/news ...

How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web design

examples …

Colorado Free UniversityColorado Free University1024px1024px

768px768px

60%60%

800px800px

600px600px

20%20%

640px640px

480px480px

< 1%< 1%

How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web designRigid, left-justified designsRigid, left-justified designs

higherhigher20%20%

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non ipsum quis magna faucibus dictum. Etiam ac tellus ut velit lacinia porttitor. Curabitur in lectus consequat mauris lacinia sollicitudin. Nulla facilisi. Pellentesque tellus felis, ullamcorper et, tincidunt eu, aliquet sit amet, pede. Nulla pede elit, volutpat eu, eleifend varius, facilisis vel, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut mollis dapibus sem. Sed nulla neque, hendrerit sed, pulvinar a, mollis vitae, nunc. Duis egestas, neque ut lacinia bibendum, nisi lacus cursus massa, a facilisis risus mauris in mauris. Sed consectetuer, arcu eu malesuada scelerisque, velit massa nonummy lectus, eu malesuada enim massa a erat. Aenean condimentum. Sed lectus. Maecenas dignissim elit sit amet dolor. Vestibulum ornare nibh eget lectus. Aliquam ligula. Nunc sollicitudin sem vel quam. Duis sit amet quam sed leo faucibus venenatis. Aliquam condimentum magna in massa. Vivamus posuere lorem nec leo. Morbi suscipit luctus tellus. Aliquam erat volutpat. Aenean eleifend erat id nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquam. Aliquam sollicitudin aliquet nibh. Maecenas metus felis, consectetuer eget, pellentesque sit amet, rhoncus quis, diam. Aenean feugiat. Vestibulum sed est. Donec est nisl, bibendum ut, porttitor sed, eleifend sit amet, dui. Nulla arcu dolor, tristique in, commodo in, vehicula eget, tellus. Donec ullamcorper tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras interdum dolor ac arcu. Vivamus sit amet diam et pede eleifend dignissim. Nullam placerat, nunc ac iaculis consequat, turpis nisl egestas turpis, id tristique odio massa eu leo. Aliquam nonummy, libero ac ornare blandit, lacus elit luctus arcu, nec hendrerit lacus erat quis purus. Vestibulum velit leo, nonummy luctus, consectetuer vel, aliquet a, enim. Vestibulum vel est sit amet lacus tempus iaculis. Nunc aliquet lectus eu tortor. Nulla eget est nec velit euismod egestas. Donec leo urna, pellentesque quis, ultricies et, malesuada tincidunt, purus. Ut dui. Vivamus vestibulum, augue auctor condimentum mattis, turpis pede suscipit tortor, quis ornare tellus nibh ac tellus. Quisque egestas semper sem. Nulla facilisi. Donec nunc. Cras a urna sit amet libero mollis suscipit. Phasellus porta ipsum id urna. Cras pharetra ipsum ut arcu. Aenean eu erat. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquamesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy

Naviganda

Meno una

Meno duo

Meno treo

Meno katra

Meno penta

Flexible "white

space" or

optional content

Two columns = 760px

Rigid table set to 955px wide

Rigid column 220px

Rigid column540px

Optional contentrigid 195px

.GIF190px

.JPG 540px

http://www.abos-littleton.com simple, small, rigid, left-justified design, even works in 640x480.

Colorado Free UniversityColorado Free University1024px1024px

768px768px

60%60%

How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web designFlexible, centered designsFlexible, centered designs

800px800px

600px600px

20%20%

Naviganda

Meno una

Meno duo

Meno treo

Meno katra

Meno penta

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non ipsum quis magna faucibus dictum. Etiam ac tellus ut velit lacinia porttitor. Curabitur in lectus consequat mauris lacinia sollicitudin. Nulla facilisi. Pellentesque tellus felis, ullamcorper et, tincidunt eu, aliquet sit amet, pede. Nulla pede elit, volutpat eu, eleifend varius, facilisis vel, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut mollis dapibus sem. Sed nulla neque, hendrerit sed, pulvinar a, mollis vitae, nunc. Duis egestas, neque ut lacinia bibendum, nisi lacus cursus massa, a facilisis risus mauris in mauris. Sed consectetuer, arcu eu malesuada scelerisque, velit massa nonummy lectus, eu malesuada enim massa a erat. Aenean condimentum. Sed lectus. Maecenas dignissim elit sit amet dolor. Vestibulum ornare nibh eget lectus. Aliquam ligula. Nunc sollicitudin sem vel quam. Duis sit amet quam sed leo faucibus venenatis. Aliquam condimentum magna in massa. Vivamus posuere lorem nec leo. Morbi suscipit luctus tellus. Aliquam erat volutpat. Aenean eleifend erat id nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquam. Aliquam sollicitudin aliquet nibh. Maecenas metus felis, consectetuer eget, pellentesque sit amet, rhoncus quis, diam. Aenean feugiat. Vestibulum sed est. Donec est nisl, bibendum ut, porttitor sed, eleifend sit amet, dui. Nulla arcu dolor, tristique in, commodo in, vehicula eget, tellus. Donec ullamcorper tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras interdum dolor ac arcu. Vivamus sit amet diam et pede eleifend dignissim. Nullam placerat, nunc ac iaculis consequat, turpis nisl egestas turpis, id tristique odio massa eu leo. Aliquam nonummy, libero ac ornare blandit, lacus elit luctus arcu, nec hendrerit lacus erat quis purus. Vestibulum velit leo, nonummy luctus, consectetuer vel, aliquet a, enim. Vestibulum vel est sit amet lacus tempus iaculis. Nunc aliquet lectus eu tortor. Nulla eget est nec velit euismod egestas. Donec leo urna, pellentesque quis, ultricies et, malesuada tincidunt, purus. Ut dui. Vivamus vestibulum, augue auctor condimentum mattis, turpis pede suscipit tortor, quis ornare tellus nibh ac tellus. Quisque egestas semper sem. Nulla facilisi. Donec nunc. Cras a urna sit amet libero mollis suscipit. Phasellus porta ipsum id urna. Cras pharetra ipsum ut arcu. Aenean eu erat. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy aliquamesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non quam a quam nonummy

.GIF190px

.JPG 540px

Rigid column 540pxRigidcolumn220px

Two columns = 760px

http://www.lacitybeat.com centered rigid columns with flexible "white space" side bars, optimized for

800x600 and 1024x768, but "fails gracefully" in 640x480.

FlexibleFlexiblecolumn:column:

white white spacespace15%15%

FlexibleFlexiblecolumn:column:

white white spacespace15%15%

Flexible table set to 100% wide


Using tables to format pages & columnsUsing tables to format pages & columns

Tables are a key element of HTML page design.– CSS is an alternative, but currently, the results can be

somewhat unpredictable

Coding tables, columns, and rows manually Possible table, row, column, and cell properties Relative vs. absolute size definitions Nesting tables within tables Tables are much easier to work with in an HTML editor.


An overview of Microsoft FrontPageAn overview of Microsoft FrontPage

Perhaps a better choice for beginners and/or less technical web content creators

Primary toolbars, buttons, and menu items

Everything customizable

Understanding different views

–Normal vs. HTML vs. split vs. preview

–Utilizing site or folder views

–Previewing your pages in different web browsers

–Also includes navigation and hyperlink views

File management: new, open, save, etc.

Getting help


An overview of Macromedia DreamweaverAn overview of Macromedia Dreamweaver

Perhaps a better choice for the more experienced and/or more technical web content creators and/or webmasters

Primary toolbars, buttons, menus, and panels

The multi-talented "insert bar"

The ever-changing "properties inspector"

The "assets/files panel"

And more panels: eg: "history panel" …

Getting help


Summary of best SEO techniquesSummary of best SEO techniques

Page titles & filenames should use descriptive keywords– If possible make each page of your web different

Put effort into your key word and description meta tags. Use HTML headings to highlight important text on the page. Use alt text tags in images. Register many (if not all) of your site's pages in as many

places as you can. Incoming links are the best way to boost your page rank.

– The more sites the better.

– The better their page rank, the more it helps.

More recently updated pages get a better page rank. Register your site under multiple domain names. Avoid any and all spamdexing.


Publishing your webPublishing your web

Finding the right "web host"

Importing pages and entire webs is possible.

Working live or remotely vs. working locally

Publishing your site, or …

Uploading and downloading or "putting" and "getting"

Backing up your site with this method

How to edit existing pages without ruining them

You can publish your site in any "direction."


What do you need to have your own site?What do you need to have your own site?

An appropriate computer system w/ Internet access The tools:

– Text editor or HTML editor

– Image editor

– Web browsers for testing

Web "hosting." eg: godaddy.com (page 94)

http://www.webhostingratings.com

A delivery method: FrontPage, Dreamweaver, web publishing wizard, or straight FTP

A domain name is optional, but preferred.

Register your domain at networksolutions.com Register your site all over the web


Conclusions …Conclusions …

You cannot learn the violin in a day or two.

Web design is a skill – like any other – that requires gradual & continual practice & improvement.

Approach everything on a need-to-know basis, and don't worry about that which you do not yet understand.

Stay upbeat!… but if you get frustrated, remember:

You can always turn off the machine and walk away. :)

Don't forget about your course materials.

Good luck. Best wishes.And get in touch if you need more help!

Essentials of HTML (2007)

Technology

Transcript of Essentials of HTML (2007)