Hello world

303 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
303
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hello world

  1. 1. Hello World - and save as hello.html
  2. 2. Assingment 1-1 • Make a folder and name it 'lecture1'. • Make a folder and name it ‘Assingment1-1'. • Open a text-editor – Windows => notepad – ios => TextEdit as an HTML or Plain Text Editor (setup http://support.apple.com/kb/TA20406) • Type ”Hello World” and save it as hello.html • Open hello.html
  3. 3. HTML5 minimum <!DOCTYPE html> <html> <head> <meta charset=”UTF-8"> <title>HTML5</title> </head> <body> <h1>Hello world</h1> <p>In the right HTML5 way.</p> <p>...nice</p> </body> </html>
  4. 4. HTML structur
  5. 5. More HTML Elements (tags) <a href=”http://www.46h.dk”>Link</a> <img src=” images/mc.jpg” alt=”MC” /> <!-- comments --> <ul> <li>Coffee</li> <li>Milk</li> </ul> more at http://www.w3schools.com/html/html_quick.asp
  6. 6. File structure <img src=” images/my_pic.jpg” alt=”Me” />
  7. 7. (home) Assingment 1-2 Go to Codecademy.com and sign up. Go to http://www.codecademy.com/tracks/web and complete 'HTML Fundamentals'.
  8. 8. Assingment 1-3 • Make a folder and name it ‘Assingment1-3'. • Make a webpage (index.html) that present one of your interests with headings, little text (from lipsum.com) and a few images. • Make a subpage (page2.html) • Make link between the to pages • Use <h1><h2><p><ul><li><img><a> • Make comments for every line of code
  9. 9. Validating The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. http://www.w3.org/
  10. 10. Assingment 1-4 • Validate your pages at www.w3.org • If there are any errors please correct them
  11. 11. CSS The CSS Zen Garden - http://www.csszengarden.com/
  12. 12. CSS Selectores body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; }
  13. 13. Internal style sheet <head> .... <style> body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; } </style> </head>
  14. 14. External style sheet <head> <link rel="stylesheet" type="text/css" href=“css.css"> </head> body {background-color:#cccccc;} h1 {color:green;} p {margin-left:50px; color:#ff0000;} css.css index.html
  15. 15. Inline style • <p style="color: green; margin-left: 20px">This is a paragraph.</p>
  16. 16. (home) Assingment Go to http://www.codecademy.com/tracks/web and complete course 4: Advanced CSS Selectors
  17. 17. Assingment 1-5 From assingment1-3 folder copy index, page2 and your images-folder to a new folder named assigment1-5. For index and page2 you have to make: • External style sheet • Internal style sheet • Inline style sheet • Validate HTML and CSS
  18. 18. Chrome as webdeveloper tool
  19. 19. Online resourcer • www.w3schools.com • www.lynda.com • www.w3.org • http://google- styleguide.googlecode.com/svn/trunk/htmlcss guide.xml • www.lipsum.com • www.flickr.com

×