Skip to content

Instantly share code, notes, and snippets.

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>
<title>Code Club</title>
<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>
<p>Here is a list of things I like in order of preference:</p>
<li>Playing games</li>
<p>And here is a list of things I often do, but they are not in a particular order:</p>
<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>
<h3>Grouping things</h3>
<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>
<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 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>
<!-- 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. -->
<div id="kitten">
<img src=" " 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment