Bình luận

Thông báo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Làm sao để tạo template blog từ HTML, CSS và Javascript?

Xin chào mọi người, chắc hẳn tiêu đề cũng là câu hỏi của rất nhiều người và trước đõ cũng là câu hỏi của chính mình nên trong bài viết này mình sẽ giúp các bạn trả lời câu hỏi đó.

Làm sao để tạo template blog từ HTML, CSS và Javascript?

Hướng dẫn

Trong phần hướng dẫn mình sẽ nói đến 2 phần chính như sau:

  • Phần 1: Cấu trúc của một template
  • Phần 2: Cách thêm HTML, CSS và Javascript vào template

Cấu trúc của một template:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>
<!-- TIÊU ĐỀ TRANG WEB CỦA BẠN -->
</title>
<b:skin>
<![CDATA[
<!-- CSS CHO TRANG WEB CỦA BẠN -->
]]></b:skin>
<body>
<!-- HTML CHO TRANG WEB CỦA BẠN -->
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
</html>

Trong đoạn code mẫu bên trên có 3 phần mình chú thích đó là chỗ thêm tiêu đề CSS, và HTML còn cụ thể mình sẽ nói tiếp ở phần bên dưới.

Cách thêm HTML, CSS và Javascript vào template

  • Đầu tiên là cách thêm HTML. Trong phần code bên trên mình cũng đã chú thích ở bên trên, các bạn chỉ cần thêm HTML vào đúng vị trí thẻ <body> đó là nó có thể hiển thị.
  • Với CSS, các bạn có thể thêm bằng 2 cách. Cách 1 là các bạn thêm vào giữa đoạn mình chú thích, vậy là xong.
  • Cách 2 cũng là cách để thêm Javascipt. Với CSS thì các bạn có thể cho và giữa thẻ <style></style> còn với Javascript là <script></script> sau đó thêm vào phần HTML như mình nói ở trên. Khi đó template sẽ có dạng như sau:

Đôi khi code sẽ không chạy các bạn nên mã hóa code trước khi dán vào phần body đặc biệt là với Javascript!

Link mã hóa code đây nha: Mã hóa code

Lời kết

Vậy là trong bài viết này mình đã trả lời câu hỏi làm thế nào để từ HTML, CSS và Javascript có thể tạo thành template cho blog. Chúc các bạn một ngày làm việc và học tập hiệu quả!

Copyright © Phạm Văn Linh

Đánh Giá Bài Viết:
No pain, no gain !

Đăng nhận xét

© Phạm Văn Linh. All rights reserved. Developed by Jago Desain
-->