The Rock MCC  church home page     HOME --Index to this folder --'test-book'
The Rock MCC  Contents page

home-test-book        (code-tag-samples-1)         code-samples-css-2      favorites -bookmarks

Misc Links (in order found in doc)
 www.htmlhelp.com/reference/charset   =   Character Sets
RGB Color Numbers                            =   RGB Color IDs
Matching Color-Blender                       =   Color Blending
 IE8+ Workaround Tips                         =   Code Work Arounds
www.csszengarden.com                        =   CSS Zen Garden samples

Subject-Topic Index, Table of Contents


Misc Info
Code Tag Samples
Displayed Text in IE8
Nesting tags

Misc Info

All programming code tags in lowercase only, except for Content.

All values of attributes placed within straight quotation marks [double quotes]
<p style="font-family: verdana;">

Nesting tags
All tags in web page must be nested correctly, from top to bottom, from left to right.
<strong>This text is bold and <em>italic</em></strong>
This text is bold and italic

Spacing
NO space between bracket & tag:  <body>
NO space between tag & affected text                                     \/
<a href="http://www.google.com" title="Search Google">Search Google</a>
 1 space between tag & attribute; 1 space between attributes

Character Sets
(Spacing -using space bar- & line breaks -pressing return-enter key- in the programming code itself are OK for readability in the code,
but they don't show up on screen.) Space: 1 space automatically between words; but if you want more then 1 space such as between the next
2 words: space 2 spaces  here, a &nbsp; is inserted into the code, which stands for a 'non-breaking space' character item, entity.
To indent a paragraph or line, or to add extra spaces between words, use a CSS style sheets page, or special character entities are inserted into the code.
Character entities begin with an ampersand (&) and end with a semicolon (;) as in the above example.
All characters have a description, and a numbered entity, and some also have a named entity.
[1]  The character ( )  [2]  (description: no-break space = non-breaking space)  [3]  named entity is &nbsp;  [4]  and its numbered entity is &#160;.
www.htmlhelp.com/reference/charset

Line Breaks (Spacing)
Line Breaks in programming code, such as pressing enter key to make next code line go down to next 1 line down, is only shown in program
or code mode; it has no effect on screen output. Line breaks between the different tags makes it easy to tell the different sections of a page,
to separate the different tags & to show -tell where, what belongs to each tag section, for readability.
Tags nested within other tags are sometimes indented by using the Tab Key, on the code page to see the flow of things better.
Using the Tab key to indent lines of code in code mode also has NO effect on the output to screen.

Line Breaks in Output (Spacing)
Blank line or empty line between lines on screen output. Space between 2 paragraphs is a blank line.
Using the <br> or <br /> tag two times in a row also makes a blank line between two lines.
Editing in the 'design' mode, pressing Shift-Enter Keys makes a <br> tag in the code page.
(Just pressing Enter key makes spaces between lines; it puts a <p> tag in the code.)
But editing in code mode in text editor, pressing Enter key to move down lines has NO effect on output screen;
it may look good in the code mode, but special code tags must be used to format output to screen.

Comments in code
Comments are visible in code mode in the computer program using to write code in, but hidden in output to screen.
<!-- Comments are here -->  next line down is a comment hidden in view mode, as displayed on output screen.

 Top of Page

 HTML  vs  CSS

HTML identify Content, Text,. Photos, etc ONLY.
HTML:  [(Opening) Tag  Attributes  Value]  (Closing) Tag

<tag>Content to be displayed in browser</tag>
 <a href="http://www.google.com" title="Search Google">Search Google</a>
<(Opening)-Tag Attribute="Value" Attribute="Value">Display Text</(Closing)-Tag>

CSS formats, styles, presents  the HTML content.
CSS:  Tag-Selector  (Property + Value) = Declaration
 tag-selector
                    {property: value;
                     property: value;}
h2
        {font-family: verdana;
         font-size: 14pt;
         color: blue;
         font-style: Italic;
        }
 
CSS Property 'Value' Types
Color
Keyword
Length
Percentage
URL

Types of CSS Styles Structure (all are 'style sheets')
Inline -embedded within HTML code on single line in 1 page only & affect only that 1 tag at that particular place in document: example
<h2 style="font-family: verdana; color: #003366;">Content Here!</h2>

Content Here!

Internal -embedded within header info & affects that single whole page only: example
<head>
<title>CSS Example</title>
<style type="text/css">
h2 {font-family: verdana; font-size: 14pt; color: blue;}
h3 {font-family: verdana; font-size: 12pt; color: red;}
</style>
</head>

h3 above can be coded like:  h3 {font: verdana 12pt; color: red;}

External -outside in a separate page & affects all pages that references it, from a whole group of pages & on up to all pages in whole website
All styles in headers collected into one separate page & sort through to keep the good ones to use on web pages.
Above in red not needed in external style sheets, only each tag-selector & its declaration of properties & values.
Then  each web page needs to reference the appropriate style sheet as follows:
<head>
<title>Using an External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
 The green code is placed in header of all web pages that needs that style sheet.

CSS Order Rules
 All 3 types may be in a web page; if so, Inline applies first, then Internal header, then last is External.
CSS styles apply from general to specific; rules of cascading order takes over.

Top of Page

Code Tag Samples
 
emphasize text, italic

<em>Reminder:</em> There will be no band practice today.
<em> is tag to emphasize text and make it italic
<i> </i> does the same thing by pressing the 'I' button

Reminder: There will be no choir practice today.
Reminder: There will be no choir practice today.

paragraph

<p>paragraph</p>       

Start of a paragraph.

<p>Jack and Jill went up a hill</p>
<p>To fetch a pail of water>/p>
<p>Jack fell down and broke his crown</p>
<p>And Jill cam tumbling after</p>

<p>    Jack and Jill went up a hill to fetch a pail of water. Jack fell down and broke his crown and Jill came tumbling after.</p>

<p>    Mary had a little lamb, its fleece was white as snow. Everywhere that Mary went, the lamb was sure to go.</p><p>    Twinkle, twinkle, little star, how I wonder what you are. Up above the world so high, like a diamond in the sky...Twinkle, twinkle little star, how I wonder what your are.</p>

This is the first sentence in my new paragraph...

CSS =   #bodyCopy p {text-indent: 25px;}
 

list item

<li>list item</li>

  • first
  • second
  • third

    • line break

    placed at end of a line of text<br> or <br />
    makes next line displayed down 1 line, on the next line down
    (a heading <h3> or a paragraph <p> automatically skips a line, goes down to 2nd line)

    img  image, picture

    <base-tag     attribute="value" attribute="value"/>
    <img scr="mypicture.jpg" width="100" height="100" alt="A photo of me"/>  A photo of me  http://therockmcc.org/images-pics/Bernard_Wotton pic-01_small.jpg

    Top of Page

    !DOCTYPE

    <!DOCTYPE ...>
    identifier that tells what standards using & where found; at top of web page. common ones below.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     

    html

    <html> </html>  frames entire HTML web page

    head

    <head> </head>  frames the top part, the identification information for the web page; such as a title name, etc.

    title

    <title> </title>  names web page that appears at top of browser
    <title>code-samples-1</title>  (title name of this web page)

    body

    <body> </body>  frames the content part of the web page that is displayed in a browser

    color
    <p style="color: #0000FF;"> The Color BLUE in hex</p>
    <p style="color: #00F;"> The Color BLUE in hex shortcut</p>
    <p style="color: rgb(0,0,255);"> The Color BLUE in rgb values</p>
    <p style="color: rgb(0%,0%,100%);"> The Color BLUE in rgb percentages</p>
    <p style="color: blue;"> The Color BLUE named</p>

    web-safe color = 216 colors

     RGB Color Numbers
     Matching Color-Blender   http://colorblender.com/?preloadblend=460AA0670EED6D4AA1A06DED5E5E5EA1A1A1  purples
     


    Top of Page

    color in CSS
    <head>
    <title>CSS Example</title>
    <style type="text/css">
    body {background-color: white;
            color: gray;}
    a:link {color: blue;}
    a:visited {color: purple;}
    a:active {color: orange;}
    </style>
    </head>

    Code Work Arounds

    RGBA transparency (alpha value) [CSS3]
    h1 {color: rgba(225,68,253,0.5);}

     IE8+ Workaround Tips

    opacity [CSS3]
    div.transparentbox {
        background-color:#036;
        opacity: 0.7;    /* CSS3 standard */
        filter:alpha(opacity=60);     /* IE only */
    }
    DIVisions of web page
    DIV + ID
    Use <div> tag to separate content areas on web page, +     id attribute to name that part.
    Then in CSS use the '# selector' to format HTML content.
    Each     ID used only once on a web page.

    <body>
    <div id="header">
    Header content goes here.
    </div>
    <div id="bodyCopy">
    Body Copy content goes here.
    </div>
    <div id="footer">
    Footer content goes here.
    </div>
    </body>

     #selector = user named style sheet selector, since NOT an HTML tag name.
    #header {border: 1px;}
    #bodyCopy {font-family: Verdana; font-size: 12pt;}
    #footer {font-size: 10pt;}
    Span + Class tag
    Used to style inline bits of content. (just a few words, etc.)
    <span> tag +     class attribute = user  named inline part
    Each     Class can be used many times on a web page.

    <head>
    <style type="text/css">
    #introCopy {background-color: #cccccc;}
    .highlight {background-color: #ffcc66;}
    <!-- '    .value' = class attribute of span tag in CSS -->
    </style>
    </head>
    <body>
    <div id="introCopy">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    </div>
    <p>Paragraph <span class="highlight">3</span></p>
    <p>Paragraph 4</p>
    </body>

     CSS Zen Garden samples
     www.csszengarden.com

    Top of Page

     

    Displayed Text in IE8

    Displayed Text in IE8 Browser

    [A]  In Internet Explorer -IE8, choose Tools > Internet Options > General > Fonts > Webpage font
    Pick a font from the list; Times New Roman is the default, unless I change it.

    [B]  To ignore, override  website programmers colors, fonts, sizes, choose:
    In Internet Explorer -IE8, choose Tools > Internet Options > General >     Accessibility > Select the
     Ignore colors specified on web pages,
    Ignore font styles specified on web pages, and
    Ignore font sizes specified on web pages  check boxes, and then click OK twice.

    Doing B above really messes up web pages, but you can see how it might look otherwise.
    Only do that just to test something out, unless you have a good CSS style sheet to use instead.

    Top of Page