Presentation is loading. Please wait.

Presentation is loading. Please wait.

Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.

Published byWarren Powell Modified over 9 years ago

Similar presentations

Presentation on theme: "Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile."— Presentation transcript:

1 Mark Dixon Page 1 Tech043 02 – HTML

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

3 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

4 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

5 Mark Dixon Page 5 HTML: Why? Hello Hello there.

6 Mark Dixon Page 6 HTML: Why? Hello Hello there. <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"> Hello there Mark Dixon 1 2008-01-22T20:29:00Z 2008-01-22T20:30:00Z 1 12 1 12 10.2625 MicrosoftInternetExplorer4 <!-- /* 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 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";} Hello there. previous page (created using Visual Studio) 6 lines 461 bytes previous page (created using MS Word) 114 lines 3152 bytes

7 Mark Dixon Page 7 HTML: Tags Hyper-Text Markup Language text files – edited with notepad tags, e.g.

8 Mark Dixon Page 8 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

9 Mark Dixon Page 9 Questions: Tags How many tags are in the following: Hello Soft 131 4 6

10 Mark Dixon Page 10 Questions: Elements How many elements are in the following: Hello Soft 131 2 3

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

12 Mark Dixon Page 12 Questions: HTML Elements Which of the following are valid elements? Title Good morning. Soft 131  

13 Mark Dixon Page 13 HTML: page structure Test This is a test page. head (info) body (content) every HTML page has 2 sections:

14 Mark Dixon Page 14 Test This is a test page. spaces are used to move lines in from left helps see structure Indentation Test This is a test page. head (is inside html) title (is inside head)

15 Mark Dixon Page 15 HTML: Attributes Some tags need extra information to work: –Anchor (hyper-link) element: Next Page –Image element: –Embedded object element: attribute (page to jump to) attribute (filename of picture to display) attribute (filename of music to play)

16 Mark Dixon Page 16 Attributes go inside the start tag: Next Page not anywhere else href=“nextpage.htm”Next Page HTML: Attributes (where) attribute start tag 

17 Mark Dixon Page 17 Questions: HTML attributes Consider the following HTML: Next Page a)Give an example of an attribute b)Is the following an attribute? c)How many attributes are there in: href="next.htm" No (tag) 2

18 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: – : new paragraph – : bold text – : italic text – : anchor (link) to another web page – : image/picture (.bmp,.jpg,.gif) – : embedded object (.avi.mpg.wav.mp3)

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

20 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

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

22 Mark Dixon Page 22 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

23 Mark Dixon Page 23 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

24 Mark Dixon Page 24 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

25 Mark Dixon Page 25 How to: Edit code 16. Click Source button

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

Download ppt "Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile."

Similar presentations

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Introduction to HTML http://w3schools.com/.

Introduction to HTML
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
HTML Basics Customizing your site using the basics of HTML.

HTML Basics Customizing your site using the basics of HTML.
HTML: HyperText Markup Language Hello World Welcome to the world!

HTML: HyperText Markup Language Hello World Welcome to the world!
WeB application development

WeB application development
Creating and Editing a Web Page Using Inline Styles

Creating and Editing a Web Page Using Inline Styles
Mark Dixon Page 1 SOFT 136 01 – Module Introduction.

Mark Dixon Page 1 SOFT – Module Introduction.
Mark Dixon, SoCCE SOFT 131Page 1 SOFT 131 01 – Module Introduction.

Mark Dixon, SoCCE SOFT 131Page 1 SOFT – Module Introduction.
Mark Dixon, SoCCE SOFT 131Page 1 20 – Web applications: HTML and Client-side code.

Mark Dixon, SoCCE SOFT 131Page 1 20 – Web applications: HTML and Client-side code.
Mark Dixon Page 1 02 – Dynamic HTML (client-side scripting)

Mark Dixon Page 1 02 – Dynamic HTML (client-side scripting)
Mark Dixon, SoCCE SOFT 131Page 1 16 – Web applications: HTML and Client-side code.

Mark Dixon, SoCCE SOFT 131Page 1 16 – Web applications: HTML and Client-side code.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Mark Dixon, SoCCE SOFT 131Page 1 SOFT 131 01 – Module Introduction.

Mark Dixon, SoCCE SOFT 131Page 1 SOFT – Module Introduction.
Mark Dixon Page 1 SOFT131 / Tech043 01 – Module Introduction.

Mark Dixon Page 1 SOFT131 / Tech – Module Introduction.
Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls.

Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls.
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.

Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.

Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.
Today’s Topic Language of web page - HTML (Hypertext Markup Language)

Today’s Topic Language of web page - HTML (Hypertext Markup Language)
M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications.

M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications.

Similar presentations

Ads by Google