Đang tải... (xem toàn văn)
HTML là viết tắt của cụm từ Hypertext Markup Language ( Hiểu nghĩa là "Ngôn ngữ đánh dấu siêu văn bản bằng thẻ" ). - HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử dụng các thẻ html để biểu diễn các trang web. Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. File HTML là 1 text file (file văn bản) có chứa các thẻ (tag). File HTML sẽ có phần đuôi là .html
ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG BÁO CÁO THỰC TẬP CƠ SỞ ĐỀ TÀI TÌM HIỂU HTML VÀ ỨNG DỤNG XÂY DỰNG WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN Giáo viên hướng dẫn: Tiến Sĩ.Bùi Ngọc Tuấn Sinh viên thực hiện: Lê Xuân Thường Lớp: CNTT_12C THÁI NGUYÊN, NĂM 2016 MỤC LỤC DANH MỤC HÌNH ẢNH Hình 1.1: Lịch sử phát triển công nghệ web……………………… 11 Hình 1.2: Định dạng âm thẻ audio……………………………… 21 Hình 1.3: Giao diện trang chủ index…………………………………….25 Hình 1.4: Giao diện tab nhạc trữ tình……………………………………25 Hình 1.5: Giao diện tab nhạc trẻ…………………………………………26 Hình 1.6: Giao diện hát vụn vỡ………………………………………26 Hình 1.7: Giao diện hát nắm lấy tay anh………………………… 27 Hình 1.8: Giao diện hát Giọt nắng bên thềm…………………………27 Hình 1.9: Giao diện hát Nơi tìm về………………………… 28 Hình 1.10: Giao diện hát Nơi có em…………………………… 28 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 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 Đó lý em lựa chọn đề tài “Tìm hiểu HTML5 xây dựng website demo nghe nhạc trực tuyến” CHƯƠNG I CƠ SỞ LÝ THUYẾT 1.1 Tổng quan website Website tập hợp trang web (web pages), gọi trang web, trang mạng) bao gồm văn bản, hình ảnh, video, flash v.v…thường nằm tên miền (domain name) tên miền phụ (subdomain).Trang web lưu trữ ( web hosting) máy chủ web (web server) truy cập thông qua Internet World Wide web Internet Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP Website xây dựng từ tệp tin HTML (website tĩnh) vận hành CMS chạy máy chủ (website động) Website xây dựng nhiều ngôn ngữ lập trình khác (PHP,.NET, Java, Ruby on Rails ) Nhờ có Web nên dù chuyên gia người sử dụng Internet cách dễ dàng Phần mềm để xem Web gọi trình duyệt (Browser) Một số trình duyệt phổ biến Internet Explorer Microsoft tiếp Navigator Netcape 1.1.1 Lịch sử hình thành phát triển world wide web Vào 03/1989, Tim Berners-Lee công bố đời mạng toàn cầu World Wide Web (WWW) dựa công nghệ hypertext Dự án siêu văn toàn cầu cho phép nhà vật lý làm việc với mạng Năm 1991, phòng thí nghiệm vật lý thực nghiệm châu Âu (CERN) Thụy Sĩ công bố trước toàn giới đời WWW Với giúp đỡ ngôn ngữ siêu văn (Hypertext Markup Language - HTML), không gian ảo chứa thông tin, tài liệu, âm thanh, hình ảnh video xuất Trên internet, kết nối sợi cáp nối máy tính với nhau; web, kết nối đường liên kết siêu văn Internet tồn nhờ chương trình liên kết máy tính Mạng toàn cầu - WWW tồn mạng sở (mạng đường truyền chương trình liên kết), mạng toàn cầu làm cho mạng sở trở nên hữu ích hơn, điều người thật quan tâm thông tin máy tính cáp truyền liệu Năm 1991, dự án Tim Berners trở thành thật Hệ thống chia sẻ thông tin, có tên phổ biến World Wide Web, đưa vào sử dụng cộng đồng Vật lý thông qua máy vi tính CERN, nhà vật lý gọi Máy Chủ Web (Web Server-thực chất vào lúc Text Server) Tháng giêng năm 1992, World Wide Web phổ biến rộng rãi đến công chúng qua mạng lưới Internet- mạng máy tính lớn giới Và cuối năm 1992, giới có khỏang 50 máy chủ Web họat động Hầu hết máy đặt trường Đại Học Vào năm 1995, World Wide Web bắt đầu thương mại hóa Các tập đòan lớn AT&T, Digital Equipment Corporation, IBM, MCI, Novell Sun Microsystems thiết lập máy chủ Web để cung cấp thông tin thông tin thị trường cho có máy vi tính kết nối Internet trình duyệt Web Việt Nam thức kết nối internet tháng 12/1997 1.1.2 Phân biệt Web tĩnh, web động Trang Web tĩnh Web tĩnh website sử dụng hoàn toàn ngôn ngữ HTML (có đuôi html htm), sau tải trang HTML từ máy chủ xuống, trình duyệt (IE, Firefox, Opera, ) biên dịch mã hiển thị nội dung trang web, người dùng tương tác với trang web Ví dụ: Người dùng gửi bài, đặt hàng, người quản lý website thêm bớt, sửa xóa thông tin sản phẩm Ưu điểm website tĩnh: Chạy nhanh Ít tốn tài nguyên máy chủ Gần hack - Chi phí tạo thấp Nhược điểm website tĩnh Website tĩnh tương tự tờ báo giấy, tương tác người truy cập website, khách tự thay đổi nội dung website, chi phí sửa nội dung cao Trang web động Web động website có tương tác chiều người truy cập, người quản lý website Ưu điểm website động: - - Khả tương tác với người dùng, Ngôn ngữ lập trình cấp cao cho phép tạo website với nhiều mục đích sử dụng Thỏa mãn nhu cầu truy cập khách hàng Nhược điểm website động: Dữ liệu lớn, cấu trúc phức tạp, chi phí thiết kế cao 1.2 Ngôn ngữ HTML 1.2.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 Lịch sử hình thành trình phát triển HTML: Ai phát minh HTML mục đích ban đầu ngôn ngữ gì? Chúng ta biết Thụy Sĩ, hay xác , Geneva quê hương CERN - Viện Thí Nghiệm Vật Lí Phân Tử Châu Âu (Conseil Européen pour la Recherche Nucléaire, theo tiếng Pháp) đây, “Thí Nghiệm Thiên Nhiên Kỉ” tiến hành Đây kiện gây chấn động, thu hút nhiều mối quan tâm dư luận Rất nhiều người số họ coi thí nghiệm nơi diễn thí nghiệm khởi đầu Khải Huyền(trong Kinh Thánh) Dù không muốn có thêm bình luận câu chuyện này, điều đáng bàn : Geneva , Thụy Sĩ quê hương HTML Tim Berners-Lee cha đẻ HTML (Wikipedia viết rằng: Ngôn ngữ siêu văn “văn hiển thị máy tính thiết bị điện tử khác Ngôn ngữ có dính dáng tới ngôn ngữ khác mà người đọc truy cập lập tức, thường cú nhấp chuột tổ hợp phím tắt ”) Năm 1989, ông nghiên cứu ngôn ngữ HTML giao thức truyền đạt thông tin giới khoa học với thành công ngày Tim tạo 20 thẻ HTML, lấy ý tưởng từ ngôn ngữ SGML, điều kì diệu đáng kinh ngạc chỗ 13 số 20 thẻ hiển thị HTML4 - HTML1: HTML1 không cho phép truyền đạt cấu trúc trang phức tạp, vừa đủ phép tạo trang web đơn giản Vạn khởi đầu nan Phiên tung vào cuối năm 1990 gần năm sau, ngôn ngữ thực ứng dụng Năm 1993 chuẩn HTML trở thành tảng Mosaic- Trình duyệt Internet - HTML2: Nhiều công ty lớn đánh giá không sức mạnh ngôn ngữ siêu văn bản, cuối chuẩn HTML phổ biến rộng rãi Bởi tổ chức đứng hỗ trợ cho phát triển ngôn ngữ HTML, thứ bị ngừng trệ Vào tháng năm 1994, HTML phát hành HTML phiên cải tiến HTML Phiên lần tạo nỗ lực lớn người yêu thích HTML khắp giới Những người đảm nhận nỗ lực khổng lồ ý đến tất đóng góp từ khắp nơi giới cho phiên Trước tình hình này, năm 1994, Tập Đoàn Tài Chính World Wide Web thành lập với người đứng đầu Tim Berners-Lee Năm 1995, thẻ thẻ “bgcolor”(màu nền) hay thẻ “font face”(font chữ?) đưa vào ứng dụng; Tôi đưa ví dụ thẻ nhằm nhấn mạnh trình độ đạt tới chuẩn HTML vào thời điểm tại…chúng ta nói khác biệt phiên phiên năm 1995 lớn HTML - Internet làm cho ngôn ngữ HTML phát triển ứng dụng phát triển HTML W3C chấp nhận phiên cải tiến HTML với thẻ chức Dave Ragget mua phiên thú vị với nhiều thẻ HTML hấp dẫn phiên cải tiến hay Nhưng làm chậm đường truyền trình duyệt nên phiên bị bỏ Phiên HTML 3.2 phiên mạnh sê-ri trước tung ra, duyệt W3C nhà cung cấp trình duyệt chóp bu Netscape Microsoft - HTML4: Người ta dành năm 1997 để phát triển phiên HTML4, bước tiến triển quan trọng phiên cũ HTML4 có công cụ có giá trị mang lại thêm nhiều đất sáng tạo cho dân thiết kế web: CSS Ban đầu CSS không coi quan trọng lắm, đến nay, người ta đánh giá quan trọng không thân HTML Một kiện quan trọng phát triển trình duyệt: Microsoft ứng dụng tất thẻ trình duyệt Internet Explorer người sử dụng yêu thích ,làm lu mờ Netscape Vào tháng năm 1998 HTML4 chứng nhận W3C tương lai trở nên sáng lạn HTML có “đối thủ” gọi XHTML(Extensible HyperText Markup Language- tạm dịch: ngôn ngữ đánh dấu siêu văn mở rộng) từ năm 1998 đến nay, chiến diễn ác liệt , cuối có lợi người sử dụng Internet - HTML5 Vào tháng năm 2008, W3C tung nháp HTML5 thượng phong nghiêng HTML(so với XHTML) Phần lớn biết khả HTML4.01- phiên gần nhất, tính phiên thứ gì? Cá nhân cho phiên lần mang lại nhiều cải tiến nên chuẩn bị tinh thần chờ đợi vài năm để đưa vào hoạt động, tức lúc nhà thiết kế Web làm chủ chức phiên lần Một thẻ làm người sử dụng trở nên mê mệt thẻ có chức cho phép xem videos mà không cần phải cài đặt Flash hay plug-in phụ Các tranh luận tiếp tục chắn chức phiên lần Những thẻ thú vị thẻ cho phép bạn dễ dàng quản lí liệu là: - Thẻ article - Aside - Nav - Header - Footer Tự tên thẻ nói lên chức chúng, thẻ HTML vũ khí cho chuyên viên thiết kế web tương lai Số lượng thẻ phiên lần nhiều phiên trước số thẻ phiên trước bỏ HTML5 thẻ: basefont, big, font, s, strike, small, b, I,… Bản HTML5 có nhiều thẻ có nhiều vấn đề khó để cách chắn việc khác hẳn vào ngày mai Một thực tế chắn là: phiên lần nghiên cứu tập đoàn chuyên viên thiết kế, nên kết bước nhảy vọt đầy ấn tượng dòng chảy phát triển Web, Internet thiết kế Trong chuẩn thực hoàn chỉnh HTML, nhân tố vô quan trọng đóng góp vào vai trò ảnh hưởng HTML 5, là: CSS3 10 - HTML5 có phương thức DOM, tài sản, kiện cho yếu tố - Những phương pháp, tài sản, kiện cho phép bạn thao tác yếu tố sử dụng JavaScript - Có nhiều phương pháp để chơi, tạm dừng, tải, ví dụ có tài sản (như thời gian khối lượng) Ngoài có kiện DOM thông báo cho bạn yếu tố bắt đầu để chơi, tạm dừng, chấm dứt, vv Một số thuộc tính thẻ video: Thuộc tính Giá trị Ví dụ Mô tả audio Muted Audio=”muted” Xác định trạng thái mặc định âm Autoplay Autoplay Autoplay=”autoplay” Xác định trạng thái tự động chạy video Controls Controls Controls=”controls” Hiển thị điều 18 khiển video Height Pixel Height=”100px” Xác định chiều cao video Loop Loop Loop=”loop” Xác định video có lặp lại hay không Poster URL Poster=”image/img_video.gif” Xác định hình đại diện cho video Preload Preload Preload=”preload” Xác định việc tải video tải trang Src URL Src=”video/video.mp4” Xác định đường dẫn video Width Pixel Width=”100px” Xác định chiều rộng video 19 Thẻ audio Trước HTML5, tiêu chuẩn để chơi file âm trang web - Trước HTML5, tập tin âm phải chơi với plug-in (như đèn flash) Tuy nhiên trình duyệt khác hỗ trợ plug-in khác - HTML5 xác định nguyên tố quy định cách tiêu chuẩn để nhúng tập tin âm trang web: yếu tố - Để chơi tập tin âm HTML5 Ví dụ: Your browser does not support the audio element - Thẻ định nghĩa âm thanh, nhạc hay trường audio khác - Cú pháp: Dòng thông báo - Thuộc tính kiểm soát thêm điều khiển âm thanh, giống chơi, tạm dừng, khối lượng Bạn nên chèn nội dung văn cho trình duyệt không hỗ trợ yếu tố Các yếu tố cho phép nhiều yếu tố yếu tố liên kết đến tập tin âm khác nhau.Trình duyệt sử dụng định dạng công nhận Thường dùng kèm với tag để thị nhiều nội dung - Ví dụ: Trình duyệt sử dụng không hỗ trợ tag audio Hiển thị nhiều nội dung với tag Do trình duyệt hỗ trợ định dạng file audio khác nhau, nên cách dùng chạy video cho nhiều trình duyệt hệ điều hành khác 20 Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav Hình 1.2: Định dạng âm thẻ audio Các thuộc tính thẻ audio: Thuộc tính Autoplay Giá trị Autoplay Ví dụ Autoplay=”autoplay” Controls Controls Controls=”controls” Loop Loop Loop=”loop” preload Auto Metadata None Preload=”auto” Src URL Src=”media/autio.mp3 ” Mô tả Âm tự động chạy Hiển thị tính điều khiển Hiển thị tính lặp lại chạy xong đoạn âm Xác định âm có chạy không tải trang Xác định đường dẫn tới file âm Thẻ input HTML5 - Input Type: color Ví dụ: Select your favorite color: - Input Type: date Ví dụ: Birthday: - Input Type: datetime Ví dụ: Birthday (date and time): 21 - Input Type: datetime-local Ví dụ: Birthday(date and time): - Input Type: email Ví dụ: E-mail: - Input Type: month Ví dụ: Birthday (month and year): - Input Type: number Ví dụ: Quantity (between and 5): - Input Type: range Ví dụ: - Input Type: search Ví dụ: Search Google: - Input Type: tel Ví dụ: Telephone: - Input Type: time Ví dụ: Select a time: - Input Type: url Ví dụ: Add your homepage: - Input Type: week Ví dụ: Select a week: Phần tử thẻ form HTML5 - Thẻ định nghĩa danh sách tùy chọn, sử dụng Thành phần nhằm xác định giá trị thành phần có (tương tự - ) Ví dụ: 22 Thẻ xác định cặp trường khóa sử dụng cho Khi submit khóa riêng (private key) lưu trữ client, khóa chung gửi (public key) đến máy chủ Ví dụ: Username: Encryption: Các thuộc tính form: Thuộc tính Autofocu s Challenge Giá trị Ví dụ Mô tả Autofocus Autofocus=”autofocus” Challenge Chanllenge=”chanllenge” Disabled Disable Disable=”disable” Form Tên form Form=”formName” Name Text Name=”nextName” Tập trung vào trang tải cho trường nhập Cho biết giá trị keygen thay đổi submit Không hiển thị nội dung keygen Cho biết keygen thuộc form Xác định tên cho CHƯƠNG 2: THIẾT KẾ WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN 2.1 Giới thiệu demo Sử dụng Notepad++ để làm website 23 Với ý tưởng xây dựng website nghe nhạc trực tuyến đơn giản dễ sử dụng cho người nghe Bài báo cáo cho bạn cách tạo trang web nghe nhạc trực tuyến đơn giản Website báo cáo thuộc loại website tĩnh Về phần giao diện trang chủ gồm danh mục nhạc trẻ, nhạc vàng, nhạc trữ tình, top hot, album, video nhạc danh sách nhạc 2.2 Yêu cầu cài đặt cấu hình máy tính Để sử dụng trang web yêu cầu phần cứng máy tính sau: - Hệ điều hành Win Xp trở lên - Ram 1G - ổ cứng 160G Cài đặt phần mềm soạn thảo HTML Notpad++, Adobe Dreamwear… trình duyệt web Internet Explorer, Chrome, Fifox 2.3 Chi tiết demo website nghe nhạc trực tuyến Giao diện trang chủ gồm có mục: Nhạc trẻ, nhạc vàng, nhạc trữ tình, trung tâm danh sách album, bên phải danh sách nhạc hot, phía danh sách nhạc Dưới số hình ảnh giao diện website demo nghe nhạc trực tuyến Hình 1.3: Giao diện trang chủ 24 Hình 1.4: Giao diện tab Nhạc trữ tình Hình 1.5: Giao diện tab Nhạc Trẻ 25 Giao diện số nhạc hot video hot: Hình 1.6: Giao diện hát vụn vỡ Hình 1.7: Giao diện hát Nắm lấy tay anh 26 Hình 1.8: Giao diện hát Giọt Nắng Bên Thềm Hình 1.9: Giao diện hát Nơi Ấy Con Tìm Về 27 Hình 1.10: Giao diện hát Nơi có em 28 2.4 Kết luận Trong thời gian tìm hiểu, nghiên cứu làm báo cáo cho đề tài mình: “Tìm hiểu HTML5 xây dựng website demo nghe nhạc trực tuyến” Với cố gắng thân, bảo tận tình giáo viên hướng dẫn trao đổi quý báu bạn bè, báo cáo em hoàn thành với nội dung: + Tìm hiểu HTML5 + Sử dụng HTML5 làm website tĩnh Tuy nhiên điều kiện, thời gian trình độ em hạn chế nên không tránh khỏi sai sót, em mong nhận quan tâm giúp đỡ bảo thầy cô với đóng góp xây dựng bạn để em có thêm kinh nghiệm trình học tập Hướng phát triển: Trong tương lai xây dựng nhiều chương trình quản lý hay Xây dựng giao diện chương trình đẹp mắt, trực quan hơn, than thiện với người dung Giúp người sử dụng chương trình cách đơn giản nhanh chóng Kết đạt đề tài Sau thời gian thực em hoàn thiện hệ thống theo tiến độ yêu cầu - đặt - Thiết kế chức website phù hợp với yêu cầu người sử dụng - Giao diện thân thiện, dễ sử dụng - Sử dụng thẻ html5 thay cho thẻ html Hạn chế đề tài 29 Đó số thành phần website cá nhân thư viện ảnh cần nhiều hiệu ứng sinh động chuyên nghiệp hay thư viện video…cần phải có nhiều thời gian để xây dựng thêm cho website hoàn thiện Hướng phát triển đề tài - Thiết kế chức hệ thống, đưa hệ thống website 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ả thay đổi giao diện, nội dung theo thời gian Cải tiến giao diện để người dùng cảm thấy ấn tượng với website Mặc dù cố gắng trình nghiên cứu làm đề tài nhiều hạn chế thời gian trình độ nên báo cáo em không tránh khỏi nhiều thiễu sót, nhiều vấn đề chưa giải hoàn chỉnh Vì em mong nhận ý kiến đóng góp thầy cô bạn để em hoàn thiện phát triển đề tài Một lần em xin chân thành cảm ơn thầy giáo: Bùi Ngọc Tuấn tận tình bảo em hoàn thiện đề tài báo cáo TÀI LIỆU THAM KHẢO [1]: http://www.w3schools.com/html5/html5_intro.asp [2]: http://www.w3.org/TR/html5-diff/#doctype 30 [3]: http://www.w3.org/TR/html5-diff/#character-encoding [4]: http://www.w3.org/TR/SVG11 [5]: http://www.w3.org/TR/MathML2 [6]: http://www.w3schools.com/html5/html5_video.asp [7]: http://www.w3schools.com/html5/html5_audio.asp [8]: http://www.w3schools.com/html5/html5_canvas.asp [9]: http://www.phpguru.org/static/html5-examples [10]: http://www.w3schools.com/html5/tag_form.asp [11]: http://www.w3schools.com/html5/tag_input.asp [12]: http://html5demos.com/contenteditable [13]: http://html5demos.com/drag [14]: http://www.w3schools.com/html5/html5_ref_standardattributes.asp [15]: http://html5demos.com/offline [16]: http://html5demos.com/storage NHẬN XÉT CỦA GIÁO VIÊN 31 32 [...]... http://www.w3schools.com /html5 /html5 _video.asp [7]: http://www.w3schools.com /html5 /html5 _audio.asp [8]: http://www.w3schools.com /html5 /html5 _canvas.asp [9]: http://www.phpguru.org/static /html5 -examples [10]: http://www.w3schools.com /html5 /tag_form.asp [11]: http://www.w3schools.com /html5 /tag_input.asp [12]: http:/ /html5 demos.com/contenteditable [13]: http:/ /html5 demos.com/drag [14]: http://www.w3schools.com /html5 /html5 _ref_standardattributes.asp... nghiên cứu và làm báo cáo cho đề tài của mình: Tìm hiểu HTML5 và xây dựng website demo nghe nhạc trực tuyến Với sự cố gắng của bản thân, sự chỉ bảo tận tình của giáo viên hướng dẫn và sự trao đổi quý báu của bạn bè, bài báo cáo của em được hoàn thành với những nội dung: + Tìm hiểu HTML5 + Sử dụng HTML5 làm một website tĩnh Tuy nhiên vì điều kiện, thời gian và trình độ của em còn hạn chế nên không tránh... Tập trung vào trang đang tải cho trường nhập Cho biết giá trị của keygen thay đổi khi submit Không hiển thị nội dung trong keygen Cho biết keygen thuộc form nào Xác định tên duy nhất cho CHƯƠNG 2: THIẾT KẾ WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN 2.1 Giới thiệu bản demo Sử dụng Notepad++ để làm website 23 Với ý tưởng xây dựng một website nghe nhạc trực tuyến đơn giản dễ sử dụng cho người nghe Bài báo... thảo HTML như Notpad++, Adobe Dreamwear… trình duyệt web như Internet Explorer, Chrome, Fifox 2.3 Chi tiết bản demo website nghe nhạc trực tuyến Giao diện trang chủ gồm có các mục: Nhạc trẻ, nhạc vàng, nhạc trữ tình, trung tâm là danh sách các album, bên phải là danh sách các bản nhạc hot, phía dưới là danh sách các bài nhạc mới Dưới đây là một số hình ảnh về giao diện của website demo nghe nhạc trực tuyến. .. một trang web nghe nhạc trực tuyến đơn giản Website trong bài báo cáo này thuộc loại website tĩnh Về phần giao diện trang chủ gồm danh mục nhạc trẻ, nhạc vàng, nhạc trữ tình, top bài hot, các album, video nhạc và danh sách nhạc mới 2.2 Yêu cầu cài đặt và cấu hình máy tính Để sử dụng được trang web này yêu cầu phần cứng của máy tính như sau: - Hệ điều hành Win Xp trở lên - Ram 1G - ổ cứng 160G Cài đặt... kèm với HTML 5 sẽ cho phép các nhà thiết kế có thể thỏa sức sáng tạo Hi vọng rằng không lâu nữa HTML 5 sẽ thực sự đi vào sử dụng và chúng ta sẽ được nhìn thấy các Websites thiết kế bằng HTML 5 trong thời gian gần đây Hình 1.1: Lịch sử phát triển của công nghệ web 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 < và > nhỏ... duyệt Khi sử dụng HTML5 , các nhà phát triển có thể cung cấp một trải nghiệm ứng dụng hiện đại, trôi chảy qua các nền tảng Khi nói tới HTML5 , nghĩa là đang sử dụng phép tốc ký cho sự đổi mới liên tục Các thẻ mới, các phương thức mới và một framework phát triển chung dựa trên các sự tác động lẫn nhau của HTML5 và hai đối tác của nó, CSS3 và JavaScript Đây là cốt lõi của hiện tượng xử lý ứng dụng lấy máy... dụng - thẻ để thể hiện nhiều dấu giãn cách liền nhau Gõ enter để xuống dòng xem như một dấu cách, để xuống hàng thì phải sử dụng thẻ tương ứng 12 - Có thể viết tên thẻ không phân biệt chữ in thường và in hoa Ví dụ: và là như nhau 1.2.2 Giới thiệu về HTML5 HTML5 là một phiên bản mới của HTML/ XHTML trong đó nó đặc biệt tập trung vào những mong muốn và nhu cầu của các nhà phát triển ứng dụng. .. đúng tiến độ và yêu cầu - đặt ra - Thiết kế các chức năng của website phù hợp với yêu cầu người sử dụng - Giao diện thân thiện, dễ sử dụng - Sử dụng các thẻ html5 thay cho các thẻ html Hạn chế của đề tài 29 Đó là một số thành phần trong website cá nhân như thư viện ảnh cần nhiều hiệu ứng sinh động và chuyên nghiệp hơn nữa hay thư viện video…cần phải có nhiều thời gian hơn để xây dựng thêm cho website được... các nhu cầu web hiện đại và phát triển ứng dụng Một nhóm mới có tên WHATWG (Web Hypertext Application Technology Working Group) nắm quyền phát triển ngôn ngữ này và đã đặt tên nó là các chi tiết kĩ thuật của HTML5 HTML5 tạo ra sự trải nghiệm người dùng hấp dẫn hơn Các trang được thiết kế bằng HTML5 có thể cung cấp một trải nghiệm giống như các ứng dụng của máy tính để bàn HTML5 cũng cung cấp phát triển