Podstawowa struktura dokumentu HTML

Prezentacja na temat: "Podstawowa struktura dokumentu HTML"— Zapis prezentacji:

1 Podstawowa struktura dokumentu HTML
Paulina Jankowska Karolina 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>