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 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ù 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 luôn 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 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, 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: 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, m ột file nh ạc, m ột phim,… Cú pháp để tạo thẻ anchor na la Thẻ sử dụng để tạo điểm neo liên kết bắt đ ầu 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ẻ m ột th ẻ tr ống khơng cần thẻ đóng dạng Ví dụ:  Kết hiển thị cửa sổ trình duyệt: Non-breaking space 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; 49 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; */ 50 } 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; 51 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; 52 } 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; } 53 .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; 54 } 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; 55 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; 56 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; 57 /* 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; 58 } 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 59 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 60 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 61 • 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 62 Thái Nguyên, ngày tháng năm 2021 Giáo viên hướng dẫn 63 ... riêng 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ế Giai đoạn thứ ba quy trình bước thi ết kế Hãy b tay thiết kế giao diện cho website bạn... website 3.3 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 đ ể c 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... cho 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