1 – HTML | Code Perspectives

Our initial goal is to learn to write static pages in HTML. There are website builder services like sitebuilder.com and wix with which we can set up webpages without understanding what is happening underneath the hood. However, in 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 how webpages really work.

Getting ready

1. All the code that we will use while learning HTML is in classpak1.zip.

2. These videos by Jake Wright are a great intro to HTML:

3. We need a text editor to write our scripts. We can use the default editors that come with our computers, i.e., ‘Textedit’ in the Mac, and ‘Notepad’ or ‘Notepad++‘ in Windows. A great option is Brackets, which allows us to preview in real-time our changes to our webpage as long as we are using Chrome. If we do not use ‘Brackets’, we we can just open the html file in Chrome and refresh it every time we make to see the effects of our changes.

HTML topics

Our goal for weeks 1 to 4 is to create a fan page from scratch. A fan page is a webpage about something or someone that we like, like a national park, our school, Harry Potter, a video game, etc. As an example, we’ll build a fan page of the TV show “Pokemon”. We will cover the following topics:

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 elements
Line breaks, horizontal lines and comments
List-related elements
Anchor elements
Image elements

front-end vs back-end

When we open a webpage in our browser, the browser in our computer, a.k.a. ‘the client’, sends a request to a program in another computer, a.k.a. ‘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

These languages are constantly changing, but at this point there are stable enough that the changes from one version to another are small.

We can write ‘static’ pages – pages that don’t react to inputs from the user beyond hyperlinks – with just html and CSS. In contrast, ‘dynamic’ pages, like video-games, interact a lot with the user, so to write them we need a programing language; for historical reasons, Javascript is the only programming language that runs natively in all the browsers. As a note, in spite of the similarity in names, Javascript isn’t related to the Java programming language.

Back-end programming is different from front-end programming; traditionally, it uses Php, Ruby and SQL, to handle programming and database queries. We will not use any of these languages here.

Another difference between front-end and back-end programming is code exposure. Front-end programs are exposed and can be seen by anyone; all we need to do to see the script of a page is to right-click on a browser and select ‘View Page Source’. On the other hand, back-end programs are never exposed. 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 them 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.

Content vs. style

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 this content – the style; describing the style is the job 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 is our fan webpage after we finish adding the content, and then after we finish adding the style: