large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

Some Simple HTML

Even though you may never need to know any html to use wordpress it doesn’t hurt to know some of the basics.   Occasionally, it is easier to make format changes using the html screen in wordpress if you actually know a little html.  In any matter if you have a site or blog it doesn’t hurt to have a little html knowledge.

 

Basic Html Document Format

<html>
<head>
&lt;title>Site Name Here (not visbile on page – this is the name that shows up in the browser tab)&lt;/title>
</head>

<body>
Visible website content goes here.
</body>

</html>

 

Heading Sizes

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Largest Heading

. . .

. . .

. . .

. . .
Smallest Heading

Text

<p>This is a paragraph</p>
&lt;br> (line break – starts new line)
<hr> (horizontal rule)

This is a paragraph
(line break)


(horizontal rule)

Text Styles

<b>This text is bold</b>
<i>This text is italic</i>

This text is bold

This text is italic

Links, Images & Email

&lt;a href=”http://www.example.com/”>This is a Link&lt;/a>

&lt;a href=”http://www.example.com/”>&lt;img src=”URL” alt=”Alternate Text”>&lt;/a>

<a href=”mailto:webmaster@example.com”>e-mail link</a>

This is a Link
Alternate Text
e-mail link 

Unordered (Bullet) list

&lt;ul>
&lt;li>First entry&lt;/li>
&lt;li>Second entry&lt;/li>
&lt;/ul>

Ordered (Numbered) list

&lt;ol>
&lt;li>First entry&lt;/li>
&lt;li>Second entry&lt;/li>
&lt;/ol>

  • First entry
  • Second entry
  1. First entry
  2. Second entry

Indented Definition

&lt;dl>
&lt;dt>First term&lt;/dt>
<dd>Definition</dd>
&lt;dt>Next term&lt;/dt>
<dd>Definition</dd>
&lt;/dl>

First term
Definition
Next term
Definition

Tables

<table border=”1″>
<tr>
&lt;th>someheader&lt;/th>
&lt;th>someheader&lt;/th>
</tr>
<tr>
&lt;td>sometext&lt;/td>
&lt;td>sometext&lt;/td>
</tr>
</table>

Tables

someheader someheader
sometext sometext

Special Characters

&lt; translates to &lt;
&gt; translates to >
&#169; or &copy, translates to ©

< translates to <
> translates to >
© translates to ©

Other Elements

<!– This is a comment –>

&lt;blockquote>
Text quoted from some source.
&lt;/blockquote>

<address>
Address 1&lt;br>
Address 2&lt;br>
City&lt;br>
</address>

Text quoted from some source.

Address 1
Address 2
City

 

Ref : w3schools.com