Quantcast
submit to reddit       
       

HTML Basics

HTML is the language that's used to format web pages. HTML tags are strings in angle brackets, and these tags are used to format text in a way that web browsers can decode. There's usually an opening tag and a closing tag, where the closing tag has a '/' before the tag name.

Header tags

This is an example of a header tag used to format text as a header:

<h1>Hello World!</h1>

This is how that line of code is displayed in a browser:

Hello World!

The tags and the content between them are known as an HTML element. There are several different levels of header tag from h1 to h6, with h1 being the largest, and h6 for smaller sub-headings.

HTML Links

Some tags need to be used with attributes. One example of this is the 'a' tag which is used to create links. A link must point to a location on the web, and this location is set in the href attribute. This code creates a link to this site's front page:

<a href="http://raspberrywebserver.com">Raspberry Web Server</a>

and here's what the link looks like:

Raspberry Web Server

The text between the tags is known as the link anchor, and this is the text that people will see when they look at the link. The href attribute is the address that the link points to. In this example I have used an absolute address that includes 'http://' with the site's domain name. An alternative is to use a relative address which simply points to the root of the server's web directory:

<a href="/">Raspberry Web Server</a>

Here's another example of a relative link:

<a href="/cgiscripting/writing-cgi-scripts-in-python.html">Writing CGI scripts in Python</a>

You can make a link open in a new tab by using the target attribute:

<a href="/cgiscripting/writing-cgi-scripts-in-python.html" target="_blank">Writing CGI scripts in Python</a>

Paragraphs

<p>Paragraphs are contained in <p> tags. Wrapping text in p tags ensures that browsers display text as a block that starts on a new line, and has some space beneath it.</p>


Images

Images can be placed in web pages using the img tag:

<img src="/img/rpi_cluster_400.jpg" height="144" width="186" alt="Raspberry Pi Cluster" />

This code will embed and image in a page:

Raspberry Pi Cluster

The height and width attributes specify how much space the image will take up on the page. The alt attribute is an alternate title that's displayed in text browsers in place of the image. Note that there's no closing tag, just a '/' at the end of the opening image tag.

An image tag can be wrapped in link tags like this:

<a href="http://raspberrywebserver.com"><img src="/img/rpi_cluster_400.jpg" height="144" width="186" alt="Raspberry Pi Cluster" /></a>

Now when the image is clicked on, it takes you to this site's home page:

Raspberry Pi Cluster

Lists

Lists are implemented using the ul (un-ordered list) and li (list items) tags. The ul tags are used to contain several list items:

<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>

Indentation isn't compulsory like it is in Python, but it helps to make code more readable. This code will display the list items as a list of bullet points:

  • First item
  • Second item
  • Third item

Tables

Tables are also made from a combination of tags. The table tags are used at the beginning and end of the table. Rows are wrapped in tr tags, and data in individual cells is wrapped in td cells.

<table border="1"> <tr> <td>Row 1, column 1</td> <td>Row 1, column 2</td> </tr> <tr> <td>Row 2, column 1</td> <td>Row 2, column 2</td> </tr> <tr> <td>Row 3, column 1</td> <td>Row 3, column 2</td> </tr> </table>

The table will be displayed as follows:

Row 1, column 1 Row 1, column 2
Row 2, column 1 Row 2, column 2
Row 3, column 1 Row 3, column 2

Divs

Divs are for grouping HTML elements together. CSS can be used to apply a style to everything in a div:
<div style="color:blue"> <h3>This is a div</h3> <p>CSS styling can be applied to all the elements in a div.</p> </div>

This code will be displayed like this:

This is a div

CSS styling can be applied to all the elements in a div.

Note, it's possible to use the style attribute to set CSS in HTML code, but generally CSS should either be in the head section, or it should be in a CSS file. I'm just using the style attribute to show how CSS styles can be applied to the contents of a div.

Divs can be assigned a height, and width. They are used to control the layout of a page. All the different coloured panels on this page are divs.


Formatting tags

HTML tags can also be used to format text. The strong tag is used for bold text, the em tag is used for italics, and the u tag can be used for underlined text:

<strong>bold</strong>
<em>italics</em>
<u>underlined</u>

See also: http://www.w3schools.com/html/default.asp.


Comments

Comments

comments powered by Disqus



Follow me