1. M Dixon 1 Soft234 01 – Module Introduction and HTML

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

3. M Dixon 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. M Dixon 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. M Dixon 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. M Dixon 6 Dynamic-Interactive Web-sites

7. M Dixon 7 Schedule (subject to change)

8. M Dixon 8 Timetable Lecture/Tutorial: 2 hrs per week Private study (as much as it takes – typically 4 hours/week)

9. M Dixon 9 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)

10. M Dixon 10 Teaching Feedback Teaching Evaluation (timely and specific) –Student Perception Questionnaire –Continuous Informal Feedback (talk to me)

11. M Dixon 11 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 …

12. M Dixon 12 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

13. M Dixon 13 Jobs

14. M Dixon 14 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/

15. M Dixon 15

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

17. M Dixon 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. M Dixon 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. M Dixon 19 Questions: Tags How many tags are in the following: Hello Soft 131 4 6

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

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

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

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

24. M Dixon 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. M Dixon 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. M Dixon 26 Attributes go inside the start tag: Next Page not anywhere else href=“nextpage.htm”Next Page HTML: Attributes (where) attribute start tag 

27. M Dixon 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. M Dixon 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. M Dixon 29 Example: My Summer My summer web-page

30. M Dixon 30 Tutorial Exercise: 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. M Dixon 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. M Dixon 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. M Dixon 33 How To: Create Web-Site Project 12. Clear all checkboxes 13. Click Finish button 14. Edit code 15. Run page (press Play button)