Transcript Podstawowa struktura dokumentu HTML

Podstawowa struktura
dokumentu HTML
Paulina Jankowska
Karolina Ziółkowska
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".
Szkielet strony HTML
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.
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.
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>
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.).
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.
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.
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 />.
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.
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.
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 /> .
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).
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>.
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>.
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.
Elementy liniowe
<span> </span>
<q> </q>
<!--…-->
style czcionek (fizyczne i logiczne)
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.
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.
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).
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>
 Indeks górny (superskrypt) <sup>
• Indeks dolny (subskrypt) <sub>
• Duża czcionka (+1 punkt) <big>
• Mała czcionka (-1 punkt) <small>
Podstawowe znaczniki
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>