Step 3: Coding
Congratulations! You have identified your strategy and established your design plan—now you are ready to start coding! For the purpose of this website, I provide just the basics of coding necessary to actually get started. In addition, I identify resources for coding the most essential and common surface features.
HTML
HTML (Hypertext Markup Language) is the standard computer language for creating Web pages. HTML is used to structure content with tags that identify what element a piece of content is (e.g. a paragraph, a header, and so on). Note: Although you can use HTML for style, such as font faces, backgrounds, and so on—do not use HTML for style. We use CSS for style, which you'll read about in the following section.
Creating an HTML Page
To create an HTML page you need to
1. Open a text and code editor. I recommend TextWrangler or Notepad++.
2. Use the following code at the beginning of every page, which designates your file as an html web page and establishes the most basic, required elements of any page:
<!DOCTYPE html>
<html>
<head>
<title> title you want displayed in your browser </title>
</head>
</html>
Putting HTML Page Online
To put your HTML page on the web, you'll need an open source client software, which allows you to put your files on your server. Many free open source client softwares are available to you; however, I recommend CyberDuck.
To upload your file onto the server, open up the software and connect to your server in the Quick Connect tab. For George Mason, the server is sftp://mason.gmu.edu The server will prompt you to log in with your school ID and password. Once logged in, you should see a file titled "public_html." Any files you want to show up online should be put in this folder.
Before uploading your page onto the server, it's a good idea to test out your page first. To see how your page will look in the browser, simply save your code and open the saved file in your computer. Your computer will open your file in the browser.
Using Tags
As mentioned earlier, tags are letters in brackets used to identify content as a particular element. When using tags, remember to have both an opening and closing tag. The closing tag has a backslash after the first bracket. Also note that tags are nesting, so they should open and close within their nested element. For example:
<body>
<p>
This is a paragraph within the body of the document.
</p>
</body>
The table shows displays the most common tags:
| Element | Tag |
|---|---|
| Paragraph | <p> </p> |
| Title | <title> </title> |
| Body | <body> </body> |
| Headers (h1 to h6) | <h1> </h1> |
| Link | <a href="url"> </a> |
| Image | <img src="image.jpg"/> |
| List | <ul> <li> </li> </ul> |
CSS
CSS is a computer language used to define the style of elements within HTML. Using a separate language for style is helpful for 3 reasons: 1) CSS helps you separate style from structure and content, which is a more efficient design practice, 2) CSS is more organized, as it allows you to code style and content in separate files, and 3) CSS allows you to duplicate the same style across multiple web pages, rather than having to manually enter in the same style for each individual HTML page.
Writing CSS
To style a particular element throughout an HTML page, type the name of the element (without the brackets) and then specify your style modifications within braces. A semi-colon should follow each individual style modification. So, if you want all of your text within paragraph tags to be blue and 14pt, here is how your CSS code would look:
p {color: blue; font-size: 14px;}
Now, every time you use the <p>tag, this style will be applied.
Classes
Let's say you don't want all of your paragraphs to be in style though—maybe you want a few paragraphs to be green instead. In that case, you would designate a class. CSS classes are used to designate the style for individual elements.
To create a class, instead of the tag name (such as "p" in the example above), you write a period followed by the name for the style (keep it simple). You write the rest of the code as usual, making the desired changes to the style. For example:
.green { color: green; font-size: 14px;}
To apply this style to your HTML page, you need to identify the class for that element. To identify the class, write out your opening tag and include class="name of class". Note you do not need to include the period that appears before the class name of the CSS file. For example, if you used our CSS code so far, your HTML code would look like this:
<p> This is blue text. </p>
<p class="green"> This is green text. </p>
Applying CSS
You have a few options for applying your CSS to the HTML page. You can incorporate your CSS into the actual HTML file; however, this is less practical and does not leverage the benefit of keeping your style and structure separate. Instead, it is best to apply your CSS externally.
To apply your CSS externally, you write your CSS in a separate file and save it with the extension .css (for example: stylesheet.css). In the head of your HTML document, you provide a link to your CSS sheet: < link rel="stylesheet" href="stylesheet.css" /> Make sure you have both files in the same folder, both on your computer and in the server.
Resources for Basic Style Features
Even the most basic web site will likely incorporate the following style features. The linked resources will help you get started using these features.
Bonus Fun Resources
In my own journey as a beginning web designer, I've found the following easy-to-use resources particularly helpful in my efforts to make my designs more interesting. Enjoy!
