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
  9. Smarty
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?

Comment is

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

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?

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?

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:

<head>
<httml><head><title></title></head><body>{* Smarty *}
Hello {$name}, welcome to Smarty!
</body></html><style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

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?

What can a JavaScript Do?

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:

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:

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:

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

HTML DOM Methods

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?

Differences Between XHTML And HTML

The Most Important Differences:

<!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:

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?

What is a PHP File?

What is MySQL?

PHP + MySQL

Why PHP?

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:

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.


What is Smarty?

Smarty is a template engine for PHP. More specifically, it facilitates a manageable way to separate application logic and content from its presentation. This is best described in a situation where the application programmer and the template designer play different roles, or in most cases are not the same person.

Comment is

{* Multi-line comment
 . . .
*}

Note: Smarty templates are of HTML type, so HTML comment can be used too. There's only one syntax definition for a text editor, so HTML comment should be used, instead of Smarty comment type.

smarty-01.php

<?php

require 'Smarty_Setup.php';

$smarty = new New_Smarty;

$smarty->assign('name','Ned');

$smarty->display('smrty-01.tpl');

?>

smart-01.tpl

<httml>
<head>
<title></title>
</head>
<body>
{* Smarty *}
Hello {$name}, welcome to Smarty!
</body>
</html>