TÌM HIỂU về HTML5 và CSS 3, ỨNG DỤNG để VIẾT một WEBSITE đơn GIẢN

Ketnooi.com nghiệp giáo dục BÁO CÁO TỐT NGHIỆP Đề tài Tìm hiểu HTML5 CSS 3, ứng dụng để viết website đơn giản Ketnooi.com nghiệp giáo dục MỤC LỤC BÁO CÁO TỐT NGHIỆP Đề tài Tìm hiểu HTML5 CSS 3, ứng dụng để viết website đơn giản MỤC LỤC LỜI NÓI ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ HTML5 VÀ CSS Cơ HTML CSS 1.1 HTML: 1.1.1 Định nghĩa HTML 1.1.2 Thành phần HTML: 1.1.3 Cơ thẻ HTML: CSS: 18 II Những điểm khác bật html5 css3 .20 A HTML5: 21 B CSS3: 23 Chương 26 PHÂN TÍCH THIẾT KẾ VÀ HỆ THỐNG .26 Sơ đồ chức 26 Sơ đồ luồng 27 2.1 Sơ đồ luồng mức khung cảnh .27 2.2 Sơ đồ luồng liệu mức đỉnh .27 Sơ đồ mức đỉnh .28 3.1 Quản lý viết 28 3.2 Hiển thị 29 3.3 Tìm kiếm 29 3.4 Quản lý danh mục .30 Sơ đồ thực thể kiên kết 31 Ketnooi.com nghiệp giáo dục Chương 32 I Thiết kế website 32 1.Tạo cấp lưu trữ nội dung cho chủ đề: 32 Tạo Menu 34 Chọn Menus -> mainmenu -> New -> Articles -> Section Blog Layout 35 Ví dụ 2: Thẻ : 40 40 II Kết luận 44 III Hướng phát triển 44 Ketnooi.com nghiệp giáo dục LỜI NÓI ĐẦU Hiện nay, công nghệ dành cho thiết bị di động ngày phát triển Nếu trước đây, bạn phải dùng máy tính để bàn (MTĐB) cồng kềnh trình duyệt web IE (Internet Explorer) để lướt web, với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) nhiều trình duyệt khác (Firefox, Opera…) bạn dễ dàng lướt “net” đâ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 bạn xem trang web tốt, ĐTTM giao diện cấu trúc trang bị xáo trộn Hay bạn xem phim tốt với IE với 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 cho phép nhà phát triển, lập trình web tạo trang web có tính ưu việt Không vậy, HTML5 đ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 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ế Wed dễ dàng việc tạo hiệu ứng động trò chơi tương tác mà không cần Ketnooi.com nghiệp giáo dục dùng đến Flash Một số ví dụ bạn làm với HTML5, CSS3 hỗ trợ từ JavaScript Akihabra Games Star Wars AT-AT Walker Thiết kế Shack có số 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 Đó lý em lựa chọn đề tài “Tìm hiểu HTML5 CSS 3, ứng dụng để viết website đơn giản” Trong đề tài thực tập em tập chung vào nghiên cứu nôi dung sau: Chương 1: Tổng quan html5, css3  Khái niệm HTML, CSS  Điểm mạnh HTML5, CSS3 Chương 2: Phân tích thiết kế hệ thống Chương 3: Thiết kế website  Sử dụng joomla để làm website tin tức  ứng HTML5 CSS3 vào viết Chương 4: Kết luận hướng phát triển Em xin chân thành cảm ơn thầy, cô giáo khoa Công Nghệ Thông Tin, ĐH Thái Nguyên giảng dạy em môn thời gian vừa qua Đặc biệt thầy giáo Nguyễn Quốc Bảo giáo viên hướng dẫn trực tiếp, tận tình bảo em hoàn thành đề tài Ketnooi.com nghiệp giáo dục CHƯƠNG 1: TỔNG QUAN VỀ HTML5 VÀ CSS Cơ HTML CSS 1.1 HTML: 1.1.1 Định nghĩa HTML HTML biết đến loại ngôn ngữ dùng để mô tả hiển thị trang web *Hyper Text Markup Language HTML (Viết tắt) * Nhiều người nhầm tưởng HTML ngôn ngữ lập trình thực 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ứ thẻ mở đầu thẻ thứ hai thẻ kết thúc • 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 nhau, - Thành phần HTML Thành phần HTML bắt đầu với thẻ: Nội dung là: web design resources Ketnooi.com nghiệp giáo dục 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 thẻ 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ạn báo cho trình duyệt biết màu trang màu đỏ, giống sau: (#E6E6E6 giá trị hex màu) Thẻ xác định dạng bảng HTML: với thuộc tính đường viền (border), bạn báo cho trình duyệt biết bảng đường viền: Thuộc tính luôn 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 thành phần HTML Dấu ngoặc kép, "red" 'red' 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ụ 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='ban"tay"den' 1.1.3 Cơ thẻ HTML: Ketnooi.com nghiệp giáo dục Những thẻ quan trọng HTML thẻ xác định Heading, đoạn văn xuống dòng Headings Headings định dạng với hai thẻ đến xác định heading lớn xác định heading nhỏ Đây heading Đây heading HTML tự động thêm dòng trắng trước sau heading Đoạn văn – paragraphs Paragraphs định dạng thẻ Đây đoạn văn Đây đoạn văn khác HTML tự động thêm dòng trắng trước sau heading Line Breaks - xuống dòng Thẻ sử dụng bạn 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 bạn viết Đây đođoạn văn với thẻ xuống hàng Thẻ thẻ trống, không cần thẻ đóng dạng Lời thích HTML Thẻ thích sử dụng để thêm lời thích mã nguồn HTML Một dòng thích bỏ qua trình duyệt Bạn sử dụng thích để giải thích code bạn, để sau bạn có phải quay lại chỉnh sửa dễ nhớ Bạn cần dấu chấm than ! sau dấu nhỏ không cần dấu lớn Các ký tự đặc biệt HTML Một vài ký tự tương tự dấu nhỏ hiển thị dạng siêu liên kết Thuộc tính đích đến: Với thuộc tính đích đến, bạn 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 Mời bạn vào diễn đàn niemvui.net Thẻ anchor thuộc tính tên Thuộc tính tên sử dụng để tạo điểm neo đặt tên Khi sử dụng điểm neo đặt tên trước tạo đường liên kết mà người đọc nhảy trực tiếp đến phần cụ thể trang web, thay họ phải kéo xuống để tìm thông tin Một dạng bookmark vậy! Dưới cú pháp điểm neo đặt tên trước: Chữ bạn muốn hiển thị đây Thuộc tính tên sử dụng để tạo điểm neo Tên điểm neo thứ bạn muốn Dòng code sau xác định điểm neo đặt tên trước Tất tutorial đây Bạn nhận thẻ anchor đặt tên trước hiển thị đặc biệt Để trực tiếp liên kết phần Photoshop Tutorial, bạn phải thêm dấu # tên điểm neo cuối URL Xem ví dụ sau Quay lại trang tutorials Một đường liên kết đến phần Quay lại trang tutorials TỪ trang "html_chuong_3.htm" sau: Quay lại trang tutorials Điểm neo đặt tên thường sử dụng để tạo Mục Lục trang tài liệu nhiều trang Môi chương tài liệu cho điểm neo, liên kết đến điểm neo đặt tài liệu 10 Ketnooi.com nghiệp giáo dục 3.4 Quản lý danh mục 30 Ketnooi.com nghiệp giáo dục Sơ đồ thực thể kiên kết 31 Ketnooi.com nghiệp giáo dục Chương I Thiết kế website  Sử dụng open source joomla (phiên 1.5) để làm website tin tức  Các bước chuẩn bị:  Host: Nơi đặt Web Site, đề tài Web Site đặt  Tạo Database: Tạo cở sở dử liệu cho Web Site Cài đặt Joomla!: Download cài đặt Joomla! 1.5  Cài ngôn ngữ tiếng Việt: Download cài đặt ngôn ngữ tiếng Việt Joomla! 1.5  Cấu hình: Thiết lập thông số cho Web Site Global Configuration  Đăng nhập vào Admin (Back-end) 1.Tạo cấp lưu trữ nội dung cho chủ đề  : Có thể xóa Section, Category Content Item mẫu có sẵn Joomla! đổi tên để sử dụng lại  Tạo Section: Chọn Content -> Section Manager để tạo phần cho Web Site, sửa lại các Section có sẵn tạo thêm 32 Ketnooi.com nghiệp giáo dục  Chọn New để tạo Section Tin nước, Tin giới, Tin thể thao  Tạo Category: Chọn Content -> Category Manager để tạo mục phụ cho Web Site, sửa lại các Category có sẵn tạo thêm  Chọn New để tạo Category Xã hội, Kinh tế, An ninh phần (Section) Tin nước, Tin giới, Category Trong nước, Quốc tế phần (Section) Tin thể thao 33 Ketnooi.com nghiệp giáo dục Tạo Menu 34 Ketnooi.com nghiệp giáo dục  Chọn Menus -> mainmenu -> New -> Articles -> Section Blog Layout • Các Menu lại muốn sử dụng không xóa cách chọn Menu muốn xóa nhấn vào nút Trash • - Tạo Menu phụ (Sub Menu): Chọn Menus -> mainmenu -> New -> Articles -> Blog - Content Category 35 Ketnooi.com nghiệp giáo dục • Tạo thêm Sub Menu khác với lựa chọn Blog – Content Category Category Parent Item tương ứng với Section Category • Sau tạo xong Menu xếp lại theo thứ tự ý cách đánh số thứ tự mục Order nhấn vào biểu tượng dĩa mềm để Save dùng nút mũi tên lên xuống để xếp 36 Ketnooi.com nghiệp giáo dục Tạo phần liên hệ (Contact): • Chọn Components -> Contacts -> Manage Contacts -> chọn Contact mẫu có sẵn hay tạo cách nhấn New • Nhập địa Email vào mục E-mail, địa hiển thị phần người gửi người nhận trả lời lại cho địa • Nhập đầy đủ thông tin mục khác phần muốn bỏ bớt mục cách chọn Tab Parameters chọn Hide mục Nhấn Save để hoàn tất • Có thể tạo nhiều liên hệ (Contact) muốn 37 Ketnooi.com nghiệp giáo dục Tạo viết - Chọn content -> Article Manager – New + Title: Tiêu đề viết + Section: Lựa chọn chuyên mục + Category: Lựa chọn chuyên mục - Ngoài có chức Published, Front Page phê duyệt hiển thị trang chủ 38 Ketnooi.com nghiệp giáo dục II Đăng viết có sử dụng thẻ HTML5 CSS3: Ví dụ thẻ HTML5: - Ví dụ 1: Thẻ video - Với thẻ video HTML5, người sử dụng xem video mà không cần cài thêm phần hỗ trợ cả!  Ta kết quả: 39 Ketnooi.com nghiệp giáo dục Ví dụ 2: Thẻ :  Ta kết quả: Ví dụ thẻ CSS3: - Ví dụ 1: Thẻ DIV 40 Ketnooi.com nghiệp giáo dục  Ta kết quả: 41 Ketnooi.com nghiệp giáo dục Chương Kết luận hướng phát triển I Kết đạt được: Trang chủ ứng dụng: Trang đăng nhập vào administrator: 42 Ketnooi.com nghiệp giáo dục Trang thêm viết mới: Trang quản lý viết: 43 Ketnooi.com nghiệp giáo dục II Kết luận - Ứng dụng đáp ứng yêu cầu giai đoạn phân tích thiết kế hệ thống - Ứng dụng kết hợp với thẻ HTML5 CSS3 III Hướng phát triển - Mở rộng trang web với quy mô lớn hơn, có nhiều ứng dụng hợp lý - Xây dựng website có khả cập nhật tin tức tự động Như sau thời gian làm việc nghiêm túc giúp đỡ tận tình thầy giáo hướng dẫn Nguyễn Quốc Bảo, em hoàn thành đề tài Quá trình tìm hiểu nghiên cứu thực đề tài giúp em hiểu biết thêm nhiều kiến thức môn Kỹ thuật máy tính Do thời gian thực đề tài có giới hạn kiến thức em hạn hẹp nên tránh khỏi thiếu sót chưa giới thiệu, đưa ưu điểm, nhược điềm tiềm ẩn bên website Chính em mong nhận bảo ban, đóng góp ý kiến thầy Nguyễn Quốc Bảo, giáo viên hướng dẫn trực tiếp thầy cô khoa bạn sinh viên để báo cáo em hoàn thiện có hội phát triển Em xin chân thành cảm ơn! Thái Nguyên, tháng 06 năm 2011 Sinh viên Lê Duy Khánh 44 [...]... 2 CSS: CSS là chữ viết tắt của cụm từ tiếng Anh “Cascading Style Sheet”, là kiểu thiết kế sử dụng nhiều lớp định dạng chồng lên nhau CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996 Cách đơn giản nhất để hiểu CSS là hãy coi nó như một phần mở rộng của HTML để giúp đơn giản hóa và cải tiến việc thiết kế cho các trang web Mỗi khi bạn bắt đầu một Style Sheets, thì bắt buộc mở bằng và. .. Body, và trong đó thuộc tính font là Tahoma đã đè lên thuộc tính font Arial ở lần khai báo trước Tính kết hợp Có thể định nghĩa nhiều CSS cùng một thuộc tính thay vì phải định nghĩa riêng lẻ từng cái một II Những điểm khác và nổi bật của html5 và css3 20 Ketnooi.com vì sự nghiệp giáo dục HTML5 và CSS3 là những công nghệ mới nhất cho ứng dụng việc thiết kế web Các tính năng video của HTML5 – cho phép đơn. .. đơn giản hoá việc thêm một video vào trang Web – đã được nhận được nhiều sự chú ý, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển web Video và hiệu ứng Flash HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight Những lợi ích lớn với tính năng video của HTML5 - Thứ nhất, nó là miễn phí và không... sắc) Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là “ .css , thường người ta hay đặt tên nó là stylesheet .css CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau... Interface) và DOM (Document Object Model – Trong HTML đã được ứng dụng) Một số trình duyệt có hỗ trợ HTML 5: Firefox, Chrome, Safari, Opera Microsoft cũng đã dc công bố là sẽ đưa HTML 5 vào trong sản phẩm mới IE 9 của mình HTML 5 sẽ là ngôn ngữ nền tảng web trong tương lai gần … A HTML5: - Khả năng tương thích: HTML5 vẫn giữ lại các cú pháp truyền thống trước đây, và nếu một vài tính năng mới nào đó của HTML5. .. các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”) Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả Bên cạnh đó, thẻ của HTML5 cũng được xem là một cải tiến lớn Giờ đây với Form 2.0 (một cách gọi... vì sự nghiệp giáo dục - CSS có thể tách riêng phần định dạng ra khỏi nội dung một trang web, do đó nó sẽ rất thuận tiện khi bạn muốn thay đổi giao diện của một trang web - CSS là một sợi chỉ xuyên suốt trong quá trình thiết kế một website bởi vì nó cho phép nhà thiết kế kiểm soát toàn bộ giao diện, kiểu cách và sự sắp đặt của nhiều trang hay nhiều đối trong một lần định nghĩa Để thay đổi tổng thể hay... bạn vào trường chữ ở trên và nhấp vào nút Submit, bạn sẽ gửi thông tin đó vào một trang gọi là "html_form_action.asp" Trang đó sẽ chỉ cho bạn thấy dữ liệu nhận được Hình ảnh trong HTML Với HTML bạn có thể thể hiện hình ảnh trong tài liệu Thẻ Image và thuộc tính src Trong HTML, hình ảnh được xác định bởi thẻ Để hiển thị một hình trên trang web, bạn cần phải sử dụng thuộc tính src Src là chữ viết. .. Thân của bảng Hàng cuối bảng HTML form và trường nhập liệu HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau của người dùng Form Một form là một vùng mà nó bao gồm những thành phần của form Thành phần của form là những thành phần cho phép người dùng có thể điền thông tin như là trường chữ, menu thả xuống, nút radio, và các hộp kiểm vào một form Một form được xác định bởi thẻ ... các khai báo đơn giản hơn và một API mạnh mẽ Một ví dụ dễ thấy là khai báo DOCTYPE: HTML4: HTML5: So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau - Khả năng truy xuất rộng rãi: HTML5 mang