Bài: 2 ĐỊNH DẠNG CHO 1 TRANG HTML ĐƠN GIẢN
Trong bài 1 mình đã trình bày với các bạn cấu trúc trang html đơn giản nhất, bài này mình xin trình bày với các bạn cách định dạng văn bản cho đẹp mắt.
1. Đinh dạng danh sách:
Bài một mình đã trình bày cách tạo một danh sách thông thường UL, bài này mình 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>Muc thu nhat </li>
<LI>Muc thu hai </li>
<LI>Muc thu 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
= circle Vòng tròn
= square Hình vuông
2. Các thẻ định dạng ký tự:
Trong bài 1 mình đã trình bày các bạn các thẻ <b>, <i>, <u>. Bài viết này mình sẽ trình bày các thẻ định dạng ký tự sa:
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>Chữ được canh giữa</CENTER>
3. Sử dụng màu sắc trong thiết kế các trang Web
Một màu được tổng 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
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ờ mình sẽ thực hành: thiết kế trang web báo giá thiết kế web của công ty thiết kế web Vạn An Thành sử dụng các thẻ đã trình bày ở trên. bạn mở chương trình notepad và nhập vào đoạn html sau:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Hướng dẫn thiết kế website bằng html - 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: 250 USD:</font></li>
<ul>
<li type="circle">Trang Chủ( Hiệu ứng flash nhẹ).</li>
<li type="circle">Modul Giới thiệu.</li>
<li type="circle">Modul 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">Modul 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 quốc tế.</li>
<li type="circle">Tặng 1 tháng cập nhật 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>
</ul>
<li><font color="#3366FF">Gói thiết kế web 2: 495 USD:</font> </li>
<ul>
<li type="circle">Trang chủ( Banner flash)</li>
<li type="circle">Modul Giới thiệu</li>
<li type="circle">Modul 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">Modul Sản phẩm tiêu biểu, Sản phẩm mới.</li>
<li type="circle">Modul Giỏ hàng</li>
<li type="circle">Modul Dịch vụ - khuyến mãi.</li>
<li type="circle">Modul Tin tức - Sự kiện</li>
<li type="circle">Modul Banner quảng cáo.</li>
<li type="circle">Modul 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 quốc tế.</li>
<li type="circle">Tặng 1 tháng cập nhật 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>
</ul>
<li><font color="#3366FF">Gói thiết kế web 3: 895 USD:</font></li>
<ul>
<li type="circle">Bao gồm các tính năng:</li>
<li type="circle">Trang chủ( Banner flash hiệu ứng đẹp, mềm mại)</li>
<li type="circle">Modul Giới thiệu</li>
<li type="circle">Modul 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">Modul Sản phẩm tiêu biểu, Sản phẩm mới.</li>
<li type="circle">Modul đếm số lượng sản phẩm.</li>
<li type="circle">Modul Giỏ hàng.</li>
<li type="circle">Modul Dịch vụ_ khuyến mãi</li>
<li type="circle">Modul 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 quốc tế.</li>
<li type="circle">Tặng 1 tháng cập nhật 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">Quảng bá website miễn phí 1 tháng trên các trang web có số lượng người truy cập nhiều, hiệu quả.</li>
</ul>
<li><font color="#3366FF">Thiết kế web theo yêu cầu:</font></li>
</ol>
<br />
<br />
<b><i>Công ty thiết kế website Vạn Thành An 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>
