» » » » » Computer programming in two minutes – Web (Create a web site)

Computer programming in two minutes – Web (Create a web site)

Create a web site

A website is a set of web pages sent from a remote server to your browser.

A web page is an HTML document consisting of a head and a body (<html> <head> </ head> <body> </ body> </ html>). The head contains information of the document such as title (<title>), appearance (<style>) and its animation (<script>); while the body of the document is displayed.

Create the HTML document in a text editor with syntax highlighting. Save it (*.html) and open it with a browser:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

<head>
<title>Web page</title>

<script type=“text/javascript”>
alert(“Hello world!”);
</script>

<style type=“text/css”>
body {
background: green;
}
#division_une {
border:1px dotted red;
background: white;
}
</style>

</head>

<body>
Content.

<div id=“division_une”>
First area of the contant.
</div>

<div id=“division_deux”>
Second <a href=“https://www.setthings.com”> <!– an anchor tag hyperlink –>
area
</a>
of the content.
</div>
</body>

</html>

The browser displays the document title, alert the user and displays the body of the document according to appearance declared. Congratulations, you’ve written your first HTML document containing CSS style declarations and JavaScript instructions (JavaScript is a language executed by the browser to display a web page, at least it is mostly used for that)!

Share this document on the Internet, for that you need a server, that is to say, software that “serves” documents to visitor queries.

Your computer can host your server, or you can use a remote computer. You need to install a server like Apache or nginx and run it. A directory /public_html is then used by the software when requesting http://your_IP_address from the Internet and http://localhost from your computer.

The index of your website

Have a server, that is to say, a directory /public_html served at http request to your computer (local or remote).

Create a document (index.html) in the /public_html and make a http request to the server (via your browser): the site index is served.

If your document is available on the Internet, you can check the w3c validator.

Server-side program

Rename your file (*.html) in (*.php) and add PHP – Hypertext Preprocessor instructions, executed by the server and delivering an html document.

<? php

$titre=“Title of the document”;
$alerte=“Hello world !”; //the alert displayed between the two areas of the body.

$msg=$_GET[‘msg’];
if (!isset($msg)) {$msg=“Default message.”}

?><!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

   <head>
      <title><?php echo $titre; ?></title>

      <script type=”text/javascript”>
          function Prompt_et_alerte() {
               alert(prompt(“Your mouse left the anchor !”));
          }
      </script>

      <style type=”text/css”>
          body {
              background: green;
            }
          #division_une {
              border:1px dotted red;
              background: white;
            }
      </style>

   </head>

   <body>

      <div id=”area_one”>
         First area of the content. <?php echo $msg; ?>
      </div>  
    
      <script type=”text/javascript”>
          alert(<?php echo $alerte; ?>);
      </script>

      <div id=”division_deux”>
          Second <a href=”https://www.setthings.com” onmouseout=”Prompt_and_alert();”> <!– Javascript is executed when the mouse leaves the anchor –>
                   area
                  </a>
          of the content.
      </div>
   </body>

</html>

Make a query to the server and read the source code (ctrl+U) of the served html page.

PHP has been interpreted by the server, the browser displays the resulting HTML page.

Try the request http://yourhost/index.php?msg=my_message: the server displays a message in the body of the html document.

Go further

To go further, grab your browser of a tool such as Firebug.

To learn how to manipulate this tool, insert in your full area and associated style statement document, possibly JavaScript errors, and make sure that you know how to use the tool to find the identifier and style of html areas, as well as JavaScript runtime errors.

Congratulations, now you are ready to enrich your HTML website, CSS, JavaScript and PHP!

(Wikibooks)

Leave a Reply

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