Html for beginners

HTML for beginners
From zero to your-own-website in 90 minutes

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)

Today
•

Creating content (HTML)
•

text, images, links

•

advanced elements (lists, tables)

•

Making it look pretty (CSS)

•

Putting it all together
•

your own website?

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, ﬁlled 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.

Tags and attributes
<p>…</p>

Tags, opening and closing

<img />

Tags, self-closing

<img src=“picture.jpg” />

Attributes in tags

Text elements
<H1>This is Heading 1</H1>
!

!

!
!

!


<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>

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>

Images

<img src=“http://florianletsch.de/test.jpg”
alt=“Test picture” width=“400” height=“300”/>

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)

And yet another task
•

Create your own little proﬁle, 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)

Making it pretty
CSS (Cascading Style Sheets) work with selectors
for elements and a list of values for properties that
inﬂuence the visual representation.
a {
color: red;
text-decoration: none;
}
!

p {
background: black;
colour: white;
padding: 20px;
}

CSS
•

You can use style deﬁnitions directly inside an element.
This is <em style=“text-decoration:
underline”>random</em> text.

Check out the next cheat sheet.

Now really make it pretty
•

Task (10 minutes)
•

Continue with your proﬁle from before.

•

Make the image to “ﬂoat” 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.

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;
}

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)

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

Html for beginners

Related slideshows

More Related Content

Html for beginners