HTML Computing Concepts HTML - An Introduction 1

Context HTML assignment Four lectures – Introduction to the Internet – Basic tags – Images and links – Tables and style Self study materials 2

Aims Give an introduction to HTML Enough to produce at least 4 linked pages containing graphics – Much more in Levels I or H 3

Learning outcomes HTML – Basic document – Attributes – A selection of tags explained – Problem solving 4

Today Web standards Basic tags Attributes Text Colours Problem solving 5

Review 1.How do you plan your website? 2.What is the difference between the Internet and the WWW? 3.Who set standards for the Web? 4.What does HTML stand for? 5.What is the current version of HTML? 6

Answers 1.Look at other sites for ideas, make a list of tasks, draw a Gantt chart, collect content 2.The Internet is a network of networks – The WWW uses the Internet 3.W3C - the World Wide Web Consortium 4.Hyper Text Markup Language 5.The latest HTML standard is XHTML 1.0 – You will be learning an older version HTML4.01 7

HTML HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags An HTML file must have an htm or html file extension – Does not matter which, just be consistent 8

XHTML Latest standard for HTML Stands for EXtensible HyperText Markup Language Is aimed to replace HTML Almost identical to HTML 4.01 Stricter and cleaner version of HTML – Will not tolerate mistakes or sloppy code – Taught in Level I & H 9

Writing HTML An HTML file can be created using a simple text editor – Notepad – You will use this to create your web pages It is strongly recommended that you learn HTML with a simple text editor 10

HTML editors Other editors are WYSIWYG – What You See Is What You Get FrontPage Dreamweaver 11

HTML Tags HTML tags are surrounded by angle brackets HTML tags normally come in pairs like and – The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content 12

13

14

Your page title goes here 15

Your page content goes here 16

A basic document 1.The start/end of an HTML document. 2.Header information is not displayed in the browser window. 3.The title is displayed in your browser's caption 4.The content that will be displayed in your browser 5.Text element

How many wrong things? 18 Right Wrong

Why lowercase tags? HTML tags are not case sensitive, means the same as W3C recommends lowercase tags in HTML4 XHTML (the next generation HTML) demands lowercase tags 19

Layout in Notepad Use indents to identify a block in an element Use a new line for new items or element – This is known as white space – Browsers ignore white space – Browsers autoflow text – Use tags to tell the browser to use a new line 20

Layout example Level C Learning HTML About layout 21

Headings Headings are defined with the to tags. This is a heading This is a heading HTML automatically adds an extra blank line before and after a heading. 22

Paragraphs Paragraphs are defined with the tag. This is a paragraph This is another paragraph Paragraphs are text elements An extra blank line is added before and after the paragraph 23

Line Breaks The tag forces a line break wherever you place it. This is a line break The tag is an empty tag – It has no closing tag and does not form a text element. 24

Tag attributes Tags can have attributes. – Provide additional information about the HTML elements on your page Attributes always come in name/value pairs name="value" Attributes are always added to the start tag of an HTML element This is a heading 25

Aligning attribute A heading Apply to an element such as paragraph or heading Use a tag to align more than one element Paragraphs and headings 26 Spelling

How many things wrong? Mistakes align=right Hello How many mistakes? Mistakes Hello How many mistakes? 27 WrongRight

Text – Text in this tag is displayed in italic by the browser – Text in this tag is displayed in bold by the browser. – Text in this tag is displayed exactly as it formatted in your HTML editor (Notepad) 28

Nesting of tags Bad code Good code 29

HTML colours Colours are displayed combining red, green, and blue light sources Hexadecimal, eg #0000FF Colour names, eg blue Does not matter which you use, but more choice with hexadecimal numbers 30

A selection of colours Black# Green # Silver#C0C0C0 Lime #00FF00 Grey# Olive # White#FFFFFF Yellow #FFFF00 Maroon# Navy # Red#FF0000 Blue #0000FF Purple# Teal # Fuschia#FF00FF Aqua #00FFFF 31

Body Attributes Attributes – bgcolor - colour of the background – text - colour of the text – link - colour of unvisited links – alink - colour of active links – vlink - colour of visited links 32 Spelling If you do not give any colours what colours does the browser use?

Unordered lists Level C Level I Level H Level C Level I Level H 33

Ordered lists Level C Level I Level H 1.Level C 2.Level I 3.Level H 34

Character Entities Space or   Copyright © © or © < less than < or < > greater than > or > “ quotation mark " or " ‘ apostrophe ' 35

How many things wrong? Mistakes bgcolour=“blue> Level C Level I Level H Mistakes Level C Level I Level H 36 WrongRight

Problems with files? Check where the file is being saved – Are you viewing the same file that you are currently working on? Check the file extension – Have you saved it as.htm or.html? 37

Problems with code? Look for pairs of angled brackets <> Check nesting of tags Check your spelling of tags Check quotation marks used with attributes are closed 38

Further Reading Tutorial – highly recommended – Reference – Beginners book – Mac Bride, Teach Yourself HTML Publishing on the World Wide Web (Teach Yourself) January 2003;Hodder Arnold Teach Yourself; ISBN: , 39

Review HTML – Web Standards – Basic document – Attributes – A selection of tags explained – Problem solving Next lecture Images Linking to other documents Good code 40

What now? Practice, practice and practice Seminars and Supported Sessions 41