Danh Mục Bài Viết
Ok anh em, Đây là bài viết đầu tiên bắt đầu một chuỗi những bài viết liên quan đến Html mà mình sẽ chia sẻ với anh em trong những ngày đầu năm mới 2024 này nhé. Ngôn ngữ Html vô cùng quan trọng đối với lập trình Frontend nhưng nó lại tương đối dễ hiểu và dễ học. Ở bài viết này mình sẽ nói qua về Html, Lịch sử phát triển, Công cụ soạn thảo, Cấu trúc, Xem mã nguồn, Thẻ, Thuộc tính, Tiêu đề, Văn bản, Trích dẫn, Comments,Màu sắc, Css và Liên kết trong HTML. Nào Let's go thôi.
Các trang web có thể được tạo và sửa đổi bằng cách sử dụng các trình soạn thảo HTML chuyên nghiệp. Tuy nhiên chúng ta có thể dùng trình soạn thảo văn bản đơn giản có sẵn trên máy tính như Notepad (PC) hoặc TextEdit (Mac).
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
</head>
<body>
<h1>Tiêu đề bài biết</h1>
<p>Nội dung bài viếtp>
</body>
</html>Tất cả tài liệu HTML phải bắt đầu bằng việc khai báo: <!DOCTYPE >để thể hiện loại tài liệu và giúp trình duyệt hiển thị trang web một cách chính xác. Việc khai báo này chỉ xuất hiện một lần, ở đầu trang.
Khai báo <!DOCTYPE> cho HTML5 sẽ là:
<!DOCTYPE html>Nội dung HTML sẽ bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ đóng </html>.
Phần hiển thị ra màn hình của tài liệu HTML nằm giữa cặp thẻ <body> và </body>.
Nhấp vào CTRL + U trong trang HTML hoặc nhấp chuột phải vào trang và chọn "Xem nguồn trang". Thao tác này sẽ mở một tab mới chứa mã nguồn HTML của trang.
Thẻ HTML thông thường sẽ có thẻ bắt đầu và thẻ kết thúc:
< thẻ mở > Nội dung ở đây... < / thẻ đóng >Ví dụ về một số thẻ HTML:
< h1 > Tiêu đề đầu tiên của tôi < /h1 >
< p > Đoạn đầu tiên của tôi. </p>Các thẻ HTML có thể được lồng vào nhau (điều này có nghĩa là các thẻ có thể chứa các thẻ khác bên trong nó). Hầu như tất cả các tài liệu HTML sẽ bao gồm các thẻ lồng vào nhau.
Ví dụ sau chứa bốn phần tử HTML ( <html>, <body>, <h1> và <p>):
Các thẻ HTML không có nội dung được gọi là các thẻ trống. Thẻ <br> xác định ngắt dòng và là một trong các thẻ trống không có thẻ đóng.
Thuộc tính HTML cung cấp thông tin bổ sung về các phần tử HTML.
Một số thuộc tính thường gặp sau đây
Thuộc tính href:
Thẻ <a>xác định một siêu liên kết. Thuộc tính href chỉ định URL của trang mà liên kết tới:
<a href="https://minacode.net/">Xem thêm</a>Thuộc tính src:
Thẻ <img>được sử dụng để nhúng hình ảnh vào trang HTML. Thuộc tính src chỉ định đường dẫn đến hình ảnh sẽ được hiển thị:
<img src="banner.jpg">Thuộc tính chiều rộng và chiều cao:
Thẻ <img>cũng có thể chứa các thuộc tính như width và height xác định chiều rộng và chiều cao của hình ảnh (tính bằng đơn vị pixel):
<img src=" banner.jpg " width="500" height="600">Thuộc tính alt:
Thuộc tính altcho thẻ <img> chỉ định văn bản thay thế cho hình ảnh nếu hình ảnh vì lý do nào đó không thể hiển thị. Điều này có thể do kết nối chậm hoặc lỗi thuộc srctính hoặc do người dùng sử dụng trình đọc màn hình.
<img src=" banner_error.jpg " alt="Minacode - Baner">Thuộc tính Style:
Thuộc tính style được sử dụng để thêm kiểu cho một thành phần, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.
Thuộc tính stylecó cú pháp sau:
<tagname style="property:value;">Trong đó property là CSS property. value là CSS value.
<p style="color:red;">Xin chào mừng các bạn đến với Minacode <p>Một số thuộc tính phổ biến:
Tiêu đề HTML là tiêu đề hoặc phụ đề mà bạn muốn hiển thị trên trang web. Tiêu đề HTML được xác định bằng các thẻ từ <h1> đến <h6>.
<h1>xác định tiêu đề quan trọng nhất. <h6>xác định tiêu đề ít quan trọng nhất.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Tiêu đề rất quan trọng. Công cụ tìm kiếm sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung trang web của bạn. Người dùng thường lướt qua một trang theo tiêu đề của nó. Điều quan trọng là sử dụng các tiêu đề để hiển thị cấu trúc tài liệu. Thẻ <h1>nên sử dụng cho các tiêu đề chính, tiếp theo là <h2>các tiêu đề ít quan trọng hơn <h3>…
Thẻ <p> trong Html được xác định một đoạn văn.
Một đoạn văn luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một số khoảng trắng (lề) trước và sau một đoạn văn.
<p>Đây là nội dung văn bản 1.</p>
<p> Đây là nội dung văn bản 2.<p>Html có sẵn một số thẻ để xác định văn bản có ý nghĩa đặc biệt như:
Chúng ta sẽ tìm hiểu qua các thẻ như <blockquote>, <q>, <abbr>, <address>, <cite>
Thẻ <blockquote> xác định một phần được trích dẫn từ một nguồn khác.
<blockquote cite=" https://minacode.net/blogs/33-bai-1-cach-cai-dat-composer-de-khoi-tao-mot-du-an-laravel">
Composer là công cụ quản lý các thư viện của PHP trong đó có Laravel, bạn cần cài đặt trước khi sử dụng nhé. Bài này mình hướng dẫn cài đặt trên window trước. Mình sẽ làm trên máy Mac và chia sẻ với các bạn sau:
</blockquote>Thẻ <q>xác định một trích dẫn ngắn. Các trình duyệt thường chèn dấu ngoặc kép xung quanh câu trích dẫn.
<p> Composer là công cụ quản lý các thư viện của PHP trong đó có Laravel, bạn cần cài đặt trước khi sử dụng nhé. Bài này mình hướng dẫn cài đặt trên window trước. <q> Mình sẽ làm trên máy Mac và chia sẻ với các bạn sau:q></p>Thẻ <abbr> trích dẫn cho từ viết tắt như "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Đánh dấu các chữ viết tắt có thể cung cấp thông tin hữu ích cho trình duyệt, hệ thống dịch thuật và công cụ tìm kiếm. Sử dụng thuộc tính tiêu đề chung để hiển thị mô tả cho từ viết tắt/viết tắt khi bạn di chuột qua thẻ.
<p>The <abbr title=" HyperText Markup Language,">Html</abbr> không khó chút nào đâu nhé!</p>Thẻ <address>xác định thông tin liên hệ của tác giả/chủ sở hữu tài liệu hoặc bài viết. Thông tin liên hệ có thể là địa chỉ email, URL, địa chỉ thực, số điện thoại, địa chỉ mạng xã hội, v.v. Văn bản trong <address>phần tử thường hiển thị ở dạng in nghiêng và trình duyệt sẽ luôn thêm dấu ngắt dòng trước và sau <address>.
<address>
Minacode.<br>
Địa chỉ: 72 Hàm Nghi, Đà Nẵng<br>
Website: minacode.net
</address>Thẻ <cite> xác định tiêu đề của một tác phẩm sáng tạo (ví dụ: một cuốn sách, một bài thơ, một bài hát, một bộ phim, một bức tranh, một tác phẩm điêu khắc, v.v.). Văn bản trong <cite>phần tử thường hiển thị ở dạng in nghiêng .
Bạn có thể thêm nhận xét vào nguồn HTML của mình bằng cách sử dụng cú pháp sau:
<!-- viết comments của bạn-->Lưu ý rằng có dấu chấm than (!) trong thẻ bắt đầu nhưng không có trong thẻ kết thúc. Trình duyệt không hiển thị các comments dù chúng được ghi lại trong mã nguồn HTML của bạn. Chúng ta có thể dùng để:
<p>Đây là <!—sản phẩm của --> Minacode.</p>Màu HTML được chỉ định bằng tên màu được xác định trước hoặc bằng các giá trị RGB, HEX, HSL, RGBA hoặc HSLA.
<h1 style="background-color:Blue;">Minacode</h1>
<h1 style="color:Tomato;"> Minacode </h1>
<h1 style="border:2px solid Tomato;"> Minacode </h1>Với CSS, bạn có thể kiểm soát màu sắc, phông chữ, kích thước văn bản, khoảng cách giữa các phần tử, cách các phần tử được định vị và bố trí, hình nền hoặc màu nền nào sẽ được sử dụng, các hiển thị khác nhau cho các thiết bị và kích thước màn hình khác nhau, và nhiều hơn nữa!
CSS có thể được thêm vào tài liệu HTML theo 3 cách:
style bên trong các thẻ HTML<style> trong cặp thẻ <head><link> phần tử để liên kết đến tệp CSS bên ngoàiCách phổ biến nhất để thêm CSS là giữ kiểu trong các tệp CSS bên ngoài.
Các liên kết được tìm thấy ở hầu hết các trang web. Liên kết cho phép người dùng nhấp chuột từ trang này sang trang khác. Bạn có thể nhấp vào liên kết và chuyển sang tài liệu khác. Khi bạn di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ. Liên kết không nhất thiết phải là văn bản. Liên kết có thể là hình ảnh hoặc bất kỳ phần tử HTML nào khác!
Liên kết HTML - văn bản
<a href="url">Minacode</a>Thuộc tính target của liên kết:
<a href=" https://minacode.net/” target="_blank">Minacode<a>Liên kết HTML - Sử dụng hình ảnh làm liên kết
Để sử dụng hình ảnh làm liên kết, chỉ cần đặt thẻ <img> bên trong thẻ <a>:
<a href=" https://minacode.net/” ">
<img src="logo.jpg" alt="Minacode Logo" style="width:42px;height:42px;">
</a>Liên kết đến một địa chỉ email
Sử dụng mailto:bên trong thuộc tính href để tạo liên kết mở chương trình email của người dùng (để cho phép họ gửi email mới):
<a href="mailto:minacode68@gmail.com">Gửi Email</a>Ngoài ra có thể dùng thuộc tính href để gọi đến số điện thoại, hay di chuyển đến một thẻ khác
<a href="#C4">Di chuyển xuống mục 4</a>
<a href="tel:0973999949">Gọi Điện</a>>>Còn tiếp nhé anh em>>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
