Thiết kế Website đơn giản với HTML - Bài 2
Chỉ mục bài viết |
---|
Thiết kế Website đơn giản với HTML |
Bài 2 |
Bài 3 |
Bài 4 |
Bài 5 |
Bài tiếp theo |
Tất cả các trang |
Bài 2: ĐỊNH DẠNG CHO MỘT TRANG HTML ĐƠN GIẢN.
1. Đinh dạng danh sách:
Bài 1 Webgiare.net đã trình bày cách tạo một danh sách thông thường UL, bài này Webgiare.net sẽ trình bày với các bạn danh sách thực đơn(Menu) OL.
Với thẻ OL ta có cú pháp sau:
<OL TYPE=1/a/A/i/I>
<LI type= disc/circle/square>Menu thứ nhất </li>
<LI>Menu thứ hai </li>
<LI>Menu thứ ba </li>
</OL>
Trong đó:
UL TYPE =1 Các mục được sắp xếp theo thứ tự 1, 2, 3...
=a Các mục được sắp xếp theo thứ tự a, b, c...
=A Các mục được sắp xếp theo thứ tự A, B, C...
=i Các mục được sắp xếp theo thứ tự i, ii, iii...
=I Các mục được sắp xếp theo thứ tự I, II, III...
LI TYPE = disc Chấm tròn đậm
LI TYPE = circle Vòng tròn
LI TYPE = square Hình vuông
2. Các thẻ định dạng ký tự:
Trong bài 1 Webgiare.net đã trình bày với các bạn các thẻ <b>, <i>, <u>. Bài 2 này chúng tôi sẽ trình bày các thẻ định dạng ký tự sau:
Strong = b : In đậm
EM = I : In nghiêng
S = STRIKE: Chữ bị gạch ngang
BIG: Chữ lớn hơn bình thường
Small: chữ nhỏ hơn bình thường
SUP: Đinh nghĩa chỉ số trên
SUB: Chỉ số dưới
BASEFONT: Định nghĩa kích thước font chữ.
FONT: Kiểu chữ hiển thị.
<CENTER>Nội dung được canh giữa</CENTER>
3. Sử dụng màu sắc trong thiết kế các trang Web
Trong thành phần yếu tố đồ hoạ về màu sắc thì một màu được kết hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu có định dạng như sau:
#RRGGBB viết tắt (RedRedGreenGreenBlueBlue)
Bảng màu cơ bản:
- Đỏ/RED: #FF0000
- Đỏ sẫm/DARKRED: #8B0000
- Xanh lá cây/GREEN: #00FF00
- Xanh nhạt/LIGHTGREEN: #90EE90
- Xanh nước biển/BLUE: #0000FF
- Vàng/YELLOW: #FFFF00
- Vàng nhạt/LIGHTYELLOW: #FFFFE0
- Trắng/WHITE: #FFFFFF
- Đen/BLACK: #000000
- Xám/GRAY: #808080
- Nâu/BROWN: #A52A2A
- Tím/MAGENTA: #FF00FF
- Tím nhạt/VIOLET: #EE82EE
- Hồng/PINK: #FFC0CB
- Da cam/ORANGE: #FFA500
- Màu hải quân/NAVY: #000080
...
Trong HTML đinh dạng màu sắc thường đi kèm với một thẻ khác ví dụ: <font color =” color”>, <body LINK= color> …
Được rồi bây giờ chúng ta sẽ thực hành: thiết kế trang web báo giá thiết kế web của Webgiare.net sử dụng các thẻ đã trình bày ở trên. Các bạn hãy mở một chương trình thiết kế web như Notepad và nhập nguyên đoạn mã HTML sau vào nhé.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Bài 2: Định dang cho một trang HTML đơn giản. - Báo giá thiết kế web</TITLE>
</HEAD>
<BODY>
<h1>Báo giá thiết kế web</h1>
<strong>TÍNH NĂNG CÁC GÓI THIẾT KẾ WEB:</strong>
<ol type="1">
<li><font color="#3366FF">Gói thiết kế web 1: 2.000.000 VNĐ:</font></li>
<ul>
<li type="circle">Trang Chủ(Hiệu ứng flash nhẹ).</li>
<li type="circle">Module Giới thiệu.</li>
<li type="circle">Module Sản phẩm đa cấp( Modul tùy biến, không giới hạn phân cấp).</li>
<li type="circle">Module Dịch vụ_ khuyến mãi.</li>
<li type="circle">Trang liên hệ.</li>
<li type="circle">Hỗ trợ trực tuyến</li>
<li type="circle">Công cụ tìm kiếm.</li>
<li type="circle">Bộ đếm người truy cập.</li>
<li type="circle">Tặng 1 domain Việt Nam.</li>
<li type="circle">Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.</li>
<li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.</li>
</ul>
<li><font color="#3366FF">Gói thiết kế web 2: 3.000.000 VNĐ:</font> </li>
<ul>
<li type="circle">Trang chủ( Banner flash)</li>
<li type="circle">Module Giới thiệu</li>
<li type="circle">Module Sản phẩm đa cấp: ( Modul tùy biến, không giới hạn phân cấp).</li>
<li type="circle">Module Sản phẩm tiêu biểu, Sản phẩm mới.</li>
<li type="circle">Module Giỏ hàng</li>
<li type="circle">Module Dịch vụ - khuyến mãi.</li>
<li type="circle">Module Tin tức - Sự kiện</li>
<li type="circle">Module Banner quảng cáo.</li>
<li type="circle">Module Liên kết website.</li>
<li type="circle">Trang liên hệ</li>
<li type="circle">Hỗ trợ trực tuyến</li>
<li type="circle">Công cụ tìm kiếm.</li>
<li type="circle">Bộ thống kê tình hình hoạt động website</li>
<li type="circle">Bộ đếm người truy cập.</li>
<li type="circle">Tặng 1 domain Việt Nam.</li>
<li type="circle">Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.</li>
<li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.</li>
</ul>
<li><font color="#3366FF">Gói thiết kế web 3: 4.000.000 VNĐ:</font></li>
<ul>
<li type="circle">Trang chủ( Banner flash hiệu ứng đẹp, mềm mại)</li>
<li type="circle">Module Giới thiệu</li>
<li type="circle">Module Sản phẩm đa cấp: ( Modul tùy biến, không giới hạn phân cấp).</li>
<li type="circle">Module Sản phẩm tiêu biểu, Sản phẩm mới.</li>
<li type="circle">Module đếm số lượng sản phẩm.</li>
<li type="circle">Module Giỏ hàng.</li>
<li type="circle">Module Dịch vụ_ khuyến mãi</li>
<li type="circle">Module Tin tức_ Sự kiện</li>
<li type="circle">Hệ thống lấy tin tự động.</li>
<li type="circle">Modul Banner quảng cáo.</li>
<li type="circle">Modul Liên kết website.</li>
<li type="circle">Modul tiện ích (Quý Khách có thể lựa chọn 1 trong nhiều tiện ích: Thư viện ảnh, video clip, hệ thống SMS, Newletter)</li>
<li type="circle">Trang liên hệ</li>
<li type="circle">Bộ bình chọn</li>
<li type="circle">Công cụ tìm kiếm.</li>
<li type="circle">Bộ thống kê tình hình hoạt động website</li>
<li type="circle">Bộ đếm người truy cập.</li>
<li type="circle">Tặng 1 domain Việt Nam</li>
<li type="circle">Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.</li>
<li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web online.</li>
<li type="circle">Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.</li>
</ul>
<li><font color="#3366FF">Ngoài ra Webgiare.net còn nhiều gói và luôn thiết kế web theo mọi yêu cầu của quý khách hàng:</font></li>
<li><font color="#3366FF">Liên hệ: (08).2203.2203 - 0938.018.218</font></li>
</ol>
<br />
<br />
<b><i>Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!</i></b>
</BODY>
</HTML>
Và đây là kết quả chúng ta vừa tạo và lưu ở trên nhé!
- 23/06/2015 07:15 - Vì sao doanh nghiệp phải thiết kế website ngay bây giờ?
- 13/03/2014 10:27 - http://gites-vietnam.com/
- 03/09/2013 02:21 - mamnonhoamaiquan9.edu.vn
- 03/09/2013 02:15 - muahang-eu.com
- 03/09/2013 02:13 - moolagold.net/
- 30/07/2012 09:25 - Một số lổi cơ bản khi cài Joomla 1.5xx
- 30/07/2012 09:17 - Lỗi tiếng Việt có thể do những nguyên nhân nào???
- 16/07/2012 02:26 - Tìm hiểu về Javacript
- 16/07/2012 02:10 - Form đăng nhập và kiểm tra giá trị nhập vào bằng javascript
- 13/07/2012 07:22 - Cải thiện hiệu suất website dành cho mobile
Hôm nay | 2381 | |
Hôm qua | 2419 | |
Trong tuần | 18851 | |
Tuần trước | 16461 | |
Trong tháng | 72982 | |
Tháng trước | 70672 | |
Tất cả | 3095351 |
Your IP: 172.71.254.175