mark dixon page 1 tech043 02 – html. mark dixon page 2 admin attendance register: –log in to...
TRANSCRIPT
Mark Dixon Page 1
Tech04302 – 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
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 5
HTML: Why?
<html> <head><title>Hello</title></head> <body> <p>Hello <b>there</b>.</p> </body></html>
Mark Dixon Page 6
HTML: Why?<html> <head><title>Hello</title></head> <body> <p>Hello <b>there</b>.</p> </body></html>
<html xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:w="urn:schemas-microsoft-com:office:word"xmlns="http://www.w3.org/TR/REC-html40">
<head><meta http-equiv=Content-Type content="text/html; charset=windows-1252"><meta name=ProgId content=Word.Document><meta name=Generator content="Microsoft Word 10"><meta name=Originator content="Microsoft Word 10"><link rel=File-List href="Hello%20there_files/filelist.xml"><title>Hello there</title><!--[if gte mso 9]><xml> <o:DocumentProperties> <o:Author>Mark Dixon</o:Author> <o:LastAuthor>Mark Dixon</o:LastAuthor> <o:Revision>1</o:Revision> <o:TotalTime>1</o:TotalTime> <o:Created>2008-01-22T20:29:00Z</o:Created> <o:LastSaved>2008-01-22T20:30:00Z</o:LastSaved> <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:CharactersWithSpaces>12</o:CharactersWithSpaces> <o:Version>10.2625</o:Version> </o:DocumentProperties></xml><![endif]--><!--[if gte mso 9]><xml> <w:WordDocument> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><style><!-- /* Font Definitions */ @font-face
{font-family:SimSun;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:\5B8B\4F53;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:"\@SimSun";panose-1:2 1 6 0 3 1 1 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.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:12.0pt;font-family:"Times New Roman";mso-fareast-font-family:SimSun;}
@page Section1{size:595.3pt 841.9pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:35.4pt;mso-footer-margin:35.4pt;mso-paper-source:0;}
div.Section1{page:Section1;}
--></style><!--[if gte mso 10]><style> /* Style Definitions */ table.MsoNormalTable
{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:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;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>
<body lang=EN-GB style='tab-interval:36.0pt'>
<div class=Section1>
<p class=MsoNormal>Hello <b>there</b>.</p>
</div>
</body>
</html>
previous page(created using Visual Studio)6 lines461 bytes
previous page(created using MS Word)114 lines3152 bytes
Mark Dixon Page 7
HTML: Tags• Hyper-Text Markup Language
• text files – edited with notepad
• tags, e.g. <b> <html> </a>
Mark Dixon Page 8
HTML: Elements• 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 9
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 10
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 11
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 12
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 13
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 14
<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 15
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 16
• 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 17
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 18
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 19
Example: My Summer
My summer web-page
Mark Dixon Page 20
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 21
How to: Environment Settings• If you install Visual Studio on your laptop:
– Choose VB settings (same as my laptop):
Mark Dixon Page 22
How to: Create Web Site1. Click File menu2. Click New Web Site menu item
3. Click Visual Basic item4. Click ASP.NET Empty Web Site item5. Click File System item6. Click Browse button
Mark Dixon Page 23
How to: Create Web Site7. Navigate to your USB stick8. Type name in folder box
(e.g. \MySummer)9. Click Open button
10. Click Yes button11. Click OK button
Mark Dixon Page 24
How to: Create Web page12. Click Add New Item button
(or right click project name)
13. Click HTML Page item14. Change page name
(e.g. MySummer.htm)15. Click Add button
Mark Dixon Page 25
How to: Edit code
16. Click Source button
Mark Dixon Page 26
How to: View page (Run)17. Click Play button
18. Click OK button (to enable debugging)