1 – HTML

Our initial goal is to learn to write static pages in HTML. There are several services that allow us to write webpages without understanding the underlying language, but a few lessons we will write a video game that runs on our browser, so we need to understand not just how to make a webpage, but also the language that web pages use.

Class preparation

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

HTML part 1: Learn HTML in 12 minutes

HTML part 2: Learn more HTML in 12 miuntes

2. We need to save the following template to a text-only file called ‘sample.htm’, or we can download it from template:

We do not need to understand this file now, but we need to be able to create it, and to open it in a browser and in a text editor. These steps can help if we have problems; however, different versions of these apps are a bit different so the exact instructions might change; hence, use these steps as a guide instead of a recipe.

  • To create a file and copy the html template to it:
     

    Windows

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


    Mac

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


  • To open the file in Chrome
     

    Windows

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


    Mac

    1. open Chrome
    2. select with File→Open File…
    3. select sample.htm from the desktop


  • To edit an HTML file in an editor:

    • In windows: Open/save it in Notepad
    • In mac: Open/save it in Textedit but we have to configure it first:
      1. run Textedit
      2. choose TextEdit→Preferences… from the application’s menu
      3. in the “New Document” tab, click the ‘Format→Plain Text’ radio button
      4. in the “Open and Save” tab, click the checkbox to turn off “Add ‘.txt’ extension to plain text files.”, because we want to create plain files that have the ‘.htm’ extension instead
      5. under Rich text processing, click the checkbox to turn on “Ignore rich text commands in HTML files.”

     

We can use these editors to try things out online:

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

There are many more advanced options to the basic ‘Notepad’ of Windows and ‘TextEdit’ of Mac. Some of them are:

3. Think 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, e.g., a webpage about something or someone that we like, like a national park, your school, Harry Potter, a video game, etc. Our goal is to go over the internal structure of a web page, which we will need when writing games. As an example, we’ll create a page of the TV show “Pokemon”, writing a static HTML page from scratch.

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

front-end vs back-end

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. The short story is that when we open a page in our browser, the browser in our computer, also called ‘the client’, sends a request to a program in another computer, also called ‘the server’, whose only purpose is to ‘serve’ pages to ‘clients’ like us. Our browser is on our screen, in ‘front’ of us, while the server is ‘behind’ the connection to the server, in the ‘back’. Thus, writing programs that run on the client, in our computer, is called ‘front-end programming’, while writing programs that run in the server is called ‘back-end programming’.

Traditionally, front-end programming uses three languages:

  • the html markup language, to describe the content of the page
  • the Cascade Style Sheets (CSS), to describe the style of the page
  • the Javascript programming language

html and CSS are enough to write static pages, i.e., pages that don’t react to inputs from the user beyond hyperlinks; audio and video playback are hyperlinks. To create dynamic pages, that interact a lot with the user, like video games, we need a programing language and, for historical reasons, Javascript is the only programming language that runs natively in all the browsers. In spite of the similarity in names, Javascript is not related to the Java programming language. Back-end programming is different; it traditionally uses Php, Ruby and SQL, to handle programming and database queries.

Since we can expose the code of a webpage, front-end programs are visible and can be seen by anyone. Back-end programs are not visible. An example of a back-end program is the Google search engine, which is a trade secret; our webpage of Google search merely uses our client to collect the terms that we want to search for, and then sends the terms to the server, where the google search engine actually runs.

In this class we work only in front-end programming. We will first write a static fan webpage, using html and CSS, and then a video game, i.e., a dynamic web page, using html, CSS, and Javascript.

Workfiles

This is all the code for the html sessions, in a single package; download it in class: Classpak1.zip

Classwork

We write the ‘content’ of our page – text, images, videos, links – in html. HTML stands for ‘HyperText Markup Language’; html is a computer language, but it is not a programing language because it doesn’t have the structures needed to write programs.

Html is good at describing what we want in the page – the content, but its not good at describing how to display the content – the style; describing the style is the function of the Cascades Style Sheets (CSS), which we will see after learning html. When we separate what we want in a page (html) from how we want to display it (css), the process of designing a page becomes easier.

The following are our pages after we finish adding the content, and then after we finish adding the style; click on the image to see a functional version on our browser:


fan-page



Big difference, right? We need both HTML and CSS to build a good-looking fan page. So let’s get started with the html content.

To see the HTML script (the ‘code’) in the sections that follow, 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.