SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile SEO <h1> tag question in Front Page

    I am informed by a Bing SEO analyzer that my CONTACT page is missing the <h1> tag.
    I don't know enough about code to figure out where or how to insert the <h1> </h1>tags and would appreciate any hints about how to enter that tag into the FP code which I am posting here:

    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
    <META HTTP-EQUIV="Content-Language" CONTENT="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" Content="rainbowsedgefineart.com offers fine art for sale">
    <TITLE>contact</TITLE>
    <meta name="Microsoft Theme" content="clearday 011">
    </HEAD>
    <BODY id="main_body">
    <p align="center"><img border="0" src="rainbows-edge-2.jpg" width="391" height="92" alt="Rainbow's Edge Fine Art logo"><font color="#0000FF" face="Arial" size="2"><a href="contact.htm"><br>
    </a></font></p>
    <p align="center"><b><font color="#0000ff" size="6" face="Verdana">CONTACT
    THE ARTIST<br>
    </font></b>

    I believe the <h1> tag goes with "CONTACT THE ARTIST" but don't know how to do it.........???
    Thanks for your help here,
    jim

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,332
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    All the tags in HTML should 'surround' content and, in that way, defines and encapsulates it. It also important that each tag has an "opening" and "closing" partnership.
    There are numerous tags available. In your post you will see 'html', 'p', 'body', 'font' for example.

    The h1 is used to define a Top Level (Level 1) Header. I suspect the "SEO expert" is advising you surround the CONTACT THE ARTIST as you said.
    I am not familiar with Front Page but would guess you can simply select that text and choose a button to add the H1.

    If not, you can edit the HTML like this
    HTML Code:
    <h1>Contact The Artist</h1>
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ParkinT View Post
    I am not familiar with Front Page
    Few people would be now asmost people stopped using it about ten years ago. The latest browser it properly supports is Internet Explorer 6 and Microsoft themselves declared it to be dead so long ago that the replacement software they released called "Expression Web" has recently also been declared to be dead by Microsoft with "Visual Studio" being its replacement.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Using "Insert" method

    Quote Originally Posted by ParkinT View Post
    All the tags in HTML should 'surround' content and, in that way, defines and encapsulates it. It also important that each tag has an "opening" and "closing" partnership.
    There are numerous tags available. In your post you will see 'html', 'p', 'body', 'font' for example.

    The h1 is used to define a Top Level (Level 1) Header. I suspect the "SEO expert" is advising you surround the CONTACT THE ARTIST as you said.
    I am not familiar with Front Page but would guess you can simply select that text and choose a button to add the H1.

    If not, you can edit the HTML like this
    HTML Code:
    <h1>Contact The Artist</h1>
    Parkin:
    Ok, I went into the code and fiddled around with it as you suggested. Working from the Normal View and the HTML (code) view, I finally ended up with this version - which works!:
    <b><font color="#0000ff" size="6" face="Verdana"><h1 align="center">CONTACT
    THE ARTIST</h1></font></b>
    The portion: <h1 align="center"> was created by Front Page after I manually aligned the page from "normal" view. Any other configurations caused left alignment or gaps between the lines of print. By making the page look as I want, the code re-arranged itself into the final version I posted above. I know just enough about code to "dabble" with it in FP pages so, thanks a lot for the tip and response to my question. It's working!!!!!

    HAPPY HOLIDAYS,
    jim

    I just tried the: FP Insert HTML method that you mentioned, without going into the page HTML code and it produced the same result by placing the <h1> tag into the code and leaves the page configured as I want. Actually, using the "Insert HTML" method would have been easier and quicker if I had followed that at first.
    jim
    Last edited by jimrich; Dec 17, 2013 at 23:51. Reason: More info

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jimrich View Post
    I finally ended up with this version - which works!:
    <b><font color="#0000ff" size="6" face="Verdana"><h1 align="center">CONTACT
    THE ARTIST</h1></font></b>
    That will not necessarily work in all browsers. Most of that code was removed from the HTML standard back in 1997.

    There is no such thing as a <font> tag any more.
    There is no such thing as an align attribute any more.

    Also it is invalid to wrap inline tags such as <b> around block tags such as <h1>.


    The correct HTML to do that is:

    <h1>CONTACT THE ARTIST</h1>

    You would then have CSS that looks something like the following to style it:

    h1 {color:#00f; font-size: 1.1em; font-family: verdana; text-align:center;font-weight:bold}
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=felgall;5604341]That will not necessarily work in all browsers. Most of that code was removed from the HTML standard back in 1997.
    There is no such thing as a <font> tag any more.
    There is no such thing as an align attribute any more.
    Also it is invalid to wrap inline tags such as <b> around block tags such as <h1>.

    The correct HTML to do that is:
    <h1>CONTACT THE ARTIST</h1>

    >>> Jim: I tried that code combination and it DOESN'T WORK! I had to go to the page view and manually rearrange all of the information which FP then converted to quite a different code set-up in the HTML view.
    Have you ever worked with Front Page?
    FP 2000 works very well for me.
    jim
    Last edited by jimrich; Dec 18, 2013 at 23:12. Reason: corrections

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,156
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    It may work very well for you. But using mark-up that's now ~13 years old (in tech time that's ages) will not "work very well" for all modern browsers for any guaranteed amount of time.

    You'll only be able to apply "patches" for so long. You can't rely on backwards compatibility being supported forever.

    Continue to use FP2000 if that's what you're stuck with but don't be surprised if you do some cross-browser compatibility testing and find that some browsers "fix" the mark-up for you in ways unexpected.

    Personally, I would rather hand-code in plain old notepad rather than use FP2000 this long after its demise.
    Don't get me wrong, I've used FP2000 myself, had fun with it and liked using it back in the day.

    But I guess this is a topic for another thread.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by jimrich View Post
    FP 2000 works very well for me.
    Yes, but the code it's producing is from another century, and will not hold up for long. If you are going to do much web design, I encourage you to grab a modern HTML book or do a simple course—of which there are many. It's well worth it.

  9. #9
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    To be honest, I learned myself coding with FrontPage (an old version on a floppy, included in a computer magazine).
    First just using the design view and the prefab FP buttons. Then I started to look "under water" in the code view, to see what was really happening in the code. That was interesting, but I didn't understand everything. Next step: learning with Google!
    On the web and in forums I discovered that FrontPage had some build-in errors. And more and more I went into the code view to make the code myself without the FP failures. In the meantime I'd read about "CSS" (Cascade Style Sheets), which was an eyeopener.

    Instead of putting all styling things into a messy html, you can split it in a clean html page and a connected stylesheet with all the design matter.
    And more: a stylesheet can be used for more than 1 page: it is recyclable. That means: no more typing of repeated styling code in each page (for the header, the menu-styles, the font-sizes etc.), but once for all. What is very easy too: ion case you decide some time to change the style (for instance: a new background image, or an other font type), you can do that in the 1 stylesheet, and whoooosh, it's applied in all pages. Wonderful!

    So I can advise you to go over to hand-coding the html, and to step in the world of CSS.
    But I think words only aren't enough, and made an example for you: the contact page in a new coat.


    Comparing the code
    The FrontPage emission:
    HTML Code:
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
    <META HTTP-EQUIV="Content-Language" CONTENT="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" Content="rainbowsedgefineart.com offers fine art for sale">
    <TITLE>contact</TITLE>
    <meta name="Microsoft Theme" content="clearday 011">
    </HEAD>
    <BODY id="main_body" background="_themes/clearday/cdbkgnd.jpg" bgcolor="#FFFFFF" text="#000000" link="#0033CC" vlink="#6699FF" alink="#00CC33"><!--mstheme--><font face="Verdana, Arial, Helvetica">
    <p align="center"><img border="0" src="rainbows-edge-2.jpg" width="391" height="92" alt="Rainbow's Edge Fine Art logo"><font color="#0000FF" face="Arial" size="2"><a href="contact.htm"><br>
    </a></font></p>
    <h1 align="center"><!--mstheme--><font color="#000099">
    <b><font color="#0000ff" size="6" face="Verdana">CONTACT THE ARTIST</font></b>
    <!--mstheme--></font></h1>
    <p align="center"><font face="Verdana, Arial, Helvetica"><font size="2"><a href="index.htm"><font face="Arial">Home</font></a><font face="Arial">&nbsp;&nbsp;</font>
    <font color="#0000ff" face="Arial">|&nbsp;&nbsp; <a href="bio.htm">Bio</a>
    &nbsp;<a href="http://users.smartgb.com/g/g.php?a=s&amp;i=g18-00040-d7"><br>
    </a></font>
    <font size="3" face="Arial"><br>
    </font><b><font size="4" face="Arial"><i>To make an offer for Irene's artwork or
    to get more details about&nbsp; purchases, contact the artist at:</i></font></b>
    </font>
    <p align="center"><font face="Verdana, Arial, Helvetica"></p>
    <div align="center">
      <!--mstheme--></font><table cellSpacing="0" cellPadding="10" width="60%" bgColor="#EBEBEB" border="1" bordercolordark="#6699FF" bordercolorlight="#99CCFF">
        <tbody>
          <tr>
            <td align="center"><!--mstheme--><font face="Verdana, Arial, Helvetica">
              <p align="center"><font size="4" face="Arial"><b>Irene Nowicki</b><br>
              </font><font size="3" face="Arial">17950 Burbank Blvd.<br>
              Suite 21<br>
              Encino, CA 91316-1673</font></p>
            <!--mstheme--></font></td>
            <td><!--mstheme--><font face="Verdana, Arial, Helvetica"><p align="center" style="line-height: 150%"><font size="3" face="Arial">Studio: 818-757-3022<br>
              Cel: 818-770-9439<br>
      </font>
    </font>
              <font size="3" face="Arial"><a href="mailto:.......">.......</a></font></p>
          <!--mstheme--></font></td>
            </tr>
          </tbody>
        </table><!--mstheme--><font face="Verdana, Arial, Helvetica">
    </div>
    <!--mstheme--></font></body>
    </html>
    The html of the new version:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Rainbow's Edge Fine Art | Contact the artist</title>
    	<meta name="description" content="Contact options for the artist of RainbowsEdgeFineArt.com">
    	<link rel="stylesheet" type="text/css" href="stylesheets/refa.css" />
    </head>
    
    <body>
    	<div id="header">
    		<a href="http://rainbowsedgefineart.com/"><img src="http://clba.nl/sitepoint/images/refa-logo-nw.png" 
    		width="290" height="100" alt="Rainbow's Edge Fine Art logo" title=""></a>
    	</div>
    
    	<p id="nav"><a href="/">Home</a> | <a href="bio.htm">Bio</a></p>
    
    	<h1>CONTACT THE ARTIST</h1>
    
    	<p><strong><em>To make an offer for Irene's artwork<br>
    	or to get more details about purchases,<br>
    	contact the artist at:</em></strong></p>
    
    	<div>
    		<span class="box">
    			<strong>Irene Nowicki</strong><br>
    			17950 Burbank Blvd.<br>
    			Suite 21<br>
    			Encino, CA 91316-1673
    		</span><span class="box">
    			<strong>&nbsp;</strong><br>
    			Studio: 818-757-3022<br>
    			Cel: 818-770-9439<br>
    			<a href="mailto:...">.......</a>
    		</span>
    	</div>
    </body>
    </html>
    And this is in the connected stylesheet:
    Code CSS:
    /* refa.css */
    /* rainbowsedgefineart.com */
    html {
    	height: 100%;
    	padding-bottom: 1px;
    	}
    body {
    	margin: 0;
    	padding-bottom: 10px;
    	background: url(http://clba.nl/sitepoint/images/refa-bg-nw.jpg);
    	font-family: arial, helvetica, verdana, sans-serif;
    	text-align: center;
    	font-size: 100.1%;
    	}
    #header {
    	padding: 25px 0 0 0;
    	}
    a img {
    	border: 0;
    	}
    h1 {
    	color: blue;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 2em;
    	}
    #nav  {
    	color: blue;
    	}
    #nav a {
    	margin: 0 5px;
    	}
    p {
    	margin: 1em;
    	padding: 0;
    	}
    .box {
    	width: 15em;
    	margin: 5px -2px;
    	padding: 1em 0;
    	background: #EBEBEB;
    	border: 2px ridge #C0C0C0;
    	display: inline-block;
    	}
    What I did with the html:
    • Made it valid html (see result of the html-validator), a basic condition for a good performance in all browsers. The original had 20 Errors, 2 warnings due to FrontPage.
    • Added a so-called "doctype": which tells the browser which version of html is used. I've chosen for the "Strict" version of html: since 1999 the recommended standard by the w3c ("the boss of the html").
    • Removed the <meta> tag for the content-language (the old way), and set the content language in the <html> tag (the modern way).
    • Removed all styling tags (as the deprecated <font> tag) and styling attributes (like bgColor="...").
    • Removed the table-for-the-design (lots of code, but "tables may not be misused for design") and replaced by an easy-view "division" (a <div> tag) with 2 <span> boxes for the address-data.

    Some other benefits of the new version, because of the flexibility of css:
    • The page can be viewed in each screen size from small to big:


    • Page-size html (0,7kB) + stylesheet (0,4kB) together: 1,1kB. - That is less than the half of the old html-only version (was: 2,6kB)!

    Extra:
    • Made the logo fit for small devices, simultaneously made transparent (refa-logo-nw.png), now 10kB (was: 15kB).
    • The background image lossless compressed with smush.it: now refa-bg-nw.jpg of 4kB (was: 5,6kB).

    Page speed new version (with the css and the new images): ca. 570ms for total 16,3kB (was: ca. 1.25sec for total 23.7kB).
    Download time decreased with 55%.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Francky View Post
    To be honest, I learned myself coding with FrontPage (an old version on a floppy, included in a computer magazine).
    That floppy must be really old. The code it is generating has been obsolete since 1997. Browsers have changed a lot in the last 16 years and you can't expect code written for Internet Explorer 3 to work properly in Internet Explorer 11 (or other modern browsers).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    That floppy must be really old. (..).
    Yessir, it was once upon a time when the were only 5 inch floppy's ... prehistoric long ago!
    I hope I've made some progress since then.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Francky View Post
    Yessir, it was once upon a time when the were only 5 inch floppy's ... prehistoric long ago!
    I hope I've made some progress since then.
    The five and a quarter minifloppies aren't prehistoric. The eight inch floppies were around for a long time before anyone ever thought of increasing the capacity and decreasing the size. More like stone age.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    To be honest, I learned myself coding with FrontPage (an old version on a floppy, included in a computer magazine).
    First just using the design view and the prefab FP buttons. Then I started to look "under water" in the code view, to see what was really happening in the code. That was interesting, but I didn't understand everything. Next step: learning with Google!
    On the web and in forums I discovered that FrontPage had some build-in errors. And more and more I went into the code view to make the code myself without the FP failures. In the meantime I'd read about "CSS" (Cascade Style Sheets), which was an eyeopener.

    Instead of putting all styling things into a messy html, you can split it in a clean html page and a connected stylesheet with all the design matter.
    And more: a stylesheet can be used for more than 1 page: it is recyclable. That means: no more typing of repeated styling code in each page (for the header, the menu-styles, the font-sizes etc.), but once for all. What is very easy too: ion case you decide some time to change the style (for instance: a new background image, or an other font type), you can do that in the 1 stylesheet, and whoooosh, it's applied in all pages. Wonderful!

    So I can advise you to go over to hand-coding the html, and to step in the world of CSS.
    But I think words only aren't enough, and made an example for you: the contact page in a new coat.


    Comparing the code
    The FrontPage emission:
    HTML Code:
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
    <META HTTP-EQUIV="Content-Language" CONTENT="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" Content="rainbowsedgefineart.com offers fine art for sale">
    <TITLE>contact</TITLE>
    <meta name="Microsoft Theme" content="clearday 011">
    </HEAD>
    <BODY id="main_body" background="_themes/clearday/cdbkgnd.jpg" bgcolor="#FFFFFF" text="#000000" link="#0033CC" vlink="#6699FF" alink="#00CC33"><!--mstheme--><font face="Verdana, Arial, Helvetica">
    <p align="center"><img border="0" src="rainbows-edge-2.jpg" width="391" height="92" alt="Rainbow's Edge Fine Art logo"><font color="#0000FF" face="Arial" size="2"><a href="contact.htm"><br>
    </a></font></p>
    <h1 align="center"><!--mstheme--><font color="#000099">
    <b><font color="#0000ff" size="6" face="Verdana">CONTACT THE ARTIST</font></b>
    <!--mstheme--></font></h1>
    <p align="center"><font face="Verdana, Arial, Helvetica"><font size="2"><a href="index.htm"><font face="Arial">Home</font></a><font face="Arial">**</font>
    <font color="#0000ff" face="Arial">|** <a href="bio.htm">Bio</a>
    *<a href="http://users.smartgb.com/g/g.php?a=s&i=g18-00040-d7"><br>
    </a></font>
    <font size="3" face="Arial"><br>
    </font><b><font size="4" face="Arial"><i>To make an offer for Irene's artwork or
    to get more details about* purchases, contact the artist at:</i></font></b>
    </font>
    <p align="center"><font face="Verdana, Arial, Helvetica"></p>
    <div align="center">
      <!--mstheme--></font><table cellSpacing="0" cellPadding="10" width="60%" bgColor="#EBEBEB" border="1" bordercolordark="#6699FF" bordercolorlight="#99CCFF">
        <tbody>
          <tr>
            <td align="center"><!--mstheme--><font face="Verdana, Arial, Helvetica">
              <p align="center"><font size="4" face="Arial"><b>Irene Nowicki</b><br>
              </font><font size="3" face="Arial">17950 Burbank Blvd.<br>
              Suite 21<br>
              Encino, CA 91316-1673</font></p>
            <!--mstheme--></font></td>
            <td><!--mstheme--><font face="Verdana, Arial, Helvetica"><p align="center" style="line-height: 150%"><font size="3" face="Arial">Studio: 818-757-3022<br>
              Cel: 818-770-9439<br>
      </font>
    </font>
              <font size="3" face="Arial"><a href="mailto:.......">.......</a></font></p>
          <!--mstheme--></font></td>
            </tr>
          </tbody>
        </table><!--mstheme--><font face="Verdana, Arial, Helvetica">
    </div>
    <!--mstheme--></font></body>
    </html>
    The html of the new version:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Rainbow's Edge Fine Art | Contact the artist</title>
    	<meta name="description" content="Contact options for the artist of RainbowsEdgeFineArt.com">
    	<link rel="stylesheet" type="text/css" href="stylesheets/refa.css" />
    </head>
    
    <body>
    	<div id="header">
    		<a href="http://rainbowsedgefineart.com/"><img src="http://clba.nl/sitepoint/images/refa-logo-nw.png" 
    		width="290" height="100" alt="Rainbow's Edge Fine Art logo" title=""></a>
    	</div>
    
    	<p id="nav"><a href="/">Home</a> | <a href="bio.htm">Bio</a></p>
    
    	<h1>CONTACT THE ARTIST</h1>
    
    	<p><strong><em>To make an offer for Irene's artwork<br>
    	or to get more details about purchases,<br>
    	contact the artist at:</em></strong></p>
    
    	<div>
    		<span class="box">
    			<strong>Irene Nowicki</strong><br>
    			17950 Burbank Blvd.<br>
    			Suite 21<br>
    			Encino, CA 91316-1673
    		</span><span class="box">
    			<strong>*</strong><br>
    			Studio: 818-757-3022<br>
    			Cel: 818-770-9439<br>
    			<a href="mailto:...">.......</a>
    		</span>
    	</div>
    </body>
    </html>
    And this is in the connected stylesheet:
    Code CSS:
    /* refa.css */
    /* rainbowsedgefineart.com */
    html {
    	height: 100%;
    	padding-bottom: 1px;
    	}
    body {
    	margin: 0;
    	padding-bottom: 10px;
    	background: url([url]http://clba.nl/sitepoint/images/refa-bg-nw.jpg);[/url]
    	font-family: arial, helvetica, verdana, sans-serif;
    	text-align: center;
    	font-size: 100.1%;
    	}
    #header {
    	padding: 25px 0 0 0;
    	}
    a img {
    	border: 0;
    	}
    h1 {
    	color: blue;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 2em;
    	}
    #nav  {
    	color: blue;
    	}
    #nav a {
    	margin: 0 5px;
    	}
    p {
    	margin: 1em;
    	padding: 0;
    	}
    .box {
    	width: 15em;
    	margin: 5px -2px;
    	padding: 1em 0;
    	background: #EBEBEB;
    	border: 2px ridge #C0C0C0;
    	display: inline-block;
    	}
    What I did with the html:
    • Made it valid html (see result of the html-validator), a basic condition for a good performance in all browsers. The original had 20 Errors, 2 warnings due to FrontPage.
    • Added a so-called "doctype": which tells the browser which version of html is used. I've chosen for the "Strict" version of html: since 1999 the recommended standard by the w3c ("the boss of the html").
    • Removed the <meta> tag for the content-language (the old way), and set the content language in the <html> tag (the modern way).
    • Removed all styling tags (as the deprecated <font> tag) and styling attributes (like bgColor="...").
    • Removed the table-for-the-design (lots of code, but "tables may not be misused for design") and replaced by an easy-view "division" (a <div> tag) with 2 <span> boxes for the address-data.

    Some other benefits of the new version, because of the flexibility of css:
    • The page can be viewed in each screen size from small to big:


    • Page-size html (0,7kB) + stylesheet (0,4kB) together: 1,1kB. - That is less than the half of the old html-only version (was: 2,6kB)!

    Extra:
    • Made the logo fit for small devices, simultaneously made transparent (refa-logo-nw.png), now 10kB (was: 15kB).
    • The background image lossless compressed with smush.it: now refa-bg-nw.jpg of 4kB (was: 5,6kB).

    Page speed new version (with the css and the new images): ca. 570ms for total 16,3kB (was: ca. 1.25sec for total 23.7kB).
    Download time decreased with 55%.
    Franky:
    Thanks for the tips and code. Your code for our Contact page is interesting but does not work for me whereas the Tidy-up code from W3C works very well with little adjustments in the FP program. I am beginning to study up on code via the web and it's helping me "fix" my pages along with the codes I get at W3C Validator. I may not be able to use the code and version of Contact that you posted but I am gaining quite a lot from what you wrote about CSS and modern code so THANKS VERY MUCH for your feedback here.
    jim

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Microsoft made Expression Web available as a free download when they declared it (Expression Web) dead. As it was the replacement for FrontPage and is free there's no reason to stay with FrontPage - after all the most recent browser that FrontPage supports is Internet Explorer 6 - which is why Microsoft abandoned it many years ago and replaced it with Expression Web.

    Effectively the only way to create web pages that work in modern browsers is to write all the HTML in it yourself. Just about ANY other editor will be quicker for doing that.

    A better alternative even than Expression Web for WYSIWYG web editing is Blue Griffon - http://bluegriffon.org/ - a free WYSIWYG web editor that when used the right way will produce valid (or almost) HTML from the WYSIWYG interface.

    As for direct editing of the HTML - even notepad is a better editor for that than FrontPage.


    Switching to ANY other editor than FrontPage will have saved you hours of time by the time you get to working on your second web page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •