Khi bạn khởi đầu học lập trình thì những từ ngữ như HTML, CSS, Javascript, C #, … sẽ khiến bạn hoảng sợ không hiểu chúng là những gì, hiệu quả của chúng ra sao. Cho nên bài viết này được viết ra với mục tiêu ra mắt tổng quan và ý nghĩa, của 1 số ít cụm từ trong lập trình. Chúng ta khởi đầu với tổng quan HTML CSS để hiểu rõ hơn HTML là gì ? CSS là gì ? Và tại sao tất cả chúng ta cần nó để tăng trưởng Web .
Tổng quan HTML CSS – Xây dựng trang web đầu tiên của bạn
Nếu bạn hoàn toàn có thể, hãy tưởng tượng một thời hạn trước khi ý tưởng ra Internet. Các website không sống sót và sách, được in trên giấy, là nguồn thông tin chính của bạn. Vì vậy, bạn phải mất nỗ lực đáng kể để theo dõi thông tin đúng mực mà bạn cần .Hôm nay bạn hoàn toàn có thể mở trình duyệt web, đọc blog front end, chuyển qua công cụ tìm kiếm mà bạn chọn và tìm thông tin nằm trong tầm tay của bạn. Và rất hoàn toàn có thể ai đó ở đâu đó đã thiết kế xây dựng một website cho bạn sử dụng .
Trong cuốn sách này, tôi sẽ chỉ cho bạn cách xây dựng trang web bằng hai ngôn ngữ máy tính thống trị nhất là HTML và CSS.
Trước khi chúng tôi mở màn hành trình dài tìm hiểu và khám phá cách kiến thiết xây dựng website bằng HTML và CSS, điều quan trọng là phải hiểu sự độc lạ giữa hai ngôn từ, cú pháp của từng ngôn từ và 1 số ít thuật ngữ phổ cập .
HTML & 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.
Hai ngôn từ 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 pháp luật, HTML sẽ luôn đại diện thay mặt cho nội dung và CSS sẽ luôn bộc lộ sự Open của nội dung đó .Với sự độc lạ giữa HTML và CSS, tất cả chúng ta hãy đi sâu vào HTML chi tiết cụ thể hơn .
Hiểu các thuật ngữ HTML phổ biến
Khi mở màn với HTML, bạn hoàn toàn có thể sẽ gặp những thuật ngữ mới và thường là những thuật ngữ lạ. Theo thời hạn, 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ổ cập bạn nên mở màn là elements, tags, và attributes .
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à
); danh sách tiếp tục bao gồm ,
, , , và , và nhiều hơn nữa nhiều.
Các element được xác lập bằng cách sử dụng dấu ngoặc nhỏ hơn và lớn hơn bao quanh tên element .
Tags
Việc sử dụng những dấu ngoặc nhỏ hơn và lớn hơn bao quanh một element sẽ tạo ra cái được gọi là thẻ. Thẻ thường xảy ra nhất trong những cặp thẻ mở và đóng .
Một thẻ mở đánh dấu sự bắt đầu của một element. Nó bao gồm một dấu nhỏ hơn theo sau là tên của một element và sau đó kết thúc bằng dấu lớn hơn; ví dụ,
.
Một thẻ đóng lưu lại vào cuối của một element. Nó gồm có một dấu nhỏ hơn đến dấu gạch chéo và tên của element và sau đó kết thúc bằng dấu lớn hơn ; ví dụ ,
.Nội dung nằm giữa thẻ mở và thẻ đóng là nội dung của element đó. Ví dụ, một link anchor sẽ có thẻ mở và thẻ đóng. Những gì rơi vào giữa hai thẻ này sẽ là nội dung của link anchor đó .
Attributes
Các attribute là những thuộc tính được sử dụng để cung ứng thông tin bổ trợ về một element. Các thuộc tính thông dụng nhất gồm có thuộc tính id, xác lập một element ; những thuộc tính class, phân loại một element ; thuộc tính src, trong đó xác lập một nguồn cho nội dung nhúng ; và thuộc tính href, cung ứng một tham chiếu hyperlink đến một tài nguyên được link .Các thuộc tính được xác lập trong thẻ mở, sau tên của một thành phần. Nói chung những thuộc tính gồm có tên và giá trị. Định dạng cho những thuộc tính này gồm có 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 gồm có một thuộc tính href sẽ trông như sau :Shay Howe
Thiết lập cấu trúc tài liệu HTML
Tài liệu HTML là tài liệu văn bản thuần được lưu với. html chứ không phải. txt. Để mở màn viết HTML, thứ nhất bạn cần một trình soạn thảo văn bản đơn thuần mà bạn cảm thấy tự do khi sử dụng. Đáng buồn thay, điều này không gồm có Microsoft Word hoặc Pages, vì đó là những trình soạn thảo văn bản đa dạng và phong phú. Hai trong số những 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 sửa chữa thay thế không tính tiền cũng gồm có 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:
, ,
, và .
Khai báo loại tài liệu, hoặc
, 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à
. Theo sau khai báo loại tài liệu, là biểu thị phần đầu của tài liệu.
Bên trong ,
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 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
. Cấu trúc tài liệu HTML điển hình trông như thế này:
html
This is a web page .
Hiểu các thuật ngữ CSS phổ biến
Ngoài những thuật ngữ HTML, có một vài thuật ngữ CSS phổ cập mà bạn sẽ muốn làm quen. Những thuật ngữ này gồm có selectors, properties, và values. Cũng như HTML, bạn càng thao tác với CSS, những thuật ngữ này sẽ càng trở nên quen thuộc .
Selectors
Khi những yếu tố được thêm vào một website, chúng hoàn toàn có thể được tạo kiểu bằng CSS. Selector chỉ định đúng chuẩn thành phần nào trong HTML để nhắm tiềm năng và vận dụng những kiểu ( như sắc tố, size và vị trí ) vào. Selector hoàn toàn có thể gồm có sự tích hợp của những vòng sơ loại khác nhau để chọn những yếu tố duy nhất, tổng thể tùy thuộc vào mức độ đơn cử mà chúng tôi muốn. Ví dụ : chúng tôi hoàn toàn có thể chọn mỗi đoạn trên một trang hoặc chúng tôi hoàn toàn có thể chỉ muốn chọn một đoạn đơn cử 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ư
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 .
Properties
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 {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 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 px .p {color : orange ;font-size : 16 px ;}
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
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.
Các tùy chọn khác để thêm CSS
Các tùy chọn khác để tham chiếu CSS gồm có sử dụng những internal và inline style. Bạn hoàn toàn có thể phát hiện những lựa chọn này trong tự nhiên, nhưng chúng thường không được ưng ý, vì chúng làm cho việc update website 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
của tài liệu HTML,
đượ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 .
Để CSS hiển thị đúng chuẩn, đường dẫn của thuộc tính href phải đối sánh tương quan trực tiếp đến nơi lưu tệp CSS. Trong ví dụ trước, main.css được tàng trữ trong cùng một vị trí với tệp HTML, còn được gọi là thư mục gốc .Nếu tệp CSS nằm trong thư mục con, thuộc tính href cần đối sánh tương quan với đường dẫn này cho tương thích. Ví dụ : nếu main.css của chúng tôi được tàng trữ trong thư mục con có tên stylesheets, thuộc tính href sẽ là stylesheets / main.css, sử dụng dấu gạch chéo về phía trước để bộc lộ việc chuyển sang thư mục con .Tại thời gian này, những web đang khởi đầu sôi động hơn, chậm nhưng chắc như đinh. Chúng tôi chưa đào sâu vào CSS quá nhiều, nhưng bạn hoàn toàn có thể nhận thấy rằng một số ít thành phần có kiểu mặc định mà chúng tôi chưa khai báo trong CSS của chúng tôi. Đó là trình duyệt áp đặt những kiểu CSS ưa thích của riêng nó cho những yếu tố đó .
Tóm lại
Chúng ta đã thực thi một vài thử thách lớn trong bài học kinh nghiệm này .Nghĩ mà xem, giờ đây bạn đã biết những điều cơ bản về HTML và CSS. Khi chúng tôi liên tục và bạn dành nhiều thời hạn hơn để viết HTML và CSS, bạn sẽ trở nên tự do hơn nhiều với hai ngôn từ .Tóm lại, cho đến nay chúng tôi đã đề cập đến những điều sau đây :
- Sự khác biệt giữa HTML và CSS
- Làm quen với các yếu 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 với các bộ chọn, thuộc tính và giá trị CSS
- Làm việc với các bộ chọn CSS
- Tham khảo CSS trong HTML của bạn
