Basic Web Design


Loi Ngoc Nguyen, Duy-Ky Nguyen, PhD

Introduction

Whenever we save a file from Internet, it's saved with extension htm or html. In fact, this file involves the followings

  1. HTML
  2. XML
  3. CSS
  4. JavaScript
  5. HTML DOM
  6. DHTML
  7. XHTML
  8. PHP
Nowadays, a HTML file is infact of type XHTML (7) which cover all previous types (1 to 6). It's mandatory to start with declaration of DOCTYPE

JavaScript is a client-side scripting language to make HTML file more dynamic with some processing power.

Type 8 and 9 run on server to generate HTML file and send out to user. So they're called server-side scripting language.

Below are some nice cheat sheets
This is xHTML reference card
This is CSS reference card.
This is JavaScript reference card.
This is PHP reference card.


What is an HTML File?


Example 1
Type in the following text:

  


  

    
      

        
          
<html>
<head>
<title>Title of page</title>
</head>
<body>

This is my first homepage.
This is the second line.
And here the third line.

</body>
</html>

        		
      

    
  



  
Save the file as "mypage.htm" or "mypage.html" as both are for HTML file. Using a browser to open
  this file, we'll see like below


  

    
      

        This is my first homepage. This is the second line. And here the third line.
      

    
  
 

and the browser displays no new-line as seen in the text editor. To
have new-line display, a new-line mark-up <p> must be used


  
Example 2


  

    
      

        
          
<html>
<head>
<title>Title of page</title>
</head>
<body>

<p>This is my first homepage.</p>
<p>This is the second line.</p>
<p>And here the third line.</p>
</body>
</html>

        		
      

    
  


  and we have the display


  

    
      

        This is my first homepage.

        This is the second line.

        And here the third line.		
      

    
  


  So, as mentioned at the very beginning that the markup tags tell the Web browser how to display the page.

  

  HTML font is deprecated, use CSS styles instead.

  


  
What is XML?


  

        
  • XML stands for EXtensible Markup Language


    •     
  • XML is a markup language much like HTML


    •     
  • XML was designed to carry data, not to display data


    •     
  • XML tags are not predefined. You must define your own tags


    •     
  • XML is designed to be self-descriptive


    •     
  • XML is a W3C Recommendation

    •   


  
The Difference Between XML and HTML


  
XML is not a replacement for HTML.

  XML and HTML were designed with different goals:


  
XML was designed to transport and store data, with focus on what data is.

  HTML was designed to display data, with focus on how data looks.


  
HTML is about displaying information, while XML is about carrying information.



  
What is CSS?


  

        
  • CSS stands for Cascading Style Sheets


    •     
  • Styles define how to display HTML elements


    •     
  • Styles are normally stored in Style Sheets


    •     
  • Styles were added to HTML 4.0 to solve a problem


    •     
  • External Style Sheets can save you a lot of work


    •     
  • External Style Sheets are stored in CSS files


    •     
  • Multiple style definitions will cascade into one

    •   


  
How to Insert a Style Sheet


  
When
a browser reads a style sheet, it will format the document according to
it. There are three ways of inserting a style sheet:


  
Comment is


  

    
      

        
          
/* Multi-line comment

          
   . . .

          
*/

        		
      

    
  


  
External Style Sheet


  
An
external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web
site by changing one file. Each page must link to the style sheet using
the <link> tag. The <link> tag goes inside the head section:


  

    
      

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

        		
      

    
  


  
The browser will read the style definitions from the file mystyle.css, and format th


  
An
external style sheet can be written in any text editor. The file should
not contain any html tags. Your style sheet should be saved with a .css
extension. An example of a style sheet file is shown below:


  

    
      

        
          
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

        		
      

    
  



  

    
      

        
          
Remark Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead
          of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

        		
      

    
  


  
Internal Style Sheet


  
An
internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section by using the
<style> tag, like this:


The browser will now read the style definitions, and format the document according to it.


  
Note:
A browser normally ignores unknown tags. This means that an old browser
that does not support styles, will ignore the <style> tag, but
the content of the <style> tag will be displayed on the page. It
is possible to prevent an old browser from displaying the content by
hiding it in the HTML comment element: 


  

    
      

        
          
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

        		
      

    
  


  
Inline Styles


  
An
inline style loses many of the advantages of style sheets by mixing
content with presentation. Use this method sparingly, such as when a
style is to be applied to a single occurrence of an element.


  
To use inline styles you use the style
attribute in the relevant tag. The style attribute can contain any CSS
property. The example shows how to change the color and the left margin
of a paragraph:


  

    
      

        
          
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

        		
      

    
  



  
What is JavaScript?


  

        
  • JavaScript was designed to add interactivity to HTML pages


    •     
  • JavaScript is a scripting language


    •     
  • A scripting language is a lightweight programming language


    •     
  • A JavaScript consists of lines of executable computer code


    •     
  • A JavaScript is usually embedded directly into HTML pages


    •     
  • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)


    •     
  • Everyone can use JavaScript without purchasing a license

    •   


  
What can a JavaScript Do?


  

        
  • JavaScript gives HTML designers a programming tool -
    HTML authors are normally not programmers, but JavaScript is a
    scripting language with a very simple syntax! Almost anyone can put
    small "snippets" of code into their HTML pages


    •     
  • JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML
        page


    •     
  • JavaScript can react to events -
    A JavaScript can be set to execute when something happens, like when a
    page has finished loading or when a user clicks on an HTML element


    •     
  • JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element


    •     
  • JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing


    •     
  • JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically
        designed for that browser


    •     
  • JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

    •   


  
Comment is


  

    
      

        
          
// Single-line comment

/* Multi-line comment

          
       . . .

          
*/

        		
      

    
  


  
Example


  

    
      

        
          
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

        		
      

    
  


  
The code above will produce this output on an HTML page:


  

    
      

        Hello World!
      

    
  


  
Where to Put the JavaScript


  
JavaScripts
in a page will be executed immediately while the page loads into the
browser. This is not always what we want. Sometimes we want to execute
a script when a page loads, other times when a user triggers an event.


  
Scripts in the head section:
Scripts to be executed when they are called, or when an event is
triggered, go in the head section. When you place a script in the head
section, you will ensure that the script is loaded before anyone uses
it. 


  

    
      

        
          
<html>
<head>
<script type="text/javascript">
....
</script>
</head>

        		
      

    
  


  
Scripts in the body section:
Scripts to be executed when the page loads go in the body section. When
you place a script in the body section it generates the content of the
page.


  

    
      

        
          
<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

        		
      

    
  


  
Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.


  

    
      

        
          
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

        		
      

    
  


  


  
Using an External JavaScript


  
Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page.


  
To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.


  
Note: The external script cannot contain the <script> tag!


  
To use the external script, point to the .js file in the "src" attribute of the <script> tag:


  

    
      

        
          
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>

        		
      

    
  


  
Note: Remember to place the script exactly where you normally would write the script!
JavaScript Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.

Every element on a web page has certain events which can trigger JavaScript
functions. For example, we can use the onClick event of a button element to
indicate that a function will run when a user clicks on the button. We define
the events in the HTML tags.

Examples of events:

  • A mouse click
  • A web page or an image loading
  • Mousing over a hot spot on the web page
  • Selecting an input box in an HTML form
  • Submitting an HTML form
  • A keystroke 


Note: Events are normally used in combination with functions, and the function
will not be executed before the event occurs!


  
What is the HTML DOM?


  
The HTML DOM is:


  

        
  • A standard object model for HTML


    •     
  • A standard programming interface for HTML


    •     
  • Platform- and language-independent


    •     
  • A W3C standard

    •   


  
The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.


  
In other words:


  
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.


  
It is also JavaScript statements


  
HTML DOM Properties


  
These are some typical DOM properties:


  

        
  • x.innerHTML - the inner text value of x (a HTML element)


    •     
  • x.nodeName - the name of x


    •     
  • x.nodeValue - the value of x


    •     
  • x.parentNode - the parent node of x


    •     
  • x.childNodes - the child nodes of x


    •     
  • x.attributes - the attributes nodes of x

    •   


  
Note: In the list above, x is a node object (HTML element).


  
HTML DOM Methods


  

        
  • x.getElementByID(id) - get the element with a specified id


    •     
  • x.getElementsByTagName(name) - get all elements with a specified tag name


    •     
  • x.appendChild(node) - insert a child node to x


    •     
  • x.removeChild(node) - remove a child node from x

    •   


  
Note: In the list above, x is a node object (HTML element).
To change a form name

  
Example 1


  

    
      

        
          
document.getElelementById("form_id").innerHTML = "username";

        		
      

    
  


  To change a cotent of user-define tag in case of using XML


  
Example 2


  

    
      

        
          
document.getElelementByTagName("my_tag").innerHTML = "my content";

        		
      

    
  



  
DHTML is Not a Language


  
DHTML stands for Dynamic HTML.


  
DHTML is NOT a language or a web standard.


  
DHTML is a TERM used to describe the technologies used to make web pages dynamic and interactive.


  
To most people DHTML means the combination of HTML, JavaScript, DOM, and CSS.



  
What Is XHTML?


  

        
  • XHTML stands for EXtensible HyperText Markup Language


    •     
  • XHTML is aimed to replace HTML


    •     
  • XHTML is almost identical to HTML 4.01


    •     
  • XHTML is a stricter and cleaner version of HTML


    •     
  • XHTML is HTML defined as an XML application


    •     
  • XHTML is a W3C Recommendation

    •   


  
Differences Between XHTML And HTML


  
The Most Important Differences:


  

        
  • XHTML elements must be properly nested


    •     
  • XHTML elements must always be closed


    •     
  • XHTML elements must be in lowercase


    •     
  • XHTML documents must have one root element

    •   


  
<!DOCTYPE> Is Mandatory


  
All
XHTML documents must have a DOCTYPE declaration. The html, head and
body elements must be present, and the title must be present inside the
head element.


  
This is a minimum XHTML document template:


  

    
      

        
          
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

        		
      

    
  


  
Note: The DOCTYPE is declaration, not a tag, so it should not have a closing tag. Only html is a tag.


  
AJAX = Asynchronous JavaScript and XML


  
AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.


  
With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server,
  without reloading the page.


  
AJAX
uses asynchronous data transfer (HTTP requests) between the browser and
the web server, allowing web pages to request small bits of information
from the server instead of whole pages.


  
The AJAX technique makes Internet applications smaller, faster and more user-friendly.


  
lamp  AJAX is a browser technology independent of web server software.


  
AJAX is Based on Web Standards


  
AJAX is based on the following web standards:


  

        
  • JavaScript


    •     
  • XML


    •     
  • HTML


    •     
  • CSS

    •   


  
The
web standards used in AJAX are well defined, and supported by all major
browsers. AJAX applications are browser and platform independent.


  
The keystone of AJAX is the XMLHttpRequest object.


  
Different browsers use different methods to create the XMLHttpRequest object.


  
Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.


  
To
create this object, and deal with different browsers, we are going to
use a "try and catch" statement. You can read more about the try
  and catch statement in our JavaScript tutorial.


  
Let's update our "testAjax.htm" file with the JavaScript that creates the XMLHttpRequest object:


  
Example


  

    
      

        
          
<html>
<body>

          
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  }
</script>

          
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>

          
</body>
</html>

        		
      

    
  


  
Example explained: First create a variable xmlHttp to hold the XMLHttpRequest object.


  
Then
try to create the object with XMLHttp=new XMLHttpRequest(). This is for
the Firefox, Opera, and Safari browsers. If that fails, try xmlHttp=new
ActiveXObject("Msxml2.XMLHTTP") which is for Internet Explorer 6.0+, if
that also fails, try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
which is for Internet Explorer 5.5+


  
If
none of the three methods work, the user has a very outdated browser,
and he or she will get an alert stating that the browser doesn't
support AJAX.


  



  
What is PHP?


  

        
  • PHP stands for PHP: Hypertext Preprocessor


    •     
  • PHP is a server-side scripting language executed on the server


    •     
  • PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)


    •     
  • PHP is an open source software (OSS)


    •     
  • PHP is free to download and use

    •   


  
What is a PHP Scipt ?

PHP Script: bounded by the pair <?php . . . ?> in a HTML file

phpinfo.php


<<html>

<body>



<?php

echo "<h1>PHP info";

phpinfo();

?>



</body>

</html>

Comment is

<!-- Multi-line comment
        . . .
-->
 


  
    
    
  • PHP files may contain text, HTML tags and scripts
    • 

    
  • PHP files are returned to the browser as plain HTML 
    • 

    
  • PHP files have a file extension of ".php", ".php3", or ".phtml"
    • 
  


  
What is MySQL?


  
    
    
  • MySQL is a database server
    • 

    
  • MySQL is ideal for both small and large applications
    • 

    
  • MySQL supports standard SQL
    • 

    
  • MySQL compiles on a number of platforms
    • 

    
  • MySQL is free to download and use
    • 
  


  
PHP + MySQL


  
    
    
  • PHP combined with MySQL are cross-platform (means that you can develop in Windows and serve on a Unix platform)
    • 
  


  
Why PHP?


  
    
    
  • PHP runs on different platforms (Windows, Linux, Unix, etc.)
    • 

    
  • PHP is compatible with almost all servers used today (Apache, IIS, etc.)
    • 

    
  • PHP is FREE to download from the official PHP resource: www.php.net
    • 

    
  • PHP is easy to learn and runs efficiently on the server side
    • 
  


  
There's another server-side scripting language called ASP (Active Server Pages) but only for Microsoft platform


  
Below, we have an example of a simple PHP script which sends the text "Hello World" to the browser:


PHP code bounded by the pair <?php . . . ?>





  
Comment is


  

    
      

        
          
// Single-line comment

/* Multi-line comment

          
        . . .

          
*/

        		
      

    
  


  
Example


  

    
      

        
          
<html>
<body>

          
<?php

echo "Hello World";

?>


          
</body>
</html>

        		
      

    
  


  
Each
code line in PHP must end with a semicolon. The semicolon is a
separator and is used to distinguish one set of instructions from
another.


  














    PHP Form


is composed of 2 files

 

    
  
  1. php_form.htm
    2. 
  
  2. 	action.php
    3. 



php_form.htm








        



	    





	      
	        

        <html>

<body>

<h1>

HTM Form

</h1>

<form action="PHP/action.php" method="post">

<h3>Header</h3> <input type="text" name="header" size="66"/><br/>

<h3>Message</h3>

<textarea name="message" rows="10" cols="50"></textarea>

        <input type="submit" value="Do It"/>

      

      

      

</body>

</html>


	        


    
  



Note:

name is actually PHP variable name passing to PHP script


    action.php



	    



	      
	        

        
<?php

echo"<h1> PHP Post<";

      

  // Your code here to handle a successful verification

    $Header= htmlentities($_POST['header']) . "\r\n";

        'X-Mailer: PHP/' . phpversion() . "\r\n";

$Message=  "====================================================================<p>";

    $Message .= htmlentities($_POST['message']);

echo"<h1> Header</h1>";

    echo "<pre>" . $Header . "</pre>";

echo"<h1>Message </h1>";

    echo "<pre>" . $Message . "</pre>";

?>