Lưu trữ danh mục: HTMLCSS

HTML, HTMLCSS, Xây dựng trang web

Chèn ảnh – video – âm thanh vào HTML

Đăng vào bởi Toktips
02
Th1
Chèn ảnh
Để chèn ảnh vào HTML, chúng ta sẽ sử dụng thẻ <img> với các tham số bắt buộc, và thẻ này không có thẻ đóng. Ví dụ:
<img src=“https://4.bp.blogspot.com/-iSghD8lzpAo/XM_YW6kPgjI/AAAAAAAAHN4/3nZcz0G1D1IYPhbFWNPJZEV3T55lmRw0gCK4BGAYYCw/s75/46503779_10157256256552223_3430597538472787968_n.jpg“ title=“Giang Trần “ alt=“Ảnh tác giả” />


Giải thích

  • src: Đường dẫn đến tập tin hình ảnh.
  • title: Tiêu đề của hình ảnh.
  • alt: Tên định danh của hình ảnh.
Ngoài ra bạn có thể bổ sung thêm thuộc tính width và height để điều chỉnh kích thước hiển thị hình ảnh.

Chèn video

Mặc dù hiện tại bạn chưa học đến HTML5 nhưng ở chức năng chèn video này chúng ta sẽ sử dụng một thẻ trong HTML để chèn video nhanh chóng đó là cặp thẻ <video> </video> như sau:
<video width=”320″ height=”240″ controls>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.ogg” type=”video/ogg”>
  Your browser does not support the video tag.
</video>

trong cặp thẻ <video> </video> sẽ có một thẻ <source> với các thuộc tính nhằm khai báo đường dẫn tập tin video và loại tập tin. Các thuộc tính bên trong cặp thẻ này có vẻ không có gì là khó hiểu vì bạn đã sử dụng mấy lần rồi đó, bạn có thể tham khảo thêm các thuộc tính khác của thẻ <video> tại đây.
Lưu ý: Để đảm bảo tất cả các trình duyệt có thể đọc được, chỉ nên chèn video định dạng MP4.

Chèn âm thanh – nhạc

Giống như thẻ <video>, để chèn âm thanh vào tài liệu HTML thì bạn có thể sử dụng thẻ <audio>

Chèn đối tượng kỹ thuật số với thẻ <object>

Ngoài các thẻ đặc trưng cho từng loại tập tin ở trên thì bạn còn có một cách khác để chèn các đối tượng kỹ thuật số vào tài liệu HTML đó là dùng thẻ <object>, đây là một thẻ có thể giúp bạn chèn các loại đối tượng kỹ thuật số như Flash, Java, Audio, Video, PDF, ActiveX. Nhưng thông thường thì các loại mã nhúng của một số website cho phép sử dụng mã nhúng như Youtube họ sẽ dùng thẻ này để bạn chèn đối tượng vào web.

Nhúng tài liệu HTML vào web

Nếu bạn có nhu cầu nhúng thẳng một trang nào đó vào tài liệu HTML của bạn thì có thể sử dụng thẻ <iframe>
rong đó, thuộc tính src là đường dẫn của trang bạn muốn nhúng vào, width và height là kích thước của khung hiển thị (gọi là frame).
Ngoài ra, có một cách nữa để chèn một liên kết và ép nó mở bằng frame trên website đó là sử dụng thuộc tính name trong thẻ <iframe> và thuộc tính target trong thẻ <a>
Trong đó, giá trị của thuộc tính target trong thẻ <a> phải trùng với giá trị trong thuộc tính name của thẻ <iframe>
HTML, HTMLCSS, Xây dựng trang web

Thẻ tạo liên kết trong html

Đăng vào bởi Toktips
01
Th1
siêu văn bản có những đường liên kết (link) tới một tài liệu khác thông qua địa đường dẫn đến tài liệu hoặc địa chỉ website. Để tạo ra các đường liên kết trong HTML ta sẽ sử dụng cặp thẻ <a> </a> chứa các tham số như sau:
<a href=”https://giangtranvn.com” title=” Giang Tran Blog” target=”_blank”>nhấp vào đây</a>
Ý nghĩa các thuộc tính:
  • href: Địa chỉ của tài liệu muốn liên kết đến, đây có thể là một đường dẫn thư mục hoặc địa chỉ website. Nếu bạn muốn truy cập một tài liệu trên cùng một cấp thư mục thì chỉ cần ghi tên-tập-tin.định dạng (ví dụ: gioi-thieu.html).
  • title: Tiêu đề của liên kết, tiêu đề sẽ hiển thị như một thông tin thêm khi rê chuột vào liên kết.
  • target: Xác định nơi mở tài liệu, nó có các giá trị như _blank (mở tài liệu trên cửa sổ mới), _self (mở tài liệu trên cửa sổ hiện tại, nếu bạn không khai báo thuộc tính target thì nó sẽ sử dụng giá trị này làm mặc định),  _top (mở tài liệu trong nội dung trang hiện tại), _parent (mở tài liệu trên khung trình duyệt mẹ của nó).
Và một điều bạn cần biết đó là nội dung trong cặp thẻ <a> có thể là một nội dung siêu văn bản nào, bao gồm các thẻ tiêu đề, hình ảnh,…

Liên kết neo (Anchor Link)

Liên kết neo nghĩa là một liên kết trong siêu văn bản sẽ dẫn đến một vị trí đặc biệt trong cùng tài liệu mà không phải tải lại hoặc mở một tài liệu mới. Một liên kết neo sẽ có hai phần:
  • Khu vực được neo, được khai báo bằng thẻ bất kỳ với thuộc tính id (ví dụ: <p id="noi-dung"> </p>).
  • Liên kết neo, được khai báo bằng thẻ <a> nhưng có thuộc tính là href nhưng giá trị là có dấu # và tên id của khu vực cần truy cập đến (ví dụ: <a href="#noi-dung">xem nội dung</a>).
HTML, HTMLCSS, Xây dựng trang web

HTML – Cấu trúc của 1 web html

Đăng vào bởi Toktips
Một tài liệu hay tập tin HTML để được gọi là một tài liệu web thì sẽ được bao gồm bốn yếu tố chính đó là:
  • Có thẻ khai báo loại tập tin/tài liệu.
  • Có thẻ đóng và mở tài liệu HTML.
  • Có thẻ đóng và mở phần thông tin website.
  • Có thẻ đóng và mở phần nội dung website.
1. Thẻ khai báo loại tập tin
Ngay tại đoạn đầu tiên của tài liệu, chúng ta phải có một thẻ khai báo loại tập tin cho nó như thế này, cụ thể là ta sẽ khai báo rằng đây là tập tin HTML.
01
<!DOCTYPE html>
Với thẻ <!DOCTYPE> ở trên, ta có thêm một tham số đó là html. Tham số html này nghĩa là chúng ta khai báo với trình duyệt rằng đây là tài liệu HTML5 (HTML phiên bản 5), dù rằng chúng ta có thể không sử dụng HTML5 nhưng hiện tại khi khai báo tập tin HTML thì bạn cứ sử dụng tham số này vừa ngắn gọn lại vừa dễ dàng sử dụng thêm HTML5 nếu thích.
Ngoài ra, nó còn có một vài tham số khác
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
Chú ý: thẻ <!DOCTYPE> không phải là một thẻ của HTML, mà nó chỉ là một thẻ khai báo thông tin trên tài liệu để trình duyệt hiểu phiên bản HTML mà bạn sử dụng trên website.
2. Thẻ đóng và mở tệp html
 thẻ <html> </html> có nhiệm vụ khai báo cho trình duyệt biết rằng những nội dung bên trong cặp thẻ này là HTML. Tuy nhiên, bên trong thẻ này mình có thêm một thuộc tính tên là lang với giá trị là vi (<html lang="vi">). Thuộc tính này nghĩa là chúng ta khai báo cho trình duyệt biết mã ngôn ngữ mà ta sử dụng trên website, mã vi nghĩa là Vietnamese – tiếng Việt, bạn có thể tham khảo các mã ngôn ngữ khác tại đây.
Thẻ <html> </html> phải bao bọc toàn bộ nội dung website, không bao gồm thẻ <!DOCTYPE>.
3. Thẻ đóng và mở thông tin website
Phần khai báo thông tin của website sẽ được đặt vào bên trong cặp thẻ gọi là <head> </head>. 
Nội dung bên trong thẻ này là:
– các thẻ chuyên cho khai báo thông tin website (meta): đây là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác mà sẽ có dấu gạch chéo như / ở đằng trước ký tự > cuối cùng. Thẻ này có mục đích khai báo các dữ liệu vĩ mô trong tài liệu web HTML của bạn như mô tả, từ khóa, tên tác giả, bảng mã ký tự sử dụng,…
Thẻ meta luôn được khai báo kèm theo ít nhất là một thuộc tính và mỗi thuộc tính phải luôn có giá trị. Ví dụ:
01
<meta charset="utf-8" />
Trong đó, charset là tên thuộc tính và utf-8 là giá trị của thuộc tính charset.Nó có nhiệm vụ khai báo cho trình duyệt biết bảng mã ký tự siêu văn bản bên trong tài liệu là gì. Và hiện nay hầu hết chúng ta đều sử dụng bảng mã UTF-8 cho tất cả ngôn ngữ bao gồm các ngôn ngữ tiếng latin, chữ Hán – Nôm và các ngôn ngữ đọc từ phải sang trái (Right to Left – RTL) như tiếng Ả-Rập chẳng hạn
Ngoài ra còn có thể khai báo tác giả, mô tả, keyword
<meta name="author" content="Giang Trần" />
<meta name="description" content="Xây dựng trang web" />
<meta name="keyword" content="html, xây dựng trang web, thiet ke web" />
– tên website (title),
– khai báo CSS (style),
– khai báo các đoạn Javascript (script)
 và một số thông tin khác. 
Thường là các thông tin được khai báo trong đây sẽ không hiển thị trực tiếp thành siêu văn bản trên web nhưng nó sẽ có nhiệm vụ chứa các thông tin quan trọng về website.

4. Thẻ đóng và mở nội dung website

Đây là cặp thẻ mà bạn sẽ tiến hành viết nội dung vào, đó là cặp thẻ <body> </body>. Cặp thẻ này là để trình duyệt xác định đây là phần thân của website, nó sẽ chứa toàn bộ các nội dung siêu văn bản hoặc media mà bạn muốn nó hiển thị lên trang web của bạn. 

Một số thẻ cơ bản như:

  • <strong>: In đậm chữ viết. – nhấn mạnh nội dung
  • <b> : thẻ in đậm ( bold)
  • <i>: In nghiêng chứ viết (italic).
  • <em> In nghiêng – nhấn mạnh nội dung emphasized
  • <u>: Gạch chân chữ viết.- unline
  • <strike>: Gạch ngang chữ viết.
  • <del>: xóa bỏ ngang nội dung. – delete
  • <code>: Định dạng cho một đoạn mã nào đó.
  • <hr>: Thước kẻ ngang trên tài liệu. – horizontor ( ko có thẻ đóng)

  • <br> ngắt dòng- break( ko có thẻ đóng)
  • <mark>: Tô sáng chữ viết.
  • <p>: đoạn văn bản – paragraph
  • <sub> chữ dưới subcript
  • <sup> chữ trên – superscript
  • <a > liên kết
  • <img> ảnh
  • …..