bÀi 2 html - làm quen với css – định dạng style cho trang web - giáo trình fpt
DESCRIPTION
Làm quen với HTML: Khái niệm, cấu trúc Cách viết mã HTML với môi trường soạn thảo (notepad, Dreamweaver, …) Làm việc với những thành phần: • Văn bản • Hình ảnh Làm quen với CSS Khởi tạo CSS với Dreamweaver CS4 Bố cục trang web với CSS Làm quen với HTML: Khái niệm, cấu trúc Cách viết mã HTML với môi trường soạn thảo (notepad, Dreamweaver, …) Làm việc với những thành phần: • Văn bản • Hình ảnh Làm quen với CSS Khởi tạo CSS với Dreamweaver CS4 Bố cục trang web với CSSTRANSCRIPT
![Page 1: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/1.jpg)
BÀI 2HTML - LÀM QUEN VỚI CSS – ĐỊNH DẠNG STYLE
CHO TRANG WEB & BỐ CỤC TRANG WEB
![Page 2: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/2.jpg)
NHẮC LẠI BÀI TRƯỚC
Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – serverCông việc thiết kế website
Những kiến thức cơ bản về HTML & XHTMLLàm quen với Adobe Dreamweaver CS4Khởi tạo một trang web và làm việc với những thànhphần trên trang web: văn bản, hình ảnh
Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – serverCông việc thiết kế website
Những kiến thức cơ bản về HTML & XHTMLLàm quen với Adobe Dreamweaver CS4Khởi tạo một trang web và làm việc với những thànhphần trên trang web: văn bản, hình ảnh
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 2
![Page 3: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/3.jpg)
MỤC TIÊU BÀI HỌC
Làm quen với HTML:Khái niệm, cấu trúcCách viết mã HTML với môi trường soạn thảo(notepad, Dreamweaver, …)Làm việc với những thành phần:
• Văn bản• Hình ảnh
Làm quen với CSSKhởi tạo CSS với Dreamweaver CS4Bố cục trang web với CSS
Làm quen với HTML:Khái niệm, cấu trúcCách viết mã HTML với môi trường soạn thảo(notepad, Dreamweaver, …)Làm việc với những thành phần:
• Văn bản• Hình ảnh
Làm quen với CSSKhởi tạo CSS với Dreamweaver CS4Bố cục trang web với CSS
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 3
![Page 4: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/4.jpg)
HTML
![Page 5: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/5.jpg)
HTML – KHÁI NIỆM – CẤU TRÚC
HTML là ngôn ngữ đánh dấu (không phải ngôn ngữlập trình) - Hyper Text Markup LanguageSử dụng cấu trúc thẻ để mô tả trang web(webpage: *.html)Thẻ HTML:
Cấu trúc thẻ: <từ khóa>Thường đi theo cặp: <html> … </html>
Nội dung của thẻ có thể là một đoạn ký tự hoặc mộtthẻ khác
HTML là ngôn ngữ đánh dấu (không phải ngôn ngữlập trình) - Hyper Text Markup LanguageSử dụng cấu trúc thẻ để mô tả trang web(webpage: *.html)Thẻ HTML:
Cấu trúc thẻ: <từ khóa>Thường đi theo cặp: <html> … </html>
Nội dung của thẻ có thể là một đoạn ký tự hoặc mộtthẻ khác
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 5
Thẻ mở Thẻ đóng
![Page 6: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/6.jpg)
HTML – KHÁI NIỆM – CẤU TRÚC
Cấu trúc trang HTML:<html ><head><title>tiêu đề website</title></head>
<body>Văn bản và hình ảnh sẽ nằm ở đây …
</body></html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 6
<html ><head><title>tiêu đề website</title></head>
<body>Văn bản và hình ảnh sẽ nằm ở đây …
</body></html>
![Page 7: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/7.jpg)
HTML – KHÁI NIỆM – CẤU TRÚC
Phân cấp trong HTML
<html>...</html>
<head>...</head> <body>...</body>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 7
<title>...</title> <p>...</p> <br> <table>...</table>
Ví dụ: “Hello world” Ví dụ: “Hi!”
![Page 8: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/8.jpg)
HTML – LÀM VIỆC VỚI VĂN BẢN
Thẻ tiêu đề: h1 h6<hn>nội dung hiển thị</hn>n là số nguyên từ 1-6Giống như định dạng Bullets trong word
<html ><head><title>Làm việc với tiêu đề</title></head><body>
<h1>Tiêu đề cấp 1</h1><h2>Tiêu đề cấp 2</h2><h3>Tiêu đề cấp 3</h3><h4>Tiêu đề cấp 4</h4><h5>Tiêu đề cấp 5</h5><h6>Tiêu đề cấp 6</h6>
</body></html>
Thẻ tiêu đề: h1 h6<hn>nội dung hiển thị</hn>n là số nguyên từ 1-6Giống như định dạng Bullets trong word
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 8
<html ><head><title>Làm việc với tiêu đề</title></head><body>
<h1>Tiêu đề cấp 1</h1><h2>Tiêu đề cấp 2</h2><h3>Tiêu đề cấp 3</h3><h4>Tiêu đề cấp 4</h4><h5>Tiêu đề cấp 5</h5><h6>Tiêu đề cấp 6</h6>
</body></html>
![Page 9: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/9.jpg)
HTML – LÀM VIỆC VỚI VĂN BẢN
Thẻ đoạn văn: <p>nội dung hiển thị</p><html ><head><title>Thẻ đoạn văn</title></head>
<body><h1>Đánh giá chi tiết HTC One
X</h1><p>Sau một năm ra nhiều sản
phẩm, HTC bắt đầu thay đổi chiến lược.</p>
<p>One X bắt đầu có mặt trêncác kệ hàng ở mức giá 16,5 triệu. </p>
</body></html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 9
<html ><head><title>Thẻ đoạn văn</title></head>
<body><h1>Đánh giá chi tiết HTC One
X</h1><p>Sau một năm ra nhiều sản
phẩm, HTC bắt đầu thay đổi chiến lược.</p>
<p>One X bắt đầu có mặt trêncác kệ hàng ở mức giá 16,5 triệu. </p>
</body></html>
![Page 10: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/10.jpg)
HTML – LÀM VIỆC VỚI VĂN BẢN
Thẻ link (liên kết):Được định nghĩa thông qua thẻ <a>…</a>
<html ><head><title>Thẻ đoạn văn</title></head>
<body><a href=“http://www.poly.edu.vn/”>Nhấn vào đây để chuyển tới trang web
của Fpoly></a></body></html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 10
<html ><head><title>Thẻ đoạn văn</title></head>
<body><a href=“http://www.poly.edu.vn/”>Nhấn vào đây để chuyển tới trang web
của Fpoly></a></body></html>
![Page 11: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/11.jpg)
HTML – LÀM VIỆC VỚI VĂN BẢN
Tạo danh sách (list) với HTML:2 loại danh sách: danh sách thứ tự & danh sáchkhông thứ tựTrong danh sách có thể chứa danh sách con
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 11
![Page 12: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/12.jpg)
HTML – LÀM VIỆC VỚI VĂN BẢN
<html><body><h4>Danh sách không thứ tự:</h4><ul>
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ul></body></html>
Định nghĩa bởi thẻ <ul>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 12
<html><body><h4>Danh sách không thứ tự:</h4><ul>
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ul></body></html>
<h4>Danh sách theo thứ tự:</h4><ol>
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
Định nghĩa bởi thẻ <ul>
Định nghĩa bởi thẻ <ol>
![Page 13: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/13.jpg)
HTML – LÀM VIỆC VỚI HÌNH ẢNH
Chèn hình ảnh vào trang web:<img src="đường dẫn tới ảnh" alt="…."/>
Đường dẫn tới ảnh:-Đường dẫn tuyệt đối
- Đường dẫn tương đối- Dạng link
Xác định văn bản thay thế,nếu hình ảnh không hiển thị
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 13
<h4>Hình minh họa:</h4><img src="html-code.jpg" alt="Hìnhminh họa" border="0" width="320"height="319"/>
![Page 14: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/14.jpg)
HTML – LÀM VIỆC VỚI TABLE
Sử dụng thẻ <table></table> để định dạng bảngtrong HTML:
Được chia thành nhiều hàng: <tr>…</tr>Mỗi hàng được chia thành ngăn dữ liệu: <td>…</td>
<table border="1"><tr>
<td>Ô số 1</td><td>Ô số 2</td><td>Ô số 3</td>
</tr><tr>
<td>Ô số 4</td><td>Ô số 5</td><td>Ô số 6</td>
</tr></table>Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 14
<table border="1"><tr>
<td>Ô số 1</td><td>Ô số 2</td><td>Ô số 3</td>
</tr><tr>
<td>Ô số 4</td><td>Ô số 5</td><td>Ô số 6</td>
</tr></table>
![Page 15: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/15.jpg)
HTML – LÀM VIỆC VỚI THẺ DIV
Thẻ <div> định nghĩa một bộ phần hoặc một phầntrong tài liệu HTMLĐược sử dụng cho nhóm khối thành phần trên web,để dễ dàng tạo định dạng cho chúngĐược sử dụng thường xuyên với CSS để tạo địnhdạng
Thẻ <div> định nghĩa một bộ phần hoặc một phầntrong tài liệu HTMLĐược sử dụng cho nhóm khối thành phần trên web,để dễ dàng tạo định dạng cho chúngĐược sử dụng thường xuyên với CSS để tạo địnhdạng
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 15
<html ><head><title>tiêu đề website</title></head><body>
<div>nội dung …</div><div>nội dung …</div>
</body></html>
![Page 16: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/16.jpg)
CASCADING STYLE SHEETS (CSS)
![Page 17: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/17.jpg)
KHÁI NIỆM
Là những tệp tin/đoạn text, được kết hợp với 1 hoặcnhiều tệp tin HTML để định nghĩa các quy tắc choviệc hiển thị trang webCSS tạo ra định nghĩa cho các thành phần trongtrang webĐịnh nghĩa cách hiển thị của các thành phần HTMLCó thể được đặt ở 3 vị trí:
Trong cặp thẻ <head>Nội tuyến (inline): đặt cạnh
tên thẻĐịnh nghĩa trong một file .css riêng biệt
Là những tệp tin/đoạn text, được kết hợp với 1 hoặcnhiều tệp tin HTML để định nghĩa các quy tắc choviệc hiển thị trang webCSS tạo ra định nghĩa cho các thành phần trongtrang webĐịnh nghĩa cách hiển thị của các thành phần HTMLCó thể được đặt ở 3 vị trí:
Trong cặp thẻ <head>Nội tuyến (inline): đặt cạnh
tên thẻĐịnh nghĩa trong một file .css riêng biệt
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 17
![Page 18: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/18.jpg)
KHÁI NIỆM
Một số quy tắc của CSS:Quy tắc kế thừa: nếu luật CSS được áp dụng cho thẻcha thì cũng được mặc định áp dụng cho các thẻcon/nội dung trong đóQuy tắc tầng: nếu có 2 luật CSS, một luật áp dụngcho thẻ cha và một luật áp dụng cho thẻ con thì luậtthứ 2 sẽ được áp dụng cho thẻ conQuy tắc dựa trên mức độ: nếu có 2 luật CSS cùngđược áp dụng cho một đối tượng, luật nào có giá trịweight/specific lớn hơn thì sẽ được áp dụngQuy tắc !important: nếu luật được thêm từ khóa"!important" thì nó sẽ được áp dụng, không phụthuộc vào các quy tắc khác
Một số quy tắc của CSS:Quy tắc kế thừa: nếu luật CSS được áp dụng cho thẻcha thì cũng được mặc định áp dụng cho các thẻcon/nội dung trong đóQuy tắc tầng: nếu có 2 luật CSS, một luật áp dụngcho thẻ cha và một luật áp dụng cho thẻ con thì luậtthứ 2 sẽ được áp dụng cho thẻ conQuy tắc dựa trên mức độ: nếu có 2 luật CSS cùngđược áp dụng cho một đối tượng, luật nào có giá trịweight/specific lớn hơn thì sẽ được áp dụngQuy tắc !important: nếu luật được thêm từ khóa"!important" thì nó sẽ được áp dụng, không phụthuộc vào các quy tắc khác
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 18
![Page 19: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/19.jpg)
KHÁI NIỆM
4 loại thẻ chọn trong CSS:Tags: Đối tượng áp dụng luật là thẻ HTMLClasses: Đối tượng áp dụng luật là các thẻ div thuộcclass tương ứngIDs: Đối tượng áp dụng luật thẻ thẻ div có id tươngứngPseudo-class: Đối tượng áp dụng luật là các lớp giảđã được định nghĩa sẵn như: link, active, hover, ….
4 loại thẻ chọn trong CSS:Tags: Đối tượng áp dụng luật là thẻ HTMLClasses: Đối tượng áp dụng luật là các thẻ div thuộcclass tương ứngIDs: Đối tượng áp dụng luật thẻ thẻ div có id tươngứngPseudo-class: Đối tượng áp dụng luật là các lớp giảđã được định nghĩa sẵn như: link, active, hover, ….
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 19
![Page 20: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/20.jpg)
KHÁI NIỆM
Class và ID trong CSS:ID:
• Áp dụng cho một yếu tố duy nhất, không lặp lại• Bắt đầu bằng ký tự #
<html><head><style type="text/css">#para1 { text-align:center; color:red;}</style></head><body><p id="para1">Hello World!</p><p>This paragraph is not affected by thestyle.</p></body></html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 20
<html><head><style type="text/css">#para1 { text-align:center; color:red;}</style></head><body><p id="para1">Hello World!</p><p>This paragraph is not affected by thestyle.</p></body></html>
![Page 21: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/21.jpg)
KHÁI NIỆM
Class:• Được sử dụng để áp dụng triệt để tính kế thừa• Bắt đầu bằng ký tự .
<html><head><style type="text/css">.text_red {color:#F00; font-variant:small-caps}</style></head><body><p class="text_red">minh họa cho class</p></body></html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 21
<html><head><style type="text/css">.text_red {color:#F00; font-variant:small-caps}</style></head><body><p class="text_red">minh họa cho class</p></body></html>
![Page 22: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/22.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
![Page 23: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/23.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
2 cách tạo CSS trong Dreamweaver:
CSS
Sử dụng môitrường Design vớicác bảng liên quan
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 23
CSSSử dụng môitrường soạn thảoCode
![Page 24: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/24.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Sử dụng môi trường Design với các bảng liên quan:1. sử dụng bảng INSERT kết hợp với bảngPROPERTIES, hộp thoại CSS Rule definition
Common:LayoutFormsDataSpryInContext EdditingTextFavorites
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 24
Cung cấp các chức năng cho phép chèn hình ảnh,form, nội dung đa phương tiện vào web
Common:LayoutFormsDataSpryInContext EdditingTextFavorites
![Page 25: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/25.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Ví dụ: định nghĩa CSS cho thẻ <h1>:Bước 1: sử dụng bảng INSERT chèn thẻ <h1>, nhậpnội dung bất kỳ
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 25
![Page 26: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/26.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Bước 2: nhấn nút Edit Rule trên bảng PROPERTIES đểchỉnh sửa style (CSS) cho thẻ <h1>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 26
![Page 27: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/27.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Bước 3: đặt giá trị cho các thuộc tính trong hộp thoạiCSS Rule definition
Cột phân loại cácthuộc tính
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 27
Giá trị của các thuộctính
![Page 28: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/28.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 28
Thiết lập các giá trịliên quan
![Page 29: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/29.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Kết quả:
Chỉnh sửa style với bảng CSS STYLES:• Đây là bảng hiển thị toàn bộthuộc tính của các thành phầntrên web
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 29
Kết quả:
Chỉnh sửa style với bảng CSS STYLES:• Đây là bảng hiển thị toàn bộthuộc tính của các thành phầntrên web
![Page 30: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/30.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
• Ví dụ: nhấn chuột chọn nội dung thẻ <h1>, thuộc tínhvà giá trị style của thẻ sẽ được hiển thị trên bảng CSSSTYLES
Vùng hiển thị thuộc tính và giá trị
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 30
• Ví dụ: nhấn chuột chọn nội dung thẻ <h1>, thuộc tínhvà giá trị style của thẻ sẽ được hiển thị trên bảng CSSSTYLES
Vùng chỉnh sửa giá trị của các thuộctính
![Page 31: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/31.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Sử dụng môi trường soạn thảo mã Code:
Viết trong cặpthẻ <head> ở
HTML
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 31
Viết mã CSS Nội tuyến (inline)
Viết trong mộtfile .css riêng biệt
![Page 32: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/32.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Viết CSS trong cặp thẻ <head>…</head>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 32
![Page 33: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/33.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Viết CSS Inline<html><body><h1 style="font-family:Tahoma, Geneva, sans-serif; font-size:24px; font-style:italic; color:#F00">thực hành với thẻ <h1></h1></body></html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 33
![Page 34: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/34.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Viết trong một file .css riêng biệt:• Bước 1: khởi tạo một file .css bằng cách lựa chọn File >
New … lựa chọn CSS trong hộp thoại New Document
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 34
![Page 35: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/35.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
• Bước 2: soạn thảo mã CSS cho thẻ <h1>, sau đó lưufile tại thư mục web (thư mục có chứa file .html)
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 35
![Page 36: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/36.jpg)
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
• Bước 3: trong file .html, viết lệnh để gọi file .css
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>WEB101- Thiết kế web</title><link href=“common.css" rel="stylesheet" type="text/css" /></head><body><h1>thực hành với thẻ <h1></h1></body>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 36
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>WEB101- Thiết kế web</title><link href=“common.css" rel="stylesheet" type="text/css" /></head><body><h1>thực hành với thẻ <h1></h1></body>
![Page 37: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/37.jpg)
BỐ CỤC WEBSITE VỚI CSS
![Page 38: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/38.jpg)
BỐ CỤC WEBSITE VỚI CSS
Layout là bố cục trình bày sắp xếp các thành phầncủa một trang webLayout website thường chia theo dạng cột
website
header
contentv.v…
Layout là bố cục trình bày sắp xếp các thành phầncủa một trang webLayout website thường chia theo dạng cột
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 38
Navigator(điều
hướng)footer
![Page 39: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/39.jpg)
BỐ CỤC WEBSITE VỚI CSS
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 39
![Page 40: BÀI 2 HTML - Làm quen với CSS – định dạng style cho trang web - Giáo trình FPT](https://reader034.vdocuments.pub/reader034/viewer/2022050805/5584e585d8b42a25468b528c/html5/thumbnails/40.jpg)
TỔNG KẾT
HTML (ngôn ngữ đánh dấu siêu văn bản) là ngônngữ tạo nên các trang web thông qua các thẻ đánhdấuThẻ là thành phần đánh dấu văn bản. Nội dungtrong thẻ sẽ được trình duyệt xử lý dựa trên thẻchứa nóCSS là ngôn ngữ đơn giản, hoạt động cùng vớiHTML để định dạng về mặt hình thức cho trang webCó 3 vị trí để đặt CSS: trong thẻ <head>, cùngdòng với thẻ (inline), ở một file .css bên ngoàiLayout là bố cục trình bày sắp xếp các thành phầncủa một trang web, thường được chia theo dạng cột
HTML (ngôn ngữ đánh dấu siêu văn bản) là ngônngữ tạo nên các trang web thông qua các thẻ đánhdấuThẻ là thành phần đánh dấu văn bản. Nội dungtrong thẻ sẽ được trình duyệt xử lý dựa trên thẻchứa nóCSS là ngôn ngữ đơn giản, hoạt động cùng vớiHTML để định dạng về mặt hình thức cho trang webCó 3 vị trí để đặt CSS: trong thẻ <head>, cùngdòng với thẻ (inline), ở một file .css bên ngoàiLayout là bố cục trình bày sắp xếp các thành phầncủa một trang web, thường được chia theo dạng cột
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 40