EP1000

HTML & CSS

This section looks at developing a static website using HTML and CSS. This is essential development of any website/webpage as all pages are finally rendered using HTML and formatted accordingly using CSS.

It is important for any developer to understand the basics of HTML and CSS.

HTML

Hypertext Markup Language (HTML or HTM) is the standard markup language for documents to be displayed on a web browser. A markup language annotates a text document such that it is distinguishable from normal text so that when the document is processed for display, the markup is used for the formatting and does not change the text content.

For example:

This part of the text is <b>bold</b> as compared to normal.

will produce

This part of the text is bold as compared to normal.

the tags <b> and </b> cause the formatting (or marks up the text).

There is quite a lot to learn if one is to be proficient in HTML or HTML5 (the current standard) however, for this course, it would be sufficient to be knowledgeable in the basics. Hence, we will adopt a just-in-time learning approach and proceed to the reference sections should we need to develop more expertise in a particular area.

This is the basic outline of a HTML file that displays a

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to my first web page!</h1>
    <p>This is a paragraph.  It is just some text written without regard
    to the use of whitespace, as HTML ignores spaces, tabs and newlines.</p>
    <p>Sometimes we would want to have un-ordered lists of items, also known as,
    bullet points.  Some of the list items are links to other sites..</p>
    <ul>
        <li>Web Servers and hosting services</li>
        <li><a href="atom.io">Atom Text Editor</a></li>
        <li><a href="www.google.com">Google Search</a></li>
    </ul>

    <h2>About us</h2>
    <p>You can also imbed images in a web-page, here is a nice pictures
    of the Fablab in SP</p>

    <img src="images/fablabt11.jpg" height="30%">

    <p>I hope you enjoy the facilities here!</p>
</body>
</html>

If you use this link: My First Webpage you will be able to see how it renders on a web browser.

HTML - the language of the web

HTML (HyperText Markup Language) describes how the information is to be displayed in a web browser. Watch: How a web browser builds and displays a web page

In order make available information on the www, you need the following

Web pages are developed using

A Static web page is built using HTML (and CSS) and has the same content and presentation regardless of the user identity or other factors. Static web pages are easy to code and do not change when the page is displayed.

A Dynamic web page is built using HTML and a scripting language which interacts with the remote server each time the page is loaded. When the page is called the scripting language sends a request to the web/database server loading fresh content which may change with time and situation.

Static web pages are great for information presentation that does not need to change with time and are easier to code. Dynamic web pages are more difficult to implement, however, you only need to change the data for the page to change.

Learning HTML & CSS

There are many good HTML and CSS tutorials on the web as well as books. The time taken to cover this topic (alone) would consume a whole term. Hence, my recommendation is that

  1. Start with Mozilla’s Learn Web Development covering the following topics
    • Getting started with the web
    • Introduction to HTML
    • Multimedia and embedding
    • HTML tables
    • CSS First Steps
    • CSS Building blocks
    • Styling text
    • CSS Layout
  2. Use the reference sites from w3schools for further information and development

You could watch the following videos as a start as well:

Here is an example of how you would navigate your site if you were to structure it using folders.

 

Home Home
October 2021