Đang tải... (xem toàn văn)
(NB) Giáo trình HTML và CSS cung cấp các kiến thức căn bản về HTML và CSS. Học phần cũng giúp sinh viên tiếp cận với kỹ thuật lập trình web. Mời các bạn cùng tham khảo!
BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ -š›&š› - GIÁO TRÌNH MƠ ĐUN : HTML+CSS NGHỀ: LẬP TRÌNH VIÊN MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: 13A/QĐ-CĐNKTCN ngày 10 tháng 01 năm 2019 Hiệu trưởng Trường Cao đẳng nghề Kỹ thuật Công nghệ Hà Nội, năm 2021 (Lưu hành nội bộ) TUYÊN BỐ BẢN QUYỀN: Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm MÃ TÀI LIỆU : MĐLTV 16 LỜI GIỚI THIỆU HTML/CSS nói khởi đầu tất vấn đề liên quan tới web, dù bạn người làm nghành nào, miễn có đụng tới quản trị web phải biết qua HTML/CSS Bạn blogger viết tốt, liệu bạn sử dụng thành thục thẻ HTML vùng chọn CSS chưa? Nếu câu trả lời chưa điều hạn chế tiềm blogging bạn Chương trình khung nghề Lập trình viên máy tính xây dựng sở phân tích nghề, phần kỹ thuật nghề kết cấu theo môđun Để tạo điều kiện thuận lợi cho sở dạy nghề trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo môđun đào tạo nghề cấp thiết Mô đun 16: HTML +CSS mô đun đào tạo nghề biên soạn theo hình thức tích hợp lý thuyết thực hành Trong q trình thực hiện, nhóm biên soạn tham khảo nhiều tài liệu nước, kết hợp với kinh nghiệm thực tế Mặc dù có nhiều cố gắng, khơng tránh khỏi sai sót, mong nhận đóng góp ý kiến độc giả để giáo trình hoàn thiện Xin chân thành cảm ơn! Hà Nội, ngày 23 tháng 04 năm 2021 Tham gia biên soạn Chủ biên Trần Thị Vinh Tập thể Giảng viên Khoa CNTT Mọi thơng tin đóng góp chia sẻ xin gửi hòm thư tranthivinhvnn@gmail.com liên hệ số điện thoại 0978113529 MỤC LỤC LỜI GIỚI THIỆU MỤC LỤC BÀI1: TỔNG QUAN VỀ HTML Giới thiệu internet Giới thiệu HTML 2.1 HTML Development 2.2 Sử dụng thẻ Metal 10 Các ví dụ thẻ meta HTML 10 2.3 Sử dụng kí tự đặc biệt HTML 10 Sử dụng siêu liên kết 19 3.1.Giới thiệu siêu liên kết URL 19 3.2 Sử dụng siêu liên kết 20 BÀI 2: CÁC THẺ CƠ BẢN 22 Headings 23 Các thẻ mức đoạn 25 2.1 Thẻ 25 2.2 Thẻ 25 2.3 Thẻ 25 Thẻ khối , 26 Các thẻ định dạng kí tự thường dùng 26 Danh sách 27 5.1 Danh sách không 27 5.2 Danh sách có thứ tự 27 5.3 Danh sách định nghĩa (danh sach hai cấp) 28 Thẻ đường kẻ ngang 28 Sử dụng font 28 Sử dụng màu sắc 29 Thẻ thể hình ảnh IMG 29 9.1 Chèn ảnh 29 BÀI 3: SỬ DỤNG BẢNG VÀ LỚP 31 Cách tạo bảng 31 1.1 Thẻ dùng để tạo bảng -Thẻ Table 31 1.2 Chèn hàng cột 32 1.3 Xóa hàng cột 32 1.4 Trộn ơ: Kết hợp cột hay dịng 32 1.5 Định dạng cho ô 33 2.Lớp (Layer) 33 2.1 Lớp 33 2.2 Sử dụng lớp 34 Chèn Multimedia vào tài liệu HTML 37 3.1 Chèn ảnh động (.Gif) vào tài liệu HTML 37 3.2 Chèn âm vào tài liệu HTML 37 Các thuộc tính thẻ 37 3.3 Chèn video vào HTML 38 3.4 Chèn Java Applets 38 BÀI 4: SỬ DỤNG BIỂU MẪU VÀ KHUNG 39 Giới thiệu biểu mẫu 39 1.1 Sử dụng biểu mẫu 39 1.2 Phần tử Form 39 1.3 Các phần tử nhập HTML 42 1.4 Tạo biểu mẫu 44 Khung (Frame) 45 2.1 Tại sử dụng khung 45 2.2 Sử dụng khung 45 2.3 Phần tử iframe – khung dòng (inline frame) 47 Một số weblayout thường dùng 47 BÀI 5: CSS (Cascading Style Sheet) 58 DHTML 58 1.1 Giới thiệu DHTML 58 1.2 Các đặc điểm DHTML 58 Style sheets 58 2.1 Khái niệm, chức thuận lợi stylesheet 58 2.2 Quy tắc stylesheet 59 Các selector style sheet 59 3.1 Selector đơn 59 3.2 Selector ngữ cảnh 60 Kết hợp liên kết chèn style sheet vào tài liệu HTML 60 4.1 Phần tử style 60 4.2 Thuộc tính style 60 Thiết lập thuộc tính stylesheet 60 Các thuộc tính CSS 61 6.1 Thuộc tính background 61 6.2 Thuộc tính border 61 6.3 Các thuộc tính CSS dành cho text (văn bản) 65 Float / Clear 71 GIÁO TRÌNHMƠ ĐUN Tên mô đun: HTML + CSS Mã mô đun: MĐLTV 16 Vị trí, tính chất, ý nghĩa vai trị mơ đun : - Vị trí: Mơ đun HTML+CSS giảng dạy cho sinh viên cao đẳng ngành Lập trình viên - Tính chất: Mơ đun cung cấp kiến thức HTML CSS Học phần giúp sinh viên tiếp cận với kỹ thuật lập trình web Mục tiêu mô đun: - Về kiến thức + Trình bày bước qui trình thiết kế website + Trình bày kiến thức kỹ thuật lập trình web phía Client với HTML, CSS - Về kỹ + Vận dụng ngôn ngữ HTML, CSS xây dựng web phía client theo yêu cầu + Thiết kế website theo yêu cầu - Về lực tự chủ trách nhiệm: + Khả tìm tài liệu, đọc hiểu tài liệu + Khả làm việc nhóm Nội dung mơ đun: Số TT Tên mô đun Tổng số Bài 1: Tổng quan HTML Giới thiệu Internet Giới thiệu HTML Sử dụng siêu liên kết Bài 2: Các thẻ HTML Headings (tiêu đề) Các thẻ mức đoạn Thẻ khối Các thẻ định dạng ký tự thường dùng Danh sách Thẻ đường kẻ ngang Sử dụng font Sử dụng màu sắc Sử dụng hình ảnh HTML Bài 3: Sử dụng bảng lớp Cách tạo bảng Lớp (Layer) Chèn Multimedia vào HTML Thời gian Lý Thực Kiểm thuyết hành tra* 20 17 30 23 30 12 17 Bài 4: Sử dụng biểu mẫu khung Giới thiệu biểu mẫu(Form) Khung(Frame) 13 10 Một số weblayout thường dùng Bài 5: CSS (cascading style sheet) DHTML Style sheets Các selector style sheet 25 19 (hay giả lớp) Kết hợp, liên kêt chèn style sheet vào tài liệu HTML Thiết lập thuộc tính stylesheet Thi kết thúc mô đun 1 Cộng 120 29 87 * Ghi chú: Thời gian kiểm tra lý thuyết tính vào gìơ lý thuyết, Thời gian kiểm tra thực hành tính vào thực hành Nội dung chi tiết: BÀI 1: TỔNG QUAN VỀ HTML Mã bài: MĐLTV 16.01 Giới thiệu: HTML (viết tắt Hypertext Markup Language hay ngôn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu dùng để tạo trang siêu văn sử dụng mạng internet (hay trang web) Gọi ngôn ngữ đánh dấu HTML sử dụng thẻ để định nghĩa (hay đánh dấu) thành phần khác trang web Siêu văn (hay hypertext) loại văn sử dụng để hiẹn thị máy vi tính (hoặc thiết bị điện tử số) Siêu văn khác với văn thông thường chỗ chúng liên kết lại với tham chiếu tới nhờ sử dụng link liên kết Mục tiêu: Trình bày khái niệm internet, HTML Nắm vững cấu trúc trang HTML Trình bày sử dụng siêu liên kết HTML Nội dung chính: Giới thiệu internet Mục tiêu: - Giới thiệu chức năng, tầm quan trọng Internet Internet gì? Internet gì? Internet mạng tồn cầu bao gồm hàng tỷ máy tính thiết bị điện tử khác Với Internet, bạn truy cập hầu hết thông tin, giao tiếp với khác giới bạn làm nhiều Bạn làm tất điều cách kết nối máy tính với Internet, hay gọi going online Khi nói máy tính trực tuyến, cách nói khác kết nối với Internet Giới thiệu HTML 2.1 HTML Development HTML (viết tắt từ Hypertext Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấu thiết kế để tạo nên trang web World Wide Web Cùng với CSS JavaScript, HTML ngôn ngữ quan trọng lĩnh vực thiết kế website HTML định nghĩa ứng dụng đơn giản SGML sử dụng tổ chức cần đến yêu cầu xuất phức tạp HTML trở thành chuẩn mực Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01 (1999) Sau đó, nhà phát triển thay XHTML Hiện nay, phiên ngôn ngữ HTML5 Lưu ý: HTML ngôn ngữ lập trình Bằng cách dùng HTML động Ajax, lập trình viên tạo xử lý số lượng lớn công cụ, từ chương trình soạn thảo văn đơn giản – gõ vào từ dòng – công cụ xuất WYSIWYG phức tạp Hypertext cách mà trang Web (được thiết kế HTML) kết nối với Và thế, đường link có trang Web gọi Hypertext Như tên gọi nói, HTML ngơn ngữ đánh dấu thẻ (Markup Language), nghĩa bạn sử dụng HTML để đánh dấu tài liệu text thẻ (tag) để nói cho trình duyệt Web cách để cấu trúc để hiển thị Cấu trúc trang HTML 2.2 Sử dụng thẻ Metal Thẻ HTML hay thẻ meta HTML sử dụng để cung cấp metadata tài liệu HTML Metadata không hiển thị trình duyệt, máy tìm kiếm phân tích để lấy thơng tin trang web bạn Thẻ HTML meta sử dụng để định nghĩa thông tin mơ tả trang web, từ khóa, tác giả, chỉnh sửa cuối metadata khác Metadata sử dụng trình duyệt (cách hiển thị nội dung tải lại trang), máy tìm kiếm (từ khóa), dịch vụ web khác HTML5 giới thiệu phương pháp nhà thiết kế web kiểm sốt khung nhìn (khu vực hiển thị người dùng trang web), thông qua thẻ Thẻ meta định nghĩa thẻ Các ví dụ thẻ meta HTML Ví dụ 1: định nghĩa từ khóa cho máy tìm kiếm Ví dụ 2: định nghĩa mô tả cho trang web Ví dụ 3: định nghĩa tác giả trang web Ví dụ 4: tự động tải lại trang web sau 30s Ví dụ 5: Thiết định khung nhìn để trang web dễ nhìn tất thiết bị 2.3 Sử dụng kí tự đặc biệt HTML Khi học lập trình HTML, bạn có hội thấy kí tự vơ đặc biệt khơng thể thể kí tự thơng thường bàn phím Để biểu diễn kí tự Website dạng ngơn ngữ lập trình HTML, cần biết loại mã đặc trưng dành cho chúng Khi HTML nhìn thấy loại mã này, chúng mặc định chuyển đổi mã cột “HTML” sang hình dạng kí tự cột “Symbol” Numeri c SPECIAL CHARACTERS HTML Symbol " “ " Description Hex CSS (ISO) JS (Octal) quotation mark u+0022 \0022 \42 10 property : value; } Ví dụ: HTMl viếtHọc web chuẩn
vnexpress
CSS VIẾT a:hover { background: #ff0000; color: #fff; } Hiển thị trình duyệt chưa có css Hiển thị trình duyệt có css Hover qua link thấy hiệu ứng khung chữ có màu đỏ 11 opacity vs visibility & display - Làm mờ, ẩn + opacity: 0.1 -> 0.9 or 0.1 -> 0.9 : Độ mờ thẻ 1: Hiển thị hoàn toàn 12 before & after & ::first-line in css Ví dụ page7 BÀI TẬP THỰC HÀNH Bài 1: Dựng menu ngang cấp Hướng dẫn code Dung menu ngang /* menu */ nav{ 76 background: #57a929; height: 45px; } nav ul { list-style-type: none; align-items: center; display: flex; line-height: 45px; justify-content: space-around; /* cách thẻ li */ } nav ul li a{ text-decoration: none; color: white; }- Trang chủ
- Sản phẩm
- Giới thiệu
- Tin tức
- Sự kiện
- Khuyến mại
- Liên Hệ
- Video
- Sự kiện
- Xã hội
- Thế giới
- Thể thao 79
- Việc làm
- Sức khỏe
- Nhân ái
- Bất động sản
- Sức mạnh số
- Giáo dục
- Văn hóa
- Giải trí
- Du lịch
- Pháp luật
