Web Development

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

Lecture Objectives

  • learn about web development careers
  • learn how to mark-up a basic web page
  • learn the HTML tags for headings, paragraphs, lists, etc.

Evolution of the Web

Careers

web developer front-end web developer
full-stack developer
graphics designer
…
web server administrator dev ops
network administrator
database administrator
…

Tools for Web Developers

  • Companies use content management systems (CMS), such as WordPress
    • A CMS makes it easy to create high-quality web sites
    • A CMS makes it easy for non-specialists to update web sites with new content
  • It is easy for you to learn WordPress yourself!

Technologies we will study

Why learn these technologies?

  • You may need to customize a CMS
  • You may need to develop a web site from scratch
    • e.g. to make it unique
    • e.g. to make it highly performant
  • You may want to create systems that use these technologies
    • e.g. browsers
    • e.g. your own CMS
    • e.g. the successor to WordPress — whatever that may be!
  • Computer Scientists are expected to know how things work!

Objectives

We want to build web sites that:
are usable by all users;
are usable on all devices;
are usable in all browsers;
rank highly in search engine results;
load quickly;
are maintainable.

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>

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)

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.

HTML Web Pages

A web page comprises a DOCTYPE followed by
a tree of
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!