bÀi 2 html - làm quen với css – định dạng style cho trang web - giáo trình fpt

BÀI 2HTML - LÀM QUEN VỚI CSS – ĐỊNH DẠNG STYLE

CHO TRANG WEB & BỐ CỤC TRANG WEB

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

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


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


Thẻ mở Thẻ đóng


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>


<html ><head><title>tiêu đề website</title></head>

<body>Văn bản và hình ảnh sẽ nằm ở đây …

</body></html>


Phân cấp trong HTML

<html>...</html>

<head>...</head> <body>...</body>


<title>...</title> <p>...</p> <br> <table>...</table>

Ví dụ: “Hello world” Ví dụ: “Hi!”

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


<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ẻ đ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>


<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>


Thẻ link (liên kết):Được định nghĩa thông qua thẻ <a>…</a>


<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>



<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>

http://www.poly.edu.vn/

http://www.poly.edu.vn/


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



<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>


<html><body><h4>Danh sách không thứ tự:</h4><ul>


</ul></body></html>

<h4>Danh sách theo thứ tự:</h4><ol>


</ol>

Định nghĩa bởi thẻ <ul>

Định nghĩa bởi thẻ <ol>

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ị


<h4>Hình minh họa:</h4><img src="html-code.jpg" alt="Hìnhminh họa" border="0" width="320"height="319"/>

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>


</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>


</tr><tr>


</tr></table>

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


<html ><head><title>tiêu đề website</title></head><body>

<div>nội dung …</div><div>nội dung …</div>

</body></html>

CASCADING STYLE SHEETS (CSS)

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


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


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, ….


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>


<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>

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>


<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>

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


CSSSử dụng môitrường soạn thảoCode


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


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


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ỳ



Bước 2: nhấn nút Edit Rule trên bảng PROPERTIES đểchỉnh sửa style (CSS) cho thẻ <h1>



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


Giá trị của các thuộctính



Thiết lập các giá trịliên quan


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


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


• 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ị


• 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


Sử dụng môi trường soạn thảo mã Code:

Viết trong cặpthẻ <head> ở

HTML


Viết mã CSS Nội tuyến (inline)

Viết trong mộtfile .css riêng biệt


Viết CSS trong cặp thẻ <head>…</head>



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>



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



• 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)



• 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>


<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>

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


Navigator(điều

hướng)footer

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


bÀi 2 html - làm quen với css – định dạng style cho trang web - giáo trình fpt

Documents