Wikibooks

Informatyka dla gimnazjum/Najważniejsze znaczniki

< Informatyka dla gimnazjum

Wiemy już z czego składa się kod strony, więc teraz zajmijmy się zawartością.

tabela najważniejszych znaczników
nazwa opis atrybuty przykład
nazwa opis kod wynik
a tworzy link czyli po kliknięciu na tekst w środku przenosi nas do innej strony lub innego miejsca na tej samej stronie href zawiera adres strony do której zostaniemy przeniesieni po kliknięciu <a href="http://pl.wikipedia.org">Wikipedia</a> Wikipedia
title tytuł, który wyświetli się po najechaniu myszką
br przenosi tekst do nowej linijki. Zwykłe naciśnięcie klawisza enter nie daje żadnego efektu brak brak to jest jakiś tekst<br>napisany w dwóch linijkach to jest jakiś tekst
napisany w dwóch linijkach
h1, h2, h3, h4, h5, h6 nagłówek najważniejszy h1, mniej ważny h2, jeszcze mniej ważny h3 itd. brak brak
hr pozioma linia do oddzielenia fragmentów strony brak brak <hr>
img wstawia na stronę obrazek alt tekst który się wyświetli gdy z jakiś powodów obrazek się nie załaduje
src nazwa pliku lub cały adres internetowy obrazka
title tytuł obrazka. Wyświetli się po najechaniu na niego myszką
width szerokość obrazka podana w pikselach. Pozwala to rozciągnąć lub zmniejszyć obrazek
height wysokość obrazka podana w pikselach
li punkt listy. Musi być wewnątrz znacznika <ul></ul> lub <ol></ol> brak brak <ol><li>punkt pierwszy</li><li>i drugi</li></ol>
  1. punkt pierwszy
  2. i drugi
ol numerowana lista, wewnątrz której są elementy <li></li> brak brak
p akapit, paragraf. Nie powoduje wcięcia w tekście pierwszej linii. brak brak
pre tekst wyświetlany w takiej formie w jakiej został napisany, działa klawisz enter, tab oraz wiele spacji obok siebie brak brak
ul nienumerowana lista, wewnątrz której są elementy <li></li> brak brak <ul><li>punkt pierwszy</li><li>i drugi</li></ul>
  • punkt pierwszy
  • i drugi
td komórka tabeli colspan ile kolumn zajmuje ta komórka tabeli. Innymi słowy wartość 1 oznacza normalne rozmiary, a 2 że jest szeroka jak dwie komórki <table>
<tr><th>nagłówek</th><td>komórka</td><td>komórka</td></tr>
<tr><td colspan="2" rowspan="2">komórka colspan="2" i rowspan="2"</td><td>komórka</td></tr>
<tr><td>komórka</td></tr>
<tr><td>komórka</td><td>komórka</td><td>komórka</td></tr>
<tr><td>komórka</td><td>komórka</td><td>komórka</td></tr>
</table>
nagłówekkomórkakomórka
komórka colspan="2" i rowspan="2"komórka
komórka
komórkakomórkakomórka
komórkakomórkakomórka
rowspan ile wierszy zajmuje ta komórka tabeli. Innymi słowy wartość 1 oznacza normalne rozmiary, a 2 że jest wysoka jak dwie komórki
table tabela border szerokość w pikselach obramowania
frame Określa, które krawędzie ramki otaczającej tabelę będą widoczne:
  • above - tylko górna krawędź
  • below - tylko dolna krawędź
  • border - wszystkie cztery krawędzie
  • box - wszystkie cztery krawędzie
  • hsides - tylko górna i dolna krawędź
  • lhs - tylko lewa krawędź
  • rhs - tylko prawa krawędź
  • void - brak krawędzi (domyślnie)
  • vsides - tylko lewa i prawa krawędź
rules Określa, które linie pomiędzy komórkami wewnątrz tabeli będą widoczne:
  • all - wszystkie linie będą widoczne
  • cols - tylko pomiędzy kolumnami
  • rows - tylko pomiędzy wierszami
  • none - brak linii wewnątrz tabeli (domyślnie)
th komórka tabeli, która jest nagłówkiem colspan ile kolumn zajmuje ta komórka tabeli. Innymi słowy wartość 1 oznacza normalne rozmiary, a 2 że jest szeroka jak dwie komórki
rowspan ile wierszy zajmuje ta komórka tabeli. Innymi słowy wartość 1 oznacza normalne rozmiary, a 2 że jest wysoka jak dwie komórki

Oczywiście to tylko najwarzniejsze informacje, które powinny wystarczyć do tworzenia prostych stron.

zastosowanie w praktyce

edytuj

informacje zawarte w tabeli zastosujmy teraz w praktyce, tworząc prostą strone na temat polskich noblistów. zacznijmy od prostego szablonu 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="pl" dir="ltr">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Polscy nobliści</title>
</head>
 
<body>
</body>

</html>

Na razie strona jest pusta. Wstawmy więc jakiś tytuł. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="pl" dir="ltr">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Polscy nobliści</title>
</head>
<body>
    <h1>Polscy nobliści</h1>
</body>

</html>

 

Wyświetli nam się napis „Polscy nobliści”. Dodajmy więc jakieś informacje o nich 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="pl" dir="ltr">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Polscy nobliści</title>
</head>
<body>
    <h1>Polscy nobliści</h1>
        <h2>Lista noblistów</h2>
            <h3>Maria Skłodowska-Curie</h3> 
                <p>(ur. 7 listopada 1867 w Warszawie, zm. 4 lipca 1934 w Passy) – wywodząca się z Polski (z Królestwa Polskiego) francuska uczona, fizyczka i chemiczka, dwukrotna noblistka.</p>
            <h3>Władysław Reymont</h3>
                <p>(ur. 7 maja 1867 w Kobielach Wielkich, zm. 5 grudnia 1925 w Warszawie), właściwie Stanisław Władysław Rejment – polski pisarz, prozaik i nowelista, jeden z głównych przedstawicieli realizmu z elementami naturalizmu w prozie Młodej Polski. Niewielką część jego spuścizny stanowią wiersze. Laureat nagrody Nobla za czterotomową "epopeję chłopską" pt. Chłopi.</p>
            <h3>Henryk Sienkiewicz</h3>
                <p>herbu Oszyk, pseudonim Litwos (ur. 5 maja 1846 w Woli Okrzejskiej, zm. 15 listopada 1916 w Vevey) – polski nowelista, powieściopisarz i publicysta pochodzenia tatarskiego[1]. Laureat Nagrody Nobla w dziedzinie literatury w 1905 za całokształt twórczości, jeden z najpopularniejszych pisarzy polskich przełomu XIX i XX wieku.</p>
            <h3>Lech Wałęsa</h3>
                <p>(ur. 29 września 1943 w Popowie) – polski polityk i działacz związkowy, z zawodu elektryk. Współzałożyciel i pierwszy przewodniczący "Solidarności", opozycjonista w okresie PRL. Prezydent Rzeczypospolitej Polskiej w latach 1990–1995.</p>
            <h3>Czesław Miłosz</h3>
                <p>(ur. 30 czerwca 1911 w Szetejniach, zm. 14 sierpnia 2004 w Krakowie) – polski prawnik i dyplomata, poeta, prozaik, eseista, historyk literatury, tłumacz; w latach 1951–1989 na emigracji, do 1960 we Francji, następnie w Stanach Zjednoczonych; w Polsce do 1980 obłożony cenzurą; laureat Neustadt International Prize for Literature (1978) i Nagrody Nobla w dziedzinie literatury (1980); profesor Uniwersytetu Kalifornijskiego w Berkeley i Uniwersytetu Harvarda; w 1993 powrócił do kraju, członek Polskiej Akademii Umiejętności, Stowarzyszenia Pisarzy Polskich, kawaler Orderu Orła Białego; pochowany w Krypcie Zasłużonych na Skałce; brat Andrzeja Miłosza.</p>
            <h3>Wisława Szymborska</h3>
                <p>(ur. 2 lipca 1923 na Prowencie, który obecnie jest częścią Kórnika) – polska poetka, eseistka i krytyk literacki, tłumacz, felietonistka; członek Stowarzyszenia Pisarzy Polskich i Polskiej Akademii Umiejętności, laureatka literackiej Nagrody Nobla (1996).</p>

</body>

</html>

 

Jak widzimy na naszej stronie nagłówek h1 oznacza tytuł strony, h2 tytuł rozdziału a h3 - konkretną osobę. Wewnątrz znajduje się jeden akapit tekstu.

Teraz przydadzą się jakieś obrazki. Skopiujmy więc do folderu ze stroną przykładowe obrazy: [1] [2] [3] [4] [5]. Wstawiamy je znacznikiem 

<img src="nazwa lub cały adres do pliku z obrazkiem">

. Pamiętaj o kilku rzeczach:

  1. Obrazki najlepiej trzymać w tym samym folderze co strona (będziemy mieli mniej problemów).
  2. Jeśli przenosisz albo kopiujesz stronę to skopiuj też pliki z obrazkami.
  3. Uważaj na rozszerzenia nazw plików. Nawet jeśli są ukryte, trzeba je podać. Pamiętaj też, że rozszerzenia .jpeg, .jpg i .jpe znaczą to samo, ale jeśli plik będzie miał inne niż podamy w kodzie strony to obrazek się nie wczyta
  4. Można używać polskich liter, ale nie ma żadnej gwarancji, że będą działać.
Źródło: „https://pl.wikibooks.org/w/index.php?title=Informatyka_dla_gimnazjum/Najważniejsze_znaczniki&oldid=417585”