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 :
<div style="background:green">
<h1>text</h1>
another text
</div>
<div style="background:red">
<h1>text</h1>
another text
</div>
This will create :
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:
<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 :
<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 :
<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 :
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
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 :
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
and add directories :
- pictures
- cars
- airplanes
- sound
- video
and main html file
download files.rar into your desktop and then add to the project
loading all the file result in :
- Main page
- Picture page
- Cars page
- Airplanes page
- Video page
- Sound page
project (you need to create web site and add files from above zip)
Main Page :
Cars Page :
Airplane Page :
Nathan
