odsyłacze html - Kurs HTML i CSS
HTML dla zielonych / Odsyłacz do podstrony HTML <a href>(w obrębie tego samego serwisu) Praktycznie na każdej stronie WWW spotyka się odsyłacze (inaczej: odnośniki lub hiperłącza). Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść, która dość znacznie różni się...
- Nagłówek i treść HTML / Roboty <meta "robots, googlebot">
...domyślnie "noindex" - strona, na której wstawiono polecenie, nie będzie indeksowana "follow" - przechodzenie do stron, do których odnoszą się odsyłacze, znajdujące się w dokumencie - domyślnie "nofollow" - robot nie przechodzi do stron stron wskazywanych przez odsyłacze wstawione na stronie, ale może je zaindeksować, jeżeli istnieją inne linki umieszczone na stronach bez tego zakazu "index, nofollow" - indeksuje stronę, nie przechodzi do stron wskazywanych przez odsyłacze "noindex...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
Wszystkie odsyłacze przedstawione do tej pory, miały postać tekstową. Jeśli chcesz umieścić w swoim serwisie np. menu z obrazkowymi przyciskami, należy w tym celu użyć następującego polecenia: <a href="adres"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a> gdzie jako "adres" można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez "http://" lub...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanegoJeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...
HTML dla zielonych / Ćwiczenia...(czyli w pliku index.html). O tym co to są i jak się tworzy podstrony przeczytasz w podrozdziale: Ramy dokumentu. Na podstronie linki.html wstaw odsyłacze do ciekawych stron w internecie, na których czytelnik będzie mógł znaleźć więcej informacji na opisywany przez Ciebie temat. Jeżeli tworzysz stronę o sobie, możesz tutaj umieścić odnośniki do Twojego profilu w serwisach społecznościowych: Facebook, Twitter, YouTube, LinkedIn itp. Stwórz podstronę o nazwie kontakt.html (nowy plik HTML w...
- Widżety HTML / Wczytywanie strony do ramki lokalnej <a target>
...do dwóch ramek Wczytywanie strony do ramki lokalnej <a target> <a target="cel" href="lokalizacja">opis</a> Jak widać powyższe polecenie jest odsyłaczem. Posiada on jednak dodatkowy atrybut target="..." pozwalający wczytać stronę do wybranej przez nas ramki - w szczególności innej niż ta, w której znajduje się odnośnik. Dzięki temu treść w takiej ramce (okienku) może się zmieniać, nawet już po załadowaniu strony. Zamiast tekstu "lokalizacja" należy wpisać adres strony albo lokalizację...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
...Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8): /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Indeks(id, ramka) { this.id = id; if (typeof ramka == 'undefined') this.ramka = self; else if (typeof ramka == 'string') { if (ramka == '_blank') this.ramka = ''; else if (ramka == '_self') this.ramka = self; else if (ramka...
- Aktualizacja / System newsów
...wszystkie informacje wraz z opisami wprowadzonych zmian. Wystarczy spojrzeć i już można szybko przenieść się do nowych stron, klikając odpowiednie odsyłacze. Wymagana wiedza: Odsyłacze Wstawianie obrazków Podstawy stylów CSS (m.in. arkusze stylów) Aby wprowadzić system newsów, należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...nagłówków menu (<dt>...</dt>). Tutaj również nie ma ograniczeń, co do zawartości, którą można umieścić wewnątrz. Mogą to być po prostu odsyłacze ale też inne elementy. Poniżej wystarczy już tylko umieścić wywołanie skryptu: <script> new Menu('menu0'); </script> ...i to wszystko 🙂. Zwróć tylko jeszcze uwagę na wyróżniony identyfikator menu0 w dwóch ostatnich fragmentach kodu: musi być on w obu miejscach identyczny! Dodatkowo w jednym dokumencie nie mogą istnieć dwa bloki...
- HTML dla zielonych / Jak zrobić dobrą stronę HTML
...style="text-align: center">Tutaj można umieścić logo serwisu</header> <nav style="width: 300px; float: left; overflow: hidden"> Tu umieszcza się odsyłacze spisu treści </nav> <article style="margin-left: 320px"> Tu wpisuje się treść strony </article> <footer style="text-align: center; clear: both">Tutaj można umieścić stopkę serwisu</footer> a otrzymamy: Tutaj można umieścić logo serwisu Tu umieszcza się odsyłacze spisu treści Tu wpisuje się treść strony Tutaj można umieścić stopkę...