Bài 2: Xử lý hình ảnh(IMG), đường dẫn(URL) trong HTML5

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi phamcongson, 1/12/15.

  1. phamcongson
    Tham gia ngày:
    3/6/13
    Bài viết:
    474
    Đã được thích:
    93
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Bài 2: Xử lý hình ảnh(IMG), đường dẫn(URL) trong HTML5
    Bài 2, bài viết nói về thẻ img(thẻ hình ảnh) và thẻ <a... thẻ đường dẫn, thẻ liên kết.

    Cấu trúc thẻ hình ảnh:
    Mã:
    <img src="đường dẫn ảnh" alt="Mô tả hình ảnh">
    
    Cấu trúc đường dẫn, thẻ liên kết:
    Mã:
    <a href="đường dẫn web liên kết" >Giá trị hiển thị trong liên kết</a>
    
    Cấu trúc 1 đường dẫn named anchor.
    Mã:
    <a href="#c1">Tên Anchor hiển thị</a> <!-- #c1: tên anchor trỏ tới, di chuyển tới khi click chuật vào -->[B][/B]
    <a name="c1"></a>  <!-- vị trí anchor di chuyển tới khi click -->
    
    Code bài viết: copy code dưới cho vào file notepad và save dướng dạng .html để biết rõ về các thẻ này, hoặc download code ở cuối bài viết.
    Mã:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Bài 2: Xử lý hình ảnh trong HTML</title>
    </head>
    
    <body>
    
    <h1 align="center">Bài 2: Xử lý hình ảnh(IMG), đường dẫn(URL) trong HTML</h1>
    
    <!-- đường dẫn tuyệt đối -->
    <img src="https://itseovn.com/img/bang-gia-xang-dau-hom-nay-moi-nhat.png" alt="Mô tả hình ảnh">
    
    <!-- đường dẫn tương đối -->
    <img src="images/img1.png" vspace="5" hspace="15" alt="Mô tả hình ảnh">
    
    <h4>Named Anchor : <a href="Page/anchor.html#c1">Liên kết chương 1</a></h4>
    
    <h2  align="center">Nội dung bài viết</h2>
    
    <p align="justify">
    <a href="https://itseovn.com" target="_blank">
    <img src="images/img1.png" vspace="5" hspace="15" alt="Mô tả hình ảnh" align="left" width="150">
    </a>
    Khóa học giúp trang bị cho học viên Kiến Thức, Kinh Nghiệm, Kỹ Năng về các phần mềm thông dụng trong ngành thiết kế đồ họa động Autodesk Maya, Adobe After Effects, Adobe Premiere & Cinema 4d. Học viên sẽ học và thực hành trong từng nội dung học để thực hiện tốt từ việc lên ý tưởng, phân cảnh, dàn dựng 3D, dàn dựng xử lý hậu kỳ cùng các công cục tiện ích 3D để tạo ra mô hình, kết cấu, âm thanh và hình ảnh chuyển động trong lĩnh vực hoạt hình, phim ảnh, trò chơi giải trí, truyền hình.
    Khóa học giúp trang bị cho học viên Kiến Thức, Kinh Nghiệm, Kỹ Năng về các phần mềm thông dụng trong ngành thiết kế đồ họa động Autodesk Maya, Adobe After Effects, Adobe Premiere & Cinema 4d. Học viên sẽ học và thực hành trong từng nội dung học để thực hiện tốt từ việc lên ý tưởng, phân cảnh, dàn dựng 3D, dàn dựng xử lý hậu kỳ cùng các công cục tiện ích 3D để tạo ra mô hình, kết cấu, âm thanh và hình ảnh chuyển động trong lĩnh vực hoạt hình, phim ảnh, trò chơi giải trí, truyền hình.
    </p>
    
    <p align="center">
    <img src="https://itseovn.com/img/bang-gia-xang-dau-hom-nay-moi-nhat.png" alt="Mô tả hình ảnh">
    </p>
    
    <p align="justify">Khóa học giúp trang bị cho học viên Kiến Thức, Kinh Nghiệm, Kỹ Năng về các phần mềm thông dụng trong ngành thiết kế đồ họa động Autodesk Maya, Adobe After Effects, Adobe Premiere & Cinema 4d. Học viên sẽ học và thực hành trong từng nội dung học để thực hiện tốt từ việc lên ý tưởng, phân cảnh, dàn dựng 3D, dàn dựng xử lý hậu kỳ cùng các công cục tiện ích 3D để tạo ra mô hình, kết cấu, âm thanh và hình ảnh chuyển động trong lĩnh vực hoạt hình, phim ảnh, trò chơi giải trí, truyền hình.</p>
    
    
    <!-- Thẻ 'a' thẻ liên kết, các thuộc tính chính của thẻ 'a': 'href', 'target' -->
    
    <h4 align="right">Nguần: Trung tâm Đào Tạo Nhất Nghệ -
    <a href="http://www.nhatnghe.com">nhatnghe</a>
    -
    <a href="https://itseovn.com"  target="_blank">itseovn</a> <!-- tạo cửa sổ mới -->
    -
    <a href="images/img1.rar">Download</a></h4>
    
    <h4>Liên hệ</h4>
    <!-- Liên kết tới email tự động-->
    <a href="mailto:itseovn@gmail.com">itseovn@gmail.com</a>
    
    
    <h4>Kiểm tra lệnh javasript trong thẻ &lt;a&gt;</h4>
    <!-- tạo câu lệnh javascript trong thẻ 'a' -->
    <a href="javascript:alert('hello')">Test Javascript</a>
    
    </body>
    </html>
    
    DEMO Online trực tuyến
    DEMO hình ảnh:

    demo-bai-viet-ve-code-hinh-anh-duong-dan-trong-html5.png

    Download :
     
    Cảm ơn đã xem bài:

    Bài 2: Xử lý hình ảnh(IMG), đường dẫn(URL) trong HTML5

    Last edited by a moderator: 4/12/15
  2. lamlehang3030
    Tham gia ngày:
    4/2/16
    Bài viết:
    53
    Đã được thích:
    2
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Bài xử lý hình ảnh hơi khó minh chưa hiểu nhiều lắm chỉ làm cơ bản những gì hiểu được thôi. Cám ơn bạn đã chia sẽ bài viết.
     
    Cảm ơn đã xem bài:

    Bài 2: Xử lý hình ảnh(IMG), đường dẫn(URL) trong HTML5



Chủ để tương tự : Bài Xử
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Bài 3: Cấu trúc bảng table trong Code HTML5 5/12/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Bài 1 : lập trình code html: các ký tự đặc biệt 28/11/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Fixed Menu top navbar in bootstrap, cố định menu khi scrolling kéo xuống dưới 27/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Các thẻ H1, H2,.. không có đường viên xung quanh(margin) 18/10/13