WordPress
Training & Support at Georgia Southern

HTML Cheatsheet

Links

HTML Links are hyperlinks and use the <a> tag.

A hyperlink is an element, a text, or an image that you can click on, and jump to another document.

Example

Georgia Southern

Link Code

<a href="url">link text</a>

For our link above the code would look like:

<a href="http://www.georgiasouthern.edu/">Georgia Southern</a>

For a link to work properly it must contain the full web address (starting with http:// or https://).

If you want the link to open in a tab or window you will need to add target="_blank" to the link.

<a href="url" target="_blank">link text</a>


 

Images

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute defines the url (web address) of the image:

Example

video-tutorials-menu-link

Image Code

<img src="url" alt="description text">

The alt attribute specifies an alternate text for the image, if it cannot be displayed. The value of the alt attribute should describe the image in words and is used for accessibility.


 

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles).

Example

  • First item
  • Second item
  • Third item

Unordered List Code

<ul
<li>First Item</li>
<li>Second Item</li
<li>Third Item</li>
</ul>


 

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers.

Example

  1. First item
  2. Second item
  3. Third item

Ordered List Code

<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>


 

Nested Lists

Ordered and unordered Lists can be nested (lists inside lists). Also ordered and unordered lists can be combined.

Example

  • First item
  • Second item
    1. First item
    2. Second item
  • Third item

Nested List Code

<ul>
<li>First Item</li>
<li>Second Item</li>
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<li>Third Item</li>
</ul>


 

Tables

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data (cells) with the <td> tag.

Example

First Name Last Name
Eve Jackson
John Doe

Table Code

<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>Eve></td>
<td>Jackson</td>
</tr>
<tr>
<td>John></td>
<td>Doe</td>
</tr>
</table>


 

YouTube

YouTube is a tool we recommend for hosting videos to embed on your website.

Example

YouTube Embed Code

Method One (URL)

Example
https://www.youtube.com/watch?v=I1cUZlM1CRI

To quickly embed a YouTube video, simply copy the video’s URL from your web browser’s address bar while viewing the video (example above). Paste it on a line by itself while on the visual tab (make sure that Wordpress does not make it a hyperlink).

Method Two (Embed)

Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/I1cUZlM1CRI" frameborder="0" allowfullscreen></iframe>

To find the embed code, go to the video that you want to embed.

  • Click on Share
  • Click Embed
  • Copy iframe code

Go to the page you want to place the video into in WordPress

  • Click on Text (tab next to visual)
  • Paste iframe code into the text window

If you need to change the size of the video

  • Click on show more under Embed
  • Choose a size next to video size
  • Or choose custom size

Place in either the width or the height and the other will fill in automatically to maintain the aspect ratio. Should keep the video around 550px wide or smaller.

NOTE: Using the Embed method will set the height and width of the video. This means that the video will not scale down appropriately for mobile devices. The URL method should be the primary method of showing video.


 

Flickr

Flickr is a tool we recommend for storing photo albums and can be used to create slideshows to embed on your website.

Example

Flickr Embed Code

Example
<object width="400" height="300"> <param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Fgeorgiasouthern%2Fsets%2F72157649655138616%2Fshow%2F&page_show_back_url=%2Fphotos%2Fgeorgiasouthern%2Fsets%2F72157649655138616%2F&set_id=72157649655138616&jump_to="></param> <param name="movie" value="https://www.flickr.com/apps/slideshow/show.swf?v=1811922554"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="https://www.flickr.com/apps/slideshow/show.swf?v=1811922554" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Fgeorgiasouthern%2Fsets%2F72157649655138616%2Fshow%2F&page_show_back_url=%2Fphotos%2Fgeorgiasouthern%2Fsets%2F72157649655138616%2F&set_id=72157649655138616&jump_to=" width="400" height="300"></embed></object>

To find the embed code, go to the slideshow you want to embed.

If you need to change the size of the slideshow

  • Click Share at top left
  • Click Customize this HTML
  • Choose a size either small, medium, large, or super-sized
  • Or choose a custom size

Place in either the width or the height and the other will fill in automatically to maintain the aspect ratio. Should keep the slideshow around 550px wide or smaller.


NOTES:

(1) If you use YouTube or Flickr to host your content, you are required to adhere to their terms of service when embedding it on your website.

(2) When working on site using the standard University templates, you should always use HTML5 markup (not XHTML).

Last updated: 3/26/2015

WordPress Training & Support provided by IT Services & Marketing and Communications