Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

  • learn how to mark-up a basic web page
  • learn the HTML tags for headings, paragraphs, lists, and simple tables
  • learn what an element is

HyperText Markup Language

HTML is the language we use to write web pages.

It is concerned only with content and structure,
not with appearance.

The World Wide Web Consortium (W3C) current version is HTML5.

Markup

HyperText Markup Language

HTML is the markup that turns text documents into web pages.

Primarily, it indicates document structure.

A Simple Web Page


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Welcome!</title>
</head>
<body>
    <h1>Welcome to my web page!</h1>
    <p>
        This is a paragraph. Good, isn't it?
    </p>
</body>
</html>

Tags

HTML uses tags for markup.

Tags generally come in pairs, e.g.:

start tag end tag
<head> </head>
<p> </p>

But not always! E.g. <meta … />

DOCTYPE

The DOCTYPE tells the browser which version of HTML you are using.

For HTML5, the DOCTYPE is much simplified: 


<!DOCTYPE html>

The Overall Structure

After the DOCTYPE, everything is enclosed between <html> and </html> tags.

The document is divided into <head>…</head> and <body>…</body>

Head and Body

The head gives information about the document.

The title and favicon appear in a browser tab.

The browser window.

The body contains the real content of the document.

It appears in the browser window below the menu bar.

Headings

  • Major headings: h1 
    
<h1>Welcome to my web page!</h1>
  • Other headings: h2, h3, h4, h5, h6
    • Not based on position in the page:
      first, second, third, …
    • Based on importance, e.g. report title (h1), sections (h2), subsections (h3).
    • Don't skip a level to achieve a visual effect.

Paragraphs

Use p tags to delimit paragraphs: 

<p>
    This is a paragraph. Good, isn't it?
</p>
<p>
    This is another paragraph. It's not as good as the first 
    one, in my opinion.
</p>
Simply leaving blank lines does not work: 

<p>
    This is a paragraph. Good, isn't it?
        
    This sentence will be in the same paragraph, not a new 
    one.
</p>

Ignored by Browsers

  • The following usually have no effect on what gets displayed:
    • line breaks;
    • tabs and multiple spaces ('whitespace');
    • empty <p> elements.
  • Nevertheless we should format our HTML nicely, e.g.:
    • end tags lined up with start tags;
    • indentation to reveal structure.

Unordered Lists

For lists where the ordering of the items is unimportant
(usually shown with bullet points)

Ordered Lists

For lists where the ordering of the items is relevant
(usually shown with numbers)

Simple HTML Tables

To tabulate data, use an HTML table:

HTML Web Pages

A web page comprises a DOCTYPE followed by
elements, text and comments. 


<p>This is an example of an element.</p>
        
<!-- This is an example of a comment. -->

HTML Elements

An HTML element =
start tag + content + end tag 


<p>This is an example of an element.</p>

… except for void elements,
which have start tag but no content and no end tag, e.g. 


<meta … />

Nested Elements

start tag + content + end tag

An element's content can be text but it can also be one or more other elements nested inside it, or even a mix of both.

Find the Elements!


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Welcome!</title>
</head>
<body>
    <h1>Welcome to my web page!</h1>
    <p>
        This is a paragraph. Good, isn't it?
    </p>
    <p>
        This is another paragraph. It's not as good as 
        the first one, in <em>my</em> opinion.
    </p>
</body>
</html>

G'luck!