Html sang codepen hình ảnh

Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom cho các thành phần trong website bằng HTML, CSS và Javascript nhé

Nội dung chính Hiển thị

• Cách Tạo Hiệu Ứng Zoom CSS
• Cách Tạo Hiệu Ứng Phóng To CSS
• Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng phóng to cho hình ảnh khi người dùng di chuột qua đoạn mã sau nhé

  Các tập tin kỹ thuật số (media files) mà mình đang nói đến đó là hình ảnh (hình ảnh), âm thanh (âm thanh) và phim ảnh (video). Với HTML, chúng ta có thể dễ dàng chèn những loại tệp này vào tài liệu và nó sẽ hiển thị rất là sống động luôn

  Lưu ý rằng các tập tin kỹ thuật số được thêm vào phải có đường dẫn đối chiếu trực tiếp đến tập tin đó (ví dụ:. http. //miền. com/tập tin/hình ảnh. jpg hoặc âm thanh. mp3, video. mp4,…)

  
  
  
  

  Chèn ảnh vào HTML

  Để chèn ảnh vào HTML, chúng tôi sẽ sử dụng thẻ

  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  

  3 với các tham số bắt buộc và thẻ này không có thẻ đóng. Ví dụ

  Xem Bút emaYZo của Thạch Phạm (@thachpham92) trên CodePen
  

  Giải thích các thuộc tính

  • 
    
    
    
    
    
    
    Thẻ Hình Ảnh
    
    
    
    

    4. Đường dẫn đến image file

  • 
    
    
    
    
    
    
    Thẻ Hình Ảnh
    
    
    
    

    5. Tiêu đề của hình ảnh

  • 
    
    
    
    
    
    
    Thẻ Hình Ảnh
    
    
    
    

    6. Name of the image image

  Ngoài ra, bạn có thể bổ sung thêm thuộc tính chiều rộng và chiều cao để điều chỉnh kích thước hiển thị hình ảnh

  Thưởng. Nếu bạn muốn tải ảnh lên internet để lấy liên kết trực tiếp thì có thể sử dụng dịch vụ Imgur

  Chèn video

  Mặc dù hiện tại bạn chưa học về HTML5 nhưng ở chức năng chèn video này, chúng tôi sẽ sử dụng một thẻ trong HTML để chèn video nhanh chóng, đó là cặp thẻ

  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  

  7 như sau

  Xem Pen XJwWKv của Thạch Phạm (@thachpham92) trên CodePen
  

  Nghĩa là trong cặp thẻ

  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  

  7 sẽ có thẻ

  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  

  9 với các thuộc tính nhằm khai báo đường dẫn tệp video và loại tệp. Các thuộc tính bên trong cặp thẻ này có vẻ không có gì 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ẻ

  Chèn âm thanh – nhạc
  Giống như thẻ 
  2 và thẻ này cũng là HTML5
  Xem Bút MYdYdo của Thạch Phạm (@thachpham92) trên CodePen
  Chèn đối tượng kỹ thuật số với thẻ 
  Thẻ Hình Ảnh
  40
  Ngoài các thẻ đặc trưng cho từng loại tệp ở trên, bạn còn có một cách khác để thêm các đối tượng kỹ thuật số vào tài liệu HTML đó là sử dụng thẻ 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  40, đây là một thẻ có thể giúp bạn thêm các loại đối tượng . Nhưng thông thường thì một số loại mã nhúng của một số trang web cho phép sử dụng mã nhúng như Youtube, họ sẽ sử dụng thẻ này để bạn chèn đối tượng vào web
  Thẻ này có khá nhiều thuộc tính nên bạn có thể tham khảo tại đây
  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 bất kỳ vào tài liệu HTML của bạn, thì bạn có thể sử dụng thẻ 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  42 như sau
  Xem Bút MYdYNv của Thạch Phạm (@thachpham92) trên CodePen
  Trong đó, thuộc tính 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  4 là đường dẫn của trang mà bạn muốn nhúng vào, 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  44 và 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  45 là kích thước của các khung hiển thị (gọi là khung)
  Ngoài ra, còn một cách nữa để chèn một liên kết và ép nó mở bằng khung trên trang web đó là sử dụng thuộc tính 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  46 trong thẻ 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  42 và thuộc tính 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  48 trong thẻ 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  49, xem ví dụ
  Xem Pen GgaJgK của Thạch Phạm (@thachpham92) trên CodePen
  Trong đó, giá trị của thuộc tính mục tiêu trong thẻ 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  49 phải trùng với giá trị trong tên thuộc tính của thẻ 
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  
  42
  Lời kết
  Kết thúc bài viết này thì bây giờ bạn đã có khá nhiều kiến ​​thức về HTML để có thể soạn nội dung cho một trang web tài liệu HTML tương đối đầy đủ rồi đấy. Kế tiếp ở các phần sau, chúng ta sẽ tìm hiểu thêm một vài thẻ quan trọng khác và một số kỹ thuật quan trọng nhất trong HTML khi tiến hành xây dựng trang web
   
  Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu các bạn về thẻ 
  Như các bạn đã thấy thì thẻ hình ảnh có thuộc tính src để xác định nơi chúng ta chứa hình ảnh (Có thể là trên web hoặc có thể trên máy tính của mình). Thuộc tính alt thì xác định thêm thông tin về hình ảnh (Nếu như hình ảnh không hiển thị thì các dòng chữ trong thuộc tính này sẽ xuất hiện). Bây giờ hãy xem ví dụ để hiểu rõ hơn nhé
  
  
  
  Đầu tiên các bạn tạo cho mình 1 thư mục có cấu trúc như sau
  Ở đây thì các bạn có thể lấy bất cứ hình ảnh nào cũng lấy được nhưng quan trọng là phải đúng đường dẫn thì trình duyệt mới hiện hình ảnh được nhé
  Bước tiếp theo là mình tạo cấu trúc cho file HTML bài 5
  
  
  
  
  
  
  
  Thẻ Hình Ảnh
  
  
  Sau đó các bạn tạo chèn thẻ 
  
  
  

  Cuối cùng chúng ta sẽ có kết quả như sau

  

  Ngoài 2 thuộc tính src và alt của thẻ

  Một số lưu ý khi sử dụng hình ảnh cho trang web

  • The number of the web information, thường lưu cấu hình ảnh dưới định dạng là jpeg , gif, png và svg. Các bạn cũng có thể chọn các định dạng khác nhau nhưng như vậy nhiều khi sẽ làm kích thước hình ảnh của chúng ta lớn ảnh hưởng đến quá trình tải trang
  • Dùng thuộc tính alt trong thẻ hình ảnh sẽ giúp cho trang web của các bạn được Goole dễ tìm thấy hơn. Nhưng đừng vì vậy mà ghi dài dòng nhằm để SEO tốt hơn. Hình ảnh với miêu tả như vậy sẽ bị cho là đánh giá không tốt. Các bạn cứ nhớ khi dùng thẻ
    

    Với thuộc tính href thì chúng ta có thể chèn nhiều loại đường dẫn khác nhau (Cái này mình sẽ nói rõ hơn ở phần sau). Chữ đại diện cho đường dẫn có thể là chữ hoặc hình ảnh. To know better than we cùng đi vào ví dụ nhé

    Mã Mã HTML

    Đại diện đường dẫn là chữ

    Google

    Đường dẫn đại diện là hình ảnh

    Show on Web

    Đại diện đường dẫn là chữ

    Google

    Đường dẫn đại diện là hình ảnh

    Tiếp theo mình sẽ cùng nhau tìm hiểu về cách tạo đường dẫn liên kết với các trang HTML trong thư mục

    Chúng ta sẽ tạo một thư mục chứa hai tệp HTML là trangchính. html and gioithieu. html

    

    Sau đó chúng ta thêm đường dẫn từ trang chính. html to trang gioi thieu. html by way insert đoạn mã sau đây

    trangchính. html

    
    
    
    
    
    
    
    Đường dẫn đến trang giới thiệu
    
    Giới thiệu
    
    

    giớiithieu. html

    
    
    
    
    
    
    
    Xin chào các bạn đến với trang web của mình. Chúc các bạn học tập thật tốt nhé!
    
    
    

    Khi bạn nhấn vào đường dẫn liên kết Giới thiệu tại trangchinh. html thì trình duyệt sẽ tự động chuyển sang trang giới thiệu. html như hình dưới đây.

    

    Một số thuộc tính của thẻ đường dẫn

    Thuộc tính mục tiêu trong thẻ đường dẫn

    Thuộc tính này có tác dụng khi người dùng nhấp vào đường dẫn liên kết của chúng ta, trình duyệt sẽ hiển thị trang web được liên kết bằng một cửa sổ hoặc một thẻ mới

    Mã Mã HTML

    Mở cửa sổ mới tới trang Google

    Show on Web

    Open window new to page Google

    mailto value. in href href

    Khi người dùng nhấp vào liên kết có giá trị thuộc tính này, nó sẽ khởi động chương trình email có sẵn trong máy và tự động điền địa chỉ gửi thư được lấy trong giá trị thuộc tính. Các bạn xem ví dụ để biết rõ hơn nhé

    Mã Mã HTML

    ________số 8

    Show on Web

    Gửi mail tới niềm vui lập trình
    Tel value. in href href

    Khi người dùng nhấp vào liên kết có giá trị thuộc tính này, nó sẽ tự động gọi đến số mà họ đã chèn vào liên kết. Cái này thì mình thấy thường sử dụng trên điện thoại là chủ yếu. Các bạn xem ví dụ để biết rõ hơn nhé

    Mã Mã HTML

    Gửi mail tới niềm vui lập trình

    Show on Web

    Call to the joy setting process
    Thuộc tính tải xuống

    Khi chúng ta có những hình ảnh, văn bản, pdf. cho phép người dùng tải xuống để sử dụng, thuộc tính này có tác dụng là khi người dùng nhấp vào đường dẫn vào thì nó sẽ tự động tải xuống máy của họ. Các bạn xem ví dụ để biết rõ hơn nhé

    Mã Mã HTML

    
    
    
    
    
    
    
    Thẻ Hình Ảnh
    
    
    
    

    0

    Show on Web

    Tải hình ảnh từ niềm vui lập trình

    Nếu bạn muốn tham khảo các hiệu ứng đường dẫn dành cho website thì truy cập đường dẫn bên dưới nha.
    Hiệu Ứng Hover CSS Đẹp Cho Đường Dẫn

    HTML file

    Sau đây mình sẽ có bài tập nhỏ giúp các bạn nhớ lại những gì mình đã học trong ngày hôm nay
    

    1. Đầu tiên là bạn tạo cho mình một thư mục như sau nhé
       

    2. Bước tiếp theo mình sẽ dẫn đường cho các bạn tải cấu hình xuống máy (Các bạn có thể lấy tùy chọn cấu hình không thiết bị nhất phải giống mình nhé)

       Hình ảnh biển
       Các bạn sau đó lưu hình ảnh về máy theo hình ảnh bên dưới này nha.

       

    3. Sau đó thì mình sẽ hiện trang. html up browser. Các bạn nhìn vào đó để chèn những đoạn mã cho phù hợp nhé
       

    4. Sau đó thì mình sẽ hiển thị trang giới thiệu. html up browser. Các bạn nhìn vào đó để chèn những đoạn mã cho phù hợp nhé
       

    Đây là file lời giải của bài các bạn tham khảo. Nhưng trước khi xem hãy cố gắng hoàn thành bài tập để mình nhớ lâu hơn nhé

    Responsive file file

    Trang biển. html

    
    
    
    
    
    
    
    Thẻ Hình Ảnh
    
    
    
    

    1

    Trang giới thiệu. html

    
    
    
    
    
    
    
    Thẻ Hình Ảnh
    
    
    
    

    2

    Còn điều này mình quên nói là khi các bạn làm xong và lưu vào HTML5baitap. html. Thì để mở mình vào thư mục đã lưu file và nhấn trực tiếp vào thì trình duyệt sẽ tự động chạy file đó nhé

    

    Tổng kết

    Qua bài này chúng mình đã hiểu và nắm được thẻ hình ảnh và thẻ đường dẫn trong HTML. Bài tiếp theo mình sẽ hướng dẫn các bạn học về bảng trong HTML. Nếu các bạn có gì thì cứ liên hệ mình sẽ liên lạc với các bạn sớm nhất có thể