mark dixon page 1 soft131 02 – html. mark dixon page 2 admin attendance register: –log in to...
TRANSCRIPT
Mark Dixon Page 1
Soft13102 – 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. <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>
Mark Dixon Page 5
Questions: Tags
How many tags are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
4
6
Mark Dixon Page 6
Questions: Elements
How many elements are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
2
3
Mark Dixon Page 7
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 8
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>
Mark Dixon Page 9
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:
Mark Dixon Page 10
<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)
Mark Dixon Page 11
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)
Mark Dixon Page 12
• 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
Mark Dixon Page 13
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
Mark Dixon Page 14
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)
Mark Dixon Page 15
Example: My Summer
My summer web-page
Mark Dixon Page 16
Start WAMPServer
• Click Start WAMPServer icon
Mark Dixon Page 17
NetBeans: New Project
• Click File Menu
• Click New Project
Mark Dixon Page 18
NetBeans: New Project
• Select PHP Application
• Click Next button
Mark Dixon Page 19
NetBeans: New Project
• Change Project Name
• Change Folder (Click Browse Button)
Mark Dixon Page 20
NetBeans: New Project
• Change URL to localhost:8080
• Copy Files to C:\wamp\www…
Mark Dixon Page 21
NetBeans: New Project
Mark Dixon Page 22
NetBeans: Delete index.php
• right click index.php, click delete item
Mark Dixon Page 23
NetBeans: Add html file
• right click Source Files, click HTML file item
Mark Dixon Page 24
Tutorial Exercise 1: 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: Create a new web site within NetBeans. Create a new web page within you web site.