Soft 051 01 Module Introduction HTML Mark Dixon

Soft 051 01 – Module Introduction + HTML Mark Dixon Page 1

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

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

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

Module Aims • This module aims to teach you, how to: – learn • surface learning (memorisation of isolated facts): hacking • deep learning (interrelated concepts) • includes interacting with others (lecturers, students, …) – develop software: • fundamental programming concepts (e. g. events, procedures) • how to combine these to solve problems – use Visual BASIC Mark Dixon Page 5

Driving, IT, and Computing Driver Mechanic Designer User IT Support Developer install + fix technology create + build invent technology use car use technology School ICT GCSE/A level Mark Dixon fix car invent car University Computing Degrees Page 6

Demo: Balls Mark Dixon Page 7

Demo: Shoot Mark Dixon Page 8

Example: Student Loan • How much do I pay back? www. studentsupportdirect. co. uk (salary – 21000) × 9% Mark Dixon Page 9

Module Format • Lecture: 1 hr per week, all groups • Tutorials / Practical Session: 2 hr per week lots of these (please check timetable) • Private study (as much as it takes – typically 3 hours/week) • Teaching Evaluation (timely and specific) – Student Perception Questionnaire – Continuous Informal Feedback (talk to me) Mark Dixon Page 10

Timetable • • Tutorial 1 – Computing Tutorial 4 – Maths & Stats Tutorial 3 – Computing Tutorial 2 – Computing Mark Dixon Page 11

Schedule (subject to change) Mark Dixon Page 12

Assessment • Module (average) – Coursework (average) • C 1 - Term 1 (25%) • C 2 - Term 2 (25%) – Tests (average) • T 1 - Term 1 (25%) • T 2 - Term 2 (25%) • Pass: >= 40% module average AND >= 30% coursework average AND >= 30% test average Mark Dixon Page 13

Surface vs. Deep Learning • For example, remember Learning to add up Surface Approach memorise all combinations Deep Approach understand theory 1+1=2 1+2=3 1+3=4 … 2+3=5 … 734 + 243 = 977 10 9 8 7 6 5 4 3 2 1 0 Mark Dixon 2+3=5 Page 14

Questions • My job is: – to fix your understanding (not your code) – 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 … Mark Dixon Page 15

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 Mark Dixon Page 16

Student Background • Typically wide range of prior experience A. B. C. D. E. 10 years programming (professional? ) 5 years programming (professional? ) 2 years programming (learning? ) 1 year programming (learning) no programming number of students A • B C D E Can be difficult to cater for all Mark Dixon Page 17

Previous Year • 36 students – offered 1 to 1 sessions after assignment 1 – all who did this passed • 14 failed initially (38%) – large number of non-submissions • everyone who attended - passed • everyone who submitted - passed Mark Dixon Page 18

Strategy for Success • Most failures: – tried to do it on their own • missed many lectures and tutorials • didn’t ask questions • didn't come and see me with problems • To pass module – attend lectures and tutorials (if you miss a session – see me – I will help) – ask questions Mark Dixon Page 19

Student Feedback • feedback form – filled in by students – handed in with assignment • this student: – failed (low attendance, low contact with me) – did referred work (over summer) – passed Mark Dixon Page 20

Admin – free software • MS Visual Studio 2012, includes • Visual Web Developer 2012 • Visual BASIC 2012 • Visual C# 2012 • Download: http: //www. tech. plymouth. ac. uk/msdnaa/ • Local download in SMB 109 (faster) Mark Dixon Page 21

Jobs Mark Dixon Page 22

Reading List 1 The following book is recommended reading: – Robbins J (2006) HTML & XHTML Pocket Reference (3 rd edition). O'Reilly. ISBN: 978 -0 -596 -52727 -3 – Childs M, Lomax P, & Petrusha R (2001) VBScript Pocket Reference. O'Reilly. ISBN: 978 -0 -596 -00126 -1 – Gennick J (2006) SQL Pocket Guide (2 nd edition). O'Reilly. ISBN: 978 -0 -596 -52688 -7 – Kingsley-Hughes, and Read (2004) VBScript (2 nd Edition). Wiley Publishing Inc. ISBN: 0 -7645 -5993 -1 Mark Dixon Page 23

Mark Dixon Page 24

Admin • Attendance Register: – log in to your profile Mark Dixon Page 25

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 Mark Dixon Page 26

Take nobody’s word for it • Royal Society – Oldest scientific academy in continuous existence – Motto: Nullius in verba = Take nobody’s word for it – Official foundation: 28 November 1660 – http: //royalsociety. org/ – Belief vs. Knowledge Mark Dixon Page 27

HTML: Why? <html> <head><title>Hello</title></head> <body> <p>Hello <b>there</b>. </p> </body> </html> Mark Dixon Page 28

HTML: Why? <html> <head><title>Hello</title></head> <body> <p>Hello <b>there</b>. </p> </body> </html> previous page (created using Visual Studio) 6 lines 461 bytes <html xmlns: v="urn: schemas-microsoft-com: vml" xmlns: o="urn: schemas-microsoft-com: office" xmlns: w="urn: schemas-microsoft-com: office: word" xmlns="http: //www. w 3. org/TR/REC-html 40"> <head> <meta http-equiv=Content-Type content="text/html; charset=windows-1252"> <meta name=Prog. Id content=Word. Document> <meta name=Generator content="Microsoft Word 10"> <meta name=Originator content="Microsoft Word 10"> <link rel=File-List href="Hello%20 there_files/filelist. xml"> <title>Hello there</title> <!--[if gte mso 9]><xml> <o: Document. Properties> <o: Author>Mark Dixon</o: Author> <o: Last. Author>Mark Dixon</o: Last. Author> <o: Revision>1</o: Revision> <o: Total. Time>1</o: Total. Time> <o: Created>2008 -01 -22 T 20: 29: 00 Z</o: Created> <o: Last. Saved>2008 -01 -22 T 20: 30: 00 Z</o: Last. Saved> <o: Pages>1</o: Pages> <o: Words>1</o: Words> <o: Characters>12</o: Characters> <o: Company> </o: Company> <o: Lines>1</o: Lines> <o: Paragraphs>1</o: Paragraphs> <o: Characters. With. Spaces>12</o: Characters. With. Spaces> <o: Version>10. 2625</o: Version> </o: Document. Properties> </xml><![endif]--><!--[if gte mso 9]><xml> <w: Word. Document> <w: Compatibility> <w: Break. Wrapped. Tables/> <w: Snap. To. Grid. In. Cell/> <w: Wrap. Text. With. Punct/> <w: Use. Asian. Break. Rules/> <w: Use. FELayout/> </w: Compatibility> <w: Browser. Level>Microsoft. Internet. Explorer 4</w: Browser. Level> </w: Word. Document> </xml><![endif]--> <style> <!-/* Font Definitions */ @font-face {font-family: Sim. Sun; panose-1: 2 1 6 0 3 1 1 1; mso-font-alt: 5 B 8 B4 F 53; mso-font-charset: 134; mso-generic-font-family: auto; mso-font-pitch: variable; mso-font-signature: 3 135135232 16 0 262145 0; } @font-face {font-family: "@Sim. Sun"; panose-1: 2 1 6 0 3 1 1 1; mso-font-charset: 134; mso-generic-font-family: auto; mso-font-pitch: variable; mso-font-signature: 3 135135232 16 0 262145 0; } /* Style Definitions */ p. Mso. Normal, li. Mso. Normal, div. Mso. Normal {mso-style-parent: ""; margin: 0 cm; margin-bottom: . 0001 pt; mso-pagination: widow-orphan; font-size: 12. 0 pt; font-family: "Times New Roman"; mso-fareast-font-family: Sim. Sun; } @page Section 1 {size: 595. 3 pt 841. 9 pt; margin: 72. 0 pt 90. 0 pt; mso-header-margin: 35. 4 pt; mso-footer-margin: 35. 4 pt; mso-paper-source: 0; } div. Section 1 {page: Section 1; } --> </style> <!--[if gte mso 10]> <style> /* Style Definitions */ table. Mso. Normal. Table {mso-style-name: "Table Normal"; mso-tstyle-rowband-size: 0; mso-tstyle-colband-size: 0; mso-style-noshow: yes; mso-style-parent: ""; mso-padding-alt: 0 cm 5. 4 pt; mso-para-margin: 0 cm; mso-para-margin-bottom: . 0001 pt; mso-pagination: widow-orphan; font-size: 10. 0 pt; font-family: "Times New Roman"; } </style> <![endif]--><!--[if gte mso 9]><xml> <o: shapedefaults v: ext="edit" spidmax="2050"/> </xml><![endif]--><!--[if gte mso 9]><xml> <o: shapelayout v: ext="edit"> <o: idmap v: ext="edit" data="1"/> </o: shapelayout></xml><![endif]--> </head> previous page (created using MS Word) 114 lines 3152 bytes <body lang=EN-GB style='tab-interval: 36. 0 pt'> <div class=Section 1> <p class=Mso. Normal>Hello <b>there</b>. </p> </div> </body> </html> Mark Dixon Page 29

HTML: Tags • Hyper-Text Markup Language • text files – edited with notepad • tags, e. g. <b> Mark Dixon <html> </a> Page 30

HTML: Elements • element = – bold: – italic: start tag + content + end tag <b>This will be in bold</b> <i>This will be in italic</i> • work like brackets – start/open – end/close Mark Dixon <b> </b> <i> </i> Page 31

Questions: Tags How many tags are in the following: <head><title>Hello</title></head> 4 <body> <i>Soft</i><b>131</b> </body> Mark Dixon 6 Page 32

Questions: Elements How many elements are in the following: <head><title>Hello</title></head> 2 <body> <i>Soft</i><b>131</b> </body> Mark Dixon 3 Page 33

HTML: Nesting Elements • Nesting – puts one element inside another: <b><i>Hello</i></b> • Cannot overlap elements: <b><i>Hello</b></i> Mark Dixon Page 34

Questions: HTML Elements Which of the following are valid elements? <center><b>Title</b> <head><title></head> <p>Good <b>morning. </p></b> <body><i>Soft</i><b>131</b></body> Mark Dixon Page 35

HTML: page structure • every HTML page has 2 sections: head (info) body (content) Mark Dixon <html> <head> <title>Test</title> </head> <body> <p>This is a test <b>page</b>. </p> </body> </html> Page 36

Indentation • spaces are used to move lines in from left head (is inside html) title (is inside head) <html> <head> <title>Test</title> </head> <body> <p>This is aistest a test <b>page</b>. </p> </body> </html> • helps see structure Mark Dixon Page 37

HTML: Attributes • Some tags need extra information to work: – Anchor (hyper-link) element: <a href=“nextpage. htm”>Next Page</a> attribute (page to jump to) – Image element: <img src=“Beach. jpg” /> attribute (filename of picture to display) – Embedded object element: <embed src=“Music. mp 3”></embed> attribute (filename of music to play) Mark Dixon Page 38

HTML: Attributes (where) • Attributes go inside the start tag: start tag <a href=“nextpage. htm”>Next Page</a> attribute • not anywhere else start tag <a>href=“nextpage. htm”Next Page</a> Mark Dixon Page 39

Questions: HTML attributes Consider the following HTML: <a href="next. htm">Next Page</a> a) Give an example of an attribute href="next. htm" b) Is the following an attribute? <img src=“House. jpg” /> c) How many attributes are there in: <font color=“green” size="3"> Mark Dixon No (tag) 2 Page 40

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. mp 3) Mark Dixon Page 41

Example: My Summer My summer web-page Mark Dixon Page 42

Tutorial Exercise: My Summer • LEARNING OBJECTIVE: to understand tags, elements, and attributes, so that you can create your own web-pages • 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 Mark Dixon Page 43

How to: Environment Settings • If you install Visual Studio on your laptop: – Choose VB settings (same as my laptop): Mark Dixon Page 44

How to: Create Web Site 1. Click File menu 2. Click New Web Site menu item 3. Click Visual Basic item 4. Click ASP. NET Empty Web Site item 5. Click File System item 6. Click Browse button Mark Dixon Page 45

How to: Create Web Site 7. Navigate to your USB stick 8. Type name in folder box (e. g. My. Summer) 9. Click Open button 10. Click Yes button 11. Click OK button Mark Dixon Page 46

How to: Create Web page 12. Click Add New Item button (or right click project name) 13. Click HTML Page item 14. Change page name (e. g. My. Summer. htm) 15. Click Add button Mark Dixon Page 47

How to: Edit code 16. Click Source button Mark Dixon Page 48

How to: View page (Run) 17. Click Play button 18. Click OK button (to enable debugging) Mark Dixon Page 49