Lập trình HTML – CSS – Học lập trình, học sử dụng máy tính từ số 0 – ZeZo.dev https://zezo.dev Fri, 29 Nov 2024 08:24:15 +0000 vi hourly 1 https://wordpress.org/?v=6.7.1 https://zezo.dev/wp-content/uploads/2024/11/cropped-zzel-32x32.png Lập trình HTML – CSS – Học lập trình, học sử dụng máy tính từ số 0 – ZeZo.dev https://zezo.dev 32 32 Tìm hiểu Responsive CSS https://zezo.dev/view/tim-hieu-responsive-css Fri, 29 Nov 2024 08:24:15 +0000 https://zezo.dev/?p=162

Responsive là kỹ thuật viết giao diện trang web để có thể hiển thị tốt trên các loại thiết bị hiển thị khác nhau. VD: Màn hình laptop, máy tính bảng, máy in, điện thoại, tivi…

Đặc trưng chủ yếu là dùng css để nhận diện thiết bị, không còn như trước đây khi muốn viết giao diện cho mobile thì phải viết sang một tên miền riêng mà chúng ta sẽ chỉ viết 1 lần code giao diện.

Dưới dây là 1 ví dụ demo đơn giản, khi bạn thay đổi kích thước cửa sổ màn hình tương đương việc dùng các thiết bị khác nhau thì màu sắc của thiết bị sẽ thay đổi theo.

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">

/*Phần mặc định chung */

.demo {

padding: 20px;

color: white;

background-color: #ccc;

/*Code background này sẽ không hiển thị*/

}

/* phần dành riêng cho từng loại thiết bị: Các thiết bị sẽ được lọc từ bước 1 -> 5

Theo thứ tự này là hướng từ mobile đến máy tính.

*/

/*1. Dành cho điện thoại: Các thiết bị chiều rộng nhỏ hơn 480px*/

@media only screen and (max-width: 480px) {

.demo {background: red;}

}

/*2. Thiết bị máy tính bảng hoặc màn hình điện thoại xoay ngang: Màn hình to hơn 480px, trường hợp này sẽ bao gồm tất cả các màn hình to hơn 480px, kể cả tivi, nhưng khi xuống đến dòng code bên dưới thì đã bị lọc bởi giới hạn 768px nên trong khu vực này chỉ có các loại màn hình từ 480px đến 768px là có tác dụng, vượt quá 768 sẽ rơi vào tình huống số 3 có tác dụng*/

@media only screen and (min-width: 480px) {

.demo {background: green;}

}

/* 3. Máy tính bảng xoay ngang hoặc màn hình máy tính bàn (loại màn vuông) giới hạn chiều rộng từ 768 đến 1000px */

@media only screen and (min-width: 768px) {

.demo {background: blue;}

}

/* 4. Màn hình Laptop từ 1000 đến 1200px*/

@media only screen and (min-width: 1000px) {

.demo {background: orange;}

}

/* 5. Phần này to hơn màn hình laptop: vd loại màn 21inch trở lên, màn tivi...., nhỏ nhất là 1200*/

@media only screen and (min-width: 1200px) {

.demo {background: gray;}

}

</style>

</head>

<body>

      <h2 class="demo">Co kéo chiều rộng màn hình để thấy rõ hiệu ứng của màu nền </h2>

</body>

</html>

Tại các vị trí chọn media, bạn có thể viết css bất kỳ giống như ở bên ngoài. Tùy theo mục đích mà bạn viết những thứ gì trong đó. Nhưng thứ tự lựa chọn media thì bạn không nên thay đổi.

]]> Các thẻ logic ngữ pháp trong HTML https://zezo.dev/view/cac-the-logic-ngu-phap-trong-html Fri, 29 Nov 2024 04:03:06 +0000 https://zezo.dev/?p=107

Bạn có thể sử dụng css để định dạng và thay đổi hiển thị mọi thứ. Có một số thẻ hướng tới ý nghĩa ngữ pháp của văn bản chứ không thể hiện ở hình thức hiển thị. Vậy nên khi đọc bài viết này bạn không nên lo lắng quá nhiều về hiển thị mà chủ yếu hiểu được ý nghĩa ngữ pháp của thẻ để viết văn bản đúng ngữ nghĩa.

Các thẻ này là thẻ chứa nội dung nên sẽ có thẻ mở và thẻ đóng.

Cú pháp sử dụng chung: <tên_thẻ> …. nội dung …</tên_thẻ>

Một số thẻ đó bao gồm:

  • Abbreviation tag : <abbr>
  • Acronym tag: <acronym> (not supported in HTML5)
  • Marked tag: <mark>
  • Strong tag: <strong>
  • Emphasized tag : <em>
  • Definition tag: <dfn>
  • Quoting tag: <blockquote>
  • Short quote tag : <q>
  • Code tag: <code>
  • Keyboard tag: <kbd>
  • Address tag: <address>

Thẻ đánh dấu chữ viết tắt <abbr>

Thường dùng thêm thuộc tính title để hiển thị lời giải thích khi người dùng đưa chuột vào nội dung thẻ.

<p> <abbr title = "HyperText Markup Language">HTML </abbr> là một trong các ngôn ngữ dùng tạo ra trang web</p>

[run_code=html-abbr-tag]

Thẻ đánh dấu nổi bật chữ <mark>

Thẻ này giúp đổ màu nền cho một chuỗi text nào đó làm nổi bật nó trong đoạn văn. Mặc định thì nội dung được hiển thị với màu nền vàng.

<p> <mark title = "HyperText Markup Language">HTML </mark> là một trong các ngôn ngữ dùng tạo ra trang web</p>

Thẻ nhấn mạnh nội dung quan trọng <strong>

Trong đoạn văn nếu có phần nào quan trọng thì bạn nên dùng thẻ <strong> để làm đậm lên, không nên dùng thẻ <b> vì trình duyệt và máy tìm kiếm sẽ không hiểu mức độ quan trọng của nội dung.

<p> <abbr title = "HyperText Markup Language">HTML </abbr> là một trong các ngôn ngữ dùng <strong>tạo ra</strong> trang web</p>

Thẻ đánh dấu nội dung cần chú ý <em>

Với nội dung nào đó cần gây chú ý thì bạn có thể dùng thẻ <em>. Mặc định nội dung sẽ hiển thị chữ nghiêng.

<p> <em>HTML là một trong các ngôn ngữ dùng <strong>tạo ra</strong> trang web </em></p>

Trong ví dụ trên thẻ <em> bao trùm toàn bộ nội dung nên toàn bộ sẽ hiển thị dạng chữ nghiêng.

Thẻ trích dẫn đoạn văn <blockquote>

Trong bài viết có thể trích dẫn lời nói của một ai đó thì bạn có thể dùng thẻ <blockquote> để đánh dấu nội dung trích dẫn. Đồng thời bạn sử dụng thẻ <cite> để ghi chú tên tác giả của lời trích dẫn.

Nội dung trích dẫn sẽ được tách thành khối văn bản riêng.

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
<blockquote>Gạo đem vào giã bao đau đớn<br>
Gạo giã xong rồi trắng tựa bông<br>
Ở trên đời người cùng vậy<br>
Gian nan, rèn luyện mới thành công</blockquote>   
 <cite>-Hồ Chí Minh</cite>  
    </body>
</html>

[run_code=html-quote-cite]

Định dạng trích dẫn ngắn với thẻ <q>

Trường hợp bạn cần trích dẫn ngắn trên cùng 1 dòng thì dùng thẻ <q> để đánh dấu. Nội dung trích dẫn sẽ được bao gói hiển thị bằng ký tự nháy kép.

<p>Bác Hồ kính yêu đã nói: <q>Không có gì quý hơn Độc lập - Tự do.</q></p>

Kết quả hiển thị code trên:

Bác Hồ kính yêu đã nói: Không có gì quý hơn Độc lập – Tự do.

 

Đánh dấu mã code hiển thị trên web <code>

Thẻ giúp hiển thị chuỗi mã code theo định dạng font mono giúp người đọc nhận diện rõ ràng hơn,

<p>First Java program</p>  
<p>
   <code>
       class Simple{ public static void main(String args[]){   
       System.out.println("Hello Java"); }}
   </code>  
</p>

Đánh dấu nội dung là địa chỉ liên hệ <address>

<address>
	Số nhà:...<br>
	Đường: Cầu Giấy <br>
	Quận: Cầu Giấy <br>
	TP: Hà Nội
</address>

 

 

]]> HTML Heading https://zezo.dev/view/html-heading Fri, 29 Nov 2024 04:02:39 +0000 https://zezo.dev/?p=105

HTML có 6 thẻ dành riêng cho định dạng đề mục là H1, H2, H3, H4, H5, H6. Mặc định thì H1 có cỡ chữ to nhất, H6 có cỡ chữ bé nhất.

Việc sử dụng các thẻ H phù hợp trong website sẽ tối ưu tốt cho SEO. Trong 1 trang web thì chỉ nên dùng 1 thẻ H1 còn lại các thẻ H2 đến H6 thì có thể dùng lặp lại nhiều lần. Đây là vấn đề liên quan tối ưu SEO.

Các thẻ H này được hỗ trợ ở hầu hết các loại trình duyệt web, kích cỡ chữ của các thẻ bạn có thể dùng CSS để điều chỉnh lại.

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
            <h1>Heading no. 1</h1>  
			<h2>Heading no. 2</h2>  
			<h3>Heading no. 3</h3>  
			<h4>Heading no. 4</h4>  
			<h5>Heading no. 5</h5>  
			<h6>Heading no. 6</h6>  
    </body>
</html>
]]> Thẻ tạo liên kết A https://zezo.dev/view/the-tao-lien-ket-a Fri, 29 Nov 2024 04:02:10 +0000 https://zezo.dev/?p=103

Cấu trúc thẻ liên kết

<a href="url" title="Tiêu đề hiển thị" target="vị trí bạn muốn hiển thị"> Tên liên kết </a>

*Ý nghĩa: Thẻ định nghĩa một siêu liên kết trong HTML, một siêu liên kết ( hay liên kết ) là một từ, một nhóm nhiều từ, hoặc hình ảnh mà bạn có thể click vào đó để đi đến một trang web khác.

– Thuộc tính href: chỉ định đường dẫn sẽ liên kết tới. Đường dẫn có thể tương đối hoặc tuyệt đối và có thể là :

  • Địa chỉ một trang web ngoài website hiện tại: VD: https://www.facebook.com
  • Địa chỉ một trang nội bộ website, vd: /contact.html
  • Giao thức gọi ứng dụng gửi mail: mailto: admin@zezo.dev
  • Giao thức gọi điện thoại: tel:0968xxxxxx
  • Định danh ID của một thẻ nào đó trong cùng 1 tài liệu (1 trang web) hoặc ở một trang web khác.
  • VD: <a href =”#top”>về đầu trang </a>
  • Liên kết trực tiếp tới file, vd: <a href=”/tailieu/abc.zip”>download</a>

-Thuộc tính title: hiển thị chuỗi text mô tả khi đưa chuột vào link.
-Thuộc tính target: Xác định vị trí sẽ hiển thị nội dung được liên kết tới

  • Mặc định không đặt target là _self: Khi bấm vào link sẽ mở nội dung ở cửa sổ hiện tại
  • target=”_blank”: Mở nội dung liên kết tới ở cửa sổ mới.
  • target=”_parent”: Nếu đặt nội dung trong một frame thì nội dung liên kết sẽ hiển thị ở cửa sổ cấp cha
  • target=”_top”: Hiển thị nội dung liên kết ở cửa sổ chính
  • framename: hiển thị nội dung ở 1 frame nào đó theo tên của frame đó.

Ví dụ

<a href="https://zezo.dev" title="Education">Học lập trình web tại zezo.dev</a>

Các trạng thái của link

Thường có 3 trạng thái mặc định:
– Chưa kích chuột (unvisited): Link sẽ có màu xanh

– Đã kích chuột vào (visited): Link có màu tím

– Đang bấm chuột vào link (active): Link có màu đỏ

]]> Tìm hiểu Đoạn văn bản trong HTML https://zezo.dev/view/tim-hieu-doan-van-ban-trong-html Fri, 29 Nov 2024 03:47:24 +0000 https://zezo.dev/?p=97 Cũng giống như trong Word, đoạn văn bản trong HTML dược xác định bởi việc bắt đầu 1 dòng mới và có khoảng cách trống trước đoạn và sau đoạn để phân biệt với các đoạn văn bản khác.

HTML sử dụng thẻ <p> để viết đoạn văn bản. Mặc định thẻ <p> sẽ có 1 khoảng cách lề ở phía trên và phía dưới để cách đoạn. Bạn cũng có thể dùng CSS để thay đổi khoảng cách này.

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
		<p>Đoạn văn bản thứ nhất<br>gồm có 2 dòng</p>
		<p>Đoạn văn bản thứ 2 có 1 dòng</p>
		<p>Đoạn văn bản thứ 3</p>
    </body>
</html>

Bấm chạy thử code trên bạn sẽ thấy kết quả 3 đoạn văn bản cách xa nhau. Thẻ <br> dùng để ngắt dòng trong đoạn nhưng không tạo khoảng cách giữa các dòng.

Khi trình bày nội dung trong 1 bài viết thì nên dùng thẻ <p> để bao gói đoạn văn bản. Ngoài việc tách đoạn, thẻ <p> cũng mang ý nghĩa logic trong văn bản.

Thẻ <hr> dùng tạo đường kẻ ngang

Thẻ này sẽ ngắt đoạn văn bản thành các phần khác nhau và hiển thị giãn cách một khoảng. Về logic thì các phần vẫn nằm trong 1 đoạn, nhưng hiển thị thì thành các khối riêng biệt.

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
		<p>Đoạn văn bản thứ nhất<hr>gồm có 2 dòng</p>
		<p>Đoạn văn bản thứ 2 có 1 dòng</p>
		<p>Đoạn văn bản thứ 3</p>
    </body>
</html>
]]>