Thuật ngữ HTML và CSS là gì? HTML/CSS có thể nói là khởi đầu của mọi tất cả vấn đề liên quan tới web, dù bạn là người làm nghành nào, miễn là có đụng tới quản trị web thì ít nhất phải biết qua hai cái này. Nếu bạn có ý định học lập trình web thì lại càng nên thành thạo hai cái này, nếu bạn là blogger chuyên viết bài thì cũng nên nắm cái này.

HTML và CSS là gì?

HTML, HyperText Markup Language, cung cấp cấu trúc nội dung và ý nghĩa bằng cách xác định nội dung đó, ví dụ như tiêu đề, đoạn văn hoặc hình ảnh. CSS, hay Cascading Style Sheets, là ngôn ngữ trình bày được dùng để tạo kiểu cho sự xuất hiện của nội dung sử dụng, ví dụ như phông chữ hoặc màu sắc.

ai ngôn ngữ HTML và CSS độc lập với nhau và vẫn giữ nguyên như vậy. CSS không nên được viết bên trong một tài liệu HTML và ngược lại. Theo quy định, HTML sẽ luôn đại diện cho nội dung và CSS sẽ luôn thể hiện sự xuất hiện của nội dung đó.

Với sự khác biệt giữa HTML và CSS, chúng ta hãy đi sâu vào HTML chi tiết hơn.

Lý do bạn nên biết một chút về HTML và CSS là gì?

Thiết kế một email tuyệt vời cho khách hàng của bạn

Email đang được xem là một trong những công cụ online marketing tốt nhất hiện nay. Và bạn có thể tạo ra một email khiến khách hàng thực sự mong muốn nhận được bằng cách tổ chức và định dạng nó sử dụng các editor HTML và CSS có sẵn ở hầu hết các dịch vụ email marketing.

Tạo một bản tin tuyệt đẹp cho công ty

Sau khi bạn đã gây ấn tượng với những email tuyệt đẹp, hãy nâng nó lên cấp độ cao hơn với một mẫu bản tin (newsletter). HTML và CSS sẽ là vũ khí bí mật của bạn, một lần nữa khi bạn bố cục và tùy chỉnh mẫu đó để phù hợp với thương hiệu và phong cách công ty của bạn.

Tinh chỉnh trang web WordPress của công ty bạn HTML và CSS là gì

Một tỷ lệ rất cao là các trang web của công ty thường được xây dựng trên nền tảng WordPress. Và đây là một tin tốt khi bạn biết một ít kiến thức về HTML và CSS, bởi vì bạn có thể sử dụng chúng để thêm nội dung và thay đổi trang web của công ty mình. Điều đó có nghĩa là sẽ không phải chờ đợi team web quá lâu để họ cập nhật một tính năng mà bạn yêu cầu!

Dạy đồng nghiệp của bạn (hoặc ông chủ!) một số code

Bạn có thể chia sẻ tình yêu về HTML và CSS với các đồng nghiệp của mình (hoặc thậm chí cấp trên của bạn)? Và kết quả là tất cả mọi người trong nhóm của bạn sẽ có thể cập nhật và cải thiện các trang web, email và các newsletter. Ahh, hãy tận hưởng niềm vui của việc ủy quyền!

Khiến cho đội ngũ kỹ thuật ngưỡng mộ bạn

Các lập trình viên làm việc với bạn sẽ rất vui sướng nếu bạn hiểu biết về HTML và CSS. Bạn sẽ biết làm thế nào để nói cho họ hiểu những gì nên thay đổi trên trang web của công ty (thay vì cứ đề cập tất cả mọi thứ một cách mơ hồ kiểu “ù ù cạc cạc”) cũng như hiểu rõ về các giới hạn và khả năng mà họ phải đối mặt hàng ngày.

Thể hiện kỹ năng của bạn với một blog Tumblr hoàn chỉnh

Nếu bạn muốn biến niềm đam mê lập trình thành nghề nghiệp của mình? Thật dễ dàng, hãy thiết lập một blog Tumblr để trưng ra những kết quả mà bạn đã làm được. Nếu bạn muốn gửi một sản phẩm thiết kế đồ họa tới nhà tuyển dụng, thì bạn có thể thực hiện qua cách này! Chỉ cần một chút kiến thức về HTML và CSS là đã có thể lấy một mẫu Tumblr để tạo ra một sản phẩm tuyệt đẹp.

Xây dựng một trang resume chuyên nghiệp – từ đầu! HTML và CSS là gì

Đi xa hơn việc xây dựng một blog Tumblr và thực sự cho thấy khả năng bằng cách tự tay lập trình từ đầu đến cuối trang web của bạn. Điều này có vẻ khó khăn, nhưng nó thực sự khá dễ dàng để tạo ra một trang web đơn giản nhưng rất đẹp với HTML và CSS cơ bản. Và bạn sẽ khiến cho nhà tuyển dụng tương lai cảm thấy bị sốc khi bạn nói với họ rằng mình đã tự tay làm ra trang web đó!

Nâng kỹ năng thiết kế của bạn lên một cấp độ mới

Nếu bạn đã là một “phù thủy” về Photoshop, và bạn có thể tạo ra một số mockup ấn tượng về trang web của mình. Thì việc có thêm một số kỹ năng HTML và CSS giúp bạn biến những mockup đó thành các trang web thực tế. Bạn có thể trở thành “unicorn” (một nhà thiết kế biết lập trình) mà nhiều công ty đang khao khát tuyển dụng hiện nay.

Bắt đầu học nhiều hơn – và kiếm được nhiều hơn!

Giống như tôi đã nói ở phần đầu, HTML và CSS là nền tảng của web. Vì vậy, chúng còn là nền tảng giúp cho những kỹ năng công nghệ của bạn nâng lên một cấp độ cao hơn. Việc có một kiến thức nền tảng sẽ làm cho việc học các ngôn ngữ lập trình khác (như JavaScript, Ruby hay PHP) trở nên dễ dàng hơn nhiều. Và bạn càng biết nhiều, thì càng nhiều cơ hội việc làm mở ra trước mắt bạn.

Hiểu các thuật ngữ HTML phổ biến HTML và CSS là gì

Khi bắt đầu với HTML, bạn có thể sẽ gặp các thuật ngữ mới và thường là các thuật ngữ lạ. Theo thời gian, bạn sẽ ngày càng trở nên quen thuộc hơn với chúng, nhưng ba thuật ngữ HTML phổ biến bạn nên bắt đầu là elements, tags, và attributes.

– Dynamic HTML(DHTML-HTML động): là ngôn ngữ HTML mở rộng làm tăng hiệu ứng trình bày văn bản và đối tượng khác. Trong FrontPage, bạn có thể sử dụng thanh công cụ DHTML Effects để làm tăng cường hiệu ứng cho các thành phần của mà không cần lập trình.

– Active Data Objects(ADO): Các thành phần gíup các ứng dụng của người dùng(client applications) truy cập và chế tác dữ liệu cơ sở dữ liệu trên server qua 1 nhà cung cấp.

– Active Server Page(ASP): là 1 tài liệu chứa script nhúng trên server . Web servers tương thích ASP có thể chạy các script này. Trên máy trạm, 1 ASP là 1 tài liệu HTML chuẩn có thể được xem trên bất kỳ máy nào trên Web browser nào.

– ActiveX: 1 tập hợp các kỹ thuật cho phép các thành phần phần mềm tương tác với một thành phần khác trong môi trường mạng, bất chấp ngôn ngữ của thành phần được tạo ra. ActiveX được dùng làm chính yếu để phát triển nội dung tương tác của World Wide Web, mặc dù nó có thể sử dụng trong các ứng dụng người-máy và các chương trình khác.

– URL(Uniform Resource Locator): địa chỉ tới một trạm Internet hay mạng nội bộ, laf 1 chuỗi cung cấp địa chỉ Internet của 1 Web site tài nguyên trên World Wide Web, đi theo sau 1 nghi thức. URL thường dùng là http://, để chỉ định địa chỉ Web site trên Internet. Những URL khác là gopher://, ftp://, mailto://…

– Bookmark: 1 vị trí trên 1 trang web có thể là đích của 1 hyperlink. 1 bookmark có thể áp dụng cho 1 chuỗi ký tự tồn tại trên trang ngăn cách bởi bất kỳ ký tự nào. Bookmarks cho phép tác giả link đến 1 phần đã chỉ định trên trang. Trong 1 URL, 1 bookmark được đánh dấu phía trước bằng dấu thăng(#). Cũng được gọi là neo(anchor).

– Web browser(Trình duyệt web): Phần mền phiên dịch đánh dấu của các file bằng HTML, định dạng chúng sang các trang Web, và thể hiện chúng cho người dùng. Vài browser có thể cho phép người dùng gởi nhận e-mail, đọc newsThuôc Nhóms, và thực hiện các file sound hoặc video đã được nhúng và trong tài liệu Web.

– Script: Một tập các chỉ lệnh dùng để báo cho chương trình biết cách thực hiện một thủ tục qui định, như đang nhập vào hệ thống thư điện tử chẳng hạn. Các khả năng script được cài sẵn trong một số chương trình. Bạn phải tìm hiểu cách viết script đó bằng loại ngôn ngữ không khác gì ngôn ngữ lập trình mini. Có một số chương trình ghi script này một cách tự động bằng cách ghi lại những lần gõ phím và chọn dùng lệnh của bạnh khi bạn tiến hành thủ tục này. Các script giống như các macro, trừ một điều là thuật ngữ macro được dành riêng để chỉ những script nào mà bạn có thể khởi đầu bằng cách ấn một tổ hợp phím do bạn tự quy định.

– Structured Query Language – SQL: Trong các hệ quản lý cơ sở dữ liệu, đây là ngôn ngữ vấn đáp do IBM soạn thảo được sử dụng rộng rãi trong máy tính lớn và hệ thống máy tính mini. SQL đang được trang bị trong các mạng khách/chủ như là một phương pháp làm cho các máy tính cá nhân có khả năng thâm nhập vào các tài nguyên của các cơ sở dữ liệu hợp tác. Ðây là loại ngôn ngữ độc lập với dữ liệu; người sử dụng không phải bận tâm đến vấn đề dữ liệu sẽ được thâm nhập vào bằng cách nào về mặt vật lý. Theo lý thuyết, SQL cũng độc lập với thiết bị; có thể dùng cùng một ngôn ngữ vấn đáp để thâm nhập vào các cơ sở dữ liệu trên máy tính lớn, máy tính mini, và máy tính cá nhân. Tuy nhiên, hiện nay có một số phiên bản của SQL đang bị cạnh tranh. SQL là một ngôn ngữ vấn đáp lịch sự và súc tích chỉ với 30 lệnh. Bốn lệnh cơ bản ( SELECT, UPDATE, DELETE, và INSERT) đáp ứng cho bốn chức năng xử lý dữ liệu cơ bản (phục hồi, cải tiến, xoá, và chèn vào). Các câu hỏi của SQL gần giống cấu trúc của một câu hỏi tiếng Anh tự nhiên. Kết quả của câu hỏi sẽ được biểu hiện trong một bản dữ liệu bao gồm các cột (tương ứng với các trường dữ liệu) và các hàng (tương ứng với các bản ghi dữ liệu).

Elements

Các element là các chỉ định xác định cấu trúc và nội dung của các đối tượng trong một trang. Một số yếu tố được sử dụng thường xuyên hơn bao gồm nhiều cấp độ tiêu đề (được xác định là <h1> đến <h6>) và đoạn văn (được xác định là <p>); danh sách tiếp tục bao gồm <a>, <div>, <span>, <strong>, và <em>, và nhiều hơn nữa nhiều.

Các element được xác định bằng cách sử dụng dấu ngoặc nhỏ hơn và lớn hơn < > bao quanh tên element.

Attributes HTML và CSS là gì

Các attribute là các thuộc tính được sử dụng để cung cấp thông tin bổ sung về một element. Các thuộc tính phổ biến nhất bao gồm thuộc tính id, xác định một element; các thuộc tính class, phân loại một element; thuộc tính src, trong đó xác định một nguồn cho nội dung nhúng; và thuộc tính href, cung cấp một tham chiếu hyperlink đến một tài nguyên được liên kết.

Các thuộc tính được xác định trong thẻ mở, sau tên của một thành phần. Nói chung các thuộc tính bao gồm tên và giá trị. Định dạng cho các thuộc tính này bao gồm tên thuộc tính theo sau là dấu bằng và sau đó là giá trị thuộc tính được trích dẫn. Ví dụ: một element <a> bao gồm một thuộc tính href sẽ trông như sau:

Thiết lập cấu trúc tài liệu html

Hai trong số các trình soạn thảo văn bản đơn giản phổ biến hơn để viết HTML và CSS là Dreamweaver và Sublime Text. Các lựa chọn thay thế miễn phí cũng bao gồm Notepad++ cho Windows và TextWrangler cho Mac.

Tất cả các tài liệu HTML có một cấu trúc cần thiết bao gồm việc khai báo và các yếu tố sau: <!DOCTYPE html>, <html>, <head>, và <body>.

Khai báo loại tài liệu, hoặc <!DOCTYPE html>, thông báo cho các trình duyệt web phiên bản HTML nào đang được sử dụng và được đặt ở phần đầu của tài liệu HTML. Bởi vì chúng tôi sẽ sử dụng phiên bản HTML mới nhất, khai báo loại tài liệu của chúng tôi chỉ đơn giản là <!DOCTYPE html>. Theo sau khai báo loại tài liệu, <html> là biểu thị phần đầu của tài liệu.

Bên trong <html>, <head> xác định phần trên cùng của tài liệu, bao gồm mọi metata (thông tin kèm theo về trang). Nội dung bên trong <head> không được hiển thị trên chính trang web. Thay vào đó, nó có thể bao gồm tiêu đề tài liệu (được hiển thị trên thanh tiêu đề trong cửa sổ trình duyệt), liên kết đến bất kỳ tệp bên ngoài hoặc bất kỳ metadata có lợi nào khác.

Tất cả nội dung hiển thị trong trang web sẽ nằm trong <body>. Cấu trúc tài liệu HTML điển hình trông như thế này:

<!DOCTYPE html>

<head>

<title>Hello World</title>

</head>

<body>

<h 1>Hello World</h 1>

</body>

</html>

Ngoài các thuật ngữ HTML, có một vài thuật ngữ CSS phổ biến mà bạn sẽ muốn làm quen. Những thuật ngữ này bao gồm selectors, properties, và values. Cũng như HTML, bạn càng làm việc với CSS, các thuật ngữ này sẽ càng trở nên quen thuộc.

Selectors

Khi các yếu tố được thêm vào một trang web, chúng có thể được tạo kiểu bằng CSS. Selector chỉ định chính xác thành phần nào trong HTML để nhắm mục tiêu và áp dụng các kiểu (như màu sắc, kích thước và vị trí) vào. Selector có thể bao gồm sự kết hợp của các vòng loại khác nhau để chọn các yếu tố duy nhất, tất cả tùy thuộc vào mức độ cụ thể mà chúng tôi muốn. Ví dụ: chúng tôi có thể chọn mỗi đoạn trên một trang hoặc chúng tôi có thể chỉ muốn chọn một đoạn cụ thể trên một trang.

Các selector thường nhắm mục tiêu một giá trị thuộc tính, chẳng hạn như một id hoặc class hoặc nhắm mục tiêu loại phần tử, chẳng hạn như <h1> hoặc <p>.

Trong CSS, các selector được theo sau với dấu ngoặc nhọn, {}, bao gồm các kiểu được áp dụng cho phần tử được chọn. Selector ở đây đang nhắm mục tiêu tất cả các <p>.

Properties HTML và CSS là gì

Khi một phần tử được chọn, một thuộc tính sẽ xác định các kiểu sẽ được áp dụng cho phần tử đó. Tên thuộc tính nằm sau selector, trong dấu ngoặc nhọn {} và ngay trước dấu hai chấm, :. Có rất nhiều thuộc tính chúng ta có thể sử dụng, chẳng hạn như background, color, font-size, height, và width, và các thuộc tính mới thường được thêm vào. Trong đoạn code sau, chúng tôi đang xác định các thuộc tính color và font-size được áp dụng cho tất cả các <p> :

p {

color: …;

font-size: …;

}

Values

Cho đến nay, chúng tôi đã chọn một element với selector và xác định kiểu chúng tôi muốn áp dụng với property. Bây giờ chúng ta có thể xác định hành vi của property đó với một value. Các giá trị có thể được xác định là văn bản giữa dấu hai chấm :, và dấu chấm phẩy, ;. Ở đây chúng tôi đang chọn tất cả các <p> và đặt giá trị của thuộc color thành orange và giá trị của thuộc tính font-size là 16 pixel.

p {

color: orange;

font-size: 16px;

}

Tham chiếu đến css

Để CSS nói chuyện với HTML, chúng tôi cần tham chiếu tệp CSS trong HTML. Cách thực hành tốt nhất để tham chiếu CSS là bao gồm tất cả các kiểu trong một stylesheet ngoài duy nhất, được tham chiếu từ bên trong <head> của tài liệu HTML. Sử dụng một stylesheet ngoài ngoài duy nhất cho phép chúng tôi sử dụng các kiểu giống nhau trên toàn bộ trang web và nhanh chóng thực hiện các thay đổi. HTML và CSS là gì

Các tùy chọn khác để thêm css

Các tùy chọn khác để tham chiếu CSS bao gồm sử dụng các internal và inline style. Bạn có thể bắt gặp những lựa chọn này trong tự nhiên, nhưng chúng thường không được tán thành, vì chúng làm cho việc cập nhật trang web trở nên cồng kềnh và khó sử dụng.

Để tạo stylesheet CSS bên ngoài, chúng tôi sẽ muốn sử dụng lại trình soạn thảo văn bản để tạo một tệp văn bản thuần túy mới có đuôi .css. Tệp CSS phải được lưu trong cùng một thư mục hoặc thư mục con, nơi đặt tệp HTML.

Trong <head> của tài liệu HTML, <link> được sử dụng để xác định mối quan hệ giữa tệp HTML và tệp CSS. Vì chúng tôi đang liên kết với CSS, chúng tôi sử dụng thuộc tính rel có giá trị stylesheet để chỉ định mối quan hệ của chúng. Hơn nữa, thuộc tính href (hoặc tham chiếu hyperlink) được sử dụng để xác định vị trí hoặc đường dẫn của tệp CSS.

Hãy xem xét ví dụ sau đây về một tài liệu HTML tham chiếu một external stylesheet.

<head>

</head>

Để CSS hiển thị chính xác, đường dẫn của thuộc tính href phải tương quan trực tiếp đến nơi lưu tệp CSS. Trong ví dụ trước, main.css được lưu trữ trong cùng một vị trí với tệp HTML, còn được gọi là thư mục gốc. HTML và CSS là gì

HTML và CSS là gì?