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

Making a complete HTML page

A web page should start with a doctype declaration tells browsers that the page is HTML. In the latest HTML standard, HTML5, the doctype is declared like this:

<!DOCTYPE html>

The rest of the document should be wrapped in <html> tags. The html element usually contains a head section which contains meta data about the page, and a body element, which contains the page's content. The code for a very simple web page might look like this:

<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <p>This is the page content.</p> </body> </html>

Follow this link to see this HTML simple sample page.

The title tags defines the text that will show up in a browser's title bar.

The head section can contain several different types of information that may not be visible in the page content. This may include meta tags, a meta description of the page, CSS code and Javascript.

Meta Data

Search engines use meta data to determine what websites are about and how they should be indexed. Search engines used to use meta keywords or tags to understand what a web page is about.

<meta name="keywords" content="HTML, sample page">

People started to over use tags, so search engines now pay very little attention to meta keywords. Google's bots are more interested in a page's meta description.

<meta name="description" content="This is a sample page to illustrate how to write HTML code for a web page.">

The meta description is usually a sentence or two which describes the page's content.

CSS

CSS code is used to define the look and feel of a page.

<style> body { font-family: arial,verdana,sans-serif,Georgia, "Times New Roman", Times, serif; text-align:center; background:#cceeff; } h1 { text-shadow: 5px 5px 5px #aaaaaa; } </style>

This code sets several styles for everything within the body element, and it sets some styles for the h1 HTML tag. CSS code can also be stored in a seperate file and linked to from the head section:

<link rel="stylesheet" type="text/css" href="/css_file.css">

Scripts

The code for Javascript functions can be included in the head section inside script tags:

<script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script>

When this function is called, it will display a pop-up message in the user's browser.

The whole page

After the head section has been closed with the </head> tag, all the following content should be contained in tags. The code for a complete web page might look like this:

<!DOCTYPE html> <html> <head> <title> Sample page </title> <style> body { font-family: arial,verdana,sans-serif,Georgia, "Times New Roman", Times, serif; text-align:center; background:#cceeff; } h1 { text-shadow: 5px 5px 5px #aaaaaa; } </style> <meta name="keywords" content="HTML, sample page"> <meta name="description" content="This is a sample page to illustrate how to write HTML code for a web page."> <script type="text/javascript"> function message() { alert("This is a Javascript alert box.") } </script> </head> <body> <h1>Hello World!</h1> <p>This is the page content.</p> <button onclick="message()">Click me!</button> </body> </html>

Follow this link to see this HTML sample page.

To serve this page from your Pi, you'll need to install Apache. Make sure your Pi is connected to the internet, and enter these commands in a terminal window:

sudo apt-get update sudo apt-get upgrade sudo apt-get install apache2

Copy the HTML code above and save it in /var/www/index.html. You can open this file with this command:

sudo leafpad /var/www/index.html

Delete the code for Apache's default page, and replace it with the code above. Save it, and then make sure it can be read by other users with this command:

sudo chmod a+r /var/www/index.html

Type this command to find out your Pi's IP address:

ifconfig

Now visit your Pi's IP address in your browser to see the sample page. You should see the same page as this: HTML sample page.


Comments

CSS - Cascading Style Sheets

CSS is a language used by web browsers to format HTML. When a browser downloads a page, it needs to download a site's CSS code so that it knows how to format the HTML in the page. CSS can either be embedded in a web page's head section enclosed in <style></style> tags, or it can be referenced in the head section using a link tag like this:

<link rel="stylesheet" type="text/css" href="http://somedomain.com/somefile.css" />

Applying styling to html elements

In CCS code selectors are used to identify HTML elements. Style properties can be applied to CSS selectors. For example if you wanted all h1 elements to be displayed in red, you could use this CSS code:

h1 { color: blue; }

Note that the property is enclosed in braces, and the property is indented to make the code more readable. A colon is used to separate the property and the value that's assigned to it. Make sure you put a semicolon after each property, otherwise that property will be ignored by browsers.

You can create custom CSS selectors for HTML elements using classes and IDs. CSS IDs are used for single HTML elements on a page. For example, a typical web page might have a div element for the page banner. There's only one banner on the page, so a it could be created with a CSS id. In the HTML code where the div is created, it can be given an ID like this:

<div id="page_banner"> <h1>Site title</h1> <h2>Tag line</h2> </div>

In the CSS code for this page, the selector for this element uses the name specified in the div id attribute, and it starts with a '#' to indicate that it's an ID:

#page_banner { text-align:left; background:#cccccc; padding:10px; margin:5px; }

Styling can be applied to an element contained inside another element. The following CSS selector applies to all h1 elements contained in the #page_banner element:

#page_banner h1 { font-family:Impact; }

CSS classes are selectors that can be used when there are several instances of an HTML element on the same page. Suppose we want to apply styling to divs that contain posts on a blog so that each post is displayed in a grey rectangle. The HTML code might look something like this:

<div class="post"> <h1>Post title</h1> <p>This is a sample post</p> </div> <div class="post"> <h1>Title of another post</h1> <p>This some text in another sample post</p> </div>

The CSS code for this selector would look like this:

.post { background:#eeeeee; padding:10px; margin:5px; }

Note that the selector begins with a '.' instead of a '#'.

Styling HTML links

By default, links are displayed in blue, and then shown in purple after you've visited them. These different colours indicate different states of the link - visited and unvisited. Styling can be applied to links using the 'a' selector, and styling for different states can be set using these state modifiers: link, visited and hover. Styling for the hover state is applied when the mouse cursor is over a link.

a:link { color:green; } a:hover { color:orange; } a:visited { color:red; }

Follow this link to see how the examples look on a web page.


Comments



Follow me