logoDanh mục
- Chương trình đào tạo Chương trình đào tạo
- Front-end Development Front-end Development
- Học tại trường Học tại trường
Khóa học Javascript+ReactJS Cơ bản
Khóa học Web Front-end development [160h]Bán chạy
Khóa học Fullstack Web với JavaScript
- Học trực tuyến Học trực tuyến
Khóa học ReactJS Nâng cao
- Học qua video Học qua video
Thành thạo CSS Flexbox trong 2 giờBán chạy
Xây dựng multi-level menu với CSS positionBán chạy
Học Javascript cơ bảnBán chạy
Xây dựng SPA shopping cart bằng Javascript thuầnBán chạy
Học Javascript nâng cao ES6Bán chạy
Xây dựng Chatbot với ReactJS trong 3 giờBán chạy
Giới thiệu HTML5 và CSS3 cơ bản
- Back-end Development Back-end Development
- Học tại trường Học tại trường
Khóa học NodeJS Cơ bản
Khóa học Golang cho lập trình backend
- Mobile Development Mobile Development
- Học tại trường Học tại trường
Khóa học Flutter cơ bảnMới
- Học qua video Học qua video
React Native Cơ bản
- Product Design & Management Product Design & Management
- Học tại trường Học tại trường
Khóa học Digital Product DesignMới
Khóa học nền tảng thiết kếMới
Khóa học thiết kế giao diệnMới
Khoá Học Thiết kế UX Cơ Bản Ngắn Hạn
Khoá học Product Management
- Học trực tuyến Học trực tuyến
Khoá học Product ManagementBán chạy
- Data Professional Data Professional
- Học tại trường Học tại trường
Khóa học Analysing & Visualizing Data với TableauBán chạy
Khóa học Analysing & Visualizing Data với Tableu nâng caoBán chạy
Khóa học Python Cơ Bản
Khoá học Data Analysis
Khoá học Data Processing & Analysis với PythonBán chạy
Khóa học Data Science Foundation
Khóa học Machine Learning cho Data Science
- Học trực tuyến Học trực tuyến
Khóa học Analysing & Visualizing Data với TableauBán chạy
Khoá học Data AnalysisBán chạy
Khoá học Data Processing & Analysis với PythonBán chạy
- Software Testing with Java Software Testing with Java
- Học tại trường Học tại trường
Khoá học Software Testing with Java [basic to advance]Mới
Khoá học Automation Test with Java [Basics]Mới
Khoá học Automation Test with Java [Advance]Mới
Khoá học Java for Automation TestingMới
- Development and Operations Development and Operations
- Học tại trường Học tại trường
Khoá học Devops [Development & Operations]Bán chạy
Kubernetes Training CourseMới
- Khóa học ngắn hạn khác Khóa học ngắn hạn khác
- Học tại trường Học tại trường
Khoá học Business Analysis FundamentalsBán chạy
Software performance optimizationMới
- Học trực tuyến Học trực tuyến
Khoá học Python Cơ BảnBán chạy
- Tư vấn cá nhân
- Sự kiện
- Blog
- Về chúng tôi Về chúng tôi
- Giới thiệu
- Tại sao chọn Nordic Coder
- Đội ngũ giảng viên
- Quy trình tuyển sinh
- Liên hệ
- Tuyển dụng 0Tài khoản
- Đăng ký
- Đăng nhậpĐào tạo doanh nghiệp 0 Trang chủ BlogsBlog
HTML là gì? CSS là gì? Tổng quan HTML CSS
24/12/2019
Khi bạn bắt đầu học lập trình thì những từ ngữ như HTML, CSS, Javascript, C#, sẽ khiến bạn bối rối không hiểu chúng là những gì, công dụng của chúng ra sao. Cho nên bài viết này được viết ra với mục đích giới thiệu tổng quan và ý nghĩa ,của một số cụm từ trong lập trình. Chúng ta bắt đầu với tổng quan HTML CSS để hiểu rõ hơn HTML là gì? CSS là gì? Và tại sao chúng ta cần nó để phát triển Web.
Tổng quan HTML CSS Xây dựng trang web đầu tiên của bạn
Nếu bạn có thể, hãy tưởng tượng một thời gian trước khi phát minh ra Internet.Các trang web không tồn tại 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 chính xác mà bạn cần.
Hôm nay bạ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 có thể ai đó ở đâu đó đã xây dựng một trang web 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 bắt đầu hành trình tìm hiểu cách xây dựng trang web bằng 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ữ phổ biến.
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 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.
Hiểu các thuật ngữ HTML phổ biến
Khi bắt đầu với HTML, bạn có thể sẽ gặp cácthuậ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.
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à
đến] và đoạn văn [được xác định là
];danh sách tiếp tục bao gồm, 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. Việc sử dụng các 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 các cặp thẻ mở và đóng. Mộtthẻ 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ộtthẻ đóngđánh dấu vào cuối của một element.Nó bao gồm 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 liên kết 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 liên kết anchor đó. Các attributelà 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ồmthuộc tính id, xác định một element;cácthuộ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ộtelement bao gồm mộtthuộc tính href sẽ trông như sau: 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.Để 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 đơn giản mà bạn cảm thấy thoải mái khi sử dụng.Đáng buồn thay, điều này không bao gồm Microsoft Word hoặc Pages, vì đó là những trình soạn thảo văn bản phong phú.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:,,, 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: Hello World This is a web page. Ngoài các thuật ngữ HTML, có một vàithuật ngữ CSSphổ biếnmà bạn sẽ muốn làm quen.Những thuật ngữ này bao gồmselectors,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. 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.Selectorchỉ đị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ộtid hoặcclass 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 . 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ácthuộc tínhcolor vàfont-size được áp dụng cho tất cả các : p { color: ; font-size: ; } 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ộccolor thànhorange và giá trị của thuộc tínhfont-size là16 pixel. p { color: orange; font-size: 16px; } Để 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 để 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 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ụngthuộ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ínhhref [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ộttài liệu HTMLtham chiếu một external stylesheet. Để 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. Nếu tệp CSS nằm trong thư mục con,thuộc tính href cần tương quan với đường dẫn này cho phù hợp.Ví dụ: nếumain.csscủa chúng tôiđược lưu trữ trong thư mục con có tênstylesheets,thuộc tính href sẽ làstylesheets/main.css, sử dụng dấu gạch chéo về phía trước để biểu thị việc chuyển sang thư mục con. Tại thời điểm này, các web đang bắt đầu sống động hơn, chậm nhưng chắc chắn.Chúng tôi chưa đào sâu vào CSS quá nhiều, nhưng bạn có thể nhận thấy rằng một số 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 các kiểu CSS ưa thích của riêng nó cho các yếu tố đó. Chúng ta đã thực hiện một vài thử thách lớn trong bài học 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ẽ trở nên thoải mái hơn nhiều với hai ngôn ngữ. Tóm lại, cho đến nay chúng tôi đã đề cập đến những điều sau đây: 01/02/2021 28/01/2021 27/01/2021 26/01/2021 Blog 19/08/2020 Blog 14/08/2020 Blog 13/08/2020 Đăng ký để được nhận ngay những tin tức độc quyền về sự kiện hấp dẫn và chương trình khuyến mãi sắp diễn ra! Please leave this field empty. © Nordic Coder 2021. Đã đăng ký Bản quyền.Tags
Attributes
Thiết lập cấu trúc tài liệu HTML
Hello World
Hiểu các thuật ngữ CSS phổ biến
Selectors
hoặc
Properties
Values
Tham chiếu đến CSS
Các tùy chọn khác để thêm CSS
Tóm lại
BÀI VIẾT NỔI BẬT
Name Cheap là gì? Có nên mua tên miền của Name Cheap?
Top những khoá học về business analysis
Chứng chỉ Certified Business Analysis Professional là gì
Lương của business analyst hiện nay
Bài viết mới nhất
Cách Lựa Chọn Laptop Cho Dân Đồ HọaNếu bạn là dân thiết kế đồ họa, dân xây dựng kiến trúc, người chuyên dựng phim video, người tạo game 3D, thì bài viết này là dành riêng cho bạn, vì ngành của bạn đặc biệt hơn các ngành khác khi chọn mua Laptop.Dưới đây là một số kinh nghiệm hữu ích cho những []
Các bạn đã hiểu gì về Hosting ? Top những hosting tốt nhất hiện nayCác website ngày nay trở thành một phần không thể thiếu trong việc marketing online của các công ty, và để có một website hoàn chỉnh thì hosting được xem như là một chìa khóa quan trọng. Nhưng bạn đã biết hosting là gì chưa? Như nào là hosting tốt nhất? Cách chọn hosting tốt []
Hiểm họa hacker dùng kỹ thuật jackpotting để đánh lừa máy ATM tự động phun tiền mặtHiểm họa hacker dùng kỹ thuật jackpotting để đánh lừa máy ATM tự động phun tiền mặt.Nếu không tìm được giải pháp sớm cho vấn đề này, đây có thể sẽ là nguy cơ lớn đối với các ngân hàng và máy ATM trên toàn cầu. Nếu không tìm được giải pháp sớm cho vấn []
TRUNG TÂM ĐÀO TẠO
LẬP TRÌNH VIÊN QUỐC TẾNordic Coder
Đào tạo
Chính sách
Video liên quan
Chủ Đề