Thẻ block trong HTML
Tiếp nối các bài học trước, ngày hôm nay chúng ta sẽ cùng nhau tìm hiểu các khái niệm cơ bản trong HTML để làm nền tảng trước khi bước sang phần CSS của Series Xây dựng và thiết kế Website cho người mới bắt đầu. Trong bài học này chúng ta sẽ cùng nhau tìm hiểu cách comment trong HTML, các thuộc tính ID, class,... Nào bắt đầu thôi! Show 1. Cách viết ghi chú cho đoạn code của bạnGhi chú hay comment là một phần không thể thiếu của bất kì dự án nào đặc biệt là những dự án lớn thì comment lại càng quan trọng. Ghi chú giúp các lập trình viên hiểu rõ ý nghĩa của đoạn code và từ đó giúp các lập trình viên về sau có thể bảo dưỡng, nâng cấp một cách dễ dàng. Vậy cách ghi chú trong HTML thế nào? Để ghi chú trong HTML chúng ta viết nội dung ghi chú như sau: Tất nhiên nội dung trong phần ghi chú sẽ không hiển thị trên trình duyệt mà nó chỉ hiển thị ở mã nguồn của trang. 2. Thuộc tính IDThuộc tính id dùng để đặt tên cho một phần tử trong HTML, mỗi thuộc tính id là duy nhất trong một file HTML nào đó. Quy tắc đặt tên: Giá trị của ID bao gồm các ký tự chữ cái, số, gạch dưới (_), gạch nối (-); có phân biệt chữ hoa và chữ thường. Trong giá trị id phải chứa ít nhất một ký tự và không có khoảng trắng. Không nên bắt đầu tên id bằng số hay kí tự đặc biệt nào khác. Ví dụ: Thẻ Form HTML Kết quả: Trong đoạn mã ở trên đoạn văn có thuộc tính 3. Thuộc tính classThuộc tính class dùng để đặt tên cho các phần tử trong html, mỗi thuộc tính class có thể chỉ định cho nhiều phần tử HTML giúp các phần tử HTML đó có cùng định dạng khi dùng CSS, JavaScript... Class cũng có quy tắc đặt tên giống id đó là: Tên class bao gồm các ký tự chữ cái, số, gạch dưới (_), gạch nối (-); có phân biệt chữ hoa và chữ thường. Trong giá trị id phải chứa ít nhất một ký tự và không có khoảng trắng. Không nên bắt đầu tên id bằng số hay kí tự đặc biệt nào khác. Ví dụ: Thẻ Form HTML Khác với id, mọi phần tử HTML đều có thể cùng mang một thuộc tính class. Chính vì vậy khi sử dụng CSS cho class="page" thì đoạn văn thứ 2 và 3 sẽ cho ra cùng một kết quả giống nhau. Từ 2 ví dụ trên ta có thể thấy rằng một HTML element chỉ có thể có duy nhất một id và id này thuộc sở hữu duy nhất bởi element đó mà thôi. Trong khi đó class có thể được chia sẻ bởi nhiều elements khác nhau. 4. Block elements và inline elementsMọi HTML elements đều có giá trị hiển thị mặc định ( block và inline )tùy thuộc vào loại elements đó. Một phần tử HTML Ví dụ sử dụng thẻ div để hiển thị theo dạng block Các thẻ hiển thi theo dạng block là: Inline Một phần tử HTML Ví dụ sử dụng thẻ span để hiển thị theo dạng inline Các thẻ hiển thi theo dạng block là: 5. Cách nhúng một trang web bằng iframeIframe giống như một cửa sổ nhỏ đã được cắt vào trang của bạn - và trong cửa sổ đó, bạn có thể thấy một trang khác (Nhúng). Một cách sử dụng phổ biến của iframe (mà bạn có thể đã thấy trên các trang web khác nhau) là nhúng Bản đồ Google. Nội dung của iframe có thể là bất kỳ trang html nào (nằm trên cùng một máy chủ hoặc bất kỳ nơi nào khác trên web). iframe được tạo bằng thẻbao một số thuộc tính sau: Nếu nói về các thuộc tính CSS cho việc trang trí văn bản thì cũng chỉ có các thuộc tính mà bạn đã xem ở hai phần trước. Nhưng một cái khó nhất trong CSS đó là sử dụng kỹ thuật CSS Layout như thế nào cho chính xác để lên bố cục giao diện website của mình, và đây là bài quan trọng nên đọc trước khi tìm hiểu kỹ thuật CSS Layout mà mình sẽ hướng dẫn sau này. CSS Layout là thuật ngữ chỉ chung về việc dựng bố cục cho website dựa trên việc sử dụng và tùy biến các khối, phần tử. Để dễ dàng hơn để sau này khi tìm hiểu về các kỹ thuật nâng cao, thì việc bạn cần làm bây giờ là nên hiểu thế nào là Block, thế nào là Inline. Đây là hai thuật ngữ rất thường sử dụng trong CSS, từ việc đọc các bài hướng dẫn đến việc tìm kiếm giải pháp trên Internet. See the Pen jEjzJQ by Thach Pham (@thachpham92) on CodePen. Block là gì?Phần tử khối (Block Elements) là thuật ngữ chỉ chung các thẻ HTML có chức năng tạo một khu vực hay nói dễ nghe xíu là một khối. Khối này có nghĩa là một thẻ khi mà bạn khai báo thì nó sẽ được hiển thị ở mỗi dòng riêng biệt bao gồm các nội dung nằm bên trong. Ở các bài học HTML cơ bản bạn có thể đã biết qua một số thẻ block cơ bản như Và khi bạn học tới CSS, bạn sẽ dùng một thẻ rất quan trọng nữa đó là Phần tử nội dòng (Inline Elements) là thuật ngữ chỉ chung các thẻ HTML khi mà khai báo vào nội dung thì nó vẫn sẽ nằm chung một dòng với các văn bản khác. Một số thẻ inline rất hay dùng đó là Câu trả lời là có, chúng ta có thể đổi kiểu hiển thị một phần tử bất kỳ từ inline sang block và ngược lại, hay chuyển qua kiểu hiển thị khác là table với thuộc tính Khi sử dụng CSS để dựng bố cục website mà bạn chưa hiểu rõ về Block và Inline thì có thể sẽ gặp một số khó khăn nếu đụng tới một số phần khó. Chẳng hạn như bạn sẽ không biết sử dụng Trong bài này thì mình chỉ muốn giải thích cho các bạn hiểu thế nào là block và inline thôi vì hai thuật ngữ này mình sẽ sử dụng khá nhiều từ bài này. Trong bài này mình cũng có nói qua về thẻ |