Quantcast
submit to reddit       
       

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

Comments

comments powered by Disqus



Follow me