WWW and HTML

-

In this session we briefly looked at the historical evolution of the World Wide Web and HTML.

Here is a copy of the presentation.

Here is a summary of basic HTML tags used to create a simple webpage.


1. Basic structure of an HTML Document

The following tags form the overall structure of an HTML document.

<html></html> to start and end an HTML document.

<head></head> to define meta-data about the document.

<title>My webpage title</title> to define the title shown in the browser title bar.

<body>My website content</body> for the visible content of your page.

Get further practice here

2. Text formatting

The following tags are used to format text.

i) <p>some text</p> : to create and end paragraphs.

ii) <em>some text</em> : to create italic text.

iii) <strong>some text</strong> : to create bold text.

iv) <br ⁄>to create line breaks. For example, here
is a line break. And here's
another.

3. Creating Lists

Creating lists is easy, once you know how. There are two main types of list you can create:

  • ordered (numbered) lists; and
  • unordered (bullet) lists.

1. Numbered (ordered) lists are like this:

  1. Item one
  2. Item two
  3. Item three
  4. etc...

The code to create one of these is as follows:

<ol>
<li>text of list item 1</li>
<li>text of list item 2</li>
</ol>

2. Bullet (unordered) lists are like this:

  • Item one
  • Item two
  • Item three
  • etc...

The code to create one of these is as follows:

<ul>
<li>text of first item</li>
<li>text of second item</li>
</ul>
Get further practice here

4. Using Headings and Horizontal lines

Headings and horizontal lines are as follows:

(i) <h1>some text</h1>: for

 large (level 1) headings

(ii) <h2>some text</h2>: for

  slightly smaller (level 2) headings

(iii) <h3>some text</h3>: for

   even smaller (level 3) headings

(iv) <h4>some text</h4>: for

    yet smaller (level 4) headings.

Get further practice here

(v) <hr /> for creating horizontal lines across our page.

5. Including links in pages

Links are formed using the <a> tag:

<a href="http://www.some-website.com">Link Text </a> for creating links.
For example:
http://www.ascilite.org.au/ajet/ajet11/oliver.html
Get further practice here

6. Incorporating special alphanumeric characters in HTML

Including special characters in your HTML code is best done using this structure: &#xxxx; (where 'x' is a decimal number).
That is, ampersand + hash + number + semi-colon. For example:

&#0231; = ç
&#0223; = ß
&#0232; = è
&#0241; = ñ
&#0169; = ©

For more information see: here; here; and here.

Homework

Study HTML and practise creating further content and links in your pages. Use the w3schools tutorials to help you: http://www.w3schools.com/html5/default.asp

Remember: there are lots of sites offering tutorials in HTML!! The best way to learn is to practise!

SML209: Computers and Languages. Unit 4. Website Design 2. M Barge. Updated January 2012.

Comments

Post a Comment

Popular posts from this blog

Computers have learned to make us jump through hoops

-
Image
John Naughton , writing in the Observer (18th November 2018) explains that the acronym CAPTCHA means 'Completely Automated Public Turing test to tell Computers and Humans Apart'.  In the Turing Test , a human interrogates two interlocutors - one human, one machine - and based on the interlocutors' responses, the human interrogator has to determine whether she is conversing with a machine or a human.  In other words, to what extent can a machine understand and utter human language patterns? Naughton argues, however, that the Turing Test has been turned on its head, and it is now machines asking we humans to prove that we are not machines.   He further explains that image-based CAPTCHA, like the one shown below, are being used to train machine-learning algorithms for driver-less cars. So we humans are training the machines, and as such we are being used as unpaid labour. Read the article online here
Read more

Can you tell whether you are talking to a human or a chatbot?

-
Image
In ' The charge of the chatbots: how do you tell who’s human online? ', published in the Observer newspaper November 18th 2018, Tim Adams reports on advances in artificial intelligence in the field of human-computer conversation. Some of the main points he makes are: 1. Advances in technology are creating chatbots that mimic human behaviour to a sophisticated extent:  “The ability of bots – a term which can describe any automated process present in a computer network – to mimic human online behaviour and language has developed sharply in the past three years.” 2. One dimension of the effectiveness of these entities is the human tendency to put our trust in other human voices: "these creations can exploit our tendency to ascribe trusted human characteristics to voices even if, on a rational level, we suspect that they are artificial. That psychology is as old as electronic communication itself." 3. The first such chatbot was developed in the USA in ...
Read more

Social Networking under Attack

-
'The Guardian' recently ran an interesting article about a current trend of criticism of social networking technologies (e.g. websites such as Twitter and Facebook).  Read the article here The arguments include claims that social networking makes us lazier, less able to digest large quantities of information, and less human. An example: we go into a cafe and see people sitting at their laptops or tapping away on their mobile devices, whilst not actually talking to the people around them. So in effect, ignoring the real people around them, and focusing instead on communicating with others through electronic devices. Those who disagree with these arguments state that social networking actually increases communication and helps to bridge geographical distances. They also argue that it is simply not true that people used to chat with those around them more before these new technologies existed. So the question is: did people really used to chat to each other more (on buses a...
Read more