Checklist

Coding

  1. Basic page structure

1a. <head> & <body> tag content

An HTML document has 2 parts a <head> and <body> and everything is contained in these 2 tags, so they only exist ONCE in an HTML file. The meta-data is in the head (things about the page like title) and the body contains everything that is displayed (the page content). Check that

  • The page starts with a <DOCTYPE html> tag followed by <html>

  • You should not be using the transitional DOCTYPE code (This can occur if you are using some a generator to develop the code)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • You only have only ONE <head> and only ONE<body> tag!

  • You have open and closing tags for head and body <head> </head> and <body</body>

  • ALL code is either between the <head> or <body> tag

  • You don't have any content or display tags in the <head> tag e.g., the menu code, or heading code must be in the body tag.

1b. basic structure

2. <head> section

2a. <head section>

  • The <head> tag contains the meta-data (things related to the whole page), like the title of the page, links to the CSS file, search tags, etc.

  • The <head> tag should not contain any <body> elements (like h1, h2, div, p) It contains the meta-data for the page (things about the page)

  • It is best to have what the page is about, then the name of the site (e.g. <title>Gallery | My Business</title> as the left of the text is displayed on the browser tab.

2b. <title> tag

  • Should indicate what the page is about and should NOT be the same for all pages.

  • Is important for Search Engine Optimisation. titles like “Contact” are a bit vague.

  • Think how it will show in the browser tag, and keep them short as you want try and make sure they show up as different in the browser tabs. It is probably best to start with the description of the page.

3. <body> section

3a. Deprecated tags

  • Unless you are using them for Semantic content (meaning) formatting tags like <center>, <b>, <big>, <strong> are being deprecated and replaced with styles so should be avoided (often indicates you found a dated reference/tutorial to work from)

3b. Hyperlinks

  • A Menu should be on all pages and link to all other pages (or sections).

  • Most developers will disable the link to the page it is on, as it is an unnecessary page load for the browser. (often they will use <a href=”#”>)

  • If your menu's do not work it could be due to:

    • placing the text outside the <a> tag.

    • tags out of order

    • missing <a> and </a> tags or quotes (").

    • Using the wrong quotes (if you paste from MS-Word you may end up using speech marks “xxx” )

    • To get the link working to About Us
      <li><a href="about.html">About Us</a></li>

  • In page hyperlinking

    • # is used for an in-page hyperlink. If you use an in-page link (the #) it needs an anchor tag to go to. E.g., Click <a href="#contact">contact</a> and in the file <a name="contact"></a>

  • It probably would have paid to send me a message with the code, and I could have helped. Sometimes these things are easily fixed but difficult to find when you are learning.

  • Absolute addressing

  • ☐ You needed to check my list of issues in my weekly post. Your code contains absolute addressing for images, e.g. img src=file:///Users .. so on my version all your image links are broken (they point back to your computer or neocities). This is usually a sign that you used a tool to create the web page and you inserted the images before you saved the page.

  • ☐ As mentioned before, you have issues with absolute links to Neocities. E.g., <a href="https://mysite.neocities.org">Home</a> should be <a href="index.html"> Home</a>

  • Relative addressing

  • ☐ You needed to check my list of issues in my weekly post. Your code contains a relative address for the CSS (href="/style.css">) so it goes to the root of the drive. As I run this in a sub folder the link is broken, and it is likely this would be the case on a full web server. In your case you have all the html files in the root which makes file organisation very complex when developing on a local drive.

  • ☐ You needed to check my list of issues in my weekly post. All of your links (src) contain “/” which asks the browser to get the file from the root folder in the drive. This means that none of the links will work, or media will show unless they are in the root folder.

  • ☐ You needed to check my list of issues in my weekly post. Your code contains a relative address for your files (html, images, CSS, (e.g., href="/style.css"> ) so it goes to the root of the drive. As I run this in a sub folder the links are broken, and it is likely this would be the case on a full web server.

  • ☐ Not sure why you are using “./” in your path names. Basically, it says go up one folder then down again. I did some research and it appears to be significant only for HTML5 & JS importing, otherwise it can safely be omitted. (https://stackoverflow.com/questions/7591240/what-does-dot-slash-refer-to-in-terms-of-an-html-file-path-location )