Thực đơn
trang chủChương trình

HTML là gì và nó dùng để làm gì? Khái niệm cơ bản về HTML và CSS cho người mới bắt đầu. Tại sao tôi cần điều này?

Trước khi bắt đầu hành trình qua các bài học xây dựng trang web HTML và CSS, điều quan trọng là phải hiểu sự khác biệt giữa hai ngôn ngữ, cú pháp của từng ngôn ngữ và một số thuật ngữ cơ bản.

HTML và CSS là gì?

HTML (Ngôn ngữ đánh dấu siêu văn bản) xác định cấu trúc nội dung và ý nghĩa của nó, xác định nội dung như tiêu đề, đoạn văn hoặc hình ảnh. CSS (Cascading Style Sheets) hay các biểu định kiểu xếp tầng là ngôn ngữ trình bày được tạo ra để thiết kế vẻ bề ngoài nội dung sử dụng, ví dụ như phông chữ hoặc màu sắc.

Hai ngôn ngữ này - HTML và CSS - độc lập với nhau và sẽ vẫn như vậy. CSS không nên được viết bên trong tài liệu HTML và ngược lại. Theo nguyên tắc chung, HTML sẽ luôn thể hiện nội dung và CSS sẽ luôn xác định kiểu dáng.

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

Điều khoản HTML cơ bản

Trước khi bắt đầu làm việc với HTML, bạn có thể sẽ gặp một số thuật ngữ mới và thường là lạ. Bạn sẽ trở nên quen thuộc hơn với tất cả chúng theo thời gian, nhưng bây giờ bạn nên bắt đầu với ba thuật ngữ HTML cơ bản - thành phần, thẻ và thuộc tính.

Yếu tố

Các phần tử xác định cách xác định cấu trúc và nội dung của các đối tượng trên một trang. Một số phần tử thường được sử dụng bao gồm nhiều cấp độ tiêu đề (được định nghĩa là các phần tử có

trước

) và các đoạn văn (được định nghĩa là

); Bạn có thể bao gồm các phần tử trong danh sách ,

, , Và và nhiều người khác.

Các phần tử được xác định bằng dấu ngoặc nhọn<>, bao quanh tên phần tử. Vì vậy, phần tử sẽ trông như thế này:

Thẻ

Thêm dấu ngoặc nhọn< и >tạo ra cái được gọi là thẻ xung quanh phần tử. Thẻ thường xuất hiện theo cặp thẻ mở và đóng.

Thẻ mở đánh dấu sự bắt đầu của phần tử. Nó bao gồm một biểu tượng<, затем идёт имя элемента и завершается символом >; Ví dụ,

.

Thẻ đóng đánh dấu sự kết thúc của phần tử. Nó bao gồm một biểu tượng< с последующей косой чертой и именем элемента и завершается символом >; Ví dụ,

.

Nội dung xuất hiện giữa thẻ mở và thẻ đóng chính là nội dung của phần tử đó. Ví dụ: một liên kết sẽ có thẻ mở và thẻ đóng. Giữa hai thẻ này sẽ là nội dung của liên kết.

Vì vậy, các thẻ liên kết sẽ trông giống như thế này:

...

Thuộc tính

Thuộc tính là các thuộc tính được sử dụng để cung cấp thông tin thêm về phần tử đó. Các thuộc tính phổ biến nhất bao gồm thuộc tính id, xác định phần tử; thuộc tính lớp, phân loại phần tử; thuộc tính src, chỉ định nguồn của nội dung được nhúng; và thuộc tính href, chỉ định liên kết đến 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 phần tử. 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 trong dấu ngoặc kép. Ví dụ, phần tử với thuộc tính href sẽ trông như thế này:

Shay Howe

Trình diễn các thuật ngữ HTML cơ bản

Mã này sẽ hiển thị dòng chữ "Shay Howe" trên một trang web và khi nhấp vào dòng chữ này sẽ đưa người dùng đến http://shayhowe.com. Phần tử liên kết được khai báo bằng thẻ mở và thẻ đóng bao gồm văn bản cũng như thuộc tính và giá trị của địa chỉ liên kết được khai báo qua href="http://shayhowe.com" trong thẻ mở.

Cơm. 1,01. Cú pháp HTMLở dạng sơ đồ bao gồm phần tử, thuộc tính và thẻ

Bây giờ bạn đã biết các thành phần, thẻ và thuộc tính HTML là gì, hãy xem trang web đầu tiên của chúng ta. Nếu có gì mới ở đây, đừng lo lắng - chúng tôi sẽ chia nhỏ nó khi chúng tôi tiếp tục.

Tùy chỉnh cấu trúc tài liệu HTML

Tài liệu HTML là tài liệu văn bản đơn giản được lưu với phần mở rộng .html thay vì .txt. Để bắt đầu viết HTML, trước tiên bạn cần một trình soạn thảo văn bản mà bạn cảm thấy thoải mái khi sử dụng. Thật không may, điều này không bao gồm Phần mềm soạn thảo văn bản hoặc Trang vì đây là những trình soạn thảo phức tạp. Hai trình soạn thảo văn bản phổ biến nhất để viết HTML và CSS là Dreamweaver và văn bản tuyệt vời. Các lựa chọn thay thế miễn phí cũng như Notepad++ cho Windows và TextWrangler cho Mac.

Tất cả tài liệu HTML đều chứa cấu trúc bắt buộc, bao gồm các khai báo và thành phần sau: , , Và .

Thông báo loại tài liệu hoặcnằm ở phần đầu của tài liệu HTML và cho trình duyệt biết phiên bản HTML nào đang được sử dụng. Vì chúng tôi sẽ sử dụng phiên bản HTML mới nhất nên loại tài liệu của chúng tôi sẽ đơn giản là. Sau đó là phần tử cho biết sự bắt đầu của một tài liệu.

Bên trong yếu tố định nghĩa phần trên cùng tài liệu, bao gồm nhiều siêu dữ liệu khác nhau (thông tin kèm theo về trang). Nội dung bên trong một phần tử không xuất hiện trên chính trang web đó. Thay vào đó, nó có thể bao gồm tiêu đề của tài liệu (xuất hiện trên thanh tiêu đề của cửa sổ trình duyệt), liên kết đến bất kỳ tệp bên ngoài nào hoặc bất kỳ siêu dữ liệu hữu ích nào khác.

Tất cả nội dung hiển thị của trang web sẽ được chứa trong phần tử . Cấu trúc của một tài liệu HTML điển hình trông như thế này:

Chào thế giới!

Chào thế giới!

Đây là một trang web.

Trình diễn cấu trúc tài liệu HTML

Mã này hiển thị tài liệu, bắt đầu bằng việc khai báo loại tài liệu,, sau đó ngay lập tức có phần tử . Bên trong các yếu tố đang đến Và . Yếu tố chứa mã hóa trang thông qua thẻ và tiêu đề của tài liệu thông qua phần tử . Yếu tố <body>bao gồm tiêu đề thông qua phần tử <h1>và một đoạn văn bản thông qua<р>. Bởi vì cả tiêu đề và đoạn văn đều được lồng trong phần tử <body>, chúng được hiển thị trên trang web.</p><p>Khi một phần tử nằm bên trong một phần tử khác, còn được gọi là phần tử lồng nhau, bạn nên thụt lề phần tử đó để giữ cho cấu trúc tài liệu được tổ chức tốt và dễ đọc. Trong đoạn mã trước cả hai phần tử <head>Và <body>lồng nhau và dịch chuyển trong phần tử <html>. Cấu trúc thụt lề cho các phần tử tiếp tục với các phần tử mới được thêm vào bên trong <head>Và <body> .</p><h3>Yếu tố tự đóng</h3><p>Trong ví dụ trước, phần tử <meta>là thẻ duy nhất không có thẻ đóng. Đừng lo lắng, điều này đã được thực hiện có chủ ý. Không phải tất cả các phần tử đều bao gồm thẻ mở và thẻ đóng. Một số thành phần chỉ nhận nội dung hoặc hành vi thông qua các thuộc tính trong một thẻ duy nhất. <meta>là một trong những yếu tố như vậy. Nội dung phần tử <meta>trong ví dụ này nó được gán bằng thuộc tính bộ ký tự và một giá trị. Các yếu tố tự đóng điển hình khác bao gồm:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Giảm cấu trúc được thực hiện bằng cách sử dụng khai báo loại tài liệu<!DOCTYPE html>và các yếu tố <html> , <head>Và <body>, khá phổ biến. Chúng tôi muốn giữ cấu trúc tài liệu này thuận tiện vì chúng tôi sẽ sử dụng nó thường xuyên khi tạo tài liệu HTML mới.</p><h3>Xác thực mã</h3><p>Cho dù chúng ta có viết mã cẩn thận đến đâu thì lỗi vẫn không thể tránh khỏi. May mắn thay, khi viết HTML và CSS, chúng ta có trình xác thực để kiểm tra công việc của mình. W3C cung cấp trình xác thực HTML và CSS để quét mã để tìm lỗi. Việc xem lại mã của chúng tôi không chỉ giúp mã hiển thị chính xác trong tất cả các trình duyệt mà còn giúp dạy các phương pháp hay nhất khi viết mã.</p><h2>Trên thực tế</h2><p>Với tư cách là nhà thiết kế web và nhà phát triển giao diện người dùng, chúng tôi có vinh dự được tham dự một số hội nghị lớn dành riêng cho nghề của mình. Chúng ta sẽ tổ chức Hội nghị Phong cách của riêng mình và tạo một trang web cho nó trong suốt các bài học tiếp theo. Như thế này!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Hãy chuyển hướng khỏi HTML một chút và xem xét CSS. Hãy nhớ rằng, HTML xác định nội dung và cấu trúc của các trang web của chúng ta, trong khi CSS xác định phong cách và hình thức trực quan của chúng.</p><h2>Điều khoản CSS cơ bản</h2><p>Ngoài ra <a href="https://viws.ru/vi/tipy-tegov-html-slovar-html-terminov.html">Thuật ngữ HTML</a> Ngoài ra còn có một số thuật ngữ CSS cơ bản mà bạn cần phải làm quen. Các thuật ngữ này bao gồm bộ chọn, thuộc tính và giá trị. Cũng giống như thuật ngữ HTML, bạn càng làm việc với CSS nhiều thì những thuật ngữ này càng trở thành bản chất thứ hai.</p><h3>Bộ chọn</h3><p>Khi bạn thêm các thành phần vào trang web, chúng có thể được tạo kiểu bằng CSS. Bộ chọn xác định phần tử hoặc các phần tử 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í) cho. Bộ chọn có thể bao gồm sự kết hợp của nhiều số liệu khác nhau để chọn các phần tử duy nhất, tùy thuộc vào mức độ cụ thể mà chúng tôi muốn. Ví dụ: chúng tôi muốn chọn mọi đoạn trên một trang hoặc chỉ chọn một đoạn cụ thể.</p><p>Bộ chọn thường được liên kết với một giá trị thuộc tính, chẳng hạn như giá trị id hoặc lớp hoặc tên thành phần, chẳng hạn như <h1>hoặc<р> .</p><p>Trong CSS, bộ chọn được kết hợp với dấu ngoặc nhọn (), bao quanh các kiểu được áp dụng cho phần tử đã chọn. Bộ chọn này nhắm mục tiêu tất cả các phần tử <span><p>P(...)</p><h3>Của cải</h3><p>Khi một phần tử được chọn, thuộc tính sẽ xác định kiểu sẽ được áp dụng cho phần tử đó. Tên thuộc tính đặt sau bộ chọn, bên trong dấu ngoặc nhọn () và ngay trước dấu hai chấm. Có nhiều thuộc tính mà chúng ta có thể sử dụng, chẳng hạn như nền, màu sắc, cỡ chữ, chiều cao và chiều rộng cũng như các thuộc tính thường được thêm khác. Trong đoạn mã sau, chúng tôi xác định các thuộc tính màu sắc và kích thước phông chữ áp dụng cho tất cả các thành phần <span><p>P (màu: ...; cỡ chữ: ...; )</p><h3>Giá trị</h3><p>Cho đến nay, chúng tôi chỉ chọn một phần tử thông qua bộ chọn và xác định kiểu nào chúng tôi muốn áp dụng cho phần tử đó thông qua các thuộc tính. Bây giờ chúng ta có thể thiết lập hành vi của thuộc tính này thông qua một giá trị. Các giá trị có thể được chỉ định dưới dạng văn bản giữa dấu hai chấm và dấu chấm phẩy. Dưới đây chúng tôi chọn tất cả các yếu tố <p >Và đặt giá trị thuộc tính màu thành màu cam và giá trị thuộc tính cỡ chữ thành 16 pixel.</p><p>P ( màu: cam; cỡ chữ: 16px; )</p><p>Để kiểm tra điều này, trong CSS, bộ quy tắc của chúng tôi bắt đầu bằng bộ chọn, ngay sau đó là dấu ngoặc nhọn. Các dấu ngoặc nhọn này chứa các khai báo bao gồm các cặp thuộc tính và giá trị. Mỗi khai báo bắt đầu bằng một thuộc tính, theo sau là dấu hai chấm, giá trị của thuộc tính và cuối cùng là dấu chấm phẩy.</p><p>Một cách thực hành phổ biến là dịch chuyển các cặp thuộc tính và giá trị bên trong dấu ngoặc nhọn. Giống như HTML, thụt lề giúp giữ cho mã của chúng ta có tổ chức và rõ ràng.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Cơm. 1,03. Cấu trúc cú pháp CSS bao gồm bộ chọn, thuộc tính và giá trị</p><p>Biết một số thuật ngữ cơ bản và cú pháp CSS chung là một khởi đầu tuyệt vời, nhưng chúng ta cần đề cập thêm một số điểm trước khi đi sâu vào. Đặc biệt, chúng ta cần xem xét kỹ hơn cách hoạt động của bộ chọn trong CSS.</p><h2>Làm việc với bộ chọn</h2><p>Bộ chọn, như đã đề cập trước đó, cho biết phần tử HTML nào sẽ được tạo kiểu. Điều quan trọng là phải hiểu đầy đủ cách sử dụng bộ chọn và cách chúng hoạt động. Bước đầu tiên nên làm quen <a href="https://viws.ru/vi/vidy-usb-razemov-tipy-usb-gid-po-razlichnym-standartam-kakie-byvayut.html">nhiều loại khác nhau</a> bộ chọn. Chúng ta sẽ bắt đầu với các bộ chọn cơ bản nhất: bộ chọn loại, lớp và mã định danh.</p><h3>Bộ chọn loại</h3><p>Bộ chọn loại các phần tử mục tiêu theo loại của chúng. Ví dụ: nếu chúng ta muốn nhắm mục tiêu tất cả các phần tử <div>chúng ta phải sử dụng bộ chọn div. Đoạn mã sau hiển thị bộ chọn loại cho các phần tử <div>, cũng như HTML tương ứng.</p><p>Phân(...)</p><p> <div>...</div> <div>...</div> </p><h3>Các lớp học</h3><p>Các lớp cho phép bạn chọn một phần tử dựa trên giá trị của thuộc tính lớp. Bộ chọn lớp cụ thể hơn một chút so với bộ chọn loại vì chúng chọn một nhóm phần tử cụ thể thay vì tất cả các phần tử cùng loại.</p><p>Các lớp cho phép bạn áp dụng cùng một kiểu cho các phần tử khác nhau cùng một lúc bằng cách sử dụng cùng một giá trị thuộc tính lớp cho nhiều phần tử.</p><p>Trong CSS, các lớp được biểu thị bằng dấu chấm ở đầu, theo sau là giá trị của thuộc tính lớp. Bộ chọn lớp bên dưới chọn tất cả các phần tử chứa giá trị của thuộc tính lớp tuyệt vời, bao gồm các phần tử <div>Và <span><p>Tuyệt vời (...)</p><p> <div class="awesome">...</div> </p><h3>Số nhận dạng</h3><p>Mã định danh thậm chí còn chính xác hơn các lớp vì chúng chỉ nhắm mục tiêu một phần tử duy nhất tại một thời điểm. Giống như bộ chọn lớp sử dụng giá trị của thuộc tính lớp, mã định danh sử dụng giá trị của thuộc tính id làm bộ chọn.</p><p>Bất kể loại phần tử nào được hiển thị, giá trị thuộc tính id chỉ có thể được sử dụng một lần trên một trang. Nếu có id thì chúng sẽ được dành riêng cho các phần tử quan trọng.</p><p>Trong CSS, số nhận dạng được biểu thị bằng ký hiệu băm ở phía trước, theo sau là giá trị của thuộc tính id. Ở đây id sẽ chỉ chọn phần tử chứa thuộc tính id có giá trị shayhowe.</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Bộ chọn bổ sung</h3><p>Bộ chọn là những thứ cực kỳ mạnh mẽ và những thứ được mô tả ở trên là một trong những bộ chọn phổ biến nhất mà chúng tôi gặp. Những bộ chọn này chỉ là sự khởi đầu. Có rất nhiều bộ chọn nâng cao có sẵn và chúng luôn sẵn có. Khi bạn đã cảm thấy thoải mái với chúng, đừng ngại thử xem một số cái nâng cao hơn.</p><p>Được rồi, hãy bắt đầu sắp xếp mọi thứ lại với nhau. Chúng tôi thêm các phần tử vào trang bên trong HTML của mình, sau đó chúng tôi có thể chọn các phần tử đó và tạo kiểu cho chúng bằng CSS. Bây giờ chúng ta hãy kết nối các điểm giữa HTML và CSS để hai ngôn ngữ này hoạt động cùng nhau.</p><h2>Kết nối CSS</h2><p>Để làm cho CSS tương tác với HTML, chúng ta phải trỏ đến tệp CSS từ HTML. Một cách thực hành tốt là đưa tất cả các kiểu của chúng ta vào một tệp bên ngoài, tệp này được trỏ đến bên trong phần tử <head>tài liệu HTML của chúng tôi. Sử dụng một <a href="https://viws.ru/vi/markirovka-spiska-css-pravila-css-dlya-nastroiki-vneshnego-vida-spiska.html">CSS bên ngoài</a> cho phép chúng tôi áp dụng các phong cách giống nhau trên toàn bộ trang web và nhanh chóng thực hiện các thay đổi đối với nó.</p><h3>Các tùy chọn khác để thêm CSS</h3><p>Các tùy chọn khác để kết hợp CSS bao gồm sử dụng kiểu nội bộ và nội tuyến. Bạn có thể gặp những tùy chọn này trong thực tế, nhưng chúng thường không được tán thành vì chúng khiến việc cập nhật trang web trở nên cồng kềnh và cồng kềnh.</p><p>Để tạo biểu định kiểu bên ngoài, một lần nữa chúng tôi muốn sử dụng trình soạn thảo văn bản mà mình lựa chọn để tạo một tệp văn bản mới có phần mở rộng .css. Tệp CSS của chúng tôi phải được lưu trong cùng thư mục hoặc thư mục con với tệp HTML của chúng tôi.</p><p>Bên trong một phần tử <head>phần tử được áp dụng <link>, xác định mối quan hệ giữa các tệp HTML và CSS. Vì chúng tôi liên kết với CSS nên chúng tôi sử dụng <a href="https://viws.ru/vi/teg-noindex-atribut-nofollow-sekrety-ispolzovaniya-kak-pravilno-ispolzovat.html">thuộc tính rel</a> với một giá trị biểu định kiểu để biểu thị mối quan hệ của chúng. Ngoài ra, thuộc tính href được sử dụng để chỉ ra vị trí hoặc đường dẫn của tệp CSS.</p><p>Trong tài liệu HTML mẫu sau đây, phần tử <head>trỏ đến một tệp kiểu bên ngoài.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Để CSS hiển thị chính xác, giá trị đường dẫn của thuộc tính href phải khớp trực tiếp với nơi lưu trữ tệp CSS. Trong ví dụ trước, tệp main.css được lưu trữ ở cùng vị trí với tệp HTML, còn được gọi là thư mục gốc.</p><p>Nếu file CSS nằm trong thư mục con thì giá trị của thuộc tính href phải tương ứng với đường dẫn đó. Ví dụ: nếu tệp main.css của chúng tôi được lưu trong thư mục con có tên là bảng định kiểu, thì giá trị của thuộc tính href sẽ là bảng định kiểu/main.css. Điều này sử dụng dấu gạch chéo (hoặc dấu gạch chéo) để biểu thị việc di chuyển đến thư mục con.</p><p>Hiện tại, các trang của chúng tôi đang bắt đầu đi vào cuộc sống, chậm rãi nhưng chắc chắn. Chúng tôi chưa tìm hiểu sâu về CSS, nhưng bạn có thể nhận thấy rằng một số thành phần có kiểu mà chúng tôi không khai báo trong CSS. Chính trình duyệt sẽ áp đặt các kiểu ưa thích của riêng nó cho các thành phần này. May mắn thay, chúng ta có thể viết lại các kiểu này khá dễ dàng, đó là điều chúng ta sẽ làm tiếp theo bằng cách sử dụng thiết lập lại CSS.</p><h2>Sử dụng đặt lại CSS</h2><p>Mỗi trình duyệt có cái riêng <a href="https://viws.ru/vi/bootstrap-bystryi-start-dobavlyaem-sobstvennye-stili-v-twitter-bootstrap.html">phong cách riêng</a> mặc định cho các phần tử khác nhau. Làm sao <a href="https://viws.ru/vi/flibusta-alternativnyi-vhod-yanvar-rasshireniya-dlya-google-chrome-plagin-dlya-google.html">Google Chrome</a> hiển thị tiêu đề, đoạn văn, danh sách, v.v., có thể khác với cách Internet Explorer thực hiện. Được sử dụng rộng rãi để đảm bảo khả năng tương thích với các trình duyệt khác nhau <a href="https://viws.ru/vi/primer-veb-stranicy-v-bloknote-kak-sozdat-web-stranicu-ispolzovanie-sbrosa-css.html">đặt lại css</a>.</p><p>Đặt lại CSS lấy tất cả các thành phần HTML cơ bản với một kiểu nhất định và cung cấp <a href="https://viws.ru/vi/kak-krasivo-oformit-profil-v-instagram-v-edinom-stile-kak.html">phong cách thống nhất</a> cho tất cả các trình duyệt. Việc đặt lại này thường liên quan đến việc xóa kích thước, phần đệm, lề hoặc kiểu bổ sung làm giảm các giá trị này. Vì phân tầng CSS hoạt động từ trên xuống dưới (bạn sẽ sớm tìm hiểu về điều đó) - việc thiết lập lại của chúng tôi phải ở vị trí cao nhất trong phong cách của chúng tôi. Điều này đảm bảo rằng những kiểu này được đọc đầu tiên và thế là xong. <a href="https://viws.ru/vi/gde-naiti-javascript-v-brauzere-kak-vklyuchit-java-ili-javascript-v-raznyh-brauzerah.html">các trình duyệt khác nhau</a> sẽ bắt đầu làm việc từ một điểm tham chiếu chung.</p><p>Có rất nhiều cách đặt lại CSS khác nhau có sẵn để sử dụng, tất cả đều có điểm mạnh riêng. Một trong những cách phổ biến nhất của Eric Meyer, thiết lập lại CSS của anh ấy được điều chỉnh để bao gồm các phần tử HTML5 mới.</p><p>Nếu bạn cảm thấy thích phiêu lưu một chút, thì cũng có Normalize.css do Nicholas Gallagher tạo ra. Normalize.css không tập trung vào việc sử dụng thiết lập lại cứng cho tất cả các thành phần cốt lõi mà thay vào đó là cài đặt <a href="https://viws.ru/vi/fotografii-dlya-shapki-kanala-kak-iz-lyuboi-kartinki-sdelat.html">phong cách phổ biến</a> cho những phần tử này. Điều này đòi hỏi sự hiểu biết sâu hơn về CSS, cũng như kiến ​​thức về những gì bạn muốn đạt được từ các kiểu.</p><h3>Khả năng tương thích và thử nghiệm trên nhiều trình duyệt</h3><p>Như đã đề cập trước đó, các trình duyệt khác nhau hiển thị các phần tử khác nhau. Điều quan trọng là phải nhận ra tầm quan trọng của khả năng tương thích và thử nghiệm trên nhiều trình duyệt. Các trang web không được trông giống hệt nhau trong tất cả các trình duyệt mà phải gần giống nhau. Bạn muốn hỗ trợ trình duyệt nào và bạn sẽ phải đưa ra quyết định ở mức độ nào dựa trên những gì tốt nhất cho trang web của mình.</p><p>Có một số điều cần chú ý khi viết CSS. Tin tốt là bạn có thể làm được tất cả và chỉ cần một chút kiên nhẫn là bạn có thể thành thạo nó.</p><h2>Trên thực tế</h2><p>Hãy quay lại nơi chúng ta đã dừng lại lần cuối trên trang hội nghị của mình và xem cách chúng ta có thể thêm một số CSS.</p><ol><li>Bên trong thư mục style-conference của chúng ta, hãy tạo <a href="https://viws.ru/vi/pochemu-postoyanno-otkryvaetsya-yandeks-brauzer-v-novom-okne.html">thư mục mới</a> tài sản được đặt tên. Đây là nơi chúng ta sẽ lưu trữ tất cả tài nguyên cho trang web của mình, chẳng hạn như kiểu, hình ảnh, video, v.v. Đối với kiểu của chúng ta, hãy tiếp tục và thêm một thư mục biểu định kiểu khác bên trong thư mục nội dung.</li><li>Sử dụng trình soạn thảo văn bản, hãy tạo một tệp mới có tên main.css và lưu nó vào thư mục bảng định kiểu mà chúng ta vừa tạo.</li><p>Nhìn vào file index.html trong trình duyệt chúng ta có thể thấy các phần tử <h1>Và <p>Đã chứa kiểu mặc định. Đặc biệt, chúng có kích thước phông chữ và không gian xung quanh độc đáo. Sử dụng thiết lập lại của Eric Meyer, chúng tôi có thể làm mềm các kiểu này, cho phép mỗi kiểu bắt đầu từ cùng một cơ sở. Để làm điều này, hãy xem trang web của anh ấy, sao chép mã và dán nó vào đầu tệp main.css của chúng tôi.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Giấy phép: không có (miền công cộng) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, từ viết tắt, địa chỉ, lớn, trích dẫn, mã, del, dfn, em, img, ins, kbd, q, s, samp, nhỏ, đình công, mạnh mẽ, phụ, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, biểu mẫu, nhãn, chú giải, bàn, chú thích, tbody, tfoot, thead, tr, th, td, bài viết, sang một bên, canvas, chi tiết, nhúng, hình, figcaption, chân trang, tiêu đề, hgroup, menu, nav, đầu ra, ruby, phần, tóm tắt, thời gian, dấu, âm thanh, video ( lề: 0; đệm: 0; viền: 0; cỡ chữ: 100%; phông chữ: kế thừa; căn chỉnh dọc: đường cơ sở ; ) /* Đặt lại vai trò hiển thị HTML5 cho các trình duyệt cũ hơn */ bài viết, sang một bên, chi tiết, figcaption, hình, chân trang, tiêu đề, hgroup, menu, điều hướng, phần ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:trước, blockquote:after, q:trước, q:after ( content: ""; content: none; ) bảng ( border- sụp đổ: sụp đổ; khoảng cách đường viền: 0; )</p><li>Tệp main.css của chúng ta đang bắt đầu thành hình, vì vậy hãy kết nối nó với tệp index.html. Mở index.html trong trình soạn thảo văn bản và thêm phần tử <link>V. <head>, ngay sau phần tử <title> .</li><li>Vì chúng ta đang trỏ đến các kiểu thông qua phần tử <link>thêm thuộc tính rel với biểu định kiểu giá trị.</li><p>Chúng tôi cũng sẽ bao gồm một liên kết đến tệp main.css bằng thuộc tính href. Hãy nhớ rằng, tệp main.css của chúng ta được lưu trong thư mục stylesheets, nằm bên trong thư mục assets. Vì vậy, giá trị của thuộc tính href, là đường dẫn đến tệp main.css của chúng ta, phải là assets/stylesheets/main.css.</p><p> <head> <meta charset="utf-8"> <title>Hội nghị phong cách

Đã đến lúc kiểm tra công việc của chúng tôi và xem HTML và CSS của chúng tôi phối hợp với nhau như thế nào. Việc mở tệp index.html (hoặc làm mới trang nếu nó đã mở) trong trình duyệt sẽ hiển thị kết quả hơi khác so với trước đây.

Cơm. 1.04. Trang web Hội nghị về Phong cách của chúng tôi có cài đặt lại CSS

Demo và mã nguồn

Dưới đây bạn có thể xem trang web Styles Conference ở trạng thái hiện tại và cũng có thể tải xuống nguồn trang web vào thời điểm hiện tại.

Bản tóm tắt

Vì vậy, mọi thứ đều ổn! Chúng tôi đã thực hiện một số bước quan trọng trong hướng dẫn này.

Nghĩ mà xem, bây giờ bạn đã biết những điều cơ bản về HTML và CSS. Khi chúng tôi tiếp tục và bạn dành nhiều thời gian hơn để viết HTML và CSS, bạn sẽ cảm thấy thoải mái hơn nhiều khi làm việc với hai ngôn ngữ này.

Để tóm tắt lại, chúng tôi đã đề cập đến những điều sau:

  • Sự khác biệt giữa HTML và CSS.
  • Giới thiệu về các phần tử, thẻ và thuộc tính HTML.
  • Thiết lập cấu trúc của trang web đầu tiên của bạn.
  • Làm quen Bộ chọn CSS, thuộc tính và giá trị.
  • Làm việc với bộ chọn CSS.
  • Con trỏ tới CSS từ HTML.
  • Tầm quan trọng của việc thiết lập lại CSS.

Bây giờ chúng ta hãy xem xét kỹ hơn về HTML và làm quen một chút với ngữ nghĩa.

Tài nguyên và liên kết

  • Các thuật ngữ HTML phổ biến thông qua Scripting Master
  • Thuật ngữ và định nghĩa CSS thông qua các trang web ấn tượng
  • Công cụ CSS: Đặt lại CSS qua Eric Meyer

HTML là ngôn ngữ đánh dấu siêu văn bản đã tạo nên Internet mà chúng ta biết và yêu thích. Nhờ công cụ tuyệt vời này mà các trang web trông đẹp và hiện đại, đồng thời đảm bảo tính dễ sử dụng. HTML chỉ đơn giản là sắp xếp các thành phần của trang web thành định dạng thân thiện với người dùng. Công việc của nó có thể so sánh với những gì mọi người như MS Word hay OpenOffice làm. Họ biến một khối chữ cái vô nghĩa thành một tài liệu chứa các đoạn văn, văn bản in đậm, in nghiêng, bảng và thậm chí cả hình ảnh. Ngôn ngữ HTML thực hiện gần giống như vậy, với điểm khác biệt duy nhất là tài liệu của nó được hiển thị trong trình duyệt và khả năng của công cụ này rộng hơn nhiều so với khả năng của công cụ này. soạn thảo văn bản. Thẻ được sử dụng để đánh dấu - các lệnh đặc biệt mô tả cấu trúc của trang web. Chúng được đặt trong dấu ngoặc nhọn -<тег>, để trình duyệt có thể phân biệt chúng với phần lớn văn bản. Tiếp theo, chúng tôi sẽ đề cập đến những điều cơ bản về HTML cho người mới bắt đầu.

Trình chỉnh sửa trực quan

Những người mới bắt đầu con đường học HTML thường bắt đầu công việc của họ với các chương trình cho phép bạn tạo trang web mà không cần bất kỳ kiến ​​thức nào. Trong đó, bạn có thể chỉ cần sắp xếp các thành phần trên màn hình theo cách chúng sẽ được hiển thị trong trình duyệt. Có vẻ như đây là nguồn ân sủng vĩnh cửu cho phép bạn loại bỏ phần lớn các nhà phát triển web. Nhưng không phải mọi thứ đều đơn giản như vậy, vì các trình soạn thảo trực quan có rất nhiều thiếu sót khiến chúng không thể được sử dụng trong các dự án nghiêm túc.

Tất cả các chương trình này tạo ra rất nhiều thẻ không cần thiết khiến trang cuối cùng trở nên khó sử dụng và kém tối ưu. Tất nhiên, ở thời đại chúng ta Internet tốc độ caoĐiều này ít quan trọng hơn trước đây, nhưng có một số lý do tại sao một trang web ngắn gọn và được viết tốt lại thực tế hơn so với trang web được tạo bằng trình chỉnh sửa trực quan. Một trang web được tạo trong một chương trình như vậy sẽ được các robot tìm kiếm xử lý kém, vì mỗi kilobyte mã đều quan trọng đối với chúng và những mã cồng kềnh và phi logic với nhiều mã khó có thể phù hợp với sở thích của chúng. Ngoài ra, các biên tập viên thường tụt hậu so với thời đại, trở nên không phù hợp và việc dành nguồn lực cho sự phát triển của họ là không thực tế vì không có chuyên gia nào sử dụng các sản phẩm này. Vì vậy, bất kỳ ai muốn làm việc trong ngành phát triển trang web đều phải biết những điều cơ bản về HTML.

Thẻ

Như đã đề cập ở trên, thẻ mô tả cấu trúc của trang web đối với trình duyệt. Hầu hết chúng đều có thẻ mở và đóng, nhưng không phải tất cả. Ví dụ, ..., nơi thay vì dấu chấm có nội dung. Cái đầu tiên hiển thị nơi thẻ bắt đầu và cái thứ hai đóng nó lại. Có thể có các phần tử đánh dấu trang khác bên trong; chúng có thể được lồng vào nhau giống như một con búp bê lồng vào nhau. Điều quan trọng là phải đóng thẻ kịp thời để trang được hiển thị chính xác.

Ngoài ra còn có các thẻ đơn không cần phải đóng. Trong đó, nội dung được đặt bên trong, giống như nó có thể được viết cho hầu hết các thẻ HTML và đặt các thuộc tính của phần tử. Nó được biểu thị trong thẻ mở và trông giống như thế này: thuộc tính="...", trong đó thay vì dấu chấm có giá trị thuộc tính. Biết thẻ là điều đầu tiên và quan trọng nhất bước quan trọngđể làm chủ HTML. Những điều cơ bản của nghệ thuật này cũng liên quan đến việc hiểu cấu trúc của một trang web.

Cấu trúc tài liệu

Mỗi tài liệu HTML đều có phần mở rộng tương ứng, ví dụ Index.html. Bằng cách này, trình duyệt có thể hiểu những gì nó đang xử lý và hiển thị trang một cách chính xác. Bạn nên lưu trữ tất cả các tệp được sử dụng để tạo trang web trong một thư mục, điều này sẽ giúp cuộc sống của bạn sau này dễ dàng hơn nhiều. Kiến thức cơ bản về ngôn ngữ đánh dấu siêu văn bản HTML đòi hỏi sự hiểu biết rõ ràng về cấu trúc tài liệu. Nó bắt đầu bằng thẻ, thông báo cho trình duyệt biết phiên bản HTML đang được sử dụng trong tài liệu này. Hiện tại, phiên bản thứ năm của ngôn ngữ này có liên quan nên không cần phải phát minh ra bất cứ thứ gì, bạn có thể chèn thẻ trên vào đầu bất kỳ trang nào một cách an toàn.

Sau đó là các cấu trúc được ghép nối chính tạo nên “bộ khung” của trang web. Thẻ đầu tiên trong đó tất cả các thẻ khác được lồng vào nhau là .... Bất cứ thứ gì bên ngoài nó không được trình duyệt nhận ra là một trang web, vì vậy nó sẽ mở tài liệu và đóng nó lại. Thẻ này là bắt buộc đối với bất kỳ tài liệu nào. Nó cũng chứa một số thẻ bắt buộc khác, sẽ được thảo luận bên dưới.

Cái đầu

Bên trong một thẻ ... chứa thông tin kỹ thuật sẽ không được hiển thị trên trang nhưng vẫn là một phần quan trọng tài liệu HTML. Nền tảng của trang web được đặt ở nơi này; ở đây mã hóa được chọn và tên trang được nhập. Nó được chứa bên trong thẻ bắt buộc .... Tiêu đề được hiển thị ở đầu trình duyệt, nơi bạn cũng có thể đặt một biểu tượng nhỏ mô tả nội dung của trang. Nên chỉ ra ngay mã hóa của tài liệu để hiển thị chính xác. Điều này có thể được thực hiện bằng cách sử dụng thẻ . Thẻ meta cung cấp thông tin về cấu trúc của trang và thường nằm bên trong phần đầu trang.

liên kết

Biết những điều cơ bản về HTML cũng liên quan đến việc sử dụng kiểu xếp tầng hoặc css. Họ đặt thuộc tính của các thành phần sẽ được hiển thị trên trang. Cách tiếp cận hiện đại nhiệm vụ này liên quan đến việc bao gồm các đặc điểm như màu sắc, chiều cao và vị trí của phần tử, trong tập tin bên ngoàiđể thuận tiện hơn. Để bao gồm tệp css, hãy sử dụng thẻ . Khi hoàn thành nó trông giống như thế này: , trong đó href cho biết vị trí của tệp và type cho biết loại của nó.

Thân hình

Phần hiển thị của trang được tạo trong phần này của tài liệu HTML. Mọi thứ được thực hiện bên trong "nội dung" sẽ được trình duyệt hiển thị. TRONG Một số lượng lớn các thẻ HTML được sử dụng. Những điều cơ bản là định dạng văn bản, làm việc với các liên kết và các công cụ cơ bản để cấu trúc một trang web. Để bắt đầu làm việc với HTML, bạn chỉ cần biết các thẻ cơ bản và có thể sử dụng chúng. Dưới đây là những cái phổ biến nhất: