mark dixon page 1 tech043 02 – html. mark dixon page 2 admin attendance register: –log in to...
TRANSCRIPT
![Page 1: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/1.jpg)
Mark Dixon Page 1
Tech04302 – HTML
![Page 2: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/2.jpg)
Mark Dixon Page 2
Admin• Attendance Register:
– log in to your profile
![Page 3: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/3.jpg)
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
![Page 4: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/4.jpg)
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
![Page 5: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/5.jpg)
Mark Dixon Page 5
HTML: Why?
<html> <head><title>Hello</title></head> <body> <p>Hello <b>there</b>.</p> </body></html>
![Page 6: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/6.jpg)
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
![Page 7: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/7.jpg)
Mark Dixon Page 7
HTML: Tags• Hyper-Text Markup Language
• text files – edited with notepad
• tags, e.g. <b> <html> </a>
![Page 8: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/8.jpg)
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>
![Page 9: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/9.jpg)
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
![Page 10: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/10.jpg)
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
![Page 11: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/11.jpg)
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>
![Page 12: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/12.jpg)
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>
![Page 13: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/13.jpg)
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:
![Page 14: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/14.jpg)
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)
![Page 15: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/15.jpg)
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)
![Page 16: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/16.jpg)
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
![Page 17: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/17.jpg)
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
![Page 18: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/18.jpg)
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)
![Page 19: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/19.jpg)
Mark Dixon Page 19
Example: My Summer
My summer web-page
![Page 20: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/20.jpg)
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
![Page 21: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/21.jpg)
Mark Dixon Page 21
How to: Environment Settings• If you install Visual Studio on your laptop:
– Choose VB settings (same as my laptop):
![Page 22: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/22.jpg)
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
![Page 23: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/23.jpg)
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
![Page 24: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/24.jpg)
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
![Page 25: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/25.jpg)
Mark Dixon Page 25
How to: Edit code
16. Click Source button
![Page 26: Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649de55503460f94addbed/html5/thumbnails/26.jpg)
Mark Dixon Page 26
How to: View page (Run)17. Click Play button
18. Click OK button (to enable debugging)