1. Introduction to HTML Hypertext Mark-up Language

2. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a web page in an editor providing you save it as a text file File extension: HTML or HTM

3. Enabling File Extensions Go to My Computer (if using Windows 7) Click Organise (top left) Select Folder & Search Options Click the View tab Untick Hide Extensions for known file types

4. File Extensions When creating web pages you need to see the file extension, e.g. homepage.html is a web page mystyle.css is a cascading style sheet myscript.js is a JavaScript file login.php is a PHP server-side script

5. Notepad Notepad – basic text editor (or right click inside a folder > New > Text document) Click Start > All Programs > Accessories > Notpad Also change setting to word wrap You can start creating a web page soon

6. Notepad Create a page, then use Save as Make sure file type set to All files

7. Notepad ++ Notepad ++ is an alternative freeware plain text editor which you can download on your home computer

8. Notepad ++ Set the language to HTML to make it colour coded when you type

9. Exercise Open Notepad ++, Notepad or use Dreamweaver Enter the following code: Basic introduction to HTML using Notepad to create web pages Hello World

10. Notepad ++ This the basic structure of a web page

11. Notepad ++ Type it and save the page as: index.html Create a folder to save your work as well

12. Notepad ++ Use Run > Launch menu to open in browser

13. Web page opened in browser Page opened up in browser - did you get it to work?

14. Web page opened in browser Notice where the and tag text go

15. Word Wrap Click the word wrap button so code wraps in window

16. Add more to page Replace Hello World with new text

17. Open in web browser Save. Click Run > Launch in Chrome

18. Change the background colour Edit the tag and try different colours

19. Open in web browser Save. Click Run > Launch in Chrome

20. Use Header & tag Notice the colours of the source code changing

21. Open in web browser Save. Click Run > Launch in Chrome. Notice the font change

22. Add a background image Save bg.gif into your folder as well

23. Open in web browser Save. Click Run > Launch in Chrome. Notice background repeats

24. Create a second web page Save the second page as web.html

25. Open 2 nd page in web browser Save. Click Run > Launch in Chrome. Click the link

26. Link on should go to 1 st page Save. Click Run > Launch in Chrome. Click the link to go back to first page

27. Add a picture to the page Save tim.jpg to your folder and add the tag

28. Add a picture to the page Check the image is on the page

29. Align picture left or right Although the professional way to align images is using CSS, you can align a picture using HTML To align using HTML, use the align=“left” or align=“right” attribute To add margin using HTML, use vspace or hspace attributes e.g.

30. Align picture left IMG SRC="tim.jpg" align=“left" hspace="20" vspace="20">

31. Align picture right IMG SRC="tim.jpg" align="right" hspace="20" vspace="20">

32. The CSS Method for aligning CSS = Cascading Style Sheet Using the STYLE attribute you can add CSS directly to the element (tag) Use FLOAT and MARGIN to align left or right and to add a gap around the image e.g.

33. ALT Attribute E.g.

34. ALT Attribute The ALT attribute is important for users who are unable see the images on the web page. ALT provides “alternative” text to the image E.g. A blind user would use a speech browser which “speaks” the page Large companies that do not provide ALT alternatives may be discriminating against some users Search engines also read ALT text so using them helps your site get found

35. ALT Attribute

36. General Questions Why is the element important? Is BODY an element (tag) or attribute? Name 2 file extensions for an image Can HTML be entered in lowercase letters? Does HTML recognise multiple spaces? How do you create an extra space? Which is the preferred method for aligning images (CSS or HTML)?