Anda di halaman 1dari 6

HP S GROUP

ww w.hpsgroup.co.uk

HTMLCHEASTHEET
For
DIGITAL MARKETERS
Be a HTML SUPERHERO

So youre managing digital projects but dont know your <p> from
your < span>?

Do you ever need to just change something small but cant wait for the
geeks to sort it out for you? We know that feeling! Thats why we made
this cheat sheet for ourselves and we thought wed share itenjoy.

The SIMPLE STUFF!


WHAT DO YOU WANT TO DO? WHAT YOU NEED TO TYPE!

Bold <b>This text will be bold</b> and this text wont.

Italic <i>This will be italic </i> and this wont.

Links Please fill in our <a href=http://www.yourlinkhere.com/contact.html


target=_blank>contact form</a>.

target=_blank will open your link in a new window.


Just take it out if you want it to open in the same window. Easy

Span You can enclose text within a span to apply a style to that section only.
For example, you may want to make a few words a different font size
and colour mid sentence. Use a span for this.

<p>This is a sentence and <span style=color: RGB(255,0,0); font-


weight: Bold;>this text is now bold and red</span> and then it
goes back to normal.</p>

Dont panic, see the later section for the explanation of the style attribute!

Paragraph <p>This is paragraph 1</p>


<p>This is paragraph 2</p>
?
/
Line break <br />

e.g.
line 1<br />line2

Image <img src=http://www.yoursite.com/URL_of_image.jpg alt=Text to


describe your image width=WIDTH IN PIXELS height=HEIGHT
IN PIXELS />

# e.g.
<img src=http://www.hpsgroup.co.uk/logo.jpg alt=hps logo
width=200 height=100 />
Heading 1 <h1>This is my headline</h1>

Bullet List <ul>


(Unordered list) <li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>

Numbered List <ol>


(Ordered list) <li>Point number 1</li>
<li>Point number 2</li>
</ol>

Sub Script H<sub>2</sub>0


...this doesnt work well
in emails! Will look like this H20

25<sup>th</sup>
SuperScript
...this doesnt work well Will look like this 25th

Ea s y !
in emails!

...now for some ST YLING STUFF!


STYLING

THIS IS WHERE IT STARTS GETTING A LITTLE TRICKIER...

CSS lets you style HTML elements on the page, but you have to have an HTML tag to
apply it to. You just need to add style=. to your HTML tag and then fill it up with all
the styles you need from the table below. So to style a block of text,

<p style=>This is a simple paragraph of text that will be styled</p>

If youre coding emails, its better to apply styling to text using <span>text here</span>
because email clients add all sorts of spacing to <p> tags and it wont be pretty!

Oh and, when you are adding multiple styles, separate each with a ;
STYLE OPTIONS USAGE

Font-family Any web safe fonts can be used, <p style= font-family:Times New Roman, Times,
the common ones are: serif;>This is times new roman font.</p>

Arial, Helvetica, sans-serif or


Verdana, Geneva, sans-serif

The full list is at


http://www.w3schools.com/cssref/c
ss_websafe_fonts.asp

Font-size Normally specified in pixels. <p style=font-size: 12px;>


e.g. 10px or 12px

Font-weight An alternative method for making <p style=font-weight: bold;>this is bold</p>


text bold.

>. Options are: Normal, bold,


bolder, light

Font-style An alternative method for making <p style=font-style: italic;>this is italic</a>


text italic.

Options are: Normal, italic,


oblique enter
Line-height You can use this for adding more <p style=line-height:200%;>this paragraph has
space between lines of text for 200% line spacing</p>
easier reading.
<p style=line-height:25px;>This paragraph has
Can be a pixel size or a % of the 25px line spacing</p>
font size.

Text-align What do you think it does!? <p style=text-align:center;>this is centred</p>

Options are: Left, Right, Center


Yes, its spelt the American way.

Color Changes the colour of text. This is <p style=color: RGB(255,0,0);>This paragraph
also useful for changing the colour text is red</p>
of links in an HTML email.

B ig
<p style=color: RGB(0,255,0);>This paragraph
Options are: RGB or Hexidecimal. text is green</p>

E K ! No idea what Im talking about? <p style=color: RGB(0,0,255);>This paragraph

E
text is blue</p>

G
Use the colour picker at
www.colorpicker.com. Hex has the <p style=color: #ff0000;>This paragraph text is
#, the other values are the RGB. also red, but written as hexadecimal</p>

Text-decoration Lets you add decoration to your <p style=text-decoration:underline>this text is


text. Most common use is for underlined</p>
underlining.

Options are: none,underline,


overline, line-through and blink.
Margin Margin adds amargin outside <p style= margin: 10px 10px 10px 10px;>This
your content. E.g. if you wanted to has an even margin all round.</p>
add space around an image, you
could add a margin. <p style= margin: 20px 10px 20px 10px;>This
has more margin top and bottom.</p>
You can set a margin in a few
different ways; this is the easiest. <p style= margin: 10px 20px 10px 20px;>This
The margins are specified clock- has more margin left and right.</p>
wise from the top: Top, Right,
Bottom and Left.

Specified in pixels.

Padding Like margins, padding is specified <p style= padding: 10px 10px 10px 10px;>This
in the same order, but they work has even padding all round.</p>
You cannot use inside your content.
padding on <p> <p style= padding: 20px 10px 20px 10px;>This
or <div> tags in e.g. if you had a 100px wide text has more padding top and bottom.</p>
emails in Outlook box with 20px padding left and
2007/10/13 right. You would have a usable <p style= padding: 10px 20px 10px 20px;>This
area of 60px wide for your text. has more padding left and right.</p>

you might
like these!

Some EXAMPLES

ALL THIS GEEKERY IS ALL VERY WELL AND GOOD, BUT LETS GIVE
YOU SOME QUICK SNIPPETS TO USE IN YOUR WORK.

A Linked image

<a href=http://www.website.co.uk target=_blank> <img src=image.jpg width=100


height=100 border=0/></a>

Its important to specify border=0 when adding a link, otherwise the image will have
a horrible blue line around it. Ugly.

Style paragraph of text with a link half way through to a contact page

<p style=font-family:Times New Roman, Times, serif;>Here is my paragraph


of text. Here is my CTA asking you to <a href=http://www.websitetogoto.co.uk> visit
the website.</a>

Notice there is no target=.. on this one. The link will open in the same window.
A paragraph of text with a right aligned image

<p>Here is my paragraph of text with an image aligned right. <img src=image.jpg


align=right width=100 height=100> Here is the rest
of my text. </p>

Colouring a link

<a href=http://www.website.co.uk style=color: #0000ff;>blue link text</a>

HP S GROUP
www.hpsgroup.co.uk