Level Up: Creating Web pages

By Mark Ciotola

First published on February 15, 2020. Last updated on February 18, 2020.

Activity Objectives

You are viewing this course via a web browser. Each lesson is a web page you can view in a browser. The best way to learn how web pages work and how they structure information is to begin creating your own webpages from scratch (rather than using an authoring platform).

Students will create their own web page using either simple HTML and CSS.
Students will set up their own online web site using either a university account, WordPress, Wix or another tool.
Students will try out more advanced text editors.

Setting Up A Website

A website is made up of web pages. The most common type of web page is a hyper text mark up “html” file. Such a file contains a header section with information about the page, such as its title, and a body section with the contents of the page. Information is contained between an opening tag such as <title> and a closing tab with a backslash, such as </title>. Some pairs of tags can be nested within other pairs of tags.

Create your own web page by following the below steps.

1. Open up a text editor. Notepad or TextEdit can work, but make certain that you use plain text mode.

2. Type the following into your editor:

<html>

  <head>
    <title>My My Clio Results<title>
  </head>

  <body>
    <h1>My Clio Result</h1>
    <p>I found several fascinating items in Clio.<p>
  <body>

</html>

3. Save the the file and name it “your_surname_firstname_clio_results.html”.

4. Open the file in a web browser. See a page with “My Clio Result” as a large headline and then your factoid beneath.

5. After reading the information below, enter your write-up of your Clio results into the body section of your html page then resave and view it (and turn it in to your instructor if requested).

What is this all about? HTML stands for HyperTest Markup Language which is the standard way to express web pages. The extension HTML tells the browser that the file should be interpreted as HTML language.

The page has various layers inside of other layers. The highest layer is the html layer, hence the html tags at the beginning and end of the document. They enclose and apply to everything in this document.

Then there is the head part. We use it to enclose the page title, which may show up in browser tabs. The head can also be used to contain information which is useful for the rest of the document, such as scripts and styles. Note: the contents of the head section typically do not appear in the contents of a page.

Next is the body part. This contains the content that you wish people to view in the web page. h1 tells the browser to format this text as the largest standard heading size. There are also h2, h3, h4, h5 and h6 sizes. The p tells the browser to format the enclosed text as a separate paragraph.

Remember that most tags require the content to be terminated with an enclosing tag, which is typically the beginning tag preceded by a “/”, such as:

<p>I found several fascinating items in Clio.</p>

Styling Content With CSS

CSS stands for Cascading Style Sheets. You can use snippets of CSS code to add styling to your content (or use entire style sheets).

The easiest way to style with CSS is to add CSS code to an html element. This is called inline styling. For example, you can add background color are graying to a paragraph to set it apart. The elements of CSS styling are the aspect to be styled, such as background color, and the style itself such as a color. In CSS, colors can be expressed in several different way, such as via common names such as red, blue and yellow or via codes for more precise shading, such as #ffcc99;

<p style="background-color: yellow;"> Rome was not built in a day, and neither was Syracuse.</p>

You can do much with styling, and style sheets can be used to easily style who groups of elements, such as all paragraphs or headings. To improve accessibility and responsive design, it is best to separate content from styling.

Hosting Your Page for Public Access

Your school might provide an online location for you to host web pages for public access. If so, your school might also provide instructions and recommend software to transfer your files online. Otherwise, you can pay a small amount monthly for a hosting services. There are also hosts, such as WIX and WordPress.com, that provide basic authoring environments for free (warning: their offerings are not necessarily endorsed and their terms may change). These environments are relatively easy to use and maintain, and often offers extra features, but their capabilities may nevertheless be limited.

More Advanced Text Editors

Leveling up activities are optional for their section, but they can involve skills and tools that can help you get ahead of the game, or do things (once learned) better or faster.

There are text editors created specifically for editing computer programs and code. They offer a lot of helpful features, but each one has different capabilities and look and feel. You should try out a few and pick the one you like best. Some of these are free, while others cost money.

Some coders prefer command line utilities, but only try these if you feel comfortable with the Unix/Linux command line. Examples include Vi, Vim, Pico, Emacs. (This author sometimes still uses Pico. It can be useful in a pinch.)

« Becoming A Digital Explorer Activities | COURSE | Document Preservation and Retrieval—Saving Old Information With New Technology »

Digital History