Xem cách thực hành luyện tập tạo mã ở đây: [Code Cơ Bản] Hướng Dẫn Cách Thực Hành Code Trên Máy Tính Bằng Notepad Mục Lục: HTML là gì? #1 ([HTML] Học HTML Cơ Bản) #2 ([HTML] Học HTML Cơ Bản) Tài liệu HTML#3 ( [HTML] Học HTML Cơ Bản) Note #4 ([HTML] Học HTML Cơ Bản)HTML là gì? Bấm để xem Chào mừng đến với thế giới của mã! HTML là bộ xương của tất cả các trang web. Nó là ngôn ngữ lập trình đầu tiên được các nhà thiết kế và các nhà tiếp thị và là cốt lõi trong công việc phát triển front-end.HTML cung cấp cấu trúc cho nội dung xuất hiện trên một trang web, chẳng hạn như hình ảnh, văn bản hoặc video. Nhấp chuột phải vào bất kì trang web nào trên internet, chọn Inspect, trực tiếp và bạn sẽ thấy HTML trong bảng điều khiển màn hình của bạn. HTML là viết tắt cho cụm từ HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản) Một ngôn ngữ đánh dấu là một ngôn ngữ máy tính xác định cấu trúc và trình bày văn bản thô Trong HTML, máy tính có thể diễn giải văn bản thô được gói gọn trong các phần tử HTML Siêu văn bản (Hypertext) là văn bản được hiển thị trên máy tính hoặc thiết bị cung cấp quyền truy cập vào văn bản khác thông qua các liên kết, còn được gọi là Siêu liên kết. Bạn có thể nhấp vào một vài siêu liên kết khi truy cập vào 1 trang web bất kì (hoặc là chính Việt Nam Overnight này) Học HTML là bước đầu tiên trong việc tạo trang web, nhưng ngay cả một chút kiến thức cũng có thể giúp bạn đưa các đoạn mã vào các bản tin, blog hoặc mẫu trang web. Khi bạn tiếp tục học, bạn có thể sắp lớp HTML bằng CSS và JavaScript để tạo các trang web động và hấp dẫn trực quan. Nhưng hiện tại, chúng tôi sẽ tập trung vào cách thêm và sửa đổi nội dung cơ bản trên một trang, như văn bản, hình ảnh và video. Đừng lo lắng nếu các trang web trông xấu xí - chúng ta mới bắt đầu. MỔ XẺ HTML Bấm để xem HTML bao gồm các yếu tố(elements) .Các yếu tố này cấu tạo nên trang web và xác định nội dung của nó. Chúng ta hãy xem cách họ viết. Sơ đồ dưới đây hiển thị một phần tử đoạn HTML. Như chúng ta có thể thấy, phần tử đoạn văn được tạo thành từ một thẻ mở(opening tag) ( <p>), nội dung (content) (Hello World!) và một thẻ đóng (closing tag) ( </p>). Một thẻ và các nội dung giữa nó được gọi là một phần tử HTML. Có nhiều thẻ mà chúng ta có thể sử dụng để sắp xếp và hiển thị văn bản và các loại nội dung khác, như hình ảnh. Hãy nhanh chóng xem xét từng phần của yếu tố trong hình: Phần tử HTML (hoặc đơn giản là phần tử - element) - một đơn vị nội dung trong tài liệu HTML được hình thành bởi các thẻ HTML và văn bản hoặc phương tiện chứa trong đó. Thẻ HTML - tên thành phần, được bao quanh bởi dấu ngoặc góc mở ( <) và đóng ( >). Thẻ mở - thẻ HTML đầu tiên được sử dụng để bắt đầu phần tử HTML. Loại thẻ được bao quanh bởi dấu ngoặc mở và đóng. <...> Nội dung - Thông tin (văn bản hoặc các yếu tố khác) có giữa các thẻ mở và đóng của một thành phần HTML. Thẻ đóng - thẻ HTML thứ hai được sử dụng để kết thúc phần tử HTML. Các thẻ đóng có một dấu gạch chéo ( /) bên trong chúng, ngay sau dấu ngoặc góc bên trái.</...> PHẦN THÂN (Body) Bấm để xem Một trong những yếu tố HTML chính mà chúng tôi sử dụng để xây dựng trang web là yếu tố phần thân . Chỉ nội dung bên trong các thẻ body mở và đóng mới có thể được hiển thị trên màn hình. Chúng trông như thế này: HTML: <body> </body> Khi tệp có phần thân, nhiều loại nội dung khác nhau - bao gồm văn bản, hình ảnh và nút - có thể được thêm vào phần thân. HTML: < body > < p > Tôi là một con cún bị lạc.</ p > </body > CẤU TRÚC HTML HTML được tổ chức như một bộ sưu tập các mối quan hệ cây gia đình. Như bạn đã thấy trong phần trước, chúng ta đã đặt các thẻ <p>trong các thẻ<body>. Khi một phần tử được chứa bên trong một phần tử khác, nó được coi là con của phần tử đó. Phần tử con được cho là được lồng bên trong phần tử cha . HTML: < body > < p > Đoạn này là con của body</ p > </ body > Trong ví dụ trên,phần tử <p> được lồng bên trong phần tử<body>. Phần tử <p> được coi là con của phần tử <body> và phần tử <body> được coi là phần tử mẹ. Bạn cũng có thể thấy rằng chúng tôi đã thêm hai khoảng cách thụt lề (sử dụng khoảng trống) để dễ đọc hơn. Vì có thể có nhiều cấp độ làm tổ, sự tương tự này có thể được mở rộng cho các cháu, chắt và hơn thế nữa. Mối quan hệ giữa các yếu tố với các yếu tố tổ tiên và hậu duệ của chúng được gọi là hệ thống phân cấp . Hãy xem xét một ví dụ phức tạp hơn sử dụng một số thẻ mới: HTML: < body > < div > < h1 > Anh chị em với p, nhưng cũng là cháu của body</ h1 > < p > Anh chị em với h1, nhưng cũng là cháu của body </ p > </ div > </ body > Trong ví dụ này,phần tử <body> là cha mẹ của phần tử <div>. Cả hai phần tử <h1>và <p> là con của <div>. Bởi vì <h1>và <p>các yếu tố ở cùng cấp độ, chúng được coi là anh em ruột và đều là cháu của <body> này. Hiểu hệ thống phân cấp HTML rất quan trọng vì các phần tử con có thể kế thừa hành vi và kiểu dáng từ phần tử cha của chúng. Bạn sẽ tìm hiểu thêm về phân cấp trang web khi bạn bắt đầu đào sâu vào CSS. TIÊU ĐỀ (HEADING) Bấm để xem Các tiêu đề trong HTML tương tự như các tiêu đề trong các loại phương tiện khác (truyền thông). Ví dụ, trên báo, các tiêu đề lớn thường được sử dụng để thu hút sự chú ý của người đọc. Những lần khác, các tiêu đề được sử dụng để mô tả nội dung, như tiêu đề của một bộ phim hoặc một bài báo giáo dục. HTML theo một mô hình tương tự. Trong HTML, có sáu tiêu đề hoặc các yếu tố tiêu đề khác nhau . Các tiêu đề có thể được sử dụng cho nhiều mục đích khác nhau, như tiêu đề, bài viết hoặc các dạng nội dung khác. Sau đây là danh sách các yếu tố tiêu đề có sẵn trong HTML. Chúng được đặt hàng từ kích thước lớn nhất đến nhỏ nhất. <h1>- được sử dụng cho các tiêu đề chính. Tất cả các tiêu đề nhỏ hơn khác được sử dụng cho các tiêu đề phụ. <h2> <h3> <h4> <h5> <h6> Mã ví dụ sau sử dụng một tiêu đề nhằm thu hút sự chú ý của người đọc. Nó sử dụng tiêu đề lớn nhất có sẵn, phần tử tiêu đề chính: HTML: < h1 > HOT </h1> DIV - BỘ PHẬN (division) Bấm để xem Một trong những yếu tố phổ biến nhất trong HTML là <div>. <div>là viết tắt của bộ phận phân chia cấp độ nghiêm trọng hoặc một bộ chia trang thành các phần. Các phần này rất hữu ích để nhóm các thành phần trong HTML của bạn lại với nhau. HTML: < body > < div > < h1 > Tại sao nên sử dụng div? </ h1 > < p > Tuyệt vời để phân nhóm các yếu tố! </ p > </ div > </ body > <div> có thể chứa bất kỳ văn bản hoặc các yếu tố HTML khác, chẳng hạn như liên kết, hình ảnh hoặc video.Hãy nhớ luôn luôn thêm hai khoảng cách thụt lề khi bạn lồng các phần tử bên trong <div> để dễ đọc hơn. THUỘC TÍNH (Attributes) Bấm để xem Nếu chúng ta muốn mở rộng thẻ của một phần tử, chúng ta có thể sử dụng một thuộc tính . Các thuộc tính là nội dung được thêm vào thẻ mở của một yếu tố và có thể được sử dụng theo nhiều cách khác nhau, từ cung cấp thông tin đến thay đổi kiểu dáng. Các thuộc tính được tạo thành từ hai phần sau: Các tên của thuộc tính Các giá trị của thuộc tính Một thuộc tính thường được sử dụng là id. Chúng tôi có thể sử dụng thuộc tính id để chỉ định nội dung khác nhau (chẳng hạn như các <div>) và thực sự hữu ích khi bạn sử dụng một yếu tố nhiều lần. id có một số mục đích khác nhau trong HTML, nhưng hiện tại, chúng tôi sẽ tập trung vào cách chúng có thể giúp chúng ta xác định nội dung trên trang của mình. Khi chúng ta thêm một id vào một <div>, chúng ta đặt nó vào thẻ mở: HTML: < div id = "giới thiệu" > < h1 > Giới thiệu </ h1 > </ div >
HIỂN THỊ VĂN BẢN Bấm để xem Bấm để xem Khi bạn nhập một mã code như hình bên trái, nó sẽ ra kết quả như hình bên phải. Hướng dẫn thực hành viết mã tại [Code Cơ Bản] Hướng Dẫn Cách Thực Hành Code Trên Máy Tính Bằng Notepad Nếu bạn muốn hiển thị văn bản trong HTML, bạn có thể sử dụng một đoạn (paragraph) hoặc khoảng (span) : Đoạn văn "<p>.. </p>" chứa mọt khối văn bản thuần túy "<span>.. </span>" chứa các đoạn văn bản ngắn hoặc HTML khác. Chúng được sử dụng để phân tách các phần nội dung nhỏ nằm trên cùn một dòng với nội dung khác. Ví dụ: HTML: <body> <div> <h1> Công nghệ </h1> </div> <div> <p> <span> Ô tô tự lái </span> được dự đoán sẽ thay thế tới 2 triệu việc làm trong hai thập kỷ tới. </p> </div> </body> Trong ví dụ trên, có hai <div> khác nhau. Cái thứ hai <div>chứa <p>với <span>Ô tô tự lái</span>. Yếu tố<span> này tách biệt những chiếc xe tự lái của người dùng khác với phần còn lại của văn bản trong đoạn văn. Tốt nhất là sử dụng một yếu tố<span> khi bạn muốn nhắm mục tiêu một phần nội dung cụ thể là nội tuyến hoặc trên cùng một dòng với văn bản khác. Nếu bạn muốn chia nội dung của mình thành các khối, tốt hơn là sử dụng <div>. HTML trên được tạo ra sẽ trông như thế này: KIỂU CHỨ TRONG VĂN BẢN Bấm để xem Bạn cũng có thể định kiểu văn bản bằng các thẻ HTML. Các thẻ <em> nhấn mạnh văn bản, trong khi thẻ <strong> nêu bật văn bản quan trọng bằng cách tô đậm. Sau này, khi bạn bắt đầu tạo kiểu trang web, bạn sẽ quyết định cách bạn muốn trình duyệt hiển thị nội dung bên trong <em>và <strong>. Tuy nhiên, các trình duyệt có các biểu định kiểu dựng sẵn thường tạo kiểu cho các thẻ này theo các cách sau: Bấm để xem Các thẻ <em>thẻ thường sẽ tạo chữ nghiêng giúp nhấn mạnh. Các thẻ <strong> nói chung sẽ nhấn mạnh đậm. Ví dụ: HTML: <body> <p> <strong> Me!</strong> là bài hát mới của <em>Taylor Swift</em>.</p> </body> sẽ có dạng: Đó là cách mà nó hoạt động! NGẮT DÒNG (BREAK) Bấm để xem Khoảng cách giữa các mã trong tệp HTML không ảnh hưởng đến việc định vị các thành phần trong trình duyệt.Nói cách khác, mặc dù bạn có ngắt dòng trong đoạn văn thì khi lên web, nó vẫn liền với nhau. Nếu bạn quan tâm đến việc sửa đổi khoảng cách trong trình duyệt, bạn có thể sử dụng phần tử ngắt dòng của HTML : <br> Phần tử ngắt dòng là duy nhất vì nó chỉ bao gồm một thẻ bắt đầu. Bạn có thể sử dụng nó ở bất cứ đâu trong mã HTML của bạn và ngắt dòng sẽ được hiển thị trong trình duyệt.Muốn ngắt 1 dòng thì đưa vào 1 thẻ <br>, 2 dòng 2 thẻ..... Ví dụ không có thẻ <br>: HTML: <body> <p> Đường xa lá rơi đón mùa thu Nắng âm áp nhạc ru... Nhớ em đếm từng giờ dù trong giấc mơ Vờ như chẳng nhìn thấy một ai Chỉ có mỗi mình em Rồi dạo bước tay nắm thẹn thùng trời mây mỉm cười Tình yêu tới đôi lúc hằng đêm Ánh trăng đến mà xem Phải chăng cứ nghĩ đến hờn ghen là ta đã yêu Đừng cười với bất cứ 1 ai Dẫu anh biết là sai Ngại ngùng anh chỉ muốn thể hiện tình yêu to lớn ... </P> </body> kết quả là: Khi có thẻ <br> HTML: <body> <p> Đường xa lá rơi đón mùa thu<br>Nắng âm áp nhạc ru...<br>Nhớ em đếm từng giờ dù trong giấc mơ<br> Vờ như chẳng nhìn thấy một ai <br> Chỉ có mỗi mình em <br> Rồi dạo bước tay nắm thẹn thùng trời mây mỉm cười<br> Tình yêu tới đôi lúc hằng đêm <br> Ánh trăng đến mà xem<br> Phải chăng cứ nghĩ đến hờn ghen là ta đã yêu <br> Đừng cười với bất cứ 1 ai <br> Dẫu anh biết là sai <br> Ngại ngùng anh chỉ muốn thể hiện tình yêu to lớn ...<br> </p> </body> Ta được: Bấm để xem Thật tuyệt phải không? LẬP DANH SÁCH Bấm để xem *DANH SÁCH KHÔNG THEO THỨ TỰ: Ngoài việc tổ chức văn bản ở dạng đoạn văn, bạn cũng có thể hiển thị nội dung trong một danh sách dễ đọc. Trong HTML, bạn có thể sử dụng thẻ danh sách không có thứ tự ( <ul>) (Unordered Lists) để tạo danh sách các mục không theo thứ tự cụ thể. Một danh sách không có thứ tự phác thảo các mục danh sách cá nhân với một dấu đầu dòng. Phần <ul>tử không được giữ văn bản thô và sẽ không tự động định dạng văn bản thô thành một danh sách các mục không có thứ tự. Các mục danh sách riêng lẻ phải được thêm vào danh sách không theo thứ tự bằng cách sử dụng thẻ<li> (viết tắt cho List). Thẻ <li>hoặc danh sách mục được sử dụng để mô tả một mục trong danh sách. HTML: <body> <ul> <li>Lims </li> <li>Tortillas </li> <li>Gà </li> </ul> </body> Trong ví dụ trên, danh sách được tạo bằng thẻ <ul>và tất cả các mục danh sách riêng lẻ được thêm bằng thẻ <li>. Đầu ra sẽ như thế này: Bấm để xem Lims Tortillas Chicken *DANH SÁCH THEO THỨ TỰ (ORDERED LISTS) Danh sách được sắp xếp "<ol>" giống như danh sách không có thứ tự, ngoại trừ mỗi mục danh sách được đánh số. Chúng rất hữu ích khi bạn cần liệt kê các bước khác nhau trong một quy trình hoặc xếp hạng các mục đầu tiên để kéo dài. Bạn có thể tạo danh sách theo thứ tự với thẻ <ol> và sau đó thêm các mục danh sách riêng lẻ vào danh sách bằng cách sử dụng thẻ <li> Để ra danh sạc như thế này Và thế này ... ... HÌNH ẢNH Bấm để xem Tất cả các yếu tố bạn đã học từ trước đến nay (tiêu đề, đoạn văn, danh sách và kiểu chữ) đều có một điểm chung: chúng được cấu tạo hoàn toàn bằng văn bản! Điều gì xảy ra nếu bạn muốn thêm nội dung vào trang web không bao gồm văn bản, như hình ảnh? Các thẻ <img>(viết tắt cho image-hình ảnh) cho phép bạn thêm một hình ảnh đến một trang web. Hầu hết các yếu tố yêu cầu cả thẻ mở và đóng, nhưng thẻ <img>là thẻ tự đóng . Lưu ý rằng phần cuối của <img>thẻ có dấu gạch chéo về phía trước /. Các thẻ tự đóng có thể bao gồm hoặc bỏ qua dấu gạch chéo cuối cùng - cả hai sẽ hiển thị đúng. Ví dụ: HTML: <img src = "image-location.jpg" /> Các thẻ<img> có yêu cầu thuộc tính- src. Các thuộc tính src phải được đặt nguồn của hình ảnh như URL (link), hoặc vị trí của hình ảnh. Trong trường hợp này, giá trị của src phải là bộ định vị nguồn thống nhất (URL) của hình ảnh. URL là địa chỉ web hoặc địa chỉ cục bộ nơi tệp được lưu trữ. ẢNH ALTS Bấm để xem Một phần của việc trở thành một nhà phát triển web đặc biệt là làm cho trang web của bạn có thể truy cập được đối với người dùng thuộc mọi nền tảng. Để làm cho Web trở nên toàn diện hơn, chúng ta cần xem xét điều gì sẽ xảy ra khi các công nghệ hỗ trợ như trình đọc màn hình bắt gặp các thẻ hình ảnh. Các thuộc tính alt (có nghĩa là văn bản thay thế) mang lại ý nghĩa cho những hình ảnh trên các trang web của chúng ta. Các thuộc tính alt có thể được thêm vào thẻ hình ảnh giống như các thuộc tính src. Giá trị của alt nên là một mô tả của hình ảnh. Ví dụ: HTML: < img src = "#" alt = "Một cánh đồng hoa hướng dương màu vàng" /> Các thuộc tính alt cũng phục vụ các mục đích sau: Bấm để xem Nếu một hình ảnh không tải được trên một trang web, người dùng có thể di chuột qua khu vực ban đầu dành cho hình ảnh và đọc một mô tả ngắn gọn về hình ảnh. Điều này được thực hiện bởi mô tả bạn cung cấp trong thuộc tính alt . Người dùng khiếm thị thường duyệt web với sự trợ giúp của phần mềm đọc màn hình. Khi bạn bao gồm thuộc tính alt , phần mềm đọc màn hình có thể đọc to mô tả của hình ảnh cho người dùng khiếm thị. Các thuộc tính alt cũng đóng một vai trò trong Search Engine Optimization (SEO), vì công cụ tìm kiếm không thể "nhìn thấy" những hình ảnh trên các trang web như họ thu thập dữ liệu internet. Có thuộc tính alt mô tả có thể cải thiện thứ hạng của trang web của bạn. Nếu hình ảnh trên trang web không phải là hình ảnh truyền tải bất kỳ thông tin có ý nghĩa nào đến người dùng (khiếm thị hoặc mặt khác), thuộc tính alt nên được để trống. VIDEO Bấm để xem Ngoài hình ảnh, HTML cũng hỗ trợ hiển thị video. Giống như thẻ <img> , thẻ <video>yêu cầu một thuộc tính src có liên kết đến nguồn video. Tuy nhiên, không giống như thẻ<img>,phần tử <video>yêu cầu mở và đóng thẻ. Ví dụ: HTML: < video src = "myVideo.mp4" width = "320" height = "240"controls> Video không được hỗ trợ </ video > Trong ví dụ này, nguồn video (src) là "myVideo. Mp4". Nguồn có thể là nơi tệp video được lưu trữ dọc theo trang web của bạn hoặc URL trỏ đến tệp video được lưu trữ trên trang web khác. Sau thuộc tính src, thuộc tính width (độ rộng video chiếm chỗ) và height (chiều cao) được sử dụng để đặt kích thước của video được hiển thị trong trình duyệt. Các thuộc tính controls chỉ thị các trình duyệt bao gồm điều khiển video cơ bản: Tạm dừng, chơi và bỏ qua. Văn bản "Video Video không được hỗ trợ", giữa các thẻ video mở và đóng sẽ chỉ được hiển thị nếu trình duyệt không thể tải video. * * *to be continue.
TÀI LIỆU TRONG HTML CHUẨN BỊ CHO HTML Bấm để xem Các tệp HTML yêu cầu các yếu tố nhất định để thiết lập tài liệu đúng cách. Bạn có thể cho các trình duyệt web biết rằng bạn đang sử dụng HTML bằng cách bắt đầu tài liệu của bạn bằng một khai báo loại tài liệu (document type declaration) HTML: <!DOCTYPE html> Tuyên bố này là một hướng dẫn và nó phải là dòng mã đầu tiên trong tài liệu HTML của bạn. Nó cho trình duyệt biết loại tài liệu nào sẽ được đưa ra, cùng với phiên bản HTML nào đang được sử dụng trong tài liệu. Hiện tại, trình duyệt sẽ giả định chính xác rằng phần html trong <!DOCTYPE html>đang đề cập đến HTML5 , vì đây là tiêu chuẩn hiện tại. Tuy nhiên, trong tương lai, một tiêu chuẩn mới sẽ ghi đè HTML5. Để đảm bảo tài liệu của bạn được giải thích chính xác mãi mãi, luôn luôn bao gồm <!DOCTYPE html>ở phần đầu của tài liệu HTML. Cuối cùng, mã HTML luôn được lưu trong một tệp có phần mở rộng .html THẺ HTML Bấm để xem <!DOCTYPE html> tuyên bố cung cấp trình duyệt với hai thông tin (các loại tài liệu và phiên bản HTML để mong đợi), nhưng nó không thực sự thêm bất kỳ cấu trúc HTML hoặc nội dung. Để tạo cấu trúc và nội dung HTML, chúng ta phải thêm các thẻ mở <html> và đóng sau khi khai báo <!DOCTYPE html> HTML: <!DOCTYPE html> <html> </html> Bất cứ điều gì giữa các thẻ mở <html>và đóng </html> sẽ được hiểu là mã HTML. Nếu không có các thẻ này, có thể các trình duyệt có thể hiểu sai mã HTML của bạn. THE HEAD (ĐẦU ĐỀ) Bấm để xem Cho đến nay bạn đã thực hiện hai điều để thiết lập tệp đúng cách: Khai báo với trình duyệt rằng mã của bạn là HTML với <!DOCTYPE html> Đã thêm phần tử HTML (<html>) sẽ chứa phần còn lại của mã của bạn. Chúng tôi đã thêm các yếu tố này vào trang Brown Bears mà bạn đã tạo trước đây. Bây giờ, hãy cũng cung cấp cho trình duyệt một số thông tin về chính trang đó. Chúng ta có thể làm điều này bằng cách thêm một <head>yếu tố. Ghi nhớ <body>thẻ? Các <head>phần tử là một phần của phép ẩn dụ HTML này. Nó vượt lên trên <body>yếu tố của chúng tôi. Phần <head>tử chứa siêu dữ liệu cho một trang web. Siêu dữ liệu là thông tin về trang không được hiển thị trực tiếp trên trang web. Không giống như thông tin bên trong <body>thẻ, siêu dữ liệu trong đầu là thông tin về chính trang đó. Bạn sẽ thấy một ví dụ về điều này trong bài tập tiếp theo. Các thẻ đầu mở và đóng thường xuất hiện dưới dạng mục đầu tiên sau thẻ HTML đầu tiên của bạn: HTML: <h></h> TIÊU ĐỀ TRANG (TITLE) Bấm để xem Tab của trình duyệt hiển thị tiêu đề được chỉ định trong thẻ<title>. Các thẻ <title>luôn ở trong <head> HTML: <!DOCTYPE html> <html> <head> <title>Tạp chí mã hóa của tôi</title> </head> </html> Ví dụ: Tiêu đề hiển thị như tên tab. Ví dụ: Facebook (mở facebook lên, bạn sẽ thấy trên teb đó có tên Facebook) LIÊN KẾT ĐẾN CÁC TRANG WEB KHÁC Bấm để xem Một trong những khía cạnh mạnh mẽ của HTML (và Internet), là khả năng liên kết đến các trang web khác. Bạn có thể thêm liên kết vào một trang web bằng cách thêm một yếu tốmỏ neo (anchor) <a> và bao gồm văn bản của liên kết ở giữa các thẻ mở và đóng. Trong thẻ mở <a> cần có thuốc tính href (chúng ta đã đề cập đến trong phần chèn ảnh), được sử dụng để liên kết với một đường link (URL) hay địa chỉ nơi chứa tệp HTML: <a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a> MỞ LIÊN KẾT TRONG MỘT CỬA SỔ MỚI Bạn đã bao giờ nhấp vào một liên kết và thấy trang web kết quả mở trong một cửa sổ trình duyệt mới? Nếu vậy, đó là nhờ vào thuộc tính <a>của thành phần target (đích đến) Các thuộc tính target quy định cụ thể như thế nào một liên kết sẽ mở ra. Có thể một hoặc nhiều liên kết trên trang web của bạn liên kết đến một trang web hoàn toàn khác. Trong trường hợp đó, bạn có thể muốn người dùng đọc trang web được liên kết, nhưng hy vọng rằng họ sẽ quay lại trang web của bạn. Điều này là chính xác khi thuộc tính target là hữu ích! Để một liên kết mở trong một cửa sổ mới, thuộc tính target yêu cầu giá trị là _blank (trang trống). Các thuộc tính target có thể được thêm trực tiếp vào thẻ mở của phần tử neo, giống như các thuộc tính href. Mã: <a href="https://en.wikipedia.org/wiki/Brown_bear"target="_blank">Brown bears</a> Trong ví dụ trên, đặt thuộc tính target "_blank" hướng dẫn trình duyệt mở trang Wikipedia có liên quan trong một cửa sổ mới. LIÊN KẾT ĐẾN TRANG CÓ QUAN HỆ Bấm để xem Cho đến nay bạn đã học được cách liên kết với các trang web bên ngoài. Nhiều trang web cũng liên kết đến các trang web nội bộ như Trang chủ, Giới thiệu và Liên hệ. Trước khi chúng tôi tìm hiểu cách liên kết giữa các trang nội bộ, hãy thiết lập nơi lưu trữ tệp của chúng tôi. Khi tạo các trang web tĩnh nhiều trang, các nhà phát triển web thường lưu trữ các tệp HTML trong thư mục gốc hoặc thư mục chính nơi lưu trữ tất cả các tệp cho dự án. Khi kích thước của các dự án bạn tạo tăng lên, bạn có thể sử dụng các thư mục bổ sung trong thư mục dự án chính để sắp xếp mã của mình. HTML: project-folder/ |-- about.html |-- contact.html |-- index.html Ví dụ trên hiển thị ba tệp khác nhau - about.html , contact.html và index.html trong một thư mục. Các tệp HTML thường được lưu trữ trong cùng một thư mục, như trong ví dụ trên.Nếu trình duyệt hiện đang hiển thị index.html , thì nó cũng biết rằng about.html và contact.html nằm trong cùng một thư mục. Vì các tệp được lưu trữ trong cùng một thư mục, chúng tôi có thể liên kết các trang web với nhau bằng một đường dẫn quan hệ Mã: <a href="./contact.html">Contact</a> Trong ví dụ này, <a> được sử dụng với một đường dẫn tương đối để liên kết từ tệp HTML hiện tại đến tệp contact.html trong cùng một thư mục. Trên trang web, Contact sẽ xuất hiện dưới dạng một liên kết. Đường dẫn quan hệ là tên tệp hiển thị đường dẫn đến tệp cục bộ (một tệp trên cùng một trang web, chẳng hạn như ./index.html) so với đường dẫn tuyệt đối (một URL đầy đủ, giống như được lưu trữ trong một thư mục khác). Cái ./ trong ./index.html nói cho trình duyệt tìm tệp trong thư mục hiện tại. LIÊN KẾ THEO Ý MUỐN Có lẽ bạn đã truy cập các trang web mà không phải tất cả các liên kết được tạo thành từ văn bản. Có thể các liên kết bạn nhấp vào là hình ảnh hoặc một số dạng nội dung khác. Cho đến nay, ta đã thêm các liên kết được tạo thành chỉ bằng văn bản. Tuy nhiên, các liên kết chỉ có văn bản sẽ làm giảm đáng kể tính linh hoạt của bạn với tư cách là nhà phát triển web! Rất may, HTML cho phép bạn biến gần như bất kỳ phần tử nào thành một liên kết bằng cách gói phần tử đó bằng một phần tử neo (anchor). Với kỹ thuật này, có thể biến hình ảnh thành các liên kết bằng cách chỉ cần bọc phần tử <img> bằng một phần tử <a> HTML: <a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="#" alt="Một màu đỏ gai quả lê"/></a> Trong ví dụ trên, hình ảnh của một quả lê gai đã được biến thành một liên kết bằng cách bọc bên ngoài của phần tử<img> với một phần tử<a> LIÊN KẾT ĐẾN CÙNG 1 TRANG Bấm để xem Giả sử bạn có tất cả nội dung mà bạn muốn trên trang của bạn. Vì có quá nhiều nội dung, nên tất cả đều không vừa với màn hình. Làm cách nào để bạn giúp người dùng dễ dàng chuyển đến các phần khác nhau của trang? Khi người dùng truy cập trang web của bạn,bạn muốn họ có thể nhấp vào một liên kết và để trang tự động cuộn đến một phần cụ thể. Để liên kết đến một mục tiêu trên cùng một trang,ta phải cung cấp cho mục tiêu một id, như thế này: HTML: <p id="top">Đây là đầu trang!</p> <h1 id="bottom">Đây là đáy!</h1> Trong ví dụ này, phần tử <p> được gán một phần tử id "top" và <h1> được gán với id "bottom".id có thể được thêm vào hầu hết các phần tử trên một trang web. Một id nên được mô tả để dễ nhớ mục đích của một liên kết. Liên kết đích là một chuỗi chứa #ký tự và phần tử đích id. HTML: <ol> <li><a href="#top">Top</a></li> <li><a href="#bottom">Bottom</a></li> </ol> Trong ví dụ trên, các liên kết đến <p id= "top" >và <h1 id= "bottom" >được nhúng trong một danh sách theo thứ tự. Các liên kết này xuất hiện trong trình duyệt dưới dạng một danh sách các liên kết được đánh số. Id đặc biệt hữu ích cho việc tổ chức nội dung thuộc về div!
Note: Trình bày trang dễ nhìn hơn Bấm để xem Khoảng trắng Khi mã trong tệp HTML phát triển, việc theo dõi các yếu tố có liên quan đến nhau ngày càng khó khăn như thế nào. Các lập trình viên sử dụng hai công cụ để hình dung mối quan hệ giữa các yếu tố: Khoảng trắng và thụt đầu dòng. Cả hai công cụ đều tận dụng thực tế là vị trí của các phần tử trong trình duyệt không phụ thuộc vào số lượng khoảng trắng hoặc thụt lề trong tệp index.html Ví dụ: Nếu bạn muốn tăng khoảng trắng giữa hai đoạn trên trang web của mình, bạn sẽ không thể thực hiện điều này bằng cách thêm khoảng trắng giữa các thành phần đoạn trong tệp index. Html. Trình duyệt bỏ qua khoảng trắng trong các tệp HTML khi nó hiển thị một trang web, vì vậy nó có thể được sử dụng như một công cụ để làm cho mã dễ đọc và theo dõi hơn. Ví dụ: HTML: <body> <p>Paragraph 1</p> <p>Paragraph 2</p> </body> Thụt lề Các nhà phát triển web công cụ thứ hai sử dụng để làm cho cấu trúc mã dễ đọc hơn là thụt lề. Các khoảng trắng được chèn bằng cách sử dụng các thanh space và tab trên bàn phím của bạn ví dụ: HTML: <body> <p>Paragraph 1</p> <div> <p>Paragraph 2</p> </div> </body>
