Khi bạn sử dụng trình soạn thảo web nhưng vẫn chưa có giao diện và nội dung như mình mong muốn, vậy làm sao để cải thiện vấn để này một cách nhanh chóng và tiện lợi . Hôm nay huannghe.edu.vn sẽ hướng dẫn bạn cách chỉnh sửa code của web để có thể tạo được một trang web ưng ý nhất.Bạn đang xem: Tổng Hợp Cách Chỉnh Sửa Code Của Web Mới Nhất 2020, Cách Chỉnh Sửa Code Của Web
Vì sao lại nên dùng Inspect element?
Nếu tò mò về mã code của một website nào đó, chắc hẳn bạn sẽ thắc mắc về hướng dẫn sử dụng Inspect element.
Đang xem: Cách chỉnh sửa code của web
link tải phần mềm:
Link Download
Inspect Element ( nguồn Internet)
Các công cụ hỗ trợ
Designer: Bạn mong muốn xem trước một trang web được design sẽ hiển thị như thế nào trên thiết bị di động?, hay một thứ gì đó… Bạn đủ sức thao tác trong vòng vài giây với Inspect Element.
– Marketer: Nếu tò mò về keyword (từ khóa) mà đối thủ cạnh tranh của bạn dùng trên đầu bài của trang hoặc nếu mong muốn kiểm tra tốc độ load trang của Google? Inspect element đủ sức hiển thị toàn bộ những thứ này.
– Writer: Nếu đang đau đầu về việc làm mờ tên và địa chỉ emal trên hình chụp màn hình? Với Inspect element, bạn có thể refresh bất kỳ nội dung, text trên website mà chỉ mất vài giây.
– Hỗ trợ Agent: Nếu cần một giải pháp tốt hơn để các nhà developer fix website của họ. Inspect element cho phép bạn đủ nội lực thực hiện một ví dụ cải thiện để hiển thị nhanh chóng những gì bạn đang nói.
Inspect element là một công cụ bổ ích cho bạn, đó là một phần của công cụ Developer Tools trên trình duyệt của bạn. Công cụ này gồm có một số tính năng: giao diện điều khiển để chạy mã code, trang lượt xem Source để xem Raw Code phía sau một trang web, một trang Soure (trang nguồn) với danh mục tất cả các tập tin được đăng trên một web,…
Khởi đầu với Inspect Element
Một số phương pháp để truy cập Inspect Element trên Google Chrome.Chỉ cần xây dựng web mà bạn muốn chỉnh sửa, sau đó thực hiện theo hướng dẫn dưới đây:
Hướng dẫn truy cập Inspect Element
– Kích chuột phải vào bất kỳ vị trí nào trên trang web của bạn, và phía dưới menu xuất hiện một cửa sổ popup, tại đây bạn sẽ nhìn thấy Inspect, Nhiệm vụ của bạn là click chọn Inspect.
– Nhấn vào biểu tượng hình răng cưa (hoặc biểu tượng 3 dạng gạch ngang) ở góc trên cùng bên phải màn hình, click lựa chọn More tools => Developer tools.
Hoặc phương pháp không giống là trên thực đơn File => Developer => Developer Tools.
– Bấm tổ hợp phím Command + Option + I (đối với Mac) hoặc bấm phím F12 trên máy tính Windows để mở Inspect Element mà k cần click bất kỳ thêm bước nào.
Click lựa chọn biểu tượng 3 dấu chấm thẳng hàng trên bảng Inspect element (gần biểu tượng dấu X). Lúc này bạn sẽ nhìn thấy tùy chọn để di chuyển bảng sang phía bên phải cửa sổ trình duyệt hoặc để mở một bảng riêng biệt.
Xem thêm: Lỗi Không Xóa Được Dòng Trong Excel 2010, Excel Không Chèn, Xóa Được Cột Và Dòng
Trong ví dụ trên là mở bảng Inspect element ở phía bên phải cửa sổ trình duyệt. Bạn đủ sức mở rộng hoặc thu hẹp hoặc mở rộng bảng Developer Tools bằng cách di chuyển chuột bên trái border.
Inspect Element ( nguồn Internet)
Khi biểu tượng “” xuất hện, dẫn biểu tượng sang khung bên trái để mỏ rộng bảng hoặc dẫn sang phải để thu hẹp.
Trên cửa sổ Inspect Element, có một loạt các tool hữu dụng mà bạn đủ nội lực sử để tạo website. Trong phần tut này, Quản trị online tập trung vào 3 tab là Elements, Emulation và tab kiếm tìm.
Tab Search:
Tab kiếm tìm cho phép bạn kiếm tìm một website có content cụ thể cho một phần tử HTML. click vào biểu tượng 3 dấu chấm, sau đó bấm lựa chọn search all Files để hiển thị các file. Và cho đến nay bạn có thể search các file quan trọng trên web mà bạn muốn.
Tab Elements:
Inspect element là công cụ mà chúng ta sẽ nghiên cứu nhiều nhất trong chỉ dẫn này. nhấn vào tab Elements trên công cụ Developer tools để trở lại nếu bạn vừa mới khám phá các vị trí khác.
Trên tab Explore bạn có thể nhìn thấy toàn bộ HTML, JavaScrit và CSS được tích hợp trên website. Nó như nhìn thấy mã nguồn của một website, không những thế có một điểm khác ở đây là bạn đủ nội lực thực hiện bất kỳ cải thiện của mã này và nhìn thấy các cải thiện trong thời gian thực trên website mà bạn đang mở.
Bạn đủ nội lực refresh bất cứ điều gì trên các bản sao giống như font chữ, chụp ảnh màn hình hoặc lưu cải thiện của bạn (chỉ cần vào view => Developer => lượt xem Source và lưu các trang giống như là một file HTML, hoặc sao chép những refresh mã để trên trình sửa văn bản. Sau khi reload lại trang, toàn bộ cải thiện của bạn sẽ bị biến mất.
Tab Emulation:
Đang bao giờ bạn muốn nhìn thấy trươc một trang web trên ĐT di động của mình mà không cần phải lôi ĐT ra hay chưa? Tab Emulation cho phép bạn nhìn thấy một web giống như mẹo mà bạn xem một web trên một thiết bị bất kỳ nào đó, với các thiết lập trên các thiết bị đa dạng hoặc một tùy chọn để thiết lập độ phân giải màn ảnh và tỉ lệ màn hình (aspect ratio). Thậm chí bạn còn đủ nội lực thiết lập mô phỏng tốc độ internet để xem hướng dẫn load một web khẩn trương như thế này.
Ngoài ra Emulation bị ẩn, cho nên bạn phải click hoạt bằng hướng dẫn xây dựng Inspect Element, click phím Esc sau đó chọn tab Emulate rồi click hoạt nút Enable Emulation để click hoạt.
Cách chỉnh sửa code của web
Check mã của bạn để đảm bảo mã này hợp lệ và hoàn tất trước khi phù hợp gốc.Tải nhập vào web công cộng của bạn và đi đến trang bạn mong muốn chỉnh sửa.Bấm vào Trang > Chỉnh sửa rồi từ tab định hình Văn bản, bấm vào Chỉnh sửa gốc.Xác định vị trí bạn mong muốn chèn khối mã. Bạn đủ sức sẽ phải xóa đoạn mã mà bạn mong muốn thay thế hoặc loại bỏ. Trang mà bạn nhìn thấy sẽ có diện mạo như sau, với con trỏ đánh dấu điểm chèn mã mới: