Post on 16-Jan-2016
M Dixon 1
Soft23401 – Module Introduction
and HTML
M Dixon 2
Web site
• All material (slides, handouts, etc.):
mdixon.soc.plymouth.ac.uk
• available before session
M Dixon 3
About Me
• Contact DetailsMark Dixonmark.dixon@plymouth.ac.uk01752 586225Portland SquareRoom B316
• Availability
Mon, Tue, Wed, Thu – School of Computing Communications and Electronics (main campus)
Fri – other work (usually off-campus)
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.
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)
M Dixon 7
Schedule (subject to change)Lecture Start Title Assessment
No. Date1 24-Sep Module Introduction + HTML2 01-Oct JSP: Intro3 08-Oct Coursework brief4 15-Oct JSP: State C2 out5 22-Oct JSP: Modular Design6 29-Oct JSP: Object Oriented Programming7 05-Nov In-class Test C18 12-Nov JSP: Databases – ADO
– SQL9 19-Nov JSP: Databases – Multiple tables
10 26-Nov JSP: Databases – Writing to tables11 03-Dec -12 10-Dec - C2 in
M Dixon 8
Timetable
• Lecture/Tutorial: 2 hrs per week
• Private study (as much as it takes – typically 4 hours/week)
09:05 - 09:55 10:05 - 10:55 11:05 - 11:55 12:05 - 12:55 13:05 - 13:55 14:05 - 14:55 15:05 - 15:55 16:05 - 16:55 17:05 - 17:55
MonSoft234
Lecture/TutorialSMB109
Tue
Wed
Thu
Fri
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)
M Dixon 10
Teaching Feedback
• Teaching Evaluation (timely and specific)
– Student Perception Questionnaire
– Continuous Informal Feedback (talk to me)
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 …
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
M Dixon 13
Jobs
M Dixon 14
Reading ListRecommended 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/
M Dixon 15
M Dixon 16
Admin
• Attendance Register:– log in to your profile
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
M Dixon 18
HTML: Elements & Tags
• Hyper-Text Markup Language
• text files – edited with notepad
• tags, e.g. <b> <html> </a>
• element = start tag + content + end tag– bold: <b>This will be in bold</b>– italic: <i>This will be in italic</i>
• work like brackets– start/open <b> <i>– end/close </b> </i>
M Dixon 19
Questions: Tags
How many tags are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
4
6
M Dixon 20
Questions: Elements
How many elements are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
2
3
M Dixon 21
HTML: Nesting Elements
• Nesting – puts one element inside another:
<b><i>Hello</i></b>
• Cannot overlap elements:
<b><i>Hello</b></i>
M Dixon 22
Questions: HTML Elements
Which of the following are valid elements?
<center><b>Title</b>
<head><title></title></head>
<p>Good <b>morning.</p></b>
<body><i>Soft</i><b>131</b></body>
M Dixon 23
HTML: page structure
<html> <head> <title>Test</title> </head> <body> <p>This is a test <b>page</b>.</p> </body></html>
head(info)
body(content)
• every HTML page has 2 sections:
M Dixon 24
<html><head><title>Test</title></head><body><p>This is a test <b>page</b>.</p></body></html>
• spaces are used to move lines in from left
• helps see structure
Indentation
<html> <head> <title>Test</title> </head> <body> <p>This is a test <b>page</b>.</p> </body></html>
head(is inside html)
title(is inside head)
M Dixon 25
HTML: Attributes
• Some tags need extra information to work:– Anchor (hyper-link) element:
<a href=“nextpage.htm”>Next Page</a>
– Image element: <img src=“Beach.jpg” />
– Embedded object element: <embed src=“Music.mp3”></embed>
attribute (page to jump to)
attribute (filename of picture to display)
attribute (filename of music to play)
M Dixon 26
• Attributes go inside the start tag:
<a href=“nextpage.htm”>Next Page</a>
• not anywhere else
<a>href=“nextpage.htm”Next Page</a>
HTML: Attributes (where)
attribute
start tag
start tag
M Dixon 27
Questions: HTML attributes
Consider the following HTML:<a href="next.htm">Next Page</a>
a) Give an example of an attribute
b) Is the following an attribute? <img src=“House.jpg” />
c) How many attributes are there in: <font color=“green” size="3">
href="next.htm"
No (tag)
2
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:– <p>: new paragraph– <b>: bold text– <i>: italic text– <a>: anchor (link) to another web page– <img>: image/picture (.bmp, .jpg, .gif)– <embed>: embedded object (.avi .mpg .wav .mp3)
M Dixon 29
Example: My Summer
My summer web-page
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
M Dixon 31
How To: Create Web-Site Project1. Click File menu2. Click New Project menu item
3. Click Java Web item4. Click Web Application item5. Click Next button
M Dixon 32
How To: Create Web-Site Project6. Type Project Name in textbox7. Click Browse button, and select location8. Click Next button
9. Select Apache Tomcat10. Select Java EE 611. Click Next button
M Dixon 33
How To: Create Web-Site Project12. Clear all checkboxes13. Click Finish button
14. Edit code15. Run page (press Play button)