Giáo trình nhập môn lập trình website (nghề ứng dụng phần mềm trình độ cao đẳng) trường cao đẳng nghề cần thơ

Một thẻ nội tuyến không bắt đầu trên một dòng mới Một thẻ nội tuyến chỉ chiếm nhiều chiều rộng khi cần thiết Thẻ , , , là thẻ nội tuyến

Một số thẻ nội tuyến:

Thẻ `` thường được sử dụng làm vùng chứa cho các phần tử HTML khác nhằm tổ chức bố cục trang web một cách hiệu quả Mặc dù thẻ `` không yêu cầu thuộc tính bắt buộc nào, nhưng các thuộc tính như style, class và id thường được sử dụng để tùy biến giao diện và phân loại nội dung, giúp tối ưu hóa cấu trúc và khả năng quản lý của trang web.

Khi được sử dụng cùng với CSS, phần tử có thể được sử dụng để tạo kiểu cho các khối nội dung, xây dựng bố cục trang web

Thẻ div thường được sử dụng làm vùng chứa cho các phần tử HTML khác

Thẻ là một vùng chứa nội tuyến dùng để đánh dấu phần của văn bản hoặc tài liệu, giúp dễ dàng định dạng hoặc phân biệt nội dung Mặc dù thẻ không bắt buộc phải dùng thuộc tính, nhưng thường được áp dụng các thuộc tính như style, class và id để tùy biến kiểu dáng và phân loại nội dung Việc sử dụng thẻ một cách hợp lý giúp tối ưu hóa SEO và nâng cao khả năng quản lý nội dung trên trang web của bạn.

Khi được sử dụng cùng với CSS, phần tử có thể được sử dụng để tạo kiểu cho các phần của văn bản

Thẻ span là một vùng chứa

nội tuyến được sử dụng để đánh dấu một phần của văn bản hoặc một phần của tài liệu

Thẻ hình ảnh và thẻ link

Các liên kết được tìm thấy trong hầu hết các trang web Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác

Các liên kết HTML, hay còn gọi là siêu liên kết, cho phép người dùng nhấp vào và chuyển đến một tài liệu khác một cách dễ dàng Khi di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ, thể hiện rõ tính chất tương tác của liên kết Đây là những yếu tố quan trọng giúp tối ưu hóa trải nghiệm người dùng và nâng cao hiệu quả SEO của trang web của bạn.

Lưu ý: Một liên kết không nhất thiết phải là văn bản Một liên kết có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào khác!

Thẻ HTML xác định một siêu liên kết

Thuộc tính quan trọng nhất của thẻ trong HTML là href, giúp chỉ định chính xác điểm đến của liên kết Văn bản liên kết là phần sẽ hiển thị cho người dùng, giúp họ biết rõ nội dung của liên kết trước khi nhấp Khi người dùng nhấp vào văn bản liên kết, họ sẽ được chuyển đến địa chỉ URL đã được chỉ định trong thuộc tính href Đây là cách tạo liên kết hiệu quả, nâng cao trải nghiệm người dùng và optimizing SEO cho website của bạn.

Cùng học HTML

Trang liên kết mặc định sẽ mở trong cửa sổ trình duyệt hiện tại, nhưng bạn có thể thay đổi điều này bằng cách chỉ định thuộc tính target cho liên kết Thuộc tính target quy định rõ nơi mở tài liệu liên kết, giúp kiểm soát trải nghiệm người dùng và tối ưu hóa quá trình truy cập thông tin Việc thiết lập đúng thuộc tính target là yếu tố quan trọng để tùy biến cách nội dung được hiển thị trên trình duyệt, từ đó nâng cao hiệu quả của trang web.

Các target có thể có một trong các giá trị sau:

 _self: Mở tài liệu trong cùng một cửa sổ / tab khi nó được nhấp vào

 _blank: Mở tài liệu trong một cửa sổ hoặc tab mới

 _parent: Mở tài liệu trong khung chính

 _top: Mở tài liệu trong toàn bộ phần thân của cửa sổ

Cùng học

Hình ảnh có thể cải thiện thiết kế và giao diện của một trang web

là thẻ HTML được sử dụng để nhúng một hình ảnh vào một trang web

Trong kỹ thuật web, hình ảnh không được chèn trực tiếp vào trang mà thay vào đó liên kết với các trang web khác Thẻ thường chỉ chứa các thuộc tính cần thiết như nguồn hình ảnh mà không có nội dung bên trong, và không cần phải có thẻ đóng Việc sử dụng thẻ trống giúp tối ưu hóa hiệu suất tải trang và đảm bảo chuẩn HTML.

Các thẻ có hai thuộc tính cần thiết:

 src - Chỉ định đường dẫn đến hình ảnh

 alt - Chỉ định văn bản thay thế cho hình ảnh khi hình ảnh bị lỗi không hiển thị được

→ hinhnen.png nằm cùng thư mục với tập tin html

→ https://ibb.co/qF1NZqY/ là đường dẫn chứa hình ảnh trên internet

Bạn có thể điều chỉnh kích thước hiển thị của hình ảnh theo tỷ lệ phần trăm (%) hoặc đơn vị pixel (px) Việc đặt kích thước hình ảnh có thể thực hiện bằng cách sử dụng các thuộc tính HTML như width và height, hoặc thông qua CSS bằng thuộc tính style để kiểm soát kích thước chính xác và phù hợp với thiết kế trang web của bạn.

Có thể đặt link cho hình ảnh để tạo ra hình ảnh có dạng liên kết, bằng cách đặt thẻ img bên trong thẻ a

Các định dạng hình ảnh chung:

Dưới đây là các loại tệp hình ảnh phổ biến nhất, được hỗ trợ trong tất cả các trình duyệt (Chrome, Edge, Firefox, Safari, Opera):

Loại tập tin Mô tả Đuôi của tập tin

APNG Hình động dùng cho mạng apng

GIF Hình ảnh có thể chuyển động gif

ICO Hình dạng ICON của Microsoft ico, cur

JPEG Hình ảnh thông thường jpg, jpeg, jfif, pjpeg, pjp PNG Hình ảnh chuyên dùng trên mạng png

SVG Hình ảnh dạng vector (dùng trong thiết kế)

Thẻ Table - tạo bảng

Bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành các hàng và cột

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Thẻ `` được sử dụng để tạo bảng trong HTML, giúp trình bày dữ liệu rõ ràng và dễ hiểu Trong bảng HTML, các ô dữ liệu nằm trong các hàng `` và cột ``, tạo thành cấu trúc tổ chức dữ liệu hợp lý Để thêm tiêu đề cho bảng, bạn có thể sử dụng thẻ ``, giúp làm nổi bật các tiêu đề cột hoặc hàng và nâng cao khả năng đọc của bảng.

Ví dụ: Một bảng thông thường trong HTML

Trong HTML, các thẻ và phải được đặt bên trong thẻ , nghĩa là bạn cần tạo hàng trước khi thêm các cột hoặc tiêu đề Thẻ còn gọi là ô, vì chỉ nội dung nằm trong mới hiển thị trên website Điều này đảm bảo cấu trúc bảng rõ ràng và hiển thị đúng cách trên trang web.

Bảng khi được tạo ra mặc định không có đường viền, điều này giúp bảng trông rõ ràng hơn Để hiển thị đường viền cho bảng, bạn cần chỉnh sửa thuộc tính border của thẻ table thành một giá trị cụ thể, thường là 1 Việc này giúp bảng trở nên nổi bật và dễ đọc hơn trong nội dung của bạn.

Ngoài ra, chúng ta có thể dùng thuộc tính style để tùy chỉnh hoặc dùng CSS (sẽ học ở bài sau) để làm cho bảng chúng ta sinh động hơn

Bạn có thể điều chỉnh kích thước của bảng HTML bằng cách sử dụng thuộc tính style với các thuộc tính width hoặc height để xác định chiều rộng và chiều cao của bảng, hàng hoặc cột Để đặt chiều rộng cho bảng, hãy thêm thuộc tính style trực tiếp vào thẻ trong mã HTML Việc tùy chỉnh kích thước này giúp bố cục trang web rõ ràng và phù hợp với nội dung, nâng cao trải nghiệm người dùng.

Để đặt kích thước của một cột cụ thể, hãy thêm thuộc tính style vào một hoặc phía trên cùng

Person 1

Để đặt chiều cao của một hàng cụ thể, hãy thêm thuộc tính style vào trong bảng:

Cellspacing và cellpadding là 2 thuộc tính của table có công dụng điều chỉnh khoảng cách giữa các ô và khoảng cách từ biên của ô đến nội dung bên trong ô, ngoài

2 thuộc tính này, chúng ta có thể sử dụng css để điều chỉnh

4.4 Trộn hàng và trộn cột trong bảng của HTML:

Bảng HTML có thể có các ô kéo dài hoặc trộn lạihàng hoặc cột để hiển thị dữ liệu rõ ràng hơn Để tạo ô mở rộng trên nhiều cột, bạn cần sử dụng thuộc tính colspan trong thẻ ô (td hoặc th) Cú pháp của thuộc tính colspan là colspan="số ô muốn trộn", giúp ô đó kéo dài qua nhiều cột trong bảng Sử dụng đúng thuộc tính colspan sẽ tối ưu hóa việc trình bày dữ liệu trong bảng HTML, nâng cao trải nghiệm người dùng.

Để tạo một ô mở rộng trên nhiều hàng, hãy sử dụng thuộc tính rowspan cho 1 ô

Cú pháp: rowspan = “số ô muốn trộn”

Thẻ danh sách

Danh sách HTML cho phép các nhà phát triển web nhóm một tập hợp các mục có liên quan trong danh sách Có 2 loại

5.1 Danh sách HTML không có thứ tự

Một danh sách không có thứ tự bắt đầu bằng

thẻ Mỗi mục danh sách bắt đầu bằng
• thẻ

  Các mục trong danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định:

  Chọn công cụ đánh dấu mục danh sách cho danh sách không theo thứ tự bằng cách dùng thuộc tính list-style-type, có 4 loại:

  Mô tả disc Vòng tròn đen đặc (mặc định của danh sách) circle Vòng tròn rỗng square Hình vuông đặc none Không hiển thị hình đánh dấu

  5.2 Danh sách HTML có thứ tự:

  Một danh sách có thứ tự bắt đầu bằng

  thẻ Mỗi mục danh sách bắt đầu bằng
  1. thẻ

     Các mục trong danh sách sẽ được đánh dấu bằng số theo mặc định:

     Các thuộc tính type của

     thẻ, xác định các loại điểm đánh dấu mục danh sách, có các loại sau:

     Loại Mô tả type="1" Theo số thứ tự 1, 2, 3 (cái này mặc định) type="A" Theo chữ cái hoa A, B, C

     24 type="a" Theo chữ cái thường a, b, c type="I" Theo chữ số la mã hoa I, II, III type="i" Theo chữ số la mã thường i, ii, iii

     Danh sách mô tả là danh sách các thuật ngữ, với mô tả của từng thuật ngữ

     Các thẻ định nghĩa danh sách mô tả, thẻ định nghĩa thuật ngữ (tên), và các thẻ mô tả từng hạn:

     - black hot drink

     - white cold drink

     Chú ý các danh sách có thể được lồng vào nhau (danh sách bên trong danh sách):

     Thẻ HTML 5

     Xác định một bài báo

     Xác định một số nội dung liên quan lỏng lẻo đến nội dung trang

     Nhúng âm thanh hoặc luồng âm thanh vào tài liệu HTML

     Trình bày văn bản được biệt lập với xung quanh cho mục đích định dạng văn bản hai chiều

     Vùng trong tài liệu được xác định để phục vụ việc vẽ đồ họa nhanh chóng qua tập lệnh như JavaScript Điều này giúp tối ưu hóa quá trình thiết kế và hiển thị các hình ảnh, đồ thị trên trang web một cách linh hoạt, hiệu quả và trực quan hơn.

     Liên kết một phần nội dung với bản dịch có thể đọc được bằng máy

     Đại diện cho một tập hợp các tùy chọn được xác định trước cho một phần tử

     Đại diện cho một tiện ích mà từ đó người dùng có thể nhận được thông tin bổ sung hoặc các điều khiển theo yêu cầu

     Xác định hộp thoại hoặc cửa sổ phụ

     Nhúng ứng dụng bên ngoài, thường là nội dung đa phương tiện như âm thanh hoặc video vào tài liệu HTML

     Xác định chú thích hoặc chú thích cho một hình

     Đại diện cho một hình được minh họa như một phần của tài liệu

     Đại diện cho chân trang của một tài liệu hoặc một phần

     Đại diện cho tiêu đề của một tài liệu hoặc một phần

     Xác định một nhóm các tiêu đề

     Đại diện cho một điều khiển để tạo cặp khóa công khai-riêng tư

     Trình bày nội dung chính hoặc chủ đạo của tài liệu

     Trình bày văn bản được đánh dấu cho mục đích tham khảo

     Xác định danh sách (hoặc menuitem) các lệnh mà người dùng có thể thực hiện

     Đại diện cho một phép đo vô hướng trong một phạm vi đã biết

     Xác định một phần của các liên kết điều hướng

     Biểu diễn kết quả của một phép tính

     Xác định vùng chứa cho nhiều nguồn hình ảnh

     Đại diện cho tiến độ hoàn thành của một nhiệm vụ

     Cung cấp dấu ngoặc đơn dự phòng cho các trình duyệt không hỗ trợ chú thích ruby

     Xác định cách phát âm của ký tự được trình bày trong chú thích ruby

     Đại diện cho một chú thích bằng ruby

     Xác định một phần của tài liệu, chẳng hạn như đầu trang, chân trang, v.v

     Xác định các tài nguyên phương tiện thay thế cho các phần tử phương tiện như hoặc

     Xác định tóm tắt cho phần tử

     Nhúng nội dung SVG (Đồ họa Vectơ có thể mở rộng) vào tài liệu

     Xác định các đoạn HTML cần được ẩn khi trang được tải, nhưng có thể được sao chép và chèn vào tài liệu bằng JavaScript

     Đại diện cho một thời gian và / hoặc ngày tháng

     Xác định các rãnh văn bản cho các phần tử phương tiện như hoặc

     Nhúng nội dung video vào tài liệu HTML

     Đại diện cho cơ hội ngắt dòng

     Bảng trên là danh sách các thẻ HTML5 hiện hành Tùy vào hoàn cảnh mà sử dụng, thông thường các thẻ sau thường dùng để tạo giao diện trang web:

      - Phần đầu của trang web

      - Phần thanh công cụ, thanh điều khiển, menu

      - Phần chứa tài liệu, nọi dung trang

      - Phần chứa các mục văn bản

      - Phần thanh công cụ bên trái hoặc bên phải

      - Phần cuối của trang web.

     HTML Form

     Một biểu mẫu (Form) HTML được sử dụng để thu thập thông tin đầu vào của người dùng Đầu vào của người dùng thường được gửi đến một máy chủ để xử lý

     là thẻ HTML được sử dụng để tạo một biểu mẫu HTML cho đầu vào của người dùng

     7.1 Các thuộc tính của Form:

     - Action: action định nghĩa các hành động được thực hiện khi biểu mẫu được gửi Thông thường, dữ liệu biểu mẫu được gửi đến tệp trên máy chủ khi người dùng nhấp vào nút gửi (submit)

     Trong ví dụ này, dữ liệu biểu mẫu được gửi đến tệp "action_page.php", nơi chứa tập lệnh phía máy chủ để xử lý dữ liệu biểu mẫu một cách hiệu quả.

     First name:

     Last name:

     Các quy định cụ thể liên quan đến thuộc tính của nơi để hiển thị câu trả lời sau khi nộp mẫu đơn bao gồm các giá trị như _blank, _self, _parent và _top Những thuộc tính này xác định cách trình duyệt mở liên kết hoặc nội dung mới, giúp tối ưu trải nghiệm người dùng khi điền và nhận phản hồi từ mẫu đơn trực tuyến Việc hiểu và áp dụng đúng các thuộc tính này là cần thiết để đảm bảo câu trả lời hiển thị chính xác và phù hợp với yêu cầu của hệ thống.

     - Method: các method quy định cụ thể phương thức HTTP được sử dụng khi nộp dữ liệu mẫu

     Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (với method="get") hoặc dưới dạng giao dịch bài đăng HTTP (với method="post")

     Phương thức HTTP mặc định khi gửi dữ liệu biểu mẫu là GET

     Tính năng tự động hoàn thành (Autocomplete) trong trình duyệt có hai trạng thái là bật (on) hoặc tắt (off) Khi bật (on), trình duyệt sẽ tự động điền các giá trị dựa trên những dữ liệu người dùng đã nhập trước đó, giúp tiết kiệm thời gian và tăng hiệu quả khi duyệt web Bật autocomplete là cách tối ưu hóa trải nghiệm người dùng, giúp bạn nhanh chóng truy cập các thông tin đã lưu mà không cần nhập lại từ đầu.

     7.2 Các thẻ của biểu mẫu:

     HTML có thể chứa một hoặc nhiều thẻ biểu mẫu sau:

     Một trong những thẻ biểu mẫu được sử dụng nhiều nhất là thẻ Thẻ

     có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính type

     Ví dụ: Với khai báo như sau

     First name:

     Dưới đây là các kiểu nhập khác nhau mà bạn có thể sử dụng trong HTML:

     Xác định là 1 nút

     Xác định một hộp kiểm

     Được sử dụng cho các lĩnh vực đầu vào mà nên chứa một màu

     Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn màu có thể hiển thị trong trường nhập liệu

     Được sử dụng cho các lĩnh vực đầu vào mà nên chứa một ngày

     Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu

     Chỉ định trường nhập ngày và giờ, không có múi giờ

     Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu

     Được sử dụng cho các lĩnh vực đầu vào mà nên chứa một địa chỉ e-mail

     Tùy thuộc vào sự hỗ trợ của trình duyệt, địa chỉ e-mail có thể được tự động xác nhận khi được gửi

     Một số điện thoại thông minh nhận dạng loại email và thêm ".com" vào bàn phím để khớp với kiểu nhập email

     Xác định trường chọn tệp và nút "Browse" để tải tệp lên

     Nghĩa một trường nhập ẩn (không hiển thị cho người dùng)

     Trường ẩn cho phép các nhà phát triển web bao gồm dữ liệu mà người dùng không thể nhìn thấy hoặc sửa đổi khi gửi biểu mẫu

     Phép người dùng lựa chọn một tháng và năm

     Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu

     Nghĩa một trường nhập số

     Bạn cũng có thể đặt các hạn chế về những con số nào được chấp nhận, các hạn chế thường dùng là: min, max, step, value …

     Xác định một trường mật khẩu

     Xác định một nút radio

     Các nút radio cho phép người dùng CHỈ chọn MỘT trong số các lựa chọn giới hạn

     Điều khiển cho phép người dùng nhập số với giá trị chính xác, giống như thanh trượt, giúp dễ dàng điều chỉnh giá trị trong giao diện người dùng Phạm vi mặc định của điều khiển này là từ 0 đến 100, nhưng bạn có thể tùy chỉnh giới hạn này bằng cách thiết lập các thuộc tính min và max để giới hạn phạm vi giá trị phù hợp Ngoài ra, thuộc tính step cho phép xác định bước nhảy của giá trị, giúp kiểm soát độ chính xác khi người dùng điều chỉnh Việc thiết lập các thuộc tính này giúp kiểm soát chính xác hơn về đầu vào số trong các trang web hoặc ứng dụng của bạn, tối ưu hóa trải nghiệm người dùng.

     Xác định nút đặt lại sẽ đặt lại tất cả các giá trị biểu mẫu về giá trị mặc định của chúng

     Được sử dụng cho các lĩnh vực tìm kiếm (một cư xử lĩnh vực tìm kiếm như một trường văn bản thường)

     Xác định một nút để gửi dữ liệu biểu mẫu đến trình xử lý biểu mẫu

     Trình xử lý biểu mẫu thường là một trang máy chủ có tập lệnh để xử lý dữ liệu đầu vào

     Trình xử lý biểu mẫu được chỉ định trong action thuộc tính của biểu mẫu :

     Được sử dụng cho các lĩnh vực đầu vào mà nên chứa một số điện thoại

     Xác định trường nhập văn bản một dòng

     Phép người dùng lựa chọn một thời gian (không múi giờ)

     Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn thời gian có thể hiển thị trong trường nhập liệu

     Được sử dụng cho các lĩnh vực đầu vào mà nên chứa một địa chỉ URL

     Tùy thuộc vào sự hỗ trợ của trình duyệt, trường url có thể được tự động xác thực khi được gửi

     Một số điện thoại thông minh nhận ra loại url và thêm

     ".com" vào bàn phím để khớp với đầu vào url

     Phép người dùng lựa chọn một tuần và năm

     Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu

     Xác định nhãn cho các phần tử biểu mẫu là một yếu tố quan trọng để nâng cao trải nghiệm người dùng, đặc biệt là đối với những người sử dụng trình đọc màn hình Khi đã được gán nhãn rõ ràng, trình đọc màn hình sẽ tự động đọc to nhãn khi người dùng tập trung vào phần tử đầu vào, giúp họ dễ dàng nhận biết chức năng của các mục trên giao diện Việc này không chỉ cải thiện khả năng truy cập mà còn tối ưu hóa khả năng sử dụng của trang web hoặc ứng dụng dành cho tất cả người dùng, bao gồm cả người dùng có hạn chế về thị giác.

     Việc thiết kế giao diện cần đảm bảo giúp người dùng dễ dàng nhấp vào các vùng nhỏ như nút radio hoặc hộp kiểm, vì các vùng này thường gây khó khăn cho người dùng khi tương tác Các yếu tố như tăng kích thước mục chọn hoặc mở rộng vùng nhấp có thể cải thiện trải nghiệm người dùng, đặc biệt là khi nhấp vào văn bản liên kết Việc tối ưu hóa các vùng nhấp không chỉ nâng cao khả năng truy cập mà còn tăng tính tiện dụng cho mọi đối tượng sử dụng, đặc biệt là những người có hạn chế về khả năng vận động.

     , nó sẽ chuyển nút radio / hộp kiểm

     Xác định danh sách thả xuống (combo box)

     Choose a car:

     Volvo

     Saab

     Fiat

     Audi

     Các thẻ xác định các tùy chọn có thể được người dùng chọn trong danh sách thả xuống Theo quy chuẩn, mặc định mục đầu tiên trong danh sách được chọn tự động Để làm rõ mục đã chọn trước đó, bạn cần thêm thuộc tính selected vào thẻ phù hợp Điều này giúp cải thiện trải nghiệm người dùng và tối ưu hóa khả năng tương tác trên website của bạn.

     Fiat

     Sử dụng size để chỉ định số lượng giá trị hiển thị và multiple để cho phép người dùng chọn nhiều giá trị

     Choose a car:

     Volvo

     Saab

     Fiat

     Audi

     Trong việc xác định trường nhập nhiều dòng (vùng văn bản), tham số rows giúp thiết lập số lượng dòng hiển thị rõ ràng trong vùng nhập liệu, còn cols quy định chiều rộng hữu hình của vùng văn bản đó Việc cấu hình chính xác các thuộc tính này sẽ giúp người dùng dễ dàng nhập và chỉnh sửa nội dung, nâng cao trải nghiệm người dùng Điều này đặc biệt quan trọng trong các ứng dụng yêu cầu nhập liệu đa dòng, như trình soạn thảo hoặc các biểu mẫu phức tạp, nhằm tối ưu hóa khả năng tương tác và thao tác của người dùng.

     Xác định một nút có thể nhấp

     Nhấn vào đây!

     được sử dụng để nhóm dữ liệu liên quan trong một biểu mẫu xác định chú thích cho phần tử

     First name:

     Last name:

     Datalist là thành phần xác định danh sách các tùy chọn sẵn có cho một thẻ Người dùng sẽ thấy danh sách thả xuống các tùy chọn đã được xác định trước khi nhập dữ liệu, giúp tăng tính tiện dụng và chính xác Các danh sách của phải liên kết với qua thuộc tính id để đảm bảo chức năng hoạt động đúng Việc sử dụng giúp người dùng dễ dàng chọn lựa và giảm thiểu lỗi nhập liệu.

     7.2.8 Thẻ output: Đại diện cho kết quả của một phép tính (giống như một phép tính được thực hiện bởi tập lệnh)

     Thiết kế trang web như hình sau:

     Dưới đây là các thành phố nổi bật được liên kết trên thanh sidebar bên trái, giúp người dùng dễ dàng truy cập Các liên kết có thể là các phần # để di chuyển nội bộ hoặc liên kết đến trang khác, tùy thuộc vào mục đích của bài viết Để tạo màu nền phù hợp theo yêu cầu, bạn có thể áp dụng thuộc tính style với cú pháp "background-color: tên màu" nhằm cải thiện trải nghiệm trực quan của trang web Lưu ý, do chưa học CSS, có thể bỏ qua phần này hoặc thực hiện thay đổi thuộc tính style để hoàn thiện giao diện.

     Thiết kế trang Web theo hình sau:

     Chú ý: phần hình ảnh có thể thay bằng hình khác, bài này kiểm tra kiến thức thiết kế web không có mục đích vi phạm bản quyền

     Những trọng tâm cần chú ý trong bài:

     - Sử dụng được các thẻ HTML thông dụng

     - Sử dụng được các thẻ HTML 5

     - Xây dựng được giao diện trang web hoàn chỉnh dùng các thẻ HTML 5

     Yêu cầu về đánh giá kết quả học tập:

     + Về kiến thức: Trình bày được cấu trúc của các HTML thông dụng, một số thẻ HTML thường dùng

     Bạn có khả năng sử dụng thành thạo các thẻ HTML để thiết kế và hoàn thiện giao diện website chuyên nghiệp Ngoài ra, bạn còn thể hiện năng lực tự chủ và trách nhiệm cao, luôn tỉ mỉ, cẩn thận, chính xác và ngăn nắp trong công việc, đảm bảo chất lượng và hiệu quả công việc.

     + Về kiến thức: Được đánh giá bằng 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 các thẻ HTML kết hợp với nhau tạo thành trang web

     + Năng lực tự chủ và trách nhiệm: Tỉ mỉ, cẩn thận, chính xác, ngăn nắp trong công việc

     CSS (Cascading Style Sheets)

     Cách sử dụng

     Cascading Style Sheets (CSS) là công cụ chủ đạo để định dạng và kiểm soát bố cục của trang web một cách chuyên nghiệp Với CSS, người dùng có thể tùy chỉnh màu sắc, phông chữ, kích thước văn bản và khoảng cách giữa các phần tử để tạo ra thiết kế hấp dẫn và dễ đọc Nó còn cho phép định vị, bố trí các phần tử trên trang, chọn hình nền hoặc màu nền phù hợp, cũng như tối ưu hiển thị trên nhiều loại thiết bị và kích thước màn hình khác nhau Sử dụng CSS giúp nâng cao trải nghiệm người dùng và tạo ra trang web hiệu quả hơn về mặt thẩm mỹ và chức năng.

     CSS có thể được thêm vào tài liệu HTML theo 3 cách:

     Nội tuyến - bằng cách sử dụng style bên trong các phần tử HTML

     Nội bộ - bằng cách sử dụng một thẻ trong thẻ ở đầu trang Web

     Bên ngoài - bằng cách sử dụng một phần tử để liên kết đến một tệp CSS bên ngoài

     1.1 Các định nghĩa thường dùng trong CSS:

     Khi sử dụng CSS để định dạng, chúng ta cần khai báo các thuộc tính CSS cho thẻ hoặc class hoặc id

     - Thẻ: chính là thẻ trong HTML

     - Class: Khai báo bằng cách đặt dấu chấm (ví dụ: class), class này có thể dùng áp dụng cho thẻ HTML bằng cách gọi thuộc tính class của thẻ

     Ví dụ:

     Đoạn 1

     Khi dùng class chúng ta có thể kết hợp nhiều class với nhau

     Ví dụ:

     Đoạn 1

     - ID: Khai báo bằng cách đặt dấu # (ví dụ: #id), id này có thể dùng áp dụng cho thẻ HTML bằng cách gọi thuộc tính ID của thẻ

     - Ví dụ:

     Đoạn 1

     Khi dùng ID chúng ta chỉ có thể gọi 1 ID cho 1 thẻ

     CSS nội tuyến là phương pháp áp dụng kiểu duy nhất cho một phần tử HTML cụ thể bằng cách sử dụng thuộc tính style trực tiếp trong thẻ HTML Phương pháp này giúp tùy chỉnh nhanh chóng và chính xác cho từng phần tử, phù hợp khi cần thiết kế đặc biệt cho từng thành phần riêng biệt Tuy nhiên, CSS nội tuyến không phù hợp để quản lý kiểu dáng rộng lớn, vì gây khó khăn trong việc chỉnh sửa và bảo trì mã nguồn.

     Ví dụ sau đặt màu văn bản của phần tử thành màu xanh lam và màu văn bản của

     phần tử thành màu đỏ:

     A Blue Heading

     A red paragraph.

     CSS nội bộ được sử dụng để xác định kiểu cho một trang HTML, giúp kiểm soát cách hiển thị nội dung trên trang web Đây là loại CSS được định nghĩa trực tiếp trong phần của trang HTML, bên trong thẻ Việc sử dụng CSS nội bộ giúp dễ dàng tùy chỉnh giao diện mà không cần liên kết đến tệp CSS bên ngoài Điều này phù hợp cho các dự án nhỏ hoặc các trang có kiểu dáng đặc biệt, cần nhanh chóng chỉnh sửa.

     Ví dụ này hướng dẫn cách đặt màu cho tất cả các phần tử trên trang thành màu xanh lam và các phần tử

     thành màu đỏ, giúp tạo điểm nhấn và phân biệt rõ ràng các tiêu đề và đoạn văn bản Ngoài ra, trang web còn được chỉnh sửa để có nền màu “bột màu”, tạo cảm giác bắt mắt và phù hợp với thiết kế nội dung Đây là cách tối ưu để cải thiện khả năng hiển thị và thẩm mỹ của website bằng cách sử dụng CSS cho các phần tử chính trên trang.

     body {background-color: powderblue;} h1 {color: blue;} p {color: red;}

     Biểu định kiểu bên ngoài giúp xác định kiểu cho nhiều trang HTML cùng lúc, giúp duy trì thiết kế nhất quán Để áp dụng, bạn cần thêm liên kết tới tập tin CSS trong thẻ của mỗi trang HTML bằng cú pháp Phương pháp này tối ưu hóa quản lý kiểu dáng và tăng hiệu quả cho website của bạn.

     File style.css body { background-color: powderblue;

     Các thuộc tính thường dùng

     CSS có rất nhiều thuộc tính đễ định kiểu cho phần hiển thị của HTML, sau đây sẽ trình bày một số thuộc tính thông dụng

     Thuộc tính nền CSS được sử dụng để thêm hiệu ứng nền cho các thẻ

     - Màu nền CSS: Các background-color quy định màu nền của một thẻ

     Ví dụ: body { background-color: lightblue; }

     Trong CSS, bạn có thể chỉ định màu sắc bằng nhiều cách khác nhau như tên màu, giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA và HSLA, giúp linh hoạt trong việc thiết kế giao diện web.

     Ví dụ: body { background-color: #ff0000; }

     Hình nền CSS sử dụng thuộc tính background-image để đặt một hình ảnh cụ thể làm nền cho một thẻ HTML Theo mặc định, hình ảnh này sẽ được lặp lại nhiều lần để phủ kín toàn bộ diện tích của thẻ, giúp trang web trông chuyên nghiệp và hấp dẫn hơn.

     Ví dụ: body { background-image: url("paper.gif"); }

     Trong đó url chính là đường dẫn đến hình như khi dùng thẻ img

     Hình nền lặp là tính năng mặc định khi sử dụng hình nền, giúp ảnh lặp lại để lấp đầy màn hình Tuy nhiên, bạn có thể thay đổi điều này bằng cách sử dụng thuộc tính CSS `background-repeat`, cho phép kiểm soát cách hình nền hiển thị mà không lặp lại, tạo ra các thiết kế phù hợp với ý muốn của bạn.

     Ví dụ: body { background-image: url("gradient_bg.png"); background-repeat: repeat-x;

     Khi lặp chúng ta có các giá trị: repeat-x, repeat-y, no-repeat có nghĩa tuần tự là lặp theo chiều ngang, theo chiều dọc và không lặp

     - Vị trí nền CSS: Các background-position được sử dụng để xác định vị trí của các hình nền

     Ví dụ: body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top;

     Hình nền sẽ được neo tại vị trí bên phải phía trên

     Chú ý: có thể kết hợp các thuộc tính liên quan đến background-image trên 1 dòng

     Ví dụ: body { background: #ffffff url("img_tree.png") no- repeat right top; }

     Thuộc tính đường viền CSS cho phép bạn chỉ định kiểu, chiều rộng và màu sắc của đường viền của một thẻ

     Trong CSS, thuộc tính `border-style` cho phép bạn chọn kiểu đường viền phù hợp với thiết kế của mình Các giá trị phổ biến bao gồm `dotted` để tạo đường viền chấm, `dashed` cho đường viền đứt nét, `solid` để có đường viền vững chắc, `double` cho đường viền kép, `groove` tạo hiệu ứng có rãnh 3D và `ridge` tạo hiệu ứng đường viền 3D phụ thuộc vào màu sắc viền Ngoài ra, các giá trị như `inset` và `outset` giúp tạo hiệu ứng viền 3D ban đầu hoặc in ấn, trong khi `none` loại bỏ hoàn toàn đường viền Thuộc tính `border` cũng hỗ trợ các trạng thái như `hidden` để ẩn đường viền khi cần thiết, giúp tối ưu hóa thiết kế giao diện người dùng.

     CSS border styles allow you to customize the appearance of element borders, with options including dotted, dashed, solid, double, groove, ridge, inset, outset, and none These styles can be applied by assigning classes like "p.dotted" or "p.solid" to HTML elements, enabling precise control over border aesthetics Using different border styles in your web design enhances visual appeal and helps create distinctive layouts Incorporating CSS border styles effectively improves the overall user experience by making your website more engaging and visually organized.

     44 p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

     Chiều rộng đường viền CSS (border-width) quy định độ rộng của bốn biên giới, có thể được thiết lập bằng một kích thước cụ thể như px, pt, cm, hoặc em, hoặc sử dụng các giá trị cố định như mỏng (thin), trung bình (medium) hoặc dày (thick), giúp kiểm soát dễ dàng vẻ ngoài của đường viền cho các phần tử HTML.

     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;

     Các border-width có thể có từ một đến bốn giá trị (biên trên, biên phải, biên dưới, và biên trái):

     Ví dụ: p.three { border-style: solid; border-width: 25px 10px 4px 35px;

     Màu viền CSS (border-color) được sử dụng để thiết lập màu sắc của bốn biên của một thành phần Thuộc tính này có thể có từ một đến bốn giá trị, tương ứng với các cạnh trên, phải, dưới và trái, giúp tùy chỉnh giao diện một cách linh hoạt và nâng cao thẩm mỹ cho website.

     CSS borders allow for individual sides to be styled separately, enabling distinct border styles for each edge of an element You can specify different border properties using properties like border-top-style, border-right-style, border-bottom-style, and border-left-style, providing precise control over the appearance of each side This customization enhances the design flexibility of web elements, allowing for unique visual effects and improved page aesthetics Mastering these individual border properties is essential for creating visually appealing and well-structured layouts in CSS.

     Chú ý: có thể kết hợp các thuộc tính của border trên một dòng

     Ví dụ: p { border: 5px solid red; } p { border-bottom: 6px solid red; }

     Trong CSS, thuộc tính margin được sử dụng để tạo không gian xung quanh các phần tử, giúp điều chỉnh khoảng cách giữa phần tử đó và các phần tử khác trên trang Thuộc tính margin có thể thiết lập cho bốn phía là trên, phải, dưới và trái, mang lại khả năng tùy chỉnh linh hoạt và kiểm soát bố cục trang web hiệu quả Việc hiểu rõ cách sử dụng margin sẽ tối ưu hóa trải nghiệm người dùng và tăng tính thẩm mỹ cho thiết kế web.

     Padding CSS là thuộc tính dùng để tạo khoảng cách giữa nội dung bên trong phần tử và các đường viền, đảm bảo không gian phù hợp xung quanh nội dung Bạn có thể thiết lập padding cho bốn phía của phần tử, gồm trên (top), phải (right), dưới (bottom) và trái (left), giúp tăng tính thẩm mỹ và khả năng trình bày của trang web Sử dụng padding đúng cách là yếu tố quan trọng để cải thiện trải nghiệm người dùng và tối ưu hóa SEO cho website của bạn.

     2.4 Chiều cao và chiều rộng (Height & Width):

     CSS heightvà widththuộc tính được sử dụng để đặt chiều cao và chiều rộng của một thẻ

     Có thể dùng từ khóa min hoặc max phía trước height - width để đặt giá trị tối thiểu và tối đa cho chiều rộng và chiều cao cho 1 thẻ

     Ví dụ: div { height: 200px; width: 50%; background-color: powderblue;

     } div { min-height: 200px; max-width: 50%; background-color: powderblue;

     Văn bản có thể đặt ở bất kỳ đâu, sau đây là các thuộc tính có thể áp dụng lên văn bản

     - Màu sắc (color): định màu sắc cho văn bản, có thể sử dụng màu sắc là tên hoặc các bảng màu như màu nền

     - Canh lề văn bản (text-align): Văn bản có thể được căn trái, căn phải, căn giữa, căn đều (left, right, center, justify)

     Ví dụ: h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } h4 { text-align: justify; }

     Vertical alignment (vertical-align) establishes the vertical positioning of an element relative to its line or surrounding elements It includes values such as top, bottom, baseline, text-top, text-bottom, superscript, and subscript, allowing precise control over content placement within a line of text or container Using vertical-align enhances the visual structure and readability of web pages by aligning elements consistently across different layouts Proper application of vertical-align is essential for achieving professional and visually appealing designs in CSS styling.

     - Kiểu cho văn bản: có các kiểu in đậm, in nghiêng, gạch dưới

     + In đậm: font-weight có giá trị là bold

     + In nghiêng: font-style có giá trị là italic

     + Gạch dưới: text-decoration có giá trị là underline

     - Font chữ (font-family): Các font-family giữ nhiều tên phông chữ như một hệ thống

     Để đảm bảo khả năng tương thích tối đa giữa các trình duyệt và hệ điều hành, bạn cần dự phòng bằng cách bắt đầu với phông chữ yêu thích và kết thúc bằng một họ chung, giúp trình duyệt chọn phông chữ phù hợp khi không có sẵn Tên các phông chữ nên được phân tách bằng dấu phẩy để tăng tính linh hoạt và đảm bảo hiển thị chính xác trên nhiều nền tảng khác nhau.

     .p1 { font-family: "Times New Roman", Times, serif; }

     → font chữ mong muốn là Times New Roman

     Cỡ chữ (font-size) là yếu tố quan trọng trong thiết kế nội dung, với hai dạng phổ biến gồm px (định giá trị tuyệt đối) và em (định giá trị tương đối dựa trên kích thước chữ của trình duyệt) Trong đó, px mang ý nghĩa cố định, giúp kiểm soát chính xác kích thước chữ trên các thiết bị, còn em cho phép linh hoạt hơn, phù hợp với các thiết lập của trình duyệt, mặc định là 16px Việc lựa chọn giữa px và em ảnh hưởng đến khả năng hiển thị và trải nghiệm người dùng, góp phần nâng cao hiệu quả SEO cho website của bạn.

     Ví dụ: h1 { font-size: 40px; } → Cỡ chữ là 40px h2 { font-size: 2.5em; } → Cỡ chữ là 40px vì 40/16=2.5

     Bạn có thể chỉnh sửa liên kết với mọi thuộc tính CSS như màu sắc, font chữ, nền, giúp tạo kiểu phù hợp với thiết kế của trang web Ngoài ra, liên kết còn có các pseudo-classes riêng để kiểm soát trạng thái như a:link cho liên kết bình thường, a:visited cho liên kết đã được người dùng truy cập, a:hover khi người dùng di chuột qua liên kết, và a:active khi liên kết vừa được nhấp vào Việc sử dụng các pseudo-classes này giúp tạo ra trải nghiệm người dùng trực quan và sinh động hơn.

     Trong bài viết này, chúng tôi quy định rõ cách trình bày của từng thẻ HTML, xác định cách các phần tử hiển thị trên trang web Mỗi phần tử HTML đều có giá trị hiển thị mặc định dựa trên loại của nó, giúp đảm bảo cấu trúc hợp lý và trực quan cho nội dung Phần lớn các phần tử đều có giá trị hiển thị là block hoặc inline, điều này ảnh hưởng trực tiếp đến cách sắp xếp và trình bày nội dung trong trang web Hiểu rõ các quy định này là quan trọng để tối ưu hóa khả năng hiển thị và định dạng của trang web theo chuẩn SEO.

     Javascript

     Kiến thức cơ bản về ngôn ngữ javascript

     - Khai báo biến bằng các từ khóa var, let, const

     - Các phép toán sử dụng thông thường +, -, *, /

     - Chuỗi trong javascript để trong dấu “”, có thể kết hợp chuỗi bằng dấu +

     - Javascript có phân biệt chữ hoa và chữ thường

     - Ghi chú có thể dùng // cho 1 dòng hoặc /* */ cho 1 đoạn

     - Khai báo hàm dùng từ khóa function - hàm có thể trả kết quả hoặc không

     Kết hợp javascript với HTML

     - Một trong nhiều phương pháp kết hợp HTML và JavaScript là getElementById()

     Ví dụ: document.getElementById("demo").innerHTML = "Hello JavaScript";

     → tìm một thẻ HTML (với id = "demo") và thay đổi nội dung phần tử (innerHTML) thành "Hello JavaScript"

     JavaScript offers various methods to display data, including innerHTML, document.write(), window.alert(), and console.log() Typically, developers use innerHTML to insert content into HTML elements and window.alert to show alert pop-ups, making data presentation both flexible and interactive.

     Trong HTML, sự kiện đề cập đến những hành động xảy ra với các phần tử HTML, như khi người dùng tương tác hoặc trình duyệt tải trang Khi sử dụng JavaScript trong các trang web HTML, JavaScript có khả năng phản ứng linh hoạt để xử lý các sự kiện này, từ đó tạo ra các trải nghiệm tương tác động Các sự kiện phổ biến thường gặp bao gồm click chuột, di chuột, gửi biểu mẫu, tải trang hoặc nhấn phím, giúp nâng cao tính năng và khả năng tương tác của website.

     Các thuộc tính trong HTML giúp tương tác hiệu quả trên trang web, chẳng hạn như `onchange` dùng để phát hiện khi một phần tử HTML đã được thay đổi, giúp cập nhật dữ liệu một cách linh hoạt Thuộc tính `onclick` kích hoạt khi người dùng nhấp vào một phần tử HTML, tạo ra các trải nghiệm tương tác sống động Trong khi đó, `onmouseover` phản hồi khi người dùng di chuyển chuột qua một phần tử HTML, giúp tăng tính trực quan và hấp dẫn của trang web Tối ưu hóa việc sử dụng các sự kiện này không chỉ nâng cao trải nghiệm người dùng mà còn giúp tối ưu hóa SEO của website.

     53 onmouseout Người dùng di chuyển chuột khỏi phần tử HTML onkeydown Người dùng nhấn một phím bàn phím onload Trình duyệt đã tải xong trang

     The time is?

     Chú ý: javascript có thể thay đổi thuộc tính của 1 thẻ HTML

     Turn on the light

     Đoạn JavaScript này xử lý sự kiện nhấp chuột vào nút, khi đó sẽ tìm thẻ HTML có ID là "myImage" và thay đổi thuộc tính src của thẻ đó để cập nhật hình ảnh hiển thị.

     1 Thiết kế trang web có 1 input dạng text và 1 button Tạo javascript cho sự kiện nút button được click Khi button được click sẽ hiển thị nội dung trong ô text ra hộp cảnh báo alert

     Chú ý: Phần này có dùng window.alert()

     Tạo trang web có 1 máy tính cầm tay, dùng thực hiện các phép toán cơ bản +, -, *, /

     Những trọng tâm cần chú ý trong bài:

     - Áp dụng được javascript vào bên trong 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 về đánh giá kết quả học tập:

     + Về kiến thức: Trình bày được các cách sử dụng javascipt

     + Về kỹ năng: Sử dụng thành thạo các sự kiện cơ bản khác nhau để áp dụng vào các thẻ của trang web

     + Năng lực tự chủ và trách nhiệm: Tỉ mỉ, cẩn thận, chính xác, ngăn nắp trong công việc

     + Về kiến thức: Được đánh giá bằng 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 các thẻ HTML kết hợp với CSS tạo thành trang web

     + Năng lực tự chủ và trách nhiệm: Tỉ mỉ, cẩn thận, chính xác, ngăn nắp trong công việc