SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Web Design using HTMLWeb Design using HTML
www.freeu.com www.compuskills.com
your instructor: matthew wyllyamz
m.wyllyamz@gmail.com
<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">
</nobr>
<td width="570" align="left" valign="top"><br>
<img src="../../images/messcntr.gif" alt="message center" width="220"
height="33" align="left">
<font size="+2">
thank you for using at&amp;t, your page has been submitted! </font>
<br><br><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
Colorado Free UniversityColorado Free University
quick introductionsquick introductions
customizing 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 youwhat 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?
Colorado Free UniversityColorado Free University
quick introductionsquick introductions
matthew wyllyamz
software 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.
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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 a
particular level of student:particular level of student:
how to make this a better classhow to make this a better class
Colorado Free UniversityColorado Free University
how to make this a better classhow to make this a better class
keep in mind that this course was designed for akeep 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 …
Colorado Free UniversityColorado Free University
how to make this a better classhow to make this a better class
most importantly …most importantly …
Make it fun!Make it fun! 
Colorado Free UniversityColorado Free University
menu of possible class topicsmenu of possible class topics
An introduction to HTML
Creating a simple web page
from scratch
Site design vs. page design
Understanding the underlying
structure of a website
An overview of MS FrontPage
An overview of Dreamweaver
Creating new pages in your web
Essential formatting:
– Words, paragraphs, and pages
Understanding web server
addressing
Aspects of hyperlinks
Different graphics formats and
their uses
How monitor size and screen
resolution can affect your
designs
Working with frames pages
Utilizing tables
Site management & publishing
and how the book works …
(pages x-xiii)
http://www.cookwood.com/htmlvqj /examples
Moving on …Moving on …
Colorado Free UniversityColorado Free University
copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
Colorado Free UniversityColorado Free University
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:
<b>content goes here</b>
Always remember the importance of syntax!
http://en.wikipedia.org/wiki/Html
http://www.w3schools.com
Colorado Free UniversityColorado Free University
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_Consortium
If you want to know more about "doctype switching"
HTML or XHTML - does it really matter?
XHMTL Syntax
Colorado Free UniversityColorado Free University
What software do you needWhat software do you need
to 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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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 d
Colorado Free UniversityColorado Free University
Today the two most popular browsers
for 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?
Colorado Free UniversityColorado Free University
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"
Colorado Free UniversityColorado Free University
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_Sheets
http://www.dustindiaz.com/css-shorthand/
http://www.design215.com/toolbox/css_guide.php
Colorado Free UniversityColorado Free University
XHTML has stricter rules thanXHTML has stricter rules than
plain 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
<!-- Valid HTML (but invalid XHTML) -->
<!------------------------------------>
<A HREF="index.php?page=10&display=5">
<IMG SRC="MyPicture.jpg"WIDTH=50
HEIGHT=30>
</A>
<!-- Valid XHTML (also valid HTML) -->
<!--===============================-->
<a href="index.php?page=10&amp;display=5">
<img src="MyPicture.jpg" width="50"
height="30" />
</a>
Colorado Free UniversityColorado Free University
Essential formatting:Essential formatting: character-level (words)character-level (words)
Basic character-level formatting
– Heading (format) tags do more than effect size, but also designate
the *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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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: 50k
Broadband: 100k
– The closer a page is to the top of your site, the faster it should be.
Colorado Free UniversityColorado Free University
Essential formatting:Essential formatting: block-level (paragraphs)block-level (paragraphs)
(pages 34-35)
Two different kinds of line breaks (pg. 37)
– <p> </p> (vs.) <br> or <br />
Paragraph or "block-level" formatting is different than
character-level formatting
– Block-level formatting always applies to entire blocks of text within <p>
Block-level formatting includes:
alignment, indents, bulleted & numbered lists
Don't forget about simple horizontal lines <hr> or <hr />
Colorado Free UniversityColorado Free University
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 contained
within 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 create
a local copy.
copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
Colorado Free UniversityColorado Free University
UnderstandingUnderstanding
the 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 in
an HTML editor.
Colorado Free UniversityColorado Free University
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!
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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!
Colorado Free UniversityColorado Free University
http://www.alltm.org
column 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 design
Rigid, left-justified designsRigid, left-justified designs
higherhigher
20%20%
Lorem ipsum dolor sit amet
Lorem 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 column
540px
Optional content
rigid 195px
.GIF
190px
.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 design
Flexible, centered designsFlexible, centered designs
800px800px
600px600px
20%20%
Naviganda
Meno una
Meno duo
Meno treo
Meno katra
Meno penta
Lorem ipsum dolor sit amet
Lorem 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
.GIF
190px
.JPG 540px
Rigid column 540pxRigid
column
220px
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.
FlexibleFlexible
column:column:
whitewhite
spacespace
15%15%
FlexibleFlexible
column:column:
whitewhite
spacespace
15%15%
Flexible table set to
100% wide
Colorado Free UniversityColorado Free University
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.
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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.
Colorado Free UniversityColorado Free University
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."
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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!
Colorado Free UniversityColorado Free University

Weitere ähnliche Inhalte

Was ist angesagt?

Pageflakes4 Educators
Pageflakes4 EducatorsPageflakes4 Educators
Pageflakes4 EducatorsGladys Baya
 
Web basics southern
Web basics southernWeb basics southern
Web basics southerndharvey100
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Ten technology tools_for_faculty_to_know_about
Ten technology tools_for_faculty_to_know_aboutTen technology tools_for_faculty_to_know_about
Ten technology tools_for_faculty_to_know_aboutShaunJHolland
 
Accessibility testing-tools
Accessibility testing-toolsAccessibility testing-tools
Accessibility testing-toolsrobzonenet
 
Getting Started With School Net
Getting Started With School NetGetting Started With School Net
Getting Started With School NetMindi Stevens
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practicesKarolina Coates
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Designarborwebsolutions
 
building websites at NAU
building websites at NAUbuilding websites at NAU
building websites at NAUJonathan Smart
 
Website Accessibility Fission Team Training
Website Accessibility Fission Team TrainingWebsite Accessibility Fission Team Training
Website Accessibility Fission Team TrainingFission Strategy
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site AccessibleHelena Zubkow
 
Web publishing
Web publishingWeb publishing
Web publishingKanav Sood
 
Website designing company in faridabad
Website designing company in faridabadWebsite designing company in faridabad
Website designing company in faridabadCss Founder
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 

Was ist angesagt? (19)

Pageflakes4 Educators
Pageflakes4 EducatorsPageflakes4 Educators
Pageflakes4 Educators
 
Web basics southern
Web basics southernWeb basics southern
Web basics southern
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Ten technology tools_for_faculty_to_know_about
Ten technology tools_for_faculty_to_know_aboutTen technology tools_for_faculty_to_know_about
Ten technology tools_for_faculty_to_know_about
 
Accessibility testing-tools
Accessibility testing-toolsAccessibility testing-tools
Accessibility testing-tools
 
Getting Started With School Net
Getting Started With School NetGetting Started With School Net
Getting Started With School Net
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Web design basics
Web design basicsWeb design basics
Web design basics
 
building websites at NAU
building websites at NAUbuilding websites at NAU
building websites at NAU
 
Website Accessibility Fission Team Training
Website Accessibility Fission Team TrainingWebsite Accessibility Fission Team Training
Website Accessibility Fission Team Training
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Website
WebsiteWebsite
Website
 
Web publishing
Web publishingWeb publishing
Web publishing
 
Website designing company in faridabad
Website designing company in faridabadWebsite designing company in faridabad
Website designing company in faridabad
 
TPR4
TPR4TPR4
TPR4
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Adv html
Adv htmlAdv html
Adv html
 

Ähnlich wie Essentials of HTML (2007)

Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websiteswebsiteunlimited
 
Web and DAMS - NC ECHO Dig Institute
Web and DAMS - NC ECHO Dig InstituteWeb and DAMS - NC ECHO Dig Institute
Web and DAMS - NC ECHO Dig Instituteegore
 
Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2hussain534
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash CourseMrAbbas
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash CourseMrAbas
 
A Quick View On Web Design By Speakerhead.com
A Quick View On Web Design By Speakerhead.comA Quick View On Web Design By Speakerhead.com
A Quick View On Web Design By Speakerhead.comspeakerhead-com
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
IWMW 1997: Next Year's Web
IWMW 1997: Next Year's WebIWMW 1997: Next Year's Web
IWMW 1997: Next Year's WebIWMW
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfAshleyJovelClavecill
 
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
Les Basiques - Web  Développement HTML5, CSS3, JS et PHPLes Basiques - Web  Développement HTML5, CSS3, JS et PHP
Les Basiques - Web Développement HTML5, CSS3, JS et PHPHamdi Hmidi
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issuesNeil Perlin
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentpuneetbatra24
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonMukalele Rogers
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018Noor Muhammad Khan
 
Web Designing Training In Chandigarh
Web Designing Training In ChandigarhWeb Designing Training In Chandigarh
Web Designing Training In ChandigarhExcellence Academy
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptxINDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx12KritiGaneriwal
 

Ähnlich wie Essentials of HTML (2007) (20)

Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websites
 
Web and DAMS - NC ECHO Dig Institute
Web and DAMS - NC ECHO Dig InstituteWeb and DAMS - NC ECHO Dig Institute
Web and DAMS - NC ECHO Dig Institute
 
Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2
 
Html intro
Html introHtml intro
Html intro
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
A Quick View On Web Design By Speakerhead.com
A Quick View On Web Design By Speakerhead.comA Quick View On Web Design By Speakerhead.com
A Quick View On Web Design By Speakerhead.com
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
IWMW 1997: Next Year's Web
IWMW 1997: Next Year's WebIWMW 1997: Next Year's Web
IWMW 1997: Next Year's Web
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
 
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
Les Basiques - Web  Développement HTML5, CSS3, JS et PHPLes Basiques - Web  Développement HTML5, CSS3, JS et PHP
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 
Webdesign
WebdesignWebdesign
Webdesign
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end development
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
 
Web Designing Training In Chandigarh
Web Designing Training In ChandigarhWeb Designing Training In Chandigarh
Web Designing Training In Chandigarh
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptxINDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
 

Mehr von Matteo Wyllyamz

How to Forget You're a Human Being
How to Forget You're a Human BeingHow to Forget You're a Human Being
How to Forget You're a Human BeingMatteo Wyllyamz
 
Adobe Photoshop CS4 Essentials welcome & course outline (2010)
Adobe Photoshop CS4 Essentials welcome & course outline (2010)Adobe Photoshop CS4 Essentials welcome & course outline (2010)
Adobe Photoshop CS4 Essentials welcome & course outline (2010)Matteo Wyllyamz
 
Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)
Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)
Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)Matteo Wyllyamz
 
Intro to Adobe Illustrator CS4 (2010)
Intro to Adobe Illustrator CS4 (2010)Intro to Adobe Illustrator CS4 (2010)
Intro to Adobe Illustrator CS4 (2010)Matteo Wyllyamz
 
Intermediate Adobe Illustrator CS3 welcome & course outline (2009)
Intermediate Adobe Illustrator CS3 welcome & course outline (2009)Intermediate Adobe Illustrator CS3 welcome & course outline (2009)
Intermediate Adobe Illustrator CS3 welcome & course outline (2009)Matteo Wyllyamz
 
Adobe Acrobat 9 welcome & workshop outline w forms (2009)
Adobe Acrobat 9 welcome & workshop outline w forms (2009)Adobe Acrobat 9 welcome & workshop outline w forms (2009)
Adobe Acrobat 9 welcome & workshop outline w forms (2009)Matteo Wyllyamz
 
Search Engine Optimization (2009)
Search Engine Optimization (2009)Search Engine Optimization (2009)
Search Engine Optimization (2009)Matteo Wyllyamz
 
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)Matteo Wyllyamz
 
Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)Matteo Wyllyamz
 
Social Media Marketing welcome & course outline (2009)
Social Media Marketing welcome & course outline (2009)Social Media Marketing welcome & course outline (2009)
Social Media Marketing welcome & course outline (2009)Matteo Wyllyamz
 
Principles of Design for Web (2006)
Principles of Design for Web (2006)Principles of Design for Web (2006)
Principles of Design for Web (2006)Matteo Wyllyamz
 
Intro to Microsoft PowerPoint (2007)
Intro to Microsoft PowerPoint (2007)Intro to Microsoft PowerPoint (2007)
Intro to Microsoft PowerPoint (2007)Matteo Wyllyamz
 
Microsoft Outlook (2007)
Microsoft Outlook (2007)Microsoft Outlook (2007)
Microsoft Outlook (2007)Matteo Wyllyamz
 
Introduction to Microsoft Office (2007)
Introduction to Microsoft Office (2007)Introduction to Microsoft Office (2007)
Introduction to Microsoft Office (2007)Matteo Wyllyamz
 
General Design Principles (1998)
General Design Principles (1998)General Design Principles (1998)
General Design Principles (1998)Matteo Wyllyamz
 
Internet & Computing Essentials (2009)
Internet & Computing Essentials (2009)Internet & Computing Essentials (2009)
Internet & Computing Essentials (2009)Matteo Wyllyamz
 

Mehr von Matteo Wyllyamz (16)

How to Forget You're a Human Being
How to Forget You're a Human BeingHow to Forget You're a Human Being
How to Forget You're a Human Being
 
Adobe Photoshop CS4 Essentials welcome & course outline (2010)
Adobe Photoshop CS4 Essentials welcome & course outline (2010)Adobe Photoshop CS4 Essentials welcome & course outline (2010)
Adobe Photoshop CS4 Essentials welcome & course outline (2010)
 
Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)
Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)
Adobe Photoshop CS4 Beyond Basics welcome & course outline (2010)
 
Intro to Adobe Illustrator CS4 (2010)
Intro to Adobe Illustrator CS4 (2010)Intro to Adobe Illustrator CS4 (2010)
Intro to Adobe Illustrator CS4 (2010)
 
Intermediate Adobe Illustrator CS3 welcome & course outline (2009)
Intermediate Adobe Illustrator CS3 welcome & course outline (2009)Intermediate Adobe Illustrator CS3 welcome & course outline (2009)
Intermediate Adobe Illustrator CS3 welcome & course outline (2009)
 
Adobe Acrobat 9 welcome & workshop outline w forms (2009)
Adobe Acrobat 9 welcome & workshop outline w forms (2009)Adobe Acrobat 9 welcome & workshop outline w forms (2009)
Adobe Acrobat 9 welcome & workshop outline w forms (2009)
 
Search Engine Optimization (2009)
Search Engine Optimization (2009)Search Engine Optimization (2009)
Search Engine Optimization (2009)
 
Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)Intro to Adobe Flash CS3 welcome & course outline (2010)
Intro to Adobe Flash CS3 welcome & course outline (2010)
 
Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)Intro to Flash 8 welcome & course outline (2008)
Intro to Flash 8 welcome & course outline (2008)
 
Social Media Marketing welcome & course outline (2009)
Social Media Marketing welcome & course outline (2009)Social Media Marketing welcome & course outline (2009)
Social Media Marketing welcome & course outline (2009)
 
Principles of Design for Web (2006)
Principles of Design for Web (2006)Principles of Design for Web (2006)
Principles of Design for Web (2006)
 
Intro to Microsoft PowerPoint (2007)
Intro to Microsoft PowerPoint (2007)Intro to Microsoft PowerPoint (2007)
Intro to Microsoft PowerPoint (2007)
 
Microsoft Outlook (2007)
Microsoft Outlook (2007)Microsoft Outlook (2007)
Microsoft Outlook (2007)
 
Introduction to Microsoft Office (2007)
Introduction to Microsoft Office (2007)Introduction to Microsoft Office (2007)
Introduction to Microsoft Office (2007)
 
General Design Principles (1998)
General Design Principles (1998)General Design Principles (1998)
General Design Principles (1998)
 
Internet & Computing Essentials (2009)
Internet & Computing Essentials (2009)Internet & Computing Essentials (2009)
Internet & Computing Essentials (2009)
 

Kürzlich hochgeladen

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 

Kürzlich hochgeladen (20)

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 

Essentials of HTML (2007)

  • 1.
  • 2. Web Design using HTMLWeb Design using HTML www.freeu.com www.compuskills.com your instructor: matthew wyllyamz m.wyllyamz@gmail.com <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"> </nobr> <td width="570" align="left" valign="top"><br> <img src="../../images/messcntr.gif" alt="message center" width="220" height="33" align="left"> <font size="+2"> thank you for using at&amp;t, your page has been submitted! </font> <br><br><a href="nonmsg.html">return to messaging center </a>.</center>
  • 3. 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
  • 4. Colorado Free UniversityColorado Free University quick introductionsquick introductions customizing 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 youwhat 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?
  • 5. Colorado Free UniversityColorado Free University quick introductionsquick introductions matthew wyllyamz software 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.
  • 6. Colorado Free UniversityColorado Free University 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
  • 7. Colorado Free UniversityColorado Free University 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 a particular level of student:particular level of student: how to make this a better classhow to make this a better class
  • 8. Colorado Free UniversityColorado Free University how to make this a better classhow to make this a better class keep in mind that this course was designed for akeep 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 …
  • 9. Colorado Free UniversityColorado Free University how to make this a better classhow to make this a better class most importantly …most importantly … Make it fun!Make it fun! 
  • 10. Colorado Free UniversityColorado Free University menu of possible class topicsmenu of possible class topics An introduction to HTML Creating a simple web page from scratch Site design vs. page design Understanding the underlying structure of a website An overview of MS FrontPage An overview of Dreamweaver Creating new pages in your web Essential formatting: – Words, paragraphs, and pages Understanding web server addressing Aspects of hyperlinks Different graphics formats and their uses How monitor size and screen resolution can affect your designs Working with frames pages Utilizing tables Site management & publishing and how the book works … (pages x-xiii) http://www.cookwood.com/htmlvqj /examples
  • 11. Moving on …Moving on … Colorado Free UniversityColorado Free University
  • 12. copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
  • 13. Colorado Free UniversityColorado Free University 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: <b>content goes here</b> Always remember the importance of syntax! http://en.wikipedia.org/wiki/Html http://www.w3schools.com
  • 14. Colorado Free UniversityColorado Free University 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_Consortium If you want to know more about "doctype switching" HTML or XHTML - does it really matter? XHMTL Syntax
  • 15. Colorado Free UniversityColorado Free University What software do you needWhat software do you need to 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
  • 16. Colorado Free UniversityColorado Free University 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
  • 17. Colorado Free UniversityColorado Free University 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 d
  • 18. Colorado Free UniversityColorado Free University Today the two most popular browsers for 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?
  • 19. Colorado Free UniversityColorado Free University 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"
  • 20. Colorado Free UniversityColorado Free University 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_Sheets http://www.dustindiaz.com/css-shorthand/ http://www.design215.com/toolbox/css_guide.php
  • 21. Colorado Free UniversityColorado Free University XHTML has stricter rules thanXHTML has stricter rules than plain 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 <!-- Valid HTML (but invalid XHTML) --> <!------------------------------------> <A HREF="index.php?page=10&display=5"> <IMG SRC="MyPicture.jpg"WIDTH=50 HEIGHT=30> </A> <!-- Valid XHTML (also valid HTML) --> <!--===============================--> <a href="index.php?page=10&amp;display=5"> <img src="MyPicture.jpg" width="50" height="30" /> </a>
  • 22. Colorado Free UniversityColorado Free University Essential formatting:Essential formatting: character-level (words)character-level (words) Basic character-level formatting – Heading (format) tags do more than effect size, but also designate the *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
  • 23. Colorado Free UniversityColorado Free University 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
  • 24. Colorado Free UniversityColorado Free University 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: 50k Broadband: 100k – The closer a page is to the top of your site, the faster it should be.
  • 25. Colorado Free UniversityColorado Free University Essential formatting:Essential formatting: block-level (paragraphs)block-level (paragraphs) (pages 34-35) Two different kinds of line breaks (pg. 37) – <p> </p> (vs.) <br> or <br /> Paragraph or "block-level" formatting is different than character-level formatting – Block-level formatting always applies to entire blocks of text within <p> Block-level formatting includes: alignment, indents, bulleted & numbered lists Don't forget about simple horizontal lines <hr> or <hr />
  • 26. Colorado Free UniversityColorado Free University 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 contained within 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 create a local copy.
  • 27. copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
  • 28. Colorado Free UniversityColorado Free University UnderstandingUnderstanding the 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 in an HTML editor.
  • 29. Colorado Free UniversityColorado Free University 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!
  • 30. Colorado Free UniversityColorado Free University 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
  • 31. Colorado Free UniversityColorado Free University 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
  • 32. Colorado Free UniversityColorado Free University 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!
  • 33. Colorado Free UniversityColorado Free University http://www.alltm.org column 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 …
  • 34. 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 design Rigid, left-justified designsRigid, left-justified designs higherhigher 20%20% Lorem ipsum dolor sit amet Lorem 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 column 540px Optional content rigid 195px .GIF 190px .JPG 540px http://www.abos-littleton.com simple, small, rigid, left-justified design, even works in 640x480.
  • 35. Colorado Free UniversityColorado Free University1024px1024px 768px768px 60%60% How monitor size & screen resolution affect web designHow monitor size & screen resolution affect web design Flexible, centered designsFlexible, centered designs 800px800px 600px600px 20%20% Naviganda Meno una Meno duo Meno treo Meno katra Meno penta Lorem ipsum dolor sit amet Lorem 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 .GIF 190px .JPG 540px Rigid column 540pxRigid column 220px 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. FlexibleFlexible column:column: whitewhite spacespace 15%15% FlexibleFlexible column:column: whitewhite spacespace 15%15% Flexible table set to 100% wide
  • 36. Colorado Free UniversityColorado Free University 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.
  • 37. Colorado Free UniversityColorado Free University 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
  • 38. Colorado Free UniversityColorado Free University 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
  • 39. Colorado Free UniversityColorado Free University 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.
  • 40. Colorado Free UniversityColorado Free University 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."
  • 41. Colorado Free UniversityColorado Free University 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
  • 42. Colorado Free UniversityColorado Free University 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!

Hinweis der Redaktion

  1. ADD SLIDES: Include an EX: coding a table by hand 4/19: Definitely continue to show dreamweaver as a finale, i mporting the web we created into dreamweaver.
  2. 4/19: It worked well to begin Day Two with this discussion of addressing.
  3. 4/19: tried using this today before lunch. Didn’t feel it was all that effective. Plus, you use it in the dreamweaver class.
  4. First illustrate a rigid, left-justified design Then illustrate a flexible centered design. Talk about combinations of relative and absolute tables
  5. First illustrate a rigid, left-justified design Then illustrate a flexible centered design. Talk about combinations of relative and absolute tables