TOP    HOME --Index to this folder --'test-book'   ISO Latin-1 Character Set    Definition Glossary

 Typing is faster in 'Code' Mode View  then in 'Design' Mode View most of the time, as the file gets bigger.
(Created, copied into Microsoft Expression Web 4 program.) (Notes from following books copied here by Bernard Wotton)
This doc file name = "html_css_info.htm"

HTML CSS Info

The HTML Sourcebook  Notes start here  THS  [DONE]
Sam's Teach Yourself HTML and CSS in 24 Hours , Eighth Edition  Notes start here   STYHC8
Core CSS  Notes start here   CCSS
Making Family Websites  Notes start here   MFW  [DONE]

Create Your Own Website, Fourth Edition   Notes start here  CYOW  [DONE]
Creative HTML Design   Notes start here  CHD
Laptops for Dummies  LD   Notes start here    [DONE]
Absolute Beginner's Guide to Creating Web Pages ABGCWP    Notes start here    


html_css_info       73   163
HTML Code files working on:   THS_p6.htm    sample.html

Main Book Quotes    TheRockMCC.org Church Website Notes    Computer System Setup at Home

Element-Tags-List_Table    Sams Teach Yourself HTML and CSS in 24 Hours, Eighth Edition

Other Pages Linked  To:
favorites_from_internet_explorer-original-a  =  Natural Hygiene & Natural Raw Organic Whole Foods & Juices


Don't DELETE stuff in Design Mode only; have Split Mode View open & pay close attention to what is highlighted to be deleted. [I've lost coded stuff, comment notes, etc. in the past, by not going into Code Mode View area first to see what is going on, etc.]  Many times, have to go into Code Mode View area ONLY to delete, or add stuff just at the point, place, where you want it.

In ALL bookmark references & bookmark links, I want the PAGE  LINK + the BOOKMARK  LINK to be together in all bookmark links as in below 1 code line.
Example: the following HTML code:

<a href="html_css_info.htm#The_HTML_Sourcebook"><font color="#800080">THS</font></a>      [produces: THS ]   [this is OK, & works OK]

Blue part = page part of link. Green part = bookmark part of link. Black = link TO green bookmark below.

which links BACK to the 'bookmark' anchor, which is listed in the next 'code' line:

<a name="The_HTML_Sourcebook"><span class="style9">The HTML Sourcebook</span></a>    [the bookmark 'name' itself]

The HTML Sourcebook    [in Design Mode View, this bookmark is dotted-underlined, made by CTRL-G in Design Mode: highlight all wanted characters, then press CTRL-G to make a bookmark anchor.]


I want ALL bookmark links to be as in above blue & green part of anchor bookmark link.
Don't need the blue part when bookmarks are on same page, but on different pages need blue & green.
But I want bookmarks on same page
to have blue & green parts in their links.

How can I make
the programs - Microsoft FrontPage or Expression Web, etc.
NOT  CHANGE  HTML  CODE   that I enter in  at the Code Mode View. ???  Always copy text  --the raw HTML code lines--  only from the Code Mode View area  & only paste that 'copied stuff' back into Code Mode View area.  Only 'FIND' the text area --to be replaced, or added to-- in Design Mode View area,  but paste the code lines back into the Code Mode View area ONLY. If you copy & paste from & into the Design Mode View area, the program only puts in its own 'guess-work' HTML code, which is NOT what you want, in many, many cases, as far as 'relative partial bookmark links' is concerned, etc. So copy & paste code lines from & into the Code Mode View area ONLY...

This is how all bookmarks links in church website MUST be also; NOT "full links" --the 'therockmcc.org' part must be OFF, deleted, for links to work at home & on host site, or any other place, such as on a flash drive... This is using "partial links" which are 'relative'  to the folder the index.html file is in. Only time for "full links" is when in a different website, when linking to pages OUTside of the current website.

"The HTML Sourcebook"     THS  by Ian S. Graham  c 1995 [located at Collegedale public library] [Covers up to proposed HTML 2.0 & HTML+] [John Wiley & Sons, Inc.; softback; 416 p; 9 chapters]  Start at: THS here

"Sam's Teach Yourself HTML and CSS in 24 Hours, Eighth Edition"       STYHC8   by Julie Meloni & Michael Morrison c 2010 [located at Collegedale public library] [Covers HTML 4.1 & HTML 5.0, XHTML, CSS] [Sams Publishing; softback; 445 p]  http://informit.com/register  free Online Learning Lab for above book; http://www.informit.com/safarifree coupon code = CQVGNCB for free online edition of above book for 45 days... [I have never taken advantage of this service before, do it this time after I get EPB Fiber Optics Internet Service installed by Friday, Jan. 28, 2011.] Create modern, standards-compliant web sites. http://teach-yourself.tv/TYHTMLCSS/   Notes start here

"Core CSS"     [Cascading Style Sheets]  CCSS  
by Keith Schengili-Roberts c 2000 [located at Downtown public library] [Prentice Hall; softback; 635 p] [CD is missing]   Notes  start here

"Making Family Websites"    MFW   [Fun & Easy Ways to Share Memories] by Jenni Bidner c 2003 [located at Collegedale public library] [A Lark Photography Book; Lark Books: A Division of Sterling Publishing Co. Inc.; softback; 144 p]  Notes start here

"Create Your Own Website, Fourth Edition [8 Easy Projects in full color]  CYOW  by Scott Mitchell c 2009 [located at Collegedale public library] [Sams; softback; 240 p; CD] [free online edition for 45 days... see above Sams book]  http://www.4GuysFromRolla.com/ScottMitchell   http://www.ScottOnWriting.net [includes: SeaMonkey software] www.ScottAndJisun.com   Notes start here 

"Creative HTML Design" CHD [a hands-on html 4.0 web design tutorial] by Lynda Weinman & William Weinman c 1998 [located at downtown public library] [New Riders; softback; 434 p; CD; www.mcp.com] http://www.htmlbook.com  http://www.lynda.com  http://www.weinman.com/wew/   http://ducks.htmlbook.com  [no longer up] 
"Creative HTML Design 2" [info same as above except:] c 2001 [ updated version, edition; 513 p; CD][combining these two books in one note section.]   Notes start here 

"Laptops for Dummies"  LD  [4th Edition by Dan Gookin]  [c 2010, 342 pages, located at Collegedale public library] [http://www.wambooli.com/]
Notes start here   

"Absolute Beginner's Guide to Creating Web Pages"  ABGCWP  [Todd Stauffer c 2002, 537 pages; Que Publishing] [located at Downtown public library] http://www.mac-upgrade.com/abgcwp  Notes start here   


Websites

Misc Websites for HTML
/Design

http://designfestival.com/

Online html tutorials:
http://ncdesign.kyushu-id.ac.jp/  no good
http://www.nchu.edu.tw/NCD/html/html_design.html
http://help.netscape.com/links.html  no good
http://www.microsoft.com/workshop/design/default.asp#general  no, but search for similar stuff
http://msdn.microsoft.com/workshop/design/
http://home.webmonster.net/mirrors/bloo-html/

Software:
http://www.shareware.com
http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/HTML_Editors/MS_Windows/
http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/data_Formats/HTMl/
http://www.cnet.com/Content/Reviews/Compare/11htmleds/
http://www.dsport.com/sjm/resources.html
http://www.pcmag.com/iu/features/1520/_open.htm

http://daol.aol.com/articles/you-can-beat-the-blue-screen?icid=main%7Chtmlws-main-w%7Cdl9%7Csec1_lnk3%7C199091
http://www.microsoft.com/whdc/devtools/debugging/default.mspx
http://support.microsoft.com/kb/315263



Calendars:
http://css-tricks.com/elastic-calendar-styling-with-pure-css/
http://www.cssnewbie.com/example/calendar/
http://www.dhtmlsite.com/csscalendars.php
http://www.mychurchevents.com/
http://www.dhtmlsite.com/csscalendars.php
http://www.dynamicdrive.com/style/
http://www.ehow.com/how_5606863_create-css-calendar.html
http://www.dynamicdrive.com/forums/showthread.php?t=25600
http://www.jsftoolbox.com/documentation/tomahawk/09-TagReference/tomahawk-inputCalendar.html
http://www.keepandshare.com/myhome/

http://www.crunchgear.com/2011/02/02/everybody-panic-why-were-running-out-of-ip-address-and-whats-going-to-happen-now/?icid=main%7Chtmlws-main-w%7Cdl10%7Csec3_lnk1%7C198819  IP addresses: IPv4  to 
IPv6 ready
http://www.itworld.com/internet/135546/ipv4s-funeral-expected-come-thursday?source=ITWNLE_nlt_smallbusiness_2011-02-02
http://www.itworld.com/networking/127525/ipv6-basics-getting-started-ipv6
http://www.itworld.com/networking/116217/going-ipv6-isnt-going-be-easy

Gay Marriage:
http://www.youtube.com/watch?v=FSQQK2Vuf9Q&feature=player_embedded


Quotes:  Following are quotes from the above named book(s)...

No quote marks [" "] needed. Each "quote part" starts with a "number-letter" next to a ], right bracket, and ends with book abbreviation link & page number(s) that links back to that quote bookmark --the number-letter-] part at start of quote.

'...' shows that parts of the original material are not quotes at that spot in the quote. I'm only quoting enough of the original to give a good context meaning of the word-phrase that I'm dealing with, working with, in the links, etc.

Quotes are quoted in 'word for word' copy form only  --'letter for letter' copying, typing by hand; it does not refer to original bold, italics, size or color, font used, etc. Those attributes are lost during the typing by hand of the original materials [copying by typing by hand only copies the raw plain characters, letters, numbers, marks, that are on the printed page; it does NOT copy HOW that character is formatted on the printed page. I can or could make a side note as to how the original text characters looked like on paper at some particular place, etc. But all copying is typed in ASCII plain text stripped of all formatting stuff, which is impossible to reproduce by typing anyways... I could only describe what it looked like if it was important enough to take notice of in the original printed page,]  --sometimes some of them --they-- are added in as to how the original materials looked liked on printed paper, but most of the time, I use my own certain fonts, size, color, etc. and, so, whatever attributes are present affecting the characters-letters-words, are my own doing for my own benefit & use. Using a computer program, I can add in all kinds of formatting stuff to my own liking. I use certain colors for links, certain font size for different things --parts of-- in each quote & non-quotes --my personal notes--.

In other words, quotes refer only to the bare, mere, simple letters & words making up the original quote in, from any material using. Word for word, letter for letter copying, NOT how original was formatted on printed paper. If you want to know how the original paper looked like, Xerox, photo-copy a copy of the original piece of paper.

How to do this; how to index each quote, and how to index word-phrases in the quote...

Index, start each quote by a bookmark of #q such as '0002q]  ' ... Make the quote ID Number a bookmark & save doc file. Write, copy the quote, after the quote, put the book id abbreviation link, then the page number, which links to the bookmark number at beginning of that quote.  '[[/]]' is used inside of a quote if it spans 2 pages in the original , which shows the page division place, and 2 separate page numbers is used, one for each page.  Two 12-point size spaces between quote number and quote and square brackets, etc. Quote itself is in 14-point size font.

Also, when quoting text from one place and adding quoted text from another place, use '...[ ]...' to indicate that quoted incidence, and use it to reference book's page number --such as at quote 30.

Also, stuff added by me, and not part of the quote, are distinctly shown by '  [[ ]]  ', which are 2 spaces, 2 start left square brackets, my stuff, 2 end right brackets, 2 spaces, and as always the 2 spaces are 2 12-size font spaces, used at all places where 2 spaces are used. Examples are at quote 3 and quote 13.

Now index word-phrases in the quote, & add it into the Word Definitions part in the favorites_from_internet_explorer-original-a file. How to get links to work from different pages to different pages. Links don't seem to work very well across different pages; links works best in the same page. (Or at least they work fastest in the same page.)


Misc Notes

Tabs in Tables go to the next cell part of a table, instead of adding spaces at that point in the raw HTML code, when typing in Design View. So must type in spaces to move text over, etc.

Working OFFLine, locally; browsing offline, OffLine, browsing locally the computer hard drive:
Browser Name > ADD the 'Command bar' if not showing > Tools > Work offline
Now, HOW do you open any file on hard drive to be viewed in Internet Explorer? Where is the "File open" option from any of the put-down menus? Can I make an Internet Explorer to act like a Window Explorer, in that IE does not act as if it must be online to view a doc file? But can be in OffLine mode to view local files on hard drive?


Coping code from one place to another place:

1) Put doc in Split mode;
2) Find the place to copy in Design mode;
3) notice what is highlighted in Code mode;
4) isolate that code mode area by adding 3 lines before and 3 lines after that code area in code mode;
5) now copy that code mode area;   [that code is now in memory ready to be copied to other places.]
6) Now, in Design mode, find the place area that you want to either replace, or add the HTML code in at;
7) now isolate that area as done in step # (4) above;
8) now, either highlight that isolated code & press CTRL-V to paste new copied code into that area
9) or, highlight that area & delete it, then press CTRL-V to paste new code at that spot. Both ways work...
10) Save the doc. Now inspect doc to see if all is now OK.

11) This does NOT work when just copying that area while in Design mode [only part of area is copied, not all of the HTML code part];
12) Must be in Code mode to copy the full raw HTML code.


Copying Links to Other Pages
Page links works OK from page to page. I have trouble with bookmark links when copying a bookmark link from one page and pasting it onto a different page. They do NOT work asis; must redo the links somehow. Maybe the page link + the bookmark link in the <a> anchor code. I want to learn how to do this correctly, so when a whole site is copied from one place to another, all links still work correctly no matter what. In church website on my hard drive, many links do NOT work because they are not partial links, but complete links, which are NOT needed within a website, only complete links to pages outside of present, current website. I believe this is true. Bookmark links on same page uses 'less' partial links; bookmarks that are copied to other pages, I guess, must use 'greater' partial links, that is, include that page's link along with the bookmark link... Try it out to see if that works OK. If it does work correctly, that is how I probably will have to re-do the 'great' index in the food folder. I dread redoing that big file into smaller ones & redoing all the links... See part near top...


URL = Uniform Resource Locator
    Complete [full] URL, & Partial URL

http: = HTTP = HyperText Transfer Protocol
ftp: = FTP
mailto: = email address
file: = local computer file system access

telnet:/rlogin:/tn3270:
gopher: = Gopher
wais: = WAIS
news: = NNTP
 


URN = Universal Resource Numbers
HTML = HyperText Markup Language
    up to HTML 5.0
XHTML = eXtensible Hypertext Markup Language = XHTML 1.1
    current standard for web page creation

CSS = Cascading Style Sheets  = CSS2 & CSS3

elements
tags
attributes
    values
strings
nesting

<p>  --NOT used by itself to make a line break, or to move down 1 line

<p> </p>  --container tag of text

<p> & </p>  --use both kind of tags together

<br />  --empty tag   [tags that does NOT affect text]

< />


DOS = Disk Operating System
UNIX
PC = Personal Computer = IBM type computer [such as Dell, HP, Acer, etc. that uses Intel or AMD chips]
Macintosh = Apple computer
www = World Wide Web
CGI = Common Gateway Interface
ISO = International Standards Organization
SGML = Standard Generalized Markup Language
DTD = Document Type Definition
MIME = Multipart Independent Mail Extensions

 
Browsers:
Apple Safari
Google Chrome
Microsoft Internet Explorer
Mozilla Firefox
Opera

Avant
AOL = America OnLine

browser = picture frame with web content from web address in address bar


Websites Addresses

http://www.w3.org/Style/CSS   CSS
http://home.netscape.com   Netscape Navigator browser
http://www.microsoft.com/windows/ie   Microsoft's Internet Explorer browser
http://www.opera.com   Opera browser
http://www.mozilla.org   Mozilla browser

Usenet newsgroup:
comp.infosystems.www.authoring.stylesheets   CSS




HTML_CSS_in_24_Hours


Sams Teach Yourself HTML and CSS in 24 Hours, Eighth Edition   sample.html

"create top-quality web pages ... state-of-the-art web page publishing ... create a modern, standards-compliant web site"  STYHC8 vii

"Writing valid, standards -compliant HTML and CSS"  STYHC8 9

http://en.wikipedia.org/wiki/History_of_the_Web
http://www.google.com

http://www.apple.com/safari
++

http://www.google.com/chrome
http://www.mozilla.com/firefox
http://microsoft.com/ie
http://opera.com/

http://www.thelist.com/  = IPS


<img src="/logos/logo.gif" width="384" height="121" border="0" alt="Google" />

<a href="/downloads/artfolio.zip">Download my art portfolio!</a>


"plain-text files to the rich multimedia displays"  STYHC8 01

"mother of all networks"  [[= Internet]]  STYHC8 01

"web content"  [[= web page of content = web page [older]]]  STYHC8 02

"you cannot control any aspect of what your visitors use when they view your site." so test with multiple web browsers  STYHC8 08

"The metaphor of the World Wide Web as a library ... individual websites are books ... individual content files ... as 'pages' ..."  STYHC8 10

"Visual web design tools  [[WYSIWYG programs]]  have a knack for making code difficult to read, and also for producing code that is convoluted and non-standards compliant."  STYHC8 10

"To use FTP, you need an FTP client --a program used to transfer files from your computer to a web server."  STYHC8 14

"FTP Client":
Classic FTP: http://www.nchsoftware.com/classic/
FileZilla: http://filezilla-project.org/
FireFTP: http://fireftp.mozdev.org/  STYHC8 15

"The document root of your web server is the directory that is designated as the top-level directory for your web content ... named public_html" ...  STYHC8 17

"the document root is the directory represented by the trailing  [[forward]]  slash (
/)"  [[such as: 'http://www.therockmcc.org/']]  The document root is the starting point of the directory structure you create on your web server; it is the place where the web server begins looking for files requested by the web browser."  STYHC8 19

"  [[the index.html file or just index file is the default file or main file, or home page, folks see when visiting a website.]]  Another function of the index page is that when users visit a directory on your  site that has an index page, but they do not specify that page, they will
still land on the main page for that section of your site --or for the site itself. ... http://www.ipass.com/solutions/  [[=]]  http://www.ipass.com/solutions/index.html STYHC8 21

"  [[If one attempts to access a folder on church website, such as "http://therockmcc.org/team_ministries/fellowship_team.htm", then erases the file name by backing up to the folder, such as "http://therockmcc.org/team_ministries/" they get the following 'error' message: "Forbidden" "403 Forbidden" "You don't have permission to access /team_ministries/ on this server." Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. Apache/2 Server at www.therockmcc.org Port 80]]  The previous error was given because "the server is configured to disallow directory browsing"  STYHC8 22

"Distributing Content without a Web Server
Publishing Content Locally  [[such as on a USB flash drive]]  ... Publishing Content on a Blog"
http://www.portableapps.com/  find Portable Firefox browser to add to USB drive.  STYHC8 22, 23

"Testing Web Content"  [[6-point checklist for rigorous testing: photo-copy this page.]]  STYHC8 24

"the organization of your web content does matter to search engines and potential visitors to your site"  STYHC8 25

"[[start at Exercises  file:///G:/CURRENT/current_files/sample.html  [USB drive named: "USB_8G_Bern"]  ]]  STYHC8 26

"the faster the connection, the better for the overall experience."  STYHC8 27

"Explore! Use a web browser to look around the Internet for web sites that are similar in content or appearance to those you'd like to create. Note what frustrates you about some pages, what attracts you and keeps you reading others, and what makes you come back to some pages over and over again."  STYHC8 28

"as in every HTML page, the words starting with
< and ending with > are actually coded commands. These coded commands are called HTML tags because they "tag" pieces of text and tell the web browser what kind of text it is. This allows the web browser to display the text appropriately."  STYHC8 30

"The first few lines of code in the web page serve as
standard boilerplate code that you will include in all of your pages."  STYHC8 30

"start p34

"

"

"



http://www.google.com = Google Search


Web Hosting Provider:
http://asmallorange.com
http://www.dailyrazor.com
http://www.lunarpages.com

some criteria:
reliability/server 'uptime'
customer service
server space
bandwidth
domain name purchase and management
price
'control panel'



Main Book Quotes


Main Book Quotes

Introduction THS (ix - xvi)  xiv

0001q]  Writing good HTML documents involves both technical issues (proper construction of the HTML document) and design issues (ensuring that the information content is clearly presented to the user).  THS __ix

0002q]  This image of interlinked resources is, in fact, the vision that gave rise to the name World Wide Web.  THS xii

0003q]  Browsers understand HTML hypertext anchors  [[also called: bookmarks]]  and the URLs they contain, and they have built-in software to talk to Internet servers using the proper protocols.  THS xii

0004q]  ... the importance of using correct HTML markup constructions when you create your HTML documents.  THS xiii

0005q]  ... the references therein should be used as detailed guides to correct HTML. ... present a detailed exposition of ... HTML markup instructions.  ... also explains the syntax and rules for constructing ...  THS xiii

0006q]  ... useful references to sites on the Internet that contain instructional interactive documents.  THS xiv

0007q]  ... there are tools for converting collections of e-mail letters into hypertext archives, or for creating a hypertext "Table of Contents" for large collections of related HTML files.  THS xiv


Chapter One: Introduction to the Hypertext Markup Language THS (1 - 69)  60


0008q]  ... HTML, is designed to specify the logical organization  [[and formatting  THS 71]]  of a text document ... requires that you construct documents with sections of text marked as logical units, such as titles ... lists ...  THS _01

0009q]  ... HTML is a structured language ... rules are there to enforce an overall logical structure upon the document.  THS _03

0010q]  What do these markup tags and elements mean? Since HTML is a hierarchical language, this is best analyzed by starting from the outside and working in.  THS _07

0011q]  ... the contents of the TITLE element  [[placed inside of the HEAD element]]  ... is displayed in the frame of the window  [[somewhere at the top of a browser such as in a title bar, or on a tab bar]] ...  Because of the way it is used, you want the TITLE to be both descriptive and short.  [[/]]  ... be descriptive of the document, as it is often used as a reference to visited sites  --you should  be able to guess the content of a document from the TITLE alone.  THS _08 - _09

0012q]  ... there are several other HEAD elements ... that describe the relationships between a document and other documents. These will be extremely useful for indexing, cataloging, and organizational purposes ...  THS _09

0013q]  The rendering of an HTML document ignores extra spaces, tabs, and blank lines  [[in the raw HTML code]], and effectively treats any combination of them as a single space character. ... you can use  [[extra]]  [[white]]  spaces,  [[blank]]  line breaks, and indentations  [[ or, tabs]]  to organize the logical layout  [[taking about the programming code itself  --which is only just plain text--, such as 'code mode' vs. 'design mode' in programs like 'Expression Web2'; 'Notepad' is plain text only]]  of an HTML document  [[sort of like an outline, in the code mode, since they, all the extra stuff are ignored by any browser,  as long as they are 'outside' of any code itself. Comments  --are not part of the document's text, nor part of the code proper, but are used to make notes to myself, the programmer, & future readers of the code, in how things were done, to tell what each section is for, & is used to 'blank-out' certain code parts in testing out how the code works, in showing alternate ways of doing things, & of code values used in the past, etc.--  which are placed inside of the following comment code that are between the single quote marks, the word in red inside the comment code is the comment text area (which can be only normal keyboard typed text characters) '<!-- comment -->'  in the code also can help organize the code part. In the raw code area, this is displayed as by the following color '<!-- comment -->'.]]  ...  THS 10

0014q]  logical highlighting elements,  such as CODE,  [[EM]]  ... physical highlighting elements, such as B ...  THS 11

0015q]  ... it is usually best that hypertext links flow naturally out of the text.  [[/]]  In general, if you are adding links within a text document that is intended to be easy to read, it is best to make the links as unobtrusive as possible.  THS 27, 30  [see link to a single word: THS 29]

0016q]  Sometimes, it is useful to include the URL of a document you are referencing as part of the text --you don't always have to hide the URL in the HTML markup. This is particularly useful if your document is likely to be printed by a browser, since the HTML markup tags are lost on paper.

[[example code:  (I want to blockquote following raw code instead of doing it asis. Bottom part is OK... OK now ?? !)
<p>...Read the Wusage home page, which is found at <i><b>
<a href="http://siva.cshl.org/wuage.html">http://siva.cshl.org/wuage.html</a>
</b></i>&nbsp; It is a wonderful repository of useful information about the www.</p>

above raw code produces:

... "Read the Wusage home page, which is found at http://siva.cshl.org/wuage.html."   It is a wonderful repository of useful information about the www.

end]] [from: THS 30]
     ...If you are reading the printed version, you still have all the information you need to access the site when you next have access to the Internet.  THS 30

0017q]  Notice the UNIX-like directory pathnames  [[in partial URLs]]  in which the forward slash character  [[///]]  indicates a new directory. ... Note that you cannot use backslashes  [[\\\]]  as you do with DOS and Windows, or colons  [[ ::: ]]  as you do on Macintoshes.  THS 25  [see partial URLs: THS 22, 23]

0018q]  You also don't want the link to be gratuitously  [[needlessly]]  long. It is much more effective to link to a single word or selection of words  [[or, word-phrase]]  than to a whole sentence.  THS 29  [see links flow naturally: THS 27, 30]

0019q]  ... a page full of random links is exceedingly frustrating to use. Link-mania pages like this can occur quite innocently, often when you have been slowly assembling lists of interesting URLs.  THS 30

0020q]  If a paragraph has many links, try thinking of another way to present the material: Maybe it should be a list or a menu, or perhaps the hypertext anchors could be combined into a less intrusive form.  THS 32

0021q]  A home page is designed to be the first page seen by explorers from the outside world and is your introduction to new Web visitors to your site. It is used to direct people to other interesting resources that you have and perhaps to other resources in your Internet neighborhood.  THS 32

0022q]  There are several issues to think about when designing a home page. A home page should be:  [[/]]
1. Small ...
2. Concise ...
3. Not Dependent on Graphics ...
4. [[have]]  Contact Information ...  THS 32 - 33

[[5.
Main important links at top  (concerning web site purpose)
[[6. Secondary less important links below  (other topics of interest) [from: THS 39]
[[7.
Universal navigation iconic links  (home, up, down, previous, next, bottom of page, top of page, etc.) [see: THS 41]

0023q]  [[1]]  A home page should be a small HTML document... Large images and the details of the resources at your site should be elsewhere ...  THS 33

0024q]  [[2]]  [[Concise]]  A home page is like an introductory map of your site, explaining what the side is and where to find the local resources. Thus, it should briefly outline the content of your server and provide hypertext pointers to those resources. It should also briefly outline the organization of your site, such as the meanings of icons or menus, so that visitors will know how to navigate their way around.  THS 33

0025q]  ... headings can range from H1 down to H6, in decreasing order of importance. Documents should use heading elements that retain this sense of relative importance, as it helps to build organizational structure within and between documents. There are, for example, useful programs that can build a Table of Contents for large collections of HTML documents based on the contents of the heading elements. This, of course, will work only if the heading elements were used correctly.  THS 37

0026q]  The text portion of the home page document ... should provide clear and concise descriptions of the site and the material it contains, with a minimum of extraneous detail. This should match the type of introduction you prefer: polite and well mannered, or eclectic and off the wall. ... the first paragraph explains what the site is and provides links to the major areas of interest. Each of these areas may, in turn, have their own home page, specific to the subject at hand. This hierarchical structure lets people quickly find what they are looking for and makes it easy to organize your documents. For example, your HTTP server can have independent subdirectories for each distinct project, with your server's main home page having hypertext links to each project's home page. Other hypertext links will provide alternative relationships between documents, but within this overall hierarchical arrangement.  THS 39

0027q]  ... shows the importance of good organizational design: A little thought about how the hypertext links should be  [[/]]   organized makes an enormous difference in the clarity and readability of the presentation.  THS 39, 40

0028q]  The noticeable feature is a collections of small icons, preceded by a short explanation of their meaning. These icons appear on every HTML document at our site and provide universal cues to navigating through the local document collect.  THS 40

0029q]  Having navigation icons is extremely important, particularly when you have a large number of related hypertext documents. It is very easy to get lost when you are browsing through such large collections. Hypertext is not like a linear book, where you can always tell where you are by the page number or the thickness of the remaining pages. Navigation icons replace these tactile methods of navigation with symbols that link you to reference points within the collection.  THS 41  [see: THS 32]

0030q]  The latter problem  ...[accessing the server several times to obtain icon images  [[which can be very time consuming]]  ]...  is mitigated by using the same icons in all your pages.  THS 41  ...[THS 41]...

0031q]  ... the ADDRESS element and the signature e-mail address located at the bottom of the document. It is always a good idea to sign your HTML documents, particularly the home page or other major pages. ... also has a hypertext link from the e-mail address to another page  ...[web_admin.html]...  containing additional information ... about the server ... administrator  [[webmaster]]  ... brief biography of the document author.  THS 43

0032q]  ... hypertext collection of text-based documents. One common use of HTML is to prepare online documentation or online collections of reference materials.  THS 44

0033q]  1. Each document should be small  [[and self-contained  THS 56]]  ... Although you can build hypertext links within a  [[large]]  document to other points inside the same document, this is generally more difficult to navigate than a collection of smaller files.  THS 44

0034q]  2. Each document should have  [[proper]]  navigation tools...  THS 44

0035q]  3. Documents should show a consistent presentation style.  THS 45

0036q]  ... a flat collection of documents, in that all the files lie in the same directory and are linked together in a serial fashion.  [[such as 'Previous' & 'Next' links]]  [[/]]  The documents are also ordered hierarchically. Thus, this example document discussing the HR element is "under" the BODY document which is, in turn, "under" the Table of Contents.  THS 47 48

0037q]  Organization ... Table of Contents document for this collection ... Notice how this gives a complete overview of the document tree, including the relative placement of the sections in the hierarchy and the hypertext links to each section. ...  [[/]]  [[It is generated, made from,]]  using the headings embedded in the documents to create both section names and a hierarchical organization. This is another good reason to use appropriate heading elements.  THS 51, 52

0038q]  Helper Applications ...  [[some]]  browsers are not capable of displaying these data formats. ... The answer lies in so-called helper or viewer applications, which are programs on the user's computer that can be used to display images, movies, or sounds that cannot be displayed by the browser itself.  THS 60


Chapter Two: HTML in Detail
THS (71 - 159) 112


0039q]  HTML is designed to be a platform-independent document representation format that:  [[/]] 
            [[*]]  Is not bound to a particular hardware or software environment
            [[*]]  Represents the logical structure of a document, and not its presentation  THS 71, 72

0040q]  An HTML document can contain any of the valid printable characters from the 8-bit ISO Latin-1 character set (also know as ISO 8859/1 ...). The 256 characters of the ISO Latin-1 character set consist of the 128 characters of the 7-bit US-ASCII character set (ISO 646), plus 128 additional characters that use the eight bit This extra set of 128 contains many of the accented and other characters commonly used in western European languages.  THS 73

0041q]  With most keyboards, it is difficult to type these non-ASCII characters. Partly for this reason, HTML has mechanisms for representing these characters using only 7-bit ASCII characters. These are called  [[letter-symbol]]  character references and  [[letter-symbol]]  entity references. For example, the character reference for the character "é" is &#233; ... while the entity reference  ... is &eacute;.  THS 73  [see THS 162, 163]
ISO Latin-1 Character Set


0042q]  Special Characters ... Certain ASCII characters are treated as special in an HTML document. ... The ampersand character (&) is used to indicate an entity or character reference; the left and right angle brackets (< >) are used to denote the markup tags; and the double quotation mark (") is used to mark literal strings within the markup tags.
Since these characters are interpreted in a special manner, they cannot be used as normal characters ...  [[Must use the references in the following chart]]  THS 74
 

Character Character Reference Entity Reference
Left angle bracket  (<) &#60; &lt;
Right angle Bracket  (>) &#62; &gt;
left and right angle brackets (< >) are used to denote the markup tags
 
Ampersand sign (&) &#38; &amp;
ampersand character (&) is used to indicate an character reference or entity reference
(an ampersand (&) starts these references and a semicolon (;) ends them)
 
Double quotation mark  (") &#34; &quot;
double quotation mark (") is used to mark literal strings within the markup tags
     


0043q]  An HTML document is simply a text file in which certain strings of characters, called  [[markup]]  tags, mark regions of the document and assign special meaning to them. ... these regions are called elements. The tags are strings of characters surrounded by the less then (<) and greater then (>) signs. ...  [[/]]  Most elements ... mark regions of the document into blocks of text ...  THS 76, 77

0044q]  Elements that mark blocks of text are often called containers. ... Each element has a name, which appears inside the tags and which is related to what the element means. ... Elements may also have attributes, which are quantities that specify properties for that particular element. ... Most attributes ... are assigned values. 
THS 77

0045q]  The element and attribute names inside the markup tags are case-insensitive. ...  [[/]]  Attribute values ... are often case-sensitive. ... This is accomplished by enclosing the attribute argument  [[value]]  in double quotes ... 
THS 78, 79

0046q]  Elements are always nested ... elements can never overlap. 
THS 80

0047q]  Because HTML is a hierarchical language, it is important to know not only how to use an element, but also where it can be used.  [[In this book,
THS, the HTML specifications, element by element, is given in a detailed hierarchical list.]]  This information is given in the four lines  [[4 fields]]  at the beginning of the description of each element.  [[These four fields are called: 'Usage:', 'Can Contain:', 'Can Be Inside:', and 'Attributes:'.]]  THS 82

[to next quote: 0048q]

element-tags-list

Elements  --Tags, Attributes, Values--  Table  from THS

top first lines area elements 
head elements  head elements   body elements   list elements   character-related elements 
logical_character_highlighting elements   physical_character_highlighting elements   misc elements
 
<< 775 pixels wide. >>  [Keep asis so as to visually measure below table against this, to make sure table hasn't gotten wider.]
  Template for making  multi-colored LINK    ingredients food only
 Template for making  multi-colored BOOKMARK     ingredients food only
 
 Covers: HTML  &  HTML2.0  &  HTML+
(Red tags are related to CSS formatting.)
 Element Names  are "case-insensitive".  Attribute value strings  enclosed in double quotes are  "case-Sensitive".
 Now, ALL tags MUST have closing tags: ADD  'a 'space',  and a  '/''  to close empty tags, such as <hr />.
Element Name  (tags) Usage Can Contain Can Be Inside Attribute =  >> Values or Options
(strings)
Depreciated
tags
Notes

"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element can be at in raw HTML code.
Attribute = Value    or    Attribute = Option      
Attributes are much like variables & assigned values.  Make a table list of all options / values of each Attribute.
 Generally, first value / option listed is the default value for that attribute, such as at <img />  align = bottom / middle / top.
  

Top first lines area elements:  of doc file before the <html> tag:
 ?xml:
the
<?xml ? /> ?? ??  version, encoding      
version = "n"
encoding = "character set encoding string"
EX:    <?xml version="1.0" encoding="UTF-8" ? />
 
DOCTYPE:
the
<!DOCTYPE /> ? ??        
EX:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" />    <!doctype html>  = HTML 5
 
html element:  the entire HTML document page  [from: THS 85]
html:
the html doc
<html> ...</html> head, body nothing none, xmlns, xml:lang      
 xmlns = "URL" [ = XML namespace = official web address of XML, similar to as in doctype]
 xml:lang ="en"   [ = "language 2-letter code";  en = English]
 
EX:   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
 end   Element-Tags-List_Table Top
head elements:  the top part non-text area  --information about the doc  [from: THS 86 - 93]
head:
doc meta-info
<head> ...</head> title, isindex, base,
nextid, link, meta
html none      
title: doc title <title>...</title> characters head none      
style:
add css info to specific HTML tags
style

<style>
...
</style>
CSS head disabled, media, title, type, id, class      
 Style:  (1)  in page  <head>    (2) in page tags:  being  inline  inside tag   (3)  in separate  linked  '.css'  file       CSS
 disabled  [disable CSS formatting at this place only] CSS
 media = all | braille | print | projection | screen | speech CSS
 title = "string" [gave a name to a CSS style] CSS
 The TITLE attribute is used to "name" a particular CSS style contained within a <style>, <span> or <div> tag.  Using the name the Web author has assigned to the tag, the Web author can create a number of different formatting styles, and the author can then apply different styles to individual sections of the Web page. The idea is to enable a Web author to create a gallery of different formatting styles, which the author can then selectively apply to individual Web pages within a Web site.
 type = MIME type  = "text/css"  or  "text/javascript" CSS
 id = CSS
 class = CSS
 
    CSS body inline tags        
               
isindex:
searchable doc
<isindex /> empty head none      
base:  base URL <base /> empty head href URL, filename    

 /\  href"URL" & / or filename, img (graphic image icon)  [similar to src]

nextid:
counter for automated editors

<nextid> </nextid> empty head n number   n = some number
 n
link
link
: relationship to other docs
link

<link />

(link to a ".css" file)
empty
CSS
head same as a: href, methods, name, title, urn, rel, rev, id, effect, print, type, size, shape      
 /\  href
 methods
 name
 title
 urn
 rel
 rev
 id
 effect
 print
 type
 size
 shape
 
meta: doc meta-info <meta /> empty head http-equiv, name, content      
 http-equiv = "string"
 name = "name"
 content = "string"
               
               
               
               
               
 end
Element Name Usage Can Contain Can Be Inside Attribute =  >> Values or Options
(strings)
Depreciated
tags
Notes

"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element can be at in raw HTML code.
Attribute = Value    or    Attribute = Option      
Attributes are much like variables & assigned values.  Make a table list of all options / values of each Attribute.
 Generally, first value / option listed is the default value for that attribute, such as at <img />  align = bottom / middle / top.
  

 Element-Tags-List_Table Top
body elements:  the text part displayed on screen  --the document proper, itself  [from: THS 94 - 113]
body: the displayed TEXT body <body>...</body> hn, p, hr, dir, dl, menu, ol, ul, address, blockquote, form, pre html none      
address: provide address info <address>...</address> characters, character highlighting, a, br, img blockquote, body, form none      
blockquote: block quotes <blockquote>...
</blockquote>
hn, p, hr, dir, dl, menu, ol, ul, address, blockquote, form, pre blockquote, body dd, form, li none      
form: fill-in forms <form>...</form> input, select, textarea, hn, p, hr, dir, dl, menu, ol ul, address, blockquote, pre blockquote, body, dd, li action, enctype, method      
 action = "URL"
 enctype = "MIME Type"
 method = "get" or "post"
input: text boxes, checkboxes, radio buttons <input /> empty form, (any nonempty element allowed inside a form, such as: blockquote, p, ol, ul, li, ) align, checked, name, maxlength, size, src, type, value      
 name = "string name"
 type = "checkbox" [= "off", "on"], "hidden", "image", "password", "radio", "reset", "submit", "text"
 align = "top", "middle", "bottom"
 maxlength = "n"
 size = "n"
 src = "URL"
 checked = [selected on]
 value = "string value"
select: select from among multiple options <select>...</select> option form multiple, name, size      
 multiple
 name = "name string"
 size = "n" [default = 1, a pull-down menu]
option: list of options for select <option>...</option> characters select value, selected, disabled      
 value = "value string"
 selected
 disabled
textarea: input a block of text <textarea>...</textarea> characters form cols, name, rows      
 cols = "n" [width of box]
 name = "name string"
 rows = "n" [height of box]
hn: headings <hn>...</hn> characters, character highlighting, a, br, img blockquote, body, form id, align     n= 1, 2, 3, 4, 5, 6;
h1
- h6
(1= largest text heading)
n = "1", "2", "3", "4", "5", "6"
 id ="string bookmark name" [similar to <h1><a name="bookmark name">Bookmark: Headings " </a> </h1>
                                                                    <h1 id="bookmark name 2">Bookmark: Headings 2 "</h1>
 align = "left", "right", "center"
hr: horizontal rule <hr /> empty body, blockquote, form none      
               
               
               
               
               
               
 end
Element Name Usage Can Contain Can Be Inside Attribute =  >> Values or Options
(strings)
Depreciated
tags
Notes

"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element can be at in raw HTML code.
Attribute = Value    or    Attribute = Option      
Attributes are much like variables & assigned values.  Make a table list of all options / values of each Attribute.
 Generally, first value / option listed is the default value for that attribute, such as at <img />  align = bottom / middle / top.
  

 Element-Tags-List_Table Top
list elements:  defining different types of lists: glossary & regular lists   [still part of body Elements]  [from: THS 113 - 134]
dl: glossary lists (definition) <dl>...</dl> dt, dd blockquote, body, dd, form, li compact      
 compact [rendered in a physically compact way, such as reducing white spaces between list entries]
dt: term in a glossary list <dt>...</dt> characters, character formatting, a, br, img dl none      
dd: description in a glossary list <dd>...</dd> characters, character formatting, a, br, img, dir, dl, menu, ol, ul, p, blockquote, form, pre dl none      
ol: ordered list <ol>...</ol> li blockquote, body, dd, form, li compact      
 compact [rendered in a physically compact way, such as reducing white spaces between list entries]
ul: unordered list <ul>...</ul> li blockquote, body, dd, form, li compact, plain, wrap      
 compact [rendered in a physically compact way, such as reducing white spaces between list entries]
 plain [leave list items unmarked, leave out the bullets]
 wrap = "horiz", "vert"
dir: directory list <dir>...</dir> li blockquote, body, dd, form, li compact     (doesn't list in multi- columns like old DOS)
 compact [rendered in a physically compact way, such as reducing white spaces between list entries]
menu: menu list <menu>...</menu> li blockquote, body, dd, form, li none      
li: list item <li>...</li> characters, character highlighting, a, br, img, dir, dl, menu, ol, ul, p, blockquote, form, pre dir, menu, ul, ol src      
 src = "URL"
p: paragraph <p>...</p> characters, character highlighting, a, br, img blockquote, body, dd, form, li id, align, wrap      
 id = "string bookmark name" [similar to <h1><a name="bookmark name">Bookmark: Headings " </a> </h1>
                                                                      <h1 id="bookmark name 2">Bookmark: Headings 2 "</h1>
                                                                      <p id="paragraph_1">
 align = "center", "left", "right", "justify", "indent"
 wrap = "on", "off"
pre: preformatted text <pre>...</pre> characters, character highlighting, a blockquote, body, dd, form, li width     (fixed-width typewriter font)
 width = "n"
a: hypertext anchors <a>...</a> characters, character highlighting, br, img address, hn, p, pre, dt, dd, li, character highlighting href, method, name, title, urn, rel, rev, id, effect, print, type, size, shape      
The "a" either makes a bookmark target for a link "name", or a link to that bookmark or some URL webpage. [Un-clear the following two line parts --href & name; wording not quite right, not just right.]
 href = "URL" or "#string" or "URL#string" [destination of a hypertext link] [gives the target of a link]
['string' = a fragment identifier]
<a href="#poison">Poisonous non-mushrooms</a>  [bookmark in same doc]
<a href="http://domain/path/toads.html#poison">Poisonous</a>  [bookmark in another doc (on another website)]
 name = "string bookmark name" [marked text place in doc as a specific destination (bookmark) of a link that can be the target of a hypertext link] [start of a link]  <a name="poison">Deadly Toadstools </a>
 method = "method"
 title = "string"
 urn = "URN"
 rel = "string relationship" <a href="http://foo.edu/fe.html" rel="Useindex">sdfsddf</a>  [a pop-up, maybe]
                                              <a href="http://foo.edu/note1.html" rel="annotation"> related notes</a>
 [margin note]
                                              <a href="http://foo.edu/vers2.html" rel="supersedes">previously</a>  [revisions]
 rev = "string"  [like "rel" but relationship reversed] 
                                              <a href="http://foo.edu/vers2.html" rev="supersedes">later</a> 
 id = "string"  [similar to 'name' in 'hn' & 'p']
 effect = "replace", "new", "overlay"
 print = "reference", "footnote", "sidebar", "section", "silent"
 type = "MIME_type"
 size
 shape
               
               
               
               
               
 end
Element Name Usage Can Contain Can Be Inside Attribute =  >> Values or Options
(strings)
Depreciated
tags
Notes

"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element can be at in raw HTML code.
Attribute = Value    or    Attribute = Option      
Attributes are much like variables & assigned values.  Make a table list of all options / values of each Attribute.
 Generally, first value / option listed is the default value for that attribute, such as at <img />  align = bottom / middle / top.
  

 Element-Tags-List_Table Top
character-related elements:  [still part of body Elements]  [from: THS 134 - 138]
img: inline images <img /> empty character highlighting, a, hn, p, address, dd, dt, li align, alt, ismap, src, width, height, border      
 align = "bottom", "middle", "top"
 alt = "text alternative string"  [describing image; a text alternative to the image]  (Always use this.)
 ismap [active image]
 width = "n"
 height = "n"
 border = "n"
 src =  "URL" & / or filename, img (graphic image icon)  [similar to href]
br: line break <br /> empty character highlighting, a, hn, p, address, dd, dt, li none     like a hard carriage return
               
               
 end
Element Name Usage Can Contain Can Be Inside Attribute =  >> Values or Options
(strings)
Depreciated
tags
Notes

"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element can be at in raw HTML code.
Attribute = Value    or    Attribute = Option      
Attributes are much like variables & assigned values.  Make a table list of all options / values of each Attribute.
 Generally, first value / option listed is the default value for that attribute, such as at <img />  align = bottom / middle / top.
 

 Element-Tags-List_Table Top
character highlighting (two types: A & B) Elements:  [still part of body Elements]  [from: THS 138]
(A) logical character highlighting elements: (information-type formatting)  [still part of body Elements]  [from: THS 138 - 145]
cite: citations <cite>...</cite> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     text in italics
code: typed computer code <code>...</code> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     fixed-width font
dfn: defining instance <dfn>...</dfn> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     italics or bold italics
em: emphasis <em>...</em> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     italics
kbd: keyboard input <kbd>...</kbd> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     fixed-width typewriter font
samp: literal characters <samp>...</samp> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     fixed-width typewriter font
strike: struck-out text <strike>...</strike> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     line drawn horizontally through middle of text
strong: strong emphasis <strong>...</strong> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     bold
var: a variable <var>...</var> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none     italics or bold italics
arg:              
abbrev:              
CMD:              
acronym:              
person: <person>...</person>            
q:              
               
 end   Element-Tags-List_Table Top
(B) physical character highlighting elements: (character formatting)
[still part of
body Elements]  [from: THS 145 - 148]
b: boldface <b>...</b> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none      
i: italics <i>...</i> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none      
tt: fixed-width typewriter font <tt>...</tt> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none      
u: underline <u>...</u> characters, character highlighting, a, br, img address, hn, p, pre, dt, dd, li, a, character highlighting none      
s: strike-through              
sub: subscript              
sup: superscript              
               
               
               
 end
Element Name Usage Can Contain Can Be Inside Attribute =  >> Values or Options
(strings)
Depreciated
tags
Notes

"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element can be at in raw HTML code.
Attribute = Value    or    Attribute = Option      
Attributes are much like variables & assigned values.  Make a table list of all options / values of each Attribute.
 Generally, first value / option listed is the default value for that attribute, such as at <img />  align = bottom / middle / top.
 

 Element-Tags-List_Table Top
misc elements:  [still part of body Elements]     [plus still more listed below...]  [from: THS 148 - 159]
table: tables <table>...</table> caption, th, td, tr blockquote, body, form, dd, li border      
border
caption: table caption <caption>...</caption> characters, character highlighting, a, br, img table none      
<caption>Profits In each Year: 1983-1993</caption>
th: table heading <th>...</th> characters, character highlighting, a, br, img, table table align, colspan, rowspan     FrontPage automatically makes <th> into <thread>: Delete the 'read' part...
align = "left", "right", "center"
colspan = "n"
rowspan = "n"
<th align="left">Housing Prices:</th>
td: table data (in a cell) <td>...</td> characters, character highlighting, a, br, img, table table align, colspan, rowspan      
align = "left", "right", "center"
colspan = "n"
rowspan = "n"
<td center colspan="1", rowspan="2">23.33</td>
tr: end of table row <tr />    [<tr>...</tr>] empty table none      
FrontPage treats tr differently... (I guess)
<th>Heading<td>data 1<td>data 2<td>data 3<td>data4<tr>  (= 1 row with 5 columns)
abstract: abstracts <abstract>...</abstract>   body,        
fig: floating figures <fig>...</fig>            
footnote: footnote <footnote>...</footnote>            
lit: literal text <lit>...</lit>            
<lit at=10 at=20>...</lit> (defines TABs)
margin: margin notes <margin>...</margin>            
math: mathematical expressions <math>...<math>            
note: exclamatory notes <note>...</note>     src, role      
src = "URL"
role = "tip", "note", "warning", "error"
online/
printed
<online>...</online>
<printed>...</printed>
           
               
span:
span
: set CSS info for a specific inline section [that overrides previously set CSS formatting]
span

<span>...</span>
CSS body charset, href, hreflang, media, rel, rev, style, target, title, type
 charset = "ISO-#"   [# = international character coding used] CSS
 href = "URL" CSS
 hreflang = "string"  [base language of resource in href] CSS
 media = all | braille | print | projection | screen | speech CSS
 rel = "URL"  [of subdocument] CSS
 rev = "URL"  [of parent document] CSS
 style = CSS element; CSS element(s)  [CSS formatting] CSS
 target = "frame name" CSS
 title = "string"  ['name' of a CSS style] CSS
 type = "MIME type" CSS
 
div:
div
: set CSS info for a specific block element [that overrides previously set CSS formatting]
div

<div>
  ...
</div>
CSS body align, charset, clear, href, hreflang, media, nowrap, rel, rev, style, target, title, type      
 align = left | right | center | justify CSS
 charset = "ISO-#"   [# = international character coding used] CSS
 clear = none | left | right | all  [used with 'floating' element] CSS
 href = "URL" CSS
 hreflang = "string"  [base language of resource in href] CSS
 media = all | braille | print | projection | screen | speech CSS
 nowrap CSS
 rel = "URL"  [of subdocument] CSS
 rev = "URL"  [of parent document] CSS
 style = CSS element; CSS element(s)  [CSS formatting] CSS
 target = "frame name" CSS
 title = "string"  ['name' a CSS style] CSS
 type = "MIME type" CSS
style   CSS          
class: class is an HTML attribute that enables Web authors to "name" a set of formatting properties, which can then be called upon later in a Web page. class  as Selector CSS body        
ex:  <p class: large-font> ... </p>
               
id: id  is an HTML attribute that enables Web authors to assign a common type of formatting element that can be called upon by different HTML tags. id  as Selector CSS body        
               
               
               
               
               
               
Element Name Usage Can Contain Can Be Inside Attribute =  >> Values or Options
(strings)
Depreciated
tags
Notes
               

"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element can be at in raw HTML code.
Attribute = Value    or    Attribute = Option      
Attributes are much like variables & assigned values.  Make a table list of all options / values of each Attribute.
 
Generally, first value / option listed is the default value for that attribute, such as at
<img />  align = bottom / middle / top.  

 end   Element-Tags-List_Table Top
  
NOTES:
hn: = any heading elements, h1, h2, h3, h4, h5, h6
characters: = any valid ISO Latin-1 character, character reference, or entity reference
character highlighting:  = cite, code, dfn, em, kbd, samp, strike, strong, var, b, i, tt, u
character formatting
tab character: only use space characters to vertically align text  (tabs OK in raw HTML code mode only)
n = a number
 
[to previous quote: 0047q]


0048q] Because of the way it is used, you want the TITLE  [[title]]  to be both descriptive and short. ...   [[/]]  ... should  be descriptive of the document, as it is often used as a reference to visited sites ...  THS 08, 09

"[[the web page]] title text is also used to identify the page on the browser's Bookmarks or Favorites menu ... It's important to provide titles for your pages so that visitors to the page can properly bookmark them for future reference."  STYHC8 33

0049q]  The HTML definition states that if two adjacent elements describing the logical structure of the document
require some special vertical spacing, then only one of them (the largest spacing value) should be used and the other should be ignored.  THS 12

0050q]
  Images are included as if they were large letters or words appearing in line with the surrounding text and deforming the line spacing to ensure that no text overlaps the image.  THS 18

0051q]
  The element marking a hypertext link is called an A, or anchor, element, and the marked text is referred to as a hypertext anchor. The area between the beginning <a> and ending </a> tags becomes a hot part of the text. ... this section of text is displayed with an underline and usually in a different color (often blue) ...  THS 21

0052q]
  The target of the hypertext link is indicted by the anchor attribute HREF which takes as its value the URL of the target document or resource.  THS 22

0053q]
  These URLs are examples of partial URLs, which are a shorthand way of referring to files or other resources relative to the URL of the document being currently viewed.  [[/]]  ... this means: Use the same protocol  [[http://]], Internet Domain Name, and directory path of the present document ... , and retrieve the indicated file ... from the same directory. ... This partial URL idea is great news, because it means that you need not specify entire URLs for simple relative links between files on the same computer. Instead, you need only specify their position on the file system relative to each other ...  [[good news to web builders also: the same file folders on hard drive can be exactly like the ones on the host server, so browsers display web pages correctly, rather --no matter if-- using hard drive or the real system on host computer.]]  THS 22, 23  [see UNIX-like directory pathnames: THS 25]

0054q]
  One component  [[of SGML]]  that is useful, however, is the SGML definition of the HTML syntax, which is contained in a special SGML document called a Document Type Definition, or DTD.  THS 72

0055q]
  The base URL indicates where a document was originally located. This is useful if a document is moved away from its original URL and related documents, in which case, relative URLs used to reference these neighboring documents are no longer valid. However, if the original URL address is specified in the BASE element, then relative URLs from this document are evaluated relative to the base URL and will be correctly found.  THS 87

0056q]
  The TITLE should indicate the document content in a concise ad general way. It serves several purposes:
                To label the display window or text screen
                To serve as a record in a history list marking documents you have viewed
                To allow quick indexing of a document, in place of indexing the entire text  THS 93

0057q]
  As a general rule, hypertext documents should be broken up so that each page does not occupy more than one or two browser screen areas. You can then use the H1 heading to mark the main heading for the collection of documents, and the others to mark subheadings.  THS 112

Chapter Three: Uniform Resource Locators (URLS) THS (161 - 179)


0058q]
  URL: In a URL, any ISO Latin-1 character can be represented using a character encoding scheme. This is analogous to the character entities used with HTML. However, the schemes are distinctly different: You must never use HTML characters or entity references in a URL.

The mechanism is simple: Any ISO Latin-1 character can be represented by the encoding: %xx
  [[/]]  where the percent sign is a special character indicating the start of the encoding and where xx is the hexadecimal code for the desired ISO Latin-1 character (the x represents a hexadecimal digit in the range [0-9, A-F]). .... the encoding for the character é (the letter e with an acute accent) is %E9.  THS 162, 163  [see THS 73]

0059q
14 Disallowed ASCII Characters in URLs

14 Disallowed ASCII Characters in URLs, MUST Use the Hex Code Instead

Character Hex Code   Character Hex Code   Character Hex Code   Character Hex Code
TAB %09   [SPACE] %20   " %22   < %3C
> %3E   [ %5B   ] %5D   \ %5C
^ %5E   ` %60   { %7B   } %7D
| %7C   ~ %7E    
tab = variable number of spaces, depending on program setup, & style-sheet data, etc...

"Bernard Wotton.html" = "Bernard%20Wotton.html"  in a URL.   [from THS 163]

[I've seen may files downloaded from e-mail, etc. that uses the %20 for a space character in file names.]

0060q
Special Characters in URLs

Special Characters in URLs

percent sign  (%) forward slash (/) hash, number sign (#)
(pound sign)
Question mark (?)
character encodings
%25 %2F %23 %3F
(to use above characters in a URL, musts use the character encodings in their place)
%
= escape character for character encodings for URLs
/ = denotes a change in hierarchy; hierarchical structures such as folders & files
# = used to separate the URL of a resource from the fragment identifier (bookmark) for that resource [http: only]
? = indicates query string; everything after ? is query information to be passed to server [http:, wais: gopher: only]
       
       

[from THS 164, 165, 385]

0061q
Example of a Uniform Resource Locator (URL)

Example of a Uniform Resource Locator (URL)

 

Internet Protocol

Domain Name & Port #

Directory & Resource Details

http:

//www.address.edu:8080 /path/subdir/file.ext
 
URL scheme domain name or numeric IP address =
Internet address of the host server
(
Default Port for scheme never given)
[//username:password@www.address.edu]
full file folder path ('/' is used in place of all system-dependent symbols) [UNIX-like paths names]
 
 
Passing search query strings: http://www.somewhere.edu/cgi-bin/srch-data?archie+database
E-mail & newsgroup articles do not have domain name part.
       

http://www.address.edu:8080/path/subdir/file.ext   [from THS 165, 166]

0062q]  [[Partial URLs addresses used in links]]  Within a given HTML document, you do not need to specify the entire URL to locate a second, neighboring document. This is because being in the document already implies information about the current URL, so that you can reference neighboring documents or resources using a partial URL that gives the location relative to the current document. ... From inside ...  [[the current document,]]  any information not present in a URL reference is considered the same as that used to access the current document.  THS 167

0063qPartial URLs are very useful when construction large collections of documents that will be kept together
[[Also applies to web sites, when making a web site, keep all files in one main folder with needed subfolders; that way, you can copy, upload that entire folder to a web host server & NOT have to change any of the links in the process.]]  Of course relative URLs become invalid if a document is moved to a new directory or a new Internet site. This problem can be mitigated using the BASE element of the HTML, which is used to record the correct BASE URL of a document. If the document is moved, all relative URLs are determined relative to the URL recorded by the BASE element.  THS 168

0064q]  URL Specifications ...  [[8]]  different URL forms. The protocols most commonly referenced by URLs are:

http: = HTTP = HyperText Transfer Protocol
ftp: = FTP = File Transfer Protocol
mailto: = email address  [mailto:name@host]  name = screenname, host = AOL  [BernardW69@aol.com]
file: = local file access,  [[your local computer file system access on your hard drive]]

telnet:/rlogin:/tn3270:
gopher: = Gopher
wais: = WAIS = Wide Area Information Servers
news: = NNTP  [from THS 168, 169


0065q
FTP URLS ... [[file/folder path name same as for http]]  Directory paths in FTP accesses are defined relative to a home directory. ... anonymous FTP home directory ... [[or]]  user  [[FTP home directory]] ... several modes for transferring files. The most important is image or binary mode, which makes a byte-by-byte copy of the file. This is the mode to use when transferring programs, compressed data, or image files. Also common is ASCII mode, which should be used to transfer plain, printable text files.  THS 170

[[This is start of my stuff: this part is my own information, NOT from above book.

Remote Web server type: FTP, the Remote Web server supports File Transfer Protocol (FTP).

My local file: local file computer system is:
file:///D:/!_FTP_Home_TheRockMCC.org/index.html
I have free access to my computer stuff...

My remote web server is at:
ftp://TheRockMCC.org/public_html

Remote Web site location is:
ftp://TheRockMCC.org

Its FTP directory is:
public_html
I have username/password access to this church web site when uploading updated or new file pages or other files. Access is gained through my main uploading program, Expression Web2. Files are uploaded into my user account file named above. Is this correct?

This church website is hosted on a web server at: 101SiteHosting.com.
http://billing.101sitehosting.com/whmcs/tutorials.php
DirectAdmin program of statistics is at:
http://www.therockmcc.org:2222
(same access as church website)  [the 2222 I guess is a port number at the host site...]
https://billing.101sitehosting.com/modernbill/
(different password & username used here)
/home/bernieLove/domains/therockmcc.org/public_html/index.htm.
IP Address of church web site is: (69.10.146.178) ?? .  [or, is that my laptop IP address ??]

My local file access is at:
URL =

file:///D:/!_FTP_Home_TheRockMCC.org/index.html

This = the BASE specs, main home page, all partial URL relative to this...
ReDo above web site to reflect this, instead of using full URL or the host full URL, as I've done in places, in which case I can NOT access that particular page because I'm not online, but accessing the site from home hard drive.

Delete the "hard-wired coded" URLs, the full URLs, & replace with partial URLs at home & on remote sites. Especially on home-based sites, so when copy full folder to host site, everything will work correctly, at home & on Internet website. Right now, all is OK at website, but home one is NOT correct at all places...

Laptop hard drive folder =
D:\!_FTP_Home_TheRockMCC.org
Main hard drive folder = !_FTP_Home_TheRockMCC.org

End of my stuff.]]

0066q
HTTP URLS ... An http URL must always point to a file (text or program) or a directory.  [[always point to a file or folder ]]  A directory is indicated by terminating the directory name with a forward slash  [[/]] ...  [[if no slash, then name is a file name, but if it is folder, must have slash following folder name...]]  THS 174

0067q]  Passing Parameters to the server in a URL ... http URLs can pass strings to be passed to the server. These strings are appended to the URL separated by a question mark, ...  [[see above at table]]  [[queries uses a plus (+) sign to separate different search strings. ... These are generally entered in a text box, using space characters or tabs to separate the different strings ...  THS 173
]]  [[such as when you search for things in a browser, notice how the address bar fills up with what you want...]] ...  ISMAP ...  [[sends]]  the coordinates of the mouse pointer ... (ix and iy) ...  THS 174 - 175

0068qFragment Identifiers ... A single HTML document can use the NAME attribute of the anchor element to specify distinct targets of hypertext references. For example: <a name="raw">hypertext link target</a> marks the string as a possible target of a hypertext link. In URLs, these named locations are called fragments and can be referenced in a URL by appending the fragment identifier to the document URL, separated from it by the hash (#) sign. For example, suppose the preceding anchor is found in the document: http://site.world.edu/dir/data.html The string "hypertext link target" is then explicitly referenced by the URL: http://site.world.edu/data.html#raw

You can also use fragment identifiers from within a single document by using a partial URL that references only the fragment identifier, prepended by the hash sign. Thus within the document data.html, the string "hypertext link target" is referenced with the URL #raw. For example: <a href="raw">raw data</a>  THS 175 - 176

0069qFILE URLS ... File URLs are specific to a local system and should not be used in documents to be accessed over the Internet. ... file://hostname/path/file ... hostname is the domain name for the system ... The domain name for local file access an be either the special string localhost or an empty field. file://localhost/big/web/docs.html
THS 179


0070qIcon Archive Sites

http://www-ns.rutgers.edu/doc-images/
http://www.dsv.su.se/~matti-hu/archive.html
http://www.di.unipi.it/iconbrowser/icons,html
http://alice.cli.di.unipi.it/iconbrowser/icons.html
http://www.cit.gu.edu.au/~anthony/icons/index.html
http://white.nosc.mil/images.html
http://akebono.stanford.edu/yahoo/Computers/World_Wide_Web/Programming/Icons/
http://oneworld.wa.com/htmldev/devpage/dev-page3.html#doc-1
http://www.cs.yale.edu/HTML/YALE/CS/HyPlans/loosemore-sandra/clipart.html   THS 247

0071qHTML Utility Programs

dtd2html by Earl Hood  http://www.oac.uci.edu/indiv/ehood/dtd2html.doc.html
hypermail by Kevin Hughes  http://www/eit.com/software/hypermail/hypermail.html
                                           ftp://ftp.eit.com/pub/web.software/hypermail
MHonArc by Earl Hood  http://www.oac.uci.edu/indiv/ehood/mhonarc.doc.html
htmltoc by Earl Hood  http://www.oac.uci.edu/indiv/ehood/htmltoc.doc.html
Treelink by Karsten Gaier  http://aorta.tat.physik.uni-tuebingen.de/~gaier/treelink/   THS 261 - 265

0072qHTML Editors

USENET newsgroups:
comp.infosystems.www.users
comp.infosystem.www.misc
http://sunsite.unc.edu/boutell/faq/www_faq.html
Alpha (Mac) ftp://cs.rice.edu/public/Alpha
BBEdit (Mac)
emacs (PC)
HoTMetaL (PC)  ftp://gatekeeper.dec.com//pub/net/infosyus/Mosaic/contrib/SoftQuad/hotmetal
HTML Assistant (PC) by Howard Harawitz  ftp://ftp.cs.dal.ca/htmlasst/htmlafaq.txt
                                                                   ftp://ftp.cs.dal.ca/htmlasst/
HTMLed (PC) by Peter Crawshaw  http://info.cern.ch/hypertext/WWW/Tools/HTMLed.html
                                                     ftp://pringle.mta.ca/pub/HTMLed/
HTML.edit (Mac)  http://nctn.oact.hq.nasa.gov/tools/HTMLedit/HTMLedit.html
                             ftp://ftp.oact.hq.nasa.gov/tools/HTMLedit/
HTML Editor (Mac) by Rick Giles  http://dragon.acadiau.ca:1667/~giles/HTML_Editor/Documentation.html
Htmltext (UNIX)  http://web.cs.city.ac.uk/homes/njw/htmltext/htmltext.html
NextStep HTML-Editor (NEXT) by James Powell  http://scholar.lib.vt.edu/jpowell.html
S.H.E. (Simple HTML Editor) (Mac) by Eric Lease Morgan  http://dewey.lib.ncsu.edu/staff/morgan/simple.html
tkHTML (UNIX) by Liem Bahneman  http://alfred1.u.washington.edu:8080/~roland/tkHTML/tkHTML.html
tkWWW (UNIX) (browser)  THS 280 - 291

0073qDocument Translators and Converters  THS 291 - 303

0074qHTML Verifiers & Link Verifiers

sgmls
HTML Validation Site  http://www.hal.com/%7Econnolly/html-test/service/validation-form.html
Linkcheck & Verify_Links  THS 303 - 308
  [Start at page 312 + when re-Checking out the book... Now using Expression Web 4]

0075qReal-World Examples  THS 349 - 382

Electronic E-Print Servers http://xxx.lanl.gov/

In many fields of physics, e-print servers have become the primary means of communicating ongoing research work, since they are inexpensive, democratic (anyone with Internet access can access the work), and fast.  THS 350

The home page is one of the few static HTML documents in the entire interface --the rest of the pages are generated by CGI scripts, and all the HTML is added dynamically at request time to the preexisting plain text files used by the e-mail interface.  THS 351

... keep the URL names as simple and logical a possible ...  THS 353


0076q
http://cancer.med.upenn.edu:/

The material on OncoLink must be traversed with ease, regardless of topic or educational background of the user. OncoLink users range from those with no prior knowledge of biology to practicing clinical oncologists. The material on OncoLink must be both comprehensive and easy to navigate. Thus, many of the documents have
extensive hypertext links to allow inexperienced users to learn as they go, while not encumbering the more experienced users.  THS 355


A critical element to disseminating information on the Internet is to listen to the user and generate a flexible and intuitive interface that accommodates the user's needs. ... World Wide Web documents that used
icons of images for hypertext keys were more apt to be selected then merely hypertext documents. ... OncoLink must also allow inexperienced users, who are not exactly sure what their questions are, to make use of the many navigational aids to find what they are looking for in the OncoLink resources. One of the design criteria behind OncoLink is to allow users to find something relevant to their queries within five minutes of their first interaction with OncoLink. ... The ability to use search tools was codified into previously static links to provide dynamic links. ... OncoLink strives to present one-stop shopping for people involved with cancer. ... OncoLink is developing interactive sessions much like the multithreaded bulletin board services found on CompuServe. The developers see their goal as an interactive television service THS  from 359 - 363

OncoLink
LGBT Resources at OncoLinks

OncoLink

0077qViews of the Solar System
http://www.c3.lanl.gov/~cjhamil/SolarSystem/homepage.html  [no work asis] [Calvin J. Hamilton]
http://www.solarviews.com/eng/index.htm
http://www.iki.rssi.ru/solar/eng/homepage.htm
http://www.damianpeach.com/index.htm  [Not by Hamilton]
http://www.glassescrafter.com/information/views-of-our-solar-system.html


When I started writing HTML pages, my biggest obstacle was finding proper documentation. I eventually found that the best way to learn the HTML syntax was to
look at examples on the Internet. ... I organized Views of the Solar System somewhat like a book. The home page is like an introduction, with links to the major portions of the tour. The home page also contains links to educational and other space-related resources. Organizationally, the home page links to a cover page; a Table of Contents; a solar system introduction; each planet in our solar system; asteroids; comets; meteoroids; and the history of space exploration. The planet pages have further links to each of their satellites and to other related resources. Many of the terms used in Views of the Solar System are linked to an extensive glossary page. There is also a section on people who have made a contribution to the understanding of the world and universe we live in.  THS  from 367 - 369

0078qNetBoy Comics  -first Internet-topical comic

http://www.interaccess.com/netboy.html  [no work asis] [Stafford Huyler]
http://netboy.com/

My advice to anyone else starting out would be to learn good HTML and provide a solid service. If you do a weekly or daily, keep it up religiously. ... Another pointer is that you should give your feature a consistent name each day it is released. For example, I call each new comic "today-netboy.gif." This way, readers can link the GIF image into their home page. People want their reading delivered with a minimum of fuss.  THS  from 371, 372


0079qSan Francisco Reservations  (SFR)
http://www.hotelres.com/

... home page ... "What do users know when they get here?" and "What do they want to find out now that they are here?" This helped shape the notion of having several search paths for finding hotels ... To maintain conciseness, depth was always chosen before breadth whenever possible. By this, I man it is better to have a single ink to a page listing other WWW pages then to list all the pages on the front page ... Also, we included a Help button in as many places as possible, allowing us to keep many details off of the main pages ... to have a flashy WWW server, it was realized early on that there is a beauty versus usability trade-off, and that usability is far more important. ... By allowing users to send us feedback, we have received several suggestions that have shaped the way the pages look. The helpful and supportive atmosphere on the Internet is a vital resource that is invaluable.  THS  from 375 - 381


  Glossary  THS 403 +

 
0080q]

0081q

0082q

0083q

0084q

0085q

0086q

0087q

0088q

0089q

0090q]

0091q

0092q

0093q

0094q

0095q

0096q

0097q

0098q

0099q




0100q] 

 
CSS_Book___Core_CSS


Core CSS      Element-Tags-List_Table      Core CSS Book

CSS = Cascading Style Sheets

CSS works by adding CSS properties to a specific HTML tag, which tells the browser how the tag should be modified in its display. A typical CSS statement (or "rule") consists of two parts:
    (1)  the element to be changed, known as the "
selector"
    (2)  a statement that describes how the "selector" should be displayed, known as the "
declaration CCSS 11

The different ways in which CSS information can be added to a Web page are as follows:
    (1)  It can be embedded within the header of a Web Page
    (2)  It can be embedded with the body of a Web page (usually in certain sections or individual tags)
    (3)  It can be specified within a separate Web page  [[ linked to a separate "filename.css" file]]  CCSS
13

New HTML tags specific to CSS:  <style> ... </style>;  <span> ... </span>;  <div> ... </div>;  <link />;  <class> ... </class>;  <id> ... </id>.

"Grouping" is designed to shorten the overall length of  style sheet code  by allowing the Web author to add several formatting properties together in a  single, compact statement.  CCSS 44

"Inheritance": a browser should allow "child" elements to take on the properties of a "parent" element.  CCSS 46    [What was,  now is.]

The idea behind 'class'  and  'id' is that they identify the HTML tags with which they are associated as "targets" for CSS declarations that have previously been defined within the header of a Web page.  CCSS 48


Individual selectors are given "names" that are later called upon by a 'class' attribute associated with that tag, separated by a  period  in the header of the Web page.  [h1.red {color: red;}]  CCSS 50

When using  'id', a CSS rule is preceded by a  hash  symbol ("#") and then the  "name"...  [#green {color: #33FF33; font-weight: bold;}]  CCSS 51

"Cascading Order,  based on the situation in which it appears.":  the meaning behind the "Cascading" part of the term "Cascading Style-Sheets" (CSS):  more specific CSS rules  tend to override global ones;  the browser generally "cascades" from the more general  to the more specific rule.  [page 21-22,  61-62.]

    (1)  If a statement is applied to a "parent" HTML tag  (such as <body>),  and tags that are its "children" have explicit CSS statements of their own,  the CSS statement that applies to the parent rules.  {??}

    (2)  The CSS statement are then sorted by explicit weight,  and any marked  !IMPORTANT  take precedence over the others.

    (3)  Any style sheet information that may be imported through the <link> tag,  will be overruled    [by]   any CSS statements contained within the Web page.

    (4)  More specific CSS statements overrule  more general ones.

    (5)  If two or more CSS statements appear that have the same weight,  the one specified last wins.  CCSS [from  21-22,  61-62]

8  Units of Measure
    (1)  inch  - in
    (2)  millimeter  - mm
    (3)  centimeter  - cm
    (4)  pica  - pc
    (5)  point  - pt
    (6)  pixel  - px
    (7)  m-length  - em
    (8)  x-height  - ex  CCSS 72

Color Formats
    (1)  pre-defined color name:  blue
    (2)  full hexadecimal color value:  #00ff00
    (3)  above compressed:  #0f0
    (4)  three-digit RGB color value:  RGB(0,255,0)
    (5)  above in percentages:  RGB(0%,100%,0%)  CCSS 78












Making Family Websites book


Making Family Websites

Unless you keep your website pages short (in terms of top to bottom), your viewers may be forced to scroll.

There is an old newspaper term called "above the fold". The idea behind it was that all the important information (the hot stuff that would sell the paper) needed to be above the fold in the center, so that the potential buyers could see it in a glance without picking it up and opening it. That means the important parts of your site need to be located within the first 300 pixels of the site to be viewed on a small monitor.  MFW 16, 17

"web-friendly" photo size:

Popular online photofinishing companies include www.ofoto.com  and www.shutterfly.com MFW 29

Picture-Taking Tips: Learn how to take better pictures
 
Determine your subject's eye level and raise or lower yourself to get on the same level. MFW 34

Use candid techniques to catch natural expressions ... MFW 35 Groups: The easiest posing tip is to try and put the heads at different heights. This makes the composition more dynamic. It also has the added bonus of tightening the group so you can move or zoom in closer to make the faces larger. MFW 35


Step back & zoom in. ... If you're shooting with a digital camera, turn off the digital zoom function. Instead, use the camera's optical zoom if it has one.  MFW 39

Place the Subject Off Center: A handy guideline called the Rule of Thirds can help you improve your pictures.

The idea behind the Rule of Thirds is to divide your picture into three equal sections both vertically and horizontally  [[9 sections total]]  ... The intersection points of these lines (as well as the lines themselves) become the "hot spots" where you want to place important picture elements.  MFW 40

... pictures could be improved by changing that shooting angle ... MFW 42

Safe font: for PC: Arial Helvetica Times New Roman Veranda Courier News for Mac" Geneva Times Helvetica Monaco MFW 66

Reverse chronology: do so for the e-newsletters on website, adding new stuff at the top of some list, pictures, etc.

Optimizing pictures for website: photo-copy MFW p28; study the "preview" stuff, see if applies to programs also... also copy p92 about the compression option under JPEG...

Camera makes high resolution; want low resolution for web use. Must resize photos to a smaller size.

Naming & Sizing Pictures:
(1) Pick a good informational name for Original picture file and add an "-OR" to the file name ending, --"Church front door-002-OR.jpg"-- meaning original picture, that you want to save, with all its detail intact for future use.

(2) Resized large one to a smaller picture for Web use: Use above name, only change the OR to "-W" --"Church front door-02-W.jpg"-- meaning a photo for web use, for posting on website. Use a picture program to make the image 75 ppi or 100 ppi or dpi. Large = 4x6 in or 10.2x15.2 cm) at 100 dpi (400x600 pixels). Midsize = 2x3 in (5x7.6 cm). MFW 91
[[product pictures: 200x200 up to 400x400 pixels; 50kb or smaller is file size]]    [see also: more info here]

(3) Thumbnail picture: very small image of above web picture, which also is a hyperlink to the larger photo. Use above name, only change the W to "-TN" --"Church front door-02-TN.jpg"-- meaning a thumbnail picture of the above web sized picture.

Expression Web 4 automatically makes thumbnails, but learn how to do it in a consistent manner so all thumbnails are same size, and all web pictures are also of the same size; right now the pictures on website are not consistently the same.

Keep track of your photo sizes in notepad to be consistent; use only 2 or 3 different sizes at most. Put all photos working with, OR, W, TN & other versions, in photo folder on website; keep them all together so they are easy to find. Since I have plenty of room in website storage, that is what I will do from now on.

Create Your Own Website, Fourth Edition, BOOK

Create Your Own Website, Fourth Edition    CYOW

General Info as found on pages so far...

http://en.wikipedia.org/wiki/Comparison_of_Web_browsers
http://www.thecounter.com/stats/
www.adobe.com/products/dreamweaver
www.microsoft.com/expression/
www.seamonkeyproject.org/
www.seamonkey-project.org/doc/features
http://adampolselli.com/2001/11/03/get-the-look-vintage/
www.boxedart.com
www.designload.net
http://www.useit.com/papers/webwriting/
http://www.veer.com/
http://www.corel.com/
http://html-color-codes.com/
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
http://www.internic.net/whois.html
http://searchenginewatch.com/show
http://www.htmlgoodies.com
http://adampolselli.com/tags/color/
http://www.freegraphics.com
www.AmboGraphics.com
www.MikeBonnell.com
www.freeFoto.com
http://eddiebauer.com
http://ww.Westelm.com
http://www.knittinghelp.com
http://www.barewalls.com
http://www.diamonds.com
http://www.w3schools.com/html/
http://www.constantcontact.com
http://adactio.com/articles/1109/
www.mezzoblue.com/css/cribsheet
http://www.animationfactory.com
www.kelloggs.com
www.ucsd.edu  = IP address = 132.239.180.101





Finding a Web Host Provider
www.tophosts.com
www.hostindex.com
www.hostsearch.com
http://www.alentus.com/hosting/



Domain Name
"A domain name registrar is a company that is sanctioned by the Internet Corporation for Assigned Names and Numbers (ICANN) to allow registration of domain names."  CYOW 34
www.godaddy.com

DNS = Domain Name System, a telephone book-like listing of all registered domain names & their IP address of the website's web server; DNS servers maps a domain name with its correct IP address.

The Internet as a Virtual Postal Service. The Internet is similar to a USA Post Office: in each system there must be a unique address to get things done. from: CYOW 212-217

eCommerce Business Website  (Chapter 4 of book)
www.paypal.com create Premier Account to accept Credit Card information to buy or sell stuff, to accept payment from customers.
http://pages.ebay.com/university/
http://stores.eBay.com  (eBay Store to sell stuff)  (Chapter 5 of book)
http://www.marketingfind.com/

Blogs  (Chapter 6 of book)
www.blogsouthwest.com
http://googleblog.blogspot.com/
www.Blogger.com
www.LiveJournal.com
www.SquareSpace.com
www.MyBlogSite.com
www.TypePad.com
www.WordPress.com
www.MovableType.com
www.Tripod.com
www.BlogStudio.com

http://SanDiegoEventsByScott.blogspot.com
http://www.andybudd.com

Online Image Sharing Service  (Chapter 7 of book)
www.myphotoalbum.com
www.shutterfly.com
www.webshots.com
www.flickr.com
www.snapfish.com

Optimizing digital pictures
Image file size, & its width & height in pixels. There is no direct translation from pixels to inches. Depends on monitor physical size & its resolution. from: CYOW 218-221

My 24-inch [diagonal] flat-screen wide-screen monitor is about 20.5 in. wide & 12.75 in. high, & displays at 1920x1200 pixels, the highest there is so far, when by itself.
My 15.4-inch ?? [diagonal] wide-screen laptop, is about 13 in. wide & 8.24 in. high,& displays at 800x600 when both are on.
My laptop by itself displays at 1280x800.

Decide whether to take portraits of single people vertically or horizontally; groups, buildings, probably horizontally. Find out what size photo looks best on church website, & use that as a template for most all pictures. And set the thumbnail stuff to be all the same everywhere. Right now its haphazard. Is length or width (height) dimension given first, such as in: 4x6 inch photo? 5x7, 8x10...  In the File menu, Preview in Browser [list], it gives 800 x 600, 1024 x 768, which would be Length x Height. So I guess that is how the picture would be also. [see also: more info here]

www.shrinkpictures.com
 

MySpace   (Chapter 8 of book)
www.MySpace.com

YouTube   (Chapter 9 of book)
www.youtube.com
www.youtube.com/t/howto_copyright
http://computershopper.com/howto/

Facebook    (Chapter 10 of book)
www.facebook.com

Creative HTML Design book

Creative HTML Design  CHD  http://www.htmlbook.com   http://www.lynda.com  http://bw.org
http://ducks.htmlbook.com    [no work]   lynda@lynda.com   or lyndachd@lynda &  Bill = wew@bearnet.com  or  chd@bw.org
(
Note: page numbers are from 2nd edition of book, unless otherwise noted.)  http://www.htmlbook.com/ducks/index.html  [no work also]



Internet Service Provider (ISP): mine now is EPB Fiber Optics (provided by the Electric Power Board of Chattanooga TN)
Internet Presence Provider (IPP): web hosting company; church website is hosted at www.101SiteHosting.com
http://www.cnet.com/Content/Reviews/Compare/ISP/area.html
http://www.webmonster.net   http://www.gimp.org/

Most browsers allow you to "view the source" of HTML. ... Studying others' pages is a good way to pick up coding techniques.  CHD 9

Open your browser ... Under File, choose Open File [option not on IE 9 beta, must open file in different kind & copy & paste into IE 9, or press function key 12 to open browser, or choose from File...] and locate the index.html document that you just created. This process is called "viewing a file locally", or from your local hard drive ... uploading this file to a web server so it can be "viewed globally" on the World Wide Web.  CHD 16

The tangled web we weave.  [[Looks like, similar to, a combined airline hub worldwide destinations image.]]  CHD 15

Keep your  [[code]]  lines within 80 characters wide because that is the lowest common denominator for text editors and computer screens. This means if someone needs to look at your code, they won't have to scroll sideways, and the text won't wrap. Use a fixed-space font in your editor, so you can easily tell when lines get too long.  CHD 19

[[use NO capital letters in file name: use all lowercase letters. Use a dash or an underscore (underline character) instead of a space in file names. An underscore is hardest to tell if one is used or not in an underlined link, but since NOT u sing spaces, it is automatically assumed to be an underscore character; also using an underscore character between words in a file name makes it easy to just click once on that lone file name to select the whole name instead of just parts of that name.]]  Spaces are never allowed between the initial "<" and the name of the tag.  from CHD 21 +-

Make sure you replicate your ducks folder exactly onto your web server. If you have your files inside a directory called ducks, for example, make sure you create a directory on the web server called ducks too. This enables all your HTML links, images, and media to perform as they did on your hard drive.  CHD 25

https://www.buydomains.com/EnterContactInfo.do?domain=stampzone.com&x=1296987382927&utm_source=TDFS&utm_medium=click&utm_campaign=TDFS

[[in 2001]]  every kilobyte of data takes about a second to download for the average user.  [[so]]  a 30k file would take approximately a 1/2 minute to download.  ... you might have an internal goal of not exceeding 30k per  [[web]]  page ... Web images are measured by kilobytes.  CHD 33, 34

[[
computer memory unit,  computer file size,  computer image size,  color,  sound
[computer measurement only = binary = 2^power = IEC (International Electrotechnical Commission) binary prefixes = 1999,


not regular measurement
= decimal = 10 ^power = SI (International System of Units) = SI prefixes or metric prefixes  ]

ASCII = 7-bit code = 128 [7-bit] characters [used in Internet until Dec 2007;
Now uses
UTF-8 = 255 characters]

bit
: [b]  A unit of measurement of information (from binary + digit); the amount of information in a system having two equiprobable  [equally probable] states  "there are 8 bits in a byte" = octet;  8b  7b  7-bit  8-bit

byte: [B]  A sequence of 8 bits (enough to represent one character of alphanumeric data) processed as a single unit of information;  8B 16B  32B  64B;  1000 bytes [10^3] = 1 kilobyte = 1024 bytes [2^10 or 210]


kibibyte: [KiB]  A unit of information equal to 1024 bytes  [IEC] {not in common usage, but gaining ground};
a multiple of the unit byte for quantities of digital information [binary prefix kibi = 1024 = 210]

kilobyte: [KB or K]  A unit of information equal to 1,024 bytes;  1000 kilobytes = 1 megabyte


mebibyte: [MiB]  A unit of information equal to 1,048,576 bytes  [IEC]
a multiple of the unit byte for quantities of digital information [binary prefix mebi = 1024 x 1024 = 220]

megabyte: [MB or M]  A unit of information equal to 1024 kibibytes or 2^20 (1,048,576) bytes or 1,024k
[A unit of information equal to 1000 kilobytes or 10^6 (1,000,000) bytes]


gibibyte:  [GiB] A unit of information equal to 1024 x 1024 kibibytes or 2^30 (1,073,741,824) bytes [IEC]
a multiple of the unit byte for quantities of digital information [binary prefix gibi = 1024 x 1024 x 1024 = 230]

gigabyte:  [GB] A unit of information equal to 1000 megabytes or 10^9 (1,000,000,000) bytes; one billion bytes.
A unit of information equal to 1024 mebibytes or 2^30 (1,073,741,824) bytes or 1,024mb


tebibyte: [TiB] The tebibyte is a standards-based binary multiple (prefix tebi, symbol Ti) of the byte, a unit of digital information storage [IEC]
1 tebibyte = 240 bytes = 1,099,511,627,776 bytes = 1024 gibibytes

terabyte: [TB] A unit of computer memory or data storage capacity equal to 1,024 gigabytes (240 bytes).
One trillion bytes; A unit of information equal to 1000 gigabytes or 10^12 (1,000,000,000,000) bytes
Hard drives now come in 2.5TB, etc.,  1,099,511,627,776 bytes or 1,024gb

]]  [[back to the book...]]


[[How many bytes in a file? Different places where you can look, each give a different number of bytes, or kilobytes, or gigabytes, depending on how large a file or graphic file is. Programs that gives a file size may not be the actual file size, but what is used in memory to display it...]]

Your computer rounds up the size of a file to the next largest number depending on how large your hard drive partition is. Have you ever had a file read two different file sizes on a hard drive and a floppy? That's because the computer allocates space in larger chunks on your hard disk. ... When using Windows ... the file size shown in the folder directory is rounded to the nearest kilobyte. Again, this is the space allocated to the file, not the true size of the file!... To get the most accurate reading, click the file name using the right mouse button and select Properties from the popup menu. Here you will find the true byte size.  CHD 34

[[Lets take a doc file & graphic file named: "html_css_info.htm" & "gifcomp1.psd" & "graphmax.jpg", and see what different places say the file size is...  {saving this file at this point, and recording the file size in bytes in Notepad to copy here after getting all the info. At the 'saved time', info is as follows:}

html_css_info.htm:
htm = EW4 = 341 KB; folder = 330 KB; Properties = size: = 329 KB (337,265 bytes)  size on disk: = 332 KB (339,968 bytes)

gifcomp1.psd:
psd = IrFanView = 2.33 MB; folder = 2,382 KB; Properties = size: = 2.32 MB (2,438,709 bytes)  size on disk: = 2.32 MB (2,441,216 bytes)

graphmax.jpg:
jpg = folder = 65 KB; Properties = size: = 64.7 KB (66,312 bytes)  size on disk: = 68.0 KB (69,632 bytes)
]]


[[Working with graphics: gif images: taking an original gif picture & making it smaller in size bytes ... Do the exercises in book, p38+
and compare the resulting results to the following links ...]]
Dithered GIFs.html     Non-Dithered GIFs.html


Making gif images smaller: use less colors, use less or no dithering, use no anti-aliasing if possible, such that the new image is as much as possible like the original.

[[Book talks about Photoshop 6.0 in 2nd edition; I downloaded Adobe Photoshop CS5 (30-day trial), & GIMP; try these programs to do exercises...
Making images ready for Web use, by reducing size by reducing colors, increasing compression, etc.; ]] 
http://burnallgifs.org/

[[GIMP changes the "image01.pct" file to "image01.bmp"... pct extension is NOT listed among supported files. It is a QuickTime file, need quicktime.dll plugin for IrFanView to view it; newest version is OK...]]


Laptops for Dummies

"Laptops for Dummies"  LD  [4th Edition by Dan Gookin]  [c 2010, 342 pages, located at Collegedale public library] [http://www.wambooli.com/]
[http://www.dummies.com/Section/Computers-Software.id-323006.html] [Cheat sheet = http://www.dummies.com/Section/Computers-Software.id-323006.html]
[http://dummies.custhelp.com/app/account/overview] [http://www.wambooli.com/help/laptops/]

fuel-cell-powered laptop
external expansion options
on some laptops, you can swap a drained battery with a fresh one [in real time]
high-end video card, larger display, and lots of [maximum case will hold] memory, maximum amount of hard drive storage -2 of largest ones available [for graphics editing programs, etc.]
fastest processor, GHz, gigahertz, larger is better
solid state drive, SSD, will replace hard drive [BestBuy already has 40 & 80 Gigs drives in store, $99, $199]
e-sata connector for external hard drive  [Serial ATA (SATA or Serial Advanced Technology Attachment)] [sata version 3 = 6 Gbps ]
hdmi connector for video
Recordable optical drive ?? CD or DVD player ??
802.11n wireless or better

AMD stuff
Intel Centrino stuff
on-site support option ??
get long-term warranty, 3 year, NOT a service contract...

power button, not an on-off switch
improper shutdown
user profile
user account - only one, just for me only...
BIOS Setup program - f1 key ??
In above program, can set a security password before Windows starts up...
log in to Windows; user account picture & password [same as log on]
fingerprint reader to log in [biometric]
Lock computer = Win-L
when system locks up, messes up & nothing happens, press & hold the power button until it closes down [bad, but necessary at times]
media card slots: Sony camera uses ??  [p62]
swappable mass storage options: hard drives / optical drive (CD/DVD)
swappable batteries ?? [without shutting down ??] [2 internal batteries ?? 1 for bios, internal clock, & 1 for time to swap a fresh one ??]
PC Card: a depot or slot for 2 PC Cards...
Universal Security Slot, USS, hole in case to put a cable in to secure it to something immovable [Kensington Security Slot, K-Slot]
Webcam camera (built-in or USB)
one laptop at BestBuy had a slot unknown to me or the salesman; he looked it up, but I don't remember what it was called... it was kind of long & very slim

Ports:
Digital Video, or HDMI
IEEE, 1394, FireWire [version 2 = ]
modem/phone
monitor
RJ-45, Ethernet [high speed fiber optics internet]
S-Video Out
USB [version 3]
e-SATA or e-SATAp

on my laptop, the embedded number keypad is accessed by pressing fn-"num lk" key combination; pressing "Num Lock" on USB keyboard does not work on the laptop; light goes on/off but, must do as above /\... first time turns on, second time turns off, etc.

touch pad; I turn mine OFF... I use a "real mouse", which is much faster, more precise, & lot more features, more buttons, wheels
Win-E opens Computer folder window
User Profile folder is my full name, Bernard L Wotton, on Start under my "cat" picture
User Accounts = click on my "cat" picture
my USB wifi stick is where ??
Network 2 is Ethernet fiber optics by EPB
Win-X = Windows Mobility Center [for laptops]

Control Panel > Network and Sharing Center > View status = [Local Area Connection Status] > Details > gives the following information:

Connection-specific DNS Suffix:
Description: NVIDIA nForce 10/100 Mbps Ethernet
Physical Address: 00-1B-24-B9-BC-06  < [laptop MAC address]
DHCP Enabled: Yes
IPv4 IP Address: 173.247.29.73
IPv4 Subnet Mask: 255.255.255.0
Lease Obtained: Wednesday, March 02, 2011 9:10:42 AM
Lease Expires: Friday, March 04, 2011 6:10:47 AM
IPv4 Default Gateway: 173.247.29.1
IPv4 DHCP Server: 66.18.63.164
IPv4 DNS Servers: 66.18.32.2, 66.18.32.3
IPv4 WINS Server:
NetBIOS over Tcpip Enabled: Yes
Link-local IPv6 Address: fe80::5c1:5f4f:3677:fc2c%8
IPv6 Default Gateway:
IPv6 DNS Server:

Phone & Modem options ?? where is icon & program ??  [not listed in Control Panel ??]
I have a phone jack port on left-hand side of case next to the Ethernet port.
The e-mail attachment has supplanted the fax as the standard way documents are sent now; but the legal & medical communities still uses, & sends & receives faxes... Using a fax machine/copy/print can be done without use of a computer.
Faxes are image files, tiff images, not text files...

Windows Journal, Sticky Notes,  ?? where are these 2 ??

* media must be done properly to be removed from your laptop... [external hard drives, USB thumb flash drive sticks, re-writable DVDs, etc., can NOT just unplug, turn off, remove, etc.; damage will could occur to the media]
* press Win-E to open Computer folder window;
** close all open files on that media, & programs using those files...
* select media icon
* right-click & choose Eject [media card or DVD], or Safely Remove [for USB thumb flash drives, & external Hard drives]
* OR, in notification area, click on the small icon called "Safely Remove Hardware" & choose what to remove...
* a window pops us saying it is now safe to remove the hardware; it no longer shows in the Computer folder window...
* now OK to remove, or turn off media...  [once computer is powered OFF, also OK to remove these things...]
* I guess its always OK to plug in a thumb drive or turn on an external hard drive, or plug it into a USB port, at any time...
* BUT doing the opposite, unplugging, turning OFF, is a different matter; must be done properly in correct order...

OK to install new programs at anytime computer is ON; to un-install a program, MUST use the Control Panel > Programs and Features
must NEVER just delete a folder you find program in; bits & pieces of the program are scattered all over the hard drive in many different folders, & in the registry... all that must be gotten rid off only by using the above program... other things get to be reset as it was before that program was installed, etc. This does NOT remove the data files created by that program, such as pictures, etc. Sometimes NOT everything is fully un-installed; that's just life... over time a lot of junk is left behind... that is why sometimes people re-install the Windows system itself, reformat the hard drive, re-install Windows, re-install ALL the other programs you want back, which takes a LONG time...Read screen directions carefully; sometimes a program can be repaired or changed, as well as removed...

when downloading from internet, choose the .EXE file to download, & SAVE it first, then Run to install it...

Lithium-ion battery, rechargeable for laptop, never drop, open, discard, MUST recycle properly when dead, toxic waste...
guard battery terminals; avoid extreme temperatures; store batteries if not using in nonmetallic container, cool, dry, clean place,
if battery in laptop, unplug power cord to let battery cycle a little, discharge some, etc.; batteries drain over time if not using
NiCad or nickel-cadmium battery,
NiMH or nickel-metal-hydride battery, better, but both suffer from the dreaded memory effect... type used in my Sony camera...
search for "exploding laptop" at www.youtube.com

laptop battery: low battery level = 25% = hibernate, turn off; critical battery level = 20% = shut down, turn off...
battery charges even if computer is OFF, if still plugged in...  take charged battery out & put in second one to charge...
external laptop battery charger ?? make sure my laptop support a quick-swapping of batteries -take spent out, put fresh in- ability...
buy manufacturer's spare battery [http://www.1800batteries.com] [http://www.batteries.com] or locally at Batteries Plus
do NOT get generic ones...

things that consume most power & what to do to save power when on battery life-support:

Alt-Esc key cycles through open windows, programs
Alt-Tab key is similar

hard drive  -- power down disk drives if not using much under battery power
Add RAM memory to prevent Virtual Memory Disk Swapping which uses lots of power, & constant hard drive access
optical drive (DVD)  -- disable
audio system (speakers)  -- mute the speakers (headphones still uses power, so a no, no...)
modem
wifi , Bluetooth  -- disable
network interface
display  -- dim some; use a lower resolution or fewer colors, saves power
hibernate if time is short, power is very low
use a solid-color background image saves battery life...
keep RAM empty: run the least amount of programs at a time; close down ones not using at the moment... saves power
use a laptop cooling fans pad under laptop at all times; at home use big fans to blow onto computer to blow away some of the heat...

Ctrl-P = print
* to stop or cancel a print job, press Win key, click on printer icon at top of left list, choose a print job & choose delete...
* to print (save) a page when default printer (HP) is down, offline, not plugged into USB port, press Win key, click on Printers in right-hand list, choose "Microsoft XPS Document Writer": in Notepad Spelling.txt file, choose Ctrl-P to print, double-click on "Microsoft XPS Document Writer", name the doc file, choose Desktop, press save. Done. File saved as "Spelling Text.xps" on Desktop.
  
* to view or open above file to view contents [& later to print on default printer HP], double-click on /\ above file. Right now, Apple Safari attempts to open it, but does NOT succeed, it keeps opening an unending list to choose file from, but never opens the file...
The file extension, .xps, somehow, must be, seems to be, associated with the Safari program. To stop that, do this ?? ?? [have to hunt around some to see how to do it, to see what program or control panel option to use to change the association. I want to use the "Microsoft XPS Viewer" [is it on my system ?? probably, since the 'writer' part is... yes it is.] I've seen places where you can change what opens what, etc. On a document you want to open to read or use, you can right-click mouse button, choose Open With ... & choose from a list of programs to use, or "Choose Default Program...". Does NOT work here in this case; Safari has control, so take control away from Safari & give it back to XPS Viewer... File extension assignment program = ??  Try this: > Control Panel > Default Programs > "Associate a file type or protocol with a program" > then it spends some time loading in all the file extensions & its default program list... Well, .xps default program is the XPSViewer.exe program... That means somehow Safari is set up to read that file type instead... Look into Safari settings & change it... Can't find it, so am downloading the program again and re-installing it, this time make sure XPS is NOT checked for Safari use... Whatever. I un-installed Safari browser. Then double-click "spelling text.xps" & now Internet Explorer browser opens it as a 68-page doc with header of file name centered, & footer of page number centered, on each page. XPS Viewer uses Internet Explorer to open .xps files. Seems like no other browser opens that kind of file, but instead lets Internet Explorer opens the file. Well, kind a wordy stuff... Re-installed Safari & there was no option to choose what opens what. But all seems to be OK now since I first opened that kind of file & Internet Explorer automatically opened it... Oh well, since this was the first time ever using the XPS writer & viewer, it took me quite a long time to figure it all out; to finally have it saved a file in .xps format & then to later view that document.

USB stuff are hot-swappable. USB cables, no longer then 16 feet long.
an option to NOT supply power to USB ports ??  when on battery power ??
USB hub adds more ports; some things, such as high-speed hard drives can NOT be run from hubs but from laptop USB root port, that is, pugged directly into laptop USB port & NOT a USB hub...
USB network adapter such as Wi-Fi, since my wifi card quit working, have a USB wifi card
USB headphones are automatically digital, not analog as the other ordinary plugs are...

PC Card slot port: this older tech stuff, USB newer ?? Is there still an advantage to have such option on laptop ??
PC Card Type I, II & III. Type III are thickest. Before eject & remove card, must do as for other external media, properly disable or unmount card's hardware; Safely Remove Hardware icon...
Be careful of anything sticking out of any port on laptop that it does NOT get damaged... by bending, hitting, knocking, etc. breaking...

Wired Networking: home office with 2 or more computers...

Win-Break = System
"Libraries" "HomeGroup" = Window 7 things...

Laptop MAC address: a MAC address is a unique number assigned to every networking adapter on earth (see above)

Any time you use a network in public -- ... -- always choose the Public option. By designating a network as public, you're ensuring that Windows kicks in a few extra protections for your laptop.

Action Center in Windows 7 = Windows Security Center in Windows Vista = 4-color shield icon in notification area
computer virus, its preferred method of delivery is in an e-mail attachment, or from a shady Web page misleading link...
antivirus  --Kaspersky Internet Security (includes antivirus), malware  --Kaspersky, & Windows Defender, spyware, --firewall, hardware & software-- closes open ports,

social networking threat at Facebook, MySpace, Twitter, etc. in us "add-on" or misleading links "too-good-to-be-good" types, etc.
Send a "heads-up" message e-mail before sending an e-mail attachment, to let other person know that the next e-mail from you is good...
a plain-text e-mail message cannot contain a virus, but an e-mail signature or attachment, or bad link can, such as a link ending is a "program type extension such as exe, com, html, htm, vbs, pif, bat, scr, etc.
viruses cannot be hidden inside pictures or images attached to e-mail messages. ??
InPrivate Browsing in Internet Explorer 9... adds more protections from snooping, etc.
checking a suspect web page... IE > Safety > SmartScreen Filter > Check this website, or, Report unsafe website
in Kaspersky, click the K symbol on IE toolbar that says "URLs check"
Windows Update, & backing up your Data, are part of security also...
backup to an external hard drive

for OFFline reading of web content later when NOT connected to Internet, browse to web page to save, IE > Page > Save as... > Webpage, complete (*htm; *html) > save webpage to Desktop... later now can open in a browser
use Web-based e-mail account when on the road... Gmail: http://gmail.google.com  MyWay Mail: http://mail.myway.com
Windows Live (HotMail): http://mail.live.com  Yahoo! Mail: http://mail.yahoo.com

Forwarding e-mail if an option, & auto-responder if available; stop it when home again

copying data from laptop to desktop computers
use a thumb flash drive
put both on same network & use Ethernet cable
Sync Center; NOT work in Home Premium Windows... synchronized bliss; making sure files on both are alike...
Remote Desktop; same as above...

TRIP to Maine
laptop case, or backpack, a solidly built, good shoulder padding & padding for laptop inside
www.ebags.com
www.eddiebauer.com
http://oakley.com
www.targus.com
www.thenorthface.com
a CIA bag

minivac
USB lamp

take extra spare batteries, charge batteries
sync files
backup data
remove DVD from player, put with other software
save some Web pages for OFFline reading

packing stuff
office supplies, etc.
power cord & "brick", extensions, power strips
extra batteries
cellphone
overseas power adapter
phone cord for dial-up modem
Ethernet cable
headphones
mouse, keyboard, PC card, external storage
screen wipes
camera & all stuff, batteries charger
pc cables for all extra stuff carrying with you...
laptop locks, steel cables, etc.
handyman tool kit, small screw drivers, flat & Phillips head, pair of pliers, small wire cutter, small utility knife
roomy pockets in jacket for stuff need if case must be checked on...
never check laptop at airport, keep with you at all times
avoid bulkhead seats with no underseat storage
get window seat
get extended-legroom class, exit row, united economy plus, if exists
get 3M Laptop Privacy Filter screen
get cigarette lighter adapter power cord for laptop for car or airplane
EmPower adapter (airplane)
www.igo.com
know where power wall sockets & bathrooms are located wherever you go...

Laptop: more secure
mark it: engraving on case, affixing a tamper-resistant asset tag on it; use some indelible marker sharpie, etc.
STOP it; www.stoptheft.com
register laptop & software; laptop serial number & brand & model
be mindful of distractions, commotions around you, etc. hold onto laptop at all times...
alarmed wire cable in USS slot to secure item
setup bios password
write down passwords & user names, Ids, in a secure manner so others will now realize what they are looking at...
tell Windows NOT to memorize Internet passwords, & IE also...
disable the Guest account from laptop
Lock Windows when away for awhile, Win-L
home phone (cellphone) service for laptops; www.absolute.com  www.ztrace.com
fingerprint reader

music
using Windows Media Player to rip a music CD (copy) for storage on Hard Drive to listen to later...

videos, Webcam
DVD movies (can not copy them; must insert DVD into CD player to watch...
www.youtube.com     www.hulu.com

using laptop as a phone; video chat; picture phone
VoIP program (Voice over Internet Protocol) telephony
www.skype.com   www.google.com/talk

e-book readers programs for laptop
e-books; electronic books
http://books.google.com     www.gutenberg.org   click link to display entire book in the Web page window, then save the Web page to laptop hard drive...

presentation information; PowerPoint, slide shows,
PowerPoint Viewer
hard paper copies of slide shows, six slides per page, etc. to give out to fans
1st slide of show lets you focus screen & test sound for proper setup at place of meeting...
make backup copy of presentation on DVD & media card (USB flash drive)
laptop, & projector & screen, & software, hopefully all works perfectly together...

People Near Me
Windows Meeting Space (Windows Vista Ultimate)
www.gotomypc.com

troubleshooting problems
Change; changing or modifying programs, or parts of Windows is what can lead to trouble
ReStart Windows is most often quick-fix
Re-Installing Windows is only last resort if all else fails, messed up big time
Windows 7 Troubleshooter (Find & Fix Problems)  Vista = ??
System Restore to an earlier point in time when things worked OK
Safe Mode when starting up laptop; F8 key
http://suport.microsoft.com

keyboard; Num Lock key, or Caps Lock key is on or off...
touch pad; adjusted in Mouse properties box, or turn off & use Mouse
mouse pointer; use supersize mouse pointers, Pointer Trails, press Ctrl-key to find pointer

Upgrade
bigger hard drives; more memory   www.crucial.com
always use Windows Update program all the time...
Upgrade Windows to higher version ??, only when buy a new laptop with newest version preinstalled... next time get Ultimate Best version... not home version...
I always upgrade software programs on laptop;

Disk tune-up programs;  Accessories > System Tools > Disk Cleanup  (used to clear out a big space on drive C: lot more room now)
Defragmentation program; Accessories > System Tools > Disk Defragmenter (says it is OK)
Accessories > System Tools > System Restore

using PowerSuite 2011 to boost registry, system settings for faster PC running, hopefully...

clean laptop case, vacuum keyboard out, LCD screen wipes, soft, lint-free cloths,   www.klearscreen.com

END  OF  BOOK !!
Absolute Beginner's Guide to Creating Web Pages

Absolute Beginner's Guide to Creating Web Pages ABGCWP

HTTP 1.1

code-level approach

ARPANet, late 1960s
TCP/IP, early 1980s
Tim Berners-Lee, 1991, WWW, W3C http://www.w3.org; HTML 4.01, 1999; HTML 5.0, 2010 ??
Mosaic, 1993
Netscape, Marc Andreesen, 1994

say "URL" like the name "Earl"

...to the most recent HTML 4.01 standard (finished in 1999). Since then, HTML development has been focused on making HTML's core elements compatible with XML (eXtensible Markup Language), a newer standard that is designed to be a foundation for many other markup languages. ...one of the W3C's recent goals has been to recast, or rewrite, HTML in XML ... The result of this recasting of HTML is called XHTML.  ABGCWP 16

...creating Web pages is generally referred to as authoring [not programming] ... ABGCWP 17

... Dynamic HTML or DHTML ... XHTML has replaced DHTML ... ABGCWP 21

... consider the function of your Web design before you consider its form ABGCWP 24

Web pages:
Keep it simple...
Create content-driven designs...
Chunk-ify...
Balance page length...  ABGCWP 25

... consider how traditional publications ... organize information.  ABGCWP 26
http://www.nytimes.com   http://www.w3.org/MarkUp/   http://www.news.com/

... chart or graph ... export it as a Web-compatible image.  ABGCWP 27

Planning a Site
Thinking about the audience for your Web site and how that will affect the design
    Organize you site  http://dir.yahoo.com/Arts/Museums__Galleries__and_Centers/ 
    Focus on navigation  http://www.about.com 
[[ Directory > Arts > Crafts > Woodworking at Yahoo! above : show where you are on each page; start with 'Home' >, + regular navigation links ]]
        Design Ease and Consistency
    Stay within technical boundaries
    Remember your target and goals 
Your options for designing and implementing Web sites
The elements and ideas that make a good site  ABGCWP  from 31 - 35

... use the clearest language possible. Stick to the simplest words and grammar, and avoid colloquialisms, metaphors, and clichés.  ABGCWP 37
http://www.google.com/help/faq_translation.html  http://translate.google.com/support/?hl=en
http://babelfish.altavista.com/ 
http://www.freetranslation.com/default.htm?tab=web  http://www.freetranslation.com/translate-version3.asp

Text Editors  [[plain ASCII text files: American Standard Code for Information Interchange: standard method for representing English letters and numbers in computing...]]
Programming  www.textpad.com  www.ultraedit.com  www.editplus.com    www.download.com  www.barebones.com (Mac only)

HTML Editors
source code/WYSIWYG
www.sausagetools.com  ?? (HotDog)  www.silveragesoftware.com   ?? (HandyHTML)   www.coffeecup.com

Graphics Editors
www.jasc.com/   Paint Shop Pro   www.lview.com/  LView Pro  www.gimp.org

Animation Tools
www.ulead.com  Ulead GIF Animator   www.rtlsoft.com/animagic/index.html  Animagic GIF Animator
www.macromedia.com/flash/  www.coffeecup.com/  CoffeeCup Firestarter

Multimedia Tools
www.sonicfoundry.com  Sound Forge XP

Scripting Resources
www.eport.webhoster.co.uk/iCoder/  www.sausagetools.com/  JavaScript Tools  www.liquidsoftware.cjb.net/  JavaScript Developer

Web Server
www.thelist.com    www.yahoo.com/Business_and_Economy/Companies/Internet_Services/Web_Presence_Providers/
www.register.com   www.networksolutions.com/
ABGCWP  from 40 - 55


XHTML 1.1 DTD

This is XHTML, a reformulation of HTML as a modular XML application.

The Extensible HyperText Markup Language (XHTML)
Copyright 1998-2008 World Wide Web Consortium
(Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University).
All Rights Reserved.

Permission to use, copy, modify and distribute the XHTML DTD and its accompanying documentation for any purpose and without fee is hereby
granted in perpetuity, provided that the above copyright notice and this paragraph appear in all copies.  The copyright holders make no
representation about the suitability of the DTD for any purpose.

It is provided "as is" without expressed or implied warranty.

Author: Murray M. Altheim <altheim@eng.sun.com>
Revision: $Id: xhtml11.dtd,v 1.1 2010/11/24 20:56:19 bertails Exp $

<?xml version="1.0"? />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml11.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">











Definition Glossary  [from many sources; most specific here, compared to published glossaries]

Document:  Any individual object (text, image, media) on the web

Element:  An object in a HTML file

Object:  Any distinct component, such as a tag, attribute, image, text file, etc.

Tab:  An HTML directive, enclosed in "<" and ">", for example, <tag>

Attribute:  A modifier to an HTML tab, for example, <tag attribute>

Container:  An element that encloses other objects, for example, <strong> </strong>

gif image

gif: A bitmapped, color graphics file format. GIF is commonly used on the web because it employs an efficient compression method.

gif89a: The most current gif specification. (1998)

interlaced gifs: The gif file format allows for "interlacing", which causes the gif to load quickly at low or chunky resolution and gradually come into full or crisp resolution.

transparent gifs: A subset of the original gif file format that adds header information to the gif file, which signifies that a defined color will be masked out.

Unisys

jpeg image

jpeg: Joint Photographic Experts Group; also the graphic format developed by them. jpeg graphics use a lossy compression technique that can reduce the size of the graphics file by as much as 96 percent.

progressive jpeg: A type of jpeg that produces an interlaced effect as it loads, much like interlaced gifs.

png image

png: Portable Network Graphics. png is a lossless file format that supports interlacing, 8-bit transparency, and gamma information.

gamma: Gamma measures the contrast that affects the midtones of an image. Adjusting the mamma lets you change the brightness values of the middle range of gray tones without dramatically altering the shadows and highlights.

image compression

compression: Reduction of the amount of data required to re-create an original file, graphic, or movie. Compression is used to reduce the transmission time of media and application files across the Internet.

lossless compression: A data compression technique that reduces the size of a file without sacrificing any of the original data. In lossless compression, the expanded or restored file is an exact replica of the original file before it was compressed.

lossy compression: A data compression technique in which some data is deliberately discarded in order to achieve massive reductions in the size of the compressed file.

artifacts: image imperfections, usually caused by compression

graphics, images

inline graphic: A graphic that sits inside an HTML document instead of the alternative, which would require that the image be downloaded and then viewed by using an outside system.

bitmapped graphics: also called raster graphics. Bitmapped graphics are images that have a specific number of pixels. As such, they are fixed into a particular grid of so many vertical and horizontal lines of pixels. This grid is called a "raster", and images that are fixed to such a grid are said to be "rasterized". The GIF and JPEG images that you commonly use on the web are bitmapped. (see vector graphics)

vector graphics: Images that are stored as lines and curves, instead of pixels. Vector graphics can be rendered in various sizes, resolutions, and media, with out losing information.

colors

bit depth: The number of bits used to represent the color of each pixel in a digital image. Specifically: bit depth of 1 = 2 colors (usually black and white); bit depth of 2 = 4 colors; bit depth of 4 = 16 colors; bit depth of 8 = 256 colors; bit depth of 16 = 65,536 colors; bit depth of 24 (true color) = 16,777,216 colors.

hue: Defines a linear spectrum of the color wheel.

mask: The process of blocking out areas in a computer graphic.

saturation: Defines the intensity of color.

value: The range from light to dark in an image.

contrast: The degrees of separation between values.

client side: Client side means that the web element or effect can run locally off a computer and does not require the presence of a server.

client -side imagemap: A client-side imagemap is programmed in HTML and does not require a separate map definition file or a live web server to operate.

imagemap: Portions of an image that are hypertext links. Using a mouse-based web client (web browser), the user clicks on different parts of a mapped image to activate different hypertext links.

color mapping: A color map refers to the color palette of an image. Color mapping means assigning colors to an image.

palette

CLUT: Color LookUp Table. An 8-bit or lower image file uses a CLUT to define its palette.

browser-safe colors: the 216 colors that do not shift between platforms, operating systems, or most web browsers

web color

dithering: The positioning of different-colored pixels within an image to approximate colors that are not in the available palette. A dithered image often looks noisy, or composed of scattered pixels. (see adaptive dithering)

dither

no dither

visual noise

adaptive dithering: a form of dithering in which the program looks to the image to determine the best set of colors when creating an 8-bit or smaller palette.

diffusion dither

pattern dither

noise dither

adaptive palette

perceptual palette

selective palette

lossy compression

alias, aliasing: in bitmapped graphics, the jagged boundary along the edges of different-colored shapes within an image.

anti-alias, anti-aliasing: a technique for reducing the jagged appearance of aliased bitmapped images, usually by interpolating the color and value of pixels at the boundaries of adjacent colors.

crisp anti-alias

strong anti-alias

smooth anti-alias

sharp anti-alias

screen resolution: Screen resolution, measured in dots per inch, (dpi), generally refers to the resolution of common computer monitors. 72 dpi is an agreed upon average, although you will also hear of 96 dpi being the resolution of larger displays. (My 24-inch Acer monitor is what? ??)

sprite: An individual component of an animation, such as a character or graphic that moves independently.

texture map: 2D artwork that is applied to the surface of a 3D shape.





OnLine Learning

http://www.w3schools.com/html/default.asp  website: learning HTML + (notes from)

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.



TheRockMCC.org_Church_Website_Notes


Notes on Reorganizing Church Website

Notes concerning above quotes & how to apply it to our church website. Make more sub-folders & put a 'sub-homepage' & related files in each one.

1) Main Homepage
Sub-divide the page so it is much smaller with related info in separate linked page files.
Webmaster E-mail address linked to separate page.
Separate page for all the 'about us' info scattered throughout the site pages.

2) Church ministries  (Bob Angle mentioned about now only 5 ministries: Worship/Music, Communications, Hospitality/Greeting/Food, Building/Grounds, Reach)

3) Group related pages together: in their own folder with a sub-home-index page linking them.
Groups main links together, lesser links together, etc. Make a "bread-crumb" system for each page as to where one is at at that moment in time ...



CCliff Kincaid: www.aim.org


Computer System Setup at Home

Notes on Reorganizing Home Computer System

Notes on how to set up my laptop computer system for easy take down, unhooking, to put it & all needed parts, into briefcase to take else where, & then to put back, hook up again when at home again. Right now, using 3 main power strips --1 black, 2 white-- to plug everything in; reorganize where plugs are put into to control which parts of the system are on or off at different times. Right now most every thing is plugged into just one main wall socket plug in. Computer stuff generally don't take much power. But keep lights, fans, etc. on separate power strip.

1) External Hard Drives
When not using them, unplug them to save ware & tare on them. Hook them up on a separate power strip so can easily turn them on and off. Saves them getting too hot also if I forget to turn on the fan which blows on them.

2) Charging  up Rechargeable Batteries
Using the battery backup unit to do it right now.