your local scemo teen (Ja...'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

Quick HTML cheat sheet

HTML cheat sheet

(+ a few useful links)

Basics of HTML coding

This is just a cheat sheet for various tags used while using HTML codes for layouts, texts or pages

For more info on how to use HTML or CSS I recommend looking elsewhere

This link has been useful when I started simple HTML guide


Basic HTML Structure

  • To create an HTML document: <html> </html>
  • To set the title of your doc. and non displayed info: <head> </head>
  • To set the visible part of your doc.: <body> </body>
  • To set the title of your page: <title> </title>

Example of how it should look 

<html>

<head>

<title> your title </title>

</head>

<body>

your content

</body>

</html>


Tags for body attributes

  • Set the background colour (?=colour name or hex value): <body bgcolor=?>
  • Set the background image: <body background="url">
  • Set text colour (?=colour name or hex value): <body text=?>
  • Set colour of links (?=colour name or hex value): <body link=?>
  • Set colour of visited links (?=colours name or hex value): <body vlink=?>
  • Set colour of active link (while hovering mouse) (?=colour name or hex value): <body alink=?>

Tags for images

  • Add an image: <img src="url" />
  • Align image left/center/right/bottom/top/middle: <img src="url" align=?>
  • Images border: <img src="url" border=?>
  • Set height of image in pixel: <img src="url" height=?>
  • Set width of image in pixel: <img src="url" width=?>
  • Set alternative text: <img src="url" alt=?>

HTML tags for text / blog

  • Create headlines: <h1> </h1> -> <h6> </h6> (h1=largest, h6=smallest)
  • Italic: <i> </i> or <em> </em>
  • Bold: <b> </b> or <strong> </strong>
  • Underline text: <u> </u>
  • Strike out: <strike> </strike>
  • Tipewritter style text: <tt> </tt>
  • Create a paragraph: <p> </p>
  • Line break: <br>
  • Create a link to another page: <a href="url" link name </a>

Special characters 

  • < less than symbol: <
  • > greater than symbol: >
  • & ampersand or "and": &
  • " quotation mark: "
  • Copyright symbol: ©
  • Trademark symbol: &trade
  • Space:  

Useful links
color hex value finder

Layout code tester 

Layout creator

Custom cursor

Image url creator


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )