5 HTML template miễn phí để tạo nhanh trang web

Cho dù bạn điều hành doanh nghiệp của riêng mình hay chỉ đơn giản là muốn tự quảng cáo bản thân và các kỹ năng của mình, điều quan trọng là phải có một trang web. Nhưng có lẽ bạn không có thời gian để học HTML và không muốn chi tiền cho các dịch vụ thiết kế web đắt tiền.

Trong trường hợp đó, bạn có thể sử dụng các template HTML miễn phí trong bài viết này. Những gợi ý sau đây là các template đơn giản mà bạn có thể điều chỉnh theo nhu cầu của riêng mình, để tạo một trang web đơn giản. Đi kèm với template là những hướng dẫn để bạn có thể sử dụng chúng ngay cả khi bạn là người mới bắt đầu với HTML.

Cách sử dụng template

Bạn có thể xem trước từng template bằng cách nhấp vào liên kết trong tiêu đề. Nhưng để chỉnh sửa và sử dụng các template, trước tiên bạn cần tải chúng xuống. Để thực hiện việc này, nhấp chuột phải vào tiêu đề của từng template và chọn Save Link As… Sau đó chọn một thư mục để lưu template và nhấn Save.

Một phương pháp khác là mở template trong trình duyệt bằng cách nhấp vào liên kết. Sau đó nhấp chuột phải vào bất cứ nơi nào trên trang và chọn View Page Source. Thao tác này sẽ cho bạn thấy HTML được sử dụng cho trang. Sau đó, bạn có thể nhấn Ctrl + S để lưu template vào máy tính.

Bây giờ đi đến thư mục mà bạn đã lưu template. Nhấp chuột phải vào template và chọn Open with > Notepad. Sau đó, template sẽ được mở như một tài liệu văn bản. Tại đây, bạn có thể thực hiện bất kỳ thay đổi nào đối với template, sau đó lưu lại.

Khi chỉnh sửa xong, các trang đã sẵn sàng để host (lưu trữ). Kiểm tra hướng dẫn của Quantrimang.com về các dịch vụ web hosting miễn phí tốt nhất để tìm một máy chủ phù hợp và sau đó trang web của bạn có thể trực tuyến nhanh chóng.

5 HTML template miễn phí để tạo trang web một cách nhanh chóng

1. About Me Template

Template này dành cho một trang chủ đơn giản, có thể là trang web cá nhân hoặc website chuyên nghiệp. Bạn có thể thêm một hình ảnh chân dung và phần văn bản nói về bản thân và những thành tích chuyên nghiệp của bạn.

Bạn cũng có thể sử dụng template này cho bất kỳ loại nội dung dựa trên văn bản nào khác, chẳng hạn như thông tin về sở thích hoặc chủ đề mà bạn muốn chia sẻ.

Để tùy chỉnh template, trước tiên hãy mở file HTML trong trình soạn thảo văn bản như Notepad hoặc WordPad. Để hiểu những gì đang thấy, bạn có thể tìm hiểu về các bước để hiểu mã HTML cơ bản.

Thay đổi tiêu đề trang

Điều đầu tiên cần thay đổi là tiêu đề. Đây là văn bản xuất hiện ở đầu tab khi bạn mở trang. Để thay đổi tiêu đề này, hãy tìm phần:

<title>John Smith - About Me</title>

Bây giờ thay đổi phần văn bản bên trong các thẻ <title> để diễn đạt bất cứ điều gì bạn muốn.

Thay đổi hình ảnh

Template đi kèm với logo ví dụ. Bạn có thể thay đổi hình ảnh này thành bất cứ điều gì bạn muốn. Một hình ảnh vuông là lựa chọn tốt nhất, nhưng bạn cũng có thể sử dụng ảnh hình chữ nhật nếu thích. Để thay đổi hình ảnh, hãy tìm dòng này:

<img src="muo-logo.jpg" class="about">

Bây giờ, hãy thay đổi muo-logo.jpg thành URL cho hình ảnh của bạn.

Thay đổi văn bản

Bây giờ bạn chỉ cần thêm văn bản mà bạn muốn cho trang. Để làm điều này, tìm các thẻ paragraph (đoạn), có ký hiệu <p> ở đầu và </p> ở cuối.

Sao chép và dán văn bản bạn muốn vào giữa các thẻ này. Sẽ có một khoảng trắng tự động được thêm vào cuối mỗi đoạn. Để thêm nhiều đoạn văn, chỉ cần thêm một bộ thẻ <p> </p> khác có chứa văn bản bên trong.

Bạn cũng có thể thay đổi tiêu đề ở đầu văn bản. Để thực hiện điều này, hãy tìm dòng:

<h1>About me</h1>

Và thay đổi “About me” thành bất cứ điều gì bạn muốn.

2. Where To Find Me Template

Template này là một cách dễ dàng để liên kết tất cả các trang web mạng xã hội của bạn. Bạn có thể sử dụng trang này làm landing page trỏ đến tất cả những trang web khác, nơi bạn thường xuyên trực tuyến.

Thay đổi các liên kết mạng xã hội

Bạn cần thay đổi các liên kết và tên cho từng tài khoản mạng xã hội. Để làm điều này, hãy bắt đầu với tài khoản Twitter. Tìm dòng sau:

<img src="twitter-logo.svg" class="socmed">
 <br><br>
 <b>Twitter:</b> <a href="http://twitter.com/johnsmith" target="_blank">@JohnSmith</a>

Có hai điều cần thay đổi ở đây. Đầu tiên, thay đổi liên kết http://twitter.com/johnsmith thành liên kết cho tài khoản Twitter của bạn. Thứ hai, thay đổi @JohnSmith thành handle của bạn.

Bây giờ, hãy làm tương tự với các trang mạng xã hội khác.

Nếu có một trang web mà bạn không sử dụng, chẳng hạn bạn không có tài khoản Tumblr, thì chỉ cần xóa phần này trong template:

<img src="tumblr-logo.png" class="socmed">
 <br><br>
 <b>Tumblr:</b> <a href="https://johnsmith.tumblr.com" target="_blank">johnsmith</a>
 
 <div style="clear:both">
 <br><br>
 </div>

Thay đổi heading và title

Giống như template About Me, bạn có thể thay đổi heading và title bằng cách thay đổi văn bản bên trong các thẻ <h1> </h1> và <title> </title>.

3. Contact Me Template

Trang này là cách để mọi người liên lạc với bạn mà không cần phải gửi email. Biểu mẫu lấy thông tin đã được nhập và tự động gửi đến địa chỉ email của bạn. Đó là một cách dễ dàng để khách truy cập trang web liên lạc với bạn.

Thay đổi địa chỉ email

Để làm cho biểu mẫu hoạt động, bạn cần thay đổi một dòng trong template:

<form action="mailto:youraddress@gmail.com" method="post" enctype="text/plain">

Tại đây, bạn thay đổi youraddress@gmail thành địa chỉ email của bạn. Bước này sẽ hoạt động với bất kỳ nhà cung cấp email nào và bạn sẽ nhận được email với nội dung chứa bất kỳ nhận xét nào được khách truy cập trang web nhập vào biểu mẫu.

Thay đổi văn bản, heading và title

Một lần nữa, bạn cũng có thể thay đổi phần văn bản xuất hiện trên trang này. Để thay đổi văn bản, chỉ cần chỉnh sửa nội dung xuất hiện giữa các thẻ <p> </p>. Để thay đổi tiêu đề, thay đổi văn bản giữa các thẻ <h1> </h1>. Để thay đổi tiêu đề, hãy thay thế phần văn bản giữa các thẻ <title> </title>.

4. Business Homepage Template

Khi tạo một trang chủ cho doanh nghiệp, bạn muốn có tất cả thông tin quan trọng ở cùng một nơi. Template này chính là lựa chọn phù hợp cho mục đích đó.

Thay đổi tiêu đề phần

Để thay đổi tiêu đề của từng phần, hãy tìm những dòng sau:

<h1>About Us</h1>
 <h1>Our Mission</h1>
 <h1>Our Services</h1>
 <h1>Our Customers</h1>

Bây giờ thay đổi tiêu đề của các phần này thành bất cứ điều gì bạn muốn bằng cách chỉnh sửa phần văn bản giữa các thẻ <h1> và </h1>.

Thay đổi nội dung phần

Để thay đổi văn bản xuất hiện bên dưới mỗi tiêu đề, hãy tìm một đoạn bắt đầu như sau:

<p>Lorem ipsum dolor sit amet... </p>

Bây giờ thay đổi văn bản bên trong các thẻ <p> và </p> để diễn tả bất cứ điều gì bạn muốn.

Thay đổi hình ảnh

Template này bao gồm phần không gian cho hình ảnh ở dưới cùng của trang. Để thay đổi hình ảnh, hãy tìm dòng này:

<center>
 <img src="muo-logo.jpg" awidth="200">
 </center>

Bây giờ, hãy thay đổi URL Muo-logo.jpg thành URL cho hình ảnh bạn muốn sử dụng.

5. Business Review Page Template

Khi bạn điều hành một doanh nghiệp, điều quan trọng là phải cung cấp phần nhận xét của khách hàng sau khi trải nghiệm dịch vụ. Điều này giúp cho khách hàng mới tiềm năng tin tưởng rằng những người khác đã sử dụng dịch vụ/sản phẩm của doanh nghiệp và có trải nghiệm tốt.

Template này cho phép bạn thể hiện những đánh giá tốt nhất của khách hàng.

Thêm thông tin khách hàng

Để thêm đánh giá vào trang này, trước tiên bạn cần thêm thông tin khách hàng. Để làm điều này, hãy tìm phần dành cho đánh giá đầu tiên bạn muốn thêm:

<b>Customer Name:</b> John Smith
 <br>
 <br>
 <b>Customer Business:</b> Smith's Supplies

Bây giờ, chỉ cần thay đổi tên John Smith tên thành khách hàng thực và đổi Smith’s Supplies thành tên doanh nghiệp của khách hàng.

Thêm đánh giá của khách hàng

Để thêm đánh giá, hãy xem bên dưới thông tin khách hàng và tìm đoạn bắt đầu như sau:

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Bây giờ xóa văn bản này và thay thế nó bằng đánh giá của khách hàng.

Thêm nhiều đánh giá khác

Để thêm nhiều hơn ba đánh giá trên template, hãy sao chép toàn bộ khối bắt đầu bằng <p> và kết thúc bằng </p>. Dán nó bên dưới các đánh giá hiện tại và chỉnh sửa để thêm nhiều đánh giá hơn.

Các template này sẽ cho phép bạn nhanh chóng và dễ dàng tạo một trang web cá nhân hoặc chuyên nghiệp. Bạn có thể chỉnh sửa từng template để phù hợp với nhu cầu của mình hoặc sử dụng một số template và liên kết chúng với nhau để tạo một trang web hoàn chỉnh.

Nếu muốn đưa trang web của mình lên một tầm cao mới, bạn có thể học cách tạo trang web của riêng mình từ đầu. Tham khảo bài viết: Hướng dẫn tạo một website cho người mới bắt đầu để biết thêm chi tiết.

Chúc bạn tìm được lựa chọn phù hợp!