M Dixon 1 Tech HTML

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

M Dixon 3 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 4 HTML: Tags Hyper-Text Markup Language text files – edited with notepad tags, e.g.

M Dixon 5 HTML: Elements 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

M Dixon 6 Questions: Tags How many tags are in the following: Hello Soft

M Dixon 7 Questions: Elements How many elements are in the following: Hello Soft

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

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

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

M Dixon 11 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)

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

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

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

M Dixon 15 HTML Tags: Reference Lots of info available on-line, e.g.: 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)

M Dixon 16 Example: My Summer My summer web-page

M Dixon 17 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

M Dixon 18 How to: Environment Settings If you install Visual Studio on your laptop: –Choose VB settings (same as my laptop):

M Dixon 19 How to: Create Web Site 1. Click File menu 2. Click New Web Site menu item 3. Click Empty Web Site item 4. Click File System item 5. Click Visual Basic item 6. Click Browse button

M Dixon 20 How to: Create Web Site 7. Navigate to C:\Projects menu (or your USB stick) 8. Type name in folder box (e.g. \MySummer) 9. Click Open button 10. Click Yes button 11. Click OK button

M Dixon 21 How to: Create Web page 12. Click Add New Item button 13. Click HTML Page icon 14. Change page name (e.g. MySummer.htm) 15. Click Add button

M Dixon 22 How to: Edit code 16. Click Source button

M Dixon 23 How to: View page (Run) 17. Click Play button 18. Click OK button