Here's an exercise to learn just a little about html, and how to use it on Yola to do something we can't do using only the Yola widgets.
First, go to the wikipedia page on html (Google "html wikipedia"). What does the address look like? (The http://en.etc in the address bar).
Now, scroll down just a little to the contents section, and click on the link to go
to “Element examples”. Now look at the address bar again… it
should be
http://en.wikipedia.org/wiki/Html#Element_examples
Click the ‘back’ arrow, and you’ll be back at the top. Check the address again (same as before right?). Go forward again. The PAGE (wikipedia's page about html) has a web address, which tells your browser, Chrome for example, where to look for information and what to display. But within that page, there are points which have their own more specific address, so we can tell the browser to go straight to that point.
Here, you can learn how to make a point like that on your webpage, so you can make a link go straight to it. All you need to do is 'mark' that point by giving it a (unique) name, then you can tell your link to go to that point!
Here’s how:
First, we need to mark the target point by giving it a name. (That’s the bit that appears after the '#', like it did on wikipedia).
To test all this out without changing your work so far, make a new page ( a 'blank' page, not a blog page). Add a text box by dragging the 'text' widget from the right (in 'basic'). Add some text down the screen, eg
A
B
C
...
Z
It should look like the bottom of this webpage. You can always delete your new page at the end of the year when we publish the websites, it's just for html practice for now.
Now click in the text box (with the A B C etc in it) so the toolbar appears at the top, and click the last button (html). You should see a big long list with things like <p>A</p>. <*> marks the ‘start’ of something and </*> marks the end of it. In this case, 'p' means 'paragraph', so your html code is saying "Start a new paragraph, show the letter 'A', then finish that paragraph. Start a new paragraph with a 'B', finish that paragraph" and so on. What we need to do is add a ‘name’ to one of these paragraphs, say the one with a T. So we’ll add the ‘name’ code inside the ‘paragraph’ markers.
<p> <a name="link destination"> T </a> </p>
*** This is not all new stuff to add... you need to find the <p> T </p> which is there already, then just insert the naming bit. We’ve now given the point on the webpage with a ‘T’ a name: “link destination”.
Next, we create the actual link…
add another text box at the top of the page, and add some text, “Link to T.” for example.
Highlight (select) this text and click the ‘link’ button (in the middle of the toolbar). Choose the page
that we’re working on now. This has just written the html for us! It has made a link to this page... but just to the top of this page.
Now click the html button to see
what the widget looks like in html… it should be something like
<a href=”html-stuff”>Link to T.</a>
now we just add '#link destination' (EXACTLY the same as what you wrote after name=)
inside the quotation marks, and it's done!! In the case of this example, it should be like this:
<a href="html-stuff.php#link destination">Link to T.</a> <br>
Time to test it: Save your page, and try "Preview" to see if it works