HTML Basics

FoodCommerce themes expose all the HTML and CSS code that make up your web pages. The HTML language is not overly complicated and having a basic understanding will mean you can make simple changes without having to employ an expert.

Our template themes

Specific references to Bootstrap classes will be highlighted as they will only apply if you are using our Bootstrap-based themes or a derivative of them. Generally you should use Bootstrap classes if they are available to you rather than CSS styles.

HTML tag basics

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
  • When you are using a combination of tags they must be nested inside each other like
    <em><strong>your text...</strong></em>

 

Common tags

  • <h1> <h2> <h3> <h4> <h5> and <h6> are headings with <h1> being the biggest and <h6> the smallest.
  • <p> is a paragraph.
  • <a> is a hyperlink used to link some text, or an image, to another web page.
  • <img> is used to insert an image.
  • <div> is used to group block-elements together to format them with CSS styles.
  • <span> is used to group inline-elements together to format them with CSS styles.

 

To create a hyperlink to another page use the <a> tag.

The href attribute in the opening tag contains the destination page. This is followed by the text that makes up the link and then the closing tag.

To find out more go to the <a href="/store/documentation/deliveryinfo/">delivery page</a>.

To find out more go to the delivery page

Note that as the destination is a page in the same website we referenced it relative to the website’s root and would recommend you do this rather than putting the complete URL.

 

Emphasising text

Bold text

To make a section of text bold enclose it in <strong> tags.

We deliver on <strong>Tuesdays</strong> and <strong>Fridays</strong>.

We deliver on Tuesdays and Fridays.

 

Italic text

To make a section of text italic enclose it in <em> tags.

We deliver on <em>Tuesdays</em> and <em>Fridays</em>.

We deliver on Tuesdays and Fridays.

 

Small text

To make a section of text small enclose it in <small> tags.

<small>Our offer only applies to orders delivered on Tuesdays.</small>

Our offer only applies to orders delivered on Tuesdays.

 

Big text

If your HTML doctype declaration is not HTML5 then you can use the <big> tag similar to <small> tag example above.

If your HTML doctype declaration is <!DOCTYPE html> then it is HTML5 and you will need use CSS styles to accomplish this.

We deliver on <span style="font-size:1.3em;">Tuesdays</span> and <span style="font-size:1.6em;">Fridays</span>.

We deliver on Tuesdays and Fridays.

The "em" unit of measure - 1em is equal to the current font size. 2em means 2 times the size of the current font.

Bootstrap theme - you could instead use the class lead like <span class="lead">.

 

When you use more than one tag they must be nested

We deliver on <em><strong>Tuesdays</strong></em> and <strong><em>Fridays</em></strong>.

We deliver on Tuesdays and Fridays.

 

Inserting images

To insert an image on the page use the <img> tag. There are two required attributes src and alt.

src stands for source and is the URL of the location where the image is stored. Normally this would be an image you have uploaded into "media and files".

alt stands for alternative text and is used when the image cannot be displayed.

Important! - resize your images before uploading them into "media and files". Big images will take ages for the visitor to download and therefore make your website very slow, even unuseable. The good news is there are now many free websites that make this very easy to do. Just Google "resize and crop images".

<img src="/media/shopowner.jpg" alt="shop owner">

shop owner

 

Positioning your image

To float your image to one side with your text wrapping around it use the CSS style float.

After you have floated an element you need to clear it to stop it merging into other unrelated elements.

<img style="float: right;" src="/media/shopowner.jpg" alt="shop owner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <div style="clear: both;"></div>

shop ownerLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bootstrap theme

You could instead use the classes pull-left or pull-right to float your images and the class clearfix to clear the floats:

<img class="pull-right" src="/media/shopowner.jpg" alt="shop owner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...<div class="clearfix"></div>

 

Putting space around your image

Use the CSS style margin to put space around your image.

The margin style sets the margins on all four sides in one go starting with the top going clockwise. The following example set the top margin at nothing, right margin at nothing, bottom margin at 20 pixels and the left margin at 40 pixels.

Note that both the float and margin styles are contained in a single style attribute and are separated by a semi-colon and a space.

<img style="float: right; margin: 0 0 20px 40px;" src="/media/shopowner.jpg" alt="shop owner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <div style="clear: both;"></div>

shop ownerLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Bootstrap theme

There are image classes available in Bootstrap, img-rounded, img-circle, img-thumbnail and img-responsive that apply additional styles (see http://getbootstrap.com/css/#images). Note that when you use more than one class they are contained in a single class attribute separated by a space:

<img class="img-thumbnail img-responsive" src="/media/shopowner.jpg" alt="shop owner">

 

Common mistakes

  • The most common mistake is omitting the closing tag, or incorrectly writing it as an opening tag.
  • The other thing to look out for is tags that are incorrectly nested.
  • If CSS styles are not working check the syntax. The most common error is that the colon is actually a semi-colon, and vice-versa.

 

See also:

W3Schools.com - an excellent website with HTML and CSS references, examples and tutorials. The place to go if you want to know a little bit more.