Lokalne linki html na stronie Jimdo

Różne typy linków.

Zarzucamy kotwicę.

ID czy name?

Testuj na swoim dysku.

Na co warto zwrócić uwagę?

Różne typy linków.

Jimdo posiada bardzo dobry moduł wysiwyg do wpinania linków:

- wewnętrznych - między całymi stronami lub artykułami bloga tej samej witryny.

- zewnętrznych – które odsyłają do innych witryn w Internecie i adresów e-mail

Brakuje modułu do bardzo przydatnych linków lokalnych, pozwalających na przemieszczanie się pomiędzy paragrafami tej samej strony, gdy jest ona bardzo, bardzo dłuuuga.

Ale można to zrobić, gdyż Jimdo daje możliwość „wejścia” w kod html strony.

Linki jako takie, tworzą relację między dwoma punktami

punktem wyjściowym A, który zawiera informację o tym co możemy znależć w
punkcie docelowym B, do którego przeniesie nas kliknięcie myszą na aktywną część linku w punkcie A.

Aby zmaterializować te dwa punkty na stronie html, korzystamy z usług tego samego tagu <a> - od anchor, kotwica - przypisując mu dwa różne atrybuty.:

- href – do wyznaczenia aktywnej części linku w wyjściowym
punkcie A

- id - do wyznaczenia punktu docelowego zakotwiczonego gdzieś tam, na danej stronie
w punkcie B.

Zarzucamy kotwicę.

Tak zarzucamy kotwicę:

< tag id=”nazwa-kotwicy”>........</tag>

A tak tworzymy do niej link html używając nazwy–kotwicy poprzedzonej symbolem #:

<a href=”#nazwa-kotwicy”>........</a>

Nazwa kotwicy w obu punktach musi być jota w jotę - taka sama!!!

Oto skrócony przykład kodu prostej strony html, składającej się

ze spisu treści i kilku paragrafów,
wszystko powiązane linkami lokalnymi

co pozwala wyeliminować mozolne przewijanie strony windą pionową tam i z powrotem.

Możecie skopiować poniższy tekst do pliku tekstowego a następnie wystarczy tylko zmienić końcówkę .txt na .html aby otrzymac mini-stronę html do testów na Waszym komputerze.

<html>
<head>
<title>4 pory roku</title>
</head>
     <body>

 <p>4 PORY ROKU </p>
 <p>Przykład linkow localnych na 4 porach roku...</p>
 <p>Przykład linkow lokalnych na 4 porach roku...</p>

<p> <a id="intro">SPIS TRESCI</a></p>

<ul>
    <p><a href="#spring">   Wiosna  </a>         </p>
    <p><a href="#lato">     Lato    </a>         </p>
    <p><a href="#jesien">   Jesien  </a>         </p>
    <p><a href="#hiver">    Zima    </a>         </p>
    <p><a href="#the_end">  Koniec artykulu</a>  </p>
    <p><a href="#line99">   Linia 99-ta    </a>  </p>
</ul>

    <h2 id="spring">WIOSNA</h2>
    <p>Wstawic tutaj tekst o wiosnie w trybie  wysiwyg...</p>

    <h3 id="lato">LATO</h3> 
    <p>Wstawic tutaj tekst o lecie w trybie  wysiwyg...</p>

    <h3 id="jesien">JESIEN</h3>   
    <p>Wstawic tutaj tekst o jesieni w trybie  wysiwyg...</p

    <h3 id="hiver">ZIMA</h3>

    <p>Wstawic tutaj tekst o zimie w trybie  wysiwyg...</p>
    <p><a id="line99">To jest </a>linia numer 99      ...</p>

    <h3 id="the_end">ZAKONCZENIE</h3>
    <p>Wstawic tutaj tekst zakonczenia w trybie  wysiwyg...</p>

 <p><a href="#intro">Spis treści</a></p>
 <p><a href="#top">Góra strony</a></p>

     </body>
</html>

Testuj na swoim dysku.

Poniżej, w trybie html wstawiłem w element Tekst, fikcyjny artykuł o czterech porach roku, aby zilustrować przykładem niniejszy artykuł o linkach i kotwicach lokalnych.

Tutaj znajdziecie plik 4 pory roku.txt który jest żródłem poniższego przykładu.

Ściągnijcie go na Wasz dysk, zmieńcie jego nazwę na "4 pory roku.html" Otrzymacie najprostszą ale w pełni funkcjonalą stronę html, której możecie użyć do testowania linków na Waszych stronach Jimdo, jeżeli uważacie, że jest to przydatne.

Cztery pory roku

Przykład linków lokalnych strony html na 4 porach roku...

SPIS TREŚCI

WIOSNA

Wstawic tutaj tekst o wiosnie w trybie wysiwyg...

Spis treści

LATO

Wstawic tutaj tekst o lecie w trybie wysiwyg...

Spis treści

JESIEŃ

Wstawic tutaj tekst o jesieni w trybie wysiwyg...

Spis treści

ZIMA

Wstawic tutaj tekst o zimie w trybie wysiwyg...

To jest linia numer 99 ...

Wstawic tutaj tekst o zimie w trybie wysiwyg...

Spis treści

ZAKOŃCZENIE

Wstawic tutaj tekst zakonczenia w trybie wysiwyg...

Spis treści

Góra strony

ID czy name?

W czasach świetności html4 używano atrybutu name, ale został on zdeprecjonowany i zastąpiony przez atrybut id od 2001 roku gdy nastał xhtml.

Z atrybutem name możemy jedynie zarzucić kotwicę przy pomocy tagu <a> i wygląda to tak.

<a name=”nazwa-kotwicy”>........</a>

Id natomiast, pozwala nam id-entyfikować i adresować wszystkie tagi w obrębie elementu od <body> … do … </body> , które tworzą strukturę strony html, - takie jak- tytuł, paragraf, obraz jak również pojedyncze słowo w środku zdania i przekształcać je w kotwice.

Jedyny warunek – nie można wstawić na danej stronie, dwóch tagów id mających identyczną nazwę.

Na co warto zwrócić uwagę?

Do strony testowej 4 pory roku, nie jest przywiązany żaden arkusz stylu CSS, ale jest ona wyświetlona jako dokument html. Świadczy to o tym, że każda przeglądarka ma swój domyślny arkusz stylu CSS, którego używa do pokazania strony html gdy brakuje w prologu strony, informacji o tym, według jakiej normy daną stronę należy "narysować" na ekranie.

Up

Write a comment

Comments: 3

#1
Elena (Monday, 22 October 2012 12:50)

This blog is good
#2
doyouspeakjimdo (Sunday, 28 October 2012 10:20)

Thank You, Elena.
#3
http://multiclean.com.pl/ (Friday, 05 July 2013 15:34)

Thanks ;)