Your SlideShare is downloading. ×
46h interaction 1.lesson Hello world
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

46h interaction 1.lesson Hello world

217

Published on

Basic HTML and CSS slides from classroom teaching

Basic HTML and CSS slides from classroom teaching

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

  • Be the first to like this

No Downloads
Views
Total Views
217
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Hello World - and save as hello.html
  • 2. Assingment 1-1 • Make a folder and name it 'lecture1'. • 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. HTML5 minimum <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>HTML5</title> </head> <body> <h1>Hello world</h1> <p>In the right HTML5 way.</p> </body> </html>
  • 4. HTML structur
  • 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. (home) Assingment 1-2 Go to Codecademy.com and sign up. Go to http://www.codecademy.com/tracks/web and complete 'HTML Fundamentals'.
  • 7. Assingment 1-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
  • 8. 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/
  • 9. Assingment 1-4 • Validate your pages at www.w3.org
  • 10. CSS The CSS Zen Garden - http://www.csszengarden.com/
  • 11. CSS Selectores HTML Block elements => h1..h6, p, div, span, ul, li, … HTML Inline elements => a, img, hr And the id and class Selectors #para1 { //id selestor text-align:center; color:red; } .center { //class selector text-align:center; }
  • 12. HTML Grouping elements • <div></div> – The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. – The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. – When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. • <span></span> – The <span> tag is used to group inline-elements in a document. – The <span> tag provides no visual change by itself. – The <span> tag provides a way to add a hook to a part of a text or a part of a document. – When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
  • 13. Internal style sheet <head> <style> body { background-image:url("images/mc.jpg"); } h1 { color:green; } p { margin-left:20px; color:#ff0000; } </style> </head>
  • 14. External style sheet <head> <link rel="stylesheet" type="text/css" href=“css.css"> </head> body {background- image:url("images/mc.jpg");} h1 {color:green;} p {margin-left:20px; color:#ff0000;} css.css index.html
  • 15. Inline style • <p style="color: green; margin-left: 20px">This is a paragraph.</p>
  • 16. (home) Assingment Go to http://www.codecademy.com/tracks/web and complete course 4: Advanced CSS Selectors
  • 17. Assingment For index and page2 you have to make: • External style sheet • Internal style sheet • Inline style sheet • Validate HTML and CSS
  • 18. Chrome as webdeveloper tool
  • 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

×