Nếu bạn biết cách tạo liên kết trong Markdown, bạn cũng có thể tạo hình ảnh. Cú pháp gần như y hệt.
Hình ảnh cũng có hai kiểu, giống như liên kết, và cả hai đều được hiển thị
theo cùng một cách. Sự khác biệt giữa liên kết và hình ảnh là hình ảnh được
bắt đầu bằng một dấu chấm than ( !
).
Kiểu hình ảnh đầu tiên được gọi là liên kết hình ảnh nội tuyến. Để
tạo một liên kết hình ảnh nội tuyến, hãy nhập một dấu chấm than (
!
), bọc văn bản thay thế trong ngoặc vuông (
[ ]
), sau đó bọc liên kết trong ngoặc đơn (
( )
). (Văn bản thay thế là một cụm từ hoặc câu mô tả hình ảnh
dành cho những người khiếm thị.)
Ví dụ, để tạo một liên kết hình ảnh nội tuyến đến
https://octodex.github.com/images/bannekat.png, với văn bản thay thế
"Benjamin Bannekat",sẽ được viết như sau trong Markdown:
![Benjamin
Bannekat](https://octodex.github.com/images/bannekat.png)
.
Trong ô dưới đây, chuyển liên kết thành một hình ảnh, và điền vào phần ngoặc vuông văn bản thay thế "Một con hổ đẹp":
Tuyệt vời!
Mặc dù bạn không cần thêm văn bản thay thế, nhưng nó sẽ giúp nội dung của bạn dễ tiếp cận hơn với người xem, bao gồm cả những người khiếm thị, sử dụng trình đọc màn hình, hoặc không có kết nối internet tốc độ cao.
Đối với hình ảnh tham chiếu, bạn sẽ làm theo cùng một mẫu như liên kết
tham chiếu. Bạn sẽ đặt một dấu chấm than trước Markdown, sau đó cung cấp
hai ngoặc vuông cho văn bản thay thế, và sau đó là hai ngoặc vuông khác
cho thẻ hình ảnh, như thế này: ![Người sáng lập][Cha]
Ở cuối
trang Markdown của bạn, bạn sẽ xác định một hình ảnh cho thẻ, như thế này:
[Cha]: http://octodex.github.com/images/founding-father.jpg
.
Trong ô dưới đây, chúng tôi đã bắt đầu đặt một số hình ảnh tham chiếu; bạn
sẽ cần hoàn thiện chúng, giống như bài học trước. Đặt thẻ tham chiếu đầu
tiên là "Đen", và liên kết nó đến
https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpg
; hãy liên kết hình ảnh thứ hai đến
http://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/256/22221-cat-icon.png
.
Tada! Bạn đã học được tất cả những gì cần thiết để có thể thêm hình ảnh trong Markdown!
Đến bài học tiếp theo!