1. Mark Dixon Page 1 Soft131 02 – HTML

2. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile

3. Mark Dixon Page 3 Session Aims & Objectives Aims –introduce you to the fundamental aspects of web pages (HTML) Objectives, after this week’s sessions, you should be able to: –identify how many tags are in a block of html –identify how many elements are in a block of html –identify nested html elements –generate html for basic tasks, e.g. bold, italic, centred text images

4. Mark Dixon Page 4 HTML: Elements & Tags Hyper-Text Markup Language text files – edited with notepad tags, e.g. element = start tag + content + end tag –bold: This will be in bold –italic: This will be in italic work like brackets –start/open –end/close

5. Mark Dixon Page 5 Questions: Tags How many tags are in the following: Hello Soft 131 4 6

6. Mark Dixon Page 6 Questions: Elements How many elements are in the following: Hello Soft 131 2 3

7. Mark Dixon Page 7 HTML: Nesting Elements Nesting – puts one element inside another: Hello Cannot overlap elements: Hello 

8. Mark Dixon Page 8 Questions: HTML Elements Which of the following are valid elements? Title Good morning. Soft 131  

9. Mark Dixon Page 9 HTML: page structure Test This is a test page. head (info) body (content) every HTML page has 2 sections:

10. Mark Dixon Page 10 Test This is a test page. spaces are used to move lines in from left helps see structure Indentation Test This is a test page. head (is inside html) title (is inside head)

11. Mark Dixon Page 11 HTML: Attributes Some tags need extra information to work: –Anchor (hyper-link) element: Next Page –Image element: –Embedded object element: attribute (page to jump to) attribute (filename of picture to display) attribute (filename of music to play)

12. Mark Dixon Page 12 Attributes go inside the start tag: Next Page not anywhere else href=“nextpage.htm”Next Page HTML: Attributes (where) attribute start tag 

13. Mark Dixon Page 13 Questions: HTML attributes Consider the following HTML: Next Page a)Give an example of an attribute b)Is the following an attribute? c)How many attributes are there in: href="next.htm" No (tag) 2

14. Mark Dixon Page 14 HTML Tags: Reference Lots of info available on-line, e.g.: http://www.willcam.com/cmat/html/crossref.html Short list of tags: – : new paragraph – : bold text – : italic text – : anchor (link) to another web page – : image/picture (.bmp,.jpg,.gif) – : embedded object (.avi.mpg.wav.mp3)

15. Mark Dixon Page 15 Example: My Summer My summer web-page

16. Mark Dixon Page 16 Start WAMPServer Click Start WAMPServer icon

17. Mark Dixon Page 17 NetBeans: New Project Click File Menu Click New Project

18. Mark Dixon Page 18 NetBeans: New Project Select PHP Application Click Next button

19. Mark Dixon Page 19 NetBeans: New Project Change Project Name Change Folder (Click Browse Button)

20. Mark Dixon Page 20 NetBeans: New Project Change URL to localhost:8080 Copy Files to C:\wamp\www…

21. Mark Dixon Page 21 NetBeans: New Project

22. Mark Dixon Page 22 NetBeans: Delete index.php right click index.php, click delete item

23. Mark Dixon Page 23 NetBeans: Add html file right click Source Files, click HTML file item

24. Mark Dixon Page 24 Tutorial Exercise 1: My Summer LEARNING OBJECTIVE: to understand tags, elements, and attributes, so that you can create your own web-pages using NetBeans TASK: Create a ‘My Summer’ web page, which describes the highlights of what you did over the summer, including text, pictures, and sound. Hint: Create a new web site within NetBeans. Create a new web page within you web site.