WebDev0

Information

Session 1: Follow these steps

  1. View a number of web pages, look at the source code of these sites.
  2. Fill out the Personal page in Microsoft word or equivalent. You don't need much information, just enough for us to work with. The information can be dummy information.
  3. Copy the TEXT ONLY into a text editor like Notepad++ or equivalent.
  4. Create a new folder for your website and save the text file with the name index.html
  5. Fire up your favourite browser and view the file you just created. It does not look anything like what you created in word. We will now use HTML markup to make it look similar.
  6. Mark up using the following with your lecturer who will discuss each tag as we go. Mark up uses tags or elements that surround the text to provide meaning to the browser. The browser handles each tag differently.

    • Headings using h1-6 tag
    • List using ul, ol and li tags
    • Paragraphs using p tag
    • Hyperlinks using the a tag

  7. Discuss the structure of a HTML web page and put in the head, body and html tag.
  8. OPTIONAL Place some CSS into the page to give it some colours.

Activity

I just had to take the hypertext idea and connect it to the TCP and DNS ideas and
— ta-da!— the World Wide Web Tim Berbers-Lee, Inventor World Wide Web, 2008

Session 1: Introduction to HTML

Hyper Text Markup Language (HTML) is the main language used on the web to display information. The language forms the basis for all web pages. This language is not a full programming language and it is best to think of it as simply the blueprint for the page, similar to the blueprints that a builder uses to build a house, it tells the browser what to build, not how to build it.

HTML is a markup language which means that it works by placing tags (sometimes called elements) around the text. These tags provide information about the contents of the tag which the browser is then able to interpret. The tags start with a <, followed by the tag name and then completed by a >, eg the paragraph opening tag is <p>.

Most tags consist of an opening tag, the actual contents and a closing tag (which is the same as the opening tag with / before the name. eg <p>Some text as the body of the paragraph</p>

Some tags don't have a closing tag and are self closing eg <br /> which is the break tag often used in forms. In HTML5 the backslash here is optional, however during these course notes it will be used for consistency.

The browser ignores the case of the tag but it is good practise for all tags to be lowercase.

When the first web pages were developed in 1991 HTML was the only language for building web pages so it had to do everything. However since then the Cascading Style Sheet (CSS) language has been developed which adds form, structure and styling to web pages and the Javascript language can add actions to web pages. All three are now used in combination to create the web pages of today.

Since 2000 web developers have tried to separate the way web pages are developed using the three languages. This has given rise to the term Semantic Web.

Semantic Web

The web is now much more than just web pages, there are many programs which read a web page looking for information. Web developers are now using HTML to build Semantic Web Pages where the tags themselves have meaning beyond the markup. Tag such as nav, header, footer, section have been introduced into the latest version of HTML in response to this. These tags carry semantic meaning as they separate the page structure based upon its meaning. In this course we will concentrate on developing Semantic Web pages, which means that we will think very carefully about which tags we use and how they are used.

Watch this video which introduces the concept

Separation of a web page components

Good web developers separate the parts of the page using the languages of the web to do different tasks. Often these languages are in completely different files.

This course will focus on getting the HTML right, however we will work with both CSS and Javascript. CSS and Javascript will not be the focus of the course nor the assessments.

Browsers

The usual way to view a web page is using a browser, a program specifically written with the purpose of viewing pages written in the languages of the web. The main browser are:

Web developers tend to use Chrome and Firefox (with the Firebug extension) for developing because those browser provide tools which show the developer what is going on inside the browser. However good web developers develop pages which will work on all browsers and also on all mobile platforms (Iphone and Ipad, Android phones and tablets, Windows phones and tablets etc). This is not easy since it is possible to have a page look great on one device and not work well on others.

Names on the internet

In your computing so far you have been working with advanced operating systems (Windows or Mac OS) where the operating system has allowed you to use very long file names. On the Web the pages are stored on Web Servers and sent across the internet using web Routers, some of which use older operating systems. It is important to name your files so that they will also work properly on all these operating systems. This means:

  1. Names should be short with NO spaces, use underscores when you want the name to have more_than_a_single_word.
  2. The entry point to your web site has a special name and should be called index.html.
  3. All names should use only lowercase letters, you can use numbers (but don't start with a number).
  4. Avoid all punctuation, often these symbols are used by the operating system.

Good Resources

Assessment Part A is handed in Today