Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Wielkość: px

Rozpocząć pokaz od strony:

Download "Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>"

Bartłomiej Kuczyński
8 lat temu
Przeglądów:

1 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:

</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.

2 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 <H1> np. <H5 align="center"> <P> </H1> </H5> </P> np. <P align="justify"> </P> Łamanie linii w akapicie, tworzenie <BR> brak pustych linii Wyśrodkowywanie <CENTER> </CENTER> Oznaczenie cytatu (dany fragment <Q> </Q> pojawi się w cudzysłowach) Pochylenie (kursywa) <I> </I> Pogrubienie <B> </B> Akcentowanie tekstu (może powodować <STRONG> </STRONG> pogrubienie) Podkreślenie <U> </U> Wypunktowanie <UL> </UL> Numerowanie <OL> </OL> <LI> </LI> 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 <IMG> np. <IMG SRC="osa.jpg"> np. <IMG SRC="osa.jpg" HEIGHT="100"> <A> np. <A HREF=" Brak </A> </A> Wstawienie tabeli <TABLE> </TABLE> Żeby tabela zaistniała między znacznikami <TABLE> wstawiamy znaczniki wiersza, a między nimi znaczniki komórek Wiersz Komórka <TR> </TR> Kreska pozioma od lewej do prawej <HR> Brak Tytuł strony <TITLE> </TITLE>

<P align="justify"> </P> Łamanie linii w akapicie, tworzenie <BR> brak pustych linii Wyśrodkowywanie <CENTER> </CENTER> Oznaczenie cytatu (dany fragment <Q> </Q> pojawi się w cudzysłowach) Pochylenie

3 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"> notepad++) (wpisujesz to używając programu 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.

My postaramy się kod css umieścić w oddzielnym pliku. A więc musimy w pliku html (u nas index.

4 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; # 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]

background-image [tło w postaci obrazka, podajemy np.

5 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 - mówimy, że tworzymy pierwszą komórkę - mówimy, że zamykamy pierwszą komórkę - mówimy, że tworzymy drugą komórkę - mówimy, że zamykamy drugą komórkę - mówimy, że tworzymy trzecią komórkę - 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

zamiast <OL> wpisujesz znacznik numerowania. W przeglądarce otrzymasz wówczas to: 1. jeden 2. dwa 3.

Podobne dokumenty

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony