1. Mark Dixon Page 1 Soft234 01 – Module Introduction and HTML

2. Mark Dixon Page 2 Web site All material (slides, handouts, etc.): mdixon.soc.plymouth.ac.uk available before session

3. Mark Dixon Page 3 About Me Contact Details Mark Dixon mark.dixon@plymouth.ac.uk 01752 586225 Portland Square Room B316 Availability Mon, Tue, Wed, Thu – School of Computing Communications and Electronics (main campus) Fri – other work (usually off-campus)

4. Mark Dixon Page 4 Module Admin Lectures and tutorials: –start at 5 minutes past the hour, and –aim to end at 5 minutes to the hour –if no lecturer - wait until 15 minutes past the hour then you may leave –Turn mobile phones off. –Ask questions or comment at any time –Feel free to talk quietly amongst yourselves –No need to ask to leave (for toilet, doctor's, etc.) –Please use my first name Lectures: –Don’t come in after 15 minutes past the hour.

5. Mark Dixon Page 5 Module Aims provide grounding in web-application development –concepts: Client-Server architecture Request-Response cycle Sessions Persistent Data Storage (Databases) –technologies: HTML JavaScript Java Server Pages (JSP)

6. Mark Dixon Page 6 Dynamic-Interactive Web-sites

7. Mark Dixon Page 7 Module Format Lecture: 1 hr per week, all groups Tutorial: 1 hr per week lots of these (please check timetable) Private study (as much as it takes – typically 4 hours/week) 1 to 1 sessions (my office or labs) as needed at your request

8. Mark Dixon Page 8 Teaching Feedback Teaching Evaluation (timely and specific) –Student Perception Questionnaire –Continuous Informal Feedback (talk to me)

9. Mark Dixon Page 9 Timetable

10. Mark Dixon Page 10 Schedule (subject to change)

11. Mark Dixon Page 11 Assessment Module (100% cousework) –Coursework C1 – In-class Test(40%) C2 – Programming Assignment(60%) –No formal examination NetBeans 7.0.1 –download: Resources area of web-site (install JDK first, then NetBeans)

12. Mark Dixon Page 12 Questions My job is: –not to give you the answer –but to help you understand, so you can work it out yourself Asking the right Questions –it doesn't work! –I am working on … –I did … –I was expecting …

13. Mark Dixon Page 13 Attendance Attendance is compulsory and essential to pass This is not a distance learning course portal is supplement (not replacement) for attending lectures and tutorials

14. Mark Dixon Page 14 Jobs

15. Mark Dixon Page 15 Reading List Recommended reading: –Robbins J (2006) HTML & XHTML Pocket Reference (3rd edition). O'Reilly. ISBN: 978-0- 596-52727-3 –Flanagan D (2001) JavaScript Pocket Reference. O'Reilly. ISBN: 0-596-00411-7 –Gennick J (2006) SQL Pocket Guide (2nd edition). O'Reilly. ISBN: 978-0-596-52688-7 –HTML tutorial: http://www.w3.org/MarkUp/Guide/

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

17. Mark Dixon Page 17 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

18. Mark Dixon Page 18 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

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

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

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

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

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

24. Mark Dixon Page 24 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)

25. Mark Dixon Page 25 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)

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

27. Mark Dixon Page 27 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

28. Mark Dixon Page 28 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)

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

30. Mark Dixon Page 30 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: see ‘How To’ slides

31. Mark Dixon Page 31 How To: Create Web-Site Project 1. Click File menu 2. Click New Project menu item 3. Click Java Web item 4. Click Web Application item 5. Click Next button

32. Mark Dixon Page 32 How To: Create Web-Site Project 6. Type Project Name in textbox 7. Click Browse button, and select location 8. Click Next button 9. Select Apache Tomcat 10. Select Java EE 6 11. Click Next button

33. Mark Dixon Page 33 How To: Create Web-Site Project 12. Clear all checkboxes 13. Click Finish button 14. Edit code 15. Run page (press Play button)