Podstawowa struktura dokumentu HTML

1. Podstawowa struktura dokumentu HTML Paulina JankowskaKarolina Ziółkowska

2. Czym jest HTML? • HTML został wynaleziony w 1990 przez naukowca Tima Berners-Lee. Celem było ułatwienie naukowcom na różnych uniwersytetach dostępu do dokumentów badawczych. Projekt okazał się wielkim sukcesem, większym niż wyobrażał sobie to Tim Berners-Lee. Poprzez wynalezienie języka HTML, położył on fundamenty internetu takiego jaki znamy dziś. • Język HTML składa się ze specjalnego ciągu znaków, nazywanego znacznikami (tzw. tagi). Dzięki nim możemy kierować wyglądem strony WWW: m.in.. ustalać grubość czcionki,kolor tekstu oraz tła, wstawiać takie elementy strony, jak np. tabele. • HTML jest językiem, który umożliwia prezentację informacji (np. badań naukowych) w internecie. To co widzisz kiedy przeglądasz strony to interpretacja kodu HTML przez przeglądarkę. Aby zobaczyć kod HTML strony w internecie, po prostu kliknij "Widok" w górnym menu przeglądarki i wybierz "Źródło".

3. Szkielet strony HTML

4. Co oznacza H-T-M-L? • HTML jest skrótem od "Hyper Text Mark-up Language" • Hyper jest odwrotnością słowa liniowy. W dawnych dobrych czasach - kiedy mysz była czymś co gonił kot - programy komputerowe działały liniowo: kiedy program uruchomił jedną akcję szedł do następnej linii, zaraz po tym do kolejnej i tak dalej. Ale HTML jest inny - możesz iść gdziekolwiek chcesz i kiedy chcesz. Na przykład, nie trzeba odwiedzić MSN.com zanim wejdziesz na HTML.net. • Text - tekst. • Mark-up (podnosić) oznacza to co robisz z tekstem. Podnosisz standard tekstu tak jak to robisz za pomocą edytorów tekstowych z tytułami, wypunktowaniem lub pogrubianiem i tak dalej. • Language (język) to czym jest HTML. Używa wielu Angielskich wyrazów.

5. Elementy blokowe i liniowe • W skład języka HTML/XHTML wchodzą polecenia, dzięki którym stronę możemy podzielić na tzw. elementy blokowe oraz elementy liniowe (wierszowe), stanowiące podstawowe komponenty konstrukcyjne strony, między którymi wyświetlamy treść znaczników. • Elementy blokowe występują niezależnie/odrębnie od siebie. Umieszczamy je jeden pod drugim, nigdy w jednej linii. Wewnątrz siebie mogą zawierać inne elementy blokowe lub zwyczajny tekst. Z elementów blokowych konstruujemy bloki strony większe, niż z elementów wyświetlanych w linii. • Z kolei elementy liniowe (wierszowe) nie mogą zawierać wewnątrz siebie elementów blokowych, innych elementów liniowych oraz tekstu. Owszem, mogą występować w jednej linii z racji tego, że nie budują nowego wiersza.

6. Elementy blokowe • <hn> </hn> (<h1> </h1> <h2></h2> itd. do 6) • <p> </p> • <br /> • <hr /> • <pre> </pre> • <blockquote> </blockquote> • <address> </address> • <div> </div> • <ul> </ul> • <li> </li> • <ol> </ol> • <dl> </dl> <dt></dt> <dd></dd> • <fieldset> </fieldset>

7. Nagłówek (tytuł, śródtytuł) <hn> • Nagłówki dzielą treść strony internetowej na pewne logicznie wyodrębnione części, podobnie jak nagłówki w prasie czy książkach. W języku HTML/XHTML możemy wykorzystywać sześć poziomów tytułów, traktowanych hierarchicznie (nagłówek stopnia pierwszego jest nadrzędny w stosunku do tytułu stopnia drugiego, itd.).

8. Znacznik akapitu <p> • Aby umieścić akapit na stronie WWW, wykorzystujemy element nazywany znacznikiem akapitu. Tekst umieszczamy wewnątrz znacznika <p> oraz </p>. Kolejne akapity umieszczamy zawsze jeden pod drugim. Niezależnie od ilości wierszy w tekście, który wprowadzamy między znacznikiem akapitu, przeglądarka odczyta tekst jako jeden ciąg tekstu, który będzie łamany w zależności od długości i dostępnej szerokości.

9. Znacznik końca wiersza <br /> • Do złamania wiersza wewnątrz akapitu posłuży nam znacznik końca wiersza. Jest to element pusty, tj. taki który nie posiada znacznika zamykającego. W kodzie zapisujemy go w następujący sposób: <br />. Znacznik końca wiersza stosujemy wtedy, kiedy chcemy w konkretnym miejscu złamać tekst w taki sposób, żeby w każdej przeglądarce wyglądał tak, jak chcemy: np. fragment wiersza lub tekstu piosenki.

10. Pozioma linia <hr /> • Stosując znacznik poziomej linii w kodzie, na stronie otrzymamy… poziomą linię. Obecnie bardzo rzadko używa się tego znacznika, w celu wykonania linii dekoracyjnej lepiej jest zastosować Kaskadowe Arkusze Stylów (CSS). Jest to pusty element bez znacznika zamykającego, zapisujemy go tak: <hr />.

11. Blok przeformatowany <pre> • Blok przeformatowany <pre> umieszczając tekst wewnątrz znacznika bloku przeformatowanego <pre></pre>, zachowujemy wszystkie spacje i złamania wiersza. Będą widoczne na naszej stronie www.

12. Blok cytowany <blockquote> • Jeśli chcemy wpisywany tekst umieścić jako cytat, stosujemy znacznik bloku cytowanego <blockquote></blockquote>. Możemy go stosować, jeśli mamy potrzebę zacytowania większego fragmentu tekstu, ciągnącego się przez wiele linijek. Wszystkie wiersze w środku bloku cytowanego rozpoczynają się tabulatorem. Jednak należy pamiętać, że nie wszystkie przeglądarki, po zastosowaniu tego znacznika, będą wyświetlały tekst ujęty w cudzysłów tak, jakbyśmy chcieli.

13. Adres <address> • Znacznik adresu definiuje blok, w którym umieszczamy adres (własny lub jakikolwiek inny kontakt) do wyświetlenia na naszej stronie internetowej. Tekst wewnątrz znacznika zazwyczaj interpretowany jest przez przeglądarki jako czcionka pochyła. Do złamania wiersza stosujemy znacznik <br /> .

14. Blok dokumentu <div> • Znacznik bloku dokumentu może zawierać inne elementy blokowe oraz elementy liniowe. Jest tzw. elementem ogólnym, odgrywającym szczególną rolę. Element <div></div> stosujemy przy ustalaniu struktury naszego dokumentu. Powtarzające się na stronie WWW elementy, typu menu (górne, dolne, z boku), oznaczamy jako klasy (class), natomiast elementy strony, które się nie powtarzają (nagłówek, stopka), otrzymują identyfikator (id).

15. Wykazy (listy) <ul> <li> <ol> • Za ich pomocą tworzymy pogrupowane spisy informacji, wyświetlane w postaci punktów nienumerowanych i numerowanych. • Wykaz nienumerowany (nieuporządkowany, wypunktowany) <ul> • Jest on odpowiednikiem wypunktowania w edytorach tekstu, tworzymy go za pomocą elementu <ul></ul>. Wewnątrz tego znacznika umieszczamy dodatkowo element <li></li>. Jeden taki element <li></li> tworzy jedną pozycję listy. • Wykaz numerowany (uporządkowany) <ol> • Jest tworzony podobnie jak lista wypunktowana. Ponumerowany blok tworzymy za pomocą znaczników <ol></ol>. Również tutaj poszczególne pozycje listy tworzymy za pomocą znaczników <li></li>.

16. Lista definicyjna (definicji) <dl> <dt> <dd> • Na pojedynczą listę definicji składa się definiowany termin <dt></dt> oraz definicja <dd></dd>. Całość zawieramy w elemencie <dl></dl>.

17. Obramowanie formularza <fieldset> • Definiując formularz, możemy umieścić w nim dodatkowe elementy. Jednym z nich jest element grupujący <fieldset></fieldset>. Za pomocą tego znacznika możemy pogrupować kontrolki dotyczące podobnej tematyki. Zostaną one dzięki niemu otoczone obramowaniem.

18. Elementy liniowe • <span> </span> • <q> </q> • <!--…--> • style czcionek (fizyczne i logiczne)

19. Zakres <span> • Znacznik <span></span>, podobnie jak <div>, należy do tzw. elementów ogólnych. Może on zawierać dowolne elementy liniowe, ale nie może zawierać żadnych elementów blokowych. Wykorzystujemy go do definiowania „nowych” elementów, w połączeniu z identyfikatorami i klasami, takich jak nazwy plików.

20. Cytat w wierszu <q> • Znacznika <q></q> używamy do umieszczenia w tekście cytatów. W przeglądarce widoczne są one w bieżącym wierszu, bez specjalnego eksponowania. Wewnątrz znacznika nie umieszczamy znaków cudzysłowu, ponieważ z założenia przeglądarka powinna je dodać do fragmentu tekstu.

21. Komentarz <!--…--> • Zdarza się, że musimy coś w kodzie naszej strony skomentować, lub też oznaczyć jakiś fragment dokumentu, albo tymczasowo usunąć blok kodu. W tym celu używamy znacznika komentarza <!--tu wpisz komentowany tekst-->. Cały wpisany tekst wewnątrz znacznika jest ignorowany przez przeglądarki. Należy pamiętać o tym, że komentarzy nie należy zagnieżdżać (tj. umieszczać jeden wewnątrz drugiego).

22. Style czcionek (fizyczne i logiczne) • Są to znaczniki, za pomocą których zmieniamy wygląd pojedynczych wyrazów lub całego tekstu. • Style fizyczne definiują sposób sformatowania tekstu, wyróżniając poszczególne fragmenty z całego tekstu. Poniżej pokazane są przykłady wykorzystania poszczególnych stylów fizycznych. • Czcionka pogrubiona <b> • Czcionka pochylona <i> • Czcionka o stałej szerokości znaku <tt>

23. Indeks górny (superskrypt) <sup> • Indeks dolny (subskrypt) <sub> • Duża czcionka (+1 punkt) <big> • Mała czcionka (-1 punkt) <small>

24. Podstawowe znaczniki

25. Znacznik font może przyjmować kilka parametrów: • size – rozmiar czcionki, wyróżniamy względny i bezwzględny; ten pierwszy, jak sama nazwa wskazuje, ustalamy na podstawie czcionki bazowej, np. o trzy pkt. większa od standardowej, w drugim przypadku po prostu podajemy wartość, która nas interesuje: <font size="12">Tekst o rozmiarze 12</font> <font size="-8">Tekst pomniejszony o 8 pkt.</font> • color – kolor, możemy podać jego nazwę (np. black) lub wpisać kod szesnastkowo <font color="red">Czerwona czcionka</font> <font color="FF0000">Czerwona czcionka zapisana heksadecymalnie</font> • face – rodzaj czcionki <font face="Times New Roman"> Czcionka Times New Roman </font>