Huong dan tao web tinh ppsx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.51 MB, 81 trang )
Lê Đình Thanh
Bộ môn Các Hệ thống Thông tin
Chuyên đề
LẬP TRÌNH ỨNG DỤNG WEB
Tạo trang web tĩnh
Bài 3
Nội dung
•
Kiến trúc & Hoạt động của Web tĩnh
•
HTML và CSS
•
JavaScript
•
Thực hành
Kiến trúc & Hoạt động của Web
tĩnh
*.htm, *.html
Các trang web tĩnh (tệp *.htm, *.html) được lưu sẵn trên server
và được gửi sang client mỗi khi được yêu cầu.
HTML: HyperText Markup Language
•
Ngôn ngữ đánh dấu siêu văn bản (HTML) là ngôn
ngữ lập trình Web cơ sở.
•
Dù web tĩnh hay động, nội dung cuối cùng Web
Server truyền cho Web Client là trang HTML. Web
Browser đọc nội dung HTML để hiển thị lên màn
hình.
•
Thành phần
–
Các thẻ định dạng hiển thị: Văn bản, hình ảnh, …
–
Các thẻ tạo đối tượng điều khiển: Input text, text area,
radio button, check box, list box, button, submit, hidden,
hyperlink.
Các thẻ HTML
•
Thẻ đôi: Một thẻ mở <tenThe> và một thẻ đóng </tenThe>.
Thẻ đóng giống thẻ mở trừ dấu /. Thẻ mở đi trước thẻ đóng.
Dữ liệu nằm giữa thẻ mở và thẻ đóng chịu tác động của thẻ.
•
Thẻ đơn: <tenThe>. Thẻ đơn có tác động ngay vị trí nó xuất
hiện.
•
Các thẻ (cả đơn và đôi): Có thể được định danh hoặc không.
Có thể có thuộc tính trong thẻ. Xác định giá trị thuộc tính
theo mẫu thuoctinh = giatri.
•
Ví dụ:
–
<font size="4" color="#009999" face="Arial, Helvetica, sans-serif">
</font>
–
<img src=“anhdep.jif" border="0" alt=“Kích chuột vào đây"
height="30" width="20“ id = “anh1”>
Cấu trúc trang HTML
<html>
<head>
<title>
Tiêu đề hiển thị trên thanh tiêu đề của trình duyệt
</title>
</head>
<body>
Nội dung hiển thị trên trình duyệt, gồm: chữ, hình ảnh, video, các đối
tượng điều khiển được định dạng hiển thị theo các cách khác nhau
nhờ sử dụng các thẻ)
</body>
</html>
Các thẻ định dạng văn bản
•
Tạo đầu mục (heading)
•
Làm đậm, nghiêng, gạch chân, gạch ngang
•
Thay đổi font chữ
•
Xuống dòng
•
Ngắt đoạn
•
Mũ trên, mũ dưới
•
Dấu cách
Tạo đầu mục: <hi> </hi>, i = 1, 2, …
Làm đậm: <b> </b>
Làm đậm: <strong> </strong>
Làm nghiêng: <i> </i>
Kết hợp nhiều thẻ: Thẻ lồng nhau
Gạch chân: <u> </u>
Gạch ngang: <s> </s>
Mũ trên <sup> </sup>
Mũ dưới: <sub> </sub>
Thay đổi font: <font> </font>
<font face = “Tên font” size = “Kích thước font” color = “Màu chữ”>
Văn bản chịu tác động <font>
Kích thước font: -7, …, 7
Màu chữ theo tên: red, green, blue, yellow, …
Màu chữ theo RGB: #rrggbb
Ngắt dòng: <br>
Tạo đoạn văn: <p> </p>
Tạo đường kẻ ngang: <hr>
Dấu cách:
Ví dụ trang văn bản
Hiển thị ảnh: <img src = …>
Hiển thị ảnh: Định kích thước
