My First Website

Tutorial: Getting Started

Minimal Example

Making a website really isn't that hard. There are GUI editors available, but I'll be talking about the code itself and editing it with a generic text editor. Writing HTML is really quite easy since it isn't a programming language, but rather a markup language. The basic elements of HTML are the opening tag (e.g. <center>) and the closing tag (e.g. </center>). Everything between those two tags will be centered on the page. Below is (almost) the smallest webpage you can make. Try saving it to ~grandline and viewing the results in your web browser. 

<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <center>
    <h1>My First Webpage!</h1>
    <a href="google.com">Here is a link to google.</a>
  </center>
</body>
</html>

Adding Some Colors

Although you can specify font colors with the <font> tag, using CSS makes HTML pages much easier to manage and maintain. You choose a tag, specify some options, then every tag in your document will change to follow those options. Let's change the background color of the page and font color of the header. You can use any of the colors from here or use hex codes in the form #FF8800 

<html>
<head>
  <title>My First Webpage</title>
  <style>
    body {
      background: black;
    }
    h1 {
      color: white;
    }
  </style>
</head>
<body>
  <center>
    <h1>My First Webpage!</h1>
    <a href="google.com">Here is a link to google.</a>
  </center>
</body>
</html>

Best Practices

The CSS paradigm allows you to specify "classes" and "ids" for elements, allowing a huge amount of customization. For ease of use, you can have a separate CSS file and include it in every webpage you make, so they all look the same without needing dozens of lines in the <style> section. For example, if you save the CSS file as ~/public_html/style.css, you can use the below examples. Just be careful when linking the CSS file. If the HTML file and CSS file aren't in the same directory, you'll have to use an absolute path, such as /~laptopdude/style.css instead of the relative path style.css.

HTML File with a CSS Include

<html>
<head>
  <title>My First Webpage</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <center>
    <h1>My First Webpage!</h1>
    <a href="google.com">Here is a link to google.</a>
  </center>
</body>
</html>

Example CSS File

body {
  background: black;
}
h1 {
  color: white;
}

Beyond the Basics

Your best resources for getting better at this stuff are Google, W3Schools, and your fellow Pirates. Just go to a simple webpage on ~grandline, right-click in a blank area, and choose "View Source". You'll be able to see all the code that created the webpage you're looking at. Also be aware that many webpages may employ JavaScript and JQuery to do cool things. JavaScript is an actual programming language, but the JQuery library makes it much more accessible for the casual HTML coder.

Conclusion

Well, that's the end of my introductory tutorials. If you have questions, think I missed something, or just want to say hello feel free to e-mail me. Now go do something cool!