Vinh Tai Tang: 2011

Wednesday, 27 July 2011

Bài Mẫu Số 1 (tiếp theo)

Đây là phần tiếp theo bài mẫu số 1

<html>
<head>
<title>Home Page</title>
<style>
#logotext
{
color:blue;
text-align:center;
text-shadow: 2px 2px #ff0000;
font-family:"Tahoma",Georgia,Serif;
text-decoration:blink;

}
#logotable
{
border:5px solid purple;
background-color:yellow;
width:100%;
vertical-align:text-bottom;
}
.block
{
border:6px inset #D55555;
background-color:#CCFFFF;
padding:10px;
margin:5px;
}

div.hinh
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.hinh img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.hinh a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<table id="layout" width="98%" Height="100%" border="1">
<tr id="Header" Height="20%">
<td colspan="2">
<table id="logotable" >
<tr>
<td width="30%" style="padding-left:20px">
<img src="images\bonsai logo.jpg" alt="company logo" width="64" height="64" />
</td>
<td width="50%" >
<h1 id="logotext"> Green Thumb Bonsai</h1>
</td>
<td width="20%" >
</td>
</tr>
</table>
</td>
</tr>
<tr id="Main" Height="60%">
<td id="LeftContent" width="60%">
<table id="TableLeft" width="100%" height="100%" border="1">
<tr>
<td>
<p><img src="images\onsale.jpg" /></p>
<div class="hinh">
<a target="_blank" href="klematis_big.htm"><img src="images\bonsai1.jpg" alt="Klematis" width="200" height="200" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="hinh">
<a target="_blank" href="klematis2_big.htm"><img src="images\bonsai.jpg" alt="Klematis" width="200" height="200" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="hinh">
<a target="_blank" href="klematis3_big.htm"><img src="images\bonsai-k11.jpg" alt="Klematis" width="200" height="200" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="hinh">
<a target="_blank" href="klematis4_big.htm"><img src="images\BonsaiTridentMaple.jpg" alt="Klematis" width="200" height="200" /></a>
<div class="desc">Add a description of the image here</div>
</div>
</td>
</tr>
<tr> <td>Youtube Video</td></tr>
</table>
</td>
<td id="RightContent" width="40%">
<table id="TableRight" width="100%" height="100%" border="1">
<tr>
<td style="vertical-align:text-top;">
<p style="font-family:Georgia, Times, serif;font-size:36;margin:5">Testimonial</p>
<div id="testimonial" class="block">
<i>"We were in desperate need of a new website when theEZsite.com called, and through a gentle sales approach, it became apparent that I needed to re-do it now rather than later. The ‘self editing’ feature of the new site that you would create was the defining factor for me, as I knew this could keep the site more fresh than a site that was only editable by a ‘webmaster’! Coupled with new codes that would attract the search engines, you and I both knew we had to make the change now." </i>
<p align="right"><b>Jason Clare, Business Consultant</b></p>
</div>
</td>
</tr>
<tr> <td>Advertisement</td></tr>
</table>
</td>
</tr>
<tr id="Footer" Height="20%">
<td colspan="2">
Footer here
</td>
</tr>
</table>
</body>
</html>

Tuesday, 19 July 2011

Bài Mẫu số 1

Như quý vị trong lớp website đề nghị. Dưới đây là HTML page mà quý vị có thể làm theo.

<html>
<head>
<title>Home Page</title>
<style>
#logotext
{
color:blue;
text-align:center;
text-shadow: 2px 2px #ff0000;
font-family:"Tahoma",Georgia,Serif;
text-decoration:blink;

}
#logotable
{
border:5px solid purple;
background-color:yellow;
width:100%;
vertical-align:text-bottom;
}
</style>
</head>
<body>
<table id="layout" width="98%" Height="100%" border="1">
<tr id="Header" Height="20%">
<td colspan="2">
<table id="logotable" >
<tr>
<td width="30%" style="padding-left:20px">
<img src="images\bonsai logo.jpg" alt="company logo" width="64" height="64" />
</td>
<td width="50%" >
<h1 id="logotext"> Green Thumb Bonsai</h1>
</td>
<td width="20%" >
</td>
</tr>
</table>
</td>
</tr>
<tr id="Main" Height="60%">
<td id="LeftContent" width="40%">
This is Left
</td>
<td id="RightContent" width="60%">
This is Right
</td>
</tr>
<tr id="Footer" Height="20%">
<td colspan="2">
Footer here
</td>
</tr>
</table>
</body>
</html>

Saturday, 25 June 2011

Web Design Project

Khóa học Web design Basic June 2011

Bài tập này được thiết kế nhằm giúp quý vị tổng hợp một số kỹ năng Web, bao gồm website planning, navigation scheme (cách thức chuyển trang) , sử dụng image, video, sử dụng external stylesheet.

Bối cảnh

Quý vị được yêu cầu thiết kế một website bán Bonsai gồm khoảng 10 trang. Sau khi thảo luận quý vị đã thống nhất với khách hàng những yêu cầu sau đây:

Website gồm các trang sau:

Một trang Homepage

Một trang giới thiệu về công ty (About us)

Một trang Liên lạc (Contact page)

Một trang hướng dẫn cách chăm sóc Bonsai

Một trang Những Câu Hỏi Thường Gặp (FAQ)

Năm trang trình bày hình ảnh các cây Bonsai và giá bán.

Website không có phần bán hàng online. Người muốn mua sẽ order qua phone hoặc email.

Yêu cầu trang Homepage

Trang này gồm 4 phần

Một phần để trưng bày hình các cây Bonsai On Sale (tối đa 4 tấm hình)

Một you tube video giới thiệu và hướng dẫn cách chăm sóc Bonsai (link to Youtube from your website)

Một chỗ để hiện quảng cáo

Một chỗ để đăng những lời khen (testimonial)

Yêu cầu chung

Logo của công ty hiện ở góc trên bên trái.

Thiết kế Menu sử dụng Hyperlink, CSS (và javascript) để liên kết các trang.

Tiêu đề (Heading) mỗi trang phải có màu khác với màu chữ của phần thân bài.

Mỗi trang đều có màu nền (background color) giống nhau. Màu nền do quý vị tự chọn.

Để giúp cho các trang web nổi bật mỗi trang yêu cầu phải có tối thiểu một tấm hình.

Mỗi cây Bonsai đều có tên, mã số, một tới hai câu giới thiệu ngắn và giá bán.

Công việc cần làm

Dùng viết và giấy phát thảo phần khung và cách bố trí (layout) cho trang Homepage và các trang khác. Có gắng bảo đảm tính nhất quán cho toàn bộ website.

Sưu tầm các tấm hình cây Bonsai trên Internet, scan từ magazine hay chụp hình từ camera

Sưu tầm một hình để làm logo

Sưu tầm hoặc thiết kế một menu dùng Hyperlink và Javascript

Tạo ra một default.css file và sử dụng cho toàn bộ các trang web.

Nội dung các trang web quý vị có thể tự do sưu tầm trên Internet hoặc tự viết.

Thiết kế các trang web theo yêu cầu và đặt tên dưới dạng filename.html và bỏ chung vào một folder. Các website hoàn tất sẽ được upload lên website Vovisoft.

Project này sẽ nộp vào tuần áp chót của khóa học. Học viên có thể tự làm một mình hoặc làm chung một nhóm 2-3 người.

Mọi thắc mắc về bài tập này quý vị có thể liên lạc với Tài qua email tangvinhtai@hotmail.com hoặc phone 0416 106 725

Chúc quý vị học hành vui vẻ.

Web Design Basic - Unit Outline

Overview:
Khóa học dành cho những nguời biết chút ít về computer và muốn học nâng cao để có thể hiểu thêm về Internet và Web Design. Sau khóa học học viên có thể tự thiết kế một Blog hoặc Web pages đơn giản.

Week 1 : Overview và HTML

Request and Response

Browsers

Website and Web Pages

HTML : http://www.w3schools.com/html/html_examples.asp

HTML Reference: http://www.w3schools.com/tags/default.asp

Blog

Week 2 : HTML (Phần 1)

HTML Tutorial : http://www.w3schools.com/html/default.asp

HTML Elements

HTML Attributes

Text Format

Links

Lists

Images

Fonts

Week 3 : HTML (Phần 2)

Styles

Tables
Forms and Input

Backgrounds

Charater Entities

Frames

Heads and Meta tag

URL Encoding

HTML Quick List : http://www.w3schools.com/html/html_quick.asp

HTML Quiz: http://www.w3schools.com/html/html_quiz.asp

Week 4 : Cascading Style Sheet (CSS)

CSS syntax

CSS How To : inline, internal and external stylesheet

CSS background, text, font, border, margin, padding, list, table

Week 5 : CSS (Continued)

CSS Dimension, classification (how and where to display), positioning

CSS pseudo class and pseudo elements

CSS Image Opacity

Week 6 : Blog
Week 7 : Domain Registration, Web Hosting, FTP
Week 8 : Javascript
Week 9 : Javascript (continued)
Week 10 : Forms and Advanced Features
Week 11 : Put everything together
Week 12 : Review

Download Free HTML Editor tại đây.

http://www.evrsoft.com/download.shtml

Week 1 - Basic Web Design Overview

Lưu ý: Bài viết dưới đây là phần tóm tắt kiến thức chủ yếu dành cho các học viên học lớp Basic Web Design tại Vovisoft.

Page Request and Response

Khi user đánh địa chỉ (hay web page address hay URL) vào address bar và click Go thì browser (Internet Explorer hay Firefox...) sẽ gởi một HTTP Request tới Web server. Web server sau đó sẽ gởi lại một Response dưới dạng một trang web.

Browser sẽ chứa trang web, hình ảnh và các file phụ thuộc vào một folder tạm thời (temporary Internet files tại vị trí C:\Documents and Settings\...[UserName]...\Local Settings\Temporary Internet Files) và trình bày trang web theo cú pháp của một ngôn ngữ gọi là HTML (Hyper Text Markup Language). Quá trình này còn gọi là rendering.

Như vậy cho dù đó là website tin tức , bán hàng, banking hay bất kỳ dịch vụ nào thì phần chính và quan trọng nhất vẫn được xử lý bên phía server. Phía Client hay browser chủ yếu chỉ lo khâu trình bày trang web tới user và trang web nhận được đều dưới dạng HTML.

Browser:

Có nhiều Browser được sử dụng trên thế giới và hầu như đều free. Trong đó Browser thông dụng nhất là Internet Explorer của hãng Microsoft và kế đến là Firefox. Có thể xem thêm danh sách các browser thông dụng tại http://www.w3schools.com/browsers/default.asp

Website và Web page:

Một Website có nhiều web pages (như Home Page, About Us, Contact Us v.v.). Mỗi web page thực chất là một trang HTML trong đó chứa nhiều "HTML tag" (tạm dịch là nhãn hay mác) báo cho Browser biết phải trình bày trang web như thế nào.

HTML:

Một trang HTML đơn giản có dạng như sau:

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

Blog:

Blog là một web site cá nhân chủ yếu dùng để chia sẻ ý tưởng, suy nghĩ, photo, video của blogger với mọi người. Người chủ của một Blog hay blogger chịu trách nhiệm về hình thức và nội dung trên blog của mình. Blogger có thể cho phép người đọc viết lời bình (comments) đối với mỗi bài viết để tăng tính tương tác đối với blog của mình.

Hãy vào trang web http://www.blogger.com/ và tuần tự theo các bước chỉ dẫn để tạo ra một blog cho riêng mình. Sau khi tạo xong một blog ta đã có thể bắt đầu cuộc phiêu lưu thú vị với những trang web của riêng mình.

Welcome to the HTML world !

Vinh Tai Tang