Ngôn ngữ html
Tổng quan về ngôn ngữ HTML
1.1 Các khái niệm cơ bản về Internet và Web
Tiền thân của Internet, ARPANET, được Bộ Quốc phòng Mỹ xây dựng vào năm 1969 nhằm kiểm thử độ tin cậy của mạng và kết nối các cơ sở nghiên cứu phục vụ mục đích quân sự Mặc dù khởi đầu với quy mô nhỏ, ARPANET đã nhanh chóng mở rộng ra khắp nước Mỹ, bao gồm nhiều trường đại học và viện nghiên cứu.
Thành công của ARPANET đã thu hút ngày càng nhiều trường đại học tham gia, nhưng quy mô lớn của mạng gây khó khăn trong quản lý Do đó, ARPANET được chia thành hai phần: MILNET, dành cho quân sự, và ARPANET mới, nhỏ hơn và không thuộc DOD Mặc dù vậy, hai mạng vẫn được kết nối nhờ vào Giao thức Internet (IP), cho phép truyền thông tin giữa các mạng khi cần thiết Tất cả các mạng kết nối với Internet đều sử dụng IP.
Năm 1989, Tim Berners Lee tại CERN đã phát minh ra giao thức World Wide Web (WWW) và ngôn ngữ HTML, đánh dấu một cuộc cách mạng trên Internet Sự phát triển này đã cho phép người dùng truy cập và trao đổi thông tin một cách dễ dàng hơn bao giờ hết.
Trình duyệt Web đầu tiên không hỗ trợ đồ họa và không thể điều khiển bằng chuột, khác xa so với Web hiện đại mà chúng ta biết ngày nay Tuy nhiên, người dùng Internet thời kỳ đó đã nhanh chóng nhận ra sức mạnh tiềm năng của Web, mặc dù nó còn hạn chế về mặt công nghệ.
Web đã phát triển nhanh chóng trong những năm qua, với nhiều cải tiến đáng kể Một trong những bước tiến quan trọng nhất là sự ra đời của các trình duyệt web hỗ trợ chuột và khả năng đa phương tiện, mang lại trải nghiệm người dùng tốt hơn.
ViolaWWW (1992), NCSA Mosaic 1.0 (1993), Netscape Navigator 1.0 (1994), Microsoft Internet Explorer 1.0 (1995), …
Trong thế giới ứng dụng Web, có hai loại trang chính: trang Web tĩnh và trang Web động Trang Web tĩnh là các trang HTML không liên kết với cơ sở dữ liệu, trong khi trang Web động kết nối với cơ sở dữ liệu Điều này có nghĩa là mỗi khi trang Web động được làm mới, dữ liệu hiển thị trên trang sẽ được lấy từ cơ sở dữ liệu.
Để trình bày dữ liệu trên trình duyệt Web, bất kể là trang Web tĩnh hay động, bạn cần phải khai báo các thẻ HTML theo một quy luật nhất định.
Mỗi trang Web được gọi là Webpage, và khi nhiều trang Web liên kết với nhau theo một cấu trúc nhất định do tổ chức hoặc cá nhân tạo ra, chúng được gọi là Website Trang Web đầu tiên mà người dùng thấy khi truy cập vào một Website được gọi là Homepage, cung cấp cái nhìn tổng quan về nội dung của Website đó.
Để cung cấp thông tin cho toàn cầu, một website cần được lưu trữ trên một máy chủ web (Web Server) và đăng ký một tên miền, tức là một địa chỉ URL (Uniform Resource Locator) để người dùng có thể truy cập dễ dàng.
Địa chỉ URL được cấu trúc theo định dạng :////, ví dụ như http://joomlaviet.org/forum/index.php Có hai loại địa chỉ: địa chỉ tuyệt đối và địa chỉ tương đối Địa chỉ tuyệt đối bao gồm đầy đủ các thành phần như giao thức, tên miền, đường dẫn (nếu có) và tên tập tin, trong khi địa chỉ tương đối chỉ chứa đường dẫn và tên tập tin Trình duyệt sẽ tự động xác định địa chỉ tuyệt đối bằng cách bổ sung thông tin còn thiếu từ URL của trang web hiện tại với URL tương đối.
1.2 Cách hoạt động của một trang Web
Cách hoạt động của một trang Web thông qua mô hình sau:
Khi người dùng Internet mở trình duyệt và nhập địa chỉ trang web vào thanh địa chỉ, một yêu cầu dịch vụ HTTP sẽ được gửi đến máy chủ web Sau khi nhận yêu cầu, máy chủ web sẽ tìm kiếm trong hệ thống để xác định vị trí của trang web được yêu cầu.
- Kết quả tìm kiếm sẽ được gửi về cho máy tính mà người sử dụng đã gửi yêu cầu
Khi người dùng truy cập vào một trang Web, trình duyệt trên máy tính sẽ hiển thị nội dung theo thiết kế mà người tạo trang đã dự định.
Các thẻ HTML cơ bản
2.1 Thẻ , chú thích và các ký hiệu đặc biệt
Trong cặp thẻ … chúng ta có thể dùng các thuộc tính định dạng cho toàn nội dung của trang như:
Background=“URL” với URL là đường dẫn đến tập tin hình ảnh dùng làm ảnh nền cho phần nội dung của trang.
Bgcolor= “color” cho phép bạn sử dụng mã màu hệ thập lục phân hoặc từ khóa tên màu bằng tiếng Anh như red (đỏ), blue (xanh da trời), green (xanh lá), white (trắng) để thiết lập màu nền cho trang web.
Mã màu "color" trong HTML được biểu diễn bằng mã màu hệ thập lục phân hoặc các từ khóa màu tiếng Anh như red (đỏ), blue (xanh da trời), green (xanh lá), white (trắng), giúp định dạng màu chữ cho toàn trang Để thêm ghi chú trong mã HTML, sử dụng cặp thẻ để bao quanh nội dung chú thích.
Khi dịch trang web, trình duyệt sẽ bỏ qua nội dung nằm trong cặp thẻ đặc biệt Trong HTML, một số ký tự đặc biệt không thể gõ từ bàn phím, ví dụ như khoảng trắng Nếu chỉ sử dụng một hoặc nhiều ký tự khoảng trắng, kết quả hiển thị trên trình duyệt sẽ giống nhau Để tạo nhiều khoảng trắng liên tục, bạn cần sử dụng mã HTML cho ký hiệu đặc biệt Dưới đây là bảng liệt kê một số ký hiệu đặc biệt thường dùng.
Mã HTML Ý nghĩa Mã HTML Ý nghĩa
Khoảng trắng ™ TM
Mã HTML Ý nghĩa Mã HTML Ý nghĩa
2.2 Thẻ định dạng văn bản
Cặp thẻ này cho phép định dạng đoạn văn thông qua các thuộc tính bên trong, nhưng không tự động thêm ký tự xuống dòng Ví dụ, để canh lề cho đoạn văn, bạn có thể sử dụng thuộc tính align của thẻ .
Giá trị của thuộc tính align có bốn giá trị: center/justify/left/right
Thẻ
được sử dụng để định dạng đoạn văn, tương tự như thẻ Tuy nhiên, khác với thẻ , thẻ
không chỉ cho phép canh chỉnh lề mà còn tự động xuống dòng khi kết thúc đoạn văn bằng thẻ
.
cũng có thuộc tính align với bốn giá trị center/justify/left/right
2.2.3 Các thẻ định dạng tiêu đề
HTML định nghĩa sẵn sáu cấp độ của tiêu đề: … ,
…
,Các thẻ tiêu đề từ h1 đến h6 có kích thước giảm dần, và khi kết thúc thẻ tiêu đề, nội dung sẽ tự động xuống dòng Để hiểu rõ hơn về cách sử dụng các thẻ tiêu đề, chúng ta có thể tham khảo ví dụ dưới đây.
Dùng Notepad soạn thảo ví dụ trên và mở tập tin bằng trình duyệt, ta sẽ được giao diện như sau:
Có rất nhiều thẻ định dạng chữ tùy theo ý định của người thiết kế Web mà vận dụng các thẻ này một cách linh hoạt.
Khi hiển thị nội dung trên Web, phím Enter không có tác dụng để xuống dòng Thay vào đó, bạn nên sử dụng thẻ để tạo khoảng cách giữa các dòng Thẻ này là một thẻ đơn giản và không có thuộc tính nào bên trong.
Để tạo một đường kẻ ngang trên giao diện Web, bạn có thể sử dụng thẻ HTML , một thẻ đơn giản Bạn có thể tùy chỉnh đường kẻ này với các thuộc tính như màu sắc (color), độ rộng (width) nếu không muốn kẻ hết trang, độ dày (size) và căn chỉnh (align) để phù hợp với thiết kế của bạn.
Để hiển thị văn bản in đậm trên Web, bạn sử dụng cặp thẻ … , còn để hiển thị văn bản in nghiêng, bạn sử dụng cặp thẻ … .
Khi muốn hiển thị lên Web phần văn bản có gạch chân, bạn dùng cặp thẻ
Khi muốn nhấn mạnh một nội dung nào đó trên Web, bạn có thể dùng cặp thẻ
… , nội dung được nhấn mạnh sẽ được in đậm như khi dùng thẻ
Khi muốn làm nổi bậc một nội dung nào đó trên Web, bạn có thể dùng cặp thẻ
… , nội dung được làm nổi bậc sẽ được in nghiêng như khi dùng thẻ
Khi muốn hiển thị chữ lớn mà không quan tâm đến kích cỡ chữ, bạn có thể dùng cặp thẻ … .
Tương tự, nếu muốn hiển thị chữ nhỏ mà không quan tâm đến kích cỡ của chữ, bạn có thể dùng cặp thẻ … .
Thẻ … cho phép định dạng phông chữ với thuộc tính face, màu chữ với thuộc tính color và cỡ chữ với thuộc tính size Giá trị thuộc tính face là tên phông, trong khi color có thể là mã màu thập lục phân hoặc từ khóa màu tiếng Anh như red, blue, green, white, v.v Thuộc tính size có giá trị từ 1 đến 7, tăng dần theo kích thước chữ.
Nội dung nằm trong thẻ … sẽ được giữ nguyên định dạng như lúc soạn thảo, cho phép các phím enter và khoảng trắng được hiển thị đúng ý nghĩa của chúng.
Nếu bạn muốn viết chỉ số trên như x² hoặc chỉ số dưới như H₂, hãy sử dụng cặp thẻ … cho chỉ số trên và cặp thẻ … cho chỉ số dưới.
Sau đây là một ví dụ tổng hợp kiến thức về các thẻ định dạng chữ
Nội dung đặt giữa cặp thẻ và sẽ chuyển động như kiểu quảng cáo trên các bảng điện tử Các thuộc tính trong thẻ gồm:
Bgcolor=“color”: tô màu nền cho vùng hiển thị lệnh marquee.
Direction=“left/right/up/down”: chỉ định hướng chuyển động cho chữ Mặc định chữ sẽ chạy sang trái (direction= “left”)
Hành vi "scroll/slide/alternate" thiết lập kiểu chạy chữ với ba tùy chọn "Scroll" cho phép di chuyển tuần tự và là dạng mặc định "Slide" di chuyển cho đến khi gặp biên và sẽ dừng lại Cuối cùng, "Alternate" di chuyển đến biên và sẽ đổi hướng khi chạm vào.
Title=“nội dung”: một đoạn nội dung sẽ được hiển thị khi người dùng dichuyển chuột vào vùng được định dạng marquee.
Scrollmount=“số”: điều chỉnh tốc độ chạy, số càng lớn tốc độ chạy càng nhanh
Scrolldelay=“số”: chỉ định thời gian chờ sau mỗi lần cuộn, số càng lớn tốc độ càng chậm Tính bằng đơn vị là giây
Loop=“số”: chỉ định số lần lặp lại của dòng marquee Mặc định Loop=“-1”, tức là lặp đến khi nào bạn tắt trang Web đó.
Width=“số”: chỉ định độ rộng của vùng chữ chạy Có thể dùng đơn vị pixel hoặc phần trăm.
Height=“số”: chỉ định chiều cao của vùng chữ chạy Có thể dùng đơn vị pixelhoặc phần trăm
2.3 Thẻ định dạng danh sách
Web có khả năng hiển thị văn bản dưới dạng danh sách tương tự như các chương trình soạn thảo văn bản thông thường Ngôn ngữ HTML hỗ trợ cả danh sách không thứ tự và danh sách có thứ tự.
2.3.1 Danh sách không thứ tự
- Đối với dạng danh sách không thứ tự, HTML hỗ trợ các dạng như circle , disc , square
Thông thường, để tạo một menu phân cấp, người ta sẽ kết hợp các danh sách lại với nhau, như trong Ví dụ 1-2-6 Việc xác định mở và đóng đúng thẻ tại vị trí chính xác là rất quan trọng Trong chương tiếp theo, chúng ta sẽ sử dụng CSS để phát triển menu động dạng DropDown và FlyOut dựa trên thẻ danh sách không thứ tự.
Siêu liên kết và khung
Siêu liên kết – Hyperlink – là mối liên kết giữa hai phần tử thông tin trong một siêu văn bản Có 3 loại siêu liên kết:
Liên kết trong (Internal link): liên kết các phần tử thông tin trong cùng một tài liệu.
Liên kết ngoài là một loại liên kết dẫn đến tài liệu khác, có thể là từ cùng một website hoặc từ một website khác.
Liên kết có thể thực thi được cho phép gọi và thực thi một chương trình hoặc đoạn mã lệnh, đồng thời cung cấp khả năng truy xuất đến cơ sở dữ liệu.
3.1.1 Liên kết trong Đôi khi nội dung trang Web quá dài, chiếm nhiều trang màn hình, nhưng các phần nội dung lại có mối liên hệ chặt chẽ Khi đó ta cần đặt các liên kết để khi cần người dùng có thể click chọn phần nội dung họ quan tâm mà không cần phải kéo thanh trượt để tìm kiếm đoạn đó. Để thực hiện điều này, trước tiên cần định nghĩa vị trí đích –nơi sẽ được liên kết đến, ta sử dụng thẻ … theo cú pháp
Chuỗi xác định vị trí đích
Khi đã có các vị trí đích, bạn chỉ cần tạo liên kết để người dùng click vào theo cú pháp:
Từ hiển thị liên kết Để hiểu rõ hơn về cách hoạt động của liên kết trong, mời các bạn tham khảo ví dụ bên dưới
3.1.2 Liên kết ngoài Đối với liên kết ngoài, chúng ta chỉ dùng một cú pháp duy nhất là:
Từ hiển thị liên kết
URL có thể là địa chỉ tương đối hoặc tuyệt đối, dẫn đến một tập tin HTML trong cùng một website hoặc đến một website khác Thuộc tính target quy định cách mở liên kết, với mặc định là mở trên trang hiện tại.
Nếu bạn muốn hiển thị nội dung liên kết trong một khung cụ thể, hãy sử dụng thuộc tính target với tên của khung đó.
Khi cần hiển thị nhiều nội dung và chủ đề khác nhau trên cùng một trang web, giải pháp hiệu quả là sử dụng khung (frame) Bằng cách chia trang thành nhiều khung, mỗi khung có thể chứa thông tin từ một trang HTML riêng biệt Điều này cho phép mỗi khung có thanh cuộn riêng, tách biệt với thanh cuộn của trình duyệt, tạo ra trải nghiệm người dùng linh hoạt hơn.
Trong các trang Web thông thường, phần thân của trang được đặt giữa cặp thẻ
… Trong trường hợp dùng khung, cặp thẻ … sẽ được thay bằng cặp thẻ …
Khung là lựa chọn dễ dàng để tạo ra giao diện website đồng nhất và ổn định Tuy nhiên, mỗi khung có thanh trượt riêng khi nội dung không đủ hiển thị, dẫn đến việc sử dụng khung làm giao diện chính có thể gây rườm rà và mất thẩm mỹ.
Có hai phương pháp chia khung chuẩn trên trang web: chia theo chiều ngang và chia theo chiều dọc Bằng cách kết hợp hai kiểu chia này, người thiết kế có thể tạo ra giao diện phức tạp và hấp dẫn hơn cho người dùng.
Cách chia khung theo chiều ngang có cú pháp như sau:
Trang gồm có bao nhiêu khung sẽ do bạn chỉ định trong thuộc tính rows của
, với chiều cao của mỗi khung được xác định bằng số pixel hoặc bằngphần trăm.
Tên khung được xác định qua thuộc tính name, và đây là một thuộc tính quan trọng giúp chỉ định rằng liên kết ngoài từ trang này sẽ hiển thị nội dung tương ứng trong khung khác.
Mỗi khung được định nghĩa bằng một nằm trong cặp thẻ
… Tại vị trí gọi , bạn muốn hiển thị tập tin nào thì gọi đường dẫn đến file đó trong thuộc tính src
Tương tự, cách chia khung theo chiều dọc có cú pháp như sau:
Trang gồm có bao nhiêu khung sẽ do bạn chỉ định trong thuộc tính cols của
, với chiều rộng của mỗi khung được xác định bằng số pixel hoặc bằng phần trăm.
Tên khung được chỉ định qua thuộc tính name, là yếu tố quan trọng giúp liên kết từ trang này hiển thị nội dung tương ứng trong khung khác.
Mỗi khung được định nghĩa bằng một nằm trong cặp thẻ
… Tại vị trí gọi , bạn muốn hiển thị tập tin nào thì gọi đường dẫn đến tập tin đó trong thuộc tính src
Giả sử, để tạo được giao diện chính cho Website như hình bên dưới:
Để tạo một trang web hiệu quả, chúng ta cần xây dựng các trang riêng biệt như trang banner, trang chứa các liên kết và trang nội dung chính, sau đó tích hợp chúng vào khung của trang giaodienFrameset1.html Trang này sử dụng một frameset tổng hợp với hai dòng: dòng đầu tiên chứa trang frameset1_banner.html và dòng thứ hai là một frameset nhỏ dạng cột, với cột bên trái là trang frameset1_menu.html và cột bên phải là trang frameset1_nd2.html Khi người dùng nhấp vào các liên kết trong menu bên trái, nội dung tương ứng sẽ hiển thị trong khung thứ hai của frameset nhỏ Để thực hiện điều này, chúng ta cần đặt tên cho khung chứa nội dung, ví dụ name="body", và thêm thuộc tính target="body" cho các thẻ trong trang frameset1_menu.html để hiển thị nội dung trong khung đã định danh.
Phần tử được sử dụng để chỉ nội dung thay thế cho frame khi trình duyệt không hỗ trợ frame.
Để hiển thị văn bản từ một trang khác trong khung chứa nội dung của trang hiện tại, bạn cần sử dụng thẻ Nếu trình duyệt không hỗ trợ thẻ này, nội dung bên trong IFRAME sẽ không được hiển thị.
Tại vị trí muốn chèn frame, nhập vào cú pháp:
URL là đường dẫn đến trang mà bạn muốn nhúng vào trang hiện tại Để hiển thị nội dung, bạn cần xác định chiều rộng và chiều cao của khung iframe trên giao diện web Ngoài ra, bạn có thể căn chỉnh khung bằng thuộc tính align.
Bảng biểu trên Web
Khi bạn muốn thiết kế bảng dữ liệu trên trang Wrb, bạn cần phải khai báo thẻ
Sau khi khai báo thẻ này, bạn phải khai báo các thẻ dòng và thẻ cột
hoặc Trong đó, sẽ xác định nội dung bên trong nó là tiêu đề, tức là nội dung mặc định được in đậm và canh giữa
4.2 Các thuộc tính định dạng bảng
Khi thiết lập một bảng biểu trên Web, bạn cần chú ý đến các thuộc tính sau đây:
Các thuộc tính của bảng bao gồm: border, dùng để khởi tạo bảng với đường viền (mặc định là không có đường viền, border="0"); cellpadding, xác định khoảng cách từ nội dung trong ô đến đường viền; cellspacing, chỉ ra khoảng cách giữa các ô trong bảng; align, để canh lề cho bảng (center, left, right); và width, dùng để xác định chiều rộng cho toàn bộ bảng.
Khi thiết kế bảng, bạn chỉ cần chú ý đến chiều rộng, vì chiều cao của bảng phụ thuộc vào dữ liệu Bạn có thể chèn ảnh nền cho bảng và tô màu nền cũng như màu đường viền, nhưng cần lưu ý rằng một số trình duyệt có thể không hỗ trợ hiển thị màu viền Ngoài ra, sử dụng id để nhận diện và phân biệt các bảng dữ liệu trên cùng một trang.
4.2.1 Thuộc tính trong thẻ dòng
Sau đây là một số thuộc tính thường dùng cho dòng:
Thuộc tính Ý nghĩa align Canh lề dữ liệu theo hướng ngang (align=”left/center/ justify/right”) valign Canh lề dữ liệu theo hướng đứng (valign=”top/middle/bottom”).
Khi xác định chiều cao dòng, cần lưu ý rằng chúng ta không quan tâm đến chiều rộng, vì chiều rộng của dòng phụ thuộc vào chiều rộng của nền màu (bgcolor) Ngoài ra, trong dòng chỉ có thể áp dụng màu nền mà không thể sử dụng hình ảnh làm nền.
Tô màu đường viền cho các dòng bảng là một tính năng hữu ích, nhưng cần lưu ý rằng một số trình duyệt có thể không hỗ trợ hiển thị màu viền Để phân biệt giữa các dòng trong bảng, bạn có thể sử dụng thuộc tính id Ngoài ra, các thuộc tính trong các thẻ ô như và cũng rất quan trọng để định dạng và trình bày dữ liệu một cách rõ ràng.
Sau đây là một số thuộc tính thường dùng cho ô / cột:
Align Canh lề dữ liệu trong ô theo hướng ngang (align=”left/center/ justify/right”) valign Canh lề dữ liệu trong ô theo hướng đứng
(valign=”top/middle/bottom”). background Gọi ảnh nền cho ô. bgcolor Tô màu nền cho ô
Để tô màu đường viền cho ô trong bảng, cần lưu ý rằng một số trình duyệt không hỗ trợ thuộc tính bordercolor để hiển thị màu viền Thuộc tính colspan cho phép gộp nhiều cột thành một ô, với giá trị colspan="n" là số cột muốn gộp Tương tự, rowspan được sử dụng để gộp nhiều hàng thành một ô, với giá trị rowspan="n" là số dòng muốn gộp Thuộc tính id giúp nhận dạng và phân biệt giữa các ô khác nhau, trong khi width xác định chiều rộng của ô.
Chiều cao của ô trong bảng thường không được chú trọng, vì chiều cao của ô hoặc cột thường bằng chiều cao của dòng.
4.3 Thiết kế giao diện Web bằng
Thẻ không chỉ được sử dụng để chứa thông tin trên bảng biểu mà còn rất hữu ích trong thiết kế giao diện Đặc biệt, khi trang web có cấu trúc phức tạp, việc sử dụng các thẻ lồng nhau sẽ giúp tổ chức nội dung một cách hiệu quả hơn.
Menu chính
Danh mục 1
Danh mục 2
Danh mục n
Đăng nhập
Tên đăng nhập Mật khẩu
Form và các controls
5.1 Ý nghĩa của form trong trang Web và cách khởi tạo
Web không chỉ đơn thuần là nơi hiển thị thông tin mà còn cho phép người dùng tương tác thông qua các biểu mẫu Một ví dụ điển hình là người dùng có thể nhập thông tin vào biểu mẫu và gửi đến máy chủ để xử lý Trong thiết kế Web tĩnh, thẻ HTML … đóng vai trò quan trọng, cung cấp các biểu mẫu nhập liệu và các thành phần bên trong nó.
Đặt tên cho form là rất quan trọng, vì nếu form không có tên, bạn sẽ không thể sử dụng JavaScript để kiểm tra tính hợp lệ của dữ liệu nhập.
Method: xác định phương thức gửi dữ liệu về máy chủ Nếu phương thức là
Khi sử dụng phương thức POST, thông tin nhập liệu của người dùng sẽ không hiển thị trên thanh địa chỉ của trình duyệt, trong khi phương thức GET cho phép người dùng thấy thông tin này Mặc định, phương thức truyền dữ liệu là GET, nhưng để bảo mật thông tin cá nhân như mật khẩu hay mã PIN, cần sử dụng phương thức POST.
Trong thuộc tính "action", bạn có thể chỉ định địa chỉ trang nhận thông tin người dùng để xử lý khi gửi về máy chủ Nếu không muốn chuyển hướng, bạn có thể để rỗng, cho phép thông tin được xử lý ngay trên trang biểu mẫu hiện tại.
Lưu ý: Nếu khai báo các thành phần điều khiển bên ngoài thẻ …
Nếu không sử dụng thẻ hoặc bỏ qua việc khai báo thẻ này, thông tin mà người dùng nhập sẽ không được gửi về Web Server Điều này dẫn đến việc các dữ liệu người dùng cung cấp sẽ không được xử lý.
5.2 Các thành phần trong form
5.2.1 Thẻ Đây là một thẻ đơn và tùy theo giá trị gọi trong thuộc tính type của thẻ này mà có thể tạo ra nhiều dạng khác nhau:
Text Field là một khung nhập liệu cho phép người dùng nhập một dòng ngắn (type= “text”) Để xác định chiều dài tối đa của chuỗi nhập, bạn sử dụng thuộc tính maxlength, và để tùy chỉnh kích thước khung nhập liệu, bạn dùng thuộc tính size Nếu muốn hiển thị một giá trị mặc định khi trang Web tải, bạn có thể sử dụng thuộc tính value Để thiết lập các giá trị trong Text Field ở dạng chỉ đọc, hãy gọi thuộc tính readonly Bạn cũng có thể đặt một id cho Text Field, nhưng thuộc tính name thường được ưu tiên hơn, miễn là các thành phần của form có tên khác nhau, bạn không cần sử dụng id.
Nếu H1 được gọi thì luôn có màu chỉ lấy phần tên thẻ mà không đỏ có dấu mở thẻ.
Chọn bất kỳ thẻ HTML #test {color:green;}
=>Bất kỳ thẻ nào có id=“test” đều có
#id nào có màu thuộc tính id được chỉ định xanh lá Chỉ thẻ HTML được chỉ định H1#test {color:green;} và thẻ đó có id được chỉ
=> Chỉ những mới có Element#id định định thì mới nhận được định dạng chữ màu xanh lá dạng cùa CSS
Chọn bất kỳ thẻ HTML
.note {color: yellow;} nào có
Any HTML tag with the class "note" will be formatted with a yellow color using CSS Specifically, only tags that have the class "note" will receive an underline text decoration Additionally, all ,
, and tags will share a background color of orange.
Grouping dạng => Tất cả các thẻ ,
, kiểu đối với một nhóm thẻ đều có nền chữ màu cam
Chọn thẻ con theo đúng p strong {color:purple;}
=> Chỉ khi đúng thứ tự
thứ tự nội
Contextual chỉ định mới nhận được dung
thì nội dung định mới có dạng CSS này định dạng màu tím4 Các thuộc tính CSS thông dụng trong thiết kế giao diện ĐỊNH DẠNG THUỘC TÍNH CSS Ý NGHĨA
Văn bản Color:red; Màu chữ (dùng từ tiếng Anh)
Color:#990000; Màu chữ (dùng mã màu)
Background:grey; Màu nền (dùng từ tiếng Anh)
Background:#999999; Màu nền (dùng mã màu)
Word-spacing:n; Khoảng cách giữa các từ, với n là số pixel mà bạn nhập vào
Letter-spacing:n; Khoảng cách giữa các ký tự, với n là số pixel mà bạn nhập vào
Text-align: Canh lề văn bản left/right/center/justify; (trái/phải/giữa/đều 2 bên) Text-transform: capitalize/
Transform Text To Different Cases: Capitalize The First Letter Of Each Word / Convert To Uppercase / Convert To Lowercase; Use Font-Family: Times New Roman, Times, Serif; If The User Lacks The Font, The Browser Will Default To Arial, Helvetica, Sans-Serif; Font: Courier, Courier New, Monospace Will Be Used As The Default Font Family.
The article discusses font sizes, ranging from very small to very large, including specific designations such as xx-small, x-small, small, medium, large, x-large, and xx-large It emphasizes the importance of selecting the appropriate font size for readability and visual impact in various contexts.
Font-size:12pt 9px đến 36px
Font-style: italic Tạo chữ nghiêng
Font-weight: bold Tạo chữ đậm
Text-decoration: underline; Gạch dưới văn bản
List-style: circle; Chấm tròn rỗng
List-style: disc; Chấm tròn đen
List-style: square; Chấm đen vuông
List-style: decimal; Đánh số Ả Rập (1, 2, 3, …)
List-style: lower-alpha; Thứ tự alpha thường (a, b, c, danh sách …)
When formatting lists in your content, you can use various styles to enhance readability and organization For instance, the upper-alpha style employs capital letters (A, B, C, …) for list items, while the upper-roman style uses uppercase Roman numerals (I, II, III, …) Alternatively, the lower-roman style features lowercase Roman numerals (i, ii, iii, …) Additionally, you can incorporate images as bullet points by using the list-style-image property, adding a visual element to your lists.
Màu nền màu/tên màu;
Background image:đường dẫn đến ảnh Ảnh nền nền;
Vị trí đặt ảnh nền:
Nền left/ right/center/top/bottom/ trái/phải/giữa/trên/dưới/kế thừa inherit;
Background-repeat: Cách lặp ảnh: lặp cho cả trang/ repeat/repeat-x/repeat lặp theo chiều ngang / lặp theo y/no-repeat; chiều đứng / không lặp
Background-attachment: Giữ ảnh cuộn /không cuộn theo scroll / fixed; trang của trình duyệt
Border-style: Kiểu đường viền
Border-collapse: collapse; Đường viền lún Định dạng đường Border-bottom-style: Kiểu đường viền phía dưới
Border-left-style: Kiểu đường viền bên trái viền Border-right-style: Kiểu đường viền bên phải
Border-top-style: Kiểu đường viền phía trên Border-left-color: Mà đường viền bên trái
Text-decoration: none Không gạch dưới
A:visited{color: #rrggbb;} Định dạng cho link khi đã được click
A:link{color:#rrggbb;} Định dạng cho link chưa được click
Hypertext link A:active{color:#rrggbb; } Định dạng cho những link đang xem Định dạng khi trỏ lướt qua link
A:hover{color:#rrggbb;} => bạn có thể thay đổi màu, phóng to hoặc thu nhỏ chữ hoặc thêm nhiều hiệu ứng khác nữa Float (theo như nghĩa tiếng Việt là thả trôi) đây là thuộc tính cố định một thành phần web về bên trái hay bên phải không Định vị Float: left/right/none; gian bao quanh nó Mặc định là none Đây là thuộc tính quan trọng để dàn trang trên Web, đặc biệt là định vị cho các Layout dùng Đây là một thuộc tính dịch đối
Left tượng từ bên trái với số pixel chỉ định sau dấu hai chấm của thuộc tính left Đây là một thuộc tính dịch đối
Right tượng từ bên phải với số pixel chỉ định sau dấu hai chấm của thuộc tính right. Đây là một thuộc tính dịch đối
Top tượng từ phía trên với số pixel chỉ định sau dấu hai chấm của thuộc tính top.
Thuộc tính "bottom" trong CSS được sử dụng để định vị các đối tượng từ phía dưới với số pixel chỉ định, và nó thuộc loại định vị tuyệt đối Điều này có nghĩa là các thành phần được định vị sẽ không để lại khoảng trống nào trong tài liệu Thông thường, thuộc tính "position: absolute;" được kết hợp với các thuộc tính "left", "right", "top" và "bottom" để xác định tọa độ chính xác của đối tượng trong trang.
Trong kỹ thuật tạo menu động bằng CSS, việc cố định menu cha với vị trí tuyệt đối là rất quan trọng Thuộc tính này cho phép định vị các thành phần tương đối từ vị trí gốc trong tài liệu, giúp tăng tính linh hoạt và khả năng tương tác của menu.
Position: relative; sẽ để lại khoảng không trong tài liệu
Trong kỹ thuật tạo menu động bằng CSS, việc định vị menu con là rất quan trọng, và nó cần được thiết lập ở chế độ tương đối Điều này có nghĩa là vị trí của menu con sẽ được xác định dựa trên vị trí của menu cha.
Margin là khoảng cách giữa viền của một đối tượng và đối tượng khác hoặc giữa viền của trang Giá trị margin bao gồm bốn thông số tương ứng cho khoảng cách từ trên, phải, dưới, trái Ví dụ, khi sử dụng margin: 2px, nghĩa là khoảng cách giữa các đối tượng được thiết lập là 2 pixel cho tất cả các hướng.
Giá trị 5px 4px 7px biểu thị khoảng cách giữa viền của một đối tượng và viền trang hoặc các đối tượng khác Cụ thể, khoảng cách ở phía trên là 2px, bên phải là 5px, phía dưới là 4px và bên trái là 7px.
Giá trị bên trong margin có thể có hai giá trị, xác định khoảng cách theo cặp: trên và dưới, phải và trái Ví dụ, khi sử dụng margin: 2px 4px, điều này có nghĩa là khoảng cách từ viền của đối tượng đến đối tượng khác hoặc viền trang ở hướng trên và dưới là 2px, trong khi ở hướng phải và trái là 4px.
Khi giá trị bên trong margin chỉ có một giá trị duy nhất, khoảng cách sẽ được xác định theo bộ tứ, tức là khoảng cách giữa đối tượng và các hướng xung quanh đều giống nhau Ví dụ, khi sử dụng cú pháp "margin: 4px;", điều này có nghĩa là khoảng cách từ viền của đối tượng đến viền trang hoặc đối tượng khác là 4px ở cả bốn hướng: trên, phải, dưới và trái.
Các thuộc tính CSS thông dụng trong thiết kế giao diện
Padding đối tượng đó (hay còn gọi là vùng đệm) Các giá trị thuộc tính cũng tương tự như margin.
