Style trong HTML5

  • Nguyễn Lê Điệp
  • 19-01-2017
  • 48
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.
    Ngôn ngữ lập trình của HTML có thể không dừng lại ở đó cụ điển hình từ năm 2000 đến 2010 nhiều nhà phát triển ngôn ngữ lập trình web đã có xu hướng chuyển sang XHTML. Với XHTML bắt buộc các người lập trình phải viết đầy đủ và đúng cú pháp hơn so với HTML5. Vì vậy các lập trình viên nên chọn cho mình một cách viết code hợp lý để dễ dàng phát triển theo ngôn ngữ của lập trình.

    Sử dụng đúng loại trang

    Luôn luôn khai báo loại trang ở dòng đầu tiên của trang web
    <!DOCTYPE html>
    Hoặc bạn cũng có thể sử dụng như cú pháp bên dưới để phù hợp với các thẻ thấp.
    <!doctype html>

    Chữ hoa thường trong thẻ

    HTML5 cho phép bạn viết một phần tử vừa có chữ hoa và chữ thường kết hợp. Nhưng tốt nhất các bạn nên sử dụng chữ thường cho các phần tử trong khi lập trình bởi vì:

    • Với chữ hoa code sẽ không được đẹp mắt
    • Các nhà phát triển ngôn ngữ thường dùng chữ thường để phát triển
    • Với chữ thường khi nhìn vào sẽ thấy gọn gàng hơn
    • Với chữ thường dễ dàng sửa lỗi và viết hơn.

    Chữ hoa (xấu)

    <ARTICLE>
      Đây là một đoạn văn
    </ARTICLE>

    Chữ hoa và thường (lộn xộn)

    <Article>
      Đây là một đoạn văn
    </ARTICLE>

    Chữ thường (gọn gàng)

    <article>
      Đây là một đoạn văn
    </article>

    Không thẻ đóng

    Trong HTML5, bạn không cần phải đóng các phần tử nhưng tốt nhất bạn nên đóng tất cả các phần tử này lại.

    Thiếu thẻ đóng (không nên dùng)

    <section>
      <p>Đây là một đoạn văn
      <p>Đây là một đoạn văn
    </section>

    Có thẻ đóng (nên dùng)

    <section>
      <p>Đây là một đoạn văn</p>
      <p>Đây là một đoạn văn</p>
    </section>

    Thẻ đóng lửng

    Trong HTML5, nó là tùy chọn để đóng các phần tử rỗng. Nhưng trong XHTML và XML dấu gạch chéo (/) là bắt buộc cho các phần tử.

    Thẻ đóng rỗng

    <meta charset="utf-8">

    Có thẻ đóng

    <meta charset="utf-8" />
    

    Chữ hoa thường trong thuộc tính

    Trong HTML5 có thể dùng chữ hoa và chữ thường trong các thuộc tính của chúng nhưng tốt nhất chúng ta nên dùng chữ thường trong trường hợp này vì

    • Với chữ hoa code sẽ không được đẹp mắt
    • Các nhà phát triển ngôn ngữ thường dùng chữ thường để phát triển
    • Với chữ thường khi nhìn vào sẽ thấy gọn gàng hơn
    • Với chữ thường dễ dàng sửa lỗi và viết hơn.

    Chữ hoa

    <div CLASS="header">

    Chữ thường

    <div class="header">

    Ngoặc kép trong trong phần tử

    Trong HTML5 bạn có thể không cần dấu ngoặc kép bao quanh giá trị của thuộc tính nhưng tốt nhất bạn nên sử dụng dấu ngoặc kép này bởi vì:

    • Giúp dễ nhìn và dễ đọc hơn
    • Có thể các giá trị thuộc tính chứa các dấu cách

    Chứa dấu cách


    Ví dụ bên dưới là sai cú pháp và nó không thể hoạt động
    <table class=header menu>

    Không ngoặc kép (không nên dùng)

    <table class=menu>
    Có ngoặc kép (nên dùng)
    <table class="menu">

    Thuộc tính hình

    Bạn nên luôn luôn thêm thuộc tính "alt" cho hình ảnh của mình. Với thuộc tính này rất quan trọng khi tình duyệt không thể tải hình thì có thể hiển thị ra dòng chú thích alt của hình ảnh đó. Ngoài ra bạn cũng nên thêm thuộc tính width và height để không bị vỡi giao diện trang web khi trình duyệt tải trang.

    Không alt, width và height

    <img src="/home/images/icon.png">

    Có alt, width và height

    <img src="/home/images/icon.png" alt="Icon" width="100px" height="100px">

    Khoảng cách

    Trong HTML5 có thể thêm dấu cách xung quanh dấu bằng. Nếu như vậy thì chúng ta sẽ vô tình làm mất đi khoảng không gian để code và khó phân biệt giữa các đối tượng.

    Có khoảng cách (không nên dùng)

    <link rel = "stylesheet" href = "/home/tryit/css/style-hochtml.css">

    Không khoảng cách (nên dùng)

    <link rel="stylesheet" href="/home/tryit/css/style-hochtml.css">

    Không code dài dòng

    Không nên viết code HTML quá dài dòng tạo sự mất kiểm soát trong khung màn hình nên viết HTML ngắn gọn khoảng 80 ký tự là tốt nhất.

    Dòng trống và thụt đầu dòng

    Không nên để code có các dòng trống nếu bạn không có mục đích. Nếu bạn có để thì tốt nhất khi đó các phần tử HTML khá nhiều. Và để dễ dàng code bạn cũng có thể xài phím tab để thụt vào đầu dòng. Các bạn nên nhớ là không nên thụt và đầu dòng và để các dòng trống không có code khi không cần thiết.

    Không cần thiết

    <body>
    
      <h1>HTML</h1>
    
      <h2>HTML5</h2>
    
      <p>
        Các bài học và hướng dẫn học HTML từ cơ bản đến nâng cao cho mọi người
      </p>
    
    </body>

    Nên sử dụng

    <body>
    
    <h1>HTML</h1>
    <h2>HTML5</h2>
    <p>Các bài học và hướng dẫn học HTML từ cơ bản đến nâng cao cho mọi người</p>
    
    </body>

    Cần thiết

    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>PHP</li>
    </ol>

    Bỏ html và body

    Trong HTML5, thì các thẻ như: <html> và <body> có thể được bỏ qua như ví dụ bên dưới:

    <!DOCTYPE html>
    <head>
      <title>Tiêu đề trang</title>
    </head>
    
    <h1>Tiêu đề đoạn văn</h1>
    <p>Nội dung đoạn văn.</p>
    Xem ví dụ

    Các bạn không nên lượt qua các thẻ như <html> và <body>. Với HTML là một phần tử gốc của một trang web và nó cũng xác định ngôn ngữ cho trang web của bạn

    <!DOCTYPE html>
    <html lang="vi-VI">
    

    Khai báo ngôn ngữ cho trang là cần thiết vì nó giúp các trình duyệt hiển thị tốt đồng thời giúp các công cụ tìm kiếm. Bạn không nên bỏ thẻ <html> và <body> vì nó có thể bị lỗi đối với trình duyệt phiên bản thấp và các phần mềm đọc XML.

    Bỏ thẻ head

    Trong HTML5, thẻ <head> cũng có thể được lượt qua. Theo mặc định thì trình duyệt sẽ lấy phần body còn lại là phần head. Và theo mình thì các bạn không nên lượt bỏ thẻ head này.

    <!DOCTYPE html>
    <html>
    <title>Tiêu đề trang</title>
    <body>
      <h1>Tiêu đề đoạn văn</h1>
      <p>Nội dung đoạn văn</p>
    </body>
    </html>
    Xem ví dụ

    Các thẻ meta

    Thẻ title nên có trong các trang web khi sử dụng ngôn ngữ HTML và HTML5
    <title>Đây là tiêu đề trang</title>
    Để đảm bảo việc lập chỉ cho trang web từ các công cụ tìm kiếm thì một trang web phải có thẻ mã hóa ký tự và thẻ tiêu đề là tất yếu.
    <!DOCTYPE html>
    <html lang="vi-VI">
    <head>
      <meta charset="utf-8">
      <title>Đây là tiêu đề</title>
    </head>

    Thiết kế responsive

    Trong HTML5, với thẻ <meta> viewport giúp cho các bạn thiết kế trang web tương thích với các loại màn hình khác nhau.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Thẻ chú thích

    Chú thích với một đoạn ngắn trên một dòng như sau:
    <!-- Đây là dòng được chú thích -->
    Chú thích với một đoạn dài trên nhiêu dòng:
    <!--
      Đây là một đoạn được chú thích
      Đây là một đoạn được chú thích
    -->

    Kiểu sheet

    Liên kết file CSS bên ngoài với cú pháp ngắn gọn và không cần các thuộc tính rườm rà như sau:
    <link rel="stylesheet" href="/home/tryit/css/style-hochtml.css">
    Hoặc bạn cũng có thể viết CSS nén trên một dòng như bên dưới:
    p.demo{font-family: tahoma; font-size: 13px;}
    Hoặc có thể viết theo cách dễ nhìn và dễ kiểm soát:
    body {
      background-color: pink;
      font-family: tahoma;
      font-size: 13px;
      color: blue;
    }

    Javascript trong HTML

    Liên kết file Javascript bên ngoài với cú pháp bên ngoài đơn giản như sau:
    <script src="/home/js/js.js">
    Không nên sử dụng các thuộc tính id lộn xộn khi kèm theo javascript như bên dưới
    <p id="deMo">Đoạn văn thứ nhất.</p>
    <p id="demo">Đoạn văn thứ hai.</p>
    Xem ví dụ

    Một số chú ý khác

    Tên các tập tin


    Bạn cần chú ý đến các tên file của mình ví dụ ta có file ảnh với tên icon.png và Icon.png. Đối với các máy chủ như Apache, Unix thường nó sẽ truy cập đến file icon.png. Đối với máy như như Microsoft, IIS thì nó sẽ truy cập được cả icon.png và Icon.png. Như vậy có thể làm vở giao diện của một trang web khi bạn vô tình đổi tên hoặc di chuyển file.

    Phần mở rộng các tập tin


    Đối với HTML nên lưu lại với phần mở rộng tập tin là .html hoặc .htm là như nhau. Đối với CSS thì lưu lại với phần mở rộng là .css. Và đối với Javascript thì lưu lại với phần mở rộng .js.

    Các kỷ thuật


    Khi một liên kết không được chỉ định rõ ràng thì máy chủ sẽ tìm các file có tên: index.html hoặc index.htm và default.html hoặc default.htm để chạy trang web đầu tiên.
    Nếu các bạn đã quy định cho máy chủ chạy trang có tên index.html đầu tiên thì các bạn nên đặt tập tin đó với tên index.html.
    Học tốt các bạn nhé!heart
    Từ khóa:

    Style trong HTML5

    Style trong HTML5

    Style trong HTML5

    Style trong HTML5
    Style trong HTML5
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    583
    - Hôm qua:
    733
    - Tuần này:
    3.277
    - Tuần trước:
    4.961
    - Tháng này:
    17.617
    - Tháng trước:
    21.557
    - Năm này:
    66.345
    - Năm trước:
    17.373
    - Tổng cộng:
    83.718