HTML CĂN BẢNHTML Hyper Text Markup Language: ngôn ngữ đánh dấu siêu văn bản Mỗi file HTML có đuôi .htm hoặc .html: file văn bản chứa các thẻ đánh dấu markup tags.. Thẻ đánh dấu này cho
Trang 2MỤC TIÊU BÀI HỌC
Sau khi kết thúc môn học này, sinh
viên có thể:
Thiết kế trang web tĩnh, sử dụng HTML
Sử dụng CSS StyleSheet và Java Script
Trang 3HTML CĂN BẢN
HTML (Hyper Text Markup Language): ngôn ngữ
đánh dấu siêu văn bản
Mỗi file HTML (có đuôi htm hoặc html): file văn
bản chứa các thẻ đánh dấu (markup tags) Thẻ
đánh dấu này cho trình duyệt biết cách thể hiện
trang web
Soạn thảo file HTML:
Trang 4TRANG WEB HELLO WORLD
Trang 9THUỘC TÍNH CỦA CÁC THẺ HTML
HTML attributes (Thuộc tính của thẻ HTML)
Bổ sung các thông tin cho phần tử HTML (HTML elements)
Khuôn dạng thuộc tính: name=“value” (ví dụ: align=“center”)
Thường được đặt trong thẻ mở đầu
Trang 11CÁC THẺ ĐỊNH DẠNG VĂN BẢN
Các thẻ định dạng văn bản
<b>, <big>, <strong>, <small>…
Các thẻ định dạng dữ liệu liên quan đến máy tính, ngôn ngữ lập trình…
<code>, <kbd>, <pre>, <var>…
Các thẻ trích dẫn, định nghĩa, chú thích…
<blockquote>, <address>, <abbr>…
Trang 13CÁC THỰC THỂ KÝ TỰ (CHARACTER ENTITIES)
Tại sao cần sử dụng thực thể ký tự?
Một số ký tự, ví dụ như “<“ có ý nghĩa đặc biệt trong mã HTML nên không thể biểu
diễn trực tiếp trong một đoạn văn bản
Khuôn dạng thực thể ký tự
Trang 14CÁC THỰC THỂ KÝ TỰ
(CHARACTER ENTITIES)
Trang 15CÁC THỰC THỂ KÝ TỰ
(CHARACTER ENTITIES)
Trang 16SIÊU LIÊN KẾT (HYPERLINK)
HTML sử dụng các siêu liên kết để liên kết tới các tài liệu khác (trang web, file văn bản, âm thanh, hình ảnh…)
Trang 17SIÊU LIÊN KẾT (HYPERLINK)
<br><a href="#Chapter1">Nhay toi Chuong 1</a></br>
<br><a href="#Chapter2">Nhay toi Chuong 2</a></br>
Trang 23HTML LISTS
HTML Lists: biểu diễn các danh sách trong tài liệu HTML
Phân loại
Danh sách không sắp xếp: <ul>, <li>
Danh sách có sắp xếp: <ol>, <li>
Trang 25<input type=“” name=“” value=“”>
•Type: text, radio, checkbox, submit
•Name: tên của điều khiển
•Value: giá trị
<select name=“”>
Trang 26Ho va ten <input type="text" size="30">
<br>Que quan <input type="text" size="30">
<br>Gioi tinh
<br><input type="radio" checked="checked" name="sex" value="male"> Nam </input>
<br><input type="radio" name="sex" value="female"> Nu</input>
</form>
<br>Nghe nghiep
<select name="occuptaion">
<option value="teacher">Giao vien</option>
<option value="Doctor">Bac si</option>
<option value="Engineer">Ky su</option>
</select>
</fieldset>
Trang 27CSS CĂN BẢN
Lý do ra đời Style Sheet
Giải quyết một vấn đề chung mà các trình duyệt web
gặp phải
Ban đầu, HTML định nghĩa các thẻ để hiển thị nội dung, bố cục và cách
trình bày là do các trình duyệt đảm nhiệm, không sử dụng các thẻ định
dạng
Các trình duyệt (Netscape & Internet Explorer) bổ sung thêm các thẻ và
thuộc tính (VD: thẻ font và thuộc tính màu)
W3C chuẩn hóa HTML, bổ sung style sheet để định nghĩa bố cục và cách
Trang 28CSS CĂN BẢN
CSS (Cascading Style Sheet)
Style (phong cách) định nghĩa bố cục và cách hiển thị
cho trang web
Style được chia thành các loại
Inline Style: định nghĩa ngay trong các thẻ HTML
Internal Style Sheet: định nghĩa giữa cặp thẻ <head> … </head>
External Style Sheet -> lưu trong các file css
Explorer default: mặc định của trình duyệt web
Trang 29CSS CĂN BẢN - CÚ PHÁP KHAI BÁO
Phân cách bởi dấu “:”
Nhiều thuộc tính, phân cách bởi
Trang 31CSS CĂN BẢN - SELECTOR LÀ THẺ HTML
p {text-align:center;color:red} p { text-align: center;
color: black;
font-family: arial }
Trang 32CSS CĂN BẢN - CLASS SELECTOR
p.right {text-align: right;
Trang 33CSS CĂN BẢN – ID SECTOR
p#para1 { text-align: center; color: red }
#green {color: green}
Style cho một thẻ với Id xác định
Style cho nhiều thẻ với Id xác định
<p id="para1">
Ví dụ
Trang 34CSS CĂN BẢN - EXTERNAL STYLE SHEET
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Trang 35CSS CĂN BẢN - INTERNAL STYLE SHEET
Trang 36CSS CĂN BẢN
