Tech 043 02 HTML Mark Dixon Page 1

Session Aims & Objectives • Aims – introduce you to the fundamental aspects of

HTML: Elements & Tags • • Hyper-Text Markup Language text files – edited with

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

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

HTML: Nesting Elements • Nesting – puts one element inside another: <b><i>Hello</i></b> • Cannot

Questions: HTML Elements Which of the following are valid elements? <center><b>Title</b> <head><title></head> <p>Good <b>morning.

HTML: page structure • every HTML page has 2 sections: head (info) body (content)

Indentation • spaces are used to move lines in from left head (is inside

HTML: Attributes • Some tags need extra information to work: – Anchor (hyper-link) element:

HTML: Attributes (where) • Attributes go inside the start tag: start tag <a href=“nextpage.

HTML Tags: Reference • Lots of info available on-line, e. g. : http: //www.

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

Create New Web-site • Select Empty web site • Browse to D: and

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

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

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

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

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

Tutorial Exercise 1: My Summer • LEARNING OBJECTIVE: to understand tags, elements, and attributes,

Slides: 24

Download presentation

Tech 043 02 – HTML Mark Dixon Page 1

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

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 3

HTML: Elements & Tags • • Hyper-Text Markup Language text files – edited with notepad tags, e. g. <html> </a> element = start tag + content + end tag – bold: – italic: This will be in bold This will be in italic • work like brackets – start/open – end/close Mark Dixon Page 4

Questions: Tags How many tags are in the following: <head><title>Hello</title></head> 4 <body> Soft131 </body> Mark Dixon 6 Page 5

Questions: Elements How many elements are in the following: <head><title>Hello</title></head> 2 <body> Soft131 </body> Mark Dixon 3 Page 6

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

Questions: HTML Elements Which of the following are valid elements? <center>Title <head><title></head> Good morning. <body>Soft131</body> Mark Dixon Page 8

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

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> This is aistest a test page. </body> </html> • helps see structure Mark Dixon Page 10

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 11

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 12

HTML Tags: Reference • Lots of info available on-line, e. g. : http: //www. willcam. com/cmat/html/crossref. html • Short list of tags: – : new paragraph – : bold text – : 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 13

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

Visual Studio 2005 Mark Dixon Page 15

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

Create New Web page Mark Dixon Page 17

Create New Web Page • Select HTML Page • Type filename Mark Dixon Page 18

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

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

View page (Run) Mark Dixon Page 21

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

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

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 2005. Create a new web page within you web site. Mark Dixon Page 24