Mark Dixon Page 1 Tech – HTML

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

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

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

Mark Dixon Page 5 Questions: Tags How many tags are in the following: Hello Soft

Mark Dixon Page 6 Questions: Elements How many elements are in the following: Hello Soft

Mark Dixon Page 7 HTML: Nesting Elements Nesting – puts one element inside another: Hello Cannot overlap elements: Hello 

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

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

Mark Dixon Page 10 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)

Mark Dixon Page 11 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)

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

Mark Dixon Page 13 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 (start tag) 2

Mark Dixon Page 14 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)

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

Mark Dixon Page 16 Visual Studio 2005

Mark Dixon Page 17 Create New Web-site Select Empty web site Browse to D:\ and create folder

Mark Dixon Page 18 Create New Web page

Mark Dixon Page 19 Create New Web Page Select HTML Page Type filename

Mark Dixon Page 20 Visual Studio Design view – see page as it will appear

Mark Dixon Page 21 Visual Studio Source view – see HTML code

Mark Dixon Page 22 View page (Run)

Mark Dixon Page 23 Enable debugging Select Add new Web.config file

Mark Dixon Page 24 Environment Settings Choose VB settings (same as my laptop):

Mark Dixon Page 25 Tutorial Exercise 1: My Summer LEARNING OBJECTIVE: to understand tags, elements, and attributes, so that you can create your own web-pages using Visual Studio 2005 TASK: Create a ‘My Summer’ web page, which describes the highlights of what you did over the summer, including text, pictures, and sound. Hint: Create a new web site within Visual Studio Create a new web page within you web site.