1. Trang chủ
  2. » Cao đẳng - Đại học

Lập trình Web với HTML và JavaScript

154 115 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Nội dung

TRƯỜNG ĐẠI HỌC ĐÀ LẠT KHOA CÔNG NGHỆ THÔNG TIN Thạc sỹ Hồng Mạnh Hùng BÀI GIẢNG TĨM TẮT LẬP TRÌNH WEB Dành cho sinh viên ngành Cao Đẳng (Lưu hành nội bộ) Đà Lạt 2008 CuuDuongThanCong.com https://fb.com/tailieudientucntt MỤC LỤC MỤC LỤC CHƯƠNG 1: GIỚI THIỆU HTML – CÁC SIÊU LIÊN KẾT 1.1 GIỚI THIỆU 1.2 GIỚI THIỆU INTERNET 1.3 GIỚI THIỆU HTML 1.3.1 HTML Development 1.3.2 Cấu trúc tài liệu HTML 1.3.3 Sử dụng thẻ 10 1.3.4 Sử dụng ký tự đặc biệt tài liệu HTML 10 1.4 SỬ DỤNG CÁC SIÊU LIÊN KẾT 12 1.4.1 Giới thiệu siêu liên kết URL 12 1.4.2 Sử dụng siêu liên kết 14 1.4.3 Điều hướng quanh Web site 19 CHƯƠNG 2: CÁC THẺ HTML CƠ BẢN 22 2.1 GIỚI THIỆU 22 2.2 HEADING (TIÊU ĐỀ) 22 2.3 THẺ KHỐI , 23 2.4 DANH SÁCH 24 2.6.1 Danh sách không thứ tự 25 2.6.2 Danh sách có thứ tự 28 2.5 THẺ KẺ ĐƯỜNG NGANG: 32 2.6 SỬ DỤNG FONT 33 2.7 SỬ DỤNG MÀU SẮC 34 2.8 SỬ DỤNG HÌNH ẢNH TRONG TÀI LIỆU HTML 35 CHƯƠNG 3: SỬ DỤNG BẢNG 40 3.1 GIỚI THIỆU 40 3.2 CÁCH TẠO BẢNG 40 3.2.1 Thẻ dùng để tạo bảng 40 3.2.2 Chèn hàng cột 43 3.2.3 Xoá hàng cột 44 3.2.4 Trộn ô: kết hợp cột hay dòng 45 3.2.5 Định dạng cho ô 48 3.4 CHÈN MULTIMEDIA VÀO TÀI LIỆU HTML 50 3.4.1 Chèn ảnh động (.GIF) vào tài liệu HTML 50 3.4.2 Chèn âm vào tài liệu HTML 51 3.4.3 Chèn video vào tài liệu HTML 53 CHƯƠNG 4: SỬ DỤNG BIỂU MẪU VÀ KHUNG 54 4.1 GIỚI THIỆU 54 4.2 GIỚI THIỆU BIỂU MẪU 54 4.2.1 Sử dụng biểu mẫu 54 4.2.2 Phần tử FORM 55 4.2.3 Các phần tử nhập HTML 56 4.2.4 Tạo biểu mẫu 66 4.3 KHUNG (FRAME) 69 CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web 4.3.1 Tại sử dụng khung? 70 4.3.2 Sử dụng khung 70 4.3.3 Phần tử IFRAME – Khung dòng (inline frame) 76 CHƯƠNG 5: SỬ DỤNG STYLE 78 5.1 GIỚI THIỆU 78 5.2 DHTML 78 5.2.1 Giới thiệu DHTML 78 5.2.2 Các đặc điểm DHML 79 5.3 STYLE SHEETS 80 5.3.1 Khái niệm, chức lợi ích Style Sheets 80 5.3.2 Quy tắc Style Sheets 83 5.3.3 Các Selector Style Sheets 85 5.3.4 Kết hợp, liên kết chèn Style Sheet vào tài liệu HTML 91 5.3.5 Thiết lập thuộc tính Style Sheet 93 CHƯƠNG 6: JAVASCRIPT, NỀN TẢNG VÀ CÚ PHÁP 95 6.1 GIỚI THIỆU 95 6.2 GIỚI THIỆU VỀ JAVASCRIPT 95 6.2.1 Javascript gì? 95 6.2.2 Hiệu ứng quy tắc Javascript 96 6.2.3 Các công cụ Javascript IDE, môi trường thực thi 97 6.2.4 Nhúng Javascript vào trang Web 97 6.2.5 Ví dụ đơn giản sử dụng hộp thơng báo phương thức write 103 6.3 CÁC BIẾN 104 6.3.1 Khai báo biến 104 6.3.2 Phạm vi biến 104 6.4 CÁC KIỂU DỮ LIỆU 105 Ý nghĩa 108 6.5 CÁC TOÁN TỬ 109 6.5.1 Toán tử số học 110 6.5.2 Toán tử so sánh 111 6.5.3 Toán tử logic 112 6.5.4 Toán tử chuỗi 113 6.5.4 Toán tử Evaluation 113 6.5.5 Mức ưu tiên toán tử 115 6.6 MẢNG 115 6.7 CÁC CÂU LỆNH ĐIỀU KIỆN 120 6.8 CÁC LỆNH VÒNG LẶP 121 6.9 HÀM (FUNCTION) 125 CHƯƠNG 7: CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASCRIPT 129 7.1 GIỚI THIỆU 129 7.2 CÁC ĐỐI TƯỢNG JAVASCRIPT 129 7.2.1 Câu lệnh This 130 7.2.2 Đối tượng String 132 7.2.3 Đối tượng Math 134 7.2.4 Đối tượng Date 137 CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web 7.3 ĐỐI TƯỢNG EVENT – KHÁI NIỆM 141 7.4 CÁC SỰ KIỆN JAVASCRIPT 141 7.5 TRÌNH XỬ LÝ SỰ KIỆN 150 TÀI LIỆU THAM KHẢO 153 CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web CHƯƠNG 1: GIỚI THIỆU HTML – CÁC SIÊU LIÊN KẾT Kết thúc chương này, bạn có thể: ¾ Mơ tả Internet ¾ Mơ tả HTML ¾ Viết tài liệu HTML đơn giản ¾ Sử dụng siêu liên kết tài liệu HTML ¾ Sử dụng thẻ ¾ Sử dụng ký tự đặc biệt tài liệu HTML 1.1 GIỚI THIỆU “Internet”,“World Wide Web”, “Web page” khơng thuật ngữ Giờ đây, thuật ngữ trở thành thực Internet mạng máy tính lớn giới, xem mạng mạng World Wide Web tập Internet World Wide Web gồm Web Servers có mặt khắp nơi giới Các Web server chứa thông tin mà người dùng giới truy cập Các thơng tin lưu trữ dạng trang Web Trong phần này, học Ngôn ngữ đánh dấu siêu văn (HTML), phần quan trọng lãnh vực thiết kế phát triển giới Web 1.2 GIỚI THIỆU INTERNET Mạng nhóm máy tính kết nối với Internet mạng mạng Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất máy tính giới Hình 1.1: Internet World Wide Web tập Internet Nó bắt đầu đề án nghiên cứu cấp quốc gia phòng nghiên cứu CERN Thụy Sĩ Ngày nay, cung cấp thơng tin cho người dùng toàn giới WWW hoạt động dựa chế để đưa tài nguyên có giá trị đến với người dùng Đó là: CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web Giao thức: Người dùng tuân theo giao thức để truy cập tài nguyên Web HyperText Transfer Protocol(HTTP) giao thức WWW sử dụng Địa chỉ: WWW tuân theo cách thức đặt tên thống để truy cập vào tài nguyên Web URL sử dụng để nhận dạng trang tài nguyên Web HTML: Ngôn ngữ đánh dấu siêu văn (HTML) sử dụng để tạo tài liệu truy cập Web Tài liệu HTML tạo cách sử dụng thẻ phần tử HTML File lưu Web server với đuôi htm html Khi bạn sử dụng trình duyệt để u cầu số thơng tin đó, Web server đáp ứng yêu cầu Nó gửi thơng tin u cầu đến trình duyệt dạng trang web Trình duyệt định dạng thông tin máy chủ gửi hiển thi chúng Hình 1.2: Trình duyệt yêu cầu đến máy chủ 1.3 GIỚI THIỆU HTML Ngôn ngữ đánh dấu siêu văn rõ trang Web hiển thị trình duyệt Sử dụng thẻ phần tử HTML, bạn có thể: Điều khiển hình thức nội dung trang Xuất tài liệu trực tuyến truy xuất thông tin trực tuyến cách sử dụng liên kết chèn vào tài liệu HTML Tạo biểu mẫu trực tuyến để thu thập thông tin người dùng, quản lý giao dịch Chèn đối tượng audio clip, video clip, thành phần ActiveX Java Applet vào tài liệu HTML Tài liệu HTML tạo thành mã nguồn trang Web Khi xem trình soạn thảo, tài liệu chuỗi thẻ phần tử, mà chúng xác định trang web hiển thị Trình duyệt đọc file có htm hay html hiển thị trang web theo lệnh có Ví dụ, theo cú pháp HTML hiển thị thông điệp “My first HTML document” Ví dụ 1: CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web Welcome to HTML My first HTML document Trình duyệt thơng dịch lệnh hiển thị trang web hình 1.3 Hình 1.3: Kết ví dụ 1.3.1 HTML Development Tài liệu HTML hiển thị trình duyệt Vậy trình duyệt ? Trình duyệt ứng dụng cài đặt máy khách Trình duyệt đọc mã nguồn HTML hiển thị trang theo lệnh Trình duyệt sử dụng để xem trang Web điều hướng.Trình duyệt biết đến sớm Mosaic, phát triển Trung tâm ứng dụng siêu máy tính quốc gia (NCSA) Ngày nay, có nhiều trình duyệt sử dụng Internet Netscape’s Navigator Microsoft’s Internet Explorer hai trình duyệt sử dụng phổ biến Đối với người dùng, trình duyệt dễ sử dụng có giao diện đồ họa với việc trỏ kích chuột Để tạo tài liệu nguồn,bạn phải cần trình soạn thảo HTML Ngày nay, có nhiều trình soạn thảo sử dụng: Microsoft FrontPage công cụ tổng hợp dùng để tạo, thiết kế hiệu chỉnh trang Web Chúng ta thêm văn bản, hình ảnh , bảng thành phần HTML khác vào trang Thêm vào đó, biểu mẫu tạo FrontPage Một tạo giao diện cho trang web, FrontPage tự động tạo mã HTML cần thiết Chúng ta dùng Notepad để tạo tài liệu HTML Để xem tài liệu trình duyệt bạn phải lưu với đuôi htm hay html Các lệnh HTML gọi thẻ Các thẻ dùng để điều khiển nội dung hình thức trình bày tài liệu HTML Thẻ mở (“”) thẻ đóng (“”), bắt đầu kết thúc lệnh HTML Ví dụ, thẻ HTML sử dụng để đánh dấu bắt đầu kết thúc tài liệu HTML CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web Chú ý thẻ không phân biệt chữ hoa chữ thường, bạn sử dụng thay cho Thẻ HTML bao gồm: Phần tử: nhận dạng thẻ Thuộc tính: Mơ tả thẻ Value: giá trị thiết lập cho thuộc tính Ví dụ, Trong ví dụ trên, BODY phần tử, BGCOLOR(nền) thuộc tính “lavender” giá trị Khi cú pháp HTML thực hiện, màu cho trang thiết lập màu “lavender” 1.3.2 Cấu trúc tài liệu HTML Một tài liệu HTML gồm phần bản: Phần HTML: Mọi tài liệu HTML phải bắt đầu thẻ mở HTML kết thúc thẻ đóng HTML … Thẻ HTML báo cho trình duyệt biết nội dung hai thẻ tài liệu HTML Phần tiêu đề: Phần tiêu đề bắt đầu thẻ kết thúc thẻ Phần chứa tiêu đề mà hiển thị điều hướng trang Web Tiêu đề nằm thẻ TITLE, bắt đầu thẻ kết thúc thẻ Tiêu đề phần quan trọng Các mốc dùng để đánh dấu web site Trình duyệt sử dụng tiêu đề để lưu trữ mốc Do đó, người dùng tìm kiếm thông tin, tiêu đề trang Web cung cấp từ khóa yếu cho việc tìm kiếm Phần thân: phần nằm sau phần tiêu đề Phầ̀n thân bao gồm văn bản, hình ảnh liên kết mà bạn muốn hiển thị trang web Phần thân bắt đầu thẻ kết thúc thẻ Ví dụ 2: Welcome to the world of HTML

This is going to be real fun

CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web Hình 1.4: Kết ví dụ Đoạn Bạn có ý đến thẻ

ví dụ khơng? Thẻ

để trình bày đoạn Khi viết báo hay luận, bạn nhóm nội dung thành loạt đoạn Mục đích nhóm ý tưởng logic lại với áp dụng số định dạng cho nội dung Trong tài liệu HTML, nội dung nhóm thành đoạn Thẻ đoạn

sử dụng để đánh dấu bắt đầu đoạn Ví dụ Welcome to HTML

This is going to be real fun

Another paragraph element Hình 1.5: Kết ví dụ Thẻ đóng

khơng bắt buộc Thẻ

tự động bắt đầu đoạn Các thẻ ngắt CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web Phần tử sử dụng để ngắt dòng tài liệu HTML Thẻ bổ sung ký tự xuống dòng vị trí thẻ Ví dụ 4: Welcome to HTML

This is going to be real fun

Another paragraph element Hình 1.6: Kết ví dụ Chọn canh lề Thuộc tính align sử dụng để canh lề cho phần tử HTML trang Web Chúng ta canh lề văn bản, đối tượng, hình ảnh, đoạn, phân đoạn, Sau đây, bạn học cách canh lề văn bản: Thuộc tính align gồm giá trị sau: Value Description Left Văn canh lề trái Center Văn canh Right Văn canh phải Justify Văn canh hai bên Canh lề mặc định dựa vào hướng văn Nếu hướng văn từ trái sang phải mặc định trái CuuDuongThanCong.com https://fb.com/tailieudientucntt ... trúc tài liệu HTML Một tài liệu HTML gồm phần bản: Phần HTML: Mọi tài liệu HTML phải bắt đầu thẻ mở HTML kết thúc thẻ đóng HTML < /HTML> … < /HTML> Thẻ HTML báo cho trình duyệt biết... tài liệu HTML CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Web < /HTML> Chú ý thẻ khơng phân biệt chữ hoa chữ thường, bạn sử dụng thay cho Thẻ HTML bao... first HTML document < /HTML> Trình duyệt thông dịch lệnh hiển thị trang web hình 1.3 Hình 1.3: Kết ví dụ 1.3.1 HTML Development Tài liệu HTML hiển thị trình duyệt Vậy trình duyệt ? Trình

Ngày đăng: 27/12/2019, 19:42

TỪ KHÓA LIÊN QUAN

w