Bạn muốn biết cách tạo một trang web bằng HTML và CSS? Bạn đang ở đúng nơi! Hướng dẫn từng bước này dạy bạn viết mã trang web của riêng bạn từ đầu.

Bạn đang xem : cách tạo trang web bằng html và css

Bạn muốn tìm hiểu cách tạo trang web bằng HTML và CSS?

Bạn đang ở đúng nơi. Trong hướng dẫn này, chúng tôi chỉ cho bạn tất cả các bước để chuyển từ màn hình trống sang một trang web đang hoạt động được tối ưu hóa và khá đẹp mắt đồng thời.

Nhưng trước tiên, HTML và CSS là gì?

Chà, bạn có thể tra cứu cả hai thuật ngữ trong Wikipedia, nhưng những định nghĩa đó không thân thiện với người đọc. Hãy đơn giản hóa mọi thứ một chút:

  • HTML (Ngôn ngữ đánh dấu siêu văn bản) xác định cấu trúc và nội dung của một trang web – nơi mọi thứ diễn ra, cách chúng được trình bày và nội dung trên trang
  • CSS (Cascading Style Sheets) xác định kiểu / cách trình bày của một trang web và các thành phần trên đó

Bạn thực sự không thể có cái này mà không có cái kia – cả hai làm việc cùng nhau để tạo nên trang web cuối cùng, thiết kế của nó và nội dung trên đó.

Lưu ý; khi chúng tôi nói “một trang web”, ý của chúng tôi là một tài liệu HTML đơn lẻ – một trang duy nhất là một phần của trang web của bạn. Trong khi đó, “một trang web” là toàn bộ – toàn bộ trang web của bạn với tất cả các trang web riêng lẻ.

Mục lục

  1. Tìm hiểu kiến ​​thức cơ bản về HTML
  2. Hiểu cấu trúc tài liệu HTML
  3. < strong> Tìm hiểu các bộ chọn CSS
  4. Đặt một biểu định kiểu CSS lại với nhau
  5. Nhận Bootstrap
  6. Chọn một thiết kế
  7. Tùy chỉnh trang web của bạn bằng HTML và CSS
  8. Thêm nội dung và hình ảnh
  9. Tinh chỉnh màu sắc và phông chữ
  10. Tạo trang bổ sung
  11. < / ol>

    Nếu bạn cho rằng việc này quá phức tạp, chúng tôi khuyên bạn nên tạo trang web bằng WordPress hoặc chọn một trong các trình tạo trang web.

    Trước khi bạn bắt đầu, hãy thu thập lại của bạn source:

    Vì vậy, điều đầu tiên bạn cần ngay cả trước khi tạo một trang web với HTML và CSS là một máy chủ web (lưu trữ). Tuy nhiên, đừng lo lắng; bạn không cần phải mua máy của riêng mình. Nhiều công ty lưu trữ web sẽ bán cho bạn một dịch vụ lưu trữ đơn giản trên máy của họ. Chỉ cần google để tìm “lưu trữ web” và chọn thứ gì đó không quá đắt hoặc kiểm tra đánh giá về dịch vụ lưu trữ web của chúng tôi.

    Với máy chủ được sắp xếp, điều tiếp theo bạn cần là miền Tên. Tên miền là những gì trang web được xác định trên web. Ví dụ: tên miền của trang web này là websitesetup.org .

    Khi bạn có cả tên miền và máy chủ, bạn có thể kết nối cả hai với nhau.

    Để giải quyết vấn đề này mà bạn không gặp khó khăn, chúng tôi khuyên bạn nên đăng ký với một công ty như Bluehost.

    Họ sẽ xử lý tất cả các thiết lập cho bạn. Có nghĩa là họ sẽ: (a) thiết lập tài khoản lưu trữ cho bạn, (b) đăng ký tên miền thay mặt bạn, > (c) định cấu hình mọi thứ để hoạt động cùng nhau và (d) cấp cho bạn quyền truy cập vào trang tổng quan dễ sử dụng.

    Hãy tiếp tục và đăng ký với bất kỳ dịch vụ lưu trữ web nào, chúng tôi sẽ đợi. Khi bạn quay lại và máy chủ web của mình đã được định cấu hình và sẵn sàng hoạt động, hãy cuộn sang bước tiếp theo.

    Tái bút: Nếu bạn chỉ muốn thử nghiệm với một trang web HTML trên máy tính của mình và không có ý định công khai, hãy sử dụng phần mềm máy chủ web cục bộ. Công cụ chúng tôi đề xuất và muốn sử dụng có tên là XAMPP . Nó có các phiên bản cho cả Mac và PC và rất dễ sử dụng. Đây là hướng dẫn về cách cài đặt nó trên máy tính của bạn.

    Nếu bạn là người mới sử dụng HTML, bạn có thể tìm thấy phần này < span> HTML cho người mới bắt đầu (Hướng dẫn cơ bản) hữu ích.

    Thành phần chính của cấu trúc HTML là thẻ HTML .

    Một thẻ , ví dụ: trông giống như sau:

     & lt; b & gt; SOMETHING & lt; / b & gt; 

    Ở đây, chúng tôi đang xử lý một & lt; b & gt ; . Cái này sẽ in đậm một đoạn văn bản nằm giữa thẻ mở ( & lt; b & gt; ) và thẻ đóng ( & lt; / b & gt; ). Trong trường hợp này, đoạn văn bản đó là SOMETHING .

    Nhưng có những thẻ khác, chỉ để đặt tên cho một vài thẻ:

    • & lt; i & gt; ... & lt; / i & gt; sẽ in nghiêng văn bản giữa thẻ mở và thẻ đóng
    • & lt; u & gt; ... & lt; / u & gt; sẽ gạch dưới đoạn văn bản đó
    • & lt; p & gt; ... & lt; / p & gt; là một đoạn văn bản
    • & lt; h1 & gt; ... & lt; / h1 & gt; là tiêu đề chính trên trang

    Ngoài những thẻ đơn giản đó, còn có những thẻ phức tạp hơn. Ví dụ: nếu bạn muốn xây dựng một danh sách như sau:

    • Mục 1
    • Mục 2
    • Mục 3

      >

    … bạn có thể làm điều đó với mã HTML sau:

     & lt; ul & gt;
    & lt; li & gt; Mục 1 & lt; / li & gt;
    & lt; li & gt; Mục 2 & lt; / li & gt;
    & lt; li & gt; Mục 3 & lt; / li & gt;
    & lt; / ul & gt;
    

    Hoặc nếu bạn muốn thêm liên kết đến một trang khác, như trang này:

    Đây là liên kết đến trang chủ của chúng tôi

    < p>… bạn có thể làm điều đó với đoạn mã này:

     & lt; a href = "https://websitesetup.org/" & gt; Đây là liên kết đến trang chủ của tôi & lt; / a & gt; 

    Đọc phần này để nhận danh sách đầy đủ các thẻ HTML . Nó sẽ trở nên hữu ích khi bạn tạo một trang web bằng HTML và CSS.

    2. Hiểu cấu trúc tài liệu HTML

    Hãy nghĩ về trang HTML của bạn như thể nó được xây dựng bằng Legos. Bạn đặt các viên gạch khác nhau chồng lên nhau để tạo ra một cấu trúc lớn hơn cho trước.

    Nhưng thay vì các viên gạch Lego, bạn nhận được các thẻ HTML…

    Đây là cấu trúc tài liệu HTML đơn giản nhất:

     & lt;! doctype html & gt;
    & lt; html lang = "vi" & gt;
      & lt; đầu & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; title & gt; Hello, world! & lt; / title & gt;
      & lt; / head & gt;
      & lt; body & gt;
        & lt; h1 & gt; Hello, world! & lt; / h1 & gt;
        & lt; p & gt; Trang web đầu tiên của tôi. & lt; / p & gt;
      & lt; / body & gt;
    & lt; / html & gt;
    

    Bạn có thể lấy đoạn mã ở trên, sao chép và dán nó vào một tệp mới, lưu tài liệu dưới dạng index.html và nó sẽ là một trang HTML hoàn toàn hợp lệ. < / p>

    Hãy giải thích các phần riêng lẻ của mã này:

    • & lt;! doctype html & gt; – phần khai báo ban đầu của tài liệu
    • < li> & lt; html lang = "en" & gt; – một khai báo khác; nói rằng những gì sắp xảy ra tiếp theo là một tài liệu HTML được viết bằng tiếng Anh

    • & lt; head & gt; – đánh dấu phần bắt đầu của phần head; phần đầu là nơi chứa tất cả các thông số cơ bản của trang; hầu hết chúng sẽ không được hiển thị trên màn hình; họ chỉ xác định những gì đang diễn ra ở bên trong
    • & lt; meta charset = "utf-8" & gt; – xác định bộ ký tự nào được sử dụng để viết tài liệu; không cần tốn quá nhiều thời gian cho việc này; chỉ cần sử dụng khai báo này như nguyên trạng
    • & lt; title & gt; Hello, world! & lt; / title & gt; – tiêu đề của trang; đây là những gì mọi người sẽ thấy trong thanh tiêu đề của trình duyệt của họ, ví dụ:
    • & lt; body & gt; – mark phần bắt đầu của phần thân; đây là nơi chứa tất cả nội dung của trang; nó là phần chính của tài liệu HTML; Hãy để chúng tôi nhấn mạnh điều này, phần này là nơi bạn sẽ đưa tất cả nội dung xuất hiện trên trang
    • & lt; h1 & gt; Hello, world ! & lt; / h1 & gt; – tiêu đề chính trên trang
    • & lt; p & gt; Trang web đầu tiên của tôi. & lt; / p & gt; – một đoạn văn đơn giản của text
    • & lt; / html & gt; – thẻ đóng của toàn bộ tài liệu HTML

    Một lưu ý quan trọng ở đây. Làm việc trên tệp HTML trong ứng dụng văn bản cơ bản hoặc trình xử lý văn bản phức tạp như MS Word không phải là một trải nghiệm tốt. Để tự mình thực hiện mọi thứ dễ dàng, hãy cài đặt trình chỉnh sửa HTML có tên Sublime Text . Nó có các phiên bản cho cả Mac và PC và miễn phí.

    Tại sao nó lại tốt hơn? Trong số những thứ khác, nó sẽ tô màu cú pháp của một tệp HTML. Có nghĩa là, nó sẽ phân biệt trực quan các thẻ HTML của bạn với nội dung văn bản, thông số thẻ và các giá trị khác. Về cơ bản, tất cả sẽ trở nên dễ đọc. Đây là cấu trúc HTML đơn giản của chúng ta trông như thế nào trong Sublime Text:

    Được rồi, quay lại chủ đề. Bạn có thể lấy tệp index.html mới đó của mình, sao chép nó vào vị trí thư mục chính của máy chủ web của bạn, sau đó xem trang đó bằng cách điều hướng đến nó thông qua trình duyệt web. Tuy nhiên, đừng quá phấn khích; trang này sẽ khá xấu (xem bên dưới).

    Được rồi, vậy là trang xấu, làm sao để không bị như vậy?

    3. Tìm hiểu về các bộ chọn CSS

    Giống như HTML có các thẻ của nó, CSS có các bộ chọn .

    Các bộ chọn mô tả cách một phần tử nhất định sẽ hoạt động như thế nào. Dưới đây là ví dụ về bộ chọn CSS:

     p {
        font-size: 18px;
    }
    

    Bộ chọn này chỉ ra rằng tất cả các thẻ HTML & lt; p & gt; trong tài liệu sẽ có kích thước phông chữ là 18px.

    Tuy nhiên, một cách thực tế hơn là sử dụng bộ chọn CSS không phải để hạn chế tất cả các thẻ của một loại nhất định đối với một kiểu nhất định, mà là tạo các “lớp” khác nhau và gán chúng vào từng thẻ một.

    Ví dụ: một bộ chọn lớp trong CSS trông như thế này:

    . normal-text {
        font-size: 18px;
    }
    

    Lưu ý dấu chấm (. ) trước tên của lớp ( normal-text ). Với lớp “normal-text” được xác định, giờ đây chúng ta có thể gán lớp đó cho các thẻ HTML cụ thể mà chúng ta muốn tạo kích thước 18px.

    Ví dụ:

     & lt; p class =" normal-text "& gt; Văn bản này sẽ có kích thước 18px. & lt; / p & gt;
    

    Hãy dành thêm một phút để giải thích tất cả các yếu tố của đoạn mã CSS ở trên:

    • .normal-text – định nghĩa lớp; mọi thứ sau tên của lớp và giữa dấu ngoặc mở và đóng ngoặc {} xác định các phần tử được gán cho lớp này sẽ trông như thế nào
    • font-size - một thuộc tính CSS mẫu
    • 18px - một giá trị được gán cho thuộc tính

    Có rất nhiều thuộc tính CSS ngoài những thuộc tính trên < mã> font-size . Đây là danh sách đầy đủ nếu bạn tò mò.

    4. Đặt cùng một biểu định kiểu CSS

    Một tài liệu HTML rất có cấu trúc – mọi phần tử đều có vị trí của nó và thứ tự của các phần tử là rất quan trọng cho việc xây dựng và giao diện cuối cùng của trang web được đề cập. Tài liệu CSS ít hơn rất nhiều.

    Tài liệu CSS thường được gọi là bảng định kiểu. Về cơ bản, biểu định kiểu CSS là danh sách tất cả các định nghĩa lớp đang được sử dụng trong tài liệu HTML tương ứng. Thứ tự của các định nghĩa lớp không phải là điều quan trọng trong hầu hết thời gian (ít nhất là đối với các thiết kế đơn giản).

    Cách bạn đặt một biểu định kiểu CSS lại với nhau là xác định từng lớp một và sau đó kiểm tra nếu kết quả trong thiết kế trang của bạn là những gì bạn muốn.

    Điều này nghe có vẻ như là một công việc tẻ nhạt và đúng như vậy.

    Nhưng chúng tôi sẽ giúp bạn làm mọi thứ dễ dàng hơn và không bắt buộc bạn phải học thiết kế HTML và CSS bằng tay. Thay vì dạy bạn mọi thứ từ đầu, chúng tôi sẽ lấy một sinh vật sống và mổ xẻ các yếu tố của nó.

    Đây là lúc một thứ gọi là Bootstrap phát huy tác dụng.

    5. Tải xuống / Cài đặt Bootstrap

    Bootstrap là bộ công cụ mã nguồn mở để tạo trang web với HTML và CSS.

    Bằng tiếng Anh đơn giản, Bootstrap quản lý cấu trúc cơ bản của tài liệu HTML và CSS stylesheet dành cho bạn. Nó cung cấp một khuôn khổ đảm bảo rằng khung chính của trang web của bạn đã sẵn sàng và được tối ưu hóa để phát triển thêm.

    Về cơ bản, Bootstrap cho phép bạn không bắt đầu lại từ đầu mà thay vào đó, bạn sẽ đi ngay vào phần thú vị. Với tính năng này, bạn không phải làm việc ở những giai đoạn đầu nhàm chán khi tạo một trang web bằng HTML và CSS.

    Bạn có thể thực hiện hai con đường:

    • Tùy chọn (a) : tìm hiểu Bootstrap – truy cập trang chủ Bootstrap, tải xuống gói Bootstrap chính và bắt đầu xây dựng gói Bootstrap.
    • Tùy chọn < strong> (b) : đi tắt – nhận gói khởi động cho Bootstrap với thiết kế đẹp mắt và trang web demo đã được xây dựng.

    Tùy chọn ( a) có thể có một số đường cong học tập khi bắt đầu, nhưng không phải theo cách nào đó là cách tồi tệ hơn để tiếp cận việc tạo trang web bằng HTML và CSS. Một khi bạn nắm vững cấu trúc Bootstrap cốt lõi, bạn có thể dễ dàng hơn trong việc xây dựng các trang mới và làm cho chúng trông giống hệt như bạn muốn. Tài liệu về Bootstrap là một nơi tuyệt vời để bắt đầu với con đường này.

    Chúng ta sẽ sử dụng Option (b) cho hướng dẫn này. Chúng tôi đang làm điều này vì một số lý do, chủ yếu là:

    Bắt đầu với một cấu trúc tạo sẵn giúp tiết kiệm rất nhiều công sức khi cố gắng tìm ra những nhu cầu cơ bản của một tài liệu HTML. Điều này cho phép bạn tập trung vào những thứ thú vị – chẳng hạn như sắp xếp nội dung và làm cho nó trông đẹp mắt.

    Tóm lại, học những thứ theo cách này sẽ nhanh chóng mang lại cho bạn kết quả đẹp hơn, điều mà chúng tôi đoán là bạn muốn .

    6. Chọn một thiết kế

    Khi bạn đang tạo một trang web bằng HTML và CSS, bạn có thể thoải mái sử dụng bất kỳ mẫu Bootstrap nào bạn thích. Tất cả chúng đều phải hoạt động tương tự nhau.

    Tuy nhiên, đối với hướng dẫn này, chúng tôi sẽ sử dụng một trong các mẫu của Khởi động Bootstrap . Họ có nhiều lựa chọn mẫu miễn phí được tối ưu hóa, hoạt động không gặp sự cố và cũng được thiết kế rất tốt.

    Chủ đề mà chúng tôi sẽ sử dụng có tên là Quảng cáo . Hiệu ứng cuối cùng mà chúng tôi hướng tới sẽ trông giống như sau:

    Để bắt đầu với Mẫu quảng cáo, hãy nhấp vào nút Tải xuống miễn phí đó là ở bên phải (trên trang này ) và lưu gói zip vào máy tính của bạn.

    Giải nén gói và chuyển nội dung của nó vào thư mục chính của máy chủ web cục bộ hoặc tài khoản lưu trữ web của bạn.

    Bây giờ, hãy mở vị trí đó thông qua trình duyệt web của bạn. Bạn sẽ thấy phiên bản gốc của mẫu:

    Mẫu này đã khá đẹp, nhưng bây giờ đã đến lúc học cách sử dụng HTML và CSS để biến nó thành chính xác bạn muốn.

    7. Tùy chỉnh trang web của bạn bằng HTML và CSS

    Trước tiên, chúng ta hãy làm việc trên trang chủ của thiết kế. Phần này sẽ cho chúng ta thấy cách thay thế đồ họa, văn bản và điều chỉnh mọi thứ nói chung.

    Chúng ta đã nói sơ qua về phần đầu của tài liệu HTML ở trên. Hãy cùng tìm hiểu sâu hơn ở đây.

    Khi bạn mở tệp index.html của trang Bootstrap trong Sublime Text, bạn sẽ thấy phần đầu như cái này (chúng tôi đã xóa tất cả những thứ không quan trọng khỏi mã này để rõ ràng *):

     & lt; head & gt;
    
      & lt; meta charset = "utf-8" & gt;
      & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1, co-to-fit = no" & gt;
    
      & lt; title & gt; Creative - Khởi động Chủ đề Bootstrap & lt; / title & gt;
    
      & lt ;! - Theme CSS - Bao gồm Bootstrap - & gt;
      & lt; link href = "css / creative.min.css" rel = "stylesheet" & gt;
    
    & lt; / head & gt;
    

    * Ngoài những điều trên, còn có mã để tải Google Fonts, các biểu tượng Font Awesome và mô-đun hộp đèn cho các hình ảnh được hiển thị trên trang.

    Hầu hết các khai báo ở đây chúng tôi đã biết, nhưng có một vài cái mới:

    • Trước hết, mọi thứ giữa & lt ;! - ... - & gt; ngoặc là một nhận xét HTML. Nó không hiển thị trên trang cuối cùng.
    • & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1, co-to-fit = no "& gt; – đó là một trong những thẻ khai báo riêng của Bootstrap. Nó xác định kích thước của khung nhìn trang web.
    • & lt; link href = "css / creative.min.css" rel = "stylesheet" & gt; – dòng này tải CSS biểu định kiểu của mẫu Creative và nó cũng chứa biểu định kiểu mặc định của Bootstrap.

    Hãy sửa đổi khai báo cuối cùng – dòng tải CSS – để làm việc dễ dàng hơn sau này.

    Thay đổi dòng đó thành:

     & lt; link href = "css / creative.css" rel = "stylesheet" & gt;
    

    Đây chỉ là một sự khác biệt nhỏ – nó sẽ tải phiên bản không rút gọn của cùng một trang CSS. Phiên bản này dễ sửa đổi hơn.

    Bây giờ, hãy cuộn xuống cuối tệp index.html . Bạn sẽ thấy các dòng sau ngay trước thẻ đóng nội dung:

     & lt ;! - JavaScript lõi Bootstrap - & gt;
    & lt; script src = "nhà cung cấp / jquery / jquery.min.js" & gt; & lt; / script & gt;
    & lt; script src = "nhà cung cấp / bootstrap / js / bootstrap.bundle.min.js" & gt; & lt; / script & gt;
    
    & lt ;! - Plugin JavaScript - & gt;
    & lt; script src = "provider / jquery-secure / jquery.easing.min.js" & gt; & lt; / script & gt;
    & lt; script src = "nhà cung cấp / phóng đại-popup / jquery.magnific-popup.min.js" & gt; & lt; / script & gt;
    
    & lt ;! - Các tập lệnh tùy chỉnh cho mẫu này - & gt;
    & lt; script src = "js / creative.min.js" & gt; & lt; / script & gt;
    

    Họ chịu trách nhiệm tải các tệp JavaScript xử lý một số tương tác trực quan hơn của thiết kế. Ví dụ: khi bạn nhấp vào liên kết Giới thiệu ở menu trên cùng, bạn sẽ được đưa dễ dàng đến khối giới thiệu trên cùng một trang – điều này, trong số những thứ khác, được thực hiện thông qua JavaScript. Chúng tôi không cần phải gặp khó khăn khi hiểu mã này ngay bây giờ. Hãy để việc này vào lúc khác.

    Thay vào đó, chúng ta hãy bắt đầu thêm nội dung của riêng chúng ta vào trang:

    8. Thêm nội dung và hình ảnh

    Điều đầu tiên bạn muốn làm là thay đổi tiêu đề của trang.

    1. Thay đổi Tiêu đề

    Tìm thẻ tiêu đề trong phần đầu và thay thế văn bản giữa các thẻ thành một thứ gì đó của riêng bạn:

     & lt; title & gt; Trang web HTML của tôi & lt ; / title & gt; 

    2. Tùy chỉnh Phần anh hùng

    Phần anh hùng là cái mà chúng tôi gọi là khối này:

    Sẽ rất tuyệt nếu có nội dung của riêng chúng ta bên trong nó. Để sửa đổi khối này, hãy quay lại tệp index.html của bạn và tìm phần này:

     & lt ;! - Quảng cáo trên trang đầu - & gt;
    & lt; header class = "masthead" & gt;
      & lt; div class = "container h-100" & gt;
        & lt; div class = "row h-100 align-items-center justify-content-center text-center" & gt;
          & lt; div class = "col-lg-10 align-self-end" & gt;
            & lt; h1 class = "text-uppercase text-white font-weight-bold" & gt; ... & lt; / h1 & gt;
            & lt; hr class = "divider my-4" & gt;
          & lt; / div & gt;
          & lt; div class = "col-lg-8 align-self-baseline" & gt;
            & lt; p class = "text-white-75 font-weight-light mb-5" & gt; ... & lt; / p & gt;
            & lt; a class = "btn btn-primary btn-xl js-scroll-trigger" href = "# about" & gt; Tìm hiểu Thêm & lt; / a & gt;
          & lt; / div & gt;
        & lt; / div & gt;
      & lt; / div & gt;
    & lt; / tiêu đề & gt;
    

    Toàn bộ khối mã này kiểm soát những gì có trong phần anh hùng.

    Có một số thẻ mới ở đây:

    • & lt; header & gt; – đây là thẻ xác định rằng toàn bộ phần này là tiêu đề của trang; thẻ này có một số anh chị em ở dạng thẻ & lt; section & gt; và thẻ & lt; footer & gt;
    • & lt ; div & gt; – là một thẻ CSS chung cho biết rằng phần sau là một phần riêng biệt (hay còn gọi là phần chia) trong tài liệu HTML; việc sử dụng thẻ này giúp bạn dễ dàng phân biệt các phần riêng lẻ trên trang một cách trực quan

    Bạn cũng sẽ nhận thấy rằng một số thẻ khác (mà chúng tôi đã biết) trông phức tạp hơn một chút, với nhiều lớp CSS được chỉ định cho chúng. Ví dụ:

     & lt; h1 class = "text-uppercase text-white font-weight-bold" & gt; ... & lt; / h1 & gt;
    

    Các lớp được gán cho thẻ & lt; h1 & gt; ở đây là text-uppercase text-white font-weight-bold .

    < p> Các lớp này được tạo bởi Bootstrap và nhà phát triển của chủ đề Sáng tạo. Tin tốt là bạn cũng có thể thoải mái sử dụng chúng khi tạo trang web bằng HTML và CSS.

    Thành thật mà nói, bạn có thể tùy chỉnh bất kỳ thẻ nào bạn thêm vào cấu trúc trang của mình bằng cách gán bất kỳ số lớp nào cho thẻ đó.

    Nếu bạn muốn xem danh sách đầy đủ các lớp có sẵn, bạn có thể mở tệp creative.css chính trong thư mục con css của Chủ đề sáng tạo.

    Ban đầu, việc nắm bắt tất cả các lớp này có vẻ đáng sợ, nhưng thực sự thì dễ hơn vẻ ngoài.

    Ví dụ: một trong các lớp được chỉ định cho một số các đoạn trong tệp index.html của chúng tôi là font-weight-light . Khi bạn nhảy vào tệp creative.css và ctrl + f tìm kiếm tên lớp đó, bạn sẽ thấy rằng nó chỉ cần đặt thông số font-weight như sau: < / p>

    . font-weight-light {
      font-weight: 300;
    }
    

    Việc sửa đổi văn bản mặc định trong tệp index.html rất đơn giản. Chỉ cần tìm thẻ mà bạn muốn chỉnh sửa và thay đổi nội dung giữa thẻ mở và thẻ đóng.

    Ví dụ: để thay đổi dòng tiêu đề chính, chỉ cần thay đổi điều này:

     & lt; h1 class = "text-uppercase text-white font-weight-bold" & gt; Yêu thích của Bạn ... & lt; / h1 & gt;
    

    Những thứ như sau:

     & lt; h1 class = "text-uppercase text-white font-weight-bold" & gt; Hãy chiêm ngưỡng trang web HTML của tôi! & lt; / h1 & gt;
    

    Bạn có thể thực hiện tương tự với tất cả các đoạn văn và các thẻ khác trên trang.

    Điều quan trọng là bạn cũng có thể thêm các đoạn văn mới một cách tự do. Ví dụ: chúng ta có thể lấy đoạn văn đã có trên trang, tạo một bản sao của đoạn văn đó và dán nó ngay bên dưới đoạn văn bản gốc; như vậy:

     & lt; p class = "text-white-75 font-weight-light" & gt; Khởi động Bootstrap có thể ... & lt; / p & gt;
    & lt; p class = "text-white-75 font-weight-light" & gt; Đoạn 2 & lt; / p & gt;
    

    Bây giờ, với các văn bản đã được chăm sóc, hãy thay thế hình ảnh trong nền.

    Việc này phức tạp hơn một chút vì nó yêu cầu chúng ta đi vào biểu định kiểu CSS và thực hiện sửa đổi ở đó. Như bạn có thể thấy trong mã HTML của phần Quảng cáo tiêu đề , không có thẻ nào chỉ ra việc đưa hình ảnh vào trang theo bất kỳ cách nào. Tất cả điều này được thực hiện thông qua CSS.

    Khi bạn xem xét toàn bộ khối mã xử lý phần Quảng cáo tiêu đề , bạn sẽ thấy rằng nó được gán cho một lớp có tên là quảng cáo tiêu đề . Dòng mã này xử lý việc gán lớp:

     & lt; header class = "masthead" & gt;
    

    Lớp masthead là lớp đặt hình ảnh vào nền của toàn bộ khối.

    Hãy mở creative.css tệp lại và tìm lớp “masthead”:

     header.masthead {
      padding-top: 10rem;
      padding-bottom: calc (10rem - 72px);
      background: linear-gradient (to bottom, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
      background-position: trung tâm;
      background-repeat: không lặp lại;
      background-attachment: scroll;
      background-size: bìa;
    }
    

    Đoạn mã này thực hiện tất cả những điều thú vị đối với hình ảnh của chúng tôi (như thêm lớp phủ, tô bóng, v.v.), nhưng phần quan trọng là: url ("../ img / bg- masthead.jpg ") . Đây là dòng cho biết nơi tìm ảnh nền. Nó sẽ nằm trong thư mục con img .

    Để thay đổi hình nền này, hãy lấy bất kỳ hình ảnh nào của riêng bạn, sao chép nó vào thư mục con img và sau đó sao chép và dán tên của nó vào vị trí của tệp bg-masthead.jpg ban đầu. Tóm lại, hãy thay đổi cái này: url ("../ img / bg-masthead.jpg") thành cái này: url ("../ img / YOURFILE.jpg") .

    3. Tùy chỉnh các Khối khác trên Trang

    Khi bạn xem qua index.htmltệp , bạn sẽ nhận thấy rằng có rất nhiều phần khác nhau đã có trên trang. Chúng tôi có một phần dành cho điều hướng và về khối, một số dịch vụ, danh mục đầu tư, lời kêu gọi hành động, khối liên hệ và chân trang.

    Mặc dù có nội dung khác nhau trong tất cả các phần này, nhưng các phần chúng giống nhau về cấu trúc. Tất cả chúng đều có bộ thẻ HTML gần như giống nhau - chỉ là các lớp CSS khác nhau được gán cho chúng.

    Cách tốt nhất để sửa đổi trang cho phù hợp với nhu cầu của bạn là xem qua từng khối một và thử nghiệm bằng cách thay đổi mọi thứ xung quanh.

    Ngoài việc sửa đổi văn bản, bạn cũng có thể di chuyển toàn bộ các phần xung quanh (các phần giữa các thẻ & lt; section & gt; ). Mặc dù vậy, bạn phải làm điều đó bằng tay (bằng cách cắt và sau đó dán các phần tử vào vị trí), nó vẫn dễ thực hiện.

    Nói như vậy, có hai sửa đổi khá cơ bản mà chúng tôi không có ' t nói về chưa. Tiếp theo chúng ta hãy trình bày những vấn đề này:

    9. Tinh chỉnh Màu sắc và Phông chữ

    Việc thay đổi màu sắc hoặc phông chữ rất dễ thực hiện trong HTML và CSS. Điều đơn giản nhất bạn có thể làm là gán một số kiểu nội dòng cho thẻ HTML. Ví dụ:

     & lt; p style = "color: # FF0000;" & gt; Chữ màu đỏ & lt; / p & gt;
    

    Trong HTML, màu sắc được biểu thị bằng các giá trị hex của chúng; “# FF0000” có màu đỏ. Dưới đây là bảng của tất cả màu tiêu chuẩn khác.

    Cách tốt hơn để chỉ định màu là thực hiện qua biểu định kiểu CSS. Ví dụ: để có được hiệu ứng tương tự như đoạn mã trên, chúng ta có thể đặt mã này vào biểu định kiểu CSS của mình:

     p.red {
    màu: # FF0000;
    }
    

    Và sau đó sử dụng đoạn mã HTML sau trong tài liệu chính:

     & lt; p class = "red" & gt; Red text & lt; / p & gt;
    

    Phương pháp thứ hai đó về cơ bản là cách mọi thứ được thực hiện trong Bootstrap.

    Để thay đổi màu của bất kỳ văn bản nào trên trang, trước tiên hãy tìm thẻ chịu trách nhiệm tạo kiểu cho văn bản đó, sau đó tiếp tục vào biểu định kiểu và sửa đổi lớp tương ứng hoặc tạo một lớp mới.

    Đây là một ví dụ; nói rằng bạn muốn thay đổi màu của tiêu đề có nội dung “Tại dịch vụ của bạn”. Hiện tại, nó có màu đen và đây là mã xử lý nó:

     & lt; h2 class = "text-center" & gt; At Your Service & lt; / h2 & gt;
    

    Để thay đổi màu của nó, cách tốt nhất là tạo một lớp mới có tên là .text-orange và đặt giá trị màu ở đó, như sau:

    . text-orange {
      màu: # f4623a! important;
    }
    

    * ! important sẽ đảm bảo rằng cài đặt màu này sẽ ghi đè lên bất kỳ cài đặt màu nào khác trước đó.

    Bây giờ, chúng ta có thể quay lại tiêu đề của chúng tôi và thay đổi mã của nó thành:

     & lt; h2 class = "text-center text-orange" & gt; At Your Service & lt; / h2 & gt;
    

    Với những thay đổi này, tiêu đề bây giờ sẽ có màu cam:

    Để thay đổi phông chữ và kích thước của phông chữ, bạn có thể làm điều gì đó tương tự. Nhưng trước tiên, một ví dụ về khối định nghĩa phông chữ trông như thế nào trong CSS:

    . SOMECLASS {
    font-family: "Merriweather", Roboto, sans-serif;
    font-size: 18px;
    }
    
    • tải phông chữ Merriweather, Roboto và phông chữ sans-serif mặc định của hệ thống (đọc phần này để tìm hiểu về phông chữ an toàn cho web )
    • đặt kích thước phông chữ thành 18px

    Loại định nghĩa này có thể được đặt vào bất kỳ lớp CSS nào, giống như định nghĩa màu sắc. Trên thực tế, các định nghĩa về phông chữ và màu sắc thường được tìm thấy trong các khai báo cùng lớp.

    Quay lại ví dụ trước của chúng tôi, để thay đổi kích thước phông chữ cho tiêu đề có nội dung “Tại Dịch vụ của bạn”, trước tiên chúng ta có thể tạo một lớp như thế này:

    . text-xxl {
      font-size: 50px;
    }
    

    Và sau đó gán lớp này cho tiêu đề:

     & lt; h2 class = "text-center text-orange text-xxl" & gt; At Your Service & lt; / h2 & gt;
    

    Khi thay đổi màu sắc hoặc phông chữ trong mẫu do Bootstrap tạo của bạn, trước tiên, hãy xem qua biểu định kiểu CSS cho các lớp có thể đã cung cấp cho bạn các kích thước hoặc màu sắc thay thế. Sử dụng những thứ đó nếu có.

    10. Tạo các trang bổ sung

    Bây giờ bạn đã tùy chỉnh trang chủ, đã đến lúc bắt đầu làm việc trên một số trang bổ sung và sau đó liên kết chúng với trang chủ.

    Khi tạo trang web bằng HTML và CSS , bạn có thể tạo bất kỳ số lượng trang con nào và sau đó liên kết tất cả chúng lại với nhau.

    Dưới đây là một số trang phổ biến mà hầu hết các trang web cần:

    • trang giới thiệu
    • liên hệ
    • danh mục đầu tư
    • sản phẩm / dịch vụ
    • nhóm
    • chính sách (chính sách bảo mật, điều khoản, v.v.) < / li>

    1. Bắt đầu với bố cục

    Khi xây dựng một trang web mới, quyết định đầu tiên bạn phải đưa ra là bạn muốn bố cục như thế nào.

    Khi tạo một trang web bằng HTML và CSS, không có gì ngăn cản bạn tạo bất kỳ bố cục nào bạn muốn. Khó khăn duy nhất thực sự là ghép chúng lại với nhau.

    HTML và CSS có thể khó xử lý khi bắt đầu từ màn hình trống, vì vậy chúng tôi cũng sẽ sử dụng Bootstrap tại đây. Trước tiên, chúng tôi sẽ chỉ cho bạn một số nguyên tắc tạo bố cục và sau đó trình bày cách thực hiện với Bootstrap.

    Cách bạn có thể nghĩ về bố cục trang web của mình là coi nó là một chuỗi riêng lẻ. khối - một trên đầu trang khác. Một cái gì đó như thế này (lưu ý bốn khối riêng biệt):

    Điều tuyệt vời về Bootstrap là nó xử lý các nguyên tắc bố cục cơ bản và chi tiết giao diện cho bạn để bạn có thể tập trung vào đặt những khối đó vào đúng vị trí.

    Trong phần này của hướng dẫn, chúng tôi sẽ tạo một trang “giới thiệu” mới.

    Để bắt đầu, chúng tôi sẽ chỉ tạo một dự án rất cơ bản của bố cục. Một cái gì đó giống như ở trên.

    • có một menu điều hướng ở trên cùng,
    • khối dòng tiêu đề có chiều rộng đầy đủ bên dưới menu,
    • chính phần nội dung ở giữa, được đóng hộp ở giữa màn hình (không phải toàn chiều rộng),
    • và phần chân trang.

    Bây giờ, hãy tạo bố cục này bằng HTML.

    2. Tạo một trang mới

    Cách dễ nhất để bắt đầu làm việc trên một trang mới là sao chép một trang hiện có và sử dụng nó làm mẫu. Đó là những gì chúng ta sẽ làm.

    Tạo một bản sao của tệp index.html và đổi tên nó thành about.html .

    Chỉ để giúp phân biệt các trang dễ dàng hơn ở giai đoạn đầu này, hãy chỉnh sửa tệp about.html mới và thay đổi nội dung trong thẻ & lt; title & gt; . Ví dụ: & lt; title & gt; About Me & lt; / title & gt; .

    Bây giờ, hãy xem qua từng dòng của tệp và quyết định xem chúng ta sẽ để lại gì và loại bỏ những gì :

    • Trình đơn điều hướng (bên dưới & lt;! - Điều hướng - & gt; ). Bạn có thể muốn giữ nguyên phần này, chỉ để làm cho trải nghiệm điều hướng đồng nhất trên tất cả các trang.
    • Phần anh hùng chính (bên dưới & lt ;! - Masthead - & gt ; ). Cái này chúng tôi sẽ không cần theo dự án bố trí của chúng tôi. Bạn có thể tiếp tục và xóa toàn bộ phần.
    • Phần giới thiệu (bên dưới & lt;! - Giới thiệu về Phần - & gt; ). Chúng tôi sẽ sử dụng lại phần này làm tiêu đề chính của chúng tôi.
    • Phần dịch vụ , phần danh mục đầu tư , lời kêu gọi hành động và phần liên hệ (mọi thứ giữa & lt;! - Phần Dịch vụ - & gt; & lt;! - Chân trang - & gt; ) . Chúng tôi hoàn toàn không cần những phần này. Bạn có thể tiếp tục và xóa chúng.
    • Phần footer và mọi thứ bên dưới nó (bên dưới & lt;! - Footer - & gt; ). Điều này chúng tôi sẽ cần phải giữ.

    Điều này làm cho mã hiện tại của chúng tôi khá đơn giản. Về cơ bản, nó chỉ là thế này:

     & lt;! DOCTYPE html & gt;
    & lt; html lang = "vi" & gt;
    
    & lt; đầu & gt;
    
    & lt ;! - tất cả các định nghĩa về đầu ... bị xóa để rõ ràng - & gt;
    
    & lt; / head & gt;
    
    & lt; body id = "page-top" & gt;
    
      & lt ;! - Điều hướng - & gt;
      & lt ;! - các thẻ điều hướng thực tế đã bị xóa để rõ ràng - & gt;
      
      & lt ;! - Giới thiệu về Phần - & gt;
      & lt ;! - ... - & gt;
      
      & lt ;! - Chân trang - & gt;
      & lt ;! - ... - & gt;
      
      & lt ;! - Nhập tập lệnh Bootstrap - & gt;
      & lt ;! - ... - & gt;
    
    & lt; / body & gt;
    
    & lt; / html & gt;
    

    Điều mà chúng tôi thiếu ở đây là phần nội dung chính. Để xây dựng nó, chúng tôi sẽ sử dụng lại phần giới thiệu.

    Hãy tiếp tục và tạo một bản sao của phần giới thiệu. Cái này:

     & lt ;! - Giới thiệu về Phần - & gt;
    & lt; section class = "page-section bg-primary" id = "about" & gt;
      & lt; div class = "container" & gt;
        & lt; div class = "row justify-content-center" & gt;
          & lt; div class = "col-lg-8 text-center" & gt;
            & lt; h2 class = "text-white mt-0" & gt; ... & lt; / h2 & gt;
            & lt; hr class = "divider light my-4" & gt;
            & lt; p class = "text-white mb-0" & gt; ... & lt; / p & gt;
          & lt; / div & gt;
        & lt; / div & gt;
      & lt; / div & gt;
    & lt; / phần & gt;
    

    Bây giờ, hãy thay đổi hai dòng đầu tiên thành:

     & lt ;! - Phần Nội dung Chính - & gt;
    & lt; section class = "page-section bg-primary" id = "main-content" & gt;
    

    Vì chúng tôi không cần tiêu đề & lt; h2 & gt; ở đó và phần tử & lt; hr & gt; , hãy xóa chúng đi. Điều duy nhất còn lại bên trong toàn bộ khối này sẽ là một đoạn văn bản. Như vậy:

     & lt ;! - Phần Nội dung Chính - & gt;
    & lt; section class = "page-section bg-primary" id = "main-content" & gt;
      & lt; div class = "container" & gt;
        & lt; div class = "row justify-content-center" & gt;
          & lt; div class = "col-lg-8 text-center" & gt;
            & lt; p & gt; Một đoạn văn bản. & lt; / p & gt;
          & lt; / div & gt;
        & lt; / div & gt;
      & lt; / div & gt;
    & lt; / phần & gt;
    

    Khi bạn lưu tệp và điều hướng đến nó qua trình duyệt của mình, bạn sẽ thấy rằng về cơ bản, bạn có hai khối rất giống nhau, bên dưới khối kia, có cùng màu nền:

    Sẽ tốt hơn nếu có nền trắng trong phần nội dung chính. Để thay đổi nó, điều duy nhất chúng ta cần làm là xóa lớp bg-primary khỏi thẻ & lt; section & gt; chính. Nói cách khác, hãy tạo thẻ thành sau:

     & lt; section class = "page-section" id = "main-content" & gt;
    

    Tốt hơn là:

    Hãy thêm một số đoạn văn giả vào trang để điền thêm một số đoạn, cộng với có thể là một tiêu đề phụ:

    < pre class = "EnlighterJSRAW"> & lt ;! - Phần Nội dung Chính - & gt;
    & lt; section class = "page-section" id = "main-content" & gt;
    & lt; div class = "container" & gt;
    & lt; div class = "row justify-content-center" & gt;
    & lt; div class = "col-lg-8 text-center" & gt;

    & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit ... & lt; / p & gt;

    & lt; p & gt; Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor ... & lt; / p & gt;

    & lt; h3 & gt; Tiêu đề phụ & lt; / h3 & gt;

    & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit ... & lt; / p & gt;

    & lt; / div & gt;
    & lt; / div & gt;
    & lt; / div & gt;
    & lt; / phần & gt;

    Đây là giao diện của trang này:

    Nếu bạn không muốn văn bản được căn giữa thì chỉ cần xóa text- căn giữa lớp từ một trong các thẻ & lt; div & gt; .

    Nếu bạn muốn tạo thêm nét tinh tế cho các khối văn bản này , bạn có thể tạo các lớp CSS mới (như trước đây) và gán chúng vào các đoạn trong khối. Hoặc, bạn có thể xem qua biểu định kiểu hiện tại và xem những lớp nào đã có sẵn cho mục đích này. Đây là những cái chúng tôi đã gán cho các thẻ & lt; p & gt; & lt; h3 & gt; :

     & lt; p class = "lead text-muted" & gt; Lorem ipsum dolor sit amet ... & lt; / p & gt;
    
    & lt; p class = "text-muted" & gt; Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor ... & lt; / p & gt;
    
    & lt; h3 class = "h3 mt-4" & gt; Tiêu đề phụ & lt; / h3 & gt;
    

    Và đây là hiệu quả:

    Một điều nữa mà chúng tôi sẽ làm ở đây là thêm một hình ảnh vào đâu đó trên trang.

    < p> Đây là thẻ hình ảnh mẫu trong HTML trông như thế nào:

     & lt; img src = "image.jpg" & gt;
    

    Khá đơn giản, phải không? Tham số duy nhất ở đó là đường dẫn đến tệp hình ảnh. Để giữ cho mọi thứ được sắp xếp gọn gàng, bạn có thể đặt lại hình ảnh của mình trong thư mục img (giống như cách bạn đã làm với nền đó cách đây không lâu). Trong trường hợp này, thẻ hình ảnh sẽ là:

     & lt; img src = "img / image.jpg" & gt;
    

    Có nghĩa là, thẻ hình ảnh trong cấu hình cụ thể này khá hạn chế. Để làm cho nó tinh tế hơn một chút, hãy gán một số lớp Bootstrap cho nó. Đặc biệt:

     & lt; img src = "img / image" class = "round img-liquid" & gt;
    

    Hai lớp này sẽ cung cấp cho hình ảnh của bạn các góc tròn và cũng sẽ đảm bảo rằng kích thước của hình ảnh không vượt quá kích thước của khối mà nó nằm.

    Bây giờ, bạn có thể thêm một thẻ như thế này vào đâu đó trong phần nội dung chính của trang giới thiệu của bạn. Ví dụ: ở đây:

     & lt; p class = "lead text-muted" & gt; Lorem ipsum dolor sit amet ... & lt; / p & gt;
    
    & lt; img src = "img / image.jpg" class = "tròn img-chất lỏng" & gt;
    
    & lt; p class = "text-muted" & gt; Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor ... & lt; / p & gt;
    
    & lt; h3 class = "h3 mt-4" & gt; Tiêu đề phụ & lt; / h3 & gt;
    

    Và đây là hiệu ứng cuối cùng trên trang:

    Đây là trang giới thiệu của chúng tôi trong tất cả vinh quang của nó:

    3. Liên kết đến Trang mới

    Khi trang mới được hoàn thành, bây giờ hãy liên kết nó từ trang chủ (tệp index.html ). Đương nhiên, nơi tốt nhất để thêm liên kết này là trong menu điều hướng (bên dưới & lt;! - Navigation - & gt; ).

    Đặc biệt, hãy tìm dòng này:

     & lt; a class = "nav-link js-scroll-trigger" href = "# about" & gt; Giới thiệu & lt; / a & gt;
    

    Chúng tôi sẽ thay đổi nó thành thế này:

     & lt; a class = "nav-link" href = "about.html" & gt; Giới thiệu & lt; / a & gt;
    

    Đây là điều chúng ta chưa nói đến, nhưng thẻ & lt; a & gt; là một thẻ liên kết trong HTML. Sử dụng nó, bạn có thể liên kết đến bất kỳ trang web nào bằng cách cung cấp địa chỉ của trang đó trong tham số href . Văn bản của liên kết - phần có thể nhấp vào của liên kết - sẽ là văn bản giữa thẻ mở và thẻ & lt; a & gt; & lt; / a & gt; .

    Khi bạn làm mới trang chủ ngay bây giờ, bạn sẽ thấy liên kết mới trỏ đến trang giới thiệu.

    Đọc thêm

    Ở giai đoạn này, về cơ bản, bạn đã tạo cho mình một trang web bao gồm hai trang - một trang chủ và một trang giới thiệu.

    Điều bạn nên làm bây giờ là rửa sạch và lặp lại bằng cách tạo các trang mới, chỉnh sửa chúng, thêm nội dung vào chúng, sau đó liên kết mọi thứ từ điều hướng menu.

    Những việc khác đáng làm khi bạn thực hiện các bước này là tìm hiểu thêm các nguyên tắc HTML và CSS, xem qua danh sách kiểm tra, đồng thời học Bootstrap cũng như các cấu trúc và lớp của nó. Một số tài nguyên cho điều đó:

    Thành thạo Bootstrap, rất có thể là con đường tốt nhất hiện có để xây dựng các trang web được tối ưu hóa và đẹp mắt với HTML và CSS.

    Nếu bạn có bất kỳ câu hỏi nào về việc tạo một trang web với HTML và CSS, đừng ngần ngại gửi chúng trong phần nhận xét.


Xem thêm những thông tin liên quan đến chủ đề cách tạo một trang web bằng html và css

Thiết kế website đơn giản với Html, Css và Javascript P1

  • Tác giả: FrontendNguyento
  • Ngày đăng: 2021-07-10
  • Đánh giá: 4 ⭐ ( 7891 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế website đơn giản với Html, Css và Javascript P1

    Download all images:
    https://drive.google.com/file/d/1i5er7wMnFyleVp8C_I6FxfY91PtORpMz/view?usp=sharing
    Danh sách phát:
    https://www.youtube.com/watch?v=2XQW6EqzUVU&list=PLPNLZmPSwSkeZY0U58tUisLianRJvCku1

Làm trang một phần nội dung trang zing.vn

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 5 ⭐ ( 8428 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là bài tập HTML CSS cơ bản đầu tiên mà chúng ta nên làm .Ở bài viết này mình sẽ hướng dẫn các bạn sẽ làm trang Zing.vn bằng HTML và CSS...

Tạo Trang Landing Page Bằng HTML CSS

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 2374 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay mình sẽ giới thiệu đến bạn cách tạo landing page bằng HTML CSS cho trang web nhé!

[HTML & CSS] Làm thế nào để xây dựng layout cho một Website

  • Tác giả: vncoder.vn
  • Đánh giá: 5 ⭐ ( 8228 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Layouts là cách dàn trang, sắp xếp các yếu tố sẽ được hiển thị trên website. Trong bài viết này vncoder.vn sẽ hướng dẫn các bạn cách tạo một layout cho Website.

Định dạng trang web bằng css (Bài 4)

  • Tác giả: giasutinhoc.vn
  • Đánh giá: 3 ⭐ ( 1969 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Lập trình web với Visual Studio Code: HTML, CSS, JavaScript

  • Tác giả: www.hieuda.com
  • Đánh giá: 4 ⭐ ( 9829 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn lập trình web html, css, javascript bằng visual studio code. Cài đặt để lập trình web nhanh nhất bằng live server, emmet trên vscode.

CÁCH TẠO GIAO DIỆN WEB ĐƠN GIẢN BẰNG HTML VÀ CSS

  • Tác giả: daotaodigitalmarketing.vn
  • Đánh giá: 4 ⭐ ( 9625 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc tạo giao diện web đơn giản bằng HTML và CSS ngày càng thuận tiện hơn với nhiều công cụ thiết kế web hiệu quả ra đời như Adobe Dreamweaver...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  PHP vs JavaScript: Difference Between JavaScript and PHP - continue javascript

By ads_php