Tech043 02 – HTML

Tech04302 – HTML

Admin • Attendance Register: • log in to your profile

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

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

HTML: Why? <html> <head><title>Hello</title></head> <body> Hello there. </body> </html>

HTML: Why? <html> <head><title>Hello</title></head> <body> Hello there. </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>  <style>  </style>  </head> <body lang=EN-GB style='tab-interval:36.0pt'> <div class=Section1> Hello there. </div> </body> </html> previous page (created usingMS Word) 114 lines 3152 bytes previous page (created usingVisual Studio) 6 lines 461 bytes

HTML: Tags Hyper-Text Markup Language text files – edited with notepad tags, e.g. <html></a>

HTML: Elements 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

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

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

HTML: Nesting Elements • Nesting – puts one element inside another: Hello • Cannot overlap elements: Hello  

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

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

spaces are used to move lines in from left helps see structure Indentation <html> <head> <title>Test</title> </head> <body> This is a test page. </body> </html> <html> <head> <title>Test</title> </head> <body> This is a test page. </body> </html> head (is inside html) title(is inside head)

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)

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) start tag  attribute start tag 

Questions: HTML attributes Consider the following HTML:<a href="next.htm">Next Page</a> Give an example of an attribute Is the following an attribute? <img src=“House.jpg” /> How many attributes are there in: href="next.htm" No (tag) 2

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 .mp3)

Example: My Summer My summer web-page

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

How to: Environment Settings If you install Visual Studio on your laptop: Choose VB settings (same as my laptop):

How to: Create Web Site 1. Click File menu 2. Click New Web Site menu item 3. Click Visual Basic item 4. Click ASP.NET Empty Web Site item 5. Click File System item 6. Click Browse button

How to: Create Web Site 7. Navigate to your USB stick 8. Type name in folder box (e.g. \MySummer) 9. Click Open button 10. Click Yes button 11. Click OK button

How to: Create Web page 12. Click Add New Item button (or right click project name) 13. Click HTML Page item 14. Change page name (e.g. MySummer.htm) 15. Click Add button

How to: Edit code 16. Click Source button

How to: View page (Run) 17. Click Play button 18. Click OK button (to enable debugging)

Tech043 02 – HTML

Tech043 02 – HTML

Presentation Transcript

HTML

HTML forms, HTTP, & REST

New Perspectives on Creating Web Pages with HTML

Introduction to HTML

Tech043 02 – HTML

Tech043 02 – HTML

Presentation Transcript

HTML

HTML forms, HTTP, &amp; REST

New Perspectives on Creating Web Pages with HTML

Introduction to HTML

HTML forms, HTTP, & REST