Overview
This training provides a quick guide to extracting HTML code from webpages using browser developer tools, enabling users to inspect and copy elements for editing or troubleshooting purposes. It is ideal for technical support, web development, or training materials, providing detailed steps for effective HTML management.
Open the Webpage
1. Launch your browser (Google Chrome, Microsoft Edge, or Mozilla Firefox).
2. Navigate to the webpage containing the HTML you want to inspect.
Open Developer Tools
Method A — Keyboard Shortcut:
• Windows: Press Ctrl + Shift + I
• macOS: Press Cmd + Option + I
Method B — Right-click:
1. Right-click on the specific element you want to examine.
2. Select Inspect or Inspect Element from the context menu.
Locate the HTML in the Elements Tab
1. The Developer Tools will open, typically docked to one side of your browser.
2. The Elements or Inspector tab displays the HTML structure of the page.
3. Hover over elements in the HTML to see their visual highlight on the page.
Copy Entire Element HTML Code
- Right-click the HTML tag in the Elements panel.
2. Select Copy > Copy outerHTML to include the tag and its contents.
o Includes opening and closing tags.
Paste HTML into Your Editor
- Open your code editor in Zip. (Edit Emails > Edit > Source Code Icon)
- Paste the copied HTML using Ctrl + V (Windows).
- Save or format the HTML as needed.
Summary
This provides users with a quick, effective method for extracting HTML from web pages using built-in browser developer tools. Whether for troubleshooting, editing email templates, or instructional design, the steps outlined make HTML copying clear and accessible, ready to be applied in Zip or similar platforms with ease.