How do I inspect and edit my first web page?

아직 누구도 이 문서의 번역에 참여하지 않았습니다. SUMO 문서 변역에 참여하는 방법에 대해 이미 알고 계시다면, 번역을 시작해 보세요 . SUMO 문서를 번역하는 방법에 대해 알고 싶으시면, 여기서 시작하세요.

Make sure you have X-Ray Goggles installed

Any time you stumble upon a page you want to inspect, click the X-Ray Goggles button in your bookmarks toolbar and start hacking.

Inspect the elements

With X-Ray Goggles activated, you'll notice that as you hover your mouse, sections of the web page become highlighted with a brightly colored box.

These boxes represent the elements of the web page. Click on one and you'll enter the code editor, where you can remix the element with your own variation.

Start remixing

Depending on the type of element you've selected, you can do various forms of remixing.

Change some text

Select a block of text, and change what it says in the code editor. You'll see a preview of what your change will look like in the main pane above.

Swap an image

All images use the <img> tag in their HTML. There you'll see that each <img> tag points to a URL address which tells the tag where the actual image lives.

You can change the original image to anything you want. Just open up a new browser tab and find the image that you want to use, right click, and select copy image location.

Paste the copied image URL in the code editor, and you should see it change in the preview.

You can make hyperlinks point to wherever you want.

All hyperlinks start with <a href=" and then contain the URL that the hyperlink points to. Change that URL between the quotation marks, and you've changed the link destination.

You may also want to change what is called the "anchor text". This is the labeled text that gives the visitor a clue about the destination page, and is often displayed with an underline and a blue font.

Commit and publish!

If you've made a mistake, you can hit the Cancel button in the code editor.

If you're happy with your changes, then hit the green Update button and see what your remixed page looks like.

When you're ready to publish, hit p on your keyboard, or the Publish button along the right sidebar.

If you're signed in to teach.mozilla.org, your published Goggles remix will be added to the "Your Projects" page on teach.mozilla.org and you'll be given a unique URL to share with friends.

이 문서가 도움이 되셨습니까?

잠시만 기다려 주십시오...

문서 작성 및 변경에 도움 주신 분들

Illustration of hands

도움 주기

전문 지식을 성장시키고 다른 사람들과 공유세요. 질문에 답하고 지식 기반을 개선할 수 있습니다.

자세히 살펴보기