Báo cáo thực tập cơ sở

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

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