Comparar Revisões

How do I inspect and edit my first web page?

Revisão 46160:

Revisão 46160 por JakeMakes em

Revisão 50781:

Revisão 50781 por JakeMakes em

Palavras-chave:

Sumário de resultados da pesquisa:

X-Ray Goggles lets you poke around the elements of a web page and remix them into new creations. Learn how to swap images, text, and more.
X-Ray Goggles lets you poke around the elements of a web page and remix them into new creations. Learn how to swap images, text, and more.

Conteúdo:

__TOC__ = Make sure you have X-Ray Goggles [[How to Install 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. If you need assistance with the commands, just type {key h} on your keyboard, or hit the {button Help} button on the right sidebar. = 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 remix. == Change some text == This is the easiest. Select a block of text, and change what it says on the left side of the code editor. You'll see a preview of what your change will look like on the right side of the code editor. == Swap an image == All images use the <code><<!-- -->img<!-- -->></code> tag in their HTML. The 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 {button copy image location} Paste the copied image URL into the left side of the code editor, and you should see it change in the right side preview. == Modify a hyperlink == You can make hyperlinks point to wherever you want. All hyperlinks start with <code><<!-- -->a href="<!-- --></code> 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 usually displayed with an underline and a blue font. = Commit and publish! = If you've made a mistake, you can hit the {button Nevermind} button on the top right. If you're happy with your changes, then hit {button Commit Changes} and see what your remixed page looks like. When you're ready to publish, hit {key p} on your keyboard, or the {button Publish} button along the right sidebar. If you're signed into Webmaker, your published Goggles remix will be added to your My Makes gallery and you'll be given a uniqure URL to share with friends. [[Template:ShareArticle|link=http://mzl.la/16dMqN4]]
__TOC__ = Make sure you have X-Ray Goggles [[How to Install 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. If you need assistance with the commands, just type {key h} on your keyboard, or hit the {button Help} button on the right sidebar. = 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 remix. == Change some text == This is the easiest. Select a block of text, and change what it says on the left side of the code editor. You'll see a preview of what your change will look like on the right side of the code editor. == Swap an image == All images use the <code><<!-- -->img<!-- -->></code> tag in their HTML. The 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 {button copy image location} Paste the copied image URL into the left side of the code editor, and you should see it change in the right side preview. == Modify a hyperlink == You can make hyperlinks point to wherever you want. All hyperlinks start with <code><<!-- -->a href="<!-- --></code> 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 usually displayed with an underline and a blue font. = Commit and publish! = If you've made a mistake, you can hit the {button Nevermind} button on the top right. If you're happy with your changes, then hit {button Commit Changes} and see what your remixed page looks like. When you're ready to publish, hit {key p} on your keyboard, or the {button Publish} button along the right sidebar. If you're signed into Webmaker, your published Goggles remix will be added to your My Makes gallery and you'll be given a uniqure URL to share with friends. = Level up your skills = Want to get a bit more advanced? Try editing the CSS of the page. Hold down the {key c} key to view the CSS and then hit {key spacebar} to edit. [[Template:ShareArticle|link=http://mzl.la/16dMqN4]]

Voltar ao Histórico