COM372-14 : Web Design and Development

Making your first page

Lesson Number 04, September 3, 2014

Now that we are familiar with the basic structure and syntax of HTML, let's write our first page!

Due For This Class

Both items are due at the start of class

Presentation

More Common HTML Terms

Attributes

The tag may contain additional information and such information is called an attribute. Tags such as <img> and <a> use attributes. Attributes usually consist of 2 parts:

  • An attribute name (such as src or href)
  • An attribute value (such as doge.jpg or link.html)
  • Attribute values should be wrapped in quote marks (" or '). I recommend using double-quotes. Whatever you choose, stay consistent.
<img src="myimage.jpg" alt="A great selfie!">

<img src='myimage.jpg' alt='SJU Campus'>

Important note about using quote marks - When you are working with quote marks, you will need to be careful of using quotes within your attributes. When possible, use the opposite type of quote mark than what you will write within the value.

<img src="myimage.jpg" alt="Saint Joseph's Campus">

<img src='myimage.jpg' alt='The dog said "Woof!"'>

Or you can use encoded characters.

<img src="myimage.jpg" alt="Some &quot;text&quot;">

Coding Standards

The way that you write code matters from a readability standpoint. While your code may work and validate if you do not follow these guidelines, it is important that you learn to write code neatly and cleanly.

Here are some basic guidelines. We will expand these as you progress through this course.

Lowercase Tags

Use all lowercase in tag names (with the exception of DOCTYPE - you can choose what you would like to do for this)

Good

<p>This is my <strong>important</strong> text.</p>

Bad

<P>This is my <STRONG>important</STRONG> text.</P>

New Lines

  • Start the following tags on new lines
  <p>, <div>, <h1> - <h6>, <ul>, <li>

There are more tags that it would make sense for starting on new lines, but we have not learned them yet.

  • Don't start the following tags on new lines (unless doing so helps with the readability of your code - can especially be the case when, for example, you're wrapping an image in an anchor)
  <strong>, <em>, <a>, <img>

Two-Space Indent

Indent with two spaces (your code editor should help you do this - when we start using a code editor I will discuss with you how to set this up).

Include Reasonable Amounts of Whitespace

Use a reasonable amount of empty lines to separate your code if you think it helps with readabilty. Not all tags need to be separated by full empty lines. Don't use extraneous whitespace - use 1 empty line rather than 5.

Comments are the greatest!

Use comments as much as you want in the beginning! Comments are great, particularly for you to mark where you may be having difficulties with your code or to justify your coding choices.

Syntax Style Guide Examples

If you're interested, there are many style guides out there.

And just for fun, here is TimBL's original style guide

Starter HTML Template

A very basic HTML page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PAGE TITLE</title> <!-- DON'T FORGET THE TITLE -->
  </head>
  <body>
  <!-- PLACE ALL OF YOUR PAGE CONTENT BELOW HERE -->

  <h1>This is my heading</h1>

  <p>This is a paragraph</p> 

  <!-- AND ABOVE HERE -->
  </body>
</html>

Our starter HTML template is available to download on Github.

Homework

Codeacademy (due 9/5/2014)

  1. Log in to codeacademy.com.
  2. Select the Web Fundamentals track.
  3. Complete lesson 2 Build Your Own Web Page (note: there are 6 steps to this lesson).
  4. To verify you have completed this lesson take a screenshot of page that clearly shows you have completed the lesson and email it to me (kpipe@sju.edu).

Brackets (due 9/5/2014)

Download and install Brackets on your computer. This is a program for Mac and PC. We will use this program to write code through the rest of the semester.