Hướng dẫn sử dụng Code trên Blog Lại Văn Đức

Chào các bạn. Như các bạn đã biết, tất cả các đoạn Code được chia sẻ trên Blog Lại Văn Đức đều được hiển thị riêng mà không đi chung với chuẩn khung của một file HTML hoàn chỉnh. Chúng ta có hai cách để chạy các đoạn Code này:

Cách đầu tiên: Sử dụng 2 file HTML và CSS riêng biệt

Chúng ta sẽ sử dụng Code tại bài viết này: Tự tạo một Profile Card với HTML và CSS

Một file HTML hoàn chỉnh sẽ có định dạng như sau:

<!DOCTYPE html> 
<html>
<head>
<title>Tên tiêu đề</title>
</head>
<body>

Nội dung Code HTML của bạn ở đây

</body>
</html>

Và để sử dụng được các đoạn Code trên Blog Lại Văn Đức. Các bạn cần khai báo và liên kết đến tập tin CSS. Chúng ta sẽ có đoạn Code như sau:

<!DOCTYPE html>
<html>
<head>
<title>Tên tiêu đề</title>
<link href="ten-file-css-cua-ban.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    </head>
<body>

Nội dung Code HTML của bạn ở đây

</body>
</html>

Các bạn có thể thấy đoạn này:

<link href="ten-file-css-cua-ban.css" rel="stylesheet" type="text/css"/>

Đây chính là đoạn Code chúng ta khai báo để trình duyệt tìm đến file ten-file-css-cua-ban.css và sử dụng các đoạn code trong file CSS đó cho nội dung Code HTML của bạn.  (lưu ý: file html và css phải ở chung một folder)

Để các bạn nắm rõ cách sử dụng, tôi có làm một Video hướng dẫn căn bản để các bạn có thể nhanh chóng sử dụng. Lần đầu làm Video cũng như chưa quen cách nói chuyện với máy tính nên có khá nhiều điều sơ sót. Mong hai họ bỏ qua cho  😆

Bên trên là cách mà tôi khuyên bạn lên sử dụng. Nhưng vẫn còn một cách đơn giản hơn hơn nhưng chỉ nên áp dụng với các đoạn Code ngắn. Nếu Code của bạn quá nhiều, quá dài thì bạn nên áp dụng cách bên trên.

Cách thứ 2: Cho tất cả vào một File

Với cách này chúng ta sẽ có một dạng Code chuẩn như sau:

<!DOCTYPE html>
<html>
<head>
<style>

Nội dung Code CSS của bạn

</style>
</head>
<body>

Nội dung Code HTML của bạn

</body>
</html>

Đơn giản thế thôi.

Ngay bây giờ các bạn có thể xem chi tiết tôi làm thế nào tại đây:

Demo cách thứ nhất : Sử dụng hai File riêng biệt

Demo cách thứ hai : Cho tất cả vào một file HTML

Các bạn có thể View Source để xem chi tiết. Chúc các bạn thành công.