fbpx
Adress 1: 225 Broadway Suite 680 New York
Adress 2: 318/3a Trịnh Đình Trọng, Tân Phú, Hồ Chí Minh
Tổng đài miễn cước
1800 6016
Email
contact@websolutions.com.vn

HTML, CSS là gì? Tài liệu giáo trình học thiết kế web cơ bản từ A-Z

HTML, CSS là gì? Tài liệu giáo trình học thiết kế web cơ bản từ A-Z

HTML là gì?

HTML là một ngôn ngữ máy tính được tạo ra để cho phép tạo trang web. Nó tương đối dễ học, với những điều cơ bản có thể tiếp cận được với hầu hết mọi người. HTML liên tục được sửa đổi và tiến hóa để đáp ứng nhu cầu và yêu cầu của người dùng Internet đang phát triển dưới sự chỉ đạo của W3C – tổ chức chịu trách nhiệm thiết kế và duy trì ngôn ngữ.

Định nghĩa của HTML là HyperText Markup Language:

  • Siêu văn bản là phương pháp mà bạn di chuyển trên web – bằng cách nhấp vào văn bản đặc biệt gọi là siêu liên kết sẽ đưa bạn đến trang tiếp theo. Thực tế là siêu chỉ có nghĩa là nó không tuyến tính – tức là bạn có thể đến bất kỳ nơi nào trên Internet bất cứ khi nào bạn muốn bằng cách nhấp vào liên kết – không cần thứ tự.
  • Đánh dấu là những gì các thẻ HTML làm cho văn bản bên trong. Họ đánh dấu nó là một loại văn bản nhất định ( ví dụ văn bản in nghiêng ).
  • HTML là một ngôn ngữ, vì nó có các từ mã và cú pháp như bất kỳ ngôn ngữ nào khác.

HTML bao gồm một loạt các mã ngắn được kỹ thuật lập trình thiết kế web nhập vào tệp văn bản – các thẻ. Sau đó, văn bản được lưu dưới dạng tệp html và được xem qua trình duyệt web, như Internet Explorer hoặc Netscape Navigator. Trình duyệt này đọc tệp và dịch văn bản thành dạng có thể nhìn thấy, hiển thị trang như lập trình viên đã dự định. Viết HTML đòi hỏi phải sử dụng các thẻ chính xác để tạo tầm nhìn. Bạn có thể sử dụng mọi thứ từ trình soạn thảo văn bản thô sơ đến trình soạn thảo đồ họa phức tạp để tạo các trang HTML.

Các phần chính bao gồm:

  1. Thẻ mở: Bao gồm tên của phần tử, được bao bọc trong dấu ngoặc góc mở và đóng. Điều này nói lên nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực.
  2. Thẻ đóng: Giống như thẻ mở, nhưng bao gồm dấu gạch chéo chuyển tiếp trước tên thành phần. Điều này cho biết phần tử kết thúc. Không thêm thẻ đóng là một trong những lỗi người mới bắt đầu hay mắc phải.
  3. Nội dung: Đây là nội dung của phần tử.
  4. Phần tử: Thẻ mở, thẻ đóng và nội dung cùng nhau bao gồm phần tử.

CSS là gì? Và CSS liên quan đến HMTL như thế nào?

Cascading Style Sheets (CSS) là ngôn ngữ để chỉ định cách trình bày tài liệu cho người dùng. Trình bày một tài liệu cho người dùng có nghĩa là chuyển đổi nó thành một hình thức có thể sử dụng cho đối tượng của bạn. Các trình duyệt, như Firefox, Chrome hoặc Internet Explorer, được thiết kế để trình bày các tài liệu một cách trực quan ví dụ như trên màn hình máy tính, máy chiếu hoặc máy in.

CSS là chữ viết tắt của Cascading Style Sheets với trọng tâm được đặt lên cách hiển thị. Trong khi HTML được sử dụng để cấu trúc một tài liệu web (xác định những thứ như tiêu đề và đoạn văn bản và cho phép nhúng hình ảnh, video và các phương tiện khác), thì CSS chỉ định bố cục, màu sắc và phông chữ..vv… của website đều được xác định bằng CSS. Có thể nói, HTML là nền tảng của ngôi nhà và CSS là sự lựa chọn thẩm mỹ phong cách nội thất.

CSS định hình phong cách cho trang web bằng cách tương tác với các yếu tố HTML. Các phần tử là các thành phần HTML riêng lẻ của một trang web, ví dụ như một đoạn văn bản mà trong HTML như thế này:

<p> Đây là đoạn của tôi! </ p>

Nếu bạn muốn làm cho đoạn này xuất hiện màu hồng và đậm cho những người đang xem trang web thông qua trình duyệt web, bạn sẽ sử dụng mã CSS giống như thế này:

p {màu: hồng; font-weight: in đậm; }

Trong trường hợp này,  “p” được gọi là bộ chọn của Bộ điều chỉnh, đó là một phần của mã CSS chỉ định phần tử nào của HTML mà kiểu CSS sẽ có hiệu lực. Trong CSS, bộ chọn được ghi ở bên trái của dấu ngoặc nhọn đầu tiên. Thông tin giữa các dấu ngoặc nhọn được gọi là khai báo, nó chứa các thuộc tính và giá trị được áp dụng cho bộ chọn.  Thuộc tính là những thứ như kích thước phông chữ, màu sắc và lề, trong khi các giá trị là cài đặt cho các thuộc tính đó. Trong ví dụ trên, cả hai màu và các màu có phông chữ đều là các thuộc tính, và màu hồng và màu đậm táo bạo là giá trị. Bộ khung đầy đủ:

{màu: hồng; font-weight: in đậm; }

Những nguyên tắc cơ bản tương tự này có thể được áp dụng để thay đổi kích thước phông chữ, màu nền, thụt lề và hơn thế nữa. Ví dụ. . .

body {màu nền: lightblue; }

có thể làm cho nền của trang của bạn màu xanh sáng

hoặc. . .

p {cỡ chữ: 20px; màu đỏ; }

. . .sẽ tạo một đoạn phông chữ cỡ 20pt với màu đỏ.

Tài liệu giáo trình học thiết kế web cơ bản từ A-Z

 


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 *