2/22: Introduction to Markup & Dynamic Page Generation

Following Up From Last Week

• What questions do you have?
• Are there things you’re interested in talking more about?

Here is a link to last week’s handout: Introduction to Web Hosting.

Some Examples

Check out examples from folks at other institutions for some inspiration:

• Muhlenberg College
• University of Oklahoma (Creaties award winners)
• Plymouth State University

Folders All the Way Down

Domains, subdomains, directories, folders, files... it's (basically) folders all the way down! You’ll see this happen automatically when you install an application using cPanel’s Installatron – but it can also be done by hand.

There are different ways we can go about this. We’ll use cPanel file manager for today – but FTP-ing, which we touched on last week, is another way to do this, by transferring files from your computer to the web hosting server using a secure connection.

Let’s make a new subdomain space, and then start creating some content for it.

1. Click the Subdomains button on the Domains menu.
2. Name your subdomain.
3. Click the Create button.
   • If all goes well, you will get a success message, and you will see your new subdomain added to your list of subdomains.
4. Navigate to your cPanel File Manager.
5. Find the folder for your new subdomain, and navigate to it.
6. Create a new file in this folder using the +File button at the top, and name it “index.html”

What Is a Markup Language?

“In computer text processing, a markup language is a system for annotating a document in a way that is syntactically distinguishable from the text, meaning when the document is processed for display, the markup language is not shown, and is only used to format the text.” (Source: Wikipedia)

HTML

HTML (Hypertext Markup Language) is the standard markup language for documents designed for display on the web.

Let’s start playing around with HTML!

1. Open up your index.html file by clicking it and then clicking the Edit button in the top-level menu. cPanel's File Manager allows for some rudimentary editing right from within itself, which is handy!
2. Write some initial HTML, for example <p>Hello world!</p>
• Navigate to your subdomain’s web address: what do you see?
• HTML conventions!
3. Now add some more content to your index.html file: a page title in <title> tags, and a heading in <h1> tags. For example, <title>All About Pianos</title> and <h1>Grand Pianos</h1>
• Navigate to your subdomain’s web address again: what do you notice?
• Markup! Metadata!
4. Next, make a new .html file in your same subdomain folder. Give it whatever simple title you want, and a basic line or two of content.
5. Let’s link them to each other! Go back to your index.html file and create a link to your new page – something along these lines: <a href=”yourpagetitle.html”>your link text</a>
• How do you think this link works?
• Relative paths vs. absolute paths!

This was just a very basic introduction to HTML: a properly-formatted HTML document has additional elements that help set up and structure it. Read more here at W3Schools’ HTML Introduction, which has a helpful rundown of the structure of a simple HTML document and the function of each of the elements.

You can view the source code of a web page to see how it was built (though not all elements will appear – like chunks of code written in PHP). In Firefox or Chrome, you can do this by right-clicking and selecting “Show Page Source” or “View Page Source.”

CSS

CSS (Cascading Style Sheets) is a language used to describe the styling of a document written in HTML, in order to separate presentation and content.

Let's start playing around with CSS!

1. Go back to your index.html file.
2. Let’s change the colors of the headings, right from within the file. Use this code as an example: <h1 style="color:purple;">Grand Pianos</h1>
• How might this work if your document has multiple headings? And you have multiple documents to style?
• Enter external stylesheets!
3. Create a new file, still within your subdomain folder, and name it stylesheet.css
4. Add some CSS. For example:
   h1 {
    color: purple;
}
5. Now you need to link your stylesheet to your pages. Put this code at the top of your HTML documents: <link rel="stylesheet" href="stylesheet.css">

You’ve now hand-coded your very own website, and styled it to boot. Pretty sweet!

Further Resources

• Old-school HTML primer from MIT
• Codecademy resources for learning HTML & CSS
• W3Schools tutorials for HTML and CSS

And just for fun... here’s an amazing example of CSS artwork, that also showcases the differences in how browsers render things: Pure CSS Francine.