Báo cáo thực tập Tìm hiểu về HTML5, CSS3, thiết kế website tin tức

-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 CHƯƠNG 1: TỔNG QUAN VỀ HTML5, CSS3 1.1 HTML 1.1.1 Định nghĩa HTML .6 1.1.2 Thành phần HTML 1.1.3 Cấu trúc HTML 1.1.4 Các thẻ HTML 1.2 CSS 20 1.2.1 Định nghĩa CSS 20 1.2.2 Cấu trúc CSS 21 1.2.3 Ưu điểm CSS 23 CHƯƠNG 2: NHỮNG ĐIỂM KHÁC BIỆT VÀ NỔI BẬT CỦA HTML5 VÀ CSS3 24 2.1 HTML5 24 2.2 CSS3 29 CHƯƠNG 3: THIẾT KẾ GIAO DIỆN WEBSITE TIN TỨC 33 3.1 Website gì? 33 3.2 Quy trình thiết kế Website 34 3.3 Thiết kế giao diện website 36 3.3.1 Giới thiệu website tin tức 36 3.3.2 Tầm quan trọng website tin tức .37 3.3.3 Phân tích nội dung 37 3.3.4 Phân tích chức .37 3.3.5 Quy trình thiết kế 38 3.4 Giao diện website .38 3.5 Dựng mã HTML/CSS 40 TÀI LIỆU THAM KHẢO .61 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .62 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 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ỗ 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 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 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ó 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 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: (#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 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 ln 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, 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 hoà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, q 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  Hướng pháp triển 63  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 hoà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 ... THIẾT KẾ GIAO DIỆN WEBSITE TIN TỨC 33 3.1 Website gì? 33 3.2 Quy trình thiết kế Website 34 3.3 Thiết kế giao diện website 36 3.3.1 Giới thiệu website tin tức. .. 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. .. 35 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