Menu example
here are a few tips
absolute or relative style sheets and images
Using Subst L: is a good workaround when webpages use Relative URL's like src=/images and href=/css
You can use a subst L: so / is relative to L:
Set up the subst l: to where you have downloaded the website files. Open l: drive and double click on the .htm files.
subst l: C:\Users\dough\Desktop\MyWebSiteCopy
http://ccgi.dougrice.plus.com/sampler.htm gets style sheets from http://ccgi.dougrice.plus.com
You could also include it twice, knowning one is going to fail.
<head> <link rel="stylesheet" type="text/css" href="patrickpi_styles2.css"> <link rel="stylesheet" type="text/css" href="/patrickpi_styles2.css"> </head> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <!-- Relative URLs:- the Subst L: is a good workaround when using using the src=/images and href=/css --> <img src=/images/janOpen_AC1001.jpg > </body>Relative ULRS's
The styles and HTML using class and element
.top th, are if ( class=top and element th ) then { apply styles }
<style> /* use div class=name element */ .top th, .top td { background-color: #Faa; } .middle th, .middle td { background-color: #ffa; } .bottom th, .bottom td { background-color: #aaF; } </style> <P>Try out using DIV class= tags to style different sections differently </P> <div class=top > <H1> Heading 1:-</H1> <P>Text<P> <table> <tr><th> Title A</th><th> Title B</th></tr> <tr><td> text </td><td> text </td></tr> </table> <H2> Heading 2:-</H2> <P>Text<P> <H3> Heading 3:- </H3> <P>Text<P> </div>
Try out using DIV class= tags to style different sections differently
Text
Title A | Title B |
---|---|
text | text |
Text
Text
Text
Title A | Title B |
---|---|
text | text |
Text
Text
Text
Title A | Title B |
---|---|
text | text |
Text
Text
Hello
Hello
Hello
Hello
Hello
Hello
here are a few tips
Using Subst L: is a good workaround when webpages use Relative URL's like src=/images and href=/css
subst l: C:\Users\dough\Desktop\MyWebsiteCopy
Double click in L:index.htm and the relative URL's should work
http://ccgi.dougrice.plus.com/sampler.htm gets style sheets from http://ccgi.dougrice.plus.com
<head> <link rel="stylesheet" type="text/css" href="patrickpi_styles2.css"> <link rel="stylesheet" type="text/css" href="/patrickpi_styles2.css"> </head> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head>
Why did HTML not use a "decimal" notation for it's elements? The STYLE definitions use a different notation. Inline style=,
/* style name <p style= inline for element class .name <p class= class does not need to be unique id #name <p id= id should be unique */
Why did HTML not use a "decimal" notation for it's elements?
It could have used:-
<P.classname > <P#idname >
You need to use:-
<P class=classname > <P id=idname >
this was not used:-
<P style=.classname > <P style=#idname >
<style> /* unique div tags */ /* div id= */ #d1 { background-color: #faa; color: #ff0; font-size: 40px; } #d2 { background-color: #afa; color: #0ff; font-size: 50px; } #d3 { background-color: #aaf; color: #f0f; font-size: 60px; } /* div class= */ .d4 { background-color: #faa; color: #ff0; font-size: 40px; } .d5 { background-color: #afa; color: #0ff; font-size: 50px; } .d6 { background-color: #aaf; color: #f0f; font-size: 60px; } </style> <div id=d1> <P>SomeText</P> </div> <div id=d2> <P>SomeText</P> </div> <div id=d4> <P>SomeText</P> </div> <div id=d5> <P>SomeText</P> </div>