Bài giảng - giáo án: Nhập môn lập trình web với php bài 2 HTML cơ bản

TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM NHẬP MƠN LẬP TRÌNH WEB VỚI PHP TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM Bài 2: HTML Giới thiệu ngôn ngữ HTML Các thành phần trang HTML Các tag Định dạng văn Hình ảnh - Image Danh sách - List Liên kết - Link Bảng - Table Bài 2: HTML Giới thiệu ngôn ngữ HTML  HTML (HyperText Markup Language) ngôn ngữ đánh dấu siêu văn  Sử dụng tập ký hiệu đánh dấu gọi tag để thiết kế trang web, tag gọi Element  Là chuẩn Internet tổ chức W3C (World Wide Web Consortium) trì Bài 2: HTML Các thành phần trang HTML  Cấu trúc trang HTML  Cú pháp chung tag  Ví dụ Bài 2: HTML Cấu trúc trang HTML Đầu trang Nội dung trang web Thân trang Bài 2: HTML Cấu trúc trang HTML  : xác định phần bắt đầu kết thúc trang HTML (HTML Document)  : chứa thông tin tổng quát trang web (meta-information)  : nội dung trang web, thể hình trình duyệt Bài 2: HTML Cú pháp chung tag Nội dung  Tag khơng có nội dung gọi tag rỗng (empty tag) có cú pháp sau: Bài 2: HTML Cú pháp chung tag  Các đặc điểm: – Tên tag không phân biệt chữ HOA/thường – Trình duyệt nhận khoảng trắng Nội dung bỏ qua dấu ngắt xuống dòng Bài 2: HTML Cú pháp chung tag Ví dụ: Công cha núi Thái sơn Nghĩa mẹ nước nguồn chảy Bài 2: HTML Các tag      Định nghĩa cấu trúc trang HTML Các tag tiêu đề – Headings Phân đoạn – Paragraphs Ngắt dòng – Line Break Tag – Horizontal rule 10 Bài 2: HTML Thay đổi ký hiệu đầu dịng danh sách  Thuộc tính type tag

, bảng giá trị sau: 32 Bài 2: HTML Bài 2: Ngôn ngữ HTML Ví dụ: Danh sách - Lists Thực đơn
• Buổi sáng
1. Bánh canh cua
2. Bún bị Huế
3. Hủ tíếu Nam vang
• Buổi trưa
1. Cá lóc kho
2. Thịt kho trứng
3. Mục xào sa tế
• Chiều tối
1. Mì gói
2. Bánh ướt
 Tạo danh sách lồng vào 33 Bài 2: HTML Liên kết – tag a  tag kết hợp với thuộc tính href Nội dung tag Ví dụ: Click vào để chuyển đến trang Tự học web 34 Bài 2: HTML Bảng - Table  Tạo Table  Trộn dòng, cột Table  Định dạng Table 35 Bài 2: HTML Tạo Table  Bộ tag , (table row) (table data) nội dung nội dung nội dung nội dung … … … … 36 Bài 2: HTML Tạo Table Ví dụ: Dòng 1, cột 1 Dòng 1, cột 2 Dòng 2, cột 1 Dòng 2, cột 2 37 Bài 2: HTML Tạo Table Ví dụ: Dòng 1, cột 1 Dòng 1, cột 2 Dòng 2, cột 1Dòng 2, cột 2 38 Bài 2: HTML Trộn dòng, cột Table     colspan: kết hợp nhiều cột thành cột rowspan: kết hợp nhiều dòng thành dòng width : độ rộng dòng, cột height : chiều cao dòng, cột 39 Bài 2: HTML Trộn dịng, cột Table Ví dụ: trộn cột Tên Phạm Ngọc Thiên Thanh … 40 Bài 2: HTML Trộn dịng, cột Table Ví dụ: trộn dòng Tên Điện thoại Phạm Ngọc Thiên Thanh 8351056 0909039999 41 Bài 2: HTML Định dạng Table  Tạo khoảng cách cell – cellpadding: khoảng cách từ biên cell tới nội dung cell – cellspacing: khoảng cách cell 42 Bài 2: HTML Định dạng Table  Tạo khoảng cách cell Dòng 1, cột Dòng 1, cột Dòng 1, cột … … … Cellpadding Cellspacing 43 Bài 2: HTML Định dạng Table  Tạo tiêu đề, canh lề tô màu cho table – Tag : tạo tiêu đề, phải đặt sau tag – align : canh lề cho table – bgcolor : tô màu – background : hình làm 44 Bài 2: HTML Định dạng Table  Tạo đường viền – border : độ rộng đường viền – bordercolor : màu đường viền Ví dụ: Thông tin cá nhân Tên Điện thoại Phạm Ngọc Thiên Thanh 8351056 0909039999 45 Bài 2: HTML 46 ... NHIÊN-TP.HCM Bài 2: HTML Giới thiệu ngôn ngữ HTML Các thành phần trang HTML Các tag Định dạng văn Hình ảnh - Image Danh sách - List Liên kết - Link Bảng - Table Bài 2: HTML Giới thiệu ngôn ngữ HTML. ..

31 Bài 2: HTML Thay đổi ký hiệu đầu dòng danh sách  Thuộc tính type tag

, bảng giá trị sau: 32 Bài 2: HTML Bài 2: Ngơn ngữ HTML Ví dụ: Danh sách - Lists Thực... trang web Thân trang < /html> Bài 2: HTML Cấu trúc trang HTML  < /html> : xác định phần bắt đầu kết thúc trang HTML (HTML Document)  : chứa thông tin tổng quát trang web