• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hello world
 

Hello world

on

  • 210 views

 

Statistics

Views

Total Views
210
Views on SlideShare
210
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hello world Hello world Presentation Transcript

    • Hello World - and save as hello.html
    • 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
    • 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>
    • HTML structur
    • 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
    • File structure <img src=” images/my_pic.jpg” alt=”Me” />
    • (home) Assingment 1-2 Go to Codecademy.com and sign up. Go to http://www.codecademy.com/tracks/web and complete 'HTML Fundamentals'.
    • 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
    • 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/
    • Assingment 1-4 • Validate your pages at www.w3.org • If there are any errors please correct them
    • CSS The CSS Zen Garden - http://www.csszengarden.com/
    • CSS Selectores body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; }
    • Internal style sheet <head> .... <style> body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; } </style> </head>
    • 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
    • Inline style • <p style="color: green; margin-left: 20px">This is a paragraph.</p>
    • (home) Assingment Go to http://www.codecademy.com/tracks/web and complete course 4: Advanced CSS Selectors
    • 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
    • Chrome as webdeveloper tool
    • 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