|

Posted on 13 August 2012

Introduction to HTML Basics – guide part 2

Part two of this guide to the basics of HTML coding will list and explain a bit about some of the most commonly found and most useful elements of HTML: the tags and attributes you need to write your own HTML web page or email with no software more advanced than Notepad.

As before, throughout the guide code is coloured brown for tags, red for attributes, blue for values and green for comments.

This is a link to part one, just in case you missed it before.

Commonly Used and Useful HTML tags and attributes

Make it work, and make it look good

  1. <html>…</html>
    This lets the browser know you are using HTML, and that it should look at the code as such.  The open <html> tag should be at the very beginning of any HTML document, and closing </html> at the very end.

  2. <head>…</head>
    The head element is where information about the page goes, but not content.  It is where you mark the page title (that appears in a web browser as the window title) and meta-data that search engines can looks at.  It is not used for HTML emails.

  3. <body>…</body>
    The body element is where all your content goes, and all on-page content should be within it.

  4. <p>…</p>
    This is the paragraph tag, and is usually what any text you want to be displayed on the web page will be directly inside.  Paragraph tags often, especially with HTML email, will use the style attribute to make sure all the text is the right size, font, colour and so on.  In current versions of Word, it’s like pressing [Enter] and gives extra spacing below before the next line begins.

  5. <br />
    The line break tag ends the current line, meaning anything after will be on a new line.  It’s a bit like pressing [Shift]+[Enter], starting a new line but with no additional spacing.  Break tags are often used without attributes, but using multiple breaks in succession and <br style=”line-height: 12px” />can occasionally solve some line spacing issues when avoiding paragraphs.

  6. <table>…</table>
    The table element should in theory only be used for tabular data – except in HTML emails, where it is necessary for display design to keep things in their rightful place.  This element uses sub-elements to format it properly, and acts as an enclosure for them:

    1. <tr>…</tr>
      This is the table row tag, and marks the start of a new row in the table.  Rows are the horizontal elements, and form the foundation structural elements inside the table.
    2. <td>…</td>
      This is the table data tag, and marks the start of a new ‘cell’ (vertical column cell) inside a table row.  However many <td> you have inside a single row in your table is the number of columns the whole table has.
    3. To cope with having different numbers of cells or columns in different rows, we use the colspan attribute: <td colspan=”2″>…</td> would mean that that data cell spans two columns.  The rowspan attribute works similarly to colspan, but obviously spans rows instead.  In practice, it might look like this:
      <table>
      <tr>
      <td>      single column cell 1</td> <td>single column cell 2</td>
      </tr>
      <tr>
      <td>      single column cell 3</td> <td rowspan=”2″>cell spanning two rows</td>
      </tr>
      <tr>
      <td>      single column cell 4</td>
      <tr>
      <td       colspan=”2″>cell spanning both columns</td>
      </tr>
      </table>

      This exact code would be shown by the browser as:

      single column cell 1 single column cell 2
      single column cell 3 cell spanning two rows
      single column cell 4
      cell spanning both columns

      Note how each sub-element is contained in the one larger – so a data cell goes inside a row, and the rows go inside the table as a whole.

    4. The border attribute in the table tag is very useful.  Whilst you will usually want the final version to have <table border=”0″> for no lines between the rows and cells, having <table border=”1″> is useful for figuring out how the table elements fit together – especially if something doesn’t look like you expected.

  7. <a>…</a>
    This is the hyperlink tag, so everything inside it will be a link.  This will usually be in the format: <a href=http://www.yourlinkhere.com>…</a>

    The <a> tag can encompass text or images.

  8. <img src=”…” />
    The image tag lets you put an image in. It is a self-contained tag, and you put the address for the image source in place of the … in the above.  For severe headache reduction, you may want to use a local address on your PC when creating the email and images, but an online address for the uploaded final image when distributing or publishing the content to the web:

    1. <img src=”C:\Users\my.name\Documents\my-pic.jpg” />
      would let you edit the image on your PC and instantly see the updated result in the web page, but won’t work for anyone on another PC.
    2. <img src=”http://myawesomewebsite.com/images/my-pic.jpg” />
      is how the final distribution version should be instead, remembering to upload the finished image there beforehand.

  9. The width and height attributes are fairly self-explanatory, and have most use for making sure images display at the intended size.  Some browsers or email clients can have trouble displaying images correctly if not given these fundamental instructions, so it’s best practice to use them where possible.  They can also be used to show a pulled-through image smaller than its original size; just make sure you remember to get the aspect ratio correct to avoid distortion.

  10. The style attribute is the usual way of choosing how anything within an element will be displayed.  There are simply loads of different sub-attributes possible within style, so here I’ll go through a few of the most useful and common.

    1. <tag style=”margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px”>…</tag>
      Margins add white space to the edges of the element, useful for aligning text or images nicely.  Usually you want to use a number of pixels (px) for fixed sizes.  Padding is similar to margins, but works on the other side of the element.
    2. <tag style=”color: #000000; font-size: 14px; font-family: Arial, Helvetica, sans-serif”>…</tag>
      This determines font colour, size and the font itself.  We use font-family as best practice in case the user doesn’t have the actual font, and can list several in order of preference.  Serif or sans-serif is the most basic determination for having feet on the characters or not.

  11. <ul>…</ul>
    This is an unordered (i.e. not numbered) list, and encloses the list item elements within it:

    1. <li>…</li>
      This is your list item, which astonishingly marks each item (new line/bullet point) in the list.
    2. In practice therefore, you want something like:<ul>
      <li>      List item one</li><li>List item two</li>
      </ul>

  12. <h1>…</h1>
    This is a Heading 1 tag, and works a bit like a <p> tag but specifically for your most important heading.  There are also <h2> <h3> and so on for less important headings.  Headings are considered important for search engine optimisation (SEO) purposes and should match the content of the page for maximum impact.

  13. <!–  …  –>
    Everything inside this tag is a comment.  It will not be read by the web browser, and is only visible by looking at the page code.  It is usually used for instructional comments, aides-memoires or commonly used data that you may want to hand when coding.  You may find it useful to add your own comments to help you in future as well.
     

Posted by in Guides, Websites.

Leave a comment