Một số công cụ thiết kế Website: HTML - Bùi Quang Trường

E/BOTTOM> 
 ... §Þnh nghÜa c¸c « trong dßng 
 <TD 
 ALIGN = LEFT / CENTER / RIGHT 
 VALIGN = TOP / MIDDLE / BOTTOM 
 BORDERCOLOR = color 
 BORDERCOLORDARK = color 
 BORDERCOLORLIGHT = color 
 BACKBROUND = url 
 BGCOLOR = color 
 COLSPAN = n 
 ROWSPAN = n 
 > 
 ... Néi dung cña « 
 ... 
 ... 
11/18/2013 Công cụ thiết kế Web - HTML 31 
 3.1.2. Các thẻ HTML (TT) 
 VII. FORM 
1. HTML Forms: 
2. T¹o Form: 
3. T¹o mét danh s¸ch lùa chän: 
4. T¹o hép so¹n th¶o v¨n b¶n : 
11/18/2013 Công cụ thiết kế Web - HTML 32 
 T¹o Form 
Cú pháp: 
 <FORM 
 ACTION = ulr 
 METHOD = GET | POST 
 NAME = name 
 TARGET = frame_name | _blank | _self 
 > 
11/18/2013 Công cụ thiết kế Web - HTML 33 
 T¹o mét danh s¸ch lùa chän 
Cú pháp: 
 Tªn môc chän 
 thø nhÊt 
 Tªn môc chän thø hai 
11/18/2013 Công cụ thiết kế Web - HTML 34 
 T¹o hép so¹n th¶o v¨n b¶n 
Cú pháp: 
 <TEXTAREA 
 COLS=sè cét 
 ROWS=sè hµng 
 NAME=tªn 
 > 
 Văn bản ban đầu 
11/18/2013 Công cụ thiết kế Web - HTML 35 
 3.1.3 Sử dụng Frontpage thiết kế 
 web tĩnh bằng HTML 
1. Khởi động FrontPage 
2. Tạo 1 trang web mới 
3. Tạo 1 website mới 
4. Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề... 
5. Ðịnh dạng đoạn 
6. Ðịnh dạng ký tự 
7. Tạo hyperlink 
8. Tạo các điểm dừng(Bookmark) trong trang 
9. Chèn hình ảnh 
10.Tạo table 
11.Mở trang web hoặc web site đã có 
11/18/2013 Công cụ thiết kế Web - HTML 36 
 Khởi động FrontPage 
• Click chuột vào Start/Programs/Microsoft FrontPage. Màn hình sau sẽ 
 xuất hiện: 
11/18/2013 Công cụ thiết kế Web - HTML 37 
 Tạo 1 trang web mới 
• Chọn File/New/Page 
11/18/2013 Công cụ thiết kế Web - HTML 38 
 Tạo 1 website mới 
• Chọn File/New/Web 
11/18/2013 Công cụ thiết kế Web - HTML 39 
 Ðặt thuộc tính trang web: tiêu đề, ảnh 
 nền, nhạc nền, lề... 
• Click File/Properties, Chọn tab General 
11/18/2013 Công cụ thiết kế Web - HTML 40 
 Ðặt thuộc tính trang web: tiêu đề, ảnh 
 nền, nhạc nền, lề...(TT) 
• Click File/Properties, Chọn tab Background: 
11/18/2013 Công cụ thiết kế Web - HTML 41 
 Ðặt thuộc tính trang web: tiêu đề, ảnh 
 nền, nhạc nền, lề...(TT) 
• Click File/Properties, Chọn tab Margin: 
11/18/2013 Công cụ thiết kế Web - HTML 42 
 Ðịnh dạng đoạn 
•Thanh formatting: 
11/18/2013 Công cụ thiết kế Web - HTML 43 
 Ðịnh dạng ký tự 
11/18/2013 Công cụ thiết kế Web - HTML 44 
 Tạo hyperlink 
• Chọn Insert/Hyperlink 
11/18/2013 Công cụ thiết kế Web - HTML 45 
 Tạo các điểm dừng(Bookmark) trong 
 trang 
• Chọn chức năng Insert/Bookmark 
11/18/2013 Công cụ thiết kế Web - HTML 46 
 Chèn hình ảnh 
• Di chuyển con nháy đến vị trí muốn chèn hình, click nút 
11/18/2013 Công cụ thiết kế Web - HTML 47 
 Tạo table 
• Chọn Table/Insert/Table 
11/18/2013 Công cụ thiết kế Web - HTML 48 
 Mở trang web hoặc web site đã có 
• Click biểu tượng 
11/18/2013 Công cụ thiết kế Web - HTML 49 
3.1.4. Định dạng website với CSS 
1. Giới thiệu 
2. Một Số Quy Ước Về Cách Viết CSS 
3. Background 
4. Font Chữ 
5. Text 
6. Pseudo-classes For Links 
7. Class & ID 
8. Span & Div 
9. Box Model 
10. Margin & Padding 
11. Border 
12. Height & Width 
13. Float & Clear 
14. Position 
15. Layers 
11/18/2013 Công cụ thiết kế Web - HTML 50 
 Giới thiệu 
1. CSS là gì? 
2. Tại sao CSS? 
11/18/2013 Công cụ thiết kế Web - HTML 51 
 Một Số Quy Ước Về Cách Viết 
 CSS 
1. Cú pháp CSS 
2. Đơn vị CSS 
3. Vị trí đặt CSS 
4. Sự ưu tiên 
11/18/2013 Công cụ thiết kế Web - HTML 52 
 Cú pháp CSS 
Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau. 
Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng 
 code sau: 
+ Trong HTML: 
+ Trong CSS: body { background-color:#00BFF3; } 
Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt } 
Ví dụ: body { background:#FFF; bolor:#FF0000; font-size:14pt } Đối với một trang 
 web có nhiều thành phần có cùng một số thuộc tính, chúng ta có thể thực hiện 
 gom gọn lại như sau: 
 h1 { color:#0000FF; text-transform:uppercase } 
 h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-
 transform:uppercase; } 
Chú thích trong CSS được viết như sau /* Nội dung chú thích */ Ví dụ: /* Màu chữ 
 cho trang web */ body { color:red } 
11/18/2013 Công cụ thiết kế Web - HTML 53 
 Đơn vị CSS 
Đơn vị chiều dài 
Đơn vị màu sắc 
11/18/2013 Công cụ thiết kế Web - HTML 54 
 Vị trí đặt CSS 
+ Cách 1: Nội tuyến (kiểu thuộc tính) 
11/18/2013 Công cụ thiết kế Web - HTML 55 
 Vị trí đặt CSS (TT) 
+ Cách 2: Bên trong (thẻ style) 
11/18/2013 Công cụ thiết kế Web - HTML 56 
 Vị trí đặt CSS (TT) 
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) 
11/18/2013 Công cụ thiết kế Web - HTML 57 
 Vị trí đặt CSS (TT) 
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) 
11/18/2013 Công cụ thiết kế Web - HTML 58 
 Sự ưu tiên 
11/18/2013 Công cụ thiết kế Web - HTML 59 
 Background 
1. Màu nền (thuộc tính background-color 
2. Ảnh nền (thuộc tính background-image) 
3. Lặp lại ảnh nền (thuộc tính background-repeat) 
4. Khóa ảnh nền (thuộc tính background-
 attachment) 
5. Định vị ảnh nền (thuộc tính background-
 position) 
11/18/2013 Công cụ thiết kế Web - HTML 60 
 Màu nền (thuộc tính background-
 color 
Ví dụ: 
11/18/2013 Công cụ thiết kế Web - HTML 61 
 Ảnh nền (thuộc tính background-
 image) 
ảnh logo của blog Pearl Viết CSS để đặt logo này làm ảnh nền 
 trang web như sau: 
 body { 
 background-image:url(logo.png) 
 } 
 h1 { 
 background-color:red 
 } 
 h2 { 
 background-color:orange 
 } 
 p { 
 background-color: FDC689 
 } 
11/18/2013 Công cụ thiết kế Web - HTML 62 
 Lặp lại ảnh nền (thuộc tính 
 background-repeat) 
• Thuộc tính này có 4 giá trị: 
 + repeat-x: Chỉ lặp lại ảnh theo phương ngang. 
 + repeat-y: Chỉ lặp lại ảnh theo phương dọc. 
 + repeat: Lặp lại ảnh theo cả 2 phương, đây là giá 
 trị mặc định. 
 + no-repeat: Không lặp lại ảnh. 
11/18/2013 Công cụ thiết kế Web - HTML 63 
 Khóa ảnh nền (thuộc tính 
 background-attachment) 
Thuộc tính này có 2 giá trị: 
 + scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, 
 đây là giá trị mặc định. 
 + fixed: Cố định ảnh nền so với nội dung trang web. 
 Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn 
 đang cuộn trang web. 
11/18/2013 Công cụ thiết kế Web - HTML 64 
 Định vị ảnh nền (thuộc tính 
 background-position) 
Ví dụ: 
Thuộc tính background rút gọn 
11/18/2013 Công cụ thiết kế Web - HTML 65 
 Font Chữ 
1. Thuộc tính font-family 
2. Thuộc tính font-style 
3. Thuộc tính font-variant 
4. Thuộc tính font-weight 
5. Thuộc tính font-size 
11/18/2013 Công cụ thiết kế Web - HTML 66 
 Text 
1. Thuộc tính color 
2. Thuộc tính text-indent 
3. Thuộc tính text-align 
4. Thuộc tính letter-spacing 
5. Thuộc tính text-decoration 
6. Thuộc tính text-transform 
11/18/2013 Công cụ thiết kế Web - HTML 67 
 Pseudo-classes For Links 
 Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho 
 một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa 
 được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được 
 thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn 
 chuột (a:active). 
Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái 
 liên kết: 
11/18/2013 Công cụ thiết kế Web - HTML 68 
 Class & id 
1. Nhóm phần tử với class 
2. Nhận dạng phần tử với id 
11/18/2013 Công cụ thiết kế Web - HTML 69 
 Nhóm phần tử với class 
11/18/2013 Công cụ thiết kế Web - HTML 70 
 Nhận dạng phần tử với id 
11/18/2013 Công cụ thiết kế Web - HTML 71 
 Span & div 
1. Nhóm phần tử với 
2. Nhóm phần tử với 
11/18/2013 Công cụ thiết kế Web - HTML 72 
 Nhóm phần tử với 
11/18/2013 Công cụ thiết kế Web - HTML 73 
 Nhóm phần tử với 
11/18/2013 Công cụ thiết kế Web - HTML 74 
 Box Model 
11/18/2013 Công cụ thiết kế Web - HTML 75 
 Margin & padding 
1. Thuộc tính margin 
2. Thuộc tính padding 
11/18/2013 Công cụ thiết kế Web - HTML 76 
 Thuộc tính margin 
11/18/2013 Công cụ thiết kế Web - HTML 77 
 Thuộc tính padding 
• Cú pháp: 
 Padding: | | <padding-
 bottom> | 
11/18/2013 Công cụ thiết kế Web - HTML 78 
 Border 
1. Thuộc tính border-width 
2. Thuộc tính border-color 
3. Thuộc tính border-style 
11/18/2013 Công cụ thiết kế Web - HTML 79 
 Height & width 
1. Thuộc tính width 
2. Thuộc tính max-width 
3. Thuộc tính min-width 
4. Thuộc tính height 
5. Thuộc tính max-height 
6. Thuộc tính min-height 
11/18/2013 Công cụ thiết kế Web - HTML 80 
 Float & clear 
1. Thuộc tính float 
2. Thuộc tính clear 
11/18/2013 Công cụ thiết kế Web - HTML 81 
 Thuộc tính float 
Thuộc tính float có 3 giá trị: 
+ Left: Cố định phần tử về bên trái. 
+ Right: Cố định phần tử về bên phải. 
+ None: Bình thường. 
11/18/2013 Công cụ thiết kế Web - HTML 82 
 Thuộc tính clear 
Thuộc tính clear có tất cả 4 thuộc tính: 
• left (tràn bên trái) 
• right (tràn bên phải) 
• both (không tràn) 
• none. 
11/18/2013 Công cụ thiết kế Web - HTML 83 
 Position 
1. Absolute position 
2. Relative position 
11/18/2013 Công cụ thiết kế Web - HTML 84 
 Absolute position 
11/18/2013 Công cụ thiết kế Web - HTML 85 
 Relative position 
• Sự định vị tương đối cho một thành phần là sự định 
 vị được tính từ vị trí gốc trong tài liệu. Các thành 
 phần đã được định vị tương đối sẽ để lại khoảng 
 không trong tài liệu. Các thành phần được định vị 
 tương đối sẽ nhận giá trị position là relative. 
11/18/2013 Công cụ thiết kế Web - HTML 86 
 Layers 
• #logo1 { 
• position:absolute; top:70px; left:50 px; z-index:1 
• } 
• #logo2 { 
• position:absolute; top:140px; left:100px; z-index:2 
• } 
• #logo3 { 
• position:absolute; top:210px; left:150px; z-index:3 
• } 
• #logo4 { 
• position:absolute; top:280px; left:200px; z-index:4 
• } 
• #logo5 { 
• position:absolute; top:350px; left:250px; z-index:5 
• } 
11/18/2013 Công cụ thiết kế Web - HTML 87