HTML
HyperText Markup Language
Hyperlink
“HTML is the publishing language
of the World Wide Web.”
- W3C
<article>
<h1> HTML </h1>
<p> So we start off with HTML. You probably all heard about it an saw a little about it? But what is it really about? How does it work? </p>
<p> The most important thing to learn HTML is to just do it, work with it, and you will soon realise that it’s actually pretty simple. </p>
</article>
HTML
So we start off with HTML. You probably all
heard about it an saw a little about it? But
what is it really about? How does it work?
The most important thing to learn HTML is
to just do it, work with it, and you will soon
realise that it’s actually pretty simple.
<html>
↑ ↑
angled brackets
</html>
↑
notice the slash
<p>Hello there!</p>
↑
this is the paragraph content
Nesting
<footer>
<p>This is the first paragraph</p>
<p>
This one also contains <strong>something else!</strong>
</p>
</footer>
Attributes
<a href="www.google.nl"> Click! </a>
or
<img src="cat.jpg" width="100" height="100" />
Self-closing elements
- <br /> Blank rule "enter"
- <hr /> Horizontal rule / line
- <img /> Image or picture
- <input /> Input field
Page structure
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</head>
<body>
</body>
</html>
Example time
- Basic elements example http://jsfiddle.net/q4pv9/
- Text elements example http://jsfiddle.net/zDh4u/
-
Table example http://jsfiddle.net/gCJB2/
- Form elements example http://jsfiddle.net/XRWqa/
-
List example http://jsfiddle.net/fUEM8/
Try it out yourself!
Go to: