1. Amber Annett David Bell October 13 th, 2011

2. What will happen What is this business about personal web pages? Designated location of your own web page. Introduction to HTML (Hyper Text Markup Language) Writing your own HTML Make your web page! Recurring Theme for Today: “It’s Simple!”

3. Part 1 - Lets take a quick look: Open your internet browser (Internet Explorer and Mozilla Firefox are examples of an internet browser) Type in the following address (URL): http://www.geos.ed.ac.uk/homes http://www.geos.ed.ac.uk/homes So let’s take a look at what your screen looks like…

4. Part 1 - Lets take a quick look:

5. Address (URL) Login Here List of People and Their Pages

6. Part 1 - Lets take a quick look:

9. Part 2 – Basic HTML Very simple “code” that can allow you to create simple yet informative web pages perfect for a university setting. First point you should pay attention to, when learning HTML is…..

10. Part 2 – Basic HTML The basics are quite simple… Don’t panic: simple commands can be learned in minutes! Don’t worry: it is very hard to actually “break” something Don’t freak out!

11. Part 2 – Basic HTML HTML can be written in any text editor such as notepad or word pad directly on the University editing page shown before When working with an external editor, note that HTML code should be saved in.html or directly copy- pasted into the University editor for testing Basic building blocks to create your web page…

12. Part 2 – Basic HTML HTML is written with “Tags” Tags have a very simple characteristic to recognize and remember: Start: (e.g. ) Stop : (e.g. ) Example: This is my Title Congratulations, you now know the foundation for all HTML programming! Let’s take a look at some real tags to see what they do:

13. Part 2 – Basic HTML A very simple webpage in notepad would look something like this: Welcome Hello world! Matthew Rules!!!

14. Part 2 – Basic HTML

15. Part 2 – Basic HTML: Lets See What We Can Do Now! HTML files contain HTML Elements (Sequences of Tags) Elements normally have two tags around text text Empty elements e.g. horizontal rule Elements with attributes, e.g. formatting: Centred heading HTML not case sensitive Be consistent for clarity Links may be case sensitive

16. Part 2 – Basic HTML: Lets See What We Can Do Now! The Browser creates its own space Space created around headings Space created between paragraphs White space in HTML is reduced to single space There are no carriage returns tabs or multiple spaces

17. Part 2 – Basic HTML: Lets See What We Can Do Now! Character formatting – It’s so simple! Logical Styles (preferred – Browser decides how to display) Emphasis Strong emphasis Physical Styles Italics Bold Underline ? What do you think this would be? Comments

18. Part 2 – Basic HTML: Lets See What We Can Do Now! Horizontal Rule Adds horizontal line across screen Line Break Starts new line without white space

19. Part 2 – Basic HTML: Lets See What We Can Do Now! An unordered list first item (Note: the tag is not required) second item third item An ordered list first item second item third item first item second item third item 1 first item 2 second item 3 third item

20. Part 2 – Basic HTML: Lets See What We Can Do Now! Definition of Table Your text More text Your text Start of first row First cell Second cell End of first row

21. Part 2 – Basic HTML: Put it Together Welcome Hello world! Matthew Rules!!! Hi Mom Miss You HTML IS SIMPLE!

22. Part 2 – Basic HTML: Lets See What We Can Do Now! Anchor element (URL is a Web Page Address) Text shown as a link Target or Location to link to Put this at the top of the page: A link to a point within the same HTML page e.g. put this at the bottom of the page: Go to top of page

23. Part 2 – Basic HTML: Lets See What We Can Do Now! Full (or Absolute) URL Server name included so file can be on any server NEWS Pages on a different Web site should be opened in a new window: NEWS

24. Part 2 – Basic HTML: Lets See What We Can Do Now! Image tag No closing element Attributes SRC specifies name and location of a file ALT alternative text be displayed if image does not display File types (more info available on web).gif(for diagrams with large areas of single colours).jpg(for photographs)

25. Part 2 – Basic HTML: Lets See What We Can Do Now! BORDER Specifies the width of the image border in pixels WIDTH and HEIGHT Specify the size of the image in screen pixels It is better to reduce the number of pixels! ALIGN sets position to LEFT, RIGHT, etc. <IMG SRC=“images/matthew.jpg" ALT=“Matt on top of Blackford Hill“ TITLE=“Blackford Hill” BORDER="0" ALIGN=RIGHT WIDTH=300 HEIGHT=500>

26. Part 3 – Lets Build Something! This is where you can write your HTML

27. Part 3 – Lets Build Something! A “Word” kind of Editor [Doesn’t Always Work!]

28. Part 3 – Lets Build Something! This is where you can add/remove/modify Menu Items

29. Part 3 – Lets Build Something! Folder creation for storing and organizing files

30. Part 3 – Lets Build Something! Making a new page for more HTML and menu items

31. Part 3 – Lets Build Something! Adding Images/Pictures to include in your site

32. Part 3 – Lets Build Something! Add a file to your site (good for downloading) Eg: PDF file

33. Part 3 – Lets Build Something! Lets modify code!

34. Part 3 – Lets Build Something! What does this look like?

35. Part 3 – Lets Build Something! What does this look like?

36. Part 3 – Lets Build Something! What does this look like?

37. Part 3 – Lets Build Something! What does this look like? Not in the menu yet! The editor

38. Part 3 – Lets Build Something!

43. Finally – Best Practices Don't use image files that are more than ca 150 k. 300 x 300 pixels should be adequate Use jpeg compression to reduce file size Don't use images unless you have full copyright permission Create links to other people's images on the Web but don't steal them! Include acknowledgements in the ALT text

44. Finally – Best Practices HTML must conform to the standard Use HTML version 4.0 or 4.01 avoid non-standard HTML Use an HTML validator, e.g. http://validator.w3.org/ http://validator.w3.org/ Display your page in Internet Explorer Select menu: View / Source Select Edit / Select All, then Edit / Copy This copies all of your HTML plus all the additional HTML added by Zope (i.e. the GeoSciences banner, the menus, etc.) to the clipboard Go to http://validator.w3.org/http://validator.w3.org/ Paste your document int the “Validate by Direct Input” box Press “Check” Correct any errors and repeat. Note there may be errors in the Zope headers that you cannot edit.

45. Finally - Construct Your Web Page cf. https://www.geos.ed.ac.uk/website/editweb/