Nội dung của báo cáo này trình bày tổng quan về HTML5, CSS3; những điểm khác biệt và nổi bật của HTML5 và CSS3; hiết kế giao diện website tin tức. Mời các bạn cùng tham khảo để nắm chi tiết hơn nội dung nghiên cứu.
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 càng phát triển. Nếu như trước đây, người dùng phải dùng chiếc máy tính để bàn cồng kềnh cùng 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) cùng rất nhiều trình duyệt khác (Firefox, Opera, Google Chrome, …) người dùng có thể dễ dàng lướt “net” ở bất kì nơi đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn trên máy tính có thể xem các trang web này rất tốt, nhưng trên điện thoại thơng minh thì giao diện và cấu trúc trang bị xáo trộn. Hay có thể xem phim rất tốt với Google Chrome nhưng với Opera, IE, Firefox thì khơng. Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thơng tin trên Internet HTML5 là sản phẩm của sự phát triển tiếp theo của HTML, đó là viết tắt của thuật ngữ ngơn ngữ web Hyper Text Markup Language, là định dạng cốt lõi hầu hết website hiện nay HTML5 cho phép phát triển, lập trình web tạo ra các trang web có những tính ưu việt hơn. Khơng những vậy, HTML5 cịn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài ngun phong phú hơn HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho cơng việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc trịn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc trịn) và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điểu này làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn Ngồi ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Web dễ dàng hơn trong việc tạo ra các hiêu ứng động và các trị chơi tương tác mà khơng cần dùng đến Flash. Một số ví dụ về những người dùng có thể làm với HTML5, CSS3 và một số ít hỗ trợ từ JavaScript. Thiết kế Shack cũng có một ví dụ hiệu ứng động CSS3 khác. Mặc dù khơng thể thay thế hồn tồn cho Flash nhưng HTML5 và CSS3 sẽ có nhiều hứa hẹn trong lĩnh vực này. CHƯƠNG 1: TỔNG QUAN VỀ HTML5, CSS3 1.1 HTML 1.1.1 Định nghĩa về HTML HTML (HyperText Markup Language) là một loại ngôn ngữ dùng để mô tả hiển thị các trang web Nhiều người nhầm tưởng HTML là ngơn ngữ lập trình nhưng thực sự khơng phải như vậy, nó là một ngơn ngữ đánh dấu Một ngơn ngữ đánh dấu là một bộ các thẻ đánh dấu Để có thể miêu tả trang web ta cần đánh dấu các thẻ HTML 1.1.2 Thành phần của HTML Các dạng thẻ HTML Thẻ HTML dùng để viết lên những thành tố HTML Thẻ HTML được bao quanh bởi hai dấu lớn hơn nhỏ hơn Những thẻ HTML thường có một cặp giống nhau như và Thẻ thứ nhất là mở thẻ đầu và thẻ thứ hai là thẻ kết thú Dịng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung Những thẻ HTML khơng phân biệt in hoa và viết thường. Ví dụ dạng và đều như nhau Thành phần HTML Thành phần của HTML bắt đầu với thẻ Nội dung của nó là web design resources Thành phần của HTML kết thúc với thẻ Mục đích của thẻ là để xác định một thành phần của HTML phải được thể hiện dưới dạng in đậm Phần này bắt đầu bằng thẻ bắt đầu và kết thúc bằng Mục đích của thẻ là xác định thành phần của HTML bao gồm nội dung của tài liệu Các thuộc tính của thẻ HTML Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này cung cấp thơng tin về thành phần HTML của trang web. Tag này xác định thành phần thân trang HTML: . Với một thuộc tính thêm vào là bgcolor, có thể báo cho chương trình duyệt biết rằng màu nền của trang này là màu màu xanh, giống như sau: hoặc (#01F701 là giá trị hex của màu) Thẻ này sẽ định dạng bảng HTML: với một thuộc tính đường viền Thuộc tính ln ln đi kèm một cặp như name/value: name = “value” (tên = “giá trị”) thuộc tính ln ln được thêm vào thẻ mở đầu của thành phần HTML. Dấu ngoặc kép, “green” hoặc ‘green’ Giá trị thuộc tính nên được đặt trong dấu trích dẫn “ và ”. Kiểu ngoặc kép vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ‘ và ’ cũng có thể được dùng. Ví dụ tronng một vài trường hợp đặc biệt hiếm, ví dụ như giá trị thuộc tính đã mang dấu ngoặc kép rồi, thì việc sử dụng ngoặc đơn là cần thiết Ví dụ : Name = ‘Lap “trinh” web’ 1.1.3 Cấu trúc cơ bản của HTML Một tài liệu HTML ln được gói trong cặp tag và Cặp tag và sẽ là nơi mơ tả những gì có thể nhìn thấy của trang => Như vậy, một trang web viết bằng html sẽ có cấu trúc cơ bản như sau: Ngồi phần body cịn có phần head, được viết bởi cặp tag và . Nếu sử dụng cặp tag này, bắt buộc phải viết them một cặp tag nữa đó là và . Giữa và là tên của trang web được hiển thị phía trên cùng của menubar => Như vậy, một trang web với lúc này sẽ có cấu trúc như sau: 1.1.4 Các thẻ cơ bản trong HTML Một tài liệu HTML được tạo nên từ các cặp thẻ html Thẻ được bắt đầu bằng dấu Tên thẻ nằm giữa cặp dấu Ví dụ: tức là đang khai báo thẻ a Cặp thẻ được tạo nên từ thẻ mở và thẻ đóng Ví dụ: trong đó là thẻ mở, là thẻ đóng Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở Cũng có một số thẻ chỉ có thẻ mở mà khơng có thẻ đóng Ví dụ: , , Những thẻ quan trọng nhất trong HTML là những thẻ xác định Headings, đoạn văn và xuống dòng Các thẻ tiêu đề (Headings) Thường được sử dụng để thế hiện cho tiêu đề của bài viết, bản tin hay các mục nhấn mạnh Bao gồm các thẻ từ đến Font chữ của nội dung trong các thẻ giảm từ đến Đây là headings … HTML sẽ tự động thêm một dịng trắng trước và sau mỗi heading Ví dụ: Kết quả hiển thị trong cửa sổ trình duyệt: Đoạn văn bản trong html (HTML Paragraphs) Nội dung văn bản được thể hiện trong cặp thẻ
Đây là đoạn văn bản
… HTML sẽ tự động thêm một dịng trắng trước và sau mỗi heading Ví dụ: Kết quả hiển thị trong 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 một tài liệu khác. Thẻ anchor có thể liên kết đến bất cứ một tài ngun nào trên internet, chúng có thể là một trang HTML, một tấm hình, một file nhạc, một bộ phim, … Cú pháp để tạo một thẻ anchor na la Thẻ được sử dụng để tạo một điểm neo và liên kết bắt đầu từ đó, thuộc tính href được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ na xuất hiện ở giữa hai tag sẽ được hiển thị dưới dạng siêu liên kết Ta dùng cặp thẻ để làm cơng việc liên kết các trang web với nhau Thuộc tính của thẻ gồm: href: qui định địa chỉ mà url trỏ tới target: qui định liên kết sẽ được mở ra ở đâu _blank: cửa sổ mới _self: trang hiện tại Với thuộc tính này, có thể xác định liên kết đến tài liệu khác sẽ được mở ra ở đâu. Dịng code dưới đây sẽ mở tài liệu được liên kết trong một cửa sổ trình duyệt mới 10 paddingright: 30px; position: relative; } khoi3 .khoivuong .tieude{ paddingleft: 70px; paddingtop: 50px; } khoi3 .khoivuong .vantat{ fontsize: 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; paddingleft: 200px; 53 position: absolute; top:70px; left: 0px; } khoi1 .tren .trai{ width: 740px; height: 50px; /* border: 1px solid black; */ } khoi1 .tren .trai h1{ paddingleft: 150px; } khoi1 .tren .phai{ position: absolute; left: 740px; top: 0; } khoi1 .tren .phai a{ width: 115px; height: 30px; fontsize: 17px; paddingtop: 10px; paddingleft: 9px; 54 border: 2px solid black; color: black; position: absolute; left: 400px; top: 5px; textdecoration: none; } khoi1 .tren .phai a:hover{ color: red; } khoi1 .tren .phai .c1{ position: absolute; left: 6px; paddingtop: 14px; fontsize: 17px; textdecoration: none; border: none; } khoi1 .tren .phai .c1:hover{ color: red; } khoi1 .tren .phai .c2{ position: absolute; 55 left: 250px; paddingtop: 14px; fontsize: 17px; textdecoration: none; border: none; } khoi1 .tren .phai .c2:hover{ color: red; } khoi1 .tren .phai .c3{ position: absolute; left: 110px; paddingtop: 14px; fontsize: 17px; textdecoration: none; border: none; } khoi1 .tren .phai .c3:hover{ color: red; } khoi1 .duoi .khoinho{ width: 110px; 56 float: left; } khoi1 .duoi .khoinho .tieude{ textdecoration: none; color: black; } khoi1 .duoi .khoinho .tieude:hover{ color: red; } khoi1 .ke hr{ width: 1480px; paddingbottom: 1px; background: black; position: absolute; top: 90px; } khoi2 .trai{ width: 750px; /* border: 1px solid black; */ position: relative; } 57 .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; paddingbottom: 20px; } khoi2 .khoivuong .tren .layer1{ zindex: 1; width: 363px; } khoi2 .khoivuong .tren .layer2{ zindex: 2; width: 65px; 58 height: 20px; margin: auto; color: white; background: #363f67; textdecoration: none; position: absolute; top: 0; left: 0; fontsize: 15px; paddingright: 5px; paddingleft: 5px; } khoi2 .khoivuong .tren .layer3{ width: 20px; height: 21px; background: white; zindex: 3; position: absolute; top: 232px; left: 9px; transform: rotate(45deg); } khoi2 .khoivuong .giua .layer1{ 59 width: 35px; height: 35px; borderradius: 50%; position: relative; top: 10px; left: 5px; } khoi2 .khoivuong .giua .layer2{ textdecoration: none; fontsize: 15px; paddingleft: 5px; } khoi2 .khoivuong .giua .layer2:hover{ color: red; transition: 1s; } khoi2 .khoivuong .duoi .tieude{ fontsize: 20px; } khoi2 .khoivuong .duoi .tieude:hover{ color: red; } khoi2 .phai .tren{ 60 width: 395px; height: 60px; /* border: 1px solid black; */ } khoi2 .phai .tren .tieude{ width: 370px; fontsize: 25px; marginbottom: auto; paddingleft: 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; paddingleft: 15px; 61 position: absolute; left: 185px; top: 8px; } khoi2 .phai .duoi .khoi .noidung:hover{ color: red; } Kết quả hồn thành Đây là hình ảnh trang chủ gồm menu, đăng nhập… Các thơng tin bài viết hiển thị trên trang web 62 63 TÀI LIỆU THAM KHẢO Các trang web miễn phí về thiết kế web bằng html, css, html5, css3… [1] https://hocwebchuan.com/ [2] https://webcoban.vn/ [3] https://viblo.asia/p/timhieuvehtmlvacsscoban7ymwGXV0R4p1 64 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Thuận lợi : Trong q trình thực tập em đã nhận được sự giúp đỡ nhiệt tình của giáo viên hướng dẫn, giáo viên bộ mơn và các bạn trong lớp. Bên cạnh đó tài liệu tham khảo để thiết kế website cũng rất phong phú, đa dạng giúp em tìm hiểu được dễ dàng hơn Khó khăn : Vẫn mất nhiều thời gian tìm hiểu, thực hành, trong q trình làm cịn xảy ra nhiều lỗi Kết quả đạt được: Trình bày được một số kiến thức cơ bản về HTML, CSS Biết được quy trình và cách thức để tạo ra 1 website đơn giản Đã xây dựng được một website Hạn chế: Giao diện thiết kế cịn chưa được đẹp mắt, cần trau chuốt hơn nữa Hướng pháp triển Xây dựng trang web hồn thiện hơn về mọi mặt. Xây dựng kết hợp php, kết hợp mysql Tối ưu hóa cho các trang nội dung quan trọng Một lần nữa em xin chân thành cảm ơn thầy: đã tận tình chỉ bảo em hồn thiện đề tài và bài báo cáo này 65 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 66 67 ... dàng nhất khi truy cập,? ?tìm? ?kiếm thơng? ?tin. Đừng? ?thiết? ?kế ? ?website? ?cho riêng bạn mà hãy? ?thiết? ?kế? ?website? ?cho người dùng của mình Hãy lập? ?kế? ?hoạch trước khi bắt đầu? ?thiết? ?kế? ?website Bước 3:? ?Thiết? ?kế Giai đoạn thứ ba trong quy trình 6 bước chính là? ?thiết? ?kế. Hãy bắt tay? ?thiết? ?... thời hạn bao lâu đi nữa thì hãy chắc chắn bạn sẽ thường xun bảo trì và cập nhật? ?website? ?của mình 3.3? ?Thiết? ?kế? ?giao diện? ?website? ? 3.3.1 Giới thiệu? ?website? ?tin? ?tức Ngày nay các? ?website? ?tin? ?tức? ?ln là cơng cụ hữu dụng để các cơ quan? ?báo chí, thơng? ?tin? ?ngơn luận, các cơng ty hay tổ... quảng bá hình ảnh, sản phẩm, thơng? ?tin, của mình. Và từ đó các dịch vụ? ?thiết? ? kế? ?web chun nghiệp ra đời nhằm đáp ứng điều đó 3.2 Quy trình? ?thiết? ?kế? ?một? ?Website Bước 1: Thu thập thơng? ?tin Bước đầu tiên trong quy trình? ?thiết? ?kế