Sami Greenbury
Technology, Teaching & Travel

HTML Basics

This post intends to be a very basic introduction to HTML for people who may need to edit some code but don’t need or want to learn the everything required to build a website. If you have a WordPress site and want to make some tweaks in HTML, this is the place for you.

Terminology

Websites are built with three computer languages: HTML, CSS and JavaScript. Many other languages exist for outputting these but they all run on the server instead of in your browser and are beyond the scope of this post.

HTML is used to define different bits and content of a web page. CSS then defines how the web browser should make the HTML look (colours, layouts, fonts, sizes etc). Many websites use JavaScript to make things more interactive too.

  • HTML stands for Hyper Text Markup Language
  • CSS stands for Cascading Style Sheets
  • JavaScript is not the same as Java.

Anatomy of an HTML Tag

HTML tags are bits of code which wrap the text of the web page, they have different meanings and the CSS causes them to be displayed in different ways. HTML tags look like one of these. Pay attention to spaces and quotation marks.

  1. Self Closing: <tag_name>
  2. Simple: <tag_name>Contents<value>
  3. Regular with Attributes: <tagname attributes=”value”>Contents</tag>

Self Closing HTML Tag

Many tags don’t have any contents, they just tell the browser to do something. A classic example is a line break, if you have a paragraph (see below) and you want to force a new line somehere stick in the br tag:

 <p>The contents of the paragraph goes here<br> this text will be on a new line</p>

Simple HTML Tag

A simple HTML tag is the P tag, it defines a paragraph and you wrap it around the contents.

 <p>The contents of the paragraph goes here</p>

HTML Tag with Attributes

Another tag is the one which creates links, they’re called anchors and the tag name is a, to define where the link should point you must set the “href” attribute. Do this by adding a space after the tag name, putting the attribute name (href) followed by a space and the value for that attribute. You normally want to surround the attribute value with quotes – either single ” or double ‘ are fine.

 <a href="http://www.google.com">Click here to visit Google</a>

Simple HTML tag with CSS Class

CSS works by applying styles to HTML tags which match various types of attribute. A common one is the class. If your web developer has written code to make some links (Anchors) look like buttons you probably just need to add the right class. For example:

 <a class="button" href="http://www.google.com">Click this button to visit Google</a>

Note that you (or someone) will need to have written some CSS to make that class=”button” do anything, check with your designer/developer to find out what your options are for styling things with classes.

Tags:
Categories:

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.