CSS: Text Over an Image

There are a few different ways using CSS to display text over an image. This technique is widely used in templates, for example, if you have a look at the sidebar of this website, you will see that it has text over a gradient image! I have done this by setting a background image in CSS, this will be the first way I show you how to display text over an image. Another way to display some text over an image is to use relative positioning.

Beginner HTML Tutorial

This tutorial is for anyone that would like to make a webpage using HTML, it is designed for anyone with no prior knowledge of HTML. But if you have some knowledge on HTML this tutorial will be good to touch up on some of the elements you may have forgoten or have not learnt yet.

As you work your way through this tutorial you will find out how easy HTML code is. HTML is not a programming language but is just a simple code to change the looks of text and layout of content.

This is coming soon.

HTML table Tag

The <table> tag can create tables in HTML, but you must include the <tr> and <td> tags (see the example). The <table> tag can be used anywhere between the opening and closing <body> tags. It is a block-level tag so you may use inline and block-level tags inside this tag.

Table Example

Code Output 
<table border="1">
<tr>
<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>
</tr>
</table>
Row 1, Cell 1 Row 1, Cell 2

Notes

  • You must include the 'border' attribute in the table tag, for borders to show

  • The 'align' and 'bgcolor' attributes are deprecated in HTML 4.01, and are not supported in XHTML 1.0 Strict !DOCTYPE

Attributes for the table tag

Attribute

Description

Value(s)

DOCTYPE

Strict DOCTYPE Attributes

border

Specifies if this tag has a border or not, also how wide the border is.

pixels (px)

Strict, Transitional and Frameset

cellpadding

Sets the amount of space between the cells content and the cells border.

Pixels (px)

Strict, Transitional and Frameset

cellspacing

Sets the amount of space between cells.

Pixels (px)

Strict, Transitional and Frameset

frame

Defines the borders to be shown, borders must be set higher then 0. ie. border="1"

above
below
border
box
hsides
lhs
rhs
void
vsides

Strict, Transitional and Frameset

rules

Defines what vertical or/and horizontal lines to hide, or show. Borders must be set higher then 0. ie. border="1"

all
cols
groups
none
rows

Strict, Transitional and Frameset

summary

Strict, Transitional and Frameset

width

Strict, Transitional and Frameset

Non-Strict DOCTYPE Attributes

align

Transitional and Frameset

bgcolor

Transitional and Frameset

Common attributes for the table tag

class, style, id, title, dir, xml:lang, lang

Javascript Event attributes for the table tag

onmousedown, onmouseup, onclick, ondblclick, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress

HTML bold Tag

The <b> tag/<strong> tag is used to make bold text, the text will become much thicker then normal text.

Where/how To Use The <b>/<strong > Tag

Use in head or body section? body
Inline or Block level tag? Inline
HTML Tag Syntax? <start tag>CONTENT</end tag>
XHTML Tag Syntax? <start tag>CONTENT</end tag>

Bold Example

Code Output
<b>bold text</b> bold text
<strong>strong text</strong> strong text

Notes

  • Use the strong or b tag to make your text stand out.
  • Use the b tag for a pure presentational meaning and use the strong tag for giving your text more meaning to screen-readers.
  • To give your text a bit less 'boldness' use the <i> or <em> tag. They render the text italic.

Common attributes for the bold tag

class, style, id, title, dir, lang

Common attributes for the strong tag

class, style, id, title, dir, lang, xml:lang

Javascript Event attributes for both bold tags

onmousedown, onmouseup, onclick, ondblclick, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress

HTML object Tag

The object tag is used to embed objects such as flash and images etc.

Example

This example shows a YouTube video embedded using the object tag.

Code Output
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/BYIo3lQrm4w&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BYIo3lQrm4w&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Notes

  • Use this tag instead of the applet tag.

Attributes for the object tag

Attribute

Description

Value(s)

DOCTYPE

Strict DOCTYPE Attributes

Non-Strict DOCTYPE Attributes

Common attributes for the object tag

class, style, id, title, dir, xml:lang, lang, accesskey, tabindex

Javascript Event attributes for the object tag

onmousedown, onmouseup, onclick, ondblclick, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress, onfocus, onblur

HTML Italics Tags

The <i> tag/<em> tag are used to make italic or emphasized text, the text will become slanted and thinner then normal text.

Where/how To Use The <i>/<em> Tag

Use in head or body section? body
Inline or Block level tag? Inline
HTML Tag Syntax? <start tag>CONTENT</end tag>
XHTML Tag Syntax? <start tag>CONTENT</end tag>

Example

Code Output
<i>italic text</i> bold text
<em>emphasized text</em> emphasized text

Notes

  • Most browsers display <em> the same as <i>
  • There are no differences between XHTML and HTML for this tag
  • <em> and <i> display text as italic

Common attributes for the i tag

class, style, id, title, dir, lang

Common attributes for the em tag

class, style, id, title, dir, lang, xml:lang

Javascript Event attributes for the i and em tag

onmousedown, onmouseup, onclick, ondblclick, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress

HTML DOCTYPE Tag

The <!DOCTYPE> tag tells the browser what to expect. If it is a Transitional doctype it will tell the browser to use a non-standards mode. If it is a Strict doctype the browser will switch to standards mode. This tag should be placed first on the page, before the <html> tag also if you are using XHTML, this tag does not need to be closed.

Where/how To Use The <!DOCTYPE> Tag

Use in head or body section? Use before the <html> tag
Inline or Block level tag? No level
HTML Tag Syntax? <Tag>
XHTML Tag Syntax? <Tag>

Example - HTML 4.01

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Notes

  • Use the right doctype that is most suitable for your site.

  • If no doctype is present the browser will process the page as Transitional.

  • 'doctype' is 'document type'.

HTML comment Tag

The <!--comment--> tag is used to make hidden comments in html. This tag is great for showing where you are in your html code. Like "<!--Start navigation-->" for the start of your navigation code. Anyone that looks at your source code will be able to see these comments!

Where/how To Use The <!-- Comment --> Tag

Use in head or body section? Anywhere inside a HTML document
Inline or Block level tag? No level
HTML Tag Syntax? <!-- CONTENT -->
XHTML Tag Syntax? <!-- CONTENT -->

Example

Code Output
<!-- This is a comment -->
<h3>Hello this is a normal h3 heading</h3>

Hello this is a normal h3 heading


Notes

  • A comment is ignored by the browser. So you will only be able to see the comment in the source code

  • Comments can also hide code that you do not want the user to see at the apparent moment.

HTML bdo Tag

The <bdo> tag is used to make your text go the opposite or reverse way to the default.

Where/how To Use The <bdo> Tag

Use in head or body section? body
Inline or Block level tag? Inline
HTML Tag Syntax? <start tag>CONTENT</end tag>
XHTML Tag Syntax? <start tag>CONTENT</end tag>

Example

Code Output
<bdo dir="rtl">The bdo tag is used for backwards text - Like in the Hebrew language</bdo> The bdo tag is used for backwards text - Like in the Hebrew language
<bdo dir="ltr">The bdo tag is also used for generating the text left to right</bdo> The bdo tag is also used for generating the text left to right

Notes

  • In XHTML this tag must be closed

Attributes for the base tag

Attribute

Description

Value(s)

DOCTYPE

Strict DOCTYPE Attributes

dir

Specifies the direction of the text.

rtl - Right to Left
ltr - (Left to Right)

Strict, Transitional and Frameset

Common attributes for the bdo tag

class, style, id, title, dir, xml:lang, lang

Javascript Event attributes for the bdo tag

none

HTML basefont Tag

The <basefont> Tag Is Deprecated - Use Styles Instead

The basefont tag is deprecated, use a style or class in the instead. eg. <body style="font-family: arial;">

The reason we do not provide information on deprecated tags, is simple, we don't want you to use outdated html. It just saves a lot of problems such as: browser support and validation errors.

Definition of a Deprecated Tag

Deprecated tags are tags that are no longer specified in the W3C recommendation, it is strongly not advised to use these tags. As browsers are not guaranteed to support them. At HTML Tips I will always try and provide an alternative for a deprecated tag.