Writing Web Pages ITW009 Introducing HTML Fiona Stroud 9:30am - 12:30pm

Workshop overview IT13 –Using HTML (V4 and also V5.0) Learning to implement the HTML Tags necessary to create and edit a web page

By the end of this session, you should be able to… Explain the working principles of HTML 4.1 and 5 Encode a simple page in HTML using a text editor Maintain and contribute to a web page Locate HTML training resources

Workshop Overview –Basic format –Manipulating lines –Headings –Manipulating text –Making lists –Making links –Images –Colour –Font Manipulation –Tables –Section 1-5 –Section 6 –Section 7 –Section 8 –Section 9 –Section 10 –Section 11 –Section 12 –Section 13 –Section 14 Editing Your Practice Page

The HTML Environment You will need - A browser – e.g. Firefox or Internet Explorer An editor - –preferably an ASCII text editor e.g. Notepad, or... –dedicated HTML editing software Arachnophilia - a real HTML editor, Time - Lots and lots of time!

HTML: Facts about Tags Html pages defined by tags, syntax includes less than symbols HTML tags are usually English words, often with American spelling Tags generally travel in pairs –opening tag –closing tag Tags can contain 3 types of information- –text structure, –Page & text formatting and –information not visible on the page

Creating a new web page head body html There are 3 tags necessary to create the simplest web page…

To start your page… Go to Notepad… Type the tags shown below

Other Tags required NOW SAVE YOUR FILE AS Yourname.html Yourname.html

Viewing your web page Open your file in a browser –In menu bar select File, Open file… 1. Save file: CTRL S or from menubar 2. Switch to Browser: Alt+Tab or taskpane 3. Refresh: F5 or from toolbar To check changes as you work:

Adding page information My first web page

Adding page information This is a good start NOW SAVE YOUR FILE NOW SAVE YOUR FILE

Viewing your web page 1. Save file: CTRL S or from menubar 2. Switch to Browser: Alt+Tab or taskpane 3. Refresh: F5 or from toolbar To view your changes:

Using HTML Editing Your Practice Page - 1.Basic format 2.Manipulating lines and spaces 3.Headings 4.Manipulating text 5.Making lists 6.Making links 7.Colours and images 8.Tables

Using HTML –Basic format –Manipulating lines and spaces –Headings –Manipulating text –Making lists –Making links –Colours and images –Tables –Section 1-5 –Section 6 –Section 7 –Section 8 –Section 9 –Section 10 –Section 11 –Section 12 Editing Your Practice Page