HTML: Symbols and Geometric Shapes

Symbol Entities in HTML & XHTML

Older browsers may not support all the HTML5 entities in the table below.
Chrome has good support. But (currently) only IE 11+ and Firefox 35+ support all the entities.

Example Dec Entity Numeric Entity Description Currancy
Fun
 ★  ★  BLACK STAR
✯ ✯ PINWHEEL STAR
➿ ➿ CURLY LOOP/arrow?
 ⚜  ⚜  ⚜ LEUR-DE-LIS
⛺ ⛺ TENT
⚀ ⚀ Glyph: Die face-1
⚁ ⚁ Glyph: Die face-2
Currency
$ $ $ DOLLAR SIGN
¢ ¢ ¢ Cent Sign
₠ ₠ EURO-CURRENCY SIGN
€ or € € EURO SIGN
¤ ¤ ¤ CURRENCY SIGN
Register
© © © Copyright Sign
® ® ® Registered Sign
™ ™ Trade Mark
HTML Symbol Entities
Example Named Entity Numeric Entity Description Geo
&#9632 &#25A0; BLACK SQUARE
&#9633 &#25A1; WHITE SQUARE
&#9634 &#25A2; WHITE SQUARE WITH ROUNDED CORNERS
&#9635 &#25A3; WHITE SQUARE CONTAINING BLACK SMALL SQUARE
&#9636 &#25A4; SQUARE WITH HORIZONTAL FILL
&#9637 &#25A5; SQUARE WITH VERTICAL FILL
&#9638 &#25A6; SQUARE WITH ORTHOGONAL CROSSHATCH FILL
&#9639 &#25A7; SQUARE WITH UPPER LEFT TO LOWER RIGHT FILL
&#9640 &#25A8; SQUARE WITH UPPER RIGHT TO LOWER LEFT FILL
&#9641 &#25A9; SQUARE WITH DIAGONAL CROSSHATCH FILL
&#9642 &#25AA; BLACK SMALL SQUARE
&#9643 &#25AB; WHITE SMALL SQUARE
&#9644 &#25AC; BLACK RECTANGLE
&#9645 &#25AD WHITE RECTANGLE
&#9646 &#25AE BLACK VERTICAL RECTANGLE
&#9647 &#25AF WHITE VERTICAL RECTANGLE
&#9648 &#25B0 BLACK PARALLELOGRAM
&#9649 &#25B1 WHITE PARALLELOGRAM
&#9650 &#25B2 BLACK UP-POINTING TRIANGLE
&#9651 &#25B3 WHITE UP-POINTING TRIANGLE
&#9652 &#25B4 BLACK UP-POINTING SMALL TRIANGLE
&#9653 &#25B5 WHITE UP-POINTING SMALL TRIANGLE
&#9654 &#25B6 BLACK RIGHT-POINTING TRIANGLE
&#9655 &#25B7 WHITE RIGHT-POINTING TRIANGLE
&#9656 &#25B8 BLACK RIGHT-POINTING SMALL TRIANGLE
&#9657 &#25B9 WHITE RIGHT-POINTING SMALL TRIANGLE
&#9658 &#25BA BLACK RIGHT-POINTING POINTER
&#9659 &#25BB WHITE RIGHT-POINTING POINTER
&#9660 &#25BC BLACK DOWN-POINTING TRIANGLE
&#9661 &#25BD WHITE DOWN-POINTING TRIANGLE
&#9662 &#25BE BLACK DOWN-POINTING SMALL TRIANGLE
&#9663 &#25BF WHITE DOWN-POINTING SMALL TRIANGLE
&#9664 &#25C0 BLACK LEFT-POINTING TRIANGLE
&#9665 &#25C1 WHITE LEFT-POINTING TRIANGLE
&#9666 &#25C2 BLACK LEFT-POINTING SMALL TRIANGLE
&#9667 &#25C3 WHITE LEFT-POINTING SMALL TRIANGLE
&#9668 &#25C4 BLACK LEFT-POINTING POINTER
&#9669 &#25C5 WHITE LEFT-POINTING POINTER
&#9670 &#25C6 BLACK DIAMOND
&#9671 &#25C7 WHITE DIAMOND
&#9672 &#25C8 WHITE DIAMOND CONTAINING BLACK SMALL DIAMOND
&#9673 &#25C9 FISHEYE
&#9674 &#25CA ◊ LOZENGE
&#9675 &#25CB WHITE CIRCLE
&#9676 &#25CC DOTTED CIRCLE
&#9677 &#25CD CIRCLE WITH VERTICAL FILL
&#9678 &#25CE BULLSEYE
&#9679 &#25CF BLACK CIRCLE
&#9680 &#25D0 CIRCLE WITH LEFT HALF BLACK
&#9681 &#25D1 CIRCLE WITH RIGHT HALF BLACK
&#9682 &#25D2 CIRCLE WITH LOWER HALF BLACK
&#9683 &#25D3 CIRCLE WITH UPPER HALF BLACK
&#9684 &#25D4 CIRCLE WITH UPPER RIGHT QUADRANT BLACK
&#9685 &#25D5 CIRCLE WITH ALL BUT UPPER LEFT QUADRANT BLACK
&#9686 &#25D6 LEFT HALF BLACK CIRCLE
&#9687 &#25D7 RIGHT HALF BLACK CIRCLE
&#9688 &#25D8 INVERSE BULLET
&#9689 &#25D9 INVERSE WHITE CIRCLE
&#9690 &#25DA UPPER HALF INVERSE WHITE CIRCLE
&#9691 &#25DB LOWER HALF INVERSE WHITE CIRCLE
&#9692 &#25DC UPPER LEFT QUADRANT CIRCULAR ARC
&#9693 &#25DD UPPER RIGHT QUADRANT CIRCULAR ARC
&#9694 &#25DE LOWER RIGHT QUADRANT CIRCULAR ARC
&#9695 &#25DF LOWER LEFT QUADRANT CIRCULAR ARC
&#9696 &#25E0 UPPER HALF CIRCLE
&#9697 &#25E1 LOWER HALF CIRCLE
&#9698 &#25E2 BLACK LOWER RIGHT TRIANGLE
&#9699 &#25E3 BLACK LOWER LEFT TRIANGLE
&# 9700 &#25E4 BLACK UPPER LEFT TRIANGLE
&# 9701 &#25E5 BLACK UPPER RIGHT TRIANGLE
&# 9702 &#25E6 WHITE BULLET
&# 9703 &#25E7 SQUARE WITH LEFT HALF BLACK
&# 9704 &#25E8 SQUARE WITH RIGHT HALF BLACK
&# 9705 &#25E9 SQUARE WITH UPPER LEFT DIAGONAL HALF BLACK
&# 9706 &#25EA SQUARE WITH LOWER RIGHT DIAGONAL HALF BLACK
&# 9707 &#25EB WHITE SQUARE WITH VERTICAL BISECTING LINE
&# 9708 &#25EC WHITE UP-POINTING TRIANGLE WITH DOT
&# 9709 &#25ED UP-POINTING TRIANGLE WITH LEFT HALF BLACK
&# 9710 &#25EE UP-POINTING TRIANGLE WITH RIGHT HALF BLACK
&# 9711 &#25EF LARGE CIRCLE
&# 9712 &#25F0 WHITE SQUARE WITH UPPER LEFT QUADRANT
&# 9713 &#25F1 WHITE SQUARE WITH LOWER LEFT QUADRANT
&# 9714 &#25F2 WHITE SQUARE WITH LOWER RIGHT QUADRANT
&# 9715 &#25F3 WHITE SQUARE WITH UPPER RIGHT QUADRANT
&# 9716 &#25F4 WHITE CIRCLE WITH UPPER LEFT QUADRANT
&# 9717 &#25F5 WHITE CIRCLE WITH LOWER LEFT QUADRANT
&# 9718 &#25F6 WHITE CIRCLE WITH LOWER RIGHT QUADRANT
&# 9719 &#25F7 WHITE CIRCLE WITH UPPER RIGHT QUADRANT
&# 9720 &#25F8 UPPER LEFT TRIANGLE
&# 9721 &#25F9 UPPER RIGHT TRIANGLE
&# 9722 &#25FA LOWER LEFT TRIANGLE
&# 9723 &#25FB WHITE MEDIUM SQUARE
&# 9724 &#25FC BLACK MEDIUM SQUARE
&# 9725 &#25FD WHITE MEDIUM SMALL SQUARE
&# 9726 &#25FE BLACK MEDIUM SMALL SQUARE
&# 9727 &#25FF LOWER RIGHT TRIANGLE

Symbol Entities in HTML & XHTML

Example Named Entity Numeric Entity Description
ƒ ƒ ƒ Latin small f with hook
Α Α Α Greek capital letter alpha
Β Β Β Greek capital letter beta
Γ Γ Γ Greek capital letter gamma
Δ Δ Δ Greek capital letter delta
Ε Ε Ε Greek capital letter epsilon
Ζ Ζ Ζ Greek capital letter zeta
Η Η Η Greek capital letter eta
Θ Θ Θ Greek capital letter theta
Ι Ι Ι Greek capital letter iota
Κ Κ Κ Greek capital letter kappa
Λ Λ Λ Greek capital letter lambda
Μ Μ Μ Greek capital letter mu
Ν Ν Ν Greek capital letter nu
Ξ Ξ Ξ Greek capital letter xi
Ο Ο Ο Greek capital letter omicron
Π Π Π Greek capital letter pi
Ρ Ρ Ρ Greek capital letter rho
Note: There’s no Sigmaf, ” final sigma”, ΢ defined in iso-grk
Σ Σ Σ Greek capital letter sigma
Τ Τ Τ Greek capital letter tau
Υ Υ Υ Greek capital letter upsilon
Φ Φ Φ Greek capital letter phi
Χ Χ Χ Greek capital letter chi
Ψ Ψ Ψ Greek capital letter psi
Ω Ω Ω Greek capital letter omega
α α α Greek small letter alpha
β β β Greek small letter beta
γ γ γ Greek small letter gamma
δ δ δ Greek small letter delta
ε ε ε Greek small letter epsilon
ζ ζ ζ Greek small letter zeta
η η η Greek small letter eta
θ θ θ Greek small letter theta
ι ι ι Greek small letter iota
κ κ κ Greek small letter kappa
λ λ λ Greek small letter lambda
μ μ μ Greek small letter mu
ν ν ν Greek small letter nu
ξ ξ ξ Greek small letter xi
ο ο ο Greek small letter omicron
π π π Greek small letter pi
ρ ρ ρ Greek small letter rho
ς ς ς Greek small letter final sigma
σ σ σ Greek small letter sigma
τ τ τ Greek small letter tau
υ υ υ Greek small letter upsilon
φ φ φ Greek small letter phi
χ χ χ Greek small letter chi
ψ ψ ψ Greek small letter psi
ω ω ω Greek small letter omega
ϑ ϑ ϑ Greek small letter theta symbol
ϒ ϒ ϒ Greek upsilon with hook symbol
ϖ ϖ ϖ pi symbol
• • bullet
… … horizontal ellipsis
′ ′ prime
″ ″ double prime
‾ ‾ overline
⁄ ⁄ fraction slash
℘ ℘ script capital
ℑ ℑ blackletter capital I
ℜ ℜ blackletter capital R
™ ™ trade mark sign
ℵ ℵ alef symbol
← ← leftward arrow
↑ ↑ upward arrow
→ → rightward arrow
↓ ↓ downward arrow
↔ ↔ left right arrow
↵ ↵ downward arrow with corner leftward
⇐ ⇐ leftward double arrow
⇑ ⇑ upward double arrow
⇒ ⇒ rightward double arrow
⇓ ⇓ downward double arrow
⇔ ⇔ left-right double arrow
∀ ∀ for all
∂ ∂ partial differential
∃ ∃ there exists
∅ ∅ empty set
∇ ∇ nabla
∈ ∈ element of
∉ ∉ not an element of
∋ ∋ contains as member
∏ ∏ n-ary product
∑ ∑ n-ary summation
− − minus sign
∗ ∗ asterisk operator
√ √ square root
∝ ∝ proportional to
∞ ∞ infinity
∠ ∠ angle
∧ ∧ logical and
∨ ∨ logical or
∩ ∩ intersection
∪ ∪ union
∫ ∫ integral
∴ ∴ therefore
∼ ∼ tilde operator
≅ ≅ approximately equal to
≈ ≈ almost equal to
≠ ≠ not equal to
≡ ≡ identical to
≤ ≤ less-than or equal to
≥ ≥ greater-than or equal to
⊂ ⊂ subset of
⊃ ⊃ superset of
⊄ ⊄ not a subset of
Note: ⊅ , ⊅ “not a superset of” is not defined.
⊆ ⊆ subset of or equal to
⊇ ⊇ superset of or equal to
⊕ ⊕ circled plus
⊗ ⊗ circled times
⊥ ⊥ up tack
⋅ ⋅ dot operator
⌈ ⌈ left ceiling
⌉ ⌉ right ceiling
⌊ ⌊ left floor
⌋ ⌋ right floor
⟨ 〈 left-pointing angle bracket
⟩ 〉 right-pointing angle bracket
Playing Card Categories / Suit
◊ ◊ lozenge
♠ ♠ black (solid) spade suit
♣ ♣ black (solid) club suit
♥ ♥ black (solid) heart suit
♦ ♦ black (solid) diamond suit

WordPress: WooCommerce: Shortcodes

WooCommerce Shortcode to paste into your WordPress Page/Post

WooCommerce comes with a number of useful shortcodes to allow quick insertion of WooCommerce related content within posts and pages. One of these shortcodes can be used to display featured products like so:

[featured_products per_page="12" columns="4"]

The above would output the featured products in a grid (table).

Hosting: Dotster: WordPress: WooCommerce

These are instructions on how to stop getting an error with WordPress, a large theme, and the plugin WooCommerce.

It may look like a plugin error, and it might be, but it could be a memory issue.
You have nothing to lose by increasing the memory of your configuration (wp-config.php).


This may have happened to you of a large Theme.

Went To: Menu (left side) > Appearance > Customize


You may have seen this:

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

The application (plugin and/or theme) may need more memory than PHP is allowing to give it. Thus, you may be experiencing this error/issue. The default PHP memory limit is 64MB. However, you can increase memory_limit for your account using php.ini at https://www.dotster.com/controlpanel/cgiManagement/PHPplus.bml. Search for memory_limit and set the value and click ‘Save’.

Please note that 128 MB is the maximum memory_limit which Dotster will set for an account that is hosted on a shared hosting platform.

If you have any further questions, please chat with dotster and have them set up a ticket at https://www.dotster.com/chat/. They can make the change for you.


Do It Yourself

Be aware that this section requires advanced knowledge of FPT and coding; it is not basic.

Edit your wp-config.php file by using FTP application

Open – wp-config.php, then add memory by Adding this to the very bottom, right before the line that says, “Happy Blogging”:

define('WP_MEMORY_LIMIT', '256M');

or add it in the middle of this

/** The Database Collate type. Don’t change this if in doubt. */
define(‘DB_COLLATE’, ”);
define( ‘WP_MEMORY_LIMIT’, ‘256M’ );
/**#@+
* Authentication Unique Keys and Salts.

define( ‘WP_MEMORY_LIMIT’, ‘256M’ );

 

GoTo: Menu (left side) > Appearance > Customize You will see this error:

GoTo: Menu (left side)
> Appearance  > Customize 
You will see this error:
It looks like the application (plugin or theme) needed more memory than PHP was allowed to give it. Thus, you were experiencing the issue. The default PHP memory limit is 64MB. However, you can increase memory_limit for your account using php.ini at https://www.dotster.com/controlpanel/cgiManagement/PHPplus.bml . Search for memory_limit and set the value and click 'Save'. Please note that 128 MB is the maximum memory_limit which we can set for your account as it is hosted in shared hosting platform.

HTML: Tables: Attribute: valign

Hyper Text Markup Language

Markup:

<tr valign=”” > = Vertical-aligned rows
<tr valign=”top”>
<tr valign=”middle”>
<tr valign=”bottom”>


<table style=”height:150px”>
<tr valign=”top”>
<th>Top</th>
<th>Row</th>
</tr>
<tr valign=”middle”>
<td>Middle</td>
<td>Row</td>
</tr>
<tr valign=”bottom”>
<td>Bottom</td>
<td>Row</td>
</tr>
</table>

Top Row
Middle Row
Bottom Row

Note: The valign attribute is not supported in HTML5. Use CSS instead.


 

HTML: Paragraph and Styles

Hyper Text Markup Language

HTML: Paragraph: Style Attribute:

<p> element defines a paragraph:

You can change the look of the paragraph by adding a style.
<p style=”property:value;“> = new look

Example of text having a blue color

<p style=”color:green;”>

Green Text

</p>


Examples of adding a style to your paragraph element:

Example of a color property

HTML Code

Result

<p>Text default</p>

<p style=”color:red;”>Text red</p>

<p style=”color:blue;”>Text blue</p>

<p style=”font-size:36px;”>Text bigger</p>

This is an email link:
Text default

Text red

Text blue

Text bigger


Example of a font-size property

HTML Code

Result

<p style=”font-family:verdana;”>

This is a heading</p>

<p style=”font-family:courier;”>

This is a paragraph.</p>

This is a paragraph.

 

This is a paragraph.


Example of a text-align property

HTML Code

Result

<p style=”text-align:center;”>Centered paragraph.</p>

<p style=”text-align:left;”>Left paragraph.</p>

<p style=”text-align:right;”>Right paragraph.</p>

 

Centered paragraph.

Left paragraph.

Right paragraph.

HTML: Images / Pictures

This is instructions on how to get images into an HTML page.

Images improve the design, appearance, and the communication involved with a webpage.

Example: Image from Local site:
<img src=”NamRef.jpg” alt=”NamRef Logo”>

Example: Image from other website:
<img src=”http://www.gorageous.com/f_images/QR_mobile-Go-sm.png” alt=”Company QR”>

Example: Image: Size of Image
<img src=”NamRef.jpg” alt=”NamRef Logo” width=”200″ height=”200″>
or
<img src=”NamRef.jpg”alt=”NamRef Logo” style=”width:200px;height:200px;”>
NamRef Logo or NamRef Logo

Same result
Example: Image from another folder within website:
<img src=”/f_Images/img-arrow-red.png” alt=”Red Arrow” style=”width:75px;height:24px;”>
Red Arrow

Example: Image from another site (or server):
<img src=”http://troop329az.org/Logo_ScoutingCrew.png” alt=”Red Arrow” style=”width:200px;height:200px;”>

Image Size:

HTML <img> width Attribute:

<img src=”logo.gif” alt=”Logo” height=”100″ width=”100″>
ScoutCrew Logo

<img src=”logo.gif” alt=”Logo” width=”100″>
ScoutCrew Logo

<img src=”logo.gif” alt=”Logo” width=”100″ height=”50″>
ScoutCrew Logo beware distortion

HTML: Links

This is instruction on how to put links into an HTML page.

Link to a web page:
<a href=”url“>link text</a>

Example: Link to another website:
<a href=”http://www.markersinmotion.com/web/“>Visit Markers In Motion – web</a>

Example: Local Link (your website):
<a href=”index.php“>Knowledge Home Page</a>

Example: Local Link: Full Address
<a href=”http://namref.com/search_knowledge/index.php“>Visit NamRef Knowlege Cache</a>

Example: Local Link (your website): New Tab or Window
<a href=”index.php” target=”_new”>Knowledge Home Page</a>

HTML: Email

Hyper Text Markup Language

Markup:

<a href=”mailto:someone@namref.com”> = Email Link
<form action=”#” method=”post” enctype=”text/plain”> = Email Form

Example of Link to mail

<a href=”someone@namref.com”>Email Today!</a>


Example of Link to mail with a subject

HTML Code

Result

<p>This is an email link:
<a href=”mailto:someone@namref.com?Subject=Hello%20Friend” target=”_top”>Send Mail</a>
</p>
This is an email link:
Send Mail
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text with correct spacing.

Example of a form

HTML Code

Result

<h3>Send e-mail to someone@NamRef.com:</h3>

<form action=”mailto:someone@example.com” method=”post” enctype=”text/plain”>
Name:<br>
<input type=”text” name=”name”><br>
E-mail:<br>
<input type=”text” name=”mail”><br>
Comment:<br>
<input type=”text” name=”comment” size=”50″><br><br>
<input type=”submit” value=”Send”>
<input type=”reset” value=”Reset”>
</form>

Send e-mail to someone@namref.com:

Name:

E-mail:

Comment:

 

HTML: Font and Color (Colour)

Hyper Text Markup Language

Markup:

<font> = Font Information
<font color=”#d88ddd”>Jerry</font> = Font color attibute
<span style=”color: #663399;”>Color</span> = Span informtion and style of font
<span style=”color: #000080; style=”font-size: large;”>color, size</span> = Color and size

Markup: size

<font size=”6″>This is some text with 6!</font> = Font size attibute
This is some text!
<font size=”-2″>This is some text with -2!</font> = Font size attibute
This is some text with -2!

HTML: Tables

Hyper Text Markup Language

Markup:

<table> = Table for information
<th> = Table Header of data (Column)
<tr> = Row within table
<td> = Data Cells within Table (Column)

Example

HTML Code

Result

<table style=”width: 100%;”>
<tbody>
<tr align=”left” valign=”top”>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
</tr>
<tr>
<td>Karina</td>
<td>Bolivia</td>
<td>555.555.5551</td>
</tr>
<tr>
<td>Michael</td>
<td>Grecko</td>
<td>555.555.5552</td>
</tr>
<tr>
<td>Betsy</td>
<td>Boston</td>
<td>555.555.5553</td>
</tr>
</tbody>
</table>
&nbsp;</td>
</tr>
</tbody>
</table>
Firstname Lastname Phone
Karina Bolivia 555.555.5551
Michael Grecko 555.555.5552
Betsy Boston 555.555.5553

(beware of smart quotes)



Attributes:

<td rowspan=”2″> = Expand the row down (the column)
<td colspan=”2″> = Expand the data across the row ( of columns)

Data Cells can Span multiple rows
<th rowspan=”2″> or <td rowspan=”2″>

<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Kather</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>555.555.7771</td>
</tr>
<tr>
<td>555.555.7772</td>
</tr>
</table>
Name: Katherine Core
Telephone: 555.555.7771
555.555.7772

Data Cells can Span multiple columns
<th colspan=”2″> or <td colspan=”2″>

<table width=”99%” border=”1″ cellspacing=”5″ cellpadding=”5″>
<tr>
<td colspan=”2″>First and Last</td>
<td>Phone</td>
</tr>
<tr>
<td>Jerry</td>
<td>Band</td>
<td>555.666.7777</td>
</tr>
</table>
First and Last Phone
Jerry Band 555.666.7777