,, Congratulations, you have graduated and have now entered the Construction Zone
To start off with, script programing like PHP or JavaScript has the ability to put its fingers on, so to speak, the HTML and other things by virtue of the Object Model parameters - in the "DOM" & "BOM". While we are at it I might as well toss some more letters at you "API" remember that one, and CGI another. These "Objects" have specified association with sets of "Methods" & "Properties". It is this "Interface" that the allows the scripts, whether they be server-side based or client-side based, to manipulate a web page. Saying this now ahead of time, I think, will help you absorb lessons that come ahead bringing you up to speed on JavaScript or PHP. That said, don't get to far ahead of your self but do look at the conversation on this topic on the
stackoverflow Site
- and know the site will be a good resource for you. I will use this page to introduce small tid-bits of script when I encounter some that are simple or when I come up with tricks that help the lesson plan.
So for the time being see below and let's work with lists. When we move to Lesson 3.1 we will continue to flesh out these topics but lesson will more project based rather than showcase based. Below is an unordered list of the proposed topics from the previous lesson. We could link pages to each item in the list using the anchor tag <a href="http://blahblah/">Hyper-Text</a>, just as the list is now.
Or we could modify it. The above Unordered List <ul id="none" type="square"> is nested in the preceding Paragraph. The style rule applied to it is
ul#one { background: white; margin-left: 15em; margin-right: 15em }
As long as you keep track of parent and child relationships there is no reason you can not mix
'Ordered Lists' and 'Unordered Lists' and even 'Definition Lists' for that matter.
This is a straight forward thing to do with the old-school tag and attribute method.
Examine:
<ol start="6" type="I">
<li>General</li>
<ol start="2" type="A">
<li>Sectional</li>
<ul type="square">
<li>Topical</li>
<ul type="circle">
<li>Specific</li>
<dl>
<dt>TERM</dt>
<dd>definition</dd>
</dl>
</ul>
</ul>
</ol>
</ol>
|
|
|
<ol start="6" type="I">
<li>General
<ol start="2" type="A">
<li>Sectional
<ul type="square">
<li>Topical
<ul type="circle">
<li>Specific
<dl>
<dt>TERM</dt>
<dd>definition</dd>
</dl>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ol>
|
You see I shuffled the list on the center-right. You see the 'list' tag is assigning an attribute named 'type' and a 'value' to it, which could be an upper case I to utilize Roman Numerals, or an A, 1, a, or i for lower case roman. If the list is an ordered list it will default start with "1" unless you specify by assigning an attribute 'start' with a value other than "1". Unordered list will default to the circle 'type' unless otherwise specified and likewise the Ordered List's default will
be at 'type'='1' for a decimal list.
The equivalent style property is "list-style-type:" ,, see below.
ol { list-style-type: decimal } /* 1 2 3 4 5 etc. */
ol { list-style-type: lower-alpha } /* a b c d e etc. */
ol { list-style-type: lower-roman } /* i ii iii iv v etc. */
Observe the far-right table cell; I have remade the code changing the position of the closing 'list item' tag <li> to "Wrap Around" the sub-lists. The code at left will WORK (fine in HTML 3.2),, BUT ,, if you wish your page to validate at the C3 site,(in HTML 4.01) use the code at right.
Moreover if you aim for a page to "validate" in HTML 5, all this control for the list must shift to CSS, that means those atributes in the tags must be removed.
If you would like to try setting the style rules in CSS on your own pages and you have not yet discovered how to do that then you need to shoot an email to me. The next lesson plan/path gives you some options. Would you prefer to concentrate on LISTS, TABLES, or TEXT. Images and media will come later. Right now we have just one more thing to tackle for your complete big picture conception.
The In-Head Style Sheet sits in a hierarchy of authority or precedence,
If the place the StyleSheet rules reside is on the page in the 'HTML Head' and it is wrapped it in the "Style"
tags, <style></style>
then those properties/style rules will have authority to override the defaulted settings of the browser.
if you have the rules sit in a file of it's own in a style folder at the Server and that file gets 'Hauled In' with a 'link' tag then there is no need for the style rules in the head section of the page.
However if a general set of rules in a CSS is used with the 'link' tag any In-Head style may "make it-self the BOSS" just for that page. Likewise In-Line style may do the same as well and be a bigger BOSS. Now the java-script or PHP that is activated by a hot spot click or some other action can direct a change of any of the ELEMENTs of the page by way of it rewriting values stored in the Document Object Model. All the Elements of the page are OBJECTs in the model. Hence the next higher level of this got nicknamed the Browser Object Model because the java-script and PHP can manipulate that as well. Some of these, so called, Browser Objects (not an official term ) are informed by presets from the OS like Windows. Remember the accessibility icon?
Of course there is more to it and I could even talk about CGI (common gateway interface) which would sidetrack you so just put a pin in that for now.
We can get to this later or you can investigate yourself, but I am not prodding you to learn about CGI just yet.
A review of HTML, head section (this page)
<!DOCTYPE html> <html lang="en"> <head> <title>Lesson 3</title> <meta charset="UTF-8"> <meta > <meta > <base href="http://www.w3schools.com/" target="_blank"> <link rel="stylesheet" type="text/css" href="*"> <style type="text/css">CSS</style> <script>JavaScript</script> </head>
A review of style rules (this page)
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: purple;
background-color: #ddddee }
h2, h4 {
color: black;
text-align: center }
h5 {
font-family: Helvetica, Geneva, Arial, sans-serif;
color: #00b899;
margin-left: 5em ;
margin-right: 5em ;
background-color: #ffcc66 }
p.lesson {
font-size: 14pt;
margin-left: 5em ;
margin-right: 5em ;
text-align: left ;
color: #334455 }
p.lid {
font-size: 10pt;
color: #000000;
text-align: left }
p.list {
font-size: 14pt;
color: #cc0033;
margin-left: 6em ;
text-align: left }
p.show { font-weight: bold }
b {
font-size: 10pt;
color: blue }
pre {
margin-left: 12em;
font-family: monospace;
color: brown }
ul#lone {
list-style-type: square;
background: white;
margin-left: 15em;
margin-right: 15em }
ul.sqe {
list-style-type: square;
margin-left: 0.5em; }
ul.cir {
list-style-type: circle;
margin-left: 0.5em }
table.ref {}
table tr td pre {
margin-left: 2em;
margin-right: 2em }
table tr td p.list{
margin-left: 3em;
margin-right: 3em }
table#one {
background: #dddddd;
margin-left: 5em;
margin-right: 5em }
,, Congratulations,
www.w3.org/TR/REC-CSS1
www.w3.org/TR/REC-CSS2
meiert.com/en/indices/css-properties/
www.web.com/DevelopWebsite
www.amadeusconsulting.com/Application
www.mindfiresolutions.com/Website-Dev
What is HTML 5.2 !? ??
If you wish to continue with personal guidance,
------------- choose your Next Lesson - -
Tables - -
Lists - -
Text - -
Copyright © 2014 - Alain Lareau
All Rights Reserved unless with Writen Request.
alainelj@yahoo.com this page H10D
https://metaphorman.tripod.com/000/010.html