Sửa lỗi footer và content không nằm trong container năm 2024
Quá trình học lập trình thường khá dài và hầu hết mọi người đều muốn nhanh chóng bước vào các bài lý thuyết lập trình và thực hành các ví dụ thực tế. Những bài viết đầu tiên một khóa học lập trình web chủ yếu giới thiệu các thông tin xoay quanh ngôn ngữ, các thuật ngữ liên quan tuy nhiên cũng rất quan trọng bởi khi bạn đã nắm được HTML5 là gì? thì việc học các cấu trúc, các thẻ html chỉ là công cụ để xây dựng website mà thôi. Có rất nhiều bạn đã vào nghề lập trình web rất lâu nhưng không hiểu rõ bản chất HTML là gì hay còn mơ hồ về siêu văn bản, tại sao lại phải sử dụng HTML?… mà chỉ nhăm nhăm muốn code ngay. Những kiến thức cơ bản là nền tảng để phát triển tư duy công việc sau này, bạn không chỉ là một người lập trình (coder) mà biết đâu bạn có thể trở thành một người nghiên cứu, một người phát triển những ngôn ngữ, những công nghệ mới? Dài dòng một chút những chia sẻ về nghề và giờ là lúc chúng ta cùng đi vào tìm hiểu kiến thức HTML cơ bản. Theo truyền thống, một ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản, một ví dụ đơn giản cho cái nhìn đầu tiên về HTML. Show
1. Ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bảnTrong suốt khóa học HTML cơ bản chúng ta sẽ sử dụng hai công cụ để tiện demo và show code cho các bạn là Sublime Text và JsFiddle. Ok, bạn hãy mở Sublime Text tạo một file hello-world.html với nội dung sau:
Kết quả khi chạy file hello-world.html chúng ta được như sau: [jsfiddle url=”https://jsfiddle.net/allaravel/808ahvjg/” height=”200px” include=”result,html,js” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″] Chú ý, phần kết quả thay vì chụp lại nội dung hiển thị trên trình duyệt thì chúng ta sẽ mặc định dùng JsFiddle để xem được nhanh chóng và trực quan. Trong ví dụ HTML đầu tiên này, chúng ta tạm coi như đã biết code HTML, các phần tiếp theo sẽ diễn giải những gì đã sử dụng. Mã HTML ở trên khá nhiều nhưng khi xem trên trình duyệt, nội dung lại rất ít, còn toàn văn bản vì HTML là ngôn ngữ đánh dấu siêu văn bản, nó cho trình duyệt biết chỗ nào phải hiển thị như là tiêu đề (thẻ
4). 2. Các khái niệm HTML cơ bảnTrong ví dụ HTML đầu tiên nếu bạn mới bắt đầu học HTML cơ bản, bạn sẽ thấy hơi hoa mắt chút nhưng đảm bảo rằng sau khi được giới thiệu các khái niệm HTML cơ bản, bạn sẽ làm chủ được đoạn code này dễ dàng. 2.1 HTML element vs thẻ HTMLĐể ý trong ví dụ HTML đầu tiên, có rất nhiều các chuỗi ký tự được mở đầu bằng
5 hoặc
6 và kết thúc bằng
7. Mỗi chuỗi ký tự đó được gọi là thẻ HTML, ví dụ
8,
3… chúng ta gọi đây là thẻ title hoặc thẻ h1. HTML element là các thành phần của HTML, ví dụ
0 là thành phần h1 của HTML, nó được bắt đầu bằng thẻ mở
3 và kết thúc bằng thẻ đóng
2. Vậy mỗi thành phần HTML sẽ bao gồm:
Nội dung giữa thẻ mở và thẻ đóng của một HTML element sẽ là nội dung được hiển thị trên trình duyệt, thẻ mở và thẻ đóng sẽ “đánh dấu” (markup) để trình duyệt hiểu được cụm từ “Khóa học HTML cơ bản” là tiêu đề loại lớn nhất (h1 – Heading 1). Trong thực tế, chúng ta cũng không cần quá phân biệt HTML element với HTML tag (thẻ HTML) mà có thể gọi chung là thẻ h1, thẻ p, thẻ body… chúng ta thống nhất trong suốt Khóa học HTML cơ bản, khi nói đến thẻ HTML chúng ta coi đó là HTML element. Như vậy trong ví dụ trên chúng ta có các thẻ HTML là html, head, title, meta, body, h1, p. 2.2 Thuộc tính của thẻ htmlTrong thẻ
1, chuỗi class=”text-success” là thuộc tính của thẻ HTML, nó cung cấp thông tin thêm cho thẻ HTML. Ở đây có thể có nhiều các thẻ h1 và chúng ta phân biệt các thẻ này bằng thuộc tính class, tức là các thẻ h1 có thuộc tính class là text-success sẽ được nhóm chung vào một nhóm để có thể tô màu, tăng giảm kích thước chữ, chọn font chữ sau này. Thuộc tính của một thẻ HTML có những tính chất như sau:
Thuộc tính class của thẻ h1 trong ví dụ trên chưa thực sự rõ ý nghĩa sử dụng do chúng ta chưa sử dụng đến thẻ này, chúng ta cùng xem một số ví dụ tiếp theo bạn sẽ hiểu rõ hơn thuộc tính trong HTML sử dụng làm gì? Ví dụ 1: thuộc tính src của thẻ giúp chỉ rõ đường dẫn đến ảnh cần hiển thị
Ví dụ 2: thuộc tính style giúp “trang điểm” cho thẻ HTML, ví dụ này chúng ta sẽ tô màu đỏ cho thẻ h1
Tham khảo việc làm lập trình viên HTML lương cao trên TopDev Như vậy bạn đã nắm được một số khái niệm căn bản trong HTML và giờ là lúc xem lại code của ví dụ HTML đầu tiên, nó đã bớt phức tạp hơn. Trong đầu bạn hiện lại có những câu hỏi tiếp theo, các thẻ h1, p thì rõ ý nghĩa của nó rồi, còn lại một đống thẻ HTML khác để làm gì? Khoan đi vào chi tiết, bạn chỉ cần nhớ rằng, đây là cấu trúc chung của một trang HTML.
Đầu tiên, trước khi khai báo các thẻ khác trong HTML chúng ta cần khai báo dạng tài liệu bằng thẻ
2, cách khai báo này là khác nhau cho các phiên bản HTML. Trong HTML4 chúng ta khai báo nội dung tiếp theo viết theo tiêu chuẩn HTML4 bằng cách đưa cú pháp sau vào dòng đầu tiên của mã nguồn:
Với HTML5, cách khai báo đơn giản hơn do HTML5 không còn dựa trên SGML nên không phải khai báo DTD:
Tiếp theo, toàn bộ nội dung trong thẻ
3 chính là nội dung siêu văn bản. Trong nội dung này chúng ta nhìn bố cục sẽ có hai phần:
Về bố cục một trang HTML bạn có thể nắm được như vậy, khi viết một trang HTML mới, bạn có thể sao chép cấu trúc trang HTML cơ bản này. Tiếp theo chúng ta cùng tìm hiểu cụ thể một số thẻ HTML có trong bố cục. Thẻ title Xác định tiêu đề của văn bản, tiêu đề này sẽ được hiển thị trong phần tab của trình duyệt giúp chúng ta nhanh chóng biết được siêu văn bản (trang web) nào đang được mở khi một trình duyệt mở nhiều trang một lúc. Thẻ meta Định nghĩa các thông tin thêm (metadata) cho tài liệu, các thông tin này bao gồm thông tin về tác giả, thông tin mô tả nội dung, thông tin từ khóa… có thể nói rằng thẻ meta mô tả thông tin của thông tin. Các thông tin của thẻ meta không hiển thị trên trình duyệt nhưng các bộ máy khác có thể sử dụng chúng, ví dụ bộ máy tìm kiếm Google, Bing, Facebook sẽ sử dụng các thông tin từ thẻ meta để phân loại nội dung trang web. Có duy nhất thẻ meta nhưng lại khai báo được nhiều các thông tin về metadata là do chúng ta có thể sử dụng các thuộc tính khác nhau:
Thẻ meta đầu tiên thiết lập bảng mã sử dụng, UTF-8 (8-bit Unicode Transformation Format – Định dạng chuyển đổi Unicode 8-bit) là bộ mã hóa ký tự dành cho Unicode, nó có thể tương thích ngược với bảng mã ASCII. UTF-8 là bộ mã phổ biến và thông dụng cho các nội dung điện tử như các file tài liệu, thư điện tử, trang web và các phần mềm xử lý văn bản. Với phiên bản HTML4 trở xuống, để thiết lập bảng mã ký tự phải sử dụng thuộc tính http-equiv kết hợp với content.
Ba thẻ meta tiếp theo mô tả thông tin về trang web, nó giúp các bộ máy tìm kiếm như Google, Bing phân loại nội dung, các thẻ này tuy không hiển thị nhưng cực kỳ quan trọng khi bạn muốn website của mình có thứ hạng cao trong kết quả tìm kiếm của Google. Thẻ meta cuối cùng cho phép các nhà thiết kế điều khiển được khung hiển thị, tính năng này chỉ có ở HTML5. Khung hiển thị là vùng có thể nhìn thấy của người dùng trên một trang web, nó phụ thuộc vào kích thước màn hình các thiết bị khác nhau, ví dụ các thiết bị di động thông minh hiện rất phổ biến nhưng màn hình nó khá nhỏ nên cần trình bày lại sao cho đọc được nội dung dễ dàng. 4. Thành phần thẻ HTML có ngữ nghĩaCác thẻ HTML được chia ra thành hai loại:
Các phiên bản HTML mới sẽ có nhiều hơn các thẻ có ngữ nghĩa vì khi sử dụng các thẻ này có nhiều lợi ích:
4.1 Sự tiến hóa trong HTML5Trong HTML5 xuất hiện nhiều hơn các thẻ HTML có ngữ nghĩa, ví dụ như
3,
4,
1,
6… tại sao vậy, sự tiến hóa của HTML là tất yếu khách quan khi mà nhu cầu tạo ra các thành phần cơ bản của một trang HTML ngày càng lớn. Quay ngược lại hơn 10 năm trước, những khảo sát về HTML giúp ta có được câu trả lời. Năm 2004, một thành viên nhóm soạn thảo đặc tả HTML5, Ian Hickson đã làm một thống kê trên một tỉ trang web thông qua hệ thống chỉ mục của Google để tìm xem thực tế cách tạo ra các trang web. 5 năm sau đó, Opera MAMA cũng thực hiện một việc tương tự nhưng với các thuộc tính class của thẻ HTML từ ngẫu nhiên hơn 2 triệu đường dẫn và kết quả như sau: STT Giá trị thuộc tính class Tần suất lặp lại 1 footer 179,528 2 menu 146,673 3 style1 138,308 4 msonormal 123,374 5 text 122,911 6 content 113,951 7 title 91,957 8 style2 89,851 9 header 89,274 10 copyright 86,979 11 button 81,503 12 main 69,620 13 style3 69,349 14 small 68,995 15 nav 68,634 16 clear 68,571 17 search 59,802 18 style4 56,032 19 logo 48,831 20 body 48,052 Bảng kết quả tiếp theo khi thống kê thuộc tính id của thẻ HTML từ 1.5 triệu đường dẫn ngẫu nhiên: STT Giá trị thuộc tính id Tần suất lặp lại 1 footer 288,061 2 content 228,661 3 header 223,726 4 logo 121,352 5 container 119,877 6 main 106,327 7 table1 101,677 8 menu 96,161 9 layer1 93,920 10 autonumber1 77,350 11 search 74,887 12 nav 72,057 13 wrapper 66,730 14 top 66,615 15 table2 57,934 16 layer2 56,823 17 sidebar 52,416 18 image1 48,922 19 banner 44,592 20 navigation 43,664 Từ các thống kê này, trong HTML5 người ta thấy rằng cần thiết phải đưa vào thêm một số các thẻ HTML có ngữ nghĩa mới như nav, header, footer… Những thẻ HTML có ngữ nghĩa mới này đã làm thay đổi cấu trúc trang HTML cơ bản. Nếu các bạn có điều kiện thực hiện các trang web từ những năm đầu của thế kỷ 21 có thể thấy cách cấu trúc đã có những đợt thay đổi như sau:
Các ví dụ tiếp theo đây cho thấy được những thay đổi đáng kể trong cách cấu trúc trang HTML, đầu tiên chúng ta xem xét cách cấu trúc dùng thẻ div
Với việc thêm vào các thẻ HTML có ngữ nghĩa mới trong HTML5, cấu trúc trang HTML đã thay đổi đáng kể: Mã HTML cũng có những thay đổi
4.2 Trình duyệt không tương thích với HTML5Thật may là các thẻ HTML có ngữ nghĩa trong HTML5 được hỗ trợ diện rộng trên các trình duyệt web hiện đại, rất khó để có thể tìm thấy các phiên bản Chrome, Firefox, Safari hoặc Opera không hỗ trợ. Nhưng không phải là không có những ngoại lệ, ví dụ các phiên bản Internet Explorer trước IE9 là gặp vấn đề với HTML5. Khi một trình duyệt không phát hiện ra các thẻ HTML mới, nó sẽ xử lý các thẻ này như một inline element và không hiển thị chúng như các khối (block), để khắc phục vấn đề này, bạn cần thêm một ít code CSS vào:
0 Code CSS này không ảnh hưởng gì với các trình duyệt có thể nhận diện được thẻ HTML5. Kỹ thuật này là đủ để giải quyết vấn đề tương thích với hầu hết các trình duyệt, tuy nhiên với IE8 hoặc phiên bản thấp hơn thì có một thách thức khác: Các trình duyệt này từ chối áp dụng định dạng CSS cho các thẻ HTML mà chúng không thể nhận ra. Với vấn đề này chúng ta xử lý bằng cách đưa vào một đoạn mã Javascript giúp IE có thể nhận ra và style các thẻ HTML:
1 Nhóm phát triển Google cũng đưa ra một giải pháp riêng tổng thể hơn với một thư viện Javascript giúp cho mọi trình duyệt không hỗ trợ HTML5 có thể hoạt động được.
2 5. Các thẻ HTML mới trong HTML55.1 Thẻ HTML5Thẻ
3 xác định tiêu đề cho một trang hoặc một phần của trang, thẻ được sử dụng như một “khung chứa” cho các nội dung giới thiệu hoặc có thể bao gồm cả các điều hướng trang. Thẻ
3 không bắt buộc phải có trong trang và có thể có nhiều thẻ
3 trong một trang. Trong hầu hết các trang web, thành phần đầu tiên thường là tiêu đề, nó có thể chứa tiêu đề của website, hình ảnh logo, các liên kết đến trang chủ… Thẻ
3 có thể chứa các thẻ tiêu đề từ h1 đến h6 hoặc một thẻ
1 để nhóm các tiêu đề ở các mức khác nhau nhưng không bắt buộc. Thực tế khi xây dựng website, thành phần
3 có thể được sử dụng để tạo ra bảng nội dung, form tìm kiếm, phần logo trang…
3 Hoặc bạn có thể sử dụng
1 để nhóm các tiêu đề với nhau:
4 Đôi khi tiêu đề cũng có thể chứa các thành phần điều hướng đặc biệt khi thiết kế website kiểu master template có một mẫu cho tất cả các trang. Ví dụ:
5 Chú ý, thẻ
1 không bắt buộc phải có trong
3 và hoàn toàn có thể đưa thẻ này ra khỏi thẻ
3. Nó phụ thuộc vào thiết kế bố cục của website, độ lớn các menu điều hướng. Trong ví dụ tiếp theo, chúng ta không thể đưa thẻ vào trong
3 do thiết kế menu điều hướng theo chiều dọc và nằm ở phần nội dung trang.
6 Như vậy việc sử dụng
3 là rất tùy thích miễn sao đó đáp ứng được các nguyên tắc của HTML5 và làm cho trang web dễ dàng duyệt nội dung để người dùng có thể biết được sau phần tiêu đề (header) là đến nội dung trang. Trước khi có HTML5, chúng ta thường sử dụng một thẻ
3 cho tiêu đề website và sử dụng nhiều thẻ
0 cho các thành phần khác của trang. Một câu hỏi nữa mà nhiều người băn khoăn và có thể là một lỗi các lập trình viên web hay gặp: Có nên sử dụng nhiều các tiêu đề ở mức 1 trong một trang? Theo các nguyên tắc của HTML thì bạn hoàn toàn có thể sử dụng nhiều tiêu đề mức 1, tuy nhiên các website thông thường chỉ có một tiêu đề mức 1 cho mỗi trang vì nó làm cho dễ dàng hơn trong bố cục chung cả website, ngoài ra các bộ máy tìm kiếm như Google cũng thích điều này và nó giúp cho tập trung vào các truy vấn tìm kiếm. Điều này đúng ngay cả khi sử dụng
3 kết hợp với các thẻ
3 đến
3, đại ý rằng chỉ nên thiết lập một tiêu đề chung cho trang. 5.2 Thẻ HTML5
1 và thẻ html5
5 Trong các trang web, phần sidebar chứa rất nhiều thông tin, nó có thể chứa hệ thống menu điều hướng cho website, các thông tin thêm hoặc có thể là các quảng cáo (ví dụ khi kiếm tiền từ quảng cáo Google AdSense). Theo cách thiết kế truyền thống, toàn bộ phần sidebar này sẽ được đưa vào một thẻ
9 nhưng với HTML5 bạn có thể sử dụng thẻ
5 hoặc thẻ
1 hoặc cả hai kết hợp với nhau.
Có hai cách thường dùng để cấu trúc sidebar cho một trang web, cách nào cũng được chấp nhận và không có một quy tắc nào cho việc này. Tuy nhiên, thực tế người ta thường sử dụng cách bên phải để cấu trúc thành phần sidebar do thường phần sidebar sẽ chứa nhiều các thông tin khác ví dụ như quảng cáo, các thông tin thêm như bài viết được nhiều người đọc, cũng có thể chứa form nhận thông tin.
7 5.3 Thẻ HTML5
4 Thẻ
4 định nghĩa một khúc, đoạn nội dung và thông thường có một tiêu đề. Ví dụ một trang chủ có thể chia thành các phần như giới thiệu, nội dung, thông tin liên hệ. Phong cách thiết kế trang web hiện nay thường chia trang thành các khúc ngang, mỗi khúc này sẽ được đưa vào một thẻ
4, ví dụ trong hình trên, trang chủ được chia thành các phần như slider để chiếu các ảnh khác, phần giới thiệu, phần sản phẩm, phần tin bài…, mỗi phần này đều có tiêu đề và nội dung.
8 Khi khai báo các thẻ
4 có thể kết hợp với thẻ
8 và
9. Hai thẻ này tạo thành một khối nội dung có thể ẩn hiện nếu trình duyệt hỗ trợ. Thẻ HTML5
8 sử dụng để thêm các chi tiết mà người dùng có thể tùy chọn xem hoặc ẩn. Thẻ này thường dùng để tạo ra các widget (thành phần của ứng dụng), có thể đóng hoặc mở. Mặc định nội dung trong thẻ
8 không được hiển thị trừ khi thuộc tính open được thiết lập. Thẻ HTML5
9 sử dụng để định nghĩa tiêu đề cho phần detail.
9 5.4 Thẻ HTML5
6 Thẻ
6 sử dụng để tạo ra các nội dung độc lập và tự bao hàm chính nó, nội dung này không phụ thuộc vào các phần khác của trang. Thẻ
6 có thể sử dụng cho các nội dung sau:
Trong một trang có thể có một hoặc nhiều thẻ
6, chúng ta cùng xem cách cấu trúc thường gặp cho phần nội dung. Cấu trúc trang có nhiều thẻ
6 có thể kết hợp với thẻ ở phần tiếp theo. 5.5 Thẻ HTML5
8 Trong trang web có khá nhiều các thành phần, để có thể nhận diện được phần nội dung chính của trang sử dụng thẻ
8, một điều chú ý là thẻ
8 sẽ không chứa các thành phần như tiêu đề, sidebar, footer. Phần chú ý này bạn cần hiểu về ngữ nghĩa chứ không phải thẻ
8 không được chứa các thẻ như
3,
5,
4 mà hàm ý của nó là không được chứa các thành phần (nội dung) liên quan đến tiêu đề, sidebar, footer. 5.6 Thẻ HTML5
4 Thẻ
4 định nghĩa phần footer cho một trang hoặc một phần của trang, nó chứa các thông tin xoay quanh về các nội dung chứa bên trong trang hoặc thành phần trang. Thông thường thẻ
4 thường chứa các thông tin như sau:
Một trang hoặc thành phần của trang có thể có một hoặc nhiều các thẻ
4. Hiện nay phần cuối trang thường được thiết kế lớn để chứa thêm nhiều thông tin hơn, lý do là khi người dùng đã đọc xong nội dung thì phần cuối trang sẽ được người dùng rất để ý. Đặc biệt khi tìm kiếm các thông tin liên hệ thông thường người dùng sẽ kéo chuột xuống cuối trang. Với cách thiết kế footer dạng “béo” này thì chúng ta hoàn toàn có thể đưa thêm vào các thẻVới cách thiết kế footer dạng “béo” này thì chúng ta hoàn toàn có thể đưa thêm vào các thẻ
1,
5… vào trong thẻ
4. 5.7 Một số thẻ HTML5 khácChúng ta đã lượt qua các thẻ HTML5 liên quan đến việc cấu trúc trang HTML, còn một số các thẻ HTML có ngữ nghĩa khác cũng mới được gới thiệu trong HTML5 như
12,
13,
14,
15 chưa được đề cập đến và tôi nhóm rất các thẻ HTML5 này vào một mục riêng. Chúng ta cùng tìm hiểu thông tin về các thẻ này. Thẻ HTML5
12 Định nghĩa giá trị ngày giờ mà có thể đọc được. Thẻ
12 được sử dụng để mã hóa ngày và giờ giúp cho các bộ máy tìm kiếm có thể đọc được hoặc các ứng dụng như nhắc giờ, các loại lịch biểu có thể sử dụng. Ví dụ sau nói lên sự cần thiết của thẻ
12.
0 Thẻ HTML5
13 Thẻ
13 dùng để đánh dấu những đoạn văn bản quan trọng.
1 Thẻ HTML5
15,
14 Thẻ
15 sử dụng khi định nghĩa lời chú thích cho một thành phần sử dụng thẻ
14. Thẻ này có thể đặt ở đầu hoặc cuối bên trong thẻ
14. Thẻ
14 xác định các nội dung tự bao bọc như các hình ảnh, sự minh họa, các biểu đồ, sơ đồ… Nội dung của thẻ
14 liên quan đến nội dung chính của trang nhưng nó không phụ thuộc chặt chẽ vào nội dung này, nếu có loại bỏ nó thì không ảnh hưởng đến nội dung trang.
2 6. Lời kếtHTML5 đã có nhiều cải tiến bằng việc đưa thêm nhiều các thẻ HTML có ngữ nghĩa, nó giúp cho việc cấu trúc trang trở nên rõ ràng hơn. Một điểm quan trọng nữa là các bộ máy tìm kiếm như Google, Bing có những ưu tiên khi đánh giá các trang được viết bằng HTML5, nó giúp bạn có thứ hạng cao trong kết quả tìm kiếm, đem lại nhiều lưu lượng truy cập trang hơn. HTML5 còn rất nhiều các khái niệm mới mang tính đột phát, trong bài viết này chỉ dừng lại ở những khái niệm cơ bản giúp bạn có thể chuyển đổi cấu trúc trang từ các phiên bản HTML thấp hơn sang HTML5. |