lab about java script and html, student will create some page
Download as PPTX, PDF0 likes5 views
lab about JS and html
lab about java script and html, student will create some page
- 1. ĐẠI HỌC BÁCH KHOA HÀ NỘI HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY KHOA TOÁN TIN ng d ng web và eCommerce Ứ ụ $1. HTML & CSS
- 2. ĐẠI HỌC BÁCH KHOA HÀ NỘI HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY KHOA TOÁN TIN Kiến trúc ng d ng web ứ ụ
- 3. Kiến trúc ng d ng web ứ ụ Web • Client-Server • URL Request Response Process `
- 4. Kiến trúc ng d ng web ứ ụ Web application
- 5. Cấ u phầ n công nghệ FrontEnd • HTML5, CSS, JS • Các framework BackEnd • web • app • database
- 6. Web client technology HTML5 CSS JS
- 7. ĐẠI HỌC BÁCH KHOA HÀ NỘI HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY KHOA TOÁN TIN Bài th c t p 1 ự ậ
- 8. M c tiêu ụ Nắ m đ c cấ u trúc và cú pháp c b n c a HTML, CSS ượ ơ ả ủ Phát tri n kỹ năng HTML và CSS ể
- 9. N i dung ộ T o m t tài li u HTML duy nhấ t có th hi n th hai ki u khác nhau, ạ ộ ệ ể ể ị ể đ c xác đ nh b i t p CSS c a tài li u. ượ ị ở ệ ủ ệ • T p HTML c a b n ph i đ c đ t tên là ệ ủ ạ ả ượ ặ index.html và tiêu đề c a tài li u là ủ ệ "Công ngh web-H tên-MSSV ệ ọ ". T o hai t p CSS có tên ạ ệ styleA.css và styleB.css. • Khi t p HTML liên kết v i ệ ớ styleA.css, trang sẽ hi n th theo ki u "Phiên b n A". ể ị ể ả • Khi t p HTML liên kết v i ệ ớ styleB.css, trang sẽ hi n th theo ki u "Phiên b n B". ể ị ể ả
- 10. Yêu cầ u cho Style A • Có sáu h p ộ (box) đ c xếp theo chiề u d c. ượ ọ • Tấ t c các h p đ c căn gi a theo chiề u ngang và cách đề u nhau theo chiề u d c. Khi ả ộ ượ ữ ọ c a s trình duy t thay đ i kích th c, kho ng cách gi a các h p cũng thay đ i ử ổ ệ ổ ướ ả ữ ộ ổ (đ m b o chúng vẫn cách đề u nhau). Tuy nhiên, kích th c c a h p không đ c ả ả ướ ủ ộ ượ thay đ i ho c chồ ng lên nhau. ổ ặ • Mỗi h p có kích th c ộ ướ 100x100 pixel, v i đ ng viề n ớ ườ 1px màu #687291 trên đầ u. Văn b n bên trong đ c căn gi a theo chiề u ngang. ả ượ ữ • Các h p có màu xen kẽ: ộ #dfe1e7 và #eeeff2. • H p cuối cùng có màu ộ #687291, viề n đen 4px, và văn b n đ c căn gi a theo chiề u ả ượ ữ d c. ọ • Font ch s d ng là ữ ử ụ Tahoma, c ch ỡ ữ 40 pixel
- 11. Yêu cầ u cho style B • Có năm h p ộ đ c xếp theo chiề u ngang góc trên bên trái. ượ ở • Các h p ộ không t đ ng xuống dòng ự ộ khi c a s trình duy t thu nh (t c là h p A đến E ph i luôn ử ổ ệ ỏ ứ ộ ả nằ m trên cùng m t dòng, ngay c khi c a s nh l i). ộ ả ử ổ ỏ ạ • H p cuối cùng nằ m góc d i bên ph i c a c a s trình duy t và ộ ở ướ ả ủ ử ổ ệ vẫn gi nguyên v trí ữ ị ngay c khi ả thay đ i kích th c c a s . ổ ướ ử ổ • Mỗi h p có kích th c ộ ướ 100x150 pixel, màu nề n #eeeff2, và có đ ng viề n chấ m bi ườ 10px màu #D0D0FF bên trái. ở • Kho ng cách gi a các h p là ả ữ ộ 10 pixel. • Khi di chu t qua h p, con tr chu t sẽ chuy n thành hình ộ ộ ỏ ộ ể bàn tay, màu h p chuy n sang ộ ể vàng, và màu ch chuy n thành ữ ể goldenrod. • Font ch s d ng là ữ ử ụ Tahoma, c ch ỡ ữ 40 pixel. Kho ng cách gi a ch và mép h p là ả ữ ữ ộ 10 pixel. Nếu có thuộc tính nào không được đề cập trong yêu cầu trên (ví dụ: khoảng cách giữa các phần tử trong Style B và mép cửa sổ trình duyệt), có thể chọn một giá trị hợp lý.
Editor's Notes
- #5: Client HTML5, CSS, jscript, Framework: react, angular, vue, ... Web server IIS, Apache, PHP, Application server - xử lý nghiệp vụ .Net, Java, PHP, Python, ... DB / storage - lưu trữ CSDL quan hệ, file server Cấu phần khác
- #8: Mục tiêu Hiểu cấu trúc và cú pháp cơ bản của HTML và CSS. Phát triển các kỹ năng tạo và định dạng trang web bằng HTML và CSS. Nội dung: thực hành về HTML và CSS Kết quả: các file HTML và CSS các file có ghi chú: + họ tên sinh viên + mã sinh viên + lớp nhiều file: có thể nén (zip) lại để nộp Các bước hoàn thành bài tập Tạo tệp HTML Tiêu đề cho trang web của bạn. Tạo tệp CSS Kiểu cho ít nhất hai thành phần HTML khác nhau (thay đổi màu sắc, phông chữ hoặc kích thước).
- #10: body { font-family: Tahoma, sans-serif; text-align: center; } .container { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; height: 100vh; } .box { width: 100px; height: 100px; line-height: 100px; font-size: 40px; text-align: center; border-top: 1px solid #687291; } .box:nth-child(odd) { background-color: #dfe1e7; } .box:nth-child(even) { background-color: #eeeff2; } .box:last-child { background-color: #687291; border: 4px solid black; color: white; }
- #11: body { font-family: Tahoma, sans-serif; margin: 0; padding: 10px; } .container { display: flex; position: relative; } .box { width: 100px; height: 150px; font-size: 40px; line-height: 150px; text-align: center; background-color: #eeeff2; border-left: 10px dotted #D0D0FF; margin-right: 10px; padding-left: 10px; } .box:hover { background-color: yellow; color: goldenrod; cursor: pointer; } .box:last-child { position: absolute; bottom: 10px; right: 10px; }