html là một ngôn ngữ cơ bản và dễ học cho người mới học lập trình mà bạn cần biết và thành thạo. Vậy, html là gì? vietnix sẽ chia sẻ mọi thứ chi tiết cho bạn dưới đây. Xem bây giờ.
html là gì?
html (viết tắt của Ngôn ngữ đánh dấu siêu văn bản) hoặc Ngôn ngữ đánh dấu siêu văn bản . Xây dựng và cấu trúc lại các thành phần trong một trang web hoặc ứng dụng bằng html. HTML có thể được hỗ trợ bởi các công nghệ như css và các ngôn ngữ kịch bản như javascript.
html không phải là ngôn ngữ lập trình, có nghĩa là nó không thể tạo các hàm “động”. Giống như microsoft word, html được sử dụng để sắp xếp và định dạng các trang web.
html kết hợp với css và javascript sẽ là nền tảng vững chắc cho thế giới trực tuyến. Các phần tử html được phân tách bằng thẻ, được viết trong dấu ngoặc nhọn. Ví dụ & lt; p & gt; chào mừng bạn đến với vietnix & lt; / p & gt ;.
html trừu tượng (Ngôn ngữ đánh dấu siêu văn bản)
Lịch sử của html
html Được tạo ra bởi nhà vật lý tim berners-lee tại trung tâm nghiên cứu cern ở Thụy Sĩ. Ông đã thiết kế và viết siêu văn bản và siêu văn bản trên Internet. Siêu văn bản được hiểu là văn bản chứa các liên kết giúp người xem tiếp cận ngay lập tức.
Hiện tại, html đã trở thành một tiêu chuẩn Internet được vận hành và phát triển bởi w3c (World Wide Web Consortium). Bạn luôn có thể tự tìm kiếm các bản cập nhật mới nhất cho html trên trang web của w3c.
Html
công khai đầu tiên là một tài liệu có tên “ thẻ html ” được đề cập trên Internet vào cuối năm 1991. Nó bao gồm 18 phần tử html đơn giản và html sau này. html đều có các thẻ và thuộc tính mới.
Phần tử html đã được duy trì bởi các nhà cung cấp phần mềm thương mại kể từ năm 1996 làm đầu vào cho World Wide Web Consortium.
Vào năm 2000, html đã trở thành một tiêu chuẩn quốc tế và vào năm 2004, html5 trong Nhóm làm việc về công nghệ ứng dụng siêu văn bản web đã được hoàn thành vào năm 2014. Nó thêm các thẻ vào phần đánh dấu để chỉ định nội dung là gì, ví dụ: như & lt; article & gt ;, & lt; header & gt ;, & lt; footer & gt; .
Sau đó, bạn có thể đã biết định nghĩa của html và cách html đã phát triển trong vài thập kỷ qua. Để tìm hiểu thêm về html, hãy đọc các phần sau.
& gt; & gt; Xem thêm: Mã web là gì? Loại mã web đáng tin cậy nhất
html hoạt động như thế nào?
tài liệu html là các tệp có đuôi .html hoặc .htm. Với những tập tin này, bạn có thể xem chúng bằng bất kỳ trình duyệt nào (google chrome, firefox, safari …). Trình duyệt đọc các tệp html này và chuyển đổi chúng thành hình ảnh trực quan trên internet để người dùng có thể xem và hiểu chúng.
Thông thường một trang web có nhiều trang html, chẳng hạn như: trang chủ, giới thiệu, liên hệ, blog, v.v. Mỗi trang như vậy cần một trang html riêng biệt. Mỗi trang html chứa một tập hợp các thẻ (phần tử) xác định từng khối của trang web và tạo thành cấu trúc của các phần, đoạn, tiêu đề và các khối nội dung khác.
Hầu hết các phần tử html có thẻ mở và thẻ đóng & lt; tag & gt; & lt; / tag & gt ;. Bạn có thể xem cấu trúc của html:
Vị trí:
Phần tử
- được bao quanh bởi một thẻ tách & lt; div & gt; & lt; / div & gt; để đánh dấu toàn bộ nội dung.
- theo sau là các thẻ tiêu đề & lt; h1 & gt; & lt; / h1 & gt ;, & lt; h2 & gt; & lt; / h2 & gt ;, & lt; 3 & gt; & lt; / h3 & gt ;.
- Đoạn & lt; p & gt; & lt; / p & gt ;.
- Hình ảnh & lt; img & gt ;.
- Đoạn thứ hai chứa thẻ & lt; a & gt; & lt; / a & gt; thuộc tính href chứa url mục tiêu.
- Thẻ hình ảnh chứa 2 thuộc tính: src cho hình ảnh và alt cho mô tả hình ảnh.
& gt; & gt; Xem thêm: Các thẻ đầu vào trong html là gì? Các ví dụ cụ thể toàn diện
Ưu và nhược điểm của
html là gì?
Ngoài những ưu điểm nổi bật, html cũng có những nhược điểm cần khắc phục. Cùng vietnix tìm nó ở phần bên dưới.
lợi thế của html
html có những ưu điểm sau:
- Một cộng đồng với nhiều tài nguyên.
- Chạy trơn tru trên tất cả các trình duyệt.
- Đánh dấu được sử dụng trong html ngắn gọn, chất lượng cao và nhất quán cao.
- Sử dụng mã nguồn mở và miễn phí.
- Tích hợp dễ dàng với các ngôn ngữ phụ trợ (php, node.js, ..).
Nhược điểm html
Nói đến ưu điểm thì không thể không kể đến nhược điểm của html. Hãy nói chi tiết về một số nhược điểm của html:
- chủ yếu được sử dụng cho các trang web tĩnh, nếu bạn muốn làm cho nó động, bạn cần sử dụng javascript hoặc ngôn ngữ phụ trợ khác.
- Cần tạo từng trang html. Ngay cả khi có rất nhiều phần tử lặp lại như đầu trang và chân trang.
- Thật khó để kiểm soát cách tệp html của trình duyệt được đọc và hiển thị (một số trình duyệt cũ hơn không hiển thị các tab mới, vì vậy các tab mới không được hiển thị.), ngay cả khi các tab được sử dụng trong tài liệu html , các trình duyệt không thể đọc chúng).
- Một số trình duyệt cập nhật chậm để hỗ trợ các tính năng html mới.
html có phải là ngôn ngữ lập trình không?
Trả lời: HTML không phải là một ngôn ngữ lập trình và mặc dù nó được tạo thành từ các thành phần của một trang web, nó không có các khả năng “động” của một trang web. Khi bạn hiểu html là gì? và quen thuộc với các thẻ và thuộc tính cơ bản, việc triển khai html rất đơn giản. Ngoài ra, bạn cần hiểu thêm một số thẻ nâng cao để việc lập trình web HTML được hoàn thiện và chuẩn hóa hơn.
Vai trò của html trong lập trình mạng
html là một ngôn ngữ đánh dấu siêu văn bản và hầu hết các chức năng của nó xoay quanh định nghĩa này. HTML giúp hình thành cấu trúc cơ bản của một trang web (bao gồm khung, bố cục phân chia các phần tử của trang web) một cách dễ hiểu hơn và giúp khai báo các tệp kỹ thuật số như video, nhạc, hình ảnh, v.v.
Hơn nữa, ưu điểm nổi tiếng và mạnh mẽ nhất của html là khả năng xây dựng cấu trúc và biến một trang web thành một hệ thống hoàn chỉnh. html giúp trang web có cấu trúc tốt để sử dụng các thành phần khác nhau trong văn bản.
Tùy theo từng quan điểm, lập trình viên có thể lựa chọn ngôn ngữ lập trình riêng cho website của mình tùy theo mục đích sử dụng. Nhưng html chứa các yếu tố mà mọi trang web cần. Trang web của bạn sẽ cần sử dụng ngôn ngữ html để hiển thị nội dung cho khách truy cập. Đây là trường hợp cho dù một trang web được xây dựng trên nền tảng nào, sử dụng bất kỳ ngôn ngữ lập trình nào để giao tiếp để xử lý dữ liệu.
Các thuật ngữ html phổ biến
Mọi người có thể gặp khó khăn với các thuật ngữ mới và khó hiểu khi bắt đầu với html, đây là 3 thuật ngữ html phổ biến bạn nên biết để phục vụ cho công việc của mình.
- Phần tử : Các phần tử mà vietnix muốn nhắc đến là tên gọi quy định nội dung và cấu trúc của các đối tượng trong cùng một trang web. Một số phần tử thường được sử dụng hơn bao gồm các tiêu đề nhiều cấp (được định nghĩa là & lt; h1 & gt; đến & lt; h6 & gt;) và các đoạn văn (được định nghĩa là & lt; p & gt;); danh sách tiếp tục bao gồm & lt; a & gt ;, & lt; div & gt ;, & lt; span & gt;, & lt; strong & gt; và & lt; em & gt ;, v.v. Các phần tử được xác định bằng cách sử dụng dấu ngoặc nhỏ hơn và lớn hơn & lt; & gt; bao quanh tên phần tử.
- thẻ : Một phần tử được bao quanh bởi dấu ngoặc nhọn & lt; & gt; tạo thẻ. Các thẻ thường xuất hiện trong các cặp thẻ bắt đầu và thẻ kết thúc. Ví dụ: thẻ mở là một chỉ báo cho bạn biết sự bắt đầu của một phần tử (ví dụ: & lt; div & gt;). Thẻ đóng đánh dấu phần cuối của một phần tử và trông giống như dấu ngoặc đơn + dấu gạch chéo + dấu ngoặc đơn (ví dụ: & lt; / div & gt;). Giữa thẻ mở và thẻ đóng là nội dung của phần tử.
- Thuộc tính : Thuộc tính là những thuộc tính cung cấp thông tin bổ sung về một phần tử. Các thuộc tính bao gồm tên và giá trị, đồng thời được xác định sau tên phần tử và trong thẻ mở. Các thuộc tính có định dạng: tên thuộc tính + dấu bằng + giá trị thuộc tính được tham chiếu. Ví dụ: phần tử & lt; a & gt; bao gồm thuộc tính href: & lt; a href = “http://shayhowe.com/” & gt; shayulle & lt; / a & gt ;. Một số thuộc tính tôi sử dụng nhiều là thuộc tính class, id, src, href …
Bố cục html là gì?
html Có nhiều thẻ khác nhau, mỗi thẻ có một nhiệm vụ nhất định giúp xây dựng cấu trúc hoàn chỉnh cho trang web.
Bạn có thể xem mẫu mã bên dưới để xem bố cục html của trang trông như thế nào:
Vị trí:
Các thẻ phổ biến trong html
- & lt;! doctype html & gt; : khai báo kiểu dữ liệu hiển thị.
- & lt; html & gt; và & lt; / html & gt; : Cặp thẻ bắt buộc, phần tử cấp cao nhất, bao gồm tất cả nội dung của trang html.
- & lt; head & gt; and & lt; / head & gt; : khai báo thông tin meta trang như tiêu đề trang, bộ ký tự.
- & lt; title & gt; và & lt; / title & gt; : Một cặp thẻ trong thẻ & lt; head & gt; khai báo tiêu đề của trang.
- & lt; body & gt; và & lt; / body & gt; : Một cặp thẻ chứa tất cả nội dung sẽ hiển thị trên trang.
- & lt; h1 & gt; & lt; / h1 & gt ;, & lt; h2 & gt; & lt; / h2> : định dạng dữ liệu tiêu đề. Thông thường, có 6 cấp độ tiêu đề trong html, từ & lt; h1 & gt; đến & lt; h6 & gt ;. trong đó & lt; h1 & gt; là cấp tiêu đề cao nhất và & lt; h6 & gt; là cấp tiêu đề thấp nhất.
- & lt; p & gt; và & lt; / p & gt; : Một cặp thẻ chứa văn bản của trang web.
li>
Có hai loại thẻ html chính: Cấp độ khối và Thẻ nội tuyến . Hãy cùng chúng tôi tìm hiểu hai loại thẻ trong html như sau.
Chặn thẻ
Mức khối phần tử
sẽ sử dụng toàn bộ không gian trang và luôn bắt đầu trên một dòng mới của trang. Các thẻ tiêu đề và đoạn văn là các ví dụ về thẻ khối.
Các thẻ sau được bao gồm trong các thẻ cấp khối của mọi trang html: & lt; html & gt ;, & lt; head & gt ;, và & lt; body & gt ;. Trong đó:
- & lt; html & gt; & lt; / html & gt; là phần tử hàng đầu đóng gói mỗi trang html.
- & lt; head & gt; & lt; / head & gt; Thẻ này thường chứa thông tin meta như tiêu đề trang và bộ ký tự.
- & lt; body & gt; & lt; / body & gt; tắt gói mọi thứ sẽ xuất hiện trên trang.
Ngoài ra, trang html sẽ có các tiêu đề từ 1 đến 6 hoặc & lt; h1 & gt; & lt; / h1 & gt; đến & lt; h6 & gt; & lt; / h6 & gt ;. trong đó h1 là mức cao nhất và h6 là mức thấp nhất. Văn bản được đặt trong đoạn thẻ & lt; p & gt; & lt; / p & gt ;, và dấu ngoặc kép được đặt trong & lt; blockquote & gt; & lt; / blockquote & gt ;.
Thẻ
& lt; div & gt; & lt; / div & gt; được sử dụng để chứa các đoạn văn, hình ảnh, dấu ngoặc kép và các phần tử khác. Các thẻ div này cũng có thể chứa các thẻ khác bên trong chúng.
Sử dụng thẻ & lt; ul & gt; & lt; / ul & gt; cho các danh sách không có thứ tự. và & lt; ol & gt; & lt; ol & gt; cho các danh sách có thứ tự, nhưng trong các danh sách đó sẽ được bao gồm trong thẻ & lt; li & gt; & lt; / li & gt;. Bạn có thể hiểu rõ hơn với ví dụ sau:
Thẻ nội tuyến
Thẻ nội tuyến
là một phần nhỏ của không gian trang và không bắt đầu một dòng mới trên mỗi trang. Thường được sử dụng để định dạng nội dung cấp khối. Các liên kết và thẻ nhấn mạnh là các thẻ nội tuyến phổ biến.
Với một số thẻ nội dòng để định dạng văn bản, ví dụ: & lt; strong & gt; & lt; / strong & gt; để in đậm văn bản, hãy in nghiêng văn bản bằng cách sử dụng & lt; em & gt; & lt; / em & gt;. Việc sử dụng siêu liên kết yêu cầu sử dụng thẻ & lt; a & gt; & lt; / a & gt; và thuộc tính href Sử dụng ví dụ này để xác định một liên kết cụ thể:
Ngoài ra, hình ảnh có nội dòng, bạn có thể sử dụng thẻ & lt; img & gt; để thêm hình ảnh. Không có thẻ đóng & lt; / img & gt ;. Nhưng các thuộc tính là cần thiết để xác định nguồn hình ảnh. Ví dụ:
Ở đâu:
- Hình ảnh sẽ được đặt trong & lt; img & gt; .
- Thẻ Thuộc tính src để xác định nguồn của hình ảnh từ đâu ?.
- alt : Thông tin thay thế là thông tin thay thế với hình ảnh, khi trang web không hiển thị hình ảnh, nội dung trong alt sẽ mô tả hình ảnh . Và đây cũng là một yếu tố trong việc thực hiện SEO.
Phần tử html là gì?
Phần tử html là gì? Nó được xác định bởi thẻ bắt đầu, một số nội dung và thẻ kết thúc.
Phần tử html
là tất cả mọi thứ từ thẻ mở đến thẻ đóng.
Lưu ý : Một số phần tử html không có nội dung (ví dụ: phần tử & lt; br & gt;). Các phần tử này được gọi là phần tử rỗng. Các phần tử trống không có thẻ đóng!
Xem thêm: 5 bước tạo menu ngang trong html và css đơn giản
Cấu trúc trang html là gì?
Sau đây là hình ảnh trực quan về cấu trúc trang html:
Lưu ý: Chỉ được hiển thị trong trình duyệt khi & lt; body & gt; (vùng màu trắng ở trên). Nội dung trong phần tử & lt; title & gt; sẽ được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab trên trang.
Sự khác biệt giữa html và html 5
html5 được gọi chung là html, là phiên bản html mới nhất được phát hành vào năm 2014. So với html, html 5 đã bổ sung nhiều tính năng quan trọng và cụ thể, chẳng hạn như:
- Có thể hỗ trợ video và âm thanh: Cho phép lập trình viên nhúng các tệp video hoặc âm thanh trực tiếp vào các trang web html có thẻ & lt; audio & gt; & lt; / audio & gt ;. hay & lt; video & gt; & lt; / video & gt ;.
- Hỗ trợ dễ dàng cho đồ họa vectơ có thể mở rộng (svg) và mathml khi chèn các công thức hóa học và phương trình hóa học.
- Và có nhiều thẻ mới có sẵn để giúp người dùng hiểu rõ hơn về bố cục và nội dung trang web, chẳng hạn như thẻ: & lt; article & gt; & lt; / article & gt ;, & lt; section & gt; & lt; / section & gt ;, & lt; sang một bên & gt; & lt; / sang một bên & gt ;, & lt; header & gt; & lt; / header & gt ;, & lt; footer & gt; & lt; / footer & gt ;.
- Ngoài ra, hỗ trợ nhiều loại biểu mẫu: ngày / giờ, email, số điện thoại …
- Một phần của các thẻ html đã bị xóa trong html5 như: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, …
li>
& gt; & gt; Xem thêm: html5 Nó là gì? Tất cả về html5.
Mối quan hệ giữa
html, css và javascript là gì?
html được coi là nền tảng cơ bản và quan trọng trong quá trình xây dựng trang web, nhưng nó vẫn chưa đủ để tạo ra một trang web đẹp, chuyên nghiệp. HTML thường được sử dụng để thêm các yếu tố để hình thành bố cục, cấu trúc và nội dung của một trang web. Sau đó, lập trình viên kết hợp 2 ngôn ngữ front-end css và javascript để tạo ra một trang web hoàn chỉnh.
Khi thực thi kết hợp html, css và javascript, trang web sẽ cải thiện đáng kể trải nghiệm người dùng với một số tính năng cơ bản như:
- CSS có vai trò trong quá trình thiết lập màu sắc, hình nền, hiệu ứng, nói chung là được thiết kế linh hoạt, mềm dẻo theo ý tưởng của website.
- javascript cũng có vai trò tạo ra các hàm “động”: như thư viện hình ảnh, thanh trượt, cửa sổ bật lên, …
Phần mềm lập trình html là gì?
1. văn bản siêu phàm
Sublime Text là phần mềm được phát triển vào năm 2008, được viết bằng ngôn ngữ python và c ++. là phần mềm giúp lập trình viên tiết kiệm thời gian với các plugin được tích hợp sẵn. Phiên bản mới nhất của Sublime Text là sublime text 4 . Bạn có thể tải xuống Sublime Text 4 bên dưới.
2. nhà thiết kế php
php designer là một phần mềm được phát triển bởi tác giả michael pham vào năm 1998. Hiện tại, phần mềm được sử dụng rộng rãi tại hơn 200 quốc gia trên thế giới và trở thành công cụ đắc lực cho các lập trình viên. php designer không chỉ hỗ trợ viết mã mà còn hỗ trợ thiết kế web php. Có giao diện khá đơn giản, dễ sử dụng và hỗ trợ ngôn ngữ php.
3. Dreamweaver
dreamweaver là phần mềm được các trường học sử dụng phổ biến nhất để dạy lập trình cho học sinh. Phần mềm này có tất cả các chức năng mà một lập trình viên cần để viết mã phần mềm hoặc ứng dụng. Có khá nhiều tiện ích, di chuyển, kéo thả dễ dàng. Tương thích với nhiều ngôn ngữ khác nhau: php, asp.net,….
4. Notepad ++
notepad ++ có một môi trường nhỏ với nhiều tiện ích giúp tối ưu hóa quá trình xây dựng trang web hoặc phần mềm. Các ngôn ngữ mà notepad ++ có thể hỗ trợ là: c ++, java, c #, xml, …
Tài liệu html đơn giản
html mẫu
Giải thích ví dụ trên
- Khai báo & lt;! doctype html & gt; chỉ định rằng tài liệu là tài liệu html5.
- Phần tử & lt; html & gt; là phần tử gốc của trang html.
- & lt; head & gt; chứa thông tin meta về trang html.
- & lt; title & gt; Chỉ định tiêu đề của trang html (hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang).
- & lt; body & gt; xác định phần nội dung của tài liệu và là vùng chứa cho tất cả các nội dung hiển thị như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v. .
- & lt; h1 & gt; xác định một tiêu đề lớn.
- Các phần tử & lt; p & gt; xác định một đoạn văn.
Nếu bạn là một lập trình viên, đừng quên mvc là gì? Bạn cần hiểu nó để áp dụng mô hình này trong quá trình thực hiện các dự án lớn. Nó rất hữu ích cho công việc của bạn.
Câu hỏi thường gặp về html
Kết luận
Hy vọng rằng với những thông tin trên, nó sẽ giúp bạn hiểu rõ hơn về html là gì và sẽ sớm tạo được một trang web hoàn chỉnh cho bạn. Hy vọng bài viết này giúp bạn hiểu rõ về html và một số thao tác cơ bản. chúc bạn thành công.