HTML

A reference

Basic Tags

<head>

Everything that needs to be loaded before the page can render, like CSS and JavaScript, goes inside of this tag, along with the favicon and any other meta information.

<title>

This will be the name that appears in the tab bar for your webpage.

<body>

The actual visual part of your webpage, everything that the user could see or interact with, will go in this section.

<div>

These are useful, generic containers for other HTML elements. If you have multiple elements that you want to modify in some way, lets say indent, you can nest them all inside of a <div> element and then give it a CSS class (we'll talk about CSS briefly at the end of this section).

<h1>

These are your header tags. If you were writing a newspaper, you would put your headline within this tag. There are multiple levels as well so you can have subheadings. <h1> through <h6> are all valid header tags, each becoming increasingly smaller.

<p>

The paragraph elements almost always just contain some text. They're pretty straight forward and don't get too complicated.

<span>

The span elements are usually used to apply some CSS class to a single letter or small phrase within a paragraph.

<img>

This tag is used for embedding images into a page, and it is one of the few exceptions to the rule "all tags must be closed". The image tag doesn't need to be closed. Here is what it normally looks like: <img src="http://i.imgur.com/ME4Kf.gif" />

<a>

The anchor tag is used for creating hyper links to other webpages. They're one of the most important aspects to webpages, because linking to other pages is the what makes the World Wide Web so powerful. Here is an example: <a href="http://github.com/samolds">Click here!</a>

This is a good reference for more HTML tags.


Tag Attributes

HTML tags can also have attributes. For example, the <img> tag will need a src attribute to specify where the image file is located and the <a> tag will need an href attribute for the link to the page. Learn more about a specific tag's available attributes using the reference I just mentioned.


CSS Classes

CSS allows you to customize the look of any HTML element. You can use CSS to make the background blue and the text to be a different font and more indented. The best way to do this is to give an HTML element a CSS class. This is similar to giving an element an attribute, you just add class="whatever" to the tag. Then you create a CSS class named whatever and list what looks you want any element with that class name to have.

When modifying an HTML element with CSS, you can alter all elements by referencing a general HTML tag, or a specific class name. General tags will just be the tag name, like p, body, or div while class names will start with a .. So altering an element with class="banner" would looke like .banner {padding: 20px;}. Here is an example: 


<html>
  <head>
    <title>Gate</title>
    <style>
      body {
        padding: 40px;
        background-color: gray;
      }
      .special-style {
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
    <div class="special-style">
      <p>Do you like my stylish webpage?</p>
    </div>
  </body>
</html>