Những điều cần biết
- Nhấp chuột phải vào trang web và chọn Xem nguồn trang .
- Phím tắt:Nhấn Ctrl + Ư (Windows PC) hoặc Lệnh + Tùy chọn + Ư (Mac).
- Để sử dụng các công cụ dành cho nhà phát triển của Chrome, hãy chọn Trình đơn (ba chấm) > Các công cụ khác > Công cụ dành cho nhà phát triển .
Bài viết này giải thích cách truy cập mã nguồn HTML của trang web trong trình duyệt web Google Chrome, cũng như truy cập và sử dụng các công cụ dành cho nhà phát triển của Chrome. Xem mã nguồn của trang web là một cách tuyệt vời cho người mới bắt đầu học HTML.
Xem mã nguồn trong Chrome
Vậy làm thế nào để bạn xem mã nguồn của một trang web? Dưới đây là hướng dẫn từng bước để thực hiện việc này bằng trình duyệt Google Chrome.
-
Mở trình duyệt web Google Chrome (nếu bạn chưa cài đặt Google Chrome, đây là bản tải xuống miễn phí).
-
Điều hướng đến trang web bạn muốn kiểm tra .
-
Nhấp chuột phải vào trang và nhìn vào menu xuất hiện. Từ trình đơn đó, nhấp vào Xem nguồn trang .
-
Mã nguồn của trang đó bây giờ sẽ xuất hiện dưới dạng một tab mới trong trình duyệt.
-
Ngoài ra, bạn cũng có thể sử dụng phím tắt Ctrl + Ư trên PC để mở cửa sổ có mã nguồn của trang web được hiển thị. Trên máy Mac, phím tắt này là Command + Tùy chọn + Ư .
Sử dụng Công cụ dành cho nhà phát triển của Chrome
Ngoài Xem nguồn trang đơn giản khả năng mà Google Chrome cung cấp, bạn cũng có thể tận dụng các Công cụ dành cho nhà phát triển tuyệt vời của họ để tìm hiểu sâu hơn về một trang web. Những công cụ này sẽ cho phép bạn không chỉ xem HTML mà còn cả CSS áp dụng để xem các phần tử trong tài liệu HTML đó.
Để sử dụng các công cụ dành cho nhà phát triển của Chrome:
-
Mở Google Chrome .
-
Điều hướng đến trang web bạn muốn kiểm tra .
-
Chọn menu ba chấm ở góc trên bên phải của cửa sổ trình duyệt.
-
Từ trình đơn, di chuột qua Công cụ khác rồi chọn Công cụ dành cho nhà phát triển trong menu xuất hiện.
-
Một cửa sổ sẽ mở ra hiển thị mã nguồn HTML ở bên trái của ngăn và CSS có liên quan ở bên phải.
-
Ngoài ra, nếu bạn nhấp chuột phải vào một phần tử trong trang web và chọn Kiểm tra từ menu xuất hiện, các công cụ dành cho nhà phát triển của Chrome sẽ bật lên và đánh dấu phần cụ thể mà bạn đã chọn trong HTML với CSS tương ứng được hiển thị ở bên phải. Sẽ rất hữu ích nếu bạn muốn tìm hiểu thêm về một phần cụ thể của trang web.
Xem mã nguồn có hợp pháp không?
Trong những năm qua, chúng tôi đã có nhiều nhà thiết kế web mới đặt câu hỏi rằng liệu có thể chấp nhận được việc xem mã nguồn của một trang web và sử dụng nó cho giáo dục của họ và cuối cùng là cho công việc họ làm hay không. Mặc dù việc sao chép bán buôn mã của một trang web và chuyển nó thành mã của riêng bạn trên một trang web chắc chắn là không thể chấp nhận được, nhưng việc sử dụng mã đó làm bàn đạp để học hỏi trên thực tế là có bao nhiêu tiến bộ được tạo ra trong ngành này.
Như chúng tôi đã đề cập ở phần đầu của bài viết này, bạn sẽ khó tìm thấy một chuyên gia web đang làm việc ngày nay mà chưa học được điều gì đó bằng cách xem nguồn của trang web! Có, việc xem mã nguồn của trang web là hợp pháp. Sử dụng mã đó làm tài nguyên để xây dựng thứ gì đó tương tự cũng rất an toàn. Lấy mã nguyên gốc và chuyển nó đi vì công việc của bạn là nơi bạn bắt đầu gặp vấn đề.
Cuối cùng, các chuyên gia web học hỏi lẫn nhau và thường cải thiện công việc mà họ thấy và được truyền cảm hứng, vì vậy đừng ngần ngại xem mã nguồn của trang web và sử dụng nó như một công cụ học tập.
Không chỉ là HTML
Một điều cần nhớ là các tệp nguồn có thể rất phức tạp (và trang web bạn đang xem càng phức tạp thì mã của trang web đó càng phức tạp). Ngoài cấu trúc HTML tạo nên trang, cũng sẽ có CSS (các biểu định kiểu xếp tầng) quy định giao diện trực quan của trang web đó. Ngoài ra, nhiều trang web ngày nay sẽ bao gồm các tệp tập lệnh được bao gồm cùng với HTML.
Có thể có nhiều tệp kịch bản được bao gồm; trên thực tế, mỗi thứ cung cấp năng lượng cho các khía cạnh khác nhau của trang web. Thành thật mà nói, mã nguồn của một trang web có thể có vẻ quá tải, đặc biệt nếu bạn là người mới làm việc này. Đừng bực bội nếu bạn không thể tìm ra điều gì đang xảy ra với trang web đó ngay lập tức. Xem mã nguồn HTML chỉ là bước đầu tiên trong quá trình này. Với một chút kinh nghiệm, bạn sẽ bắt đầu hiểu rõ hơn cách tất cả các phần này khớp với nhau để tạo ra trang web mà bạn thấy trong trình duyệt của mình. Khi bạn quen thuộc hơn với mã, bạn sẽ có thể học hỏi thêm từ nó và nó dường như không quá khó khăn đối với bạn.