Lưu trữ hàng tháng: Tháng 1 2019

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>).