Thiết Kế Giao Diện Web Bằng Css | Làm Thế Nào Để Tạo 1 File Html?

Sử dụng CSS để thiết kế giao diện web

Thiết kế giao diện web bằng CSS là bước đầu tiên để xây dựng một trang thông tin/ kênh bán hàng. Một website có thể chia thành nhiều phần khác nhau, bao gồm phần đầu, menu, nội dung… tạo ra nhiều cấu trúc khác nhau. Bố cục này có thể được xây dựng bằng cách sử dụng nền tảng thiết kế giao diện web bằng HTML và CSS.

Giao diện web CSS căn bản có 3 phần như sau:

VÙNG-CHỌN {

Thuộc-tính-1: giá-trị-1;

Thuộc-tính-2: giá-trị-2;

• Vùng chọn: là phương pháp xác định các thẻ HTML dựa trên cấu trúc phân cấp. Vùng chọn này được xác định dựa vào nhiều yếu tố khác nhau như định danh (id), tên lớp (class),…
• Thuộc tính: là yếu tố có thể thay đổi ở các thẻ HTML thuộc vùng chọn
• Giá trị: mỗi thuộc tính sẽ có một giá trị khác nhau. Chẳng hạn như tên một loại màu hay mã màu (black, white, #000, #FFFFFF), hay một chỉ số của kích thước tính bằng px, em, rem, %,…

Với những kiến thức cơ bản trên, Chili đã giúp bạn nắm được những thông tin cơ bản và có định hướng cụ thể về thiết kế giao diện web bằng HTML và CSS hợp lý, hữu hiệu nhất. Hy vọng bài viết trên sẽ giúp bạn có thêm những kiến thức bổ ích để xây dựng thành công trang thông tin/ kênh bán hàng phù hợp cho doanh nghiệp.

Nếu bạn có nhu cầu thiết kế và chăm sóc website, hãy liên hệ Chili để được tư vấn và cung cấp dịch vụ chất lượng, chuyên nghiệp nhất với mức giá phải chăng.

Code giao diện website từ bản design (Phần 1)

Bài đăng này đã không được cập nhật trong 2 năm

Quá trình tạo markup giao diện từ bản thiết kế nên tiến hành theo các bước sau để triển khai viết khoa học, dễ debug

• Phân tích layout tổng quát, chia thành từng block nhỏ
• Phân tích từng block một gồm các element nào
• Triển khai code từng block

Vài quy tắc

1. Từ trên xuống dưới2. Từ ngoài vào trongDùng container hay container-fluid

.container-fluid

khi được áp dụng cho một phần tử sẽ làm cho phần tử này có chiều rộng 100%

.container

khi được áp dụng cho một phần tử sẽ làm cho phần tử này có chiều rộng dựa trên kích thước chiều rộng màn hình của các thiết bị3. Từ trái sang phảiXác định row, columns

BướcPhân tích layout, xác định các block

Ở bước này, nhìn vào bản thiết kế được Designer tạo thành file Photoshop .psd hoặc trên figma dưới dạng các layout gồm nhiều thành phần ghép vào nhau.Dựa vào đó ta xác định bố cục của một page gồm những thành phần nào để xác định cách triển khai mã nguồn HTML khi code ra page đóMột cách phân tích bố cục layout điển hình như sau:


body header section.top-bar section.nav-bar main section1 section2 ... footer


BướcPhân tích từng block

Sau khi đã phân tích được layout chung của trang web và xác định các block lớn tạo nên giao diện cho page đó. Chúng ta đi sâu phân tích các block thành các element nhỏ hơn để code từng element nhỏ đó tạo ra giao diện.Ví dụ như phần header của trang Viblo có giao diện như sau:Từ bản thiết kế này ta xác định header gồm một thanh navbar, thanh navbar gồm Logo ở bên trái rồi đến phần chọn trang con, phần tìm kiếm và nút bấm menu người dùngVí dụ về phân tích phân tích layout, phân tích các elements trong từng block của trang Viblo như sau:

BướcTriển khai viết mã nguồn

Viết mã nguồn để tạo ra giao diện sẽ bao gồm 3 phần chính đó là mã nguồn HTML, CSS (SCSS, SASS), Javascript và Jquery

1. Mã nguồn HTML: sử dụng các thẻ để xác định bộ khung cho page đó
2. Mã nguồn CSS: Sử dụng hệ thống selector (tag, class, id,…) để tạo phong cách và định kiểu cho HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ.
3. Mã nguồn Js và Jquey: sử dụng dùng để xử lý động cho trang web, điều khiển các hoạt động click, hover, scroll,..các thành phần trong web

Viết mã nguồn HTML

Để viết mã nguồn tạo ra bộ khung cho trang web ở đây mình sẽ dùng pug và HTML5 như bài viết trước đó mình đã có nóiHệ thống các thẻ (tag) mà HTML5 cung cấp các bạn có thể xem ở w3school. Mình phân nó thành một số nhóm thẻ sau:

• Nhóm thẻ cấu trúc: tạo ra bố cục cho page
• Nhóm thẻ heading: tạo ra phần tiêu đề
• Nhóm thẻ xác định văn bản: tạo nội dung cho page
• Nhóm thẻ danh sách: tạo nội dung kiểu danh sách
• Nhóm thẻ liên kết, media: tạo ảnh, video, liên kết cho page
• Nhóm thẻ tạo bảng: tạo bảng dữ liệu hoặc tạo layout
• Nhóm thẻ liên quan đến form: tạo form nhập liệu

=> Từ các nhóm thẻ này, chúng ta sẽ tạo ra được phần khung. Sau đó chúng ta sẽ viết mã nguồn CSS để biến bản design thành giao diện web
Một số lưu ý khi code HTML tạo bộ khung cho page:

• Sử dụng thẻ section và div để tạo các block, các element
• Một số block chung nên viết riêng thành một file như sidebar, navbar, header, footer,..
• Xác định name, khai báo class, id đặt tên theo chuẩn BEM khi website gồm nhiều page phức tạp

Đặt tên theo chuẩn BEM

BEM là viết tắt của Block-Element-Modifier, là một tiêu chuẩn quy ước đặt tên cho các tên lớp CSS. BEM giúp cho việc code Frontend dễ đọc và dễ hiểu hơn, dễ làm việc và dễ mở rộng cũng như bảo trì khi làm việc với CSS. Quy ước đặt tên


.block {} /* Block */ .block__element {} /* Element */ .block--modifier {} /* Modifier */


1. Block: Là một thành phần của trang web hay ứng dụng đó, các thành phần của DOM cũng có thể là các block. Block ở đây thường là các thành phần header, body, content, footer. Ví dụ section td bên dưới tập hợp các block sau:


.td__container làm nhiệm vụ cân max width và padding left right .td__inner làm nhiệm vụ cân padding top bottom và điểm bám cho các element absolute. VD: chỉnh một button… .td__header chứa Sub-title. .td__content chứa Headline và Description. .td__footer chứa button CTA.


Các prefix của các class đều là td giúp chúng ta có thể nhận diện section khi muốn update mục tương ứng trong css.

2. Elements: Là một thành phần của một block và sẽ không tồn tại độc lập mà không có block vì được đặt bên trong nó, và chúng phụ thuộc vào parent block của nó. Trong BEM, các phần tử được biểu thị bằng dấu gạch dưới kép __.


.td__headline là Text cỡ lớn. Style thường là H1 hoặc H2. .td__intro, .td__description làm mô tả content. .td__image chứa ảnh. .td__button với style riêng cho button trong section này.


3. Modifers: Được dùng để thao tác thay đổi cách hiển thị trên block hoặc phần tử Ví dụ mình muốn tạo thêm một block .block__elem khác nữa và muốn làm nổi bật nó thì sẽ thêm một class .block__elem–hightlight để tạo sự khác biệt đó

Tổng kết

Trên đây, mình đã trình bày các bước đầu tiên để code giao diện từ bản thiết kế. Bài viết tới mình sẽ viết về cách viết mã nguồn css và js, mong các bạn sẽ đón đọc

All rights reserved

Với bất kì lập trình Trang Web nào thì việc tạo giao diện Trang Web đơn thuần bằng HTML và CSS được coi là kỹ năng và kiến thức tối quan trọng không thể thiếu. Việc tạo giao diện Web đơn giản bằng HTML và CSS ngày càng dễ dàng và thuận tiện hơn với nhiều công cụ thiết kế Website hiệu quả thì HTML và CSS vẫn được xem là bắt đầu nguyên bản của mọi Web. Hãy cùng ATPWeb tìm hiểu rõ hơn Cách Tạo Giao Diện Web Đơn Giản Bằng HTML VÀ CSSS nhé!

Xây dựng bố cục trang web đáp ứng bằng CSS display: grid

Giá trị display grid CSS tương tự như giá trị bảng, chỉ các cột và hàng trong bảng kẻ ô có kích thước linh hoạt. Điều này khiến kiểu bảng kẻ ô trở thành lựa chọn lý tưởng để tạo bố cục chính cho trang web. Chúng để không gian cho header và footer có chiều rộng đầy đủ, đồng thời đảm bảo nó có thể tạo những vùng nội dung ở những kích thước khác nhau.




CSS Display Grid

Header

Left Sidebar

Content

Right Sidebar

Footer





Grid tương tự như flexbox, chúng chỉ có thể đặt các phần tử bên dưới và cạnh nhau. Thuộc tính grid-template-areas rất quan trọng ở đây. Như bạn thấy ở code trên, header và footer chiếm 4 khu vực trong mảng này, vì chúng ở chiều rộng tối đa. Các sidebar chiếm một vị trí, còn nội dung chiếm hai, phân chia hàng giữa của khung kẻ ô thành 3 cột.

Bài trước: Counter – Bộ đếm trong CSS

Đoạn code tạo giao diện web đơn giản bằng HTML và CSS

Đây là phần đầu trang web

Đây là nội dung trang web

Đây là sidebar trang web

Đây là chân trang web

Phần HTML:

.main sẽ bao gồm 2 class là .content và sidebar. Class main cũng đã được hiểu là cha của 2 thành phần con là content và sidebar.

.wrapper là thành phần cha bao gồm các phần tử con header, content, sidebar và footer.

Phần CSS:

Reset HTML dùng đoạn CSS:

* {

margin: 0;

padding: 0;

margin: thuộc tính canh lề hay nói một cách khác là khoảng cách giữa những phần tử

padding: thêm không gian gian phía bên trong

clear: both; ngăn chặn thành phần A chiếm vùng không gian của thành phần B, bạn có thể xoá clear:both trong CSS để nhìn có gì xảy ra

float: left; phần tử nằm cạnh sát trái.

foat: right; thành phần nằm sát phải.

Với bài viết tạo Layout đơn giản bằng CSS và HTMl trên đây hi vọng bạn đã hiểu cách thức thiết kế xây dựng một giao diện rồi phải không, bộ khung này sẽ giúp bạn có thể tạo đươc những thứ hay ho và thêm sự sán tạo của bạn thì mọi thứ sẽ trở nên đặc biệt hơn.

Khởi tạo một trang web bằng HTML

Tạo cấu trúc HTML cơ bản

Gõ dấu “!” trên file index.html (hình), rồi nhấn Enter. Ta được một cấu trúc tổng quát cho một trang HTML (xem hình).

Trong đó, bạn đặt tên trang web của mình tại

Bố cục, chia phần và định dạng trang web tại

Nội_Dung

Tạo nội dung cơ bản cho file HTML

Trước khi bài viết hướng dẫn bạn cách thiết kế giao diện bằng HTML. Thì bạn cần hiểu rõ phương thức hoạt động của chúng. Mặt khác, cần phải nắm được các thẻ cơ bản trong HTML.

: Đây là thẻ tiêu đều lớn trong một trang web. Một trang web chuẩn SEO, chỉ nên có một thẻ H1.

: Đây là thẻ tiêu đề lớn thứ 2, có kích thước chữ nhỏ hơn so với H1. Được sử dụng làm tiêu đề theo từng mục của một bài viết.

: Đây là thẻ chứa các đoạn văn bản trong từng mục của thẻ H2.

Cụ thể:

Bạn hãy gõ nội dung như hình.

Sau khi, viết nội dung xong. Bạn nhấn ctrl + S để hệ thống lưu file vừa viết.

Sau đó, click chuột phải → chọn Open in default browser (mở trình duyệt mặc định).

Lưu ý: nếu máy bạn có trình duyệt mặc định là Chrome thì chọn như trên. Nếu không phải thì chọn Open in other browsers (mở trình duyệt khác) → tìm đến chrome để chạy chương trình.

Vì sao chọn chrome mà không phải là một trình duyệt khác? Đơn giản, vì chrome phổ biến, hỗ trợ thiết kế giao diện web bằng HTML tốt, ít khi xảy ra lỗi.

Khi chương trình được khởi chạy, sẽ tự động mở thành tab như hình:

Như vậy, bạn đã hiểu được cơ bản cách khởi tạo một trang web bằng HTML.

Giới thiệu

để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn nhưđiện thoại, thiết bị thông minh, điện tử, bảo mật máy tính…

viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung củamạng xã hội thông qua địa chỉ email [email protected]

Các bước thiết kế website bằng HTML và CSS

Để thiết kế bố cục trang web bạn hãy làm theo các bước sau:

Ban đầu khi mới học HTML mình chỉ biết đến

để tạo bảng mãi sau khi học CSS nữa mới biết dùng đến thẻ

Bố cục trang web bằng css gồm 3 phần:

• Header
• Main gồm có Content và Sidebar
• Footer

Khi dựng Layout bạn sẽ dựa theo các phần đó để dựng HTML.

Phần Header

Code:

Đây là phần đầu trang web

Phần Content

Đây là phần bạn sẽ hiển thị nội dung, hình ảnh và video

Code:

Phần nội dung trang web

Phần sidebar

Hầu hết các trang web đều có cột bên, phần này sẽ hiển thị các bài viết mới post lên

Code:

Đây là cột bên trang web

Phần Footer

Đây là phần chân trang web

Code:

Đây là Footer

Lời kết

Bài viết trên là hướng dẫn của Nhân Hòa để tạo giao diện web đơn giản bằng html và css. Đây chỉ là những đoạn code và thao tác rất đơn giản. Để tạo ra một website người ta phải lập trình rất nhiều thông số khác. Vì thế, hãy để phần việc này cho những công ty thiết kế website chuyên nghiệp như Nhân Hòa

Chúng tôi giúp tạo lập website với các dịch vụ như đăng ký tên miền, thuê hosting, VPS giá rẻ, máy chủ, thiết kế website,... Bạn liên hệ thông tin sau để được tư vấn kỹ hơn.

+ Tổng đài: 1900 6680

+ Website: https://nhanhoa.com/

+ Fanpage: https://www.facebook.com/nhanhoacom

+ Chỉ đường: https://g.page/nhanhoacom

+ Khuyến mãi Nhân Hòa: https://nhanhoa.com/khuyen-mai.html