Can Someone Please Help a Noob

motiondnb · 6 Oct 2015 at 14:21

Hello Overclockers,

I have recently started a company and have a very primitive website that's just got our company logo on it and some contact details. I've been trying to get the HTML to pass a validation test and every time its telling me i have done something wrong. Im getting fewer errors than i was but i have hit a brick wall and was wondering if someone on here can take a look for me.

www.intensenutrients.com

Thankyou

AHarvey · 6 Oct 2015 at 17:54

I'd remove the CSS from the file now, put it in a separate file and link to it.

Validation errors are easy enough to understand:

No DOCTYPE FOUND = add a doctype to the first line of the HTML file:

Code:

<!doctype html>

look at this for a basic template

http://www.sitepoint.com/a-basic-html5-template/

motiondnb · 7 Oct 2015 at 20:32

Hi AHarvey,

Thanks for the doctype code. The W3 validater is only coming back with a few errors now and your right it is asking me to use CSS instead.

Im really new to all this code and im kind of hoping someone can just tell me exactly what i need to do and give me the code. Dont suppose anyone is feeling super helpful?

Think of all the good Karma.

hargi · 7 Oct 2015 at 21:00

line 40 remove border="0"
line 42 remove border="0"

roger that · 10 Oct 2015 at 06:16

Absolutely no point in creating a separate CSS file for a one page site, it's an unnecessary extra request to the server.

Code:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="intense nutrients, bio stimulants, foundation, roots, accelerator, excelurator, fertilizer, nutrients, feed, growing, solutions, death wish, hydroponics, root, spider mite," />
    <meta name="author" content="Intense Nutrients" />
    <meta property="og:title" content="Welcome to Intense Nutrients. Suppliers of Bio Stimulants to the horticulture industry" />
    <meta property="og:type" content="Website" />
    <meta property="og:url" content="http://www.intensenutrients.com/" />
    <meta property="og:image" content="http://intensenutrients.com/images/IN_logoAvatar.jpg" />
    <title>
      INTENSE NUTRIENTS. Suppliers of Bio Stimulants to the
      horticulture industry
    </title>
    <style type="text/css">
    /*<![CDATA[*/
    body {background-color: #000000;font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 11px;}
    .centre  {margin:0 auto; text-align:center;}
    .centre2 {padding-top:50px;}
    .centre3 {padding-top:40px; padding-bottom:20px;}
    .centre4 {padding:15px 20px; color: #fff; text-decoration:none;}
    .breaker {background-color:#fff; width:450px; height:1px;}
    /*]]>*/
    </style>
  </head>
  <body>
    <div class="centre centre2">
      <p>
        <img src="images/IN_logo.png" width="450" height="448" alt="Intense Nutrients Limited" />
      </p>
    </div>
    <div class="centre breaker">
      <!-- <img src="images/white600.jpg" alt="LineBreak" width="450" height="1" id="breaker" /> -->
    </div>
    <div class="centre centre4">
      Welcome to Intense Nutrients.<br />
      Suppliers of Bio Stimulants to the horticulture industry.<br />
      To find out more <strong><a href="mailto:[email protected]?subject=Intense%20Nutrients%20Enquiry">
      CLICK HERE</a></strong>
    </div>
  </body>
</html>

AHarvey · 10 Oct 2015 at 09:47

roger that said:
Absolutely no point in creating a separate CSS file for a one page site, it's an unnecessary extra request to the server.

it's one tiny request that will make 0 difference, however, as the site is expanded he'll already have the basics laid out in the right way.

AndrewNR · 10 Oct 2015 at 18:19

If you do plan on doing more pages as already mentioned a separate CSS file is a must and I'd consider renaming your ids/classes etc with something a bit more meaningful than centre, centre1, centre2 etc.

roger that · 11 Oct 2015 at 10:52

If you are building a site it's preferable to inline any styles that involve initial page paints, especially for hand-held devices.

Scot Jehl's article is a very good read.

motiondnb · 13 Oct 2015 at 17:23

roger that, you are a legend. No errors or problems, thank you!

I am planning to develop this site to have multiple pages. Once our product is available to buy in more shops I would like a stockists page with a map that shows you the closest shops when you put a post code in. Also the usual stuff About Us, Products page etc etc. I have a friend who is a graphic designer who can do all the graphical stuff (really) but as far as the coding goes I want someone else to do it. I don't have the time to learn. Anyone here build sites for a living?

Trucamo · 14 Oct 2015 at 14:09

roger that said:
Absolutely no point in creating a separate CSS file for a one page site, it's an unnecessary extra request to the server.

It's an extra request once, until it's cached on the client. Having CSS in the same file means you are always transferring more data than required, I'm sure your mobile users would love you!

roger that · 14 Oct 2015 at 22:33

Trucamo said:
It's an extra request once, until it's cached on the client. Having CSS in the same file means you are always transferring more data than required, I'm sure your mobile users would love you!

Maybe the HTML file is cached after the first request?

tidusjar · 16 Oct 2015 at 08:54

motiondnb said:
roger that, you are a legend. No errors or problems, thank you!

I am planning to develop this site to have multiple pages. Once our product is available to buy in more shops I would like a stockists page with a map that shows you the closest shops when you put a post code in. Also the usual stuff About Us, Products page etc etc. I have a friend who is a graphic designer who can do all the graphical stuff (really) but as far as the coding goes I want someone else to do it. I don't have the time to learn. Anyone here build sites for a living?

Drop me a trust