Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie HTML5 Hello World Assignment - Create Basic HTML Page with Heading and Paragraph
Ähnlich wie HTML5 Hello World Assignment - Create Basic HTML Page with Heading and Paragraph (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
HTML5 Hello World Assignment - Create Basic HTML Page with Heading and Paragraph
- 1. Hello World - and save as hello.html
- 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
- 4. 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>
- 6. 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
- 7. File structure <img src=” images/my_pic.jpg” alt=”Me” />
- 8. (home) Assingment 1-2 Go to Codecademy.com and sign up. Go to http://www.codecademy.com/tracks/web and complete 'HTML Fundamentals'.
- 9. 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
- 10. 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/
- 11. Assingment 1-4 • Validate your pages at www.w3.org • If there are any errors please correct them
- 12. CSS The CSS Zen Garden - http://www.csszengarden.com/
- 13. CSS Selectores body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; }
- 14. Internal style sheet <head> .... <style> body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; } </style> </head>
- 15. 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
- 16. Inline style • <p style="color: green; margin-left: 20px">This is a paragraph.</p>
- 17. (home) Assingment Go to http://www.codecademy.com/tracks/web and complete course 4: Advanced CSS Selectors
- 18. 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
- 20. 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