Tìm hiểu cách trang web được xây dựng bằng cách xem mã nguồn của trang web
Khi lần đầu tiên tôi bắt đầu sự nghiệp của mình với tư cách là một nhà thiết kế web, tôi đã học được rất nhiều bằng cách xem xét công việc của các nhà thiết kế web khác mà tôi ngưỡng mộ. Tôi không đơn độc trong chuyện này. Cho dù bạn là người mới đến ngành công nghiệp web hay một cựu chiến binh dày dạn kinh nghiệm, xem nguồn HTML của các trang web khác nhau là điều bạn có thể làm nhiều lần trong suốt sự nghiệp của bạn.
Đối với những người mới bắt đầu thiết kế web, xem mã nguồn của trang web là một trong những cách dễ nhất để xem những thứ nhất định được thực hiện để bạn có thể học từ công việc đó và bắt đầu sử dụng mã hoặc kỹ thuật nhất định trong công việc của riêng bạn. Như bất kỳ nhà thiết kế web nào làm việc ngày hôm nay, đặc biệt là những người đã ở đó từ những ngày đầu của ngành, và đó là một cược an toàn mà họ nói với bạn rằng họ đã học HTML đơn giản bằng cách xem nguồn của các trang web mà họ thấy và bị hấp dẫn bởi. Ngoài việc đọc sách thiết kế web hoặc tham dự hội thảo chuyên nghiệp , việc xem mã nguồn của trang web là một cách tuyệt vời để người mới bắt đầu học HTML.
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, mã của trang web càng phức tạp). Ngoài cấu trúc HTML tạo nên trang bạn đang xem, cũng sẽ có CSS (bảng định kiểu xếp tầng) quyết định giao diện trực quan của trang web đó. Ngoài ra, nhiều trang web hiện nay sẽ bao gồm các tệp tập lệnh đi kèm với HTML.
Có thể có nhiều tệp tập lệnh được bao gồm, trên thực tế, mỗi tệp cung cấp 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 trang web có thể có vẻ áp đảo, đặc biệt nếu bạn mới làm điều này. Đừng thất vọng nếu bạn không thể tìm ra những gì đang xảy ra với trang web đó ngay lập tức. Xem 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 về cách tất cả các phần này phù hợp với nhau để tạo 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ể tìm hiểu thêm từ nó và nó sẽ không có vẻ gây khó khăn cho bạn.
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 đó bằng trình duyệt Google Chrome.
Hướng dẫn từng bước một
- 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à xem trình đơn xuất hiện. Từ trình đơn đó, nhấp vào Xem nguồn trang .
- Mã nguồn cho trang đó bây giờ sẽ xuất hiện dưới dạng tab mới trong trình duyệt.
- Ngoài ra, bạn cũng có thể sử dụng phím tắt của CTRL + U trên PC để mở cửa sổ có mã nguồn của trang web được hiển thị. Trên máy Mac, lối tắt này là Command + Alt + U.
Những công cụ phát triển
Ngoài khả năng nguồn trang Xem đơn giản 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 mình để đào sâu hơn vào trang web. Những công cụ này sẽ cho phép bạn không chỉ thấy HTML, mà còn là 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 .
- Nhấp vào biểu tượng có ba dòng ở 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 và sau đó nhấp vào Công cụ dành cho nhà phát triển trong trình đơn xuất hiện.
- Thao tác này sẽ mở một cửa sổ hiển thị mã nguồn HTML ở bên trái của cửa sổ và CSS liên quan ở bên phải.
- Ngoài ra, nếu bạn nhấp chuột phải vào phần tử trong trang web và chọn Kiểm tra từ trình đơn xuất hiện, công cụ nhà phát triển của Chrome sẽ bật lên và phần tử chính xác bạn đã chọn sẽ được đánh dấu trong HTML với CSS tương ứng được hiển thị ở bên phải. Điều này cực kỳ hữu ích nếu bạn muốn tìm hiểu thêm về cách một phần cụ thể của một trang web được tạo ra.
Xem mã nguồn có hợp pháp không?
Trong những năm qua, tôi đã có nhiều nhà thiết kế web mới đặt câu hỏi liệu nó có chấp nhận được để xem mã nguồn của trang web và sử dụng nó cho giáo dục của họ và cuối cùng cho công việc họ làm. Trong khi sao chép mã của một trang web bán buôn và chuyển nó thành 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, sử dụng mã đó làm bàn đạp để học hỏi thực sự là có bao nhiêu tiến bộ trong ngành này.
Như tôi đã đề cập ở phần đầu của bài viết này, bạn sẽ khó có thể tìm được một chuyên gia làm việc web ngày nay, những người chưa học được điều gì đó bằng cách xem nguồn của một trang web! Có, xem mã nguồn của trang web là hợp pháp. Sử dụng mã đó như một nguồn lực để xây dựng một cái gì đó tương tự cũng tốt. Lấy mã như là và vượt qua nó như là công việc của bạn là nơi bạn bắt đầu gặp phải 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ại xem mã nguồn của trang web và sử dụng nó như một công cụ học tập.