Tìm hiểu HTML5, CSS3, thiết kế website tin tức. Sử dụng HTML5,CSS3 để thiết kế. Code giao diện của các tiểu mục, phần trang chủ,...phần đăng nhập có dử dụng javaScript. Mua code những phần sau liên hệ gmail: nguyetkettcdgmail.com
-o0o BÁO CÁO THỰC TẬP CƠ SỞ Đề tài Tìm hiểu HTML5, CSS3, thiết kế website tin tức Giảng viên hướng dẫn: Sinh viên thực hiện: Lớp: MSV: Thái Nguyên, tháng năm 2020 MỤC LỤC LỜI NĨI ĐẦU Hiện nay, cơng nghệ dành cho thiết bị laptop, máy tính b ảng, di đ ộng ngày phát triển Nếu trước đây, người dùng phải dùng máy tính để bàn cồng kềnh trình duyệt web IE (Internet Explorer) đ ể l ướt web, với máy tính xách tay (laptop), điện thoại thơng minh (Smartphone) nhiều trình duyệt khác (Firefox, Opera, Google Chrome,…) người dùng dễ dàng lướt “net” nơi đâu Tuy nhiên với thiết bị, trình duyệt web khác nhau, nội dung hi ển th ị hình khác Chẳng hạn máy tính xem trang web r ất t ốt, điện thoại thơng minh giao diện cấu trúc trang b ị xáo trộn Hay xem phim tốt với Google Chrome với Opera, IE, Firefox khơng Vậy giải pháp để người dùng có th ể sử dụng b ất kỳ trình duyệt thiết bị xem đ ầy đủ, tr ọn v ẹn nội dung, thông tin Internet HTML5 sản phẩm phát tri ển HTML, vi ết tắt thuật ngữ ngôn ngữ web Hyper Text Markup Language, định d ạng cốt lõi hầu hết website HTML5 cho phép phát triển, lập trình web tạo trang web có tính ưu việt Khơng vậy, HTML5 cịn đem đến cho ng ười dùng trải nghiệm tốc độ truy cập web nhanh hơn, tốt h ơn, tài nguyên phong phú HTML5 CSS3 làm cho ứng dụng web trang web h ấp dẫn HTML5 có tính thêm vào giúp cho công vi ệc xây dựng ứng dụng web dễ dàng nhiều Ví dụ nhi ều màu sắc h ơn hỗ trợ đường cong, việc làm mờ, góc trịn (thay ép buộc nhà thi ết kế web sử dụng hình ảnh để tạo góc trịn) dĩ nhiên c ả vi ệc lưu trữ offline Tất điểu làm trang Web tr nên d ễ nhìn hơn, bắt mắt làm cho thứ trở nên sát với mà nhà thi ết kế tưởng tượng đầu Ngoài ra, HTML5 CSS3 giúp nhà thi ết k ế Web d ễ dàng h ơn việc tạo hiêu ứng động trị chơi tương tác mà khơng c ần dùng đến Flash Một số ví dụ người dùng làm v ới HTML5, CSS3 số hỗ trợ từ JavaScript Thiết kế Shack có m ột ví d ụ hiệu ứng động CSS3 khác Mặc dù khơng thể thay hồn tồn cho Flash HTML5 CSS3 có nhiều hứa hẹn lĩnh vực CHƯƠNG 1: TỔNG QUAN VỀ HTML5, CSS3 1.1 HTML 1.1.1 Định nghĩa HTML HTML (HyperText Markup Language) loại ngôn ngữ dùng đ ể mô tả hiển thị trang web Nhiều người nhầm tưởng HTML ngơn ngữ lập trình thực khơng phải vậy, ngôn ngữ đánh dấu Một ngôn ngữ đánh dấu thẻ đánh dấu Để miêu tả trang web ta cần đánh dấu thẻ HTML 1.1.2 Thành phần HTML Các dạng thẻ HTML • • • • • • Thẻ HTML dùng để viết lên thành tố HTML Thẻ HTML bao quanh hai dấu lớn < > nhỏ Những thẻ HTML thường có cặp giống Thẻ thứ mở thẻ đầu thẻ thứ hai thẻ kết thú Dòng chữ hai thẻ bắt đầu kết thúc nội dung Những thẻ HTML không phân biệt in hoa viết thường Ví dụ dạng Thành phần HTML • Thành phần HTML bắt đầu với thẻ • Nội dung web design resources • Thành phần HTML kết thúc với thẻ Mục đích thẻ để xác định thành phần HTML ph ải thể dạng in đậm Phần bắt đầu thẻ bắt đầu kết thúc b ằng Mục đích thẻ xác định thành phần HTML bao gồm n ội dung tài liệu Các thuộc tính thẻ HTML Những thẻ HTML có thuộc tính riêng Những thu ộc tính cung cấp thơng tin thành phần HTML trang web Tag xác đ ịnh thành phần thân trang HTML: Với thuộc tính thêm vào bgcolor, báo cho chương trình duyệt biết màu trang màu màu xanh, giống sau: ho ặc (#01F701 giá trị hex màu) Thẻ đ ịnh dạng bảng HTML: với thuộc tính đường viền Thuộc tính ln ln kèm cặp name/value: name = “value” (tên = “giá trị”) thuộc tính ln thêm vào th ẻ m đ ầu c thành phần HTML Dấu ngoặc kép, “green” ‘green’ Giá trị thuộc tính nên đặt dấu trích dẫn “ ” Kiểu ngoặc kép phổ biến hơn, nhiên kiểu đơn ‘ ’ có th ể dùng Ví dụ tronng vài trường hợp đặc biệt hiếm, ví dụ giá trị thuộc tính mang dấu ngoặc kép rồi, việc sử dụng ngoặc đơn cần thiết Ví dụ : Name = ‘Lap “trinh” web’ 1.1.3 Cấu trúc HTML Một tài liệu HTML gói cặp tag Cặp tag nơi mơ tả nhìn thấy trang => Như vậy, trang web viết html có cấu trúc sau: Ngồi phần body cịn có phần head, viết cặp tag Nếu sử dụng cặp tag này, bắt buộc phải viết them cặp tag Giữa tên trang web hiển thị phía menubar => Như vậy, trang web với lúc có cấu trúc sau: 1.1.4 Các thẻ HTML Một tài liệu HTML tạo nên từ cặp thẻ html • Thẻ bắt đầu dấu < kết thúc dấu > • Tên thẻ nằm cặp dấu Ví dụ: tức khai báo thẻ a • Cặp thẻ tạo nên từ thẻ mở thẻ đóng Ví dụ: trong thẻ mở, thẻ đóng • Nội dung thẻ nằm thẻ đóng thẻ mở • Cũng có số thẻ có thẻ mở mà khơng có thẻ đóng Ví dụ: , , Những thẻ quan trọng HTML thẻ xác định Headings, đoạn văn xuống dòng Các thẻ tiêu đề (Headings) Thường sử dụng để cho tiêu đề viết, b ản tin hay mục nhấn mạnh Bao gồm thẻ từ đến Font chữ nội dung thẻ giảm từ đến Đây headings … 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: Đoạn văn html (HTML Paragraphs) Nội dung văn thể cặp thẻ
Đâ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: 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; 51 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; */ 52 } 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; 53 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; 54 } 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; } 55 .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; 56 } 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; 57 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; 58 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; 59 /* 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; 60 } 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 61 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 62 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 cịn 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 63 • Hướng pháp triển 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 64 Thái Nguyên, ngày tháng năm 2021 Giáo viên hướng dẫn 65 ... HTML Trang chủ: ttcs. html Trang chuyên mục trị: ttcsCHINHTRI.html Trang viết chi tiết: ttcsT1.html Trang đăng nhập: ttcsDANGNHAP.html … Sau mã html cho trang ttcs. html ... href="" class="c1">TIN HOT ĐĂNG NHẬP CHÍNH... content="width=device-width, initial-scale=1.0"> Document 42