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'
<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> It is a wonderful repository of useful information about the www.</p>
...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 30above 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]
| Character | Character Reference | Entity Reference |
| Left angle bracket (<) | < | < |
| Right angle Bracket (>) | > | > |
| left and right angle brackets (< >) are used to denote the markup tags | ||
| Ampersand sign (&) | & | & |
| 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 (") | " | " |
| double quotation mark (") is used to mark literal strings within the markup tags | ||
"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element
can be at in raw HTML code.
/\
href = "URL"
& / or filename, img (graphic image icon)
[similar to src] nextid:
"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element
can be at in raw HTML code.
"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element
can be at in raw HTML code.
"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element
can be at in raw HTML code.
"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element
can be at in raw HTML code.
"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element
can be at in raw HTML code.
"Can Contain" & "Can Be Inside" tells WHAT it can hold, & WHERE that element
can be at in raw HTML code.
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
tagsNotes
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, metahtml
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
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
CSShead
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
tagsNotes
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
tagsNotes
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
tagsNotes
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
tagsNotes
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
tagsNotes
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
tagsNotes
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
[to previous quote: 0047q]
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
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
0063q]
Partial 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
0068q]
Fragment 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
0069q]
FILE 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
0070q] Icon 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
0071q] HTML 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
0072q] HTML 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
0073q] Document
Translators and Converters
THS 291 -
303
0074q] HTML
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]
0075q]
Real-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
LGBT
Resources at OncoLinks

0077q] Views 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
0078q] NetBoy 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
0079q] San 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.
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
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
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.