HTML Code

(Last Updated On: )

What is HTML code?

HTML code is a set of symbols that tells a browser (such as Firefox, Google Chrome or Safari) how to display text and images on the Internet.  For instance, you may want to have this sentence in an article: My cat has blue eyes.  You want “blue” to be in the colour blue and the rest of the text to be in the default colour.  So, you could type it this way: My cat has <span style=“color:blue”>blue</span> eyes. In this case the symbols are called tags, specifically span tags.

An HTML tag is a hidden keyword within a web page that determines how a browser will display the content.

How to use an HTML tag

With a few exceptions, every start tag must have an end tag.

For this example, we will simplify the example above and then expand upon it in the next section.  Instead of discussing the span tag, let’s talk about the paragraph tag.  So, the “blue eyes” sample above could be expressed as a paragraph like this: <p>My cat has <span style=“color:blue”>blue</span>
eyes
</p>.  

In our new example the letter p stands for paragraph. The end tag uses the same symbol (p) with a slash in front.

Never cross start and end tags

In the first example above, the span tags were used within paragraph tags.  It is very important that you never cross the tags.  If you begin the text with the paragraph and then the span tag in that order, you must end with the span tag and then the paragraph tag in that order.

For instance, suppose you want an H3 heading with italicized text.  The HTML code would look like this: <h3><em>My H3 heading</em></h3>. That code would produce this heading:

My H3 heading


Earn a percentage of the selling price for every book sold.

Click here to learn more.

Tag attributes

In the example above, <span style=“color:blue”> is the start tag and </span> is the end tag.  Keep in mind that on a web page “blue” was supposed to be coloured blue.  In order to do that, we had a start tag in front of “blue” and an end tag after “blue”.  In order make the span change something, we had to give it a modifier called an “attribute”.

<p>My mother has <span style=“color:blue”>blue</span>
eyes
</p> would produce this text
: My mother has blue eyes.

Give an exception to the HTML tag rule about using an end tag

There are a few tags where it is not necessary to use an end tag.  For instance, when you want to start on a new line, you simply use the line break tag <br>.

List of all HTML tags

Go to the w3schools website to find a list of all HTML codes.

HTML table

If you wish to make a table, use the code below as a guide.

<table style=”width:100%”>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Learn more about HTML tables.

More information about HTML code

The w3schools website has a great deal of information about how to use HTML code.  Here’s a good trick for using the w3schools website: In your search engine, use the word “w3schools” followed by the keyword of what you are looking for.

For instance, suppose you want to know how to make something bold.  You would enter this into your search engine: w3schools bold.  That will give you a page showing you how to make text bold.

Now here’s a really special feature: If you scroll down, you will find a green button saying “try it yourself”. Click on that button and you will get a new window in which you can play around with the bold tag.  You can copy and paste the start and end tags somewhere else within the content.  Click “see result” and you will see how the tag changes the text.

Sample WordPress widget HTML code

The code below is used to promote an ebook called How to Serve Customers with Disabilities. It would be inserted beneath the image of the ebook.

How to Increase from disabilities-introduction: <strong>Order this training manual now.</strong>
<img class=”alignnone size-medium wp-image-257″ src=”http://howtoincreaseyourrestaurantsales.com/wp-content/uploads/2018/07/Alternate-Cover-of-Ebook-232×300.png” alt=”” width=”232″ height=”300″>

If you want the e-book PDF file emailed to a Canadian email address:

<form action=”https://www.paypal.com/cgi-bin/webscr” method=”post” target=”_top”><input name=”cmd” type=”hidden” value=”_s-xclick”>
<input name=”hosted_button_id” type=”hidden” value=”LQ8JSVLZK5AAQ”>
<input alt=”PayPal – The safer, easier way to pay online!” name=”submit” src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif” type=”image”>$35 CAD
<img src=”https://www.paypalobjects.com/en_US/i/scr/pixel.gif” alt=”disabilities” width=”1″ height=”1″ border=”0″></form>_____________________

If you want the e-book emailed outside of Canada:

<form action=”https://www.paypal.com/cgi-bin/webscr” method=”post” target=”_top”><input name=”cmd” type=”hidden” value=”_s-xclick”>
<input name=”hosted_button_id” type=”hidden” value=”G65DA7TJ4GX4A”>
<input alt=”PayPal – The safer, easier way to pay online!” name=”submit” src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif” type=”image”>$27 USD
<img src=”https://www.paypalobjects.com/en_US/i/scr/pixel.gif” alt=”disabilities” width=”1″ height=”1″ border=”0″></form>&nbsp;

<hr>

How to increase… training: <strong>Order this training manual now.</strong>
<img class=”size-medium wp-image-257 alignright” src=”http://howtoincreaseyourrestaurantsales.com/wp-content/uploads/2018/07/Alternate-Cover-of-Ebook-232×300.png” alt=”” width=”232″ height=”300″>

If you want the e-book PDF file emailed to a Canadian email address:

<form action=”https://www.paypal.com/cgi-bin/webscr” method=”post” target=”_top”><input name=”cmd” type=”hidden” value=”_s-xclick”>
<input name=”hosted_button_id” type=”hidden” value=”LQ8JSVLZK5AAQ”>
<input alt=”PayPal – The safer, easier way to pay online!” name=”submit” src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif” type=”image”>$35 CAD
<img src=”https://www.paypalobjects.com/en_US/i/scr/pixel.gif” alt=”train staff” width=”1″ height=”1″ border=”0″></form>_____________________

If you want the e-book emailed outside of Canada:

<form action=”https://www.paypal.com/cgi-bin/webscr” method=”post” target=”_top”><input name=”cmd” type=”hidden” value=”_s-xclick”>
<input name=”hosted_button_id” type=”hidden” value=”G65DA7TJ4GX4A”>
<input alt=”PayPal – The safer, easier way to pay online!” name=”submit” src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif” type=”image”>$27 USD
<img src=”https://www.paypalobjects.com/en_US/i/scr/pixel.gif” alt=”train staff” width=”1″ height=”1″ border=”0″></form>&nbsp;

 

 


VideoGuy Enns

Author: VideoGuy

I've been a professional educator for years. Right now I'm creating short tutorials about many facets of video creation.

One thought on “HTML Code”

Leave a Reply

Your email address will not be published. Required fields are marked *