Html

1,479 views

Published on

A brief introduction to HTML for educators new to technology

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,479
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. HTML <ul><li>Standard format/language for Web documents: </li></ul><ul><li>h yper t ext m arkup l anguage </li></ul><ul><li>Markup language: Comprises normal text of document together with tags </li></ul><ul><li>Tags provide format, structure and references to other files, eg. multimedia, other web documents </li></ul>
  2. 2. Examining the HTML <ul><li>You can look at the HTML of a Web page by selecting View->Source in Internet Explorer </li></ul><ul><li>Try it! </li></ul><ul><li>As you will see, HTML is not a very easy language to read (or write) </li></ul><ul><li>You can directly edit HTML using a text editor such as Notepad </li></ul>
  3. 3. Learning HTML <ul><li>You are not expected to be an HTML expert! </li></ul><ul><li>A lot of web designers use WYSIWYG editors such as FrontPage </li></ul><ul><li>Learn enough of the basic tags to produce simple web pages or make minor changes to a web page </li></ul><ul><li>Refer to this useful HTML Tutorial </li></ul><ul><li>http://www. sci . usq .edu.au/courses/csc1402/semester3/ coursematerial /media/resources/html_tutorial/index.html </li></ul>
  4. 4. Overall File Structure <ul><li><html> <!-- Comment is ignored --> <head> <title>HTML Tutorial</title> </head> <body> Document body text here. </body> </html> </li></ul><ul><li>Try this in NOTEPAD </li></ul><ul><li>Save the file as test.html (choose All Files in “Save As Type” when you save) </li></ul>
  5. 5. Common HTML Tags <ul><li><h1>Level 1 Heading</h1> </li></ul><ul><li><p>Paragraph</p> </li></ul><ul><li><br>line break </li></ul><ul><li><img src=&quot;name of image file&quot;> </li></ul><ul><li><a href=&quot;url&quot;>click here</a> </li></ul><ul><li><strong>bold</strong> </li></ul><ul><li><em>emphasis</em> </li></ul><ul><li><u>underlined</u> </li></ul><ul><li><center>centred text</center> </li></ul>Click here
  6. 6. Another example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Richard's Web Page</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><center> </li></ul><ul><li><h1>Richard's Web Page</h1> </li></ul><ul><li><hr> </li></ul><ul><li><p>My favourite colour is <strong>red</strong>. </li></ul><ul><li><p>My favourite sport is <em>cycling</em>. </li></ul><ul><li><p>My favourite movie is <u>Forrest Gump</u>. </li></ul><ul><li><p>I could say some interesting things here. </li></ul><ul><li></center> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Click here
  7. 7. Spaces, gaps, new lines <ul><li>This will be printed </li></ul><ul><li>In the same line as the text </li></ul><ul><li>above. </li></ul><ul><li>To create a line break you need to use <br> </li></ul><ul><li>Or <p> to start a new paragraph. </li></ul><ul><li>Or &nbsp; to add extra space between words in a sentence. </li></ul>Click here
  8. 8. Navigating the Web <ul><li>Each document can have numerous active links (using the HREF tag). </li></ul><ul><li>Someone browsing can follow a long sequence of links moving from web page (document) to web page. </li></ul><ul><li>Browsers keep track of where you have been so you can move back/forward. </li></ul>
  9. 9. Adding Links <ul><li>Say I wanted to put a link to the UB website onto my web page. </li></ul><ul><li>I could add the following: I work at <a href=&quot;http://www.ballarat.edu.au/&quot;>UB</a>. </li></ul>URL for link Text to display for link <ul><li><a> is called an anchor tag </li></ul>
  10. 10. Adding Images <ul><li>Say I wanted to include a graphic image or photograph </li></ul><ul><li>I could add the following: <img src=“giro.jpg” alt=“Photo”> </li></ul>Name of file with image Text to display if image unavailable Click here Image must be in same folder as HTML file
  11. 11. Writing code <ul><li>In future, you may use Dreamweaver editor to write HTML code </li></ul>
  12. 12. Web Page Design Issues <ul><li>Page will not appear exactly the same everywhere </li></ul><ul><ul><li>Different computer screens, fonts etc. </li></ul></ul><ul><ul><li>Different browsers (eg PDA) </li></ul></ul><ul><ul><li>Default settings (eg font size) </li></ul></ul><ul><li>Size and download time </li></ul>

×