Html for beginners

723 views

Published on

Slides for a 90 minutes HTML workshop I gave. It was meant for absolute beginners in HTML. In addition to the slides I handed out cheat sheets for HTML and CSS (found online). The tasks were first done in http://codepen.io and later in a local HTML editor.

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

No Downloads
Views
Total views
723
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
76
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html for beginners

  1. 1. HTML for beginners From zero to your-own-website in 90 minutes
  2. 2. What is HTML? • “HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser.” (wikipedia) Markup (HTML) Presentation (CSS = Cascading Style Sheets) Interaction (JavaScript)
  3. 3. Today • Creating content (HTML) • text, images, links • advanced elements (lists, tables) • Making it look pretty (CSS) • Putting it all together • your own website?
  4. 4. Getting started <p>In a hole in the ground, there lived <strong>a hobbit</strong>. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and <em>that means comfort</em>.</p> In a hole in the ground, there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbithole, and that means comfort.
  5. 5. Tags and attributes <p>…</p> Tags, opening and closing <img /> Tags, self-closing <img src=“picture.jpg” /> Attributes in tags
  6. 6. Text elements <H1>This is Heading 1</H1> ! <H2>This is Heading 2</H2> ! <H3>This is Heading 3</H3> ! <H4>This is Heading 4</H4> ! <H5>This is Heading 5</H5> ! <H6>This is Heading 6</H6> <p>This is a paragraph</p> ! <strong>This is bold</strong>! <b>This was bold (until HTML5)</b>! ! <em>This is italic text.</em> <i>This is italic text.</i> ! <p>Or just <br /> break the line.</p>
  7. 7. The heart of the web Hyperlinks: <p> Have you heard of this new <a href=“http://google.com”>website</a>?<br/> Or just go <a href=“#down”>further down</a> this page. </p> ! <p> <a name=“down"></a> This is further down the page. </p>
  8. 8. Images <img src=“http://florianletsch.de/test.jpg” alt=“Test picture” width=“400” height=“300”/>
  9. 9. Get your hands dirty • http://codepen.io/pen/! • Task (5 minutes) • 1. Play around, create some text, some links, and so on. • 2. What does <u> do? • 3. How to create a horizontal line in HTML? (google)
  10. 10. And yet another task • Create your own little profile, including: • Headline, “About Me” text, one image, list of hobbies, one link to your favourite website • hint: some elements need to be nested: <ul> <li>List item one</li> <li>List item two</li> </ul> 10 minutes (use the cheat sheet)
  11. 11. Making it pretty CSS (Cascading Style Sheets) work with selectors for elements and a list of values for properties that influence the visual representation. a { color: red; text-decoration: none; } ! p { background: black; colour: white; padding: 20px; }
  12. 12. CSS • You can use style definitions directly inside an element. This is <em style=“text-decoration: underline”>random</em> text. Check out the next cheat sheet.
  13. 13. Now really make it pretty • Task (10 minutes) • Continue with your profile from before. • Make the image to “float” next to the text. • Pick a new text colour and background colour (hint, selector “body” is the whole page) • Change the appearance of the links.
  14. 14. Colour codes
  15. 15. Putting it together index.htm: <!DOCTYPE html> <html> <head> <title>My website</title> <link rel=“stylesheet” href=“style.css”> </head> <body> <h1>Welcome</h1> <p>Content…</p> </body> </html> style.css: body { background: grey; }
  16. 16. A real world example <div class="head"> <h1>My website</h1> </div> ! <div class="menu"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="profile.htm">Profile</a></li> </ul> </div> ! <div class="content"> <h2>Home</h2> <p>Whatever bla bla</p> </div> .menu { float: left; width: 200px; } ! .content { float: left; width: 600px; margin-left: 20px; } ! .head { width: 820px; margin-bottom: 20px; } Task: Do this yourself, add your own colours, fonts and content (10 minutes)
  17. 17. Now what? • Where to from now on? • HTML course: http://www.codecademy.com/ tracks/web • CSS reference: https://developer.mozilla.org/enUS/docs/Web/CSS/Reference

×