Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
body {
font-family: arial;
cursor: crosshair;
}
h1 {
color: #00FF00;
text-align: center;
}
h2 {
border: thin dotted green;
}
h3 {
letter-spacing: 5px;
}
p {
font-size: 14px;
}
strong {
font-weight: ;
}
#intro {
color: blue;
}
.shout {
text-transform: uppercase;
}
ol {
list-style: lower-roman;
}
ul {
list-style: square;
}
<!doctype html>
<html>
<head>
<title>Code Club</title>
</head>
<body>
<h1>Awesome Page</h1>
<h2>This is another heading</h2>
<p>Hello! Here is a paragraph of text. It can be short or long, and it can <a href="surprise.html">contain links</a>. You can for example mark some words as <strong>important</strong> in <u>one way</u> or <em>another</em>.</p>
<h3>Lists</h3>
<p>Here is a list of things I like in order of preference:</p>
<ol>
<li>Kittens</li>
<li>Space</li>
<li>Lie-ins</li>
<li>Playing games</li>
</ol>
<p>And here is a list of things I often do, but they are not in a particular order:</p>
<ul>
<li>Do my homework</li>
<li>Read my favourite book</li>
<li>Visit a friend</li>
<li>Go for walks</li>
<li>Watch films</li>
</ul>
<hr>
<h3>Grouping things</h3>
<div>
<p>I have put this particular paragraph in a box. <code>&lt;div&gt;</code> is a box that you can put other things into. It comes in useful when you want to group things together.</p>
</div>
<div>
<p class="notes_on_classes">You can use <code>classes</code> to annotate the elements in code. They can help you distinguish between the same elements that you might use for different things. <code>Classes</code> are not visible, but later you will learn how to use them to change appearance of things on the page.</p>
<p class="notes_on_classes">You can have many elements with the same <code>class</code>.</p>
</div>
<div id="note_about_id">
<p>You can also use <code>id</code> for a similar purpose: use it when you want to mark out a specific element</p>
<p>You can only have <em>one</em> element with a specific <code>id</code> though, but as a bonus you can <a href="#kitten">link to that element</a> within the page.</p>
</div>
<hr>
<!-- Oops, you've found me! How come the browser didn't show me? -->
<!--
_
\`*-.
) _`-.
. : `. .
: _ ' \
; *` _. `*-._
`-.-' `-.
; ` `.
:. . \
. \ . : .-' .
' `+.; ; ' :
: ' | ; ;-.
; ' : :`-: _.`* ;
.*' / .*' ; .*`- +' `*'
`*-* `*-* `*-*'
-->
<!-- Anything in between the arrows at the beginning and end of this line is treated as comments. -->
<!-- Comments are a way of marking an annotating your code so you can remember things better. -->
<!-- The browser will hide them from viewers. -->
<h3>Images</h3>
<div id="kitten">
<img src="http://bit.do/cc-spacecat " width="600" height="480" alt="This is the text you will see when you move the mouse over the picture">
<p>Ooh, see how we introduced another tag? <code>&lt;img&gt;</code> (the image tag) lets you put in some pictures.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment