M Dixon 1 Soft234 01 – Module Introduction and HTML.

33
M Dixon 1 Soft234 01 – Module Introduction and HTML

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

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

M Dixon 1

Soft23401 – Module Introduction

and HTML

Page 2: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 2

Web site

• All material (slides, handouts, etc.):

mdixon.soc.plymouth.ac.uk

• available before session

Page 3: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 3

About Me

• Contact DetailsMark [email protected] 586225Portland SquareRoom B316

• Availability

Mon, Tue, Wed, Thu – School of Computing Communications and Electronics (main campus)

Fri – other work (usually off-campus)

Page 4: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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.

Page 5: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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)

Page 6: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 6

Dynamic-Interactive Web-sites

Page 7: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 8: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 9: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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)

Page 10: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 10

Teaching Feedback

• Teaching Evaluation (timely and specific)

– Student Perception Questionnaire

– Continuous Informal Feedback (talk to me)

Page 11: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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 …

Page 12: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 13: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 13

Jobs

Page 14: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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/

Page 15: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 15

Page 16: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 16

Admin

• Attendance Register:– log in to your profile

Page 17: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 18: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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>

Page 19: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 20: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 21: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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>

Page 22: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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>

Page 23: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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:

Page 24: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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)

Page 25: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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)

Page 26: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 27: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 28: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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)

Page 29: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 29

Example: My Summer

My summer web-page

Page 30: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 31: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 32: M Dixon 1 Soft234 01 – Module Introduction and HTML.

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

Page 33: M Dixon 1 Soft234 01 – Module Introduction and HTML.

M Dixon 33

How To: Create Web-Site Project12. Clear all checkboxes13. Click Finish button

14. Edit code15. Run page (press Play button)