Web Software: HTML based Web Site (chap 2 web beginners)

Hello

This chapter include the following :

Tools
HTML
Sample of web site with HTML page
Sample of web site with HTML pages , pictures , sound and video.

Tools

We will need the following tools for development of HTML based web site :

Browser
IIS
Visual Web Developer 2010
HTML
LoopBack (127.0.0.1)

Browser - allow HTTP GET to the web site

IIS :

Web server for hosting the web site and serving requests

Visual Web Developer 2010 :

development environment
free download

HTML :

markup language
used for static web site. I.e the info stored on the web site is delivered to the client as is. Dynamic web site may build the page on demand
http://www.w3schools.com/html/

LoopBack

use for internal web site testing
use IP 127.0.0.1 or localhost

HTML (Hyper Text Markup Language)

Basic structure of HTML page

<HTML>

<HEAD>

<TITLE>

................ title of the page

</TITLE>

</HEAD>

<BODY>

................ body of the page

</ BODY >

</HTML>

Tag list

remark - tag are not case sensitive

<br> - new line

div - it defines a section so we can e.g. apply the font to all of them
example :

<div align="center">
This is some text center align!
<br>
text centered
</div>
<div align="left">
This is some text left align!
</div>
<div align="right">
This is some text right align!
</div>

This will create :

<p>
The <p> tag defines a paragraph.

<h1> ..... <h7> - heading
example :

<h1>big heading </h1>
<br>
<h7>small heading </h7>

This will create :

Tag nesting
example :

<HEAD>

<TITLE>

................ title of the page

</TITLE>

</HEAD>

<hr> - line

example :

<hr color="blue"/>

<font>
example :

<font face="arial" size="7"/>some text</font>
size is 1-7

This will create :

<big> - big text
<small> - small text
example :

<big>big text</big>
<small>small text</small>

This will create :

Sample of web site with HTML page

Run visual studio as administrator (Windows 7)

Create a new web site

Choose ASP.Net Empty Site, HTTP, and the location of the site

Open the IIS via "Control Panel"->"Administrative Tools" and notice the name "WebSite" which we just created

Now we will add a new HTML pahe into the web site.

By adding HTML page

Now you can edit the page

It is possible check that the page is loading correctly (using HTTP GET) in few ways :

via the browser - http://localhost/WebSite/HTMLPage.htm

via the IDE -

in any way you will get the same result on the browser

Tag list continued

style

attribute
style determine the visual appearance

example :

another text

</div>

another text

</div>

This will create :

You can also use : background-color, text-align,color,font-family

test it yourself

<img> - using image
the basic structure is <img src="url" width="pixel width" height=" pixel height"/>

example :

<img src="http://budgetstockphoto.com/freeimages/environment/pics/clean_beach6085.jpg"
width="100" height="100"/>

will create:

<ol> - ordered list
<li> - list item

example :

<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

will create :

<ul> - un ordered list

example :

<h4>An Un Ordered List:</h4>

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

will create :

<dl> - definition list
<dt> - subject item in definition list
<dd> - sub subject item in definition list

example :

<dl>
<dt>Coffee</dt>
    <dd>- black hot drink</dd>
   <dd>- latte</dd>
<dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

will create :

<table> - table
<tr> - define a row in a table
<th> - define a header cell in table
<td> - define standard cell in table

example :

<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

will create :

common table attributes :

border = n , table width

cellspacing = n , space beteen cells

cellpadding = n , space inside cells

width = n , table width

bgcolor = color , table background color

colspan = n , number of columns cell should span

rowspan= n , number of rows cell should span

test it yourself !!

write hebrew
This require :

setting the encoding :

meta http-equiv="content-type" content="text/html;charset=UTF-8"

should be inside the head

setting direction - dir=rtl

example :

<html > <HEAD> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> </HEAD> <BODY dir=rtl> שלום חבר </ BODY > </html>

will create :

<fieldset> - Group related elements in a form

exanmple :
<form>
<fieldset>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>
</form>

Will create :

The <legend> tag defines a caption for the <fieldset> element.

<form>
<fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
</fieldset>
</form>

Will create :

links
<a> - link

attributes :

href - URL
target - specify where to open the windows e.g. _blank is new windows

link may refer to :

html file
web site
picture
audio\video file
mail

example
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
<br>
<a href="http://budgetstockphoto.com/freeimages/environment/pics/clean_beach6085.jpg">Nice Picture</a>
<br>
<a href="mailto:nathan@nynkmobile.com">Nathan's e-mail</a>

will create :

you can click on the links

reamrk - link can be relative e.g. point to html inside the web site.
e.g. <a href="HTMLPage.htm">Load Local Page</a>

Sample of web site with HTML pages , pictures , sound and video.

we will create a project as before