Giáo trình Thiết kế web 2 (Ngành: Công nghệ thông tin - Trung cấp) - Trường Cao đẳng Xây dựng số 1

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:121

Thêm vào BST

Báo xấu

3
lượt xem 1
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình "Thiết kế web 2 (Ngành: Công nghệ thông tin - Trung cấp)" được biên soạn với mục tiêu nhằm giúp sinh viên nắm được các kiến thức về: Một số kiến thức cơ bản về thẻ, cú pháp thẻ, cách sử dụng các thẻ HTML và HTML 5; cú pháp, cấu trúc các phần tử, định dạng nền, màu chữ và hiệu ứng CSS; một số kiến thức cơ bản về hằng biến, toán tử, hàm trong JavaScript. Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Thiết kế web 2 (Ngành: Công nghệ thông tin - Trung cấp) - Trường Cao đẳng Xây dựng số 1

1 BỘ XÂY DỰNG TRƯỜNG CAO ĐẲNG XÂY DỰNG SỐ 1 GIÁO TRÌNH MÔN HỌC: THIẾT KẾ WEB 2 NGÀNH: CÔNG NGHỆ THÔNG TIN (ỨNG DỤNG PHẦN MỀM) TRÌNH ĐỘ: TRUNG CẤP Ban hành kèm theo Quyết định số: 597/QĐ-CĐXD1 ngày 29 tháng 12 năm 2023 của Hiệu trưởng Trường Cao đẳng Xây dựng số 1) Hà Nội, năm
2 TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm.
3 LỜI NÓI ĐẦU Giáo trình THIẾT KẾ WEB 2 được biên soạn nhằm phục vụ cho giảng dạy và học tập cho trình độ Trung cấp ngành Công nghệ Thông tin ứng dụng phần mềm ở trường Cao đẳng Xây dựng số 1. THIẾT KẾ WEB 2 là môn học chuyên ngành nhằm cung cấp các kiến thức về công nghệ thông tin, kỹ năng thiết kế, xây dựng một giao diện trang web cơ bản. Giáo trình THIẾT KẾ WEB 2 do bộ môn Tin cơ sở gồm: ThS.Đỗ Thị Xuân Thắm làm chủ biên. Giáo trình này được viết theo đề cương môn học thiết kế web 2, tuân thủ theo các quy tắc thống nhất. Ngoài ra giáo trình còn bổ sung thêm một số kiến thức mà trong các giáo trình trước chưa đề cập tới. Nội dung gồm 5 chương sau: Chương 1: Ngôn ngữ HTML Chương 2: Giới thiệu CSS Chương 3. Ngôn ngữ JavaScript Chương 4: Ngôn ngữ Jquery Chương 5: Bootstrap CSS Trong quá trình biên soạn, nhóm giảng viên Bộ môn Tin cơ sở của Trường Cao đẳng Xây dựng Số 1 - Bộ Xây dựng, đã được sự động viên quan tâm và góp ý của các đồng chí lãnh đạo, các đồng nghiệp trong và ngoài trường. Mặc dù có nhiều cố gắng, nhưng trong quá trình biên soạn, biên tập và in ấn khótránh khỏi những thiếu sót. Chúng tôi xin được lượng thứ và tiếp thu những ý kiến đóng góp. Trân trọng cảm ơn! Hà Nội, ngày……tháng……năm……… Tham gia biên soạn 1. ThS. Đỗ Thị Xuân Thắm - Chủ biên
4 MỤC LỤC Chương 1: NGÔN NGỮ HTML.............................................................................12 1.1. Giới thiệu HTML5 .......................................................................................12 1.2. Multimedia ...................................................................................................12 1.2.1. Hình ảnh ................................................................................................ 12 1.2.2. Audio .....................................................................................................13 1.2.3. Video .....................................................................................................15 1.3. Danh sách và bảng .......................................................................................15 1.3.1. Danh sách .............................................................................................. 15 1.3.2. Bảng .......................................................................................................17 1.4. Form và control ............................................................................................ 19 1.4.1. Form ......................................................................................................19 BÀI TẬP THỰC HÀNH CHƯƠNG 1 ............................................................... 20 Chương 2. giới thiệu CSS .......................................................................................37 2.1. Các loại CSS ................................................................................................ 37 2.2. Định dạng trang web với CSS ......................................................................37 2.3. Định dạng màu và nền .................................................................................38 2.4 Định dạng chữ ............................................................................................... 40 2.5 Định dạng Box Model ...................................................................................41 2.5.1 Định dạng viền (border) .........................................................................41 2.5.2 Định dạng lề Margin...............................................................................45 2.5.3 Định dạng lề padding .............................................................................45 2.6. Bố cục...........................................................................................................48 2.6.1. CSS Display ..........................................................................................48 2.6.2. CSS Position ..........................................................................................54 2.6.3. CSS Overflow........................................................................................59 2.7. CSS Form .....................................................................................................60 2.8. CSS Hiệu ứng (Transform, Animation, hover, Transitions) ........................61 Css: ......................................................................................................................64 Bài tập thực hành chương 2 ................................................................................66 Học sinh 2k6 nên có định hướng nghề nghiệp từ lớp 10 ........................................68 Hướng nghiệp sớm để có kế hoạch học phù hợp ............................................68 Font Awesome......................................................................................................69 Chương 3. Ngôn ngữ JavaScript .............................................................................75
5 3.1. Giới thiệu JavaScript (JS) ............................................................................75 3.1.1 Giới thiệu....................................................................................................75 3.1.2 Nhúng Js vào trang Web ........................................................................75 3.2. Ngôn ngữ JavaScript ....................................................................................76 3.2.1. Biến........................................................................................................76 3.2.2. Toán tử...................................................................................................76 3.2.3. Hàm .......................................................................................................76 3.2.4. Cấu trúc điều khiển................................................................................76 3.3. Các đối tượng trong JavaScript ....................................................................77 3.3.1. Kiểu dữ liệu đối tượng...........................................................................77 3.3.2. Các đối tượng cơ bản.............................................................................77 3.3.3. Đối tượng Document (dom) ..................................................................77 3.4. Xử lý sự kiện ................................................................................................ 84 Bài tập thực hành chương 3 ................................................................................84 Chương 4: Ngôn ngữ JQuery ..................................................................................94 4.1. Giới thiệu Jquery ..........................................................................................94 4.1.2. Tải và sử dụng .......................................................................................94 4.1.3. Chọn phần tử trong Jquery ....................................................................95 4.2. Xử lý sự kiện ................................................................................................ 96 4.2.1. Sự kiện trên cửa sổ trình duyệt và tài liệu .............................................96 4.2.3. Sự kiện trên chuột..................................................................................98 4.3. Jquery Effects ............................................................................................... 99 4.4. Thao tác với DOM .....................................................................................100 4.5. Di chuyển trong DOM ...............................................................................101 Thực hành chương 4: ........................................................................................103 Chương 5: Bootstrap CSS .....................................................................................111 5.1. Giới thiệu Bootstrap CSS ...........................................................................111 5.2. Sử dụng Bootstrap CSS ..............................................................................111 5.3. Các thành phần của bootstrap CSS ............................................................112 Thực hành chương 5 .........................................................................................112
6 CHƯƠNG TRÌNH MÔN HỌC (Kèm theo Quyết định số 308/QĐ-CĐXD1 ngày 25/7/2023 của Hiệu trưởng Trường Cao đẳng Xây dựng số 1) Tên môn học: THIẾT KẾ WEB 2 Mã môn học: MH23 Thời gian thực hiện môn học: 60 giờ; (Lý thuyết: 15 giờ; Thực hành, thí nghiệm, thảo luận, bài tập: 27 giờ; Kiểm tra 03 giờ) (Trong đó: Tổng số giờ giảng dạy và học tập trực tuyến: 15 giờ) I. Vị trí, tính chất của môn học: - Vị trí: + Môn học được bố trí ở kỳ học thứ 04; + Môn học tiên quyết: MH16-Thiết kế Web 1. - Tính chất: Là môn học bắt buộc thuộc nhóm các môn học, môn học chuyên môn ngành, nghề trong chương trình Công nghệ thông tin (Ứng dụng phần mềm) trình độ trung cấp. Môn học hình thành kỹ năng thiết kế trang web làm cơ sở cho các môn học chuyên ngành tiếp theo và sử dụng rộng rãi trong nghề Công nghệ thông tin. II. Mục tiêu môn học: 1. Về kiến thức: - Trình bày được một số kiến thức cơ bản về thẻ, cú pháp thẻ, cách sử dụng các thẻ HTML và HTML 5; - Trình bày được cú pháp, cấu trúc các phần tử, định dạng nền, màu chữ và hiệu ứng CSS; - Trình bày được một số kiến thức cơ bản về hằng biến, toán tử, hàm trong JavaScript. 2. Về kỹ năng: - Thiết lập được các thẻ HTML dựng khung trang Web; - Thiết lập được các thuộc tính trong CSS để định dạng trang Web; - Thiết lập được các hành động trong các thẻ, trên giao diện form; - Thiết lập được các chế độ hiển thị web trên các thiết bị khác nhau. 3. Về năng lực tự chủ và trách nhiệm: Rèn luyện lòng yêu nghề, tư thế tác phong công nghiệp, tính kiên trì, sáng tạo trong công việc. III. Nội dung môn học: 1. Nội dung tổng quát và phân bố thời gian:
7 Thời gian (giờ) Thực hành, thí nghiệm, Lý thuyết TT Tên chương, mục Tổng thảo luận, Kiểm số bài tập tra Trực Trực Trực Trực tiếp tuyến tiếp tuyến 1 Chương 1: Ngôn ngữ HTML 4 2 2 1.1 Giới thiệu HTML 5 2 1 1 1.2 Multimedia 1.3 Danh sách và bảng 2 1 1 1.4 Form và control 2 Chương 2: Giới thiệu CSS 22 5 8 8 1 2.1 Giới thiệu CSS3 2 1 1 2.2 Định dạng trang web với CSS 2.3 Định dạng màu và nền 3 1 2 2.4 Định dạng chữ 2.5 Định dạng Box Model 3 1 2 2.6 Bố cục 2.7 CSS Form 7 1 4 2 CSS Hiệu ứng (Transform, 2.8 6 1 4 1 Animation, hover, Transitions) Bài kiểm tra số 1 1 1 3 Chương 3. Ngôn ngữ JavaScript 10 3 6 1 3.1 Giới thiệu JavaScript (JS) 2 1 1 3.2 Ngôn ngữ JavaScript 1 1 3.3 Các đối tượng trong JavaScript 3 1 2 3.4 Xử lý sự kiện 3 1 2 Bài kiểm tra số 2 1 1 4 Chương 4: Ngôn ngữ Jquery 12 2 4 5 1 4.1 Giới thiệu Jquery 3 1 1 1 4.2 Xử lý sự kiện 4.3 Jquery Effects 1 1 4.4 Thao tác với DOM 4 2 2 4.5 Di chuyển trong DOM 3 1 2 Bài kiểm tra số 3 1 1 5 Chương 5: Bootstrap CSS 12 3 3 6 5.1 5.1. Giới thiệu Bootstrap CSS 1 1 5.2 5.2. Sử dụng Bootstrap CSS 5 1 1 3 5.3. Các thành phần của bootstrap 5.3 6 1 2 3 CSS Cộng 60 15 15 27 3 2. Nội dung chi tiết: Chương 1: Ngôn ngữ HTML Thời gian: 4 giờ * Mục tiêu:
8 - Trình bày được cú pháp, cách dùng các thẻ HTML 5 và các thẻ danh sách, các kiểu dữ liệu trong form, control; - Thiết lập được các form đăng nhập, đăng xuất, hình ảnh, audio, video. * Nội dung chương: 1.1. Giới thiệu HTML5 1.2. Multimedia 1.2.1. Hình ảnh 1.2.2. Audio 1.2.3. Video 1.3. Danh sách và bảng 1.3.1. Danh sách 1.3.2. Bảng 1.4. Form và control 1.4.1. Form 1.4.2. Các control Chương 2: Giới thiệu CSS Thời gian: 18 giờ * Mục tiêu: - Trình bày được các dạng định dạng thẻ trong css, dạng viền trong viền ngoài, chế độ hiển thị, các dạng định dạng form; - Định dạng được các thẻ chữ, đoạn văn, lề, bố cục trang, chế độ hiển thị trang và các hiệu ứng hành động trên thẻ. * Nội dung chương: 2.1. Các loại CSS 2.2. Định dạng trang web với CSS 2.3. Định dạng màu và nền 2.4. Định dạng chữ 2.5. Định dạng Box Model 2.5.1. Định dạng viền (border) 2.5.2. Định dạng lề (Margin) 2.5.3. Định dạng lề padding 2.6. Bố cục 2.6.1. CSS Display 2.6.2. CSS Position 2.6.3. CSS Overflow 2.7. CSS Form
9 2.8. CSS Hiệu ứng (Transform, Animation, hover, Transitions) Bài kiểm tra số 1 Chương 3. Ngôn ngữ JavaScript Thời gian: 14 giờ * Mục tiêu: - Trình bày được biến, hằng, hàm và kiểu dữ liệu đối tượng trong JavaScript; - Thiết lập được các sự kiện, sử dụng hàm và các đối tượng trong JavaScript. * Nội dung chương: 3.1. Giới thiệu JavaScript (JS) 3.1.1. Giới thiệu 3.1.2. Nhưng Js vào trang Web 3.2. Ngôn ngữ JavaScript 3.2.1. Biến 3.2.2. Toán tử 3.2.3. Hàm 3.2.4. Cấu trúc điều khiển 3.3. Các đối tượng trong JavaScript 3.3.1. Kiểu dữ liệu đối tượng 3.3.2. Các đối tượng cơ bản 3.3.3. Đối tượng Document (dom) 3.4. Xử lý sự kiện Bài kiểm tra số 2 Chương 4: Ngôn ngữ JQuery Thời gian: 12 giờ * Mục tiêu: - Trình bày được cách tải và sử dụng thư viện có sẵn trong Jquery; - Thao tác sử lỹ các sự kiện với chuột và bàn phím ở trang Web. * Nội dung chương: 4.1. Giới thiệu Jquery 4.1.1. Giới thiệu thư viện Jquery 4.1.2. Tải và sử dụng 4.1.3. Chọn phần tử trong JQuery 4.2. Xử lý sự kiện 4.2.1. Sự kiện trên cửa sổ trình duyệt và tài liệu 4.2.2. Sự kiện trên form 4.2.3. Sự kiện trên chuột
10 4.2.4. Sự kiện trên bàn phím 4.3. Jquery Effects 4.4. Thao tác với DOM 4.5. Di chuyển trong DOM Bài kiểm tra số 3 Chương 5: Bootstrap CSS Thời gian: 12 giờ * Mục tiêu: Trình bày và thao tác định dạng giao diện trang web trên các thiết bị khác nhau: máy tính, điện thoại, ipad. * Nội dung chương: 5.1. Giới thiệu Bootstrap CSS 5.2. Sử dụng Bootstrap CSS 5.3. Các thành phần của bootstrap CSS IV. Điều kiện thực hiện môn học: 1. Phòng học chuyên môn hóa/nhà xưởng: Phòng học lý thuyết, phòng máy tính. 2. Trang thiết bị máy móc: Máy tính cho nhà giáo, máy chiếu, bảng, màn chiếu, các thiết bị trợ giảng khác. 3. Học liệu, dụng cụ, nguyên vật liệu: Giáo trình, giáo án, tài liệu tham khảo; câu hỏi, bài tập. V. Nội dung và phương pháp, đánh giá: 1. Nội dung: 1.1. Kiến thức: - Trình bày được cách sử dụng ngôn ngữ HTML để tạo một trang web; - Trình bày được cách sử dụng ngôn ngữ CSS để tạo bố cục và định dạng trang web; - Trình bày được cách sử dụng ngôn ngữ JavaScript và mô hình đối tượng dữ liệu để tạo các trang web có tính tương tác bên phía web browser và kiểm tra tính hợp lệ của dữ liệu do người dụng nhập vào. - Trình bày được cách kết hợp các ngôn ngữ HTML, JavaScript, CSS, mô hình DOM, chuyển đổi mô hình web. 1.2. Kỹ năng: - Xây dựng được khung giao diện trang Web; - Định dạng trang Web bằng CSS và sử dụng JavaScript để tạo menu động cho trang web, form lưu trữ dữ liệu. 1.3. Năng lực tự chủ và trách nhiệm: - Sử dụng hiệu quả nguồn học liệu trên Internet;
11 - Tự giác, sáng tạo; - Có khả năng làm việc theo nhóm. 2. Phương pháp: - Kiểm tra thường xuyên: Là điểm trung bình chung các bài kiểm tra trên phần mềm quản lý học tập LMS và kết quả các bài thảo luận, bài tập nhóm. + Số lượng đầu điểm: 01 + Hệ số: 01 - Kiểm tra định kỳ: + Số lượng đầu điểm: 03 + Hệ số: 02 - Thi kết thúc môn học: + Hình thức thi: Thực hành. + Điều kiện dự thi kết thúc môn học: Tham dự ≥ 80% thời gian của môn học và điểm trung bình chung các điểm kiểm tra ≥ 5,0 theo thang điểm 10. VI. Hướng dẫn thực hiện môn học: 1. Phạm vi áp dụng: môn học Ngành Công nghệ thông tin (Ứng dụng phần mềm) trình độ trung cấp. 2. Hướng dẫn về phương pháp giảng dạy, học tập môn học 2.1. Đối với nhà giáo: Chuẩn bị tốt các tài liệu minh họa và áp dụng linh hoạt các phương pháp giảng dạy để phát huy tính chủ động, tích cực cho người học như: + Thuyết trình, giảng giải, phát vấn; + Nêu vấn đề, giao bài tập nhóm, bài tập thực hành; + Tổ chức thảo luận nhóm cho lớp để người học tự rút ra kết luận. 2.2. Đối với người học: Chú ý lắng nghe bài giảng, rèn luyện kỹ năng xử lý, chủ động nghiên cứu các tài liệu, chủ động tìm hiểu thực tế. 3. Những trọng tâm cần chú ý: 4. Tài liệu tham khảo: [1] Thạc Bình Cường, Vũ Thị Hậu. Giáo trình thiết kế web. Nhà xuất bản giáo dục, 2007. [2] Đặng Ngọc Bình, Thiết kế Web siêu tốc, APPNET - Trung tâm Đào tạo Digital Marketing - Đại học Bách Khoa TPHCM, năm 2015. [3] Patrick Carey, Create web pages with html and dymamic HTML. [4] Steven Suehring, Janet Valade. PHP, MySQL, JavaScript & HTML5 All-in- one for dummies. Wiley Pulishing, 2013. 5. Ghi chú và giải thích (nếu có):
12 CHƯƠNG 1: NGÔN NGỮ HTML Mục tiêu: - Trình bày được cú pháp, cách dùng các thẻ HTML 5 và các thẻ danh sách, các kiểu dữ liệu trong form, control; - Thiết lập được các form đăng nhập, đăng xuất, hình ảnh, audio, video. 1.1. Giới thiệu HTML5 HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web. Đây là phiên bản thứ 5 của ngôn ngữ HTML. HTML5 cùng với các ứng dụng cần những hiệu ứng đồ họa và chuyển động đặc biệt, lập trình viên có thể sử dụng Canvas với kiểu bitmap hoặc SVG với kiểu vector. Không chỉ áp dụng cho việc thiết kế các trang web trực quan, HTML5 còn được áp dụng để tạo ra các thư viện đồ họa giúp tạo ra các ứng dụng đồ thị, game trong cả môi trường 2D và 3D như những ứng dụng trên desktop.  Các thẻ và giúp bạn tách các phần trên và dưới của các block nội dung. Để có thể sử dụng nhiều lần trên một trang duy nhất.  Thẻ giúp xác định một phần cụ thể về nội dung, ví dụ, một bài blog hoặc một bình luận của độc giả.  Thẻ để xác định những phần nào được coi là khối điều hướng.  Thẻ cho phép bạn xác định một phần nội dung nào đó; tương tự như các thẻ hiện nay.  Các thẻ và để đánh dấu những nội dung bao gồm âm thanh hoặc video.  Thẻ cho phép bạn vẽ đồ họa sử dụng một ngôn ngữ kịch bản riêng biệt. SVG, canvas và những hình dạng vector đều được hỗ trợ bởi HTML5.  Thẻ dùng để nhúng các nội dung hoặc các ứng dụng bên ngoài vào trang web.  Có nhiều element được giới thiệu trong HTML. Một vài trong số chúng là quan trọng nhất: summary, time, aside, audio, command, data, datalist, details, embed, wbr, span, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video. 1.2. Multimedia 1.2.1. Hình ảnh Thẻ img là thẻ đặc biệt không có thẻ đóng, đóng thẻ trên chính nó. Cú pháp: Thuộc tính: - src: đường dẫn của một ảnh. - width: Quy định độ rộng của ảnh. - height: Quy định chiều cao của ảnh. - border: đường viền bao quanh ảnh, border = 0 ảnh không có viền
13 - align: Vị trí của ảnh, trái phải, trên dưới - alt: mô tả thông tin chi tiết cho một ảnh trên trang web. Đây là thuộc tính quan trong trong Seo mô tả chi tiết trong ảnh. Thuộc tính này không thể hiện ra bên ngoài. Đối với thẻ ảnh mà đường dẫn ảnh sai thì nó sẽ hiển thị alt lên cho người dùng biết đó là ảnh gì. Chú ý: Thông thường chỉ xét đến thuộc tính là chiều rộng hoặc chiều cao của ảnh, Xét một cái nó sẽ tự động điều chỉnh làm cho ảnh khôn bị vỡ. Nếu đặt cả hai thuộc tính thì chú ý chiều rộng và cao để cho ảnh cân đối. Trừ khi độ rộng và chiều cao đúng. Ví dụ: Ví dụ: chèn ảnh có viền quanh ảnh bằng 3 pixcel, mô tả “Hình ảnh trong HTML” - Ảnh chèn có độ rộng 150, chiều cao 100 - Ảnh có viền 4, ảnh nằm bên phải 1.2.2. Audio Thẻ mà được sử dụng để nhúng nội dung âm thanh trong một tài liệu HTML Your browser does not support the element. Ví dụ: Your browser does not support the element. Thẻ HTML5 audio có thể có một số thuộc tính để điều khiển sự nhìn và cảm nhận và các tính năng đa dạng khác của điều khiển:
14 Thuộc Miêu tả tính autoplay Thuộc tính logic này nếu được xác định trước, audio sẽ tự động bắt đầu playback ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu. autobuffer Thuộc tính logic này nếu được định cấu hình, audio sẽ tự động bắt đầu đệm ngay cả khi nó không được thiết lập để tự động chơi. controls Nếu thuộc tính này có mặt, nó sẽ cho phép người sử dụng để điều khiển audio phát lại sau, bao gồm âm lượng, chơi lại từ đầu và dừng/khôi phục lại sự phát lại. loop Thuộc tính logic này nếu được xác định, sẽ cho phép audio tự động chơi lại từ đầu sau khi kết thúc. preload Thuộc tính này xác định audio sẽ được tải tại trang tải, và sẵn sàng chạy. Bị bỏ qua nếu autoplay có mặt. src URL của audio được nhúng. Nó là tùy ý; bạn có thể thay thế cho sử dụng phần tử trong khối video để xác định video để nhúng. Ví dụ: function PlayVideo(){ var v = document.getElementsByTagName("video")[0]; v.play(); } Your browser does not support the element.
15 1.2.3. Video Thẻ video Nội dung video Một số thuộc tính điều khiển Thuộc tính Miêu tả autoplay Thuộc tính logic này nếu được xác định trước, video sẽ tự động bắt đầu chơi lại (playback) ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu. autobuffer Thuộc tính logic này nếu được định cấu hình, video sẽ tự động bắt đầu đệm ngay cả khi nó không được thiết lập để tự động chơi. controls Nếu thuộc tính này có mặt, nó sẽ cho phép người sử dụng để điều khiển video phát lại sau, bao gồm âm lượng, chơi lại từ đầu và dừng/khôi phục lại sự phát lại. height Thuộc tính này xác định chiều cao khu vực hiển thị của video, bằng đơn vị CSS pixel. loop Thuộc tính logic này nếu được xác định, sẽ cho phép video tự động playback từ đầu sau khi kết thúc. preload Thuộc tính này xác định video sẽ được tải tại trang tải, và sẵn sàng chạy. Bị bỏ qua nếu autoplay có mặt. poster Đây là một URL của một hình ảnh để hiển thị cho tới khi người sử dụng chơi hoặc chơi lại từ đầu. src URL của video được nhúng. Nó là tùy ý; bạn có thể thay thế cho sử dụng phần tử trong khối video để xác định video để nhúng. width Thuộc tính này xác định độ rộng khu vực hiển thị của video, bằng đơn vị CSS pixel. 1.3. Danh sách và bảng 1.3.1. Danh sách Thẻ danh sách tuần tự (ol) Nội dung 1 Nội dung 2 …
16 Ví dụ: Code html Hiển thị HTML HTML CSS CSS Javascript Javascript C# C# Thiết lập chỉ số thuộc tính type và start Thuộc tính type của gán bằng 1, a, A, i để thiết lập một số kiểu đánh số: a : dùng chữ thường để đánh chỉ số (a, b, c ...) A : dùng chữ in để đánh chỉ số (A, B, C ...) i : hoặc I đánh theo số la mã (i, ii, iii ...) 1 : kiểu mặc định (dùng số 1,2,3,...) Ví dụ: Code html Hiển thị HTML HTML CSS CSS Javascript Javascript Lập trình C# Lập trình C# Lập trình PHP Lập trình PHP Thẻ danh sách bất tuần tự (ul) Cú pháp: Nội dung 1 Nội dung 2 … Ví dụ: Code html Hiển thị HTML HTML CSS
17 CSS Javascript Javascript C# C# 1.3.2. Bảng Thẻ table là thẻ dùng để tạo bảng trong html. Trước đây khi chưa có css thì table là thẻ quan trong để dựng layout trong trang web. Ngày nay không sử dụng bảng để dựng bố cục cho trang web do dùng rất nặng. Cấu trúc của bảng gồn có dòng (row), cột (column) và các tiêu đều heading. Giao của dòng và cột là các ô (cell). Số cột của các dòng luôn bằng nhau, nếu không sẽ bị vỡ. Cú pháp Nội dung Nội dung Nội dung Nội dung Trong đó: Table: bảng , tr là dòng, td là cột Thuộc tính dùng chung cho table, tr (dòng), td(cột) - width: quy định độ rộng của bảng. (ít khi dùng cả độ rộng và chiều cao chỉ dùng một trong hai độ rộng hoặc chiều cao). - height: chiều cao của bảng. - border: Mặc định bảng có border, nếu để border = 0 là không có đường viền . Thực chất là đường viền của td. - bgcolor: định nghĩa màu nền cho bảng, dòng, hoặc cột. - cellspacing: quy định khoảng viền bảng đến nội dung bên ngoài. - cellpadding: Quy định khoảng cách viền bảng đến nội dung bên trong. - align: left| center|right. Canh lề cho bảng so với trình duyệt: center (giữa), left (trái), right (phải). Mặc định là nằm bên trái. Thuộc tính thẻ td: - valign: Top|bottom| middle. Canh nội dung trong ô theo chiều dọc. Giá trị thuộc tính này gồm: top, middle, bottom. Gộp dòng và gộp cột trong table: - Gộp dòng: rowspan = “number”. - Gộp cột: colspan = “number”
18 Khi muốn trộn cột ta phải dùng thuộc tính colspan. Xác định đặt thuộc tính colspan vào dòng nào và đi từ trái sang nếu gặp cột đầu tiên từ trái sang cột ta cần gộp thì ta gộp ở cột đó. Và xóa đi cột ngay sau cột đặt colspan. Ví dụ: Code html Hiển thị Họ và tên Năm sinh Giới tính Quê quán Nguyễn Thành A 1993 Nam Cần Thơ Trần Văn B 1985 Nam Vĩnh Long Lê Thị C 1990 Nữ Sóc Trăng
19 1.4. Form và control 1.4.1. Form Vai trò của thẻ form với một trang web dùng để làm gì? Tại sao phải sử dụng form? Bất kỳ một hệ thống nào thì form là cổng giao tiếp duy nhất giữa người dùng và hệ thống. Ví dụ muốn gửi ý kiến thì phải có form gửi đi hoặc vào facebook muốn đăng ký cần phải có form để xác thực thông tin. Biểu mẫu (html form) được sử dụng khi ta muốn thu thập dữ liệu từ người dùng. Chẳng hạn khi đăng ký tài khoản, người dùng có thể nhập các thông tin tài khoản vào biểu mẫu như: họ tên, số điện thoại, email, địa chỉ, … Biểu mẫu sẽ cho phép nhận thông tin đầu vào từ người dùng và sau đó sẽ gửi thông tin này lên ứng dụng web ở phía server là một back-end application có chứa các mã kịch bản ở phía server Chẳng hạn: CGI, ÁP/PHP scropt, … Ứng dụng web sẽ thực hiện quá trình xử lý dữ liệu được gửi lên. Biểu mẫu là một thành phần dùng để chứa và quản lý các thành phần khác. Co nhiều thành phần của biểu mẫu để cho người dùng nhập liệu, ví dụ text, fields, textarea, drop- down menus, radio buttons, checkboxes,… Cung cấp những thẻ để người dùng nhập dữ liệu vào và cơ chế gửi đi. Cú pháp: Nội dung Thuộc tính: Action: nơi tiếp nhận dữ liệu mà người dùng gửi đến. Method: Phương thức dubmit dữ liệu cảu form. Có 2 method là post và get. Target: chỉ định window/frame đích hiển thị kết quả. Enctype: thiết lập cách thức trình duyệt sẽ encode dữ liệu trước khi gửi lên server. Thẻ cho phần nhập liệu cho người dùngType có 7 loại (style): + text: ví dụ: + password: ví dụ: + email: ví dụ: + number: ví dụ: + checkbox: ví dụ: + radio: ví dụ:
20 + file ví dụ: + submit: ví dụ: + reset: ví dụ: Thẻ label: làm rõ hơn nội dung cần phải nhập cho một input. Ngoài ra không muốn dùng thẻ label mà vẫn muốn làm rõ thuộc tính của thẻ thì ta có thuộc tính placeholder = “nội dung”. Ví dụ . Danh sách lựa chọn Danh sách nhập lựa chọn: . BÀI TẬP THỰC HÀNH CHƯƠNG 1 Bài 1: Bài 1: Tạo trang web theo mẫu. Lưu tên bài 1_họ tên.html, tên tiêu đề trang web là “Thẻ tiêu đề cơ bản” Những khái niệm cơ sở 1. World Wide Web là gì? World Wide Web (WWW) là một mạng các tài nguyên thông tin. Một hệ thống dựa trên siêu dùng chuyển từ một phần tin này sang một phần tin khác. Nó được sử dụng để truy cập tin trên Int WWW dựa trên 3 cơ chế để các tài nguyên này trở nên sẵn dùng cho người xem càng rộng r Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên WWW Các giao thức, để truy nhập tới các tài nguyên qua WWW (như HTTP) Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML). Yêu cầu: Sử dụng thẻ h1, h3, thẻ p, i, thẻ ul, li Bài 2: Tạo trang web theo mẫu. Lưu tên bài 2_họ tên.html, tên tiêu đề trang web là “Thẻ tiêu đề cơ bản” Trình bày trang Web 1. Tạo tiêu đề Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như để người đọc theo dõi cho thuận tiện 2. Thẻ Thẻ này dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản. Thẻ định nghĩa dạng: ... Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản. 3. Thẻ Thẻ được sử dụng để định dạng một đoạn văn bản. Thẻ định nghĩa dạng: