Web & App: HTML

Introduction

This is a very simple webpage constructed soley by HTML, while you will find a
lot of features of HTML included. To make your learning process simplier,
I will write down ( usually below the part to be explained ) detailed comments
with the corresponding code on this page by <!--codes & my comments-- > with italic type fonts comments inside,
hopefully by this way you can have a basic idea on some HTML features.

You might ask this question: why should I learn HTML instead of MS Frontpage or
Dreamweaver? The answer should be:

Having an understanding of html code will help enhance your web pages;
And you have better control of your web pages;
You may include PHP script with MySQL database to create dynamic websites;
Finally it is more fun! Isn't it?!!

<!--using

<ol> 
<li> YOUR TEXT HERE </li> 
</ol>

to create ordered list-->

Your very first useful tips:

A lot of folks asked how to center the entire webpage, many "answers" simply
just center the text or content. The correct solution is to use the following
code and place them between <head> and </head>

<style type="text/css">
<!--
body{margin:0;
}
#container{
position:relative;
width:800px; 
margin:0 auto 0;
}
-->

</style>

You may change the width "800" to whatever value you want, also you need to
add like

<div id="container">

in your html.

You may also dislike the underline of the hyperlink and would like to
replace it by changing colors with mouse hover, then use the following in
your head part

<style href>a {text-decoration: none} </style>


<style type="text/css"> 
<!--
a:link {  color: #0033CC; text-decoration: none}
a:visited {  color: #993399; text-decoration: none}
a:active {  color: #FF9900; text-decoration: underline}
a:hover {  color: #FF6600; text-decoration: underline}
-->
</style>

My favorite websites to learn HTML and Web Building are:

W3schools
HTML.NET
HTML Code Tutorial
MySQL Official Tutorial
Javascripts
Online Shopping Cart by PHP & MySQL
Another example of application of PHP with MySQL to create a user login
account
Membership Login by PHP & MySQL

<!--using

<ul> <li> YOUR TEXT HERE </li> </ul>

to create unordered list-->

Web building tools:

XAMPP or
EasyPHP:combos of PHP/MySQL/APACHE,with the
combo installed, you can create and test your web applications( use mysql for database,
php to write programming scripts)on your local machine first, then publish
them online.
HTML-KIT: a full-featured editor for HTML, XHTML, XML, CSS, JavaScript, PHP and other text files.
FILE-ZILLA: an open source FTP file transfer client,
you can use it to upload your web pages and applications to your remote web hosting server.
Finally we need a "home" on internet while it should support PHP and MySQL and have no commericals.
There are many free web hostings you can start with, just google them.

The best thing for the above tools are: FREE!

How To add a table:

We'd better have an idea about our potential job positions in the future before begining to pick a major.

The best CS jobs:

Best Jobs Rank	Job title

1	Software Architect
7	Database Administrator
17	Information Systems Security Engineer
18	Software Engineering / Development Director
28	Information Technology Consultant

Source: CNN Money-BEST JOBS IN AMERICA

<!--using

<ul> 
<li> YOUR TEXT HERE </li> 
</ul>

to create unordered list--> <!--using the following code to define a simple table as above:

<!--SPAN determines how many columns the col tag effects-->
<colgroup>
   <td col align = "left"/>
   <td colspan= "2">
</colgroup>


<thead> <!-- define table header -->
<tr valign = "bottom">
<th> Best Jobs Rank </th>
<th> Job title </th>
</tr>
</thead>

<tbody> <!-- define table body -->                            
   <tr>  <!-- The first row of table contents -->
   <td>1</td <<!--table first row first column data-->
   <td>Software Architect<td<<!--table first row second column data-->
   </tr>
...
</tbody>
</table > <!-- end of table -->

to define the above table.
-->

My favorite search engines for jobs are:

<!--using

<ul> 
<li> YOUR TEXT HERE </li> 
</ul>

to create ordered list-->

List of favorite programming languages:

<!--using


<form>

<input type="radio" name="likeordislike" value="Yes" /> Yes<br />

<input type="radio" name="likeordislike" value="No" /> No

</form>

to create radio options-->

Please rate this page

10 means absoultely love it and 0 indicates not helpful at all.

<!--using

<select> label_name
<option > < option_name < /option< 

/select>

to create drop-down boxes, you may repeat this code for whatever option
numbers you want-->

Next let's see how to create download links:

Index of ...

Name             Last modified         Size            Description

Parent Directory       -   

 BMI            31-May-2011 10:15      56k     BMI   

 Corner Dector  31-May-2011 11:15      5k     Corner Detector

<-- Using 

<h3>Index of ...</h3 >
<pre><a href="?C=N;O=D"<Name</a>           

<a href="?C=M;O=A">Last modified</a> <a href="?C=S;O=A">Size</a>    
<a href="?C=D;O=A">Description</a>  
<hr>  
<img src="/images/back.gif" alt="[DIR]">
<a href="/html_files/html.htm/">Parent Directory</a>

<!--The above code lines generate the parent directory info. And the 
below creates the two download links-->
<img src="/images/folder.gif" alt="[DIR]"> 
<a href="bmi.exe"<BMI</a>  31-May-2011 10:15      56k     
BMI  
<img src="/images/folder.gif" alt="[DIR]" alt="[DIR]" > 
<a href="/corner.m">Corner Dector</a>  
31-May-2011 10:15      5k     Corner Detector     
<hr> 

to generate the above download links -->

Feedback

Please leave me your comments and suggestions

You may think this page is too naive, then simply ignore it!

Have fun with HTML & Web Programming!!

Web & App

Pages

HTML

Index of ...

No comments:

Post a Comment