Mã nội tuyến html
|
Trong bài viết này, tôi hướng dẫn bạn 3 cách thêm css vào tài liệu html của trang web bao gồm css nội tuyến, css nội bộ, css bên ngoài Show Css nội tuyếnĐây là cách thêm css trực tiếp vào thẻ html cần định dạng. Tập hợp các kiểu css được khai báo bên trong kiểu thuộc tính của thẻ ưu điểm. Tạo kiểu cho một đối tượng html rất nhanh chóng nhược điểm. Những style css này chỉ áp dụng cho một cụ thể, không áp dụng chung cho nhiều thẻ html cùng lúc Ví dụ 1. Thiết lập đoạn văn bản có màu đỏ, chúng ta có thể thiết lập như mã bên dưới
Css nội bộĐây là cách thêm đoạn mã css vào một vùng riêng trong tệp html ưu điểm. Phân vùng rõ ràng đoạn mã css và những nội dung html còn lại nhược điểm. Những kiểu css này chỉ được áp dụng trong phạm vi một tệp cụ thể mà nó được khai báo. Nó không thể sử dụng chung cho nhiều trang khác nhau Ví dụ 2. Thiết lập
Css bên ngoàiVới công thức này, tất cả các mã css được đưa vào trong tệp có đuôi mở rộng. css (ví dụ. chủ yếu. css) ưu điểm. Giúp Css có thể sử dụng chung cho nhiều trang khác nhau của website và quản lý dễ dàng Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua tệp Constructor file directory index.html css ----main.css Tệp
1p{
color: #f15c25;
}Nội dung file index. html
Trong đó dòng mã giúp liên kết đến tập tin chính. css nằm trong thư mục css của dự án Tổng kết Qua bài viết này tôi chia sẻ cho bạn 3 cách thêm css vào tài liệu html. Tùy vào từng trường hợp cụ thể mà bạn có thể lựa chọn cách thích hợp Nếu trang web chỉ có một trang, bạn có thể sử dụng css nội bộ là đủ. Nhưng nếu dự án có tệp hệ thống lớn thì bạn nên sử dụng cách css bên ngoài Xin chào các bạn đặc biệt là các bạn mới học ngành web này. Đây là series về kiến thức HTML cơ bản toàn tập dành cho người mới mà mình quyết định viết và chia sẻ cách học, cách sử dụng ứng dụng vào thực tế như thế nào, cấu trúc ra sao… thông qua những năm kinh tế . Hi vọng những kiến thức về HTML cơ bản toàn tập mà mình chia sẻ sẽ giúp các bạn hiểu hơn về HTML cơ bản cũng như sử dụng chúng một cách tốt nhất Mình thấy nhiều bạn mới học ở nhiều nguồn như w3schools hay MDN là những nguồn học nước ngoài tốt, tuy nhiên đôi khi các bạn đọc tiếng Anh cũng không hiểu như học xong không biết các thẻ trong HTML có những thẻ gì, áp dụng ra . OK bắt đầu thôi nào # Constructor a tag in HTML that you should knowỞ trong HTML thì việc tìm hiểu cấu trúc một thẻ có thể quá dễ dàng tuy nhiên các bạn mới học thì nên biết chúng trông như thế nào và cách sử dụng ra sao để làm cho chuẩn hơn
Ở trên thì là thẻ p với 9 là thẻ mở sau đó đến nội dung là chữcontent0 rồi đến thẻ đóng là content1 các bạn thấy thẻ đóng nó giống thẻ mở nhưng có dấu content2 phía trước nhé. Ngoài ra sau này các bạn học thêm thì sẽ thấy có một số thẻ người ta gọi là thẻ tự đóng nó như thế này________số 8_______ Các thẻ có cấu trúc như trên gọi là thẻ tự đóng nghĩa là chúng ta không thể truyền nội dung vào giữa như thẻ đóng mở ở chỗ thẻ p mình nói ở trên, nếu các bạn có mã như dưới đây là sai nhé, vì thế khi content # Các thuộc tính của thẻ trong HTMLCác thẻ trong HTML được tạo ra đều có các thuộc tính đi kèm ví dụ như lớp, id là chung nhất ngoài ra mỗi thẻ sẽ có thêm các thuộc tính riêng ví dụ như thẻ a thì sẽ có content3, content4, input thì content5, evondev Còn nếu thẻ đó không có mà các bạn đã đưa nó vào thì nhìn mã của các bạn nó tệ lắm như thế này
Các bạn nhìn vậy có thể sẽ nói sao mà code vậy được chứ mình thấy nhiều bạn mới hay code như này lắm nên mình chia sẻ ở đây nếu các bạn đang đọc blog của mình thì sẽ biết mà né để lấy code của các bạn tốt Thuộc tính thì rất nhiều và thẻ cũng thế, mình sẽ cố gắng liệt kê kèm theo giải thích cho các bạn dễ hiểu nhất trong những phần mình sẽ viết tiếp dưới đây # Sự khác nhau giữa thẻ block và thẻ inlineKhi các bạn học tới các thẻ thì hay bị cái là dùng thẻ này thẻ kia mà không biết chúng khác nhau như thế nào từ đó dẫn tới mã công việc HTML không tốt hoặc sai mục đích…Thì mình sẽ giải thích cho các bạn biết Để nhận biết nhanh nhất đó chính là vào trang web htmltham khảo. io ở trang này nó sẽ tổng hợp toàn bộ các thẻ trong HTML và có mục đánh dấu thẻ nào là thẻ nội tuyến thẻ nào là chặn, thẻ nào là thẻ đóng mở, thẻ nào là thẻ tự động đóng luôn để các bạn biết cách sử dụng cho Quay lại vấn đề chính thì thẻ nội tuyến và thẻ chặn có những điểm gì mà các bạn cần lưu ý
# Tất tần tật các thẻ trong HTML hay được sử dụng nhiều nhấtỞ những mục trên mình đã nói về cấu trúc cơ bản của một thẻ, các thuộc tính trong HTML, sự khác nhau giữa thẻ nội tuyến và khối thẻ và cách sử dụng đúng rồi đấy. Ở mục này và các bài tiếp theo của series này mình sẽ tập trung nói về các thẻ, các tính năng kèm theo để giải thích chi tiết hơn và cách sử dụng cho các bạn để các bạn thông tin hơn về HTML nhé. ## Thẻ pThẻ p là thẻ block, thẻ p có thuộc tính hay dùng là class, id. Thẻ p theo mình nghĩ nó là viết tắt của đoạn là thẻ đại diện cho các đoạn văn bản, ví dụ các bạn đang đọc bài viết của mình các bạn nhấn F12 thì các đoạn văn bản đều thấy trong thẻ p, vì thế khi . Tuy nhiên đoạn chữ ngắn vài 3 chữ sử dụng thẻ p cũng không sao cả, tuy nhiên chữ ngắn thì mình khuyến khích sử dụng thẻ inline hoặc các thẻ tiêu đề hơn ## Thẻ div Là thẻ block, thẻ div cũng có các thuộc tính như class, id. Thẻ div là thẻ được sử dụng rộng rãi nhất hiện nay. Nó thường được sử dụng cho bất kỳ khối nào lớn, bên trong khối đó có thể có nhiều khối nhỏ (cũng là thẻ div) hoặc thẻ p, và nhiều thẻ khác. Các bạn sẽ sử dụng nó rất nhiều khi viết mã HTML và nó cũng có thể chứa văn bản như thẻ p nhé, tuy nhiên khi sử dụng thẻ p thì về mặt nghĩa thì thẻ p sẽ rõ ràng hơn cho việc đại diện văn bản ## Thẻ a Là thẻ nội tuyến, thẻ này dùng cho các liên kết, tức là bạn muốn cho người dùng nhấn vào một trang web nào đó hoặc chỉ đơn giản là cuộn tới mục nào đó trong nội dung với điều kiện mục đó phải có id và trong đó scroll to content Trong thẻ các bạn cần biết 3 thuộc tính quan trọng đó chính là content8, href sẽ truyền vào đường dẫn hoặc như mình nói ở trên dấu #, mục tiêu thì có 2 giá trị thường được sử dụng nhiều nhất là content9 và evondev0, _self thì Còn evondev1, khi các bạn sử dụng với mục tiêu có giá trị là evondev0 thì Google Chrome khuyến mãi được bổ sung vào giá trị cho mục tiêu là evondev3 để tăng tính bảo mật. Default value in target is content9 rồi nên các bạn không cần ghi vào cũng được, ví dụ dưới đây google.com google.com Khi làm việc với thẻ a các bạn cần lưu ý thêm nữa là thẻ a không nên bọc thẻ a vì như vậy nó sẽ sai về mã ý nghĩa và ý nghĩa sử dụng vì khi nhấn vào liên kết nó đã chạy rồi sẽ không có tác dụng cho 0 Bên trong thẻ a có thể chứa nhiều thẻ khác luôn nhé như thẻ khối khác, thẻ nội tuyến…Sau đây, mã giao diện của bạn mà người dùng đã nhấn vào một khối nào đó thì chắc chắn rằng bạn sẽ sử dụng . ## Thẻ img Là thẻ nội tuyến và là thẻ tự đóng nên không truyền nội dung vào giữa các thẻ đóng mở khác được. Thẻ này được sử dụng rất nhiều trong trang web để hiển thị hình ảnh, thẻ img có 2 thuộc tính chính mà các bạn cần nắm lấy đó là evondev5 và evondev6 trong đó src truyền vào đường dẫn hình ảnh để hiển thị hình ảnh lên trang web, Đã ra trong thẻ img còn có thêm thuộc tính evondev7 để hiển thị hình ảnh ở nhiều kích thước màn hình khác nhau tuy nhiên thuộc tính này khá khó sử dụng cho người mới nên mình không thích ở phạm vi dành cho . ## Các thẻ tiêu đề Các thẻ tiêu đề là những thẻ evondev8 là thẻ chặn và thường đại diện cho các tiêu đề từ nhỏ đến nhỏ và có cách sử dụng khác nhau nhé(h1 là to nhất đến h6 là nhỏ nhất). Thẻ h1 là thẻ thường được sử dụng cho một tiêu đề lớn nhất của trang web và lưu ý trong một trang web thì chỉ có tối đa một thẻ h1 mà thôi, vì nó ảnh hưởng đến SEO cho nên nếu các bạn sử dụng nhiều hơn Thẻ h2 được sử dụng cho một khối lớn, các bạn sẽ thấy khi làm landing page giao diện chẳng hạn, thì thẻ h2 này được sử dụng làm tiêu đề cho một khối nào đó để người ta biết được khối đó là gì Thẻ h3 được sử dụng nhỏ hơn ở bên trong các khối lớn đó sẽ có các bài viết nhỏ, khối nhỏ thì sử dụng h3 và cứ thế khối nhỏ hơn cho đến h4, h5, rồi h6. Các bạn có thể thấy thực tế luôn là bài mà các bạn đang đọc nè tiêu đề trên cùng là h1 đó, trong nội dung sẽ có các tiêu đề nhỏ hơn là h2, h3, h4, h5 hay h6… 2 Như tên gọi của nó thì nó được dùng cho cấu trúc có tiêu đề ví dụ như tiêu đề khối, tiêu đề bài viết, tiêu đề blog, các bạn xem hình minh hoạ là hiểu ngay đó mà…. Bên trong nó có thể chứa thẻ a, hoặc các thẻ nội tuyến khác, hoặc chặn thẻ… Và các bạn lưu ý đừng mã như bên dưới này nhé 3 Hoặc các đoạn văn bản dài như ở thẻ p thì nên dùng thẻ p hoặc thẻ div chứ không phải dùng những thẻ tiêu đề này cho đoạn văn bản quá dài nha. ## Thẻ danh sách Thẻ danh sách thì có 2 thẻ chính với cấu trúc hoặc sử dụng là evondev9 và 0. Trong đó ul có nghĩa là danh sách không có thứ tự nghĩa là danh sách không có thứ tự, tức là khi sử dụng nó sẽ hiển thị dưới dạng như thế này với các dấu chấm tròn mặc định hoặc bảng dựa trên CSS sẽ nói sau điều này
Còn lại là danh sách theo thứ tự nghĩa là danh sách có thứ tự tức thời được đánh số như mục lục vậy 1 2
Construct ul li được sử dụng rất nhiều khi làm menu như thế này Lưu ý thêm thẻ li cũng không bọc trực tiếp thẻ li để tránh lỗi nhé nó như dưới đây Tuy nhiên, nó sẽ được bọc lại khi không phải trực tiếp li li mà là li ul li để làm menu đa cấp trong HTML hoặc được sử dụng như sau 6 ## Các ngữ nghĩa của thẻ Các ngữ nghĩa của thẻ các bạn có thể sẽ thấy khi kiểm tra mã blog mình hoặc các blog trang web khác… như thẻ header, thẻ footer, thẻ nav, thẻ side, thẻ bài viết, thẻ chính, thẻ phần thì các bạn có thể hiểu như Tuy nhiên như mình nói sử dụng những thẻ này thì nhìn cấu trúc mã nó rõ ràng mạch lạc hơn là vì nhìn vào là biết nó làm gì, ví dụ như bạn sử dụng tiêu đề thẻ thì sẽ biết à nó là tiêu đề nằm ở phía trước của trang web . các bạn có thể kiểm tra mã blog của mình ở trang chủ là sẽ thấy những thẻ này, và nó là thẻ chặn sử dụng y chang thẻ div không có gì khác, có thể thêm lớp hoặc id… Cho nên là nếu bạn sử dụng thẻ không quen mà sử dụng thẻ div không cũng không sao cả nhé Đây đều là những thẻ nội tuyến, ngược với thẻ p thì những thẻ này thường được sử dụng cho các đoạn chữ rút ngắn, chữ ngắn là như thế nào ví dụ các bạn sẽ thấy một số thiết kế có đoạn chữ như ngày giờ, tên 8 Thẻ 1 và thẻ 2 giống nhau sẽ làm cho chữ in đậm, còn thẻ 3 và thẻ 4 giống nhau sẽ làm cho chữ nghiêng nha # Tạm dừng phần 1Woww viết ra cũng dài cũng khá nhiều kiến thức tuy cơ bản nhưng rất quan trọng cho các bạn mới học HTML. Ở phần tiếp theo mình sẽ nói đến tất tần tật các thẻ về Form nha. Chúc các bạn học tập tốt và một ngày tốt lành vui vẻ |
