BB 1753 Lecture 1 Handouts 3 Grid

8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid

1/10

Questions

Who has used the World Wide Web?

When was the first web site published?

1971 1981 1991 2001

World Wide Web WWW

Many people perceive the WWW as the Internet

...actually a set ofconnected computers

Browser

running a varie ty of applications

Mail

Chat / instant messagingVideo / audio streaming


2/10

So what is the World Wide Web?

User generated content

Software

Hardware

Web pages

Browsers / Web Servers

Computers, net workdevices, cables

A combination of ...

So what is the World Wide Web?

Text

Web pages

Pictures

Links to other pages- hyperlinks

But what e lse? ... Forms

Textboxesandbuttons

Radiobuttons


3/10

An editor that can produce text f iles

Tools required to create web pages

A browser to view (and check) the pages

Notepad, WinEdt, HTMLkit NOT Word !

Interne t Explorer (common but poor quali ty)

Safari , Firefox, Opera

Example

Loading it into a browser locally

Creating and saving a simple file

Plain text files

Only contains the characters entered at thekeyboard

Can be produced in a variety of editors

The most common file type, as all web pages are

plain text files


4/10

So how can we add formatting?

HTML - Hypertext Markup Language

Example making some of the text Italicusing emphasis -

Add Markup

Done by adding tags to a plain text document

So what is HTML?

Area that tag is applied to

In markup languages tags are called elements

A way to add display st ructure and des ign to adocument using markup

Programmerscreate and wri tesoftware

Many people confuse creating web pages withprogramming

Creating web content is more liketraditional word processing use the termauthoring


5/10

HTML documentbasic structure

Indicates the start ofthe HTML document

Indicates the end of theHTML document

head of the document

Can be blank or missing

Normally contains informationaboutthe document calledmeta information

Normally nothing here willbe displayed aside from the element - used tocontrol the text at the top ofthe browser

Its good practice to add comments to your fi le

Comments

Not displayed in the browser window

Use this notat ion


6/10

Example:

Welcome to my Web page

Contains all the text,elements and links that

will be displayed Some basic elements ,,,

, ,

body of the document

Heading st yles rendered from large to small inorder of importance

Heading elements ..

Important heading

Slightly less important heading

Another subheading


7/10

Every distinct paragraph should be a paragraphelement

Paragraph elements

,

Important heading

Some information in a paragraph.

Another paragraph.

The browser inserts default spacing between theparagraphs (and the headings where appropriate)

Use elements to make text important

Some other e lements

You may wish to select button one but do

not select button two

Use elements to make text standou t

You may wish to select button one but do not select

button two

Most elements are pairs ofstartand end tags

Notes

Important heading

Some information in a paragraph.

Another paragraph.

Butsomedont! Called empty elements

Theimageelement - will bediscussed next week


8/10

Notes

The text inside the tag indicates the name andpurpose of the tag, called thelabel

Important heading

Theh1 heading label

HTML was originally designed to display plain textin a variable width browser

so creat ing paragraphs and insert ing lines not asstraight forward as pressing return in Word

Tables

Test 1 15% Week 3

Test 2 15% Week 10/11

Coursework 70% Final 5 weeks

A major way of structuring text

Column Column Column

Row

Row

Row

May have border round each cell , ... or not

Tables

Wrap the whole table in a element

Test 1 15% Week 3

Test 2 15% Week 10/11


So how do you mark up a table?


9/10

Tables

Wrap each whole row in a table row element

Test 1 15% Week 3Test 2 15% Week 10/11


Tables

Wrap each data item in a table data element

Test 1 15% Week 3

Test 2 15% Week 10/11


Tables

Example


10/10

Tables

Test 1 15% Week 3

Test 2 15% Week 10/11


Assessment Weighting Date

To add headings to each column, create a newrow ...

Tables

Assessment Weighting Date

Test 1 15% Week 3

Test 2 15% Week 10/11


...use table heading element round eachheading

Tables

Example

BB 1753 Lecture 1 Handouts 3 Grid

Documents

Transcript of BB 1753 Lecture 1 Handouts 3 Grid