CS 1100: Web Development: Client-Side Coding

Fall 2016

Session 3: Introduction to HTML & CSS (part 1)

Plan for today:

  1. What is a markup language
  2. HTML: versions, browser wars, standards movement
  3. HTML syntax

1. What is a markup language

HTML stands for Hypertext Markup Language. Markup is used to annotate text. A markup language is used to annotate text in a systematic way. In the world of print, markup could be editing instructions added to a manuscript by an editor. In school, markup could be the corrections a teacher makes to a student's paper. In a web page, markup is instructions on how to display the content (or, more precisely, a description of that content's structure).

In other words, markup is information about the content.

As you remember, a web page is nothing but plain text. That text consists of (a) text to be displayed, and (b) instructions on how to display it. The browser should be able to tell the difference between the two. And since the browser is a computer program, it will only understand precise instructions. That's exactly what HTML does: it uses a precise syntactic construct, called tags, to separate text from markup - i.e., text to be displayed from text to be interpreted as instructions.

Here's an example:

<p>This is a paragraph

The text "This is a paragraph" is just text - so it will be displayed.

The text "<p>" is a tag - so it won't be displayed. Instead, it will be interpreted by the browser as a "paragraph" tag, so the browser will display everything that follows this tag on a new line.

Thus, HTML is a formal language used for describing the structure of a web page, that is understood by the browser.

2. HTML: versions, browser wars, standards movement

3. HTML syntax

Besides the material offered by your textbook, there are lots of HTML tutorials and other resources available online.

Following are a few key points from our class discussion.

Here's an example of an HTML element:

html element

Having learned the syntax of HTML you will be able to read any HTML document you encounter. More importantly, it will be much easier for you to write HTML (regardless of the tags or attributes you use), and it will be much easier for you to debug your code. So, think of HTML syntax NOT in terms of the elements (and tags) you have already seen, but in terms of patterns:

<tag> 

<tag>some content</tag>

<tag attribute="value">

<tag attribute-1="value" attribute-2="value">

...and any combination of the above!

There are lots of HTML elements, and you should not try to learn them all. As you construct more and more web pages, you will come to know more and more HTML elements, many of which you will eventually remember. But there's no need to memorize them on purpose. There are many references available online. When you come across an element you don't know - look it up! Here's an excellent resource.

-- Continued in session 4 --