Student Showcase

Please share your Project Overview for the final project with the class.

HTML Basics: HTML Exercise 1

In this exercise, you will be writing code for your first web page.

Your page will end up looking like this:

finished-site

File and Folder Structure

We’re going to pretend that a client sent your the content files in the download above. Now create the folder structure for your web site.

  1. On your external drive, create a new folder.
  2. Name the folder something relevant to your topic (keep the name short but descriptive, and don’t use spaces or special characters). This is know as your root folder. In this case, name it tigertopia.
  3. Open this root folder and move the downloaded styles.css file into it.
  4. Create a new folder inside the root folder called images. Most web designers keep all of the images files for their site in a folder called images.
  5. Create another new folder inside the root folder called workdesk. This will be for files that help you create the site but won’t appear in the final site.
  6. Move the two image files from the download into the images folder: tiger.jpg and tiger-background.jpg.
  7. Move the text file from the download into the workdesk folder: tigertext.txt

Creating Your HTML Document

Next, we need to create the file for your HTML code.

  1. Open Adobe Edge Code (or Adobe Brackets if you don’t have Adobe CC installed).
  2. File > New.
  3. Save the file as index.html into your root folder.

Beginning Our HTML

beginning html tagsTime to start coding! First, we need to tell the web browser that it is about to read an HTML file. We also like to tell it when the HTML file is complete.

  1. At the top of your index.html file, type in <!doctype>, which tells the browser we are going to use HTML5.
  2. Under that, type <html>, which is the open HTML tag.
  3. Adobe Edge Code will automatically close the html tag with: </html>. Press Return a couple of times to move the close tag down the page.

HTML files, like people, have a head and a body.

  1. Just under the open html tag, type in <head>. Edge Code will close the tag for you. Press Return twice.
  2. Move your cursor below the </head> tag.
  3. Press Enter once and type <body>. Edge Code will close the tag for you. Press Return twice.

In the head goes information about the page that doesn’t directly display within the browser window. One of these items is the page title, which displays way up at the top of the browser, in the title bar.

  1. In between the two head tags, type in <title></title>.
  2. Click your cursor in between the two title tags, then type a title for your topic: Tigertopia. Save your file (Cmd+S, or Ctrl+S on the PC).

View in a Browser

View in a BrowserView your page in a browser window:

  1. Locate your index.html file within your root folder on the desktop.
  2. Right+click on the file and choose Open With > [browser of your choice].

Where did the content inside the title tags go?Where did the content inside the title tags go? Is there any content inside the browser window?

Don’t close the browser–we’ll keep refreshing the page as we add more code.

Adding Content

  1. Open tigertext.txt in a text editor. Copy the text inside it.
  2. In your index.html file, paste the text on a blank line just after the open <body> tag.
  3. Save your file and refresh the page in the browser. What does the new content look like?
Adding Content

Adding Structure

Adding HTML StructureOkay, we clearly need to create some structure for our paragraphs. This is where the M in HTML comes in: markup.

  1. Click right before your first paragraph in the code.
  2. Type in <p>, which is the open paragraph tag. Edge Code will close it: </p>.
  3. Cut (Cmd+X) the close tag, and paste (Cmd+V) it at the end of the first paragraph (there are five).
  4. Put open and close paragraph tags around each of the remaining paragraphs.

An open tag, plus close tag, plus the content between them, is called an element. These are <p> elements.

Save your file and refresh the page in your browser window.

How has the page changed?

The paragraphs are separated, but the lines in the poem still run across the page.

  1. HTML break tag <br>Add a <br> tag at the end of each line of text, except where there’s already a close </p> tag.

The <br> tag has no close tag. This is called an empty element.

Save your file and refresh the page in your browser window.

How has the page changed?

page with paragraphs and break tags

It’s starting to come together. There’s a weird character in place of the em-dash in the fourth paragraph, but we’ll attend to that later.

HTML h1 tagsIt would be nice to have a page heading.

  1. Click right after the open body tag and press the Return key to start a new line.
  2. Type in <h1></h1>. These are the open and close tags for a level one heading.
  3. Click right in between the two tags and type in a heading for your page: Tigertopia.

HTML page with h1 and paragraphsSave your file and refresh the page in your browser window.

How has the page changed? What are the stylistic differences that the browser gives h1 and p tags by default?

Let’s try a second level heading, for the author’s credit.

  1. adding an h2 element to htmlJust below the <h1> element, start a new line and type in <h2></h2>. These are the open and close tags for a level two heading–second in hierarchy to an <h1>.
  2. In between the <h2> tags, type in The Tiger by Ella Wheeler Wilcox.

Save your file and refresh the page in your browser window.

How has the page changed? What are the stylistic differences that the browser gives h1 and h2 tags by default?

html page with h1, h2 and p elements

Emphasizing Some Text

The name of the poem should by emphasized to set it apart as the title of a work of art.

  1. html em tagType an <em> tag just after the <h2> tag and just before the word The. Em in this case is short for emphasis.
  2. Move the close </em> tag to just after the word Tiger in the poem name.

Save your file and refresh the page in your browser window. What is different between how the browser treats the <h1>, <h2>, and <p> elements, and how it treats the <em> element?

html emphasized text

Adding an Image

html img tagSo far, this page is pretty close to what the the very first web pages looked like. Not too fancy. Let’s add an image.

  1. After the fifth paragraph, start a new line and type in a new set of <p> tags.
  2. Between the <p> tags, type in <img src=””>. This is an image tag.
  3. Click right in between the two double-quotes and type in images/.
  4. Immediately after the forward slash [/], type in the file name for your image: tiger.jpg. This completes the path from the html file to the image file.

Save your file and refresh the page in your browser window.

html page iwth headings, paragraphs, and image

In order for blind people and search engines to understand what the image is, we need to provide alternate text.

  1. Click right after the second double-quote within the image tag.
  2. Type in a space, then this code: alt=””
  3. Click in between the two double-quotes and type in a short description of your image, such as photograph of a tiger yawning.

Save your file.

Character Entities

mdash html character entitySome characters cannot be generated straight from our American keyboards. In cases where you need special characters in HTML, you’ll need to refer to an HTML character entity chart. HTML character entities always begin with a & sign and end with a ; symbol.

Our em-dash in the fourth character looks pretty weird in the browser. Let’s replace it with a character entity. em dash in browser

  1. mdash html character entityAfter the word dilate, delete the dash and replace it with &mdash;

Save your file and refresh the page in your browser window.

Enhancing the Page Structure with Semantic Elements

HTML5 came with some nifty new elements that allow us to tell the browser what the major page content areas are. Writing the code in such a way that the HTML elements describe what kind of content is within them, is called semantic coding.

Let’s add three HTML5 elements that divide our content into boxes that we can move around easily: <header>, <article>, and <footer>.

  1. Nest the <h1> element inside a <header> element.
  2. Nest the rest of the content before the </body> tag, inside an <article> element.
  3. Add a <footer> element right after the close </article> tag. We’ll put content inside it shortly.
html header, article, and footer elements

Save your file. It probably won’t look different in the browser yet.

HTML Wrappers

Designers often wrap all of the content within the <body> element inside a containing element. This allows for greater flexibility when styling the page.

  1. Start a new line right after the <body> tag.
  2. Type in <section>. Edge Code will automatically create its close tag as usual.
  3. Move the close </section> tag down to a new line right above the close </body> tag.
  4. Back in the open <section> tag, add an attribute so that the tag reads as <section id=”wrapper”>. This gives the container a name we can target in our styles.
HTML section tag wrapper  HTML section tag wrapper

Save your file. It probably won’t look different in the browser yet.

Indenting Your Code

Coders often like to indent lines of code to make the nesting of elements clearer. Like the Russian matrioshka nesting dolls, elements fit inside each other. You will find as you continue coding, that indents help you understand what’s going on it code better.

  1. Use the tab key in front each line of code inside the section element, to indent them off the left edge. Edge Code automatically know how far to indent! See the example.
HTML Edge Code indentation

Save your file. It probably won’t look different in the browser yet. But check to be sure nothing has broken.

Finish Up the HTML

completed html codeLet’s finish up by adding some content to the footer, a critical <meat> tag, and a <link> to our stylesheet.

TYPE THEM IN. If you simply copy and paste, you will get the wrong kind of quotation marks.

  1. Add this line of code in between the <footer> tags: <p>&copy;2015 <a href=”http://google.com”>Tigertopia Foundation</a></p>
  2. Add these lines of code in a blank line right above the close </head> tag:
    • <meta charset=”UTF-8″>
    • <link type=”text/css” rel=”stylesheet” href=”styles.css”>

Save and refresh in the browser. It should look pretty different now! Try resizing the browser window and see what happens.

We’ll take some time in class to discuss those last lines of HTML, along with the CSS cose in the styles.css file.

Zip up your root folder (tigertopia) and turn it in. See How to Zip Files at the bottom of the right-hand column.

Preproduction: Wireframes

When planning your site, you must do a lot of research and then begin drawing some rough layouts. The research involves discovering as much as you can about the company, topic, or other entity the site is about, its intended audience, and the scope of the site (how big and complex it will be.) Then you can figure out how to break the web pages out into page content areas.  You did this last week in your Project Home Content assignment.

wireframe sample for a news site, gridless

Once you’ve decided upon all the content areas that are appropriate for your site, it’s time to draw up a few wireframes. A wireframe is an illustration of the layout of fundamental elements in the web page’s interface. Typically, wireframes are completed before any additional artwork is developed. Carefully planning your overall layout, before you create any graphics or even select color palette and typography, can eliminate a lot of headaches later on.

Wireframes can be created by hand or by using a variety of software programs. Visio is software that is ideally suited for wireframing, but it is expensive. Sometimes designers simply use Word, Excel, or Illustrator.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

Student Work

Click through for a larger version of each image.

Wireframe1 Wireframe2 Wireframe3

How to create a wireframe:

  1. Decide on which page elements will be included (again, you did this last week in your Project Home Content assignment.)
  2. Use a ruler or draw carefully to indicate the placement of the various page elements within the browser. Take your time to show clean boundaries. Imagine that you will be submitting this work to a paying client. Some of the content may go below the bottom of the browser window; go ahead and show the entire page above and below “the fold.”
  3. Label each of the page elements.
  4. Each wireframe for a given project should include the same page elements, which were previously determined.
  5. Instead of drawing, you may use software instead—-but take care to include all of the page elements, and label each element. Don’t get too detailed! There should only be rectangles and labels.

Preproduction: Site Structure Diagram

Create a tree diagram showing all of the site’s files and folders in a hierarchical structure. Here’s how I want to you create yours:

  1. Decide what topics will be on each of your web site pages (home page plus four more).
  2. Draw your root folder at the top: draw a wide/landscape-oriented rectangle and write its name underneath it.
  3. Draw a vertical relationship line down from the root folder and connect it with a long horizontal line.
  4. Draw short vertical lines down from the horizontal line, one for each file or folder within the root folder.
  5. Under these vertical lines, draw a rectangle for each file or folder within the root folder. Be sure to use the correct orientation: use wide/landscape-oriented rectangles for folders and tall/portrait-oriented rectangles for files.
  6. Label each folder with the actual folder name you intend to use, and each file with the actual file name you intend to use. Make sure your home page is named index.html, and that you include a styles.css stylesheet file, and an image folder.

Remember our file and folder naming conventions:

  • No spaces.
  • No uppercase letters.
  • No special characters other than – or _.
  • No period except where it immediately precedes the file extension (e.g. index.html).
  • Use meaningful file and folder names, as they are “read” by search engines.

For Simple Sites

This diagram would be a good pattern upon which to build the diagram for your 5-page final project. Remember to rename the root folder as well as the html files that are not index.html. This diagram will help you build your site structure as well as your menu navigation.

site map sample

For Complex Sites

For more complex sites with many categories of content, you may need to collect groups of pages within subfolders. Each of these subfolders should also contain an index.html to serve as the default page for that folder. This diagram is for a more complex site than the one you will complete in this class. Click for a larger version.

complexsite map sample

Homework: Review Before Next Week’s Class

Site Structure

  • The site should have its own unique folder.
  • The file name for the home page should be index.html.
  • All of your CSS rules should be in an external stylesheet, typically at the top level inside your site folder, and often named styles.css.
  • All site images should be inside a subfolder, typically called images.
  • Any files which are related to the site but not intended for web access (such as Photoshop files) should go into a separate subfolder, such as workdesk.
  • All file and folder names should conform to a naming convention:
    • No spaces.
    • No uppercase letters.
    • No special characters other than – or _.
    • No period except where it immediately precedes the file extension (e.g. photo.jpg).
    • Use meaningful file and folder names, as they are “read” by search engines.

HTML Syntax

HTML Syntax
  • All HTML markup (tags, attributes and values) should be lowercase.
  • An element is typically made up of an open tag, content, and a close tag.
  • Element attributes are always located in the open tag, and are separated from the tag name and other attributes by a space.
  • All attributes values must contained within double quotes.
  • Elements which have no content, such as the image element, are called empty elements. They must be closed inside the tag. Examples:
    • <img />
    • <br />
    • <hr />
    • <link />

HTML Block vs. Inline Elements

  • Block elements stand alone: they start on a new line and take up all of the available space from left to right. Examples:
    • <h1>
    • <p>
    • <div>
    • <table>
    • <header>
  • Inline elements go with the flow: they stay inline with other content and only take up enough space for the element’s content. Examples:
    • <img>
    • <a>
    • <strong>
    • <em>
    • <span>

HTML Basic Elements

Element Name Markup Element Type
Paragraph <p>content</p> block
Heading 1 <h1>content</h1> block
Division Element for Content Area <div>content</div> block
Image <img src=”images/imagename.png” alt=”description”> inline, empty
Emphasis (italicized by default) <em>content</em> inline
Break <br> inline, empty
Header <header>content</header> block
Nav (for navigational menus) <nav>content</nav> block
Article <article>content</article> block
Footer <footer>content</footer> block
Section <section>content</section> block