1 – HTML

Learn to write simple pages in HTML.

Our games will run on browsers so we need to understand the way that web pages are written, i.e., HTML (HyperText Markup Language).

Class preparation

1. Watch at home the following videos by Jake Wright (12 mins each):

HTML part 1:

HTML part 2:

2. Save the following template to a text-only file called ‘sample.htm’ and open it with a browser; you do not need to understand it but you need to be able to create the file and to open it. If you need help, there are detailed instructions in the Resource section at the end of this page.

You could also download the template; make sure that you can open it both in a browser, for displaying, and in a text editor, for edition.

3. Start thinking of someone or something about whom or which you would like to write a short fan page.

Class work

Our goal for weeks 1 to 4 is to create a fan page from scratch. Fan pages are webpages about something or someone that we admire or like; it can be a webpage about a TV show, or a movie star, a singer, or a rock band; more generally, you could write a fan page about anything: a national park, your school, Harry Potter, a video game, etc.

We are going to work our way to a fan page about the TV show “Pokemon”. To do it, we are going to write a static HTML page from scratch; understanding a web page will be useful when we use the elements of the web page to write a game.

Topics for today

  • the internet: servers vs. clients
  • Types of webpages: static vs. dynamic
  • Server-side technologies: Php, Ruby, SQL
  • Client-side technologies: HTML, CSS and Javascript
  • Structure of a web page: doc, head, and body
  • Text-related tags
  • Line breaks, horizontal lines and comments
  • List-related tags
  • Anchor tags
  • Image tags

Workfiles

Download in class: Classpak1.zip

Here are the final webpage that we will have at the end of week 4, and its structure organized as divisions:


fan-page

fan-page-divs



and these are our first steps towards it. To see the HTML script, we can either open the webpage, right-click it, and then select “View Page Source”, or select “Open code in window” from the title bar in the code window.

  1. template: this is our initial template, i.e., a legal but empty web page.
     

     
  2. webpage 0: the structure of the page; it still looks blank, though.
     

     
  3. webpage 1: this page adds the text.
     

     
  4. webpage 2: this page adds the images and links
     

     

Believe it or not, we are done with the content. Next week we will use CSS to make it look like our final fan page.

References and Resources

Analogy for today’s theory

This link makes the analogy between a website and a house; a good read to get an overall understanding of the relationship between clients, servers, HTML, CSS, Javascript, Php and Ruby, and SQL (Courtesy of Betsy Hall – Connor’s mom)

Steps to display a web page using a template

  1. Create a file and copy the html template to it.
     
    In windows:

    1. open Notepad
    2. copy the template to the document
    3. save the document to the desktop; call it sample.htm

     
    In mac:

    1. open textedit
    2. copy the template to the document
    3. remove the formatting by going to Format->Make Plain Text
    4. save the document to the desktop; call it sample.htm

     

  2. Open the file in Chrome
     
    In windows:

    1. open Chrome
    2. create a new tab
    3. type ctrl-o
    4. select sample.htm from the desktop

     
    In mac:

    1. open Chrome
    2. open the file with File->Open File..
    3. select sample.htm from the desktop

     

  3. To edit an HTML in an editor

    1. In windows: Open/save it in Notepad
    2. In mac: Open/save it in Textedit but we have to configure it first:
      1. Run textedit
      2. Choose Preferences from the TextEdit application menu.
      3. Click the Plain Text radio button for New Document Format.
      4. Under Saving, click the checkbox to turn off “Append ‘.txt’ extension to plain text files.”
      5. Under Rich text processing, click the checkbox to turn on “Ignore rich text commands in HTML files.”

     

Online html editors

We can use these editors to try things out.

  1. http://www.htmlinstant.com/
  2. http://www.quackit.com/html/online-html-editor/full/

Off-line editors

My suggestion is go use sublime. You can download it for free and use it for as long as you want; if you decide to keep it, support it by getting the license. It runs in Windows, Mac and Linux. You can put it in your thumb-drive and use it in class.

Important tags

HTML has many tags; here is a full list: all the HTML tags. However, only a few are really needed to write most static web pages. These are the most common ones:

tags about text

For example:

gives us

This is bold, this is in italics and this is red.

tags about lists

For example:

gives us

LCUSD’s elementary schools:

  • Palm Crest Elementary
  • La Canada Elementary
  • Paradise Canyon Elementary
    • tags for css or javascript

      self-closing tags