Default Website

From Penny's Pages
Jump to navigation Jump to search

Once a new website has been made, the site will use the default layout with the exact same CSS file and image. The look for this page has changed a few times over the years, the most recent version of the layout was made in 2019-11-20.

Along with an index.html page, a default website will also have an image file called neocities.png, style.css, and not_found.html for the 404 page.

index.html

The index.html file (that is the only file on a site that cannot be deleted). Here is the page layout in full;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The web site of <%= username %></title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <h1>Welcome to my Website!</h1>

    <p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>

    <p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>

    <p>Here's how you can add an image:</p>
    <img src="/neocities.png">

    <p>Here's how to make a list:</p>

    <ul>
      <li>First thing</li>
      <li>Second thing</li>
      <li>Third thing</li>
    </ul>

    <p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p>
  </body>
</html>

The title part of the page, <title>The web site of <%= username %></title>, has <%= username %> in it, because of this, it will change the title of the page to "The web site of [user]", the "user" part being the name of the website, for example, if the website was called neozones, then the title text would say "The web site of neozones".

The default HTML file content has the following line in it: <link href="/style.css" rel="stylesheet" type="text/css" media="all">; the media="all" is redundant, because media="all" is the implicit default, following this, type="text/css" is unnecessary on almost all modern browsers.

neocities.png

An example of what the default website looks like, along with showing what the neocities.png looks like.

neocities.png is a simple image that is only about 12.9 KB in size. The image is a banner that shows the Neocities mascot, Penny the Cat, along with text telling the viewer that the site is hosted on Neocities.

A SVG version of the same image exists, same for the image of Penny the Cat. Bot of the versions of the iamge can be found on the press page for the host.

style.css

The default CSS file on Neocities can be easy to understand and read;

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

The start of the code, the part that has "/*", is unread by the browser. It quickly covers what CSS is in a basic way.

The second part of the CSS file is for the body part of the webpage. In the case of this default CSS, it tells the browser that the background colour should be white with black as the font colour, while the font should be Verdana, a humanist sans-serif typeface designed by British type designer Matthew Carter for Microsoft in 1996, it is one of the core fonts for the Web.

not_found.html

The unchanged not_found.html page.

The default 404 page is very simple. The not_found.html shows the viewer a white background, with the title of "Page Not Found", along with the text "The requested web page was not found on this site".

<html>
  <head>
    <title>Page Not Found</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <center>
      <h1>Page Not Found</h1>
      <h2>The requested web page was not found on this site.</h2>
    </center>
  </body>
</html>

References

  1. Original wiki article about this subject
  2. Default templates on the Neocities GitHub
  3. joppiesaus taking about the redundant part of the index.html file