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
Chat / instant messagingVideo / audio streaming
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
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
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
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
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
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
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
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
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
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
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
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/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
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
Coursework 70% Final 5 weeks
So how do you mark up a table?
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
9/10
Tables
Wrap each whole row in a table row element
Test 1 15% Week 3Test 2 15% Week 10/11
Coursework 70% Final 5 weeks
Tables
Wrap each data item in a table data element
Test 1 15% Week 3
Test 2 15% Week 10/11
Coursework 70% Final 5 weeks
Tables
Example
8/8/2019 BB 1753 Lecture 1 Handouts 3 Grid
10/10
Tables
Test 1 15% Week 3
Test 2 15% Week 10/11
Coursework 70% Final 5 weeks
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
Coursework 70% Final 5 weeks
...use table heading element round eachheading
Tables
Example