Đang tải... (xem toàn văn)
Đây đoạn văn bản
… HTML tự động thêm dòng trắng trước sau heading Ví dụ: Kết hiển thị cửa sổ trình duyệt: Liên kết (HTML Links) HTML sử dụng thẻ (Anchor) để tạo đường liên kết đến tài li ệu khác Thẻ anchor liên kết đến tài nguyên internet, chúng trang HTML, hình, file nhạc, m ột phim,… Cú pháp để tạo thẻ anchor na la Thẻ sử dụng để tạo điểm neo liên kết đó, thuộc tính href sử dụng để tài liệu liên kết đến, chữ na xuất hai tag < > hiển thị dạng siêu liên kết Ta dùng cặp thẻ để làm công việc liên kết trang web với Thuộc tính thẻ gồm: href: qui định địa mà url trỏ tới target: qui định liên kết mở đâu _blank: cửa sổ _self: trang Với thuộc tính này, xác định liên kết đến tài liệu khác mở đâu Dòng code mở tài liệu liên kết cửa sổ trình duyệt Ví dụ: 10 Viết mã CSS Sau mã html cho trang ttcs.css tong{ padding: 0; margin: 0; } khoi1{ width: 1480px; height: 110px; /* border: 1px solid black; */ position: relative; } khoi2{ width: 1145px; margin-left: 150px; /* border: 1px solid black; */ position: absolute; top: 130px; } khoi3{ width: 1145px; /* border: 1px solid black; */ position: absolute; left: 155px; 50 top: 1100px; background: #F4F4F4; } khoi3 khoivuong{ width: 350px; float: left; padding-right: 30px; position: relative; } khoi3 khoivuong tieude{ padding-left: 70px; padding-top: 50px; } khoi3 khoivuong vantat{ font-size: 10px; position: absolute; top: 100px; left: 100px; } khoi1 tren{ width: 1480px; height: 80px; position: relative; /* border: 1px solid black; */ 51 } khoi1 duoi{ width: 1180px; height: 50px; padding-left: 200px; position: absolute; top:70px; left: 0px; } khoi1 tren trai{ width: 740px; height: 50px; /* border: 1px solid black; */ } khoi1 tren trai h1{ padding-left: 150px; } khoi1 tren phai{ position: absolute; left: 740px; top: 0; } khoi1 tren phai a{ width: 115px; 52 height: 30px; font-size: 17px; padding-top: 10px; padding-left: 9px; border: 2px solid black; color: black; position: absolute; left: 400px; top: 5px; text-decoration: none; } khoi1 tren phai a:hover{ color: red; } khoi1 tren phai c1{ position: absolute; left: -6px; padding-top: 14px; font-size: 17px; text-decoration: none; border: none; } khoi1 tren phai c1:hover{ color: red; 53 } khoi1 tren phai c2{ position: absolute; left: 250px; padding-top: 14px; font-size: 17px; text-decoration: none; border: none; } khoi1 tren phai c2:hover{ color: red; } khoi1 tren phai c3{ position: absolute; left: 110px; padding-top: 14px; font-size: 17px; text-decoration: none; border: none; } khoi1 tren phai c3:hover{ color: red; } 54 .khoi1 duoi khoinho{ width: 110px; float: left; } khoi1 duoi khoinho tieude{ text-decoration: none; color: black; } khoi1 duoi khoinho tieude:hover{ color: red; } khoi1 ke hr{ width: 1480px; padding-bottom: 1px; background: black; position: absolute; top: 90px; } khoi2 trai{ width: 750px; /* border: 1px solid black; */ position: relative; 55 } khoi2 phai{ width: 395px; height: 600px; position: absolute; left: 750px; top: 0; /* border: 1px solid black; */ } khoi2 khoivuong{ width: 373px; height: 420px; /* border: 1px solid black; */ position: relative; float: left; padding-bottom: 20px; } khoi2 khoivuong tren layer1{ z-index: 1; width: 363px; } khoi2 khoivuong tren layer2{ z-index: 2; width: 65px; 56 height: 20px; margin: auto; color: white; background: #363f67; text-decoration: none; position: absolute; top: 0; left: 0; font-size: 15px; padding-right: 5px; padding-left: 5px; } khoi2 khoivuong tren layer3{ width: 20px; height: 21px; background: white; z-index: 3; position: absolute; top: 232px; left: 9px; transform: rotate(45deg); } khoi2 khoivuong giua layer1{ width: 35px; 57 height: 35px; border-radius: 50%; position: relative; top: 10px; left: 5px; } khoi2 khoivuong giua layer2{ text-decoration: none; font-size: 15px; padding-left: 5px; } khoi2 khoivuong giua layer2:hover{ color: red; transition: 1s; } khoi2 khoivuong duoi tieude{ font-size: 20px; } khoi2 khoivuong duoi tieude:hover{ color: red; } khoi2 phai tren{ width: 395px; height: 60px; 58 /* border: 1px solid black; */ } khoi2 phai tren tieude{ width: 370px; font-size: 25px; margin-bottom: auto; padding-left: 110px; } khoi2 phai duoi khoi{ width: 395px; height: 145px; /* border: 1px solid black; */ position: relative; } khoi2 phai duoi khoi layer1{ width: 185px; height: 135px; } khoi2 phai duoi khoi noidung{ width: 170px; padding-left: 15px; position: absolute; left: 185px; top: -8px; 59 } khoi2 phai duoi khoi noidung:hover{ color: red; } Kết hồn thành Đây hình ảnh trang chủ gồm menu, đăng nhập… Các thông tin viết hiển thị trang web 60 TÀI LIỆU THAM KHẢO Các trang web miễn phí thiết kế web html, css, html5, css3… [1] https://hocwebchuan.com/ [2] https://webcoban.vn/ [3] https://viblo.asia/p/tim-hieu-ve-html-va-css-co-ban-7ymwGXV0R4p1 61 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Thuận lợi : Trong trình thực tập em nhận giúp đỡ nhiệt tình giáo viên hướng dẫn, giáo viên môn bạn lớp Bên cạnh tài liệu tham khảo để thiết kế website phong phú, đa dạng giúp em tìm hiểu dễ dàng Khó khăn : Vẫn nhiều thời gian tìm hiểu, thực hành, trình làm xảy nhiều lỗi Kết đạt được: Trình bày số kiến thức HTML, CSS Biết quy trình cách thức để tạo website đơn giản Đã xây dựng website Hạn chế: Giao diện thiết kế chưa đẹp mắt, cần trau chuốt Hướng pháp triển 62 Xây dựng trang web hoàn thiện mặt Xây dựng kết hợp php, kết hợp mysql Tối ưu hóa cho trang nội dung quan trọng Một lần em xin chân thành cảm ơn thầy: tận tình bảo em hồn thiện đề tài báo cáo NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 63 Thái Nguyên, ngày tháng năm 2021 Giáo viên hướng dẫn 64 ... bạn mà thiết kế website cho người dùng mình. Hãy lập kế hoạch trước bắt đầu thiết kế website Bước 3: Thiết kế Giai đoạn thứ ba quy trình bước thiết kế Hãy bắt tay thiết kế giao diện cho website. .. 34 website mình? Hãy trả lời câu hỏi trước bắt đầu thiết kế website chuyên nghiệp Bước 2: Lập kế hoạch Sau tiến hành bước thứ nhất, bạn hệ thống thông tin có lại với lập kế hoạch thiết kế website. .. Thiết kế giao diện website 3.3.1 Giới thiệu website tin tức Ngày website tin tức công cụ hữu dụng để c quan báo chí, thơng tin ngơn luận, cơng ty hay tổ chức truyền đạt thông tin đến người đọc