Monday, March 14, 2016

HTML 5 and CSS3 - Art History Project - Day 1 - Part 2

Now that we have an account on Cloud 9 let's start coding!

Hyper Text Markup Language is made up of things called tags. There are various types of tags:
  • <p> or paragraph
  • <header> This is generally the top portion of an HTML5 web page
  • <h1> Heading level 1 - This is the largest of the heading types and is bold
Each tag has an opening <html> and a closing </html>. Each tag in general has this convention.
  • <h1>Example</h1> 
One can think of HTML tags like a sandwich. <p>jelly</p>  or  <open> </closed>

To be more correct each tag creates a contextual block and defines how the web browser must format and display the content.

Now that is out of the way let's dig into Cloud 9, which is an Integrated Development Environment or IDE for short!
  1. Click on the giant + button to create a new work space
  2. Next create a project name. This must be all lowercase and with no spaces, an underscore can be used for example: art_history
  3. Next scroll down and press the Create Workspace button
  4. Congratulations you are now in the Cloud 9 IDE!

If you do not like the white theme or you wish to change the theme simply click on View on the upper menu and then select your theme. I set mine theme to Herbivore Dark. Next close the Welcome tab and the README tab.

First HTML File!
  1. Click on the plus button along the tab bar or go to the menu and select File > New File
  2. Now lets start coding!!!
  3. In your editor type the following:

<!DOCTYPE html>

<html lang="en">     


<meta charset=" utf-8=">     

<title>Web Site Name</title>

<link href="styles.css" rel="stylesheet">



Hello World!


  1. The meaning behind each line was described in class. If you have questions please see me in class or email me.
  2. Now let's save this file. Go to File > Save As... and save this as index.html next press the Save button
  1. Now we need to run this file. We will press the Run button at the top of the Cloud 9 IDE

  1. After we press the Run button at the bottom of the IDE a window will appear. If you do not see this window then goto View > Console. Then click on the link and select Open
  1. This will open a new tab in your web browser and you should see Hello World! 

Congratulations you made your first web page!!!!