Ngon Ngu Html
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
More details
- Words: 2,287
- Pages: 13
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT
THIẾT KẾ WEB PHẦN 1: NGÔN NGỮ I. GIỚI THIỆU NGÔN NGỮ HTML: HTML – Hyper Text Markup Language là ngôn ngữ đánh dấu siêu văn bản dùng để thiết kế trang Web. Ngôn ngữ này mô tả cách thức mà dữ liệu được hiển thị thông qua các tập ký hiệu đánh dấu gọi là tag – thẻ (html tag). Tài liệu HTML (01 trang Web) được lưu với phần mở rộng là .htm hoặc .html Để tạo một trang Web, ta có thể sử dụng bất kỳ chương trình soạn thảo văn bản nào như: Notepad, MS FrontPage, DreamWeaver, ...
II. CÁC THÀNH PHẦN TRONG TÀI LIỆU HTML: Tài liệu HTML luôn bắt đầu bằng và kết thúc bằng . 1. Cấu trúc một tài liệu HTML: VD:
2. Cú pháp chung của tag: Một tag thông thường gồm các phần tag mở, các thuộc tính, và tag đóng. Giáo viên: Thiên Đăng
Trang 1
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT
Chào các bạn !
Tên tag không phân biệt chữ HOA/thường, có thể viết trên cùng 1 dòng. Tag không có nội dung gọi là tag rỗng, thường loại này không có tag đóng Một tag có thể không có hoặc có nhiều thuộc tính VD: Tag rỗng:Tag không có thuộc tính:
III. CÁC TAG CƠ BẢN: 1. Tag định nghĩa cấu trúc tài liệu html: a. : xác định phần bắt đầu và kết thúc của tài liệu html b. : chứa các thông tin tổng quát về trang Web, và không thể hiện thông tin này trên Web. c. Lồng trong tag này có:
, , , , và kích thước từ lớn đến nhỏ. VD: Ví dụ về Heading Dòng h1
Dòng h2
Dòng h3
Dòng h4
Dòng h5
Dòng h6
Ngoài ra trong tag còn có thuộc tính Giáo viên: Thiên Đăng
Trang 2
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Align=”left/right/center” VD: NGÔN NGỮ HTML
3. Phân đoạn văn bản (Paragraph): VD: Nội dung lấy từ: http://vnexpress.net/GL/Vi-tinh/San-phammoi/2008/11/3BA0873F/
Tương tự như tag . Tag cũng có thuộc tính align VD:
Đoạn văn bản
4. Ngắt dòng (Line Break):
Ví dụ: Ví dụ ngắt dòng Ca dao nói về ân nghĩa
Ai ơi bưng bát cơm đầy
Dẻo thơm một hạt đắng cay muôn phần Ăn quả nhớ kẻ trồng cây
Ăn khoai nhớ kẻ cho dây mà trồng Giáo viên: Thiên Đăng
Trang 3
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT 5. Tạo đường kẻ ngang (Horizontal Rule):
Nếu không đặt align mặc nhiên đường kẻ này sẽ canh giữa. Ví dụ tạo đường kẻ ngang THPT NGO QUYEN
1360 Huỳnh Tấn Phát, Quận 7 6. Ghi chú trong tài liệu HTML: Ghi chú này không hiển thị trong cửa sổ trình duyệt.
IV. ĐỊNH DẠNG TRANG: Tag còn có rất nhiều thuộc tính khác như:
Bgcolor=”màu nền trang Web” Text=”màu chữ” Background=”URL tập tin làm ảnh nền” Style=”liệt kê các thuộc tính, ngăn nhau bằng ;”>
Một số ví dụ minh hoạ: Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Nền xám (gray), chữ xanh dương (blue)
Giáo viên: Thiên Đăng
Trang 4
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Chữ màu đỏ, dùng tập tin hoa.gif làm ảnh nền. Trong trường hợp này ảnh nền được lặp lại để lắp đầy màn hình.
Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
Để tránh chuyện ảnh nền được lặp lại, ta có thể dùng thuộc tính style với các thông số như: ảnh nền (background-image:url(tên file ảnh))
1360 Huỳnh Tấn Phát, Quận 7
vị trí đặt ảnh nền (background-position:left) lặp lại hay không (background-repeat:norepeat)
Ví dụ: Ảnh nền đứng yên TIÊN HỌC LỄ, HẬU HỌC VĂN
Phương châm giáo dục này xuất phát từ quan điểm đào tạo của Nho gia. Bản thân "lễ" là một phạm trù triết học chỉ đạo đức rất quan trọng của đức Khổng Tử và môn đệ. Hiểu tận cùng chữ "lễ" không phải dễ. ở đây tôi chỉ khai thác lễ trong phạm vi ngữ nghĩa có liên quan đến "vǎn" mà thôi. ...
Giáo viên: Thiên Đăng
Trang 5
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Giải thích: Trong ví dụ này có dùng thuộc tính style="background-attachment: fixed" sẽ làmảnh nền đứng yên khi ta cuộn thanh ScrollBar trong lúc xem (nội dung trang phải dài hơn chiều cao của màn hình).
V. ĐỊNH DẠNG VĂN BẢN: 1. Định dạng cơ bản: Cú pháp
Kết quả
Chữ in đậm
Chữ in nghiêng
Chữ gạch chân <sub>Chỉ số dưới <sup>Chỉ số trên ... <del> gạch bỏ <pre>
giữ nguyên các khoảng trống & xuống dòng trong code HTML khi hiển thị trên trình duyệt.
Nội dung ví dụ trên:
Bài tập: Hãy chèn thêm thẻ <pre> sau & trước . Sau đó bỏ hết các thẻ . Hãy nhận xét kết quả.
2. Kiểu chữ: Giáo viên: Thiên Đăng
Trang 6
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Ví dụ sau đây có 2 dòng: -
Dòng 1: Sử dụng font Tahoma, cỡ 3 và màu xanh lá
-
Dòng 2: Sử dụng font arial, cỡ 5 và màu đỏ.
Kết quả nhận được
VI. CHÈN HÌNH ẢNH:
src=”URL tập tin ảnh” alt=”văn bản thay thế khi URL tập tin ảnh không tồn tại” align=”left/right/center” width=”độ rộng ảnh” height=”độ cao ảnh”>
VD: Chèn hình ảnh SỐNG ĐẸP
Lòng nhân ái thật sự 
Một cơn bão vừa tàn phá thị trấn nhỏ gần thành phố của chúng tôi làm nhiều gia đình phải sống trong cảnh khốn khó.Tất cả các tờ báo địa phương đều đăng hình ảnh và những câu chuyện thương tâm về một số gia đình mất mát nhiều nhất. Có một Giáo viên: Thiên Đăng
Trang 7
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT bức ảnh làm tôi xúc động. Một phụ nữ trẻ đứng trước ngôi nhà đổ nát của mình, gương mặt hằn sâu nỗi đau đớn. Đứng cạnh bà là một...
Kết quả nhận được
VII. LIÊN KẾT – LINKS Ưu điểm nổi bật của HTML là có khả năng tạo ra các liên kết đến một trang Web nào đó, hoặc đến một nơi nào đó trên cùng trang (bookmark) đã được đánh dấu (anchor). 1. Liên kết đến 1 trang khác: Nội dung văn bản liên kết VD: Tạo trang liên kết đến diễn đàn trường Ngô Quyền:
LINK: Liên kết ra ngoài trang Click vào đây để đến trang Diễn Đàn HS Ngô Quyền Kết quả được như sau:
Giáo viên: Thiên Đăng
Trang 8
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Với ví dụ này thì trang Diễn đàn Ngô Quyền sẽ chiếm mất cửa sổ trình duyệt. Nếu muốn trang Web liên kết đến mở ra bằng cửa sổ mới ta khai báo thêm thuộc tính target với trị “_blank”. Cụ thể như sau: Diễn Đàn HS Ngô Quyền
2. Liên kết trong cùng trang: Dùng để đến nhanh một nơi nào đó trong trang đánh dấu trước đó. Đánh dấu: Phần đầu trang Liên kết: Về đầu trang Nên áp dụng cho các trang Web có nội dung dài hơn khung hiển thị của màn hình nhiều lần. 3. Liên kết đến địa chỉ Email: VD: Liên hệ Liên hệ Với kiểu liên kết này html sẽ kích hoạt phần mềm email mặc nhiên đang có trong máy (thường là Outlook Express)
VII. TABLE (BẢNG): Table giúp trình bày dữ liệu dạng bảng, hoặc chia cột (column) trong việc thể hiện nội dung của trang Web. 1. Cú pháp chung:
Nội dung ô
Nội dung ô
Nội dung ô
Nội dung ô
...
...
...
...
* Trong đó: ...
: Bắt đầu và kết thúc một table ... : Table Row dòng trong table.
... : trong mỗi dòng của table có nhiều ô gọi là table data. * Thuộc tính width: Nếu không đặt thuộc tính width độ lớn các cột sẽ lấy theo nội dung bên trong.
, , và kích thước từ lớn đến nhỏ. VD: Ví dụ về Heading Dòng h1
Dòng h2
Dòng h3
Dòng h4
Dòng h5
Dòng h6
Ngoài ra trong tag còn có thuộc tính Giáo viên: Thiên Đăng
Trang 2
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Align=”left/right/center” VD: NGÔN NGỮ HTML
3. Phân đoạn văn bản (Paragraph): VD: Nội dung lấy từ: http://vnexpress.net/GL/Vi-tinh/San-phammoi/2008/11/3BA0873F/
Tương tự như tag . Tag cũng có thuộc tính align VD:
Đoạn văn bản
4. Ngắt dòng (Line Break):
Ví dụ: Ví dụ ngắt dòng Ca dao nói về ân nghĩa
Ai ơi bưng bát cơm đầy
Dẻo thơm một hạt đắng cay muôn phần Ăn quả nhớ kẻ trồng cây
Ăn khoai nhớ kẻ cho dây mà trồng Giáo viên: Thiên Đăng
Trang 3
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT 5. Tạo đường kẻ ngang (Horizontal Rule):
Nếu không đặt align mặc nhiên đường kẻ này sẽ canh giữa. Ví dụ tạo đường kẻ ngang THPT NGO QUYEN
1360 Huỳnh Tấn Phát, Quận 7 6. Ghi chú trong tài liệu HTML: Ghi chú này không hiển thị trong cửa sổ trình duyệt.
IV. ĐỊNH DẠNG TRANG: Tag còn có rất nhiều thuộc tính khác như:
Bgcolor=”màu nền trang Web” Text=”màu chữ” Background=”URL tập tin làm ảnh nền” Style=”liệt kê các thuộc tính, ngăn nhau bằng ;”>
Một số ví dụ minh hoạ: Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Nền xám (gray), chữ xanh dương (blue)
Giáo viên: Thiên Đăng
Trang 4
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Chữ màu đỏ, dùng tập tin hoa.gif làm ảnh nền. Trong trường hợp này ảnh nền được lặp lại để lắp đầy màn hình.
Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
Để tránh chuyện ảnh nền được lặp lại, ta có thể dùng thuộc tính style với các thông số như: ảnh nền (background-image:url(tên file ảnh))
1360 Huỳnh Tấn Phát, Quận 7
vị trí đặt ảnh nền (background-position:left) lặp lại hay không (background-repeat:norepeat)
Ví dụ: Ảnh nền đứng yên TIÊN HỌC LỄ, HẬU HỌC VĂN
Phương châm giáo dục này xuất phát từ quan điểm đào tạo của Nho gia. Bản thân "lễ" là một phạm trù triết học chỉ đạo đức rất quan trọng của đức Khổng Tử và môn đệ. Hiểu tận cùng chữ "lễ" không phải dễ. ở đây tôi chỉ khai thác lễ trong phạm vi ngữ nghĩa có liên quan đến "vǎn" mà thôi. ...
Giáo viên: Thiên Đăng
Trang 5
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Giải thích: Trong ví dụ này có dùng thuộc tính style="background-attachment: fixed" sẽ làmảnh nền đứng yên khi ta cuộn thanh ScrollBar trong lúc xem (nội dung trang phải dài hơn chiều cao của màn hình).
V. ĐỊNH DẠNG VĂN BẢN: 1. Định dạng cơ bản: Cú pháp
Kết quả
Chữ in đậm
Chữ in nghiêng
Chữ gạch chân <sub>Chỉ số dưới <sup>Chỉ số trên ... <del> gạch bỏ <pre>
giữ nguyên các khoảng trống & xuống dòng trong code HTML khi hiển thị trên trình duyệt.
Nội dung ví dụ trên:
Bài tập: Hãy chèn thêm thẻ <pre> sau & trước . Sau đó bỏ hết các thẻ . Hãy nhận xét kết quả.
2. Kiểu chữ: Giáo viên: Thiên Đăng
Trang 6
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Ví dụ sau đây có 2 dòng: -
Dòng 1: Sử dụng font Tahoma, cỡ 3 và màu xanh lá
-
Dòng 2: Sử dụng font arial, cỡ 5 và màu đỏ.
Kết quả nhận được
VI. CHÈN HÌNH ẢNH:
src=”URL tập tin ảnh” alt=”văn bản thay thế khi URL tập tin ảnh không tồn tại” align=”left/right/center” width=”độ rộng ảnh” height=”độ cao ảnh”>
VD: Chèn hình ảnh SỐNG ĐẸP
Lòng nhân ái thật sự Một cơn bão vừa tàn phá thị trấn nhỏ gần thành phố của chúng tôi làm nhiều gia đình phải sống trong cảnh khốn khó.Tất cả các tờ báo địa phương đều đăng hình ảnh và những câu chuyện thương tâm về một số gia đình mất mát nhiều nhất. Có một Giáo viên: Thiên Đăng
Trang 7
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT bức ảnh làm tôi xúc động. Một phụ nữ trẻ đứng trước ngôi nhà đổ nát của mình, gương mặt hằn sâu nỗi đau đớn. Đứng cạnh bà là một...
Kết quả nhận được
VII. LIÊN KẾT – LINKS Ưu điểm nổi bật của HTML là có khả năng tạo ra các liên kết đến một trang Web nào đó, hoặc đến một nơi nào đó trên cùng trang (bookmark) đã được đánh dấu (anchor). 1. Liên kết đến 1 trang khác: Nội dung văn bản liên kết VD: Tạo trang liên kết đến diễn đàn trường Ngô Quyền:
LINK: Liên kết ra ngoài trang Click vào đây để đến trang Diễn Đàn HS Ngô Quyền Kết quả được như sau:
Giáo viên: Thiên Đăng
Trang 8
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Với ví dụ này thì trang Diễn đàn Ngô Quyền sẽ chiếm mất cửa sổ trình duyệt. Nếu muốn trang Web liên kết đến mở ra bằng cửa sổ mới ta khai báo thêm thuộc tính target với trị “_blank”. Cụ thể như sau: Diễn Đàn HS Ngô Quyền
2. Liên kết trong cùng trang: Dùng để đến nhanh một nơi nào đó trong trang đánh dấu trước đó. Đánh dấu: Phần đầu trang Liên kết: Về đầu trang Nên áp dụng cho các trang Web có nội dung dài hơn khung hiển thị của màn hình nhiều lần. 3. Liên kết đến địa chỉ Email: VD: Liên hệ Liên hệ Với kiểu liên kết này html sẽ kích hoạt phần mềm email mặc nhiên đang có trong máy (thường là Outlook Express)
VII. TABLE (BẢNG): Table giúp trình bày dữ liệu dạng bảng, hoặc chia cột (column) trong việc thể hiện nội dung của trang Web. 1. Cú pháp chung:
Nội dung ô
Nội dung ô
Nội dung ô
Nội dung ô
...
...
...
...
* Trong đó: ...
: Bắt đầu và kết thúc một table ... : Table Row dòng trong table.
... : trong mỗi dòng của table có nhiều ô gọi là table data. * Thuộc tính width: Nếu không đặt thuộc tính width độ lớn các cột sẽ lấy theo nội dung bên trong.
và kích thước từ lớn đến nhỏ. VD: Ví dụ về Heading Dòng h1
Dòng h2
Dòng h3
Dòng h4
Dòng h5
Dòng h6
Ngoài ra trong tag còn có thuộc tính Giáo viên: Thiên Đăng
Trang 2
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Align=”left/right/center” VD: NGÔN NGỮ HTML
3. Phân đoạn văn bản (Paragraph): VD: Nội dung lấy từ: http://vnexpress.net/GL/Vi-tinh/San-phammoi/2008/11/3BA0873F/
Tương tự như tag . Tag cũng có thuộc tính align VD:
Đoạn văn bản
4. Ngắt dòng (Line Break):
Ví dụ: Ví dụ ngắt dòng Ca dao nói về ân nghĩa
Ai ơi bưng bát cơm đầy
Dẻo thơm một hạt đắng cay muôn phần Ăn quả nhớ kẻ trồng cây
Ăn khoai nhớ kẻ cho dây mà trồng Giáo viên: Thiên Đăng
Trang 3
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT 5. Tạo đường kẻ ngang (Horizontal Rule):
Nếu không đặt align mặc nhiên đường kẻ này sẽ canh giữa. Ví dụ tạo đường kẻ ngang THPT NGO QUYEN
1360 Huỳnh Tấn Phát, Quận 7 6. Ghi chú trong tài liệu HTML: Ghi chú này không hiển thị trong cửa sổ trình duyệt.
IV. ĐỊNH DẠNG TRANG: Tag còn có rất nhiều thuộc tính khác như:
Bgcolor=”màu nền trang Web” Text=”màu chữ” Background=”URL tập tin làm ảnh nền” Style=”liệt kê các thuộc tính, ngăn nhau bằng ;”>
Một số ví dụ minh hoạ: Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Nền xám (gray), chữ xanh dương (blue)
Giáo viên: Thiên Đăng
Trang 4
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Chữ màu đỏ, dùng tập tin hoa.gif làm ảnh nền. Trong trường hợp này ảnh nền được lặp lại để lắp đầy màn hình.
Ví dụ: Định Dạng Trang Web THPT NGÔ QUYỀN
Để tránh chuyện ảnh nền được lặp lại, ta có thể dùng thuộc tính style với các thông số như: ảnh nền (background-image:url(tên file ảnh))
1360 Huỳnh Tấn Phát, Quận 7
vị trí đặt ảnh nền (background-position:left) lặp lại hay không (background-repeat:norepeat)
Ví dụ: Ảnh nền đứng yên TIÊN HỌC LỄ, HẬU HỌC VĂN
Phương châm giáo dục này xuất phát từ quan điểm đào tạo của Nho gia. Bản thân "lễ" là một phạm trù triết học chỉ đạo đức rất quan trọng của đức Khổng Tử và môn đệ. Hiểu tận cùng chữ "lễ" không phải dễ. ở đây tôi chỉ khai thác lễ trong phạm vi ngữ nghĩa có liên quan đến "vǎn" mà thôi. ...
Giáo viên: Thiên Đăng
Trang 5
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Giải thích: Trong ví dụ này có dùng thuộc tính style="background-attachment: fixed" sẽ làmảnh nền đứng yên khi ta cuộn thanh ScrollBar trong lúc xem (nội dung trang phải dài hơn chiều cao của màn hình).
V. ĐỊNH DẠNG VĂN BẢN: 1. Định dạng cơ bản: Cú pháp
Kết quả
Chữ in đậm
Chữ in nghiêng
Chữ gạch chân <sub>Chỉ số dưới <sup>Chỉ số trên ... <del> gạch bỏ <pre>
giữ nguyên các khoảng trống & xuống dòng trong code HTML khi hiển thị trên trình duyệt.
Nội dung ví dụ trên:
Bài tập: Hãy chèn thêm thẻ <pre> sau & trước . Sau đó bỏ hết các thẻ . Hãy nhận xét kết quả.
2. Kiểu chữ: Giáo viên: Thiên Đăng
Trang 6
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Ví dụ sau đây có 2 dòng: -
Dòng 1: Sử dụng font Tahoma, cỡ 3 và màu xanh lá
-
Dòng 2: Sử dụng font arial, cỡ 5 và màu đỏ.
Kết quả nhận được
VI. CHÈN HÌNH ẢNH:
src=”URL tập tin ảnh” alt=”văn bản thay thế khi URL tập tin ảnh không tồn tại” align=”left/right/center” width=”độ rộng ảnh” height=”độ cao ảnh”>
VD: Chèn hình ảnh SỐNG ĐẸP
Lòng nhân ái thật sự Một cơn bão vừa tàn phá thị trấn nhỏ gần thành phố của chúng tôi làm nhiều gia đình phải sống trong cảnh khốn khó.Tất cả các tờ báo địa phương đều đăng hình ảnh và những câu chuyện thương tâm về một số gia đình mất mát nhiều nhất. Có một Giáo viên: Thiên Đăng
Trang 7
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT bức ảnh làm tôi xúc động. Một phụ nữ trẻ đứng trước ngôi nhà đổ nát của mình, gương mặt hằn sâu nỗi đau đớn. Đứng cạnh bà là một...
Kết quả nhận được
VII. LIÊN KẾT – LINKS Ưu điểm nổi bật của HTML là có khả năng tạo ra các liên kết đến một trang Web nào đó, hoặc đến một nơi nào đó trên cùng trang (bookmark) đã được đánh dấu (anchor). 1. Liên kết đến 1 trang khác: Nội dung văn bản liên kết VD: Tạo trang liên kết đến diễn đàn trường Ngô Quyền:
LINK: Liên kết ra ngoài trang Click vào đây để đến trang Diễn Đàn HS Ngô Quyền Kết quả được như sau:
Giáo viên: Thiên Đăng
Trang 8
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Với ví dụ này thì trang Diễn đàn Ngô Quyền sẽ chiếm mất cửa sổ trình duyệt. Nếu muốn trang Web liên kết đến mở ra bằng cửa sổ mới ta khai báo thêm thuộc tính target với trị “_blank”. Cụ thể như sau: Diễn Đàn HS Ngô Quyền
2. Liên kết trong cùng trang: Dùng để đến nhanh một nơi nào đó trong trang đánh dấu trước đó. Đánh dấu: Phần đầu trang Liên kết: Về đầu trang Nên áp dụng cho các trang Web có nội dung dài hơn khung hiển thị của màn hình nhiều lần. 3. Liên kết đến địa chỉ Email: VD: Liên hệ Liên hệ Với kiểu liên kết này html sẽ kích hoạt phần mềm email mặc nhiên đang có trong máy (thường là Outlook Express)
VII. TABLE (BẢNG): Table giúp trình bày dữ liệu dạng bảng, hoặc chia cột (column) trong việc thể hiện nội dung của trang Web. 1. Cú pháp chung:
Nội dung ô
Nội dung ô
Nội dung ô
Nội dung ô
...
...
...
...
* Trong đó: ...
: Bắt đầu và kết thúc một table ... : Table Row dòng trong table.
... : trong mỗi dòng của table có nhiều ô gọi là table data. * Thuộc tính width: Nếu không đặt thuộc tính width độ lớn các cột sẽ lấy theo nội dung bên trong.
Dòng h1
Dòng h2
Dòng h3
Dòng h4
Dòng h5
Dòng h6
Ngoài ra trong tagTrang 2
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Align=”left/right/center” VD:
NGÔN NGỮ HTML
3. Phân đoạn văn bản (Paragraph): VD: Nội dung lấy từ: http://vnexpress.net/GL/Vi-tinh/San-phammoi/2008/11/3BA0873F/ cũng có thuộc tính align VD: Đoạn văn bản Ăn quả nhớ kẻ trồng cây . Hãy nhận xét kết quả.
Tương tự như tag
Ví dụ: Ca dao nói về ân nghĩa
Ai ơi bưng bát cơm đầy
Dẻo thơm một hạt đắng cay muôn phần
Ăn khoai nhớ kẻ cho dây mà trồng Giáo viên: Thiên Đăng
Trang 3
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT 5. Tạo đường kẻ ngang (Horizontal Rule):
Nếu không đặt align mặc nhiên đường kẻ này sẽ canh giữa. THPT NGO QUYEN
1360 Huỳnh Tấn Phát, Quận 7 6. Ghi chú trong tài liệu HTML: Ghi chú này không hiển thị trong cửa sổ trình duyệt.
IV. ĐỊNH DẠNG TRANG: Tag còn có rất nhiều thuộc tính khác như:
Bgcolor=”màu nền trang Web” Text=”màu chữ” Background=”URL tập tin làm ảnh nền” Style=”liệt kê các thuộc tính, ngăn nhau bằng ;”>
Một số ví dụ minh hoạ: THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Nền xám (gray), chữ xanh dương (blue)
Giáo viên: Thiên Đăng
Trang 4
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT THPT NGÔ QUYỀN
1360 Huỳnh Tấn Phát, Quận 7
Chữ màu đỏ, dùng tập tin hoa.gif làm ảnh nền. Trong trường hợp này ảnh nền được lặp lại để lắp đầy màn hình.
THPT NGÔ QUYỀN
Để tránh chuyện ảnh nền được lặp lại, ta có thể dùng thuộc tính style với các thông số như: ảnh nền (background-image:url(tên file ảnh))
1360 Huỳnh Tấn Phát, Quận 7
vị trí đặt ảnh nền (background-position:left) lặp lại hay không (background-repeat:norepeat)
TIÊN HỌC LỄ, HẬU HỌC VĂN
Phương châm giáo dục này xuất phát từ quan điểm đào tạo của Nho gia. Bản thân "lễ" là một phạm trù triết học chỉ đạo đức rất quan trọng của đức Khổng Tử và môn đệ. Hiểu tận cùng chữ "lễ" không phải dễ. ở đây tôi chỉ khai thác lễ trong phạm vi ngữ nghĩa có liên quan đến "vǎn" mà thôi. ...
Giáo viên: Thiên Đăng
Trang 5
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Giải thích: Trong ví dụ này có dùng thuộc tính style="background-attachment: fixed" sẽ làmảnh nền đứng yên khi ta cuộn thanh ScrollBar trong lúc xem (nội dung trang phải dài hơn chiều cao của màn hình).
V. ĐỊNH DẠNG VĂN BẢN: 1. Định dạng cơ bản: Cú pháp
Kết quả
Chữ in đậm
Chữ in nghiêng
Chữ gạch chân <sub>Chỉ số dưới <sup>Chỉ số trên ... <del> gạch bỏ <pre>
giữ nguyên các khoảng trống & xuống dòng trong code HTML khi hiển thị trên trình duyệt.
Nội dung ví dụ trên:
Bài tập: Hãy chèn thêm thẻ <pre> sau & trước . Sau đó bỏ hết các thẻ
2. Kiểu chữ: Giáo viên: Thiên Đăng
Trang 6
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Ví dụ sau đây có 2 dòng: -
Dòng 1: Sử dụng font Tahoma, cỡ 3 và màu xanh lá
-
Dòng 2: Sử dụng font arial, cỡ 5 và màu đỏ.
Kết quả nhận được
VI. CHÈN HÌNH ẢNH:
src=”URL tập tin ảnh” alt=”văn bản thay thế khi URL tập tin ảnh không tồn tại” align=”left/right/center” width=”độ rộng ảnh” height=”độ cao ảnh”>
VD: SỐNG ĐẸP
Lòng nhân ái thật sự Một cơn bão vừa tàn phá thị trấn nhỏ gần thành phố của chúng tôi làm nhiều gia đình phải sống trong cảnh khốn khó.Tất cả các tờ báo địa phương đều đăng hình ảnh và những câu chuyện thương tâm về một số gia đình mất mát nhiều nhất. Có một Giáo viên: Thiên Đăng
Trang 7
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT bức ảnh làm tôi xúc động. Một phụ nữ trẻ đứng trước ngôi nhà đổ nát của mình, gương mặt hằn sâu nỗi đau đớn. Đứng cạnh bà là một...
Kết quả nhận được
VII. LIÊN KẾT – LINKS Ưu điểm nổi bật của HTML là có khả năng tạo ra các liên kết đến một trang Web nào đó, hoặc đến một nơi nào đó trên cùng trang (bookmark) đã được đánh dấu (anchor). 1. Liên kết đến 1 trang khác: Nội dung văn bản liên kết VD: Tạo trang liên kết đến diễn đàn trường Ngô Quyền:
Giáo viên: Thiên Đăng
Trang 8
THPT NGÔ QUYỀN, Q.7
Diễn đàn HS: http://ngoquyen-edu.info
LẬP TRÌNH WEB CƠ BẢN BẰNG HTML & JAVASCRIPT Với ví dụ này thì trang Diễn đàn Ngô Quyền sẽ chiếm mất cửa sổ trình duyệt. Nếu muốn trang Web liên kết đến mở ra bằng cửa sổ mới ta khai báo thêm thuộc tính target với trị “_blank”. Cụ thể như sau: Diễn Đàn HS Ngô Quyền
2. Liên kết trong cùng trang: Dùng để đến nhanh một nơi nào đó trong trang đánh dấu trước đó. Đánh dấu: Phần đầu trang Liên kết: Về đầu trang Nên áp dụng cho các trang Web có nội dung dài hơn khung hiển thị của màn hình nhiều lần. 3. Liên kết đến địa chỉ Email: VD: Liên hệ Liên hệ Với kiểu liên kết này html sẽ kích hoạt phần mềm email mặc nhiên đang có trong máy (thường là Outlook Express)
VII. TABLE (BẢNG): Table giúp trình bày dữ liệu dạng bảng, hoặc chia cột (column) trong việc thể hiện nội dung của trang Web. 1. Cú pháp chung:
* Trong đó:
Nội dung ô
Nội dung ô
Nội dung ô
Nội dung ô
...
...
...
...
...
: Bắt đầu và kết thúc một table ... : Table Row dòng trong table. ... : trong mỗi dòng của table có nhiều ô gọi là table data. * Thuộc tính width: Nếu không đặt thuộc tính width độ lớn các cột sẽ lấy theo nội dung bên trong.
