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

MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ HTML5, CSS3 1.1 HTML 1.1.1 Định nghĩa HTML 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 19 1.2.1 Định nghĩa CSS 19 1.2.2 Cấu trúc CSS 20 1.2.3 Ưu điểm CSS 22 CHƯƠNG 2: NHỮNG ĐIỂM KHÁC BIỆT VÀ NỔI BẬT CỦA HTML5 VÀ CSS3 23 2.1 HTML5 23 2.2 CSS3 28 CHƯƠNG 3: THIẾT KẾ GIAO DIỆN WEBSITE TIN TỨC 32 3.1 Website gì? 32 3.2 Quy trình thiết kế Website 33 3.3 Thiết kế giao diện website 35 3.3.1 Giới thiệu website tin tức 35 3.3.2 Tầm quan trọng website tin tức 35 3.3.3 Phân tích nội dung 36 3.3.4 Phân tích chức 36 3.3.5 Quy trình thiết kế 36 3.4 Giao diện website 37 3.5 Dựng mã HTML/CSS 39 TÀI LIỆU THAM KHẢO 59 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 60 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 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 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 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ó ví dụ hiệu ứng động CSS3 khác Mặc dù thay hoàn toà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 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 ‘ ’ 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, 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: 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, 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ụ:  Kết hiển thị cửa sổ trình duyệt: Nhấn vào “Go to google page” trang google mở cửa sổ Xuống dòng (HTML Line Breaks) Thẻ sử dụng muốn kết thúc dòng lại không muốn bắt đầu đoạn văn khác Thẻ tạo lần xuống dòng viết

Xin chàoCác bạn

, thẻ thẻ trống khơng cần thẻ đóng dạng Ví dụ: 10 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; top: 1100px; background: #F4F4F4; } khoi3 khoivuong{ 48 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; */ } khoi1 duoi{ width: 1180px; height: 50px; 49 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; height: 30px; font-size: 17px; padding-top: 10px; padding-left: 9px; 50 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; } khoi1 tren phai c2{ position: absolute; left: 250px; 51 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; } khoi1 duoi khoinho{ width: 110px; float: left; } 52 .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; } khoi2 phai{ width: 395px; height: 600px; 53 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; height: 20px; margin: auto; color: white; background: #363f67; 54 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; height: 35px; border-radius: 50%; position: relative; top: 10px; 55 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; /* border: 1px solid black; */ } khoi2 phai tren tieude{ width: 370px; 56 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; } khoi2 phai duoi khoi noidung:hover{ color: red; } 57 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 58 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 59 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  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 60 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Thái Nguyên, ngày tháng năm 2021 Giáo viên hướng dẫn 61 62 ... bạn mà thiết kế website cho người dùng Hãy lập kế hoạch trước bắt đầu thiết kế website Bước 3: Thiết kế 33 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. .. từ dịch vụ thiết kế web chuyên nghiệp đời nhằm đáp ứng điều 3.2 Quy trình thiết kế Website Bước 1: Thu thập thông tin Bước quy trình thiết kế website chuyên nghiệp thu thập thơng tin Mọi người... 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 để 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 Đề