docJęzyk html to język znaczników inaczej tagów, czyli słów lub skrótów
download 
Reklamacja Transkrypt
Język html to język znaczników inaczej tagów, czyli słów lub skrótów
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka
angielskiego ujętych w nawiasy ostrokątne <>, np.. <P>. W większości przypadków
spotykamy znaczniki początku (inaczej otwarcia np. <B>) i ich odpowiedniki w postaci
zakończenia, czyli znaczniki zamknięcia (oznaczone ukośnikiem / np. </B>)
Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
W znaczniku otwarcia możemy umieszczać parametry inaczej atrybuty, np. w <IMG>
możemy wstawić <IMG SRC=”podajemy miejsce i nazwę obrazka”>
W jednym znaczniku możemy umieścić kolejny, a w nim jeszcze inny, jeśli by taka
konieczność była konieczna (nazywamy to zagnieżdżaniem), np. <B><I><U>. W takim
przypadku musimy pamiętać, że zamykamy dane znaczniki w kolejności odwrotnej niż je
otwieraliśmy, czyli dla tych trzech tagów otwartych kilka słów wcześniej zamknięcie będzie
wyglądało: </U></I></B>
Szkielet dokumentu HTML:
<HTML>
<HEAD>
Tu umieszczamy informacje, które na stronie mają być niewidoczne (np. tytuł strony, autora
strony, opis strony, kodowanie znaków – polskie litery będą poprawnie wyświetlane)
</HEAD>
<BODY>
Tu umieszczamy to, co na stronie ma być widoczne, czyli tekst, obrazki, odnośniki, tabelki
czy co tam jeszcze się uda.
</BODY>
</HTML>
Kodowanie: <meta charset=”utf-8”>
Opis strony: <meta name=”description” content=”Maluchy na Kubie”>
Dane autora: <meta name=”author” content=”Grzegorz Brzęczyszczykiewicz”>
Dobrze jest też przed znacznikiem <HTML> wstawić informację o typie dokumentu pisząc
<!DOCTYPE html>. Wypada też będzie dodać w znaczniku otwarcia <HTML> parametr
LANG=”pl”
Oto kilka tagów (znaczników) i ich znaczenie na następnej stronie:
Znaczenie
Tag (znacznik) otwarcia
Tag (znacznik)
zamknięcia
Nagłówek (tytuł rozdziału) poziomy do 1
do 6
Z parametrem align=”ustawienie”
możemy wybrać ustawienie tekstu w
wierszu:
Center – do środka, Left – do lewej
Right – do prawej, Justify - wyjustowany
Utworzenie akapitu
Tak samo jak tag <H> może wystąpić z
parametrem align
Łamanie linii w akapicie, tworzenie
pustych linii
Wyśrodkowywanie
Oznaczenie cytatu (dany fragment
pojawi się w cudzysłowach)
Pochylenie (kursywa)
Pogrubienie
Akcentowanie tekstu (może powodować
pogrubienie)
Podkreślenie
Wypunktowanie
Numerowanie
<H1>
</H1>
np. <H5 align="center">
</H5>
<P>
</P>
np. <P align="justify">
<BR>
</P>
brak
<CENTER>
<Q>
</CENTER>
</Q>
<I>
<B>
<STRONG>
</I>
</B>
</STRONG>
<U>
<UL>
<OL>
<LI>
</U>
</UL>
</OL>
</LI>
<IMG>
np. <IMG SRC="osa.jpg">
Brak
Stworzenie listy wypunktowanej lub ponumerowanej
(należy wstawić miedzy znacznikami <UL> lub <OL>
zajrzyj na ostatnią stronę
Wstawienie obrazka
Musi być z parametrem SRC=”miejsce i
nazwa obrazka lub tylko nazwa obrazka”
Można dodać parametr WIDTH=”liczba”
(szerokość) lub/i HEIGHT=”liczba”
(wysokość)
Wstawienie odnośnika, czyli hiperłącza
Musi zawierać parametr HREF=”adres
lub nazwa pliku”
Wstawienie tabeli
Żeby tabela zaistniała między
znacznikami <TABLE> wstawiamy
znaczniki wiersza, a między nimi
znaczniki komórek
Wiersz
Komórka
Kreska pozioma od lewej do prawej
Tytuł strony
np.
<IMG SRC="osa.jpg" HEIGHT="100">
<A>
</A>
np.
</A>
<A HREF="http://www.onet.pl"
<TABLE>
</TABLE>
<TR>
<TD>
</TR>
</TD>
<HR>
<TITLE>
Brak
</TITLE>
O ile HTML służy do opisania treści na stronie i podzieleniu jej na fragmenty według ich
znaczenia, tak za wygląd naszych stron internetowych odpowiada CSS. Kod CSS można
umieścić w oddzielnym pliku z rozszerzeniem .css i "wstawić" go poprzez specjalny tag
HTML (niżej jest podany). Można też umieścić go bezpośrednio w dokumencie HTML.
My postaramy się kod css umieścić w oddzielnym pliku. A więc musimy w pliku html (u
nas index.html) między znacznikami HEAD (czyli tym otwartym, a zamkniętym) wstawić
znacznik (inaczej tag) LINK z parametrami (inaczej atrybutami). Oto on:
<LINK REL="STYLESHEET" HREF="main.css"> (wpisujesz to używając programu
notepad++)
Teraz w programie NOTEPAD++ nie zamykając pliku index.html utwórz drugi plik.
Postępuj tak: Z menu programu wybierz Składnia (jeśli masz po angielsku menu
wybierz Language)i pod literką C wybierz CSS. Następnie ten nowy plik zapisz w tym samym
miejscu, co znajduje się plik index.html pod nazwą main. Jeśli dobrze poszło w programie
notepad++ masz otwarte dwa pliki (index.html i main.css), a w folderze AUTOHIPNOZA
powinien pojawić się kolejny plik - main.css (Można też było podać inną nazwę)
W pliku CSS wykorzystujemy znaczniki, które pojawiły się w pliku HTML, oraz
identyfikatory i klasy. U nas identyfikatorów i klas nie było.
Jak więc to robimy?
Podajemy nazwę znacznika bez żadnych nawiasów, a po nazwie wstawiamy tym razem
nawiasy klamrowe, między którymi wpisujemy, co chcemy zmienić, stawiamy dwukropek i
podajemy jak ma wyglądać, na koniec umieszczając średnik np.
Jeśli wpiszemy to, co widzimy na
obrazku po lewej w pliku css (u
nas to main.css) i zapiszemy oba
pliki w programie notepad++
tekst, który znalazł się między
znacznikami H1 po odświeżeniu
przeglądarki firefox zmieni się na
kolor zielony.
UWAGA: Możemy naraz zmieniać jedną lub kilka właściwości danego znacznika.
Atrybut "href" wskazuje, w którym pliku mieści się kod CSS, REL="stylesheet" mówi nam z
kolei, że chodzi o arkusz stylów CSS.
Kilka właściwości, które możemy zmienić w css:
color [kolor tekstu podajemy słowem po angielsku lub sześciocyfrową liczbą szesnastkową
poprzedzoną # lub używając rgb, np. color: red; lub color: #34FA2C; #000000 -czarny,
a #FFFFFF -biały lub color: rgb(12, 156,245); liczby mogą być od 0 do 255]
background-color [kolor tła, podajemy kolor tak samo jak w color]
background-image
[tło
w
postaci
obrazka,
podajemy
np.
background-image: url("miejsce i nazwa obrazka lub link");
jeśli obrazek jest w tym samym miejscu, co plik html to podajemy wówczas tylko nazwę
pliku np. "burza.jpg", background-image: url("burza.jpg")
jeśli obrazek jest w jakimś folderze lub folderach wówczas podajemy nazwy folderu(ów) i na
końcu nazwę obrazka (każdą nazwę oddzielamy ukośnikiem /) np. jeśli
plik html i folder Obrazki są w tym samym miejscu, a w folderze Obrazki
jest plik burza.jpg to wówczas zapiszemy to "Obrazki/burza.jpg" czyli:
background-image: url("Obrazki/burza.jpg") ]
font-family [rodzaj oraz rodzina czcionki, np. font-family: arial; kilka przykładowych innych
dostępnych nazw: Georgia, Book Antiqua, Helvetica, Impact, Verdana]
font-size [wielkość czcionki, podajemy liczbą a następnie dopisując px, np. font-size: 14px;]
border
[wstawia obramowanie, możemy określić grubość, styl i kolor, np.
border: 4px solid blue; styl obramowania określimy m.in. słowami none (brak
obramowania), solid (obramowanie linią ciągłą), dotted (obramowanie linią
przerywaną), inset (musisz sprawdzić samodzielnie)]
padding [przestrzeń wokół danego elementu, np. padding: 10px;]
list-style [ustala wygląd wypunktowań (dostępne: none (brak znaków punktowania), square
(kwadraciki jako punktowy) czy circle(koła jako punktory)) lub numerowań
(dostępne: lower-alpha (małe litery alfabetu), upper-alpha (duże litery alfabetu),
lower-roman (małe rzymskie cyfry) czy upper-roman (duże rzymskie cyfry)),
np. list-style: square; użyte dla UL spowoduje, że zamiast czarnych kropek
wypunktowania pojawią się czarne kwadraciki]
To do HTMLa, jak tworzyć punktowanie, numerowanie i tabelkę.
Stworzenie wypunktowania. Wpisując znaczniki w ten sposób:
<OL>
<LI> jeden</LI>
<LI>dwa</LI>
<LI>trzy</LI>
</OL>
w przeglądarce powinno to wyglądać następująco:
jeden
dwa
trzy
Identycznie wykonujesz numerowanie, tyle, ze zamiast <OL> wpisujesz znacznik
numerowania. W przeglądarce otrzymasz wówczas to:
1. jeden
2. dwa
3. trzy
Stworzenie tabeli: Przykład tabeli składającej się z trzech kolumn i jednego wiersza:
<TABLE>
-mówi, że będzie to tabela
<TR>
- mówi, że tworzymy wiersz
<TD>
- mówimy, że tworzymy pierwszą komórkę
Tu możemy coś wpisać lub umieścić obrazek
</TD>
- mówimy, że zamykamy pierwszą komórkę
<TD>
- mówimy, że tworzymy drugą komórkę
Tu możemy coś wpisać lub umieścić obrazek
</TD>
- mówimy, że zamykamy drugą komórkę
<TD>
- mówimy, że tworzymy trzecią komórkę
Tu możemy coś wpisać lub umieścić obrazek
</TD>
- mówimy, że zamykamy trzecią komórkę
</TR>
- mówi, że kończymy wiersz
</TABLE>
- mówi, że zamykamy tabelę
Jeśli nie ustalimy koloru obramowania tabelki to tabelka będzie niewidoczna, mimo, ze
będzie. HTML nie zna kolumn, a więc, żeby utworzyć tabelkę składającą się z trzech kolumn
i jednego wiersza: tworzymy jeden wiersz, a w nim trzy komórki, jak w powyższym
przykładzie
