Cách thiết kế web chuẩn SEO và đẹp mắt bằng HTML

Có rất nhiều trang web thích hợp để bạn có thể tìm hiểu về thiết kế giao diện web bằng HTML, những bài viết này sẽ hướng dẫn bạn đôi điều cơ bản để tạo một giao diện web đẹp mắt bằng cách sử dụng HTML. Với những hướng dẫn cơ bản dưới đây bạn sẽ sớm tạo được một trang web.

1/ Hiểu HTML là gì.

HTML là một ngôn ngữ mã hóa tạo nên các trang web, nó như là bộ khung của mọi trang web đang tồn tại. Để biết khung xương này trông ra sao, mở Internet Explorer lên và điều hướng đến bất kỳ trang web nào, sau đó nhấp chuột phải vào trang web và chọn “View Source” (Xem Nguồn).

Khi đó bạn sẽ thấy một trang mã, đây chính là thiết kế giao diện web bằng HTML.

2/ Kiến tạo trang web đơn giản hết mức có thể

 Nếu không thế bạn sẽ sớm bị choáng ngợp bởi những cú pháp và ngôn ngữ lập trình.

Điều quan trọng cần nhớ là phải viết nội dung của mình giữa thẻ HTML mở và đóng.

 Đây là thẻ mở  <___> . Còn đây là một thẻ đóng </___> . Phần ___ sẽ được thay bằng mã.

thiết kế giao diện web bằng html
Thiết kế giao diện web đa cấp

Bạn đã biết cách thiết kế một website bằng HTML chưa? Tham khảo thêm bài viết Cách thiết kế web bóng đá bằng CSS căn bản để tìm hiểu về một công cụ đắc lực trong thiết kế web.

3/ Đi đến “Start” , “Programs”, “Accessories”, “Notepad”

Dễ hơn nữa là nếu bạn sử dụng Notepad++ vì khi bạn chọn ngôn ngữ thiết kế giao diện web bằng HTML thì tất cả những gì bạn viết sẽ tự động được hiển thị theo màu sắc khác nhau và điều này giúp bạn dễ dàng sửa các lỗi có thể.

4/ Phải cho trình duyệt biết loại ngôn ngữ bạn đang sử dụng

Ở dòng đầu tiên thì soạn <!DOCTYPE>, thẻ này luôn phải là thẻ đầu tiên trong mỗi mã của bạn. Tiếp dòng thứ hai, thêm <html>. Đây cũng là thẻ thứ hai bạn cần viết cho máy tính biết là bạn đang bắt đầu tạo một trang web. Trang của bạn cũng cần được đóng lại, vì thế, ở cuối tài liệu bạn viết: </html>. Thẻ này sẽ kết thúc trang web.

5/ Thêm đề mục trang như hình minh họa

thiết kế giao diện web bằng html
Tạo form đăng nhập trong HTML

Bạn có thể tham khảo thêm bài viết Các công cụ thiết kế giao diện web giúp dễ dàng lên Top để có một cái nhìn tổng thể về các tool thiết kế giao diện web hàng đầu vô cùng tuyệt vời, được biết đến như là những công cụ thiết kế web chuyên nghiệp  giúp dễ dàng lên Top dành cho các nhà phát triển web.

6/ Đặt cho trang web một tiêu đề

Tiêu đề vô cùng quan trọng vì nó cho người dùng biết rằng trang của bạn nói về điều gì. Ngoài ra, khi người dùng đánh dấu trang của bạn thì tiêu đề ấy sẽ được hiển thị trong danh sách trang đánh dấu của họ. Mã thiết kế giao diện web bằng HTML của tiêu đề : <title>.

Đóng mã lại ở cuối tiêu đề bằng cách soạn </title>. Tiêu đề hiển thị trên tab chứ không hiển thị trên trang web thực.

7/ Tiến đến phần thân của trang

Gõ thẻ <body> để mở thân bài. Tiếp đó, đóng thân bài lại bằng thẻ </body>. Thông tin chủ yếu của trang web sẽ nằm giữa thẻ <body> và </body>.

Để tạo màu nền cho trang web và bạn có thể thêm phong cách vào phần thân bài. Để thêm màu nền, nhập thẻ <body style=”background-color:silver”>. Bạn có thể thử một màu khác hoặc thậm chí sử dụng số hex. Các từ trong dấu ngoặc kép chính là thuộc tính và chúng phải luôn được bao quanh bởi dấu ngoặc kép.

8/ Viết một vài đoạn văn bản giữa thẻ thần bài

Để làm cho văn bản xuống dòng soạn <br><br>

Bạn muốn thêm mã “marquee” thì chỉ cần soạn <marquee>VĂN BẢN</marquee>.

9/ Thêm một số hình ảnh

Sử dụng mã thiết kế giao diện web bằng HTML hình ảnh <img src=”URL”> . Thẻ đóng là dấu chấm. Nhưng với hình ảnh thì thẻ đóng là không bắt buộc.

thiết kế giao diện web bằng html
Thiết kế giao diện web bằng HTML

10/ Kiểm tra để đảm bảo rằng toàn bộ mã của bạn đã được đóng

11/ Lưu lại thành quả của bạn

Chọn tác vụ save as đặt tên tệp với phần mở rộng là .html và chọn “all files” hoặc “text” bên dưới loại tệp.

Nếu thiếu một trong hai thao tác trên thì trang web của bạn sẽ không thể thực thi. Cuối cùng là đi đến nơi mà bạn đã lưu tệp, nhấp đúp vào tệp và lúc này trình duyệt mặc định sẽ mở trang web của riêng bạn lên ngay.

Trên đây là các bước chi tiết để thiết kế giao diện web bằng HTML, hy vọng nó hữu ích với các bạn. Chúc thành công!

Ngoài ra bạn có thể tham khảo thêm các bài viết liên quan về các công cụ công cụ thiết kế web chuẩn seo khác để lựa chọn cho mình một công cụ phù hợp.

 

Cách thiết kế web chuẩn SEO và đẹp mắt bằng HTML
Rate this post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *