HTML Links

arrow

left arrow: &laar; - ←

right arrow: &raar; - →

background color

<body bgcolor="Silver"> <p>We set the background...</p> </body>

background picture, add - need to add a style or two:

<style> html { height: 100%; } body { background-image: url("whatever.jpg"); background-repeat: no-repeat; background-position: 50% 50% } </style>

Note, you need that “html” style if you want the image centered properly using background-position: 50% 50%

Then, later on somewhere down in the body, add: <p class=BODY > </p>

Finally, probably want to add a default background color to your main “body” statement for those who suppress pictures:

<body lang=EN-US link=blue vlink=purple bgcolor="#336666">

Bare Bones Guide to HTML

bookmark - also known as "anchors"

refer to one: <a href="#BookmarkName" target="_self">

set: target=_parent name="bookmark name"

—C—

cent sign (¢) – ¢ or ¢

center –

<center> This text will be centered. </center>

<P {text-align: center}> or <P style ="text-align: center">

cheat sheets – 30 Handy Cheat Sheets and Reference Guides for Web Professionals

check box, checked - ☑

check box, unchecked - ☐

—D—

—E—

editor

Easy HTML

ellipses - … - …

escape quotes (perl) – CGI::escapeHTML()

—F—

faviocon

online converter to ico from jpg or other formats

generator (online) - http://antifavicon.com/

generator (not online)

how to put reference to

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <><head profile="http://www.w3.org/2005/10/profile"> <link rel="shortcut icon" type="image/x-icon" href="http://mydomain.com/favicon.ico"> […] </head> […] </html>

More info

frame, break out of - add target="_top" to the href

input type=“text”, change format - use inline CSS styles to do this.

<input type = "text" value = "test" style="color:#fcc; font-weight: bold; background-color: #ffc;" >

link checker

Load time, check – pingdom

—M—

—N—

name vs. id– see id vs. name

nested tables

<table border = 1> <tr> <TD> <table border = > <TR> <TD>1st table, 1st row, 1st col</TD> <TD>1st table, 1st row, 2nd col</TD> </TR> <TR> <TD>1st table, 2nd row, 1st col</TD> <TD>1st table, 2nd row, 2nd col</TD> </TR> </table> </TD> <TD> <table border = 1> <TR> <TD>2nd table, 1st row, 1st col</TD> <TD>2nd table, 1st row, 2nd col</TD> </TR> <TR> <TD>2nd table, 2nd row, 1st col</TD> <TD>2nd table, 2nd row, 2nd col</TD> </TR> </table> </TD> </TR> </table>

—O—

ordered list, resume count - let's say you want to resume the count at five

<ol style = "margin-left:.75in" start="5" type="1"> <li> and then close the form.</li> </ol>

—P—

Picture, add to background – see background picture, add

—Q—

quotes

left double quote - “ - “

right double quote - ” - ”

quotes, escape (perl) – CGI::escapeHTML()

—R—

redirect

<META HTTP-EQUIV="Refresh" CONTENT="5; url=http://www.yournewdomain.com/">

The first part: HTTP-EQUIV="Refresh" tells the browser that the page should be refreshed. CONTENT="5; url=http://www.yournewdomain.com/"> gives two pieces of information: that the page should refresh after five seconds, and that the new URL should be http://www.yournewdomain.com/.

rotate text 90 degrees – as far as I know, only possible with IE - <div style="writing-mode:tb-rl" lang=en>text</div>

Button to do this dynamically

Static example and explanation

—S—

—T—

table border, show – in the <style type=text/css> section up top

table, th, td {border: 1px solid black; border-collapse: collapse;}

if you don't have the “border-collapse;”, you'll get double borders.

table, center – <table border="1" style="margin-left: auto; margin-right: auto;">

tables, nested – see nested tables