BÀI 6: LÀM QUEN VỚI HTML VÀ CSS
NGÀY 16.5.2014
XEM VIDEO HƯỚNG DẪN TẠI:
http://goo.gl/uPRP7k
Trong bài
này hướng dẫn các bạn sử dụng các thuộc tính STYLE, CLASS, ID và tạo thẻ DIV.
Cách định dạng cho các thẻ của HTML. Tạo thẻ CONTENT. Bài hơi khó nên các bạn cần
tập trung học và ôn tập nhiều lần. Cách tạo Code bạn nên thực tập nhiều cho
quen và sử dụng các Code nhắc nhở của Chuong7trinh2 Dreamweaver cho thuần thục.
Danh sách các bài viết do Út Bỉnh
soạn thảo theo video hướng dẫn
Bài 4: Tạo Page trong Dreamweaver:
Bài 5: Làm việc với Code
Bài 6: Làm quen với HTML và CSS:
I.TÌM HIỂU
CẤU TRÚC CỦA FILE HTML CƠ BẢN.
Tạo Folder tên 06 để
tương tác với bài học hôm nay. Trong Folder 06 sẽ tạo một Folder tên code chứa các tập tin HTML mà bạn sẽ tạo ra bằng cách sử dụng mả
nguồn. Bạn tạo thêm một Folder tên tool sẽ
chứa các tập tin HTML cũng như các định dạng CSS mà bạn chỉ sử dụng các công cụ
của Dreamewaever để thực hiện.
Trong Folder code tạo tập
tin 01.html. HTML là
một loại ngôn gữ được đánh dấu dùng để hiển thị nội dung cho Trang Web của chúng
ta. Diue962 chúng ta cần quan tâm trong bài học ngày hôm nay đó là hiểu được cấu
trúc cơ bản của một tài liệu HTML và làm sao để có thể là kết hợp nó với CSS để
định dạng cho Trang Web của chúng ta. Bấm đúp File 01.html.
- Dòng Title nhập: Example 01. Ctrl+s để lưu file. Preview trong Chrome. Bạn thấy Title đã hiện ra Example 01.
- Nhập nội dung: Vào phần body nhập: Khóa học Thiết kế Web với
Dreamweaver. Mở Chrome đã thấy nội dung vừa nhập.
- Bấm File > Save as > Name đặt: 02.htm > Save. Title: đặt Example 02. Bạn thử Preview: Đã thấy phần mở rọng .htm vẫn mở được.
Như vậy File HTML có 2 phần mở rộng: .html hoặc .htm
- Tìm hiểu cấu trúc File HTML: Bạn định dạng để cho dễ nhìn hơn.
Phủ khối nội dung trong Thẻ Head và
bấm phím Tab để nội dung thụt vào trong. Bạn cho nội dung trong Thẻ Body
thụt vào trong để biết rằng nội dung này thuộc thẻ Body. Tương tự, áp dụng
cho thẻ Meta và Thẻ Title.
- Lưu ý:
- Phần DOCTYPE Không phải là một Thẻ HTML. Nó cho cho trình duyệt Web biết rằng phiên bản ngôn ngữ đánh dấu mà chúng ta đang sử dụng cho Trang Web.
- Bên trong Thẻ HTML bạn thấy có 2 phần Thẻ chính. Phần Thẻ Head sẽ lưu trữ thông tin của Hearder bao gồm các thẻ meta , các phần liên kết đến các Files CSS và JavaScript cùng với phần Title. Nội dung trong Thẻ Head sẽ không hiển thị trong Trình duyệt Web.
- Vậy là bạn đã tìm hiểu sơ lược cấu trúc của một tài liệu HTML cơ bản.
II.ĐỊNH DẠNG
CHO CÁC THẺ HTML
Save As lại, đặt tên 03, bấm Save. Title nhập Exmaple 03. Chèn
Thẻ <div> trước và sau nội
dung. Bạn Preview vẫn thấy như bình thường.
Trong trình duyệt bạn bấm phải lên nội dung và chọn Inpect
Elememnt. Chức năng này cho các bạn quan sát các phần tử HTML của giá trị đang
được chọn. Bạn thấy giá trị là một cặp Thẻ <div> với nội dung bên trong: Khóa học Thiết kế Web với Dreamweaver. Save As thành 04 và Title là Example 04.
THUỘC
TÍNH STYLE
Cách định dạng (Chiều rộng, giá trị và Background) cho cặp Thẻ<div>:
- Dùng thuộc tính style cho Thẻ <div>: Khi bạn
gỏ s, một danh sách nhac81` lệnh xuất hiện để bạn chọn do đó bạn cũng không
cần nhớ quá nhiều vầ mã nguồn này. Bạn chọn giá trị style và bấm Enter.
Bên trong bạn định dạng with, nhập giá
trị 500
Nhập 500 và dấu ; Nhập b chọn
background, nhập c chọn color và nhập ;. Bạn Refresh lại. Bạn Preview.
Bạn mở Inpect Element sẽ thấy Thẻ
<div> đã được định dạng phần width và bacground màu. Trong Tab Styles
trong cột phải nếu muốn xóa dấu chọn để không áp dụng thì bấm xóa trước Width
hoặc Background. Bạn cũng có thể thay đổi giá trị. Như vậy với thuộc tính Style
bạn đã định dạng được nội dung. Vậy khi dùng Style để định dạng bạn thấy mã
HTML rất rối và khó chịu. Do đó bạn cần tách riêng loại định dạng này vì trang
Web bao gồm vô số các Thẻ <div>.Với mỗi Thẻ <div> bạn tạo một định
dạng như thế không được tối ưu và gây dài dòng cho mã nguồn. Vào File > Save
as > Đặt tên: 05 > Title nhập: Example 05.
THUỘC TÍNH CLASS
Dùng thuộc tính Class của Thẻ <div>: Bạn nhập thuộc tính class có tên
content.
<body>
<div class="content">Khóa
học Thiết kế Web với Dreamweaver</div>
</body>
Định
dạng cho Class content:
<style type="text/css">
.content
{
width:
500px;
background:#0C3;
}
</style>
Bây giờ bạn Preview File 05 này và các đặc tính trong Inpect
Element cvung4 giống như trường hợp ban đầu. Bãn Save As thành File 06 > Đổi
: Example 06.
TẠO THẺ
<DIV> KHÁC:
Copy giá trị này và nhập ội dung thêm. Xem Preview
<div
class="content">Khóa học Thiết kế Web với Dreamweaver</div>
<div class="content">Khóa học
này được cung cấp bởi ZendVN</div>
</body>
Xem Preview bạn thấy hiển thị giống nhau do cùng chịu ảnh hưởng
của clss content:
Bạn nhập width cho class content bên dưới là 800 px
<div
class="content" style=" width: 800px;">Khóa học này được
cung cấp bởi ZendVN</div>
Xem preview, bạn thấy lúc này phần width ở thẻ div đã là 800
px . Phần width ở class content đã bị gạch bỏ. Điều này chứng tỏ là độ ưu tiên
khi mà chúng ta định dạng ở phần style sẽ mạnh hơn độ ưu tiên ở phần content và
phần class của chúng ta. Bạn Save As lại đặt tên 07 > Thay đổi: Example 07.
TẠO CONTENT
2
Tạo content2 và width 1000 px và xóa <div> bên dưới.
<style type="text/css">
.content
{
width:
500px;
background:#0C3;
}
.content2
{
width:
1000px;
background:#0C3;
}
</style>
Và nhập tên content2: Điều này cho chúng ta biết là đối với
một Thẻ HTML bạn có thể thiết lập cho nó nhiều class khác nhau. Bạn Preview và
sử dụng thuộc tính Inpect Element để kiểm tra giá trị của nó: Bạn thấy Thẻ Div
chịu tác động bởi 2 class : content và
content 2. Tuy nhiên các giá trị củ nó chịu ảnh hưởng bởi class content 2 do đó
chúng ta có thể suy ra một điều rằng: Khi một thẻ HTML chịu tác động của một
hay là nhiều class thì các thuộc tính của class sau sẽ đè lên các thuộc tính của
class trước. Đây là một deiu962 các bạn cần lưu ý. Bạn lưu với tên 08 và đổi thành
Example 08. Việc định dạng CSS ở đây làm cho HTML thêm rối rắm. Đo đó bạn cần tách
phần mã nguồn ra để dễ dàng quản lý hơn đối với việc định dạng.
Vào phần Code tạo một
Folder tên: css. Vào
Folder css tạo một File tên: style.css. Bạn Copy phần content và content 2 và dán vào File
style.css.
Bạn thấy mã nguồn trở nên rối nên bạn cần định dạng lại: Vào
Menu Commands > Apply Source Formatting To Selection. Bạn thấy phần mã nguồn
đã được định dạng laỊ. Đóng style.css.
Bạn xóa hết các định dạng và Preview:
Bạn thấy các định dạng không còn nửa. Đó là do các bạn chưa
kéo phần CSS vào. Cách kéo là đặt CSS trong thẻ Head.
Bạn nhập Code CSS như sau :
<link href="css/style.css"
media="screen" type="text/css" rel="stylesheet">
Phẩn Div bạn nhập code và Example
08 thành Example 09.
<div
class="content" style="width: 1000px;">Khóa học Thiết kế
Web với Dreamweaver</div>
Bạn Preview và kiểm tra phần tử: Bạn thấy style với width là
1000 px . Nó đã đè lên phần width cùa class content. Tuy nhiên nếu định dạng như
thế này thí nó lại dính vào phần HTML. Do đó phần mã nguồn HTMl rất rối rắm.
THUỘC
TÍNH ID:
Bạn sẽ sử dụng một thuộc tính trong thẻ HTML đólà thuộc tính
ID để xử lý vấn đề này. Bạn lưu lại tên 10. Đổi thành Example 10.
<div class="content"
id="course">Khóa học Thiết kế Web với Dreamweaver</div>
Bạn vào File style.css và bạn định dạng cho course là 1000 px. Bạn bấm file
10.html
Bạn preview. Bạn thấy nội dung hiển thị bình thường như khi bạn
sử dụng thuộc tính style. Bạn thấy course đã đè lên phần class content. Như vậy
bạn suy ra một diue962 đó là độ ưu tiên ở ID sẽ mạnh hơn độ ưu tiên ở class.
Bạn Save as thành 11 và nhập Code thuộc tính:
<div
style="width: 900px;" id="course">Khóa học Thiết kế Web
với Dreamweaver</div>
Preview. bạn thấy chưa xuất hiện gì cả. Bạn thấy width 900 px
của thuộc tính style đã đè lên width 1000 px của ID course. Do đó bạn suy ra một
điều đó là: Độ ưu tiện ở phần style sẽ mạnh hơn độ ưu tiện ở phần id.
ĐỘ ƯU
TIÊN:
Thuộc tính style mạnh hơn id. Id mạnh hơn class.
Như vậy là bạn
đã tìm hiểu thành công cấu trúc của một File HTML cơ bản. Cách sử dụng thuộc
tính STYLE, CLASS, ID để định dạng cho các Thẻ HTML. Đây chì là hướng dẫn thao
tác mã nguồn để có thể tạo ra các ví dụ này. Bài sao sẽ hướng dẫn sử dụng các
công cụ của Dreamweaver.
LINKS DOWNLOAD CÁC BÀI
VIẾT
CHUYÊN ĐỀ DREAMWEAVER
CS6:
Bài 4: Tạo Page trong Dreamweaver:
Bài 5: Làm việc với Code
Bài 6: Làm quen với HTML và CSS:
No comments:
Post a Comment