Mã nguồn phần tử trang. Cách xem mã nguồn trang và mã thành phần
Khả năng thay đổi mã nguồn của một trang là một kỹ năng hữu ích đối với người dùng Internet nâng cao. Bằng cách thay thế mã HTML, bạn có thể thay đổi trang web đang mở theo ý muốn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thay đổi mã trang trong Google Chrome. Tuy nhiên, trong các trình duyệt khác, mọi thứ đều được thực hiện tương tự, do đó sẽ không có bất kỳ khó khăn nào.
Mã HTML của trang là gì?Mỗi trang bạn mở trong trình duyệt đều có mã riêng bằng ngôn ngữ đánh dấu HTML. Mã này đại diện cho các thẻ và văn bản. Thẻ là các nhãn duy nhất cho trình duyệt biết cách hiển thị phần này hoặc phần kia của trang web. Văn bản là nội dung của trang, những gì người dùng nhìn thấy. Ngoài ra, các kiểu CSS có thể được kết nối với trang, giúp xác định diện mạo của các thành phần trang. Để thay đổi mã nguồn của một trang web, bạn không cần phải biết kỹ về HTML và CSS và bạn sẽ sớm nhận ra điều này.
Tại sao phải thay đổi một trang web?Bạn có thể thay đổi dữ liệu trên trang web, thay đổi nội dung tin nhắn hoặc chụp ảnh màn hình giả. Xin lưu ý rằng tất cả các thay đổi chỉ hiển thị với bạn và sẽ biến mất khi bạn tải lại trang. Ngoài ra, dữ liệu đã thay đổi sẽ không có thật. Ví dụ: nếu tôi không có 10 đô la và tôi đổi thành 100 thì tôi sẽ không có thêm tiền. Đây chỉ là sự hiển thị trang của trình duyệt. Ví dụ:
Sau đó:
Ví dụ: tôi sẽ lấy cùng một trang web và thay đổi thông báo trước đó của bài viết “Mở trang chính trong Google Chrome. Tôi nhấp chuột phải vào thành phần mà tôi muốn thay đổi, chẳng hạn như tiêu đề của thông báo và chọn “Xem mã”.
Trong cửa sổ mở ra, hãy chuyển đến tab Thành phần và xem mã HTML của trang. Trong đó chúng ta cần tìm văn bản mà chúng ta quan tâm. (được gạch chân màu đỏ)
Bây giờ tôi sẽ xóa văn bản cũ và viết một văn bản mới.
Chỉ vậy thôi, tiêu đề của thông báo đã được thay đổi. Bây giờ tôi sẽ thay đổi chính thông báo, thẻ và danh mục.
Bạn có thể chèn một hình ảnh khác bằng cách thay đổi thuộc tính src trong thẻ img.
Nhìn qua vô số trang web trên Internet, bạn có thể bắt gặp những trang mà chúng tôi thực sự thích. Một số câu hỏi ngay lập tức được đặt ra. Trang web được tạo bằng mã tự tạo hay một loại CMS nào đó? Nó có những kiểu CSS nào? Thẻ meta của nó là gì? Và như thế.
Có nhiều công cụ có thể được sử dụng để trích xuất thông tin về mã của một trang web. Nhưng chúng ta luôn có sẵn nút chuột phải. Đây là những gì chúng tôi sẽ sử dụng, sử dụng trang web của tôi làm ví dụ.
Làm thế nào để xem mã trang?Để xem mã nguồn của một trang web, bạn cần di chuột qua bất kỳ khu vực nào của trang web (ngoại trừ hình ảnh và liên kết). Sau đó, nhấp vào nút chuột phải. Một cửa sổ với một số tùy chọn sẽ mở ra trước mặt chúng ta (chúng có thể hơi khác nhau trong các trình duyệt khác nhau). Ví dụ: trong trình duyệt Google Chrome, đây là các lệnh:
- mặt sau;
- phía trước;
- khởi động lại;
- lưu thành;
- niêm phong;
- dịch sang tiếng Nga;
- xem mã trang;
- xem mã.
Chúng ta cần nhấp vào xem mã trang và mã html của trang web sẽ mở ra trước mặt chúng ta.
Xem mã trang: cần chú ý điều gì?Vì vậy, mã trang Html là một danh sách các dòng được đánh số, mỗi dòng mang thông tin về cách trang web này được tạo ra. Để nhanh chóng tìm hiểu cách hiểu số lượng lớn các dấu hiệu và ký hiệu đặc biệt này, bạn cần phân biệt giữa các phần khác nhau của mã.
Ví dụ: dòng mã bên trong thẻ head chứa thông tin dành cho công cụ tìm kiếm và quản trị viên web. Chúng không được hiển thị trên trang web. Tại đây bạn có thể xem trang này được quảng cáo với những từ khóa nào, tiêu đề và mô tả của nó được viết như thế nào. Cũng tại đây, bạn có thể tìm thấy một liên kết, sau đó chúng ta sẽ tìm hiểu về dòng phông chữ Google được sử dụng trên trang web.
Nếu trang web được tạo trên CMS WordPress hoặc Joomla, thì thông tin này cũng sẽ hiển thị ở đây. Ví dụ: khu vực này hiển thị thông tin về chủ đề WordPress hoặc mẫu trang web Joomla. Bạn có thể nhìn thấy nó bằng cách đọc nội dung của các liên kết được đánh dấu màu xanh lam. Một liên kết hiển thị một mẫu trang web.
Ví dụ:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Chúng ta sẽ thấy các kiểu phông chữ CSS của trang. Trong trường hợp này, phông chữ được sử dụng. Điều này có thể được nhìn thấy ở đây - font-family: 'Source Sans Pro'.
Trang web này được tối ưu hóa bằng plugin Yoast SEO. Điều này có thể được nhìn thấy từ phần mã nhận xét này:
Trang web này được tối ưu hóa với plugin Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Tất cả thông tin chứa trong thẻ body được trình duyệt hiển thị trên màn hình điều khiển. Ở đây chúng ta thấy mã html của trang và ở dưới cùng có mã tập lệnh Yandex Metrics. Nó được bao quanh bởi một thẻ nhận xét với nội dung:
/Bộ đếm Yandex.Metrika
Sau khi tiến hành phân tích khá hời hợt về mã của trang chính của trang web, chúng ta có thể rút ra kết luận về việc trang này được tạo ra bằng những công cụ nào. Chúng tôi đã thấy trên đó:
- CMS WordPress;
- Phông chữ Google Nguồn Sans Pro;
- Chủ đề WordPress – Sydney;
- Plugin Yoast;
- Bộ đếm số liệu Yandex.
Hiện nay nguyên tắc phân tích mã html của một trang website đã khá rõ ràng. Không cần thiết phải giữ trang bạn đang nghiên cứu mở trong trình duyệt. Bạn có thể lưu mã trang vào máy tính bằng tổ hợp phím ctrl+a, ctrl+c, ctrl+v. Dán nó vào bất kỳ trình soạn thảo văn bản nào (tốt nhất là Notepad++) và lưu nó với phần mở rộng html. Vì vậy, bất cứ lúc nào bạn cũng có thể nghiên cứu sâu hơn và tìm thấy nhiều thông tin hữu ích hơn cho bản thân.
Chúng tôi đã phát hành một cuốn sách mới, Tiếp thị nội dung trên mạng xã hội: Cách thu hút người theo dõi và khiến họ yêu thích thương hiệu của bạn.
Đặt mua
Mã nguồn của một trang web là tập hợp các đánh dấu HTML, kiểu CSS và tập lệnh JavaScript mà trình duyệt nhận được từ máy chủ web.
Các video khác trên kênh của chúng tôi - tìm hiểu tiếp thị qua internet với SEMANTICA
Nó có thể được so sánh với một tập hợp các mệnh lệnh do người chỉ huy đưa ra cho binh lính. Hãy tưởng tượng rằng khán giả không nhìn thấy hoặc nghe thấy ông chủ. Theo quan điểm của họ, quân đội thực hiện các hành động một cách độc lập. Trong trường hợp của chúng tôi, người chỉ huy là trình duyệt, các lệnh là mã nguồn và những người lính hành quân là kết quả cuối cùng.
Trang web được lưu trữ trên một máy chủ web, máy chủ này sẽ gửi trang theo yêu cầu của người dùng. Yêu cầu là nhập URL vào thanh địa chỉ, nhấp vào liên kết hoặc nhấp vào nút gửi trên biểu mẫu. Việc các trang web được viết bằng ngôn ngữ nào không quan trọng hoặc liệu chúng có bao gồm một thành phần phần mềm hay không. Kết quả cuối cùng của bất kỳ thuật toán phía máy chủ nào là một tập hợp các thẻ html và văn bản.
Mã nguồn trang là một tập hợp dữ liệu bao gồm:
- đánh dấu html;
- biểu định kiểu hoặc liên kết tệp;
- các chương trình được viết bằng JavaScript hoặc liên kết đến các tệp có mã.
Ba phần này được trình duyệt xử lý. Đối với máy chủ, đây chỉ đơn giản là văn bản cần được gửi để đáp ứng yêu cầu.
Tại sao chúng ta có thể cần nghiên cứu mã nguồnMọi thứ chúng tôi thấy, chúng tôi đều có thể phân tích và áp dụng để giải quyết một số vấn đề phát sinh khi làm việc với trang web, đặc biệt là khi tối ưu hóa nó. Bằng cách nhìn vào mã nguồn, chúng ta có thể:
- Xem các thẻ meta của trang web của bạn hoặc của người khác để phân tích chúng.
- Xem sự hiện diện hay vắng mặt của một số thành phần nhất định trên trang web: bộ đếm, mã nhận dạng trong các hệ thống khác nhau, các tập lệnh nhất định và những thứ khác.
- Tìm hiểu các thông số của các thành phần: kích thước, màu sắc, phông chữ.
- Tìm đường dẫn đến ảnh và các thành phần khác trên trang.
- Khám phá các liên kết từ trang.
- Tìm vấn đề về mã cản trở quá trình tối ưu hóa trang web: kiểu không được đặt trong các tệp riêng biệt, tập lệnh, mã không hợp lệ.
Đây là những tính năng cơ bản nhưng trên thực tế, bằng cách đọc mã, bạn có thể tìm hiểu thêm nhiều điều về trang.
Cách xem mã nguồn của một trang webSẽ không thể thực hiện việc này hoàn toàn dưới dạng nó được đăng trên máy chủ từ trình duyệt. Nhưng bạn có thể xem tất cả các đánh dấu bằng cách nhấp chuột phải vào trang. Ở đây và bên dưới sử dụng Google Chrome làm ví dụ.
Chọn tùy chọn “Xem mã trang” và nhận danh sách đầy đủ trong một tab riêng.
Đó chỉ là văn bản mà bạn phải phân tích để hiểu. Nhưng bạn có thể lấy mã tương tác bằng cách sử dụng các công cụ dành cho nhà phát triển.
Cách tìm mã nguồn của một trang webBấm vào biểu tượng menu trên trình duyệt. Thông thường nó ở bên phải và trông giống như ba dấu chấm hoặc sọc.
Trong phần công cụ bổ sung, chọn “Công cụ dành cho nhà phát triển”.
Một cửa sổ sẽ mở ra hiển thị trạng thái hoạt động của mã. Điều này có nghĩa là khi bạn nhấp vào đánh dấu, kiểu phần tử sẽ xuất hiện bên cạnh nó và các khối đã chọn sẽ được đánh dấu trên trang.
Trong tab “Nguồn”, bạn có thể xem nội dung của một số tệp: tập lệnh, phông chữ, hình ảnh.
Trong tab “Bảo mật”, bạn có thể kiểm tra chứng chỉ của trang web.
Tab “Kiểm tra” sẽ giúp bạn kiểm tra tài nguyên được đăng trên máy chủ.
Nếu vị trí của bảng bên phải không thuận tiện, bạn có thể nhấp vào ba dấu chấm và thay đổi nó bằng cách chọn mục mong muốn.
Mọi tài liệu HTML đều bao gồm các thẻ cấu trúc. Dưới đây là một số trong số họ:
Các phần tử được thiết kế để phân định một cách hợp lý các phần trên một trang; nếu cần, chúng được thiết kế bằng các kiểu. Chúng chứa văn bản có thể nhìn thấy được bằng cách nào đó trên trang. Nhưng thẻ Head chứa thông tin dịch vụ. Thẻ meta được sử dụng để chỉ ra nó. Mọi thứ được viết trong đó đều dành cho máy chủ và công cụ tìm kiếm.
Nội dung của chúng không thể được tìm ra theo bất kỳ cách nào khác.
Hãy chú ý đến thẻ Liên kết. Với sự trợ giúp của nó, các liên kết đến các tệp đi kèm bên ngoài sẽ được chỉ định. Nếu muốn, bạn có thể xem nội dung và lưu vào đĩa. Để thực hiện việc này, hãy di chuyển con trỏ đến địa chỉ và nhấn RMB. Chọn "Mở trong tab mới".
Tệp được chỉ định sẽ mở trong tab mới mà bạn có thể xem hoặc lưu.
Cách xem mã nguồn của trang để gỡ lỗi tập lệnhTrong trường hợp này, thuận tiện nhất là mở trang trên máy cục bộ. Nếu bạn chỉ cần sửa đánh dấu, kiểu và tập lệnh thì việc này có thể được thực hiện trực tiếp từ thư mục. Mã HTML được xem theo cách tương tự. Nhưng có thể thấy lỗi mã JavaScript trong tab “Bảng điều khiển”. Phần này hiển thị mô tả lỗi và số dòng nơi lỗi xảy ra.
Cú pháp có thể được nhìn thấy trực tiếp trong mã. Đây chính là mục đích của tab “Nguồn”.
Đối với các trang lớn có nhiều phần tử, rất khó để tìm thấy mã cần thiết trong tất cả các đánh dấu. Trong trường hợp này, bạn nên sử dụng lệnh menu ngữ cảnh đặc biệt. Di chuyển chuột qua đoạn và nhấn RMB. Chọn lệnh “Xem mã”.
Cửa sổ tương tự sẽ mở ra nhưng tập trung vào đối tượng đã chọn.
Chúng tôi đã cho bạn biết mã nguồn trang là gì. Chỉ cần nắm vững kiến thức cơ bản về HTML và CSS là đủ và sử dụng các công cụ tiện lợi dành cho nhà phát triển, bạn sẽ có thể gỡ lỗi các tài liệu HTML của riêng mình.
Việc xem lại mã tài nguyên trên Internet sẽ cho phép bạn học hỏi không chỉ từ kinh nghiệm của bản thân mà còn sử dụng các ví dụ hoạt động thực tế. Và đối với các chuyên gia SEO, thẻ meta sẽ hữu ích, thông tin trong đó có thể nói lên nhiều điều về trang web.
Bạn chắc chắn đã thấy trên một số trang web có lệnh cấm sử dụng nút chuột phải. Tính năng này chủ yếu chống lại những kẻ muốn đánh cắp nội dung của bạn. Biện pháp này sẽ không bảo vệ bạn hoàn toàn khỏi hành vi trộm cắp nhưng nó sẽ bảo vệ bạn hoàn toàn khỏi việc sao chép thủ công. Sự lựa chọn khác .
Tôi không khuyên bạn nên tắt nút chuột phải nếu bạn đăng tài liệu nhằm mục đích sao chép trên blog của mình. Đây có thể là mã, tập lệnh, công thức nấu ăn, tài liệu tham khảo, v.v. Lệnh cấm sao chép trong trường hợp này sẽ khiến khách truy cập rời bỏ bạn và blog của bạn sẽ trở nên ít hữu ích hơn đối với khách truy cập. Nếu việc bảo vệ chống đạo văn là quan trọng đối với bạn thì tốt hơn là thêm url của bạn vào cuối bản sao. Sau đó, bạn sẽ chắc chắn rằng nếu ai đó muốn xuất bản nội dung nào đó được sao chép của bạn ở nơi khác trên Internet, mục sư sao chép sẽ có nhiều khả năng chia sẻ liên kết tới blog của bạn hơn.
Công thức này phù hợp cho bất kỳ trang web nào. Tất cả những gì bạn cần làm là dán mã vào tất cả các trang trên blog của bạn:
Trong Blogger, thêm mã vào tiện ích HTML/Javascript trong tab Thiết kế. Nếu bạn đang sử dụng một trong những chủ đề mới nhất trên blog của mình (Emporio, Contempo, Soho, Notable), thì đừng quên kích hoạt khả năng hiển thị của tiện ích (hộp kiểm bên cạnh “Hiển thị cho mọi người”, “Hiển thị tiện ích " HTML/ JavaScript "").
Trên Wordpress, thêm mã vào tiện ích “Văn bản”.
Ngày lễ đang đến gần - Ngày Quốc tế Phụ nữ. Hãy chuẩn bị cho nó trước. Bạn có thể chúc mừng các cô gái và phụ nữ theo cách nguyên bản bằng cách sử dụng các dịch vụ bưu thiếp được thảo luận bên dưới.
Tạo bưu thiếp cho ngày 8 tháng 3 trực tuyến Sử dụng các dịch vụ sau để tạo bưu thiếp một cách thực tế ngay từ đầu.
Tôi hy vọng rằng bằng cách sử dụng một trong những máy phát điện này, bạn sẽ có thể chúc mừng xứng đáng những người phụ nữ của mình vào ngày 8 tháng 3!
Nội dung của bài viết:
Google Plus đang bị đóng cửa Nền tảng Google Plus đã không đáp ứng được kỳ vọng của các nhà phát triển và sẽ bị xóa hoàn toàn vào ngày 2 tháng 4 năm 2019. Cùng với đó, các album được liên kết với nó trong Google Photos sẽ biến mất và việc ủy quyền trên các trang web có tài khoản Google Plus sẽ không còn khả dụng. Kể từ ngày 4 tháng 2, chức năng tạo hồ sơ, kênh và trang Google Plus sẽ không còn khả dụng. Nếu nội dung có giá trị được lưu trữ trên tài khoản của bạn thì bạn có thể tải xuống bản sao lưu.Những thay đổi này sẽ ảnh hưởng nhiều nhất đến các blogger điều hành blog của họ trên Blogspot. Một số tiện ích G+, nhận xét G+ và hồ sơ trên Google + của bạn sẽ không còn khả dụng. Điều này được nêu trong thông báo trong khu vực quản trị Blogger:
Sau thông báo rằng API Google+ sẽ ngừng hoạt động vào tháng 3 năm 2019, một số thay đổi sẽ được thực hiện đối với việc tích hợp Blogger với Google+ vào ngày 4 tháng 2.
Tiện ích Google+. Thiết kế blog sẽ không còn hỗ trợ các tiện ích Nút +1, Người theo dõi trên Google+ và Huy hiệu Google+ nữa. Tất cả các phiên bản của các tiện ích này sẽ bị xóa khỏi blog của bạn.
nút +1. Các nút +1 và G+ cũng như các liên kết "Xuất bản lên Google+" bên dưới các bài đăng trên blog và trong thanh điều hướng sẽ bị xóa.
Xin lưu ý rằng nếu bạn đang sử dụng mẫu tùy chỉnh có các tính năng của Google+ thì có thể cần phải sửa đổi mẫu đó. Vui lòng liên hệ với người đã cung cấp cho bạn mẫu này để nhận được đề xuất.
Nhận xét trên Google+. Hỗ trợ nhận xét bằng Google+ sẽ ngừng hoạt động và tất cả các blog sử dụng tính năng này sẽ được khôi phục về nhận xét tiêu chuẩn của Blogger. Rất tiếc, nhận xét được đăng qua Google+ không thể chuyển sang Blogger nên chúng sẽ không xuất hiện trên blog của bạn nữa. Xóa nhận xét trên Google Plus Thật không may, các nhận xét đã được xuất bản trong hệ thống sẽ bị xóa vĩnh viễn. Bạn chỉ có thể sử dụng cùng một công cụ https://takeout.google.comđể nói các nhận xét dự phòng từ Google+ vào máy tính của bạn. Chỉ có điều là không có bộ nạp khởi động cho nó và bạn chỉ có thể khôi phục nhận xét theo cách thủ công theo một cách khá quanh co. Thật tốt là tôi đã đến đúng giờ. Cách thay thế hồ sơ Google Plus bằng hồ sơ Blogger Nếu bạn viết blog trên Blogspot thì bây giờ bạn nên quay lại từ hồ sơ Google Plus về hồ sơ Blogger (dành cho những người đã chuyển sang Google Plus tại một lần). Tôi khuyên bạn nên thực hiện việc này ngay bây giờ để tránh những tình huống không mong muốn có thể xảy ra khi xóa tài khoản Google Plus. Cách lấy lại hồ sơ Blogger của bạn. Điều này rất dễ thực hiện trong cài đặt quản trị viên Blogger:
Cài đặt -> Cài đặt người dùng -> Hồ sơ người dùng - ở đây chọn Blogger
Lưu các thay đổi của bạn.
Xác nhận chuyển sang và nhập tên hoặc biệt hiệu của bạn.
Đừng quên tải hình đại diện lên hồ sơ Blogger của bạn.
Cách xóa hồ sơ Google Plus Nếu bạn quyết định xóa hồ sơ G+ của mình một lần và mãi mãi, hãy truy cập trang Google Plus của bạn -> Cài đặt -> cuộn xuống cuối trang -> xóa tài khoản Google Plus:
Hôm nay tôi sẽ cho bạn biết CSS3 là gì, nó được sử dụng với mục đích gì, tìm nó ở đâu và cách viết nó một cách chính xác. Tôi cảnh báo bạn, tôi sẽ tự mình nói, đơn giản hóa cho công chúng, như tôi thấy + ví dụ. Vì vậy, hãy bắt đầu từ xa.
CSS là các kiểu trong đó các thuộc tính của một đối tượng được viết. Điều này có nghĩa là chúng có trong tất cả các công cụ hiện có, nếu bạn không thể tìm thấy chúng, thì có thể bạn đang tìm nhầm chỗ hoặc chúng thực sự không tồn tại ( trang web quanh co). Chúng thường được tìm thấy ở đâu? Thông thường đây là thư mục gốc của trang web, tên của tệp style.css, mặc dù về nguyên tắc, tên này không quan trọng bằng phần mở rộng .css nếu tệp có phần mở rộng như vậy là tệp kiểu.
Xem thêm trên blog của tôi.
