HTML và CSS là bước khởi đầu không thể thiếu của mọi lập trình viên khi muốn xây dựng và phát triển website. Ngoài ra, dù bạn là chủ doanh nghiệp, chuyên viên tài chính, nhân viên tiếp thị, quản lý... thì cũng nên thành thạo "bộ đôi" này. Chỉ với một chút kiến ​​thức về HTML và CSS, cũng đã phần nào tạo ra sự khác biệt lớn trong sự nghiệp của bạn. Hãy cùng Tự Học Lập Trình tìm hiểu cách học bộ môn này nhé!

Tìm hiểu về HTML và CSS

HTML là gì?

HTML (HyperText Markup Language), là một ngôn ngữ đánh dấu siêu văn bản, được phát triển để tạo ra các website. Nó là những mẩu thông thông tin được trình bày trên World Wide Web (www).

Ngôn ngữ này là cầu nối, hỗ trợ giao tiếp tương tác giao tiếp giữa người dùng với trình duyệt, giúp trình duyệt dễ dàng nhận biết cách thức hiển thị của bất kỳ trang web nào.

CSS là gì?

CSS (Cascading Style Sheets), là hình thức hiển thị của ngôn ngữ HTML, đồng thời hỗ trợ Developer sử dụng các phong cách sẵn có lên bất kỳ trang nào của một website. Chính vì vậy, CSS được cho là công cụ hỗ trợ thiết kế động bộ và nhanh chóng.

Mối quan hệ giữa HTML và CSS

HTML và CSS là hai ngôn ngữ hoạt động riêng biệt nhưng bổ trợ nhau. Chúng là thành phần quan trọng đối với mọi website và hoạt động theo quy tắc chung:

• HTML là đại diện của phần nội dung, còn CSS sẽ hiển thị nội dung đó. 
• Tài liệu của HTML không nên viết bên trong CSS và ngược lại.
• Cần phải tham chiếu tệp CSS trong HTML, nhằm hỗ trợ quá trình giao tiếp giữa chúng.

Vai trò của HTML và CSS

Hai ngôn ngữ này đều được sử dụng để xây dựng website giúp:

• Tối ưu trải nghiệm người dùng. 
• Hỗ trợ thiết kế giao diện và hiệu ứng phức tạp một cách dễ dàng.
• HTML cung cấp "bộ khung" cho website.
• CSS giúp hạn chế thời gian thiết kế web.

Tự học lập trình HTML và CSS 

Nếu muốn thành thạo bộ đôi HTML và CSS, bạn không nên bỏ qua kiến thức các về ngôn ngữ HTML, CSS và JavaScript.

Bên cạnh học code của HTML, bạn cũng cần tìm hiểu về cách thức xây dựng phần Header, Footer, menu... của một website. 

Còn về CSS, bạn phải biết cách chỉnh sửa màu sắc, cân chỉnh bố cục... sao cho đẹp mắt. 

Bạn cũng có thể hình dung rằng, lập trình HTML và CSS như việc xây một căn nhà. Ngôn ngữ HTML tượng trưng cho gạch xây, CSS là sơn dùng cho việc trang trí.

Bạn có thể tham khảo khóa học lập trình HTML và CSS của Tự Học Lập Trình trong chương trình Chiến Binh Full Stack. Sau khóa học, học viên sẽ hiểu rõ hơn về các kiến thức liên quan đến hai ngôn ngữ này và trở thành một Web Developer thực thụ. 

Từ khóa: tự học lập trình html và css học lập trình html và css lập trình html và css tự học lập trình học lập trình lập trình html và css html css

Chia sẻ:

Bell

"A little more persistence, a little more effort, and what seemed hopeless failure may turn to glorious success". Đây là châm ngôn tôi yêu thích nhất, để từng ngày nỗ lực theo đuổi ngành công nghệ thông tin.

0 lượt xem

Share

Mục lục nội dung

1. Giới thiệu về HTML

1.1 HTML là gì?

1.2 Các đặc điểm của HTML

1.3 Trình soạn thảo HTML

1.4 Hiển thị tiếng Việt trong HTML

2. Giới thiệu CSS

2.1 Định nghĩa

2.2 CSS làm được những gì?

2.3 Tại sao sử dụng CSS

2.4 Hướng dẫn học CSS

2.5 Ví dụ về CSS

2.6 Các thuộc tính của CSS

1. Giới thiệu về HTML

1.1 HTML là gì?

HTML là viết tắt của từ Hyper Text Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML được sử dụng để định dạng và hiển thị văn bản trên trình duyệt tới người sử dụng. Nó là xương sống của một trang web.

Vậy thì Hyper Text và Markup Language là gì?

• Hyper Text: siêu văn bản có nghĩa là "văn bản trong văn bản". Một văn bản có chứa một liên kết (link) là một siêu văn bản. Mỗi lần bản click vào một từ từ đó đưa bạn tới một trang web mới, đó là siêu văn bản.
• Markup Language: ngôn ngữ đánh dấu là một ngôn ngữ lập trình được sử dụng để giúp văn bản dễ tương tác và linh động hơn. Nó có thể đặt văn bản vào trong các ảnh, bảng, liên kết...
• Một tài liệu HTML chưa nhiều thẻ HTML và mỗi thẻ HTML chứa các nội dung khác nhau.

Ví dụ, một trang web chuẩn thì có chứa các thẻ HTML như sau:

Trong đó, thẻ chứa thông tin được ẩn (không hiển thị lên trình duyệt) bao gồm thông tin cơ bản và các liên kết đến file css, javascript, ... Còn thẻ chưa thông tin bạn muốn hiển thị lên trình duyệt.

1.2 Các đặc điểm của HTML

• Đây là một ngôn ngữ rất dễ dàng và đơn giản.
• Rất dễ dàng để trình bày hiệu quả với HTML vì nó có nhiều thẻ định dạng.
• Đây là một ngôn ngữ đánh dấu vì vậy có thể sử dụng nó một cách linh hoạt để thiết kế trang web cùng với văn bản.
• Có thể liên kết đến các trang web khác.
• Là một nền tảng độc lập vì nó có thể hiển thị trên bất kỳ nền tảng nào khác như Windows, Linux và Max.
• Có thể thêm các hình ảnh, video, âm thanh vào các trang web khiến nó hấp dẫn và dễ tương tác hơn.

1.3 Trình soạn thảo HTML

Trang web có thể được tạo ra và chỉnh sửa bởi trình soạn thảo HTML chuyên nghiệp. Tuy nhiên để học HTML bạn nên sử dụng trình soạn thảo văn bản đơn giản ví dụ như Notepad (Window), TextEdit (Mac), hoặc pro hơn chút như notepad++.

Sau đây là các bước để sử dụng Notepad (trên Window)

Bước 1. Open Notepad

Ở thư mục hiện tại click chuột phải --> New --> Text Document --> file New Text Document.txt được tạo ra.

Mở file New Text Document.txt: chọn file New Text Document.txt --> click chuột phải --> Open With --> Notepad

Bước 2. Viết HTML

  
    
Tiêu đề đầu tiên
    
Đoạn văn đầu tiên.
  

Bước 3: Lưu trang web

Chọn File --> Save As

Nhập file name: index.html

Chọn Save as type: All files (*.*)

Chọn Encoding: UTF-8

Click Save để lưu file.

Bước 4: Hiển thị trang HTML vừa tạo ở trên

Để mở file HTML vừa lưu ở trên, bạn double click vào file đó hoặc click chuột phải --> Open with --> Chọn browser (trình duyệt web) bạn muốn mở.

Kết quả:

1.4 Hiển thị tiếng Việt trong HTML

Để hiển thị tiếng Việt trong HTML, bạn cần phải cài đặt encoding là UTF-8 với cú pháp như sau:

2. Giới thiệu CSS

2.1 Định nghĩa

CSS là viết tắt của Cascading Style Sheets. Đây là một ngôn style sheet được sử dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngôn ngữ đánh dấu (markup). Nó cung cấp một tính năng bổ sung cho HTML. Nó thường được sử dụng với HTML để thay đổi phong cách của trang web và giao diện người dùng. Nó cũng có thể được sử dụng với bất kỳ loại tài liệu XML nào bao gồm cả XML đơn giản, SVG và XUL.

CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web để tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho nhiều ứng dụng di động.

2.2 CSS làm được những gì?

• Bạn có thể thêm giao diện mới vào các tài liệu HTML cũ.
• Bạn hoàn toàn có thể thay đổi giao diện trang web của mình chỉ với một vài thay đổi trong mã CSS.

2.3 Tại sao sử dụng CSS

Đây là ba lợi ích chính của CSS:

Giải quyết một vấn đề lớn

Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một quá trình rất dài tốn thời gian và công sức. Ví dụ: Nếu bạn đang phát triển một trang web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một khuyến cáo của W3C.

Tiết kiệm rất nhiều thời gian

Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp.

Cung cấp thêm các thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web.

2.4 Hướng dẫn học CSS

Hướng dẫn học CSS hoặc hướng dẫn học CSS 3 cung cấp các khái niệm cơ bản và nâng cao về công nghệ CSS. Hướng dẫn CSS của chúng tôi được phát triển cho người mới bắt đầu và các chuyên gia. Các điểm chính của CSS được đưa ra dưới đây:

• CSS là viết tắt của Cascading Style Sheet.
• CSS được sử dụng để thiết kế các thẻ HTML.
• CSS là một ngôn ngữ được sử dụng rộng rãi trên web.
• HTML, CSS và JavaScript được sử dụng để thiết kế web. Nó giúp các nhà thiết kế web áp dụng phong cách trên các thẻ HTML.

2.5 Ví dụ về CSS

 

  
    
  
  
    
Write Your First CSS Example
    
This is Paragraph.
  

2.6 Các thuộc tính của CSS

Trong hướng dẫn này, bạn sẽ nhận được chi tiết về tất cả các thuộc tính CSS như background, border, font, float, display, margin, opacity, padding, text-align, vertical-align, position, color,...

Trên đây là bài viết của eLib.VN để giới thiệu đến bạn đọc hai ngôn ngữ cần thiết cho quá trình học và thực hành thiết kế web. Hy vọng những bài viết trong chủ đề này sẽ giúp bạn đọc gỡ bỏ những thắc mắc, ôn lại những kiến thức về thiết kế web.