Đoạn cho kết là: Đoạn Đoạn - Về quy tắc thẻ lồng lẫn phải đảm bảo cú pháp thẻ Khung sườn trang web: Page Title My First Heading
My first paragraph.
Trong đó: : để khai báo trang web có sử dụng thẻ HTML : để khai báo thành phần dùng cho trang web Chú ý: Muốn hiển thị tiếng Việt trang web cần khai báo thẻ meta bên thẻ head Cú pháp sau: - Bên ngoài: Biểu định kiểu bên sử dụng để xác định kiểu cho nhiều trang HTML Để sử dụng biểu định kiểu bên ngoài, thêm liên kết đến biểu định kiểu trang HTML Cú pháp link: Ví dụ: File HTML This is a headingThis is a paragraph.
File style.css body { background-color: powderblue; } h1 { color: blue; } p { color: red; } Các thuộc tính thường dùng: CSS có nhiều thuộc tính đễ định kiểu cho phần hiển thị HTML, sau trình bày số thuộc tính thơng dụng 41 2.1 CSS Backgrounds: Thuộc tính CSS sử dụng để thêm hiệu ứng cho thẻ - Màu CSS: Các background-color quy định màu thẻ Ví dụ: body { background-color: lightblue; } Chú ý: Trong CSS, màu định cách sử dụng tên màu, giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA giá trị HSLA Ví dụ: body { background-color: #ff0000; } - Hình CSS: Các background-image quy định cụ thể hình ảnh để sử dụng tảng thẻ Theo mặc định, hình ảnh lặp lại để bao phủ tồn thẻ Ví dụ: body { background-image: url("paper.gif"); } Trong url đường dẫn đến dùng thẻ img - Hình lặp: nói trên, dùng hình mặc định hình lặp lại để lấp đầy hình Tuy nhiên, thay đổi điều cách dùng thuộc tính background-repeat Ví dụ: body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } Khi lặp có giá trị: repeat-x, repeat-y, no-repeat có nghĩa lặp theo chiều ngang, theo chiều dọc không lặp - Vị trí CSS: Các background-position sử dụng để xác định vị trí hình Ví dụ: body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } Hình neo vị trí bên phải phía Chú ý: kết hợp thuộc tính liên quan đến background-image dịng Ví dụ: body { background: #ffffff url("img_tree.png") norepeat right top; } 2.2 CSS Borders: 42 Thuộc tính đường viền CSS cho phép bạn định kiểu, chiều rộng màu sắc đường viền thẻ - Kiểu đường viền (border-style) dotted Xác định đường viền chấm dashed Xác định đường viền đứt nét solid Xác định đường viền vững double Xác định đường viền kép groove Xác định đường viền có rãnh 3D Hiệu ứng phụ thuộc vào giá trị màu viền ridge Xác định đường viền 3D Hiệu ứng phụ thuộc vào giá trị màu viền inset Xác định đường viền in 3D Hiệu ứng phụ thuộc vào giá trị màu viền outset Xác định đường viền ban đầu 3D Hiệu ứng phụ thuộc vào giá trị màu viền none Xác định khơng có đường viền hidden Xác định đường viền ẩn Ví dụ: p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} 43 p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} - Chiều rộng đường viền CSS (border-width): Các border-widthtài sản quy định độ rộng bốn biên giới Chiều rộng đặt thành kích thước cụ thể (tính px, pt, cm, em, v.v.) cách sử dụng ba giá trị xác định trước: mỏng, trung bình dày (thin, medium, thick) Ví dụ: p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; 44 } Các border-width có từ đến bốn giá trị (biên trên, biên phải, biên dưới, biên trái): Ví dụ: p.three { border-style: solid; border-width: 25px 10px 4px 35px; } - Màu viền CSS (border-color): sử dụng để thiết lập màu sắc bốn biên, border-color có từ đến bốn giá trị (trên, phải, dưới, trái) - Đường viền CSS - mặt riêng lẻ: định đường viền khác cho bên (top, right, bottom, left) ta có border-top-style, border-right-style, border-bottomstyle, border-left-style Chú ý: kết hợp thuộc tính border dịng Ví dụ: p { border: 5px solid red; } p { border-bottom: 6px solid red; } 2.3 Margin Padding: - Margin CSS: sử dụng để tạo không gian xung quanh phần tử, bên ngồi đường viền xác định Có thể có bên đường viền top, right, bottom, left - Padding CSS: sử dụng để tạo không gian xung quanh nội dung phần tử, bên đường viền xác định Có thể có bên đường viền top, right, bottom, left 45 2.4 Chiều cao chiều rộng (Height & Width): CSS heightvà widththuộc tính sử dụng để đặt chiều cao chiều rộng thẻ Có thể dùng từ khóa max phía trước height - width để đặt giá trị tối thiểu tối đa cho chiều rộng chiều cao cho thẻ Ví dụ: div { height: 200px; width: 50%; background-color: powderblue; } div { min-height: 200px; max-width: 50%; background-color: powderblue; } 2.5 Văn bản: Văn đặt đâu, sau thuộc tính áp dụng lên văn - Màu sắc (color): định màu sắc cho văn bản, sử dụng màu sắc tên bảng màu màu - Canh lề văn (text-align): Văn trái, phải, giữa, (left, right, center, justify) Ví dụ: h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } h4 { text-align: justify; } - Canh lề theo chiều dọc (vertical-align): thiết lập liên kết dọc thẻ, có giá trị dịng, văn bản, văn bản, mức, mức (baseline, texttop, text-bottom, super, sub) - Kiểu cho văn bản: có kiểu in đậm, in nghiêng, gạch + In đậm: font-weight có giá trị bold + In nghiêng: font-style có giá trị italic 46 + Gạch dưới: text-decoration có giá trị underline - Font chữ (font-family): Các font-family giữ nhiều tên phông chữ hệ thống "dự phòng", để đảm bảo khả tương thích tối đa trình duyệt / hệ điều hành Bắt đầu với phông chữ bạn muốn kết thúc họ chung (để cho phép trình duyệt chọn phông chữ tương tự họ chung, khơng có sẵn phơng chữ khác) Tên phơng chữ nên phân tách dấu phẩy Ví dụ: p1 { font-family: "Times New Roman", Times, serif; } → font chữ mong muốn Times New Roman - Cỡ chữ (font-size): có dạng thơng dụng px (định giá trị tuyệt đối) em (định giá trị tương đối - tùy theo kích thước chữ trình duyệt (mặc định trình duyệt 16px) Ví dụ: h1 { font-size: 40px; } → Cỡ chữ 40px h2 { font-size: 2.5em; } → Cỡ chữ 40px 40/16=2.5 2.6 Liên kết (thẻ a): Liên kết chỉnh với CSS (ví dụ color, font-family, background, vv) Ngồi ra, liên kết có số thuộc tính riêng a:link liên kết bình thường, không kiểm tra a:visited liên kết mà người dùng truy cập a:hover liên kết người dùng di chuột qua a:active liên kết nhấp vào 2.7 Hiển thị (Display): Display quy định cụ thể làm thẻ hiển thị Mọi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử Giá trị hiển thị mặc định cho hầu hết phần tử block inline Một phần tử cấp khối (block) ln bắt đầu dịng chiếm tồn chiều rộng có sẵn (trải dài sang trái phải hết mức có thể) Một phần tử nội tuyến (inline) khơng bắt đầu dịng chiếm nhiều chiều rộng cần thiết Display có giá trị là: block, inline, none Ví dụ: a { display: block; } Chú ý: với display none, thẻ bị ẩn không ảnh hưởng bố cục, sử dụng thuộc tính visibility hidden, thẻ ẩn ảnh hưởng bố cục 2.8 Vị trí (position): Quy định cụ thể loại phương pháp định vị sử dụng cho thẻ tĩnh, tương đối, cố định, tuyệt đối hay dính (static, relative, fixed, absolute, sticky) 47 - static: Các thẻ định vị tĩnh không bị ảnh hưởng thuộc tính top, bottom, left right Một phần tử với position: static; không định vị theo cách đặc biệt nào; ln định vị theo dịng bình thường trang: - relative: Được định vị so với vị trí bình thường Đặt thuộc tính top, right, bottom left phần tử có vị trí tương đối khiến bị điều chỉnh khỏi vị trí bình thường Các nội dung khác không điều chỉnh để phù hợp với khoảng trống phần tử để lại - fixed: Được định vị so với chế độ xem, có nghĩa ln vị trí trang cuộn Các thuộc tính top, right, bottom left sử dụng để định vị thẻ - absolute: Được định vị tương thẻ định vị gần Nếu khơng có thẻ khác lấy body làm thẻ - sticky: Được định vị dựa vị trí cuộn người dùng Một phần tử cố định chuyển đổi relative fixed, tùy thuộc vào vị trí cuộn Nó định vị tương đối vị trí bù định đáp ứng khung nhìn - sau "dính" vào vị trí (như vị trí: fixed) 2.9 Float: Thuộc tính CSS định cách phần tử Các float sử dụng để định vị định dạng nội dung ví dụ hình ảnh để lại cho văn container Các float có giá trị sau: left Phần tử bên trái vùng chứa right Phần tử bên phải vùng chứa none Phần tử khơng (sẽ hiển thị nơi xuất văn bản) Đây mặc định inherit Phần tử kế thừa giá trị float phần tử cha Ví dụ: float hình ảnh right 48 Bài tập: Thiết kế trang web hình sau: Chú ý: Phần hình ảnh thay hình khác, nội dung copy - không quan trọng, tập trung vào phần bố cục Truy cập đường link: https://baocantho.com.vn/, tiến hành thực tạo menu giống hình bên Chú ý: Các thơng tin thay đổi, chủ yếu tạo menu 49 Bài tập nâng cao: Tham khảo trang web Trường Cao Đẳng Nghề Cần Thơ, thực thiết kế trang Web hoàn chỉnh giống Chú ý: phần hiệu ứng bỏ qua Những trọng tâm cần ý bài: - Áp dụng CSS vào bên giao diện trang web - Sử dụng thành thạo thuộc tính khác để trình bày giao diện trang web - Hoàn thành giao diện trang web hoàn chỉnh Yêu cầu đánh giá kết học tập: Nội dung: + Về kiến thức: Trình bày cách sử dụng CSS + Về kỹ năng: Sử dụng thuộc tính CSS để thiết kế giao diện Website hoàn chỉnh + Năng lực tự chủ trách nhiệm: Tỉ mỉ, cẩn thận, xác, ngăn nắp công việc Phương pháp: + Về kiến thức: Được đánh giá hình thức kiểm tra viết, trắc nghiệm, vấn đáp + Về kỹ năng: Đánh giá kỹ sử dụng thẻ HTML kết hợp với CSS tạo thành trang web + Năng lực tự chủ trách nhiệm: Tỉ mỉ, cẩn thận, xác, ngăn nắp cơng việc 50 BÀI 4: Javascript Mã bài: MĐ 12 - 04 Giới thiệu: Bài học giới thiệu javascript cách sử dụng javascript trang web Mục tiêu bài: Áp dụng javascript vào bên giao diện trang web Sử dụng thành thạo javascript để tạo hiệu ứng cho trang web Nội dung chính: Cách sử dụng: Trong HTML, mã JavaScript chèn vào thẻ và Có thể đặt số lượng script tài liệu HTML Tập lệnh đặt hoặc phần trang HTML hai Ví dụ: document.getElementById("demo").innerHTML = "My First JavaScript"; function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } Demo JavaScript in HeadA Paragraph
51 Try it Chúng ta tạo tập tin bên nhúng vào trang web css sau: Trong đó, myScript.js tập tin javascript Kiến thức ngôn ngữ javascript: - Khai báo biến từ khóa var, let, const - Dấu = để gán trị - Các phép tốn sử dụng thơng thường +, -, *, / - Chuỗi javascript để dấu “”, kết hợp chuỗi dấu + - Javascript có phân biệt chữ hoa chữ thường - Ghi dùng // cho dịng /* */ cho đoạn - Khai báo hàm dùng từ khóa function - hàm trả kết không Kết hợp javascript với HTML: - Một nhiều phương pháp kết hợp HTML JavaScript getElementById() Ví dụ: document.getElementById("demo").innerHTML = "Hello JavaScript"; → tìm thẻ HTML (với id = "demo") thay đổi nội dung phần tử (innerHTML) thành "Hello JavaScript" - JavaScript "hiển thị" liệu theo cách khác nhau: innerHTML, document.write(), window.alert(), console.log() Thông thường dùng innerHTML (viết nội dung vào thẻ HTML) window.alert (hiện hộp thoại cảnh báo) - Sự kiện HTML "những thứ" xảy với phần tử HTML Khi JavaScript sử dụng trang HTML, JavaScript "phản ứng" kiện Các kiện thường gặp là: Sự kiện Sự miêu tả onchange Một phần tử HTML thay đổi onclick Người dùng nhấp vào phần tử HTML onmouseover Người dùng di chuyển chuột qua phần tử HTML 52 onmouseout Người dùng di chuyển chuột khỏi phần tử HTML onkeydown Người dùng nhấn phím bàn phím onload Trình duyệt tải xong trang Ví dụ: The time is? Chú ý: javascript thay đổi thuộc tính thẻ HTML Ví dụ: Turn on the light → Đoạn javascript có nghĩa là: kiện click button gọi, kiếm thẻ HTML có ID myImage tiến hành đổi thuộc tính src thẻ Bài tập: Thiết kế trang web có input dạng text button Tạo javascript cho kiện nút button click Khi button click hiển thị nội dung ô text hộp cảnh báo alert Chú ý: Phần có dùng window.alert() Bài tập nâng cao: Tạo trang web có máy tính cầm tay, dùng thực phép toán +, -, *, / Những trọng tâm cần ý bài: - Áp dụng javascript vào bên giao diện trang web - Sử dụng thành thạo javascript để tạo hiệu ứng cho trang web Yêu cầu đánh giá kết học tập: Nội dung: + Về kiến thức: Trình bày cách sử dụng javascipt + Về kỹ năng: Sử dụng thành thạo kiện khác để áp dụng vào thẻ trang web + Năng lực tự chủ trách nhiệm: Tỉ mỉ, cẩn thận, xác, ngăn nắp cơng việc Phương pháp: + Về kiến thức: Được đánh giá hình thức kiểm tra viết, trắc nghiệm, vấn đáp 53 + Về kỹ năng: Đánh giá kỹ sử dụng thẻ HTML kết hợp với CSS tạo thành trang web + Năng lực tự chủ trách nhiệm: Tỉ mỉ, cẩn thận, xác, ngăn nắp cơng việc 54 TÀI LIỆU THAM KHẢO [1] Website: https://www.w3schools.com/html/default.asp [2] Kỹ sư Phạm Quang Huy , Giáo trình thiết kế Web làm hoạt hình, NXB Giao thơng vận tải, năm 2003 55