Język HTML - Podstawy
HTML - Wykład 1
Dr Beata Pańczyk
Znaczniki HTML
Znaczniki - opis sposobu formatowania strony i jej struktury (wstawienie dodatkowych elementów generowanych lub też z pliku);
Zasada ignorowania;
Rodzaje znaczników:
Parzyste: <NAZWA>....</NAZWA>
Nieparzyste: <NAZWA>....Parametry znacznika: wpisywane po NAZWIE,
wartość parametru: po znaku = (ujęta w ” ”)
<NAZWA PAR1=”wart_par1” PAR2=”wart_par2”....>
Zestawy Znaków Narodowych
Sposoby kodowania polskich liter: najbardziej rozpowszechniona norma ISO-8895-2 i strona kodowa Windows 1250
Zależność od ustawień przeglądarki
Polecenie informujące przeglądarkę o zastosowanym zestawie
(w nagłówku dokumentu):
<meta http-equiv=”content-type” content=”text/html; charset=windows-1250”>
<meta http-equiv=”content-type” content=”text/html;
charset=iso-8859-2”>
Struktura Dokumentu HTML (1)
Tekst ASCII zawarty pomiędzy znacznikami: <HTML> ... </HTML>
Nagłówek - nie wyświetlana część informacyjna o dokumencie:
<HEAD>...</HEAD>Ciało dokumentu, część właściwa:
<BODY>...</BODY>Ignorowanie: wielokrotnych spacji, przejścia do nowego wiersza (ENTER) => jawność określania końca akapitów, wcięcia w celu wydzielenia struktury dokumentu
Struktura Dokumentu HTML - sekcja <HEAD> (2)
W sekcji <HEAD> umieszcza się znaczniki np.:
<TITLE> … </TITLE>
|
tytuł dokumentu wyświetlany w pasku tytułowym przeglądarki
|
<META NAME=”keywords” CONTENT=”slowa kluczowe”> <META NAME=”description” CONTENT=”opis strony”> <META NAME=”generator” CONTENT=”edytor”> <META NAME=”author” CONTENT=”autor”> <META NAME=”copyright” CONTENT=” … ”>
<META HTTP-EQUIV=”content-type” |
dodatkowe informacje dla przeglądarki, dla wyszukiwarek atrybut NAME stosowany jest wymiennie z atrybutem HTTP-EQUIV
|
<BASE HREF=”http:www.mojserwer.pl” >
|
podstawowy adres URL dla wszystkich adresów względnych |
Struktura Dokumentu HTML (3)
<HEAD> <TITLE>tytul w naglowku
<META … > </HEAD> <BODY> akapit1 <BR> akapit1 <P> akapit2 <P> akapit3 </BODY> </HTML> |
- początek dokumentu HTML - początek nagłówka - napis w nagłówku strony
- informacje dla przeglądarki - koniec nagłówka - początek właściwej treści dokumentu - podział wiersza
- pusty wiersz
- koniec treści - koniec dokumentu HTML |
Przykład 1 - zaczynamy
<html> <body> HTML - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu </body> </html> |
|
Przykład 1 - znacznik HEAD
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="Author" content="BeataP"> <title>Przykład 1</title> </head> <body> HTML - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu </body> </html> |
|
Parametry Ciała Dokumentu
BACKGRAUND |
Tło dokumentu w postaci pliku .GIF |
BGCOLOR |
Kolor tła dokumentu |
TEXT |
Kolor tekstu |
LINK |
Kolor połączeń: początkowych |
ALINK |
aktywnych |
VLINK |
wykorzystanych |
Np.
<BODY BGCOLOR=”blue” TEXT=”yellow” LINK=”red”>
Przykład 1 - parametry znacznika BODY
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="Author" content="BeataP"> <title>Przykład</title> </head> <body text="#000099"bgcolor="lightyellow"> HTML - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu </body> </html> |
|
"Bezpieczna" paleta kolorów WWW
Ze 140 predefiniowanych kolorów (np. brown, coral, darkblue, green, gold, gray, green, pink, khaki,navy, olive, plum, purple, seagreen, snow, tomato, violet,whitesmoke) tylko 10 stanowią kolory z tzw. "bezpiecznej" palety WWW - wyświetlane zawsze w jednakowej postaci:
Nazwa koloru |
Szesnastkowo |
aqua |
00FFFF |
black |
000000 |
blue |
0000FF |
cyan |
00FFFF |
fuchsia |
FF00FF |
lime |
00FF00 |
magenta |
FF00FF |
red |
FF0000 |
white |
FFFFFF |
yellow |
FFFF00 |
Tabela Wybranych Kodów Znaków
Znaki nie należące do standardowego zestawu znaków alfanumerycznych
(np. ©), niektóre znaki specjalne (np. &) czy też twardą spację należy określać w dokumentach HTML za pomocą kodów. Kody znaków mogą być definiowane poprzez nazwę (encję): &nazwa; albo wartość liczbową &#nnn; .
Liczba |
Encja |
Symbol |
" |
" |
" (cudzysłów prosty) |
& |
& |
& |
  |
|
twarda spacja |
§ |
§ |
§ (znak paragrafu) |
© |
© |
© (symbol copyright) |
® |
® |
® (zastrzeżony znak towarowy) |
² ³ ¹ |
² ³ ¹ |
2 3 1 (2, 3, 1 w indeksie górnym) |
¼ ½ ¾ |
¼ ½ ¾ |
¼ ½ ¾ ułamki |
Formatowanie znaków
<I> tekst </I> |
zapisuje tekst czcionką pochyłą |
<B> tekst </B> |
pogrubienie |
<U> tekst </U> |
podkreślenie |
<TT> tekst </TT> |
„maszyna do pisania” |
<EM> tekst </EM> |
wyróżnienie zwykle kursywą |
<STRONG> tekst </STRONG> |
wyróżnienie zwykle czcionką pogrubioną |
<BLINK> tekst </BLINK> |
Migotanie |
<SUP> ... </SUP> |
Indeks górny |
<SUB> ... </SUB> |
Indeks dolny |
<FONT ...> </FONT> |
Parametry czcionki: COLOR, SIZE |
Formatowanie akapitu
<P> |
odstęp między akapitami |
<BR> |
łamanie wiersza |
<HR> |
pozioma linia |
<CENTER>... <\CENTER> |
wycentrowanie |
Tytuły podrozdziałów
<H1> tekst </H1> |
format tytułu pierwszego poziomu |
<H2> tekst </H2> |
format tytułu drugiego poziomu |
Komentarze
<!- tekst komentarza ->
Przykład 1 - formatowanie tekstu
<html> <body text="#000099" bgcolor="#FFFFCC">
<center><h2> HTML - Lekcja 1 </h2></center> <b> <font color="#CC0000">1. </font> Podstawowe znaczniki </b><br> <b> <font color="#CC0000">2.</font> Struktura dokumentu </b> </body> </html> |
|
Listy i Wyliczania
<OL> |
lista uporządkowana (numerowana) |
<LI> |
element listy (numerowany w poleceniu OL, punktowany w poleceniu UL) |
</OL> |
koniec listy uporządkowanej |
|
|
<UL> |
lista nieuporządkowana (z punktorami) |
</UL> |
koniec listy nieuporządkowanej |
|
|
<DL> |
lista definicji |
<DT> |
termin |
<DD> |
objaśnienie terminu |
</DL> |
koniec listy definicji |
Przykład 1 - Lista z punktorami
<html>
<body text="#000099" bgcolor="#FFFFCC">
<center><h2>HTML - Lekcja 1</h2></center>
<ul> <li><b>Podstawowe znaczniki</b></li> <li><b>Struktura dokumentu</b></li> </ul>
</body> </html> |
|
Przykład 1 - Lista numerowana
<html>
<body text="#000099" bgcolor="#FFFFCC">
<center><h2>HTML - Lekcja 1</h2></center>
<ol> <li><b>Podstawowe znaczniki</b></li> <li><b>Struktura dokumentu</b></li> </ol>
</body> </html> |
|
Przykład 1 - Lista definicji
... <font face="Arial,Helvetica"> <font size=+1> Podstawowe skróty: </font> </font>
<dl> <dt>HTML</dt>
<dd>Hyper Text Markup Language - język <dt>HTTP</dt>
<dd>Hyper Text Transfer Protocol - </dl> ... |
|
Dodawanie obrazków
<IMG |
|
SRC=”plik lub URL” |
nazwa URLa lub pliku graficznego w formacie .gif |
ALIGN=”położenie” |
określa położenie obrazka na stronie WWW: TOP, MIDDLE lub CENTRE, BOTTOM, RIGHT, LEFT |
ALT=”tekst” |
pokazuje tekst w miejscu elementów graficznych użytkownikom, którzy nie mogą oglądać grafiki; |
ISMAP |
obrazek w formacie mapy |
BORDER |
Linia wokół obrazu (=0 brak) |
HEIGHT WIDTH |
Wysokość i szerokość w punktach |
> |
|
Przykład 1 - Wstawianie obrazka
<html> <body text="#000099" bgcolor="#FFFFCC"> <center><h2>HTML - Lekcja 1</h2></center>
<ol><li><b>Podstawowe znaczniki</b></li> <li><b>Struktura dokumentu</b></li></ol>
<img SRC="world.gif" height=162 width=146>
</body> </html> |
|
Przykład 1 - Parametry znacznika IMG
<html> <body text="#000099" bgcolor="#FFFFCC">
<center><h2>HTML - Lekcja 1</h2></center>
<ol> <li><b>Podstawowe znaczniki</b></li> <li><b>Struktura dokumentu</b></li> </ol>
<center> <img SRC="world.gif" BORDER=0 ALT="Tu jest obrazek" height=250 width=225> </center>
</body></html> |
|
Odwołania hipertekstowe
<A> ... </A> |
kotwica (anchor) |
<A HREF=”plik lub URL”> np. <A HREF=”rys.htm”> Zobacz rys.1 </A> <A HREF= ”http://pluton.pol.lublin.pl/lafi.htm” > Konferencja LAFI </A> |
odwołanie hipertekstowe do pliku na serwerze lokalnym lub URL do serwera odległego |
<A NAME=”r1”> Rozdział 1 </A> <A HREF=”#r1”> Przeczytaj roz. 1 </A> |
odwołanie do miejsca wewnątrz aktualnego dokumentu |
Przykład 1 - Odwołania hipertekstowe
<html> <body text="#000099" bgcolor="#FFFFCC"> <center><h2>HTML - Lekcja 1</h2></center>
<br>
<br> <center><p> <a href="http://www.onet.pl"> <img SRC="world.gif" ALT="Tu jest obrazek" height=250 width=225> </a> </center> </body></html> |
|
Inne Znaczniki
Umieszczanie dźwięku na stronie:
<EMBED SRC=”melodia.mid” AUTOSTART=false LOOP=true WIDTH=145 HEIGHT=55 ALIGN=center> </EMBED> - osadzenie obiektu (pliku dźwiękowego), w specyfikacji HTML zastąpiony znacznikiem <OBJECT>
Znacznik <APPLET>
<APPLET CODE=”test.class” CODEBASE=”folder” HEIGHT=40 WIDTH=400> </APPLET>
Uniwersalny znacznik <OBJECT> - wstawia obiekt (np. obrazek, aplet, plik multimedialny .avi, .mov, .mpg ) na stronę WWW, podobny do <EMBED>
<OBJECT DATA=”obrazek.gif” TYPE=”image/gif”> </OBJECT>
<OBJECT DATA=”test.class”> </OBJECT>
<OBJECT DATA=”film.avi” TYPE=”application/avi”> </OBJECT>
Praca pochodzi z serwisu www.e-sciagi.pl
Beata Pańczyk - HTML (Wykład 1) 2
Język HTML - Podstawy
Wyszukiwarka
Podobne podstrony:
podstawowe pojęcia w zarządzaniu (25 str), Zarządzanie(1)
język HTML tabele i ramki (19 str)
prognozowanie i symulacje wyklad (25 str)
ekonomiczne podstawy turystyki (4 str), Ekonomia
Język łowiecki podstawowe określenia
Podstawy elektroniki str 101 141
slowniczek podstawowych pojęć (5 str), S?OWNICZEK PODSTAWOWYCH POJ??
Język francuski podstawowy arkusz
Język Francuski podstawowy arkusz 2
ekonomiczne podstawy turystyki (1 str), Ekonomia
zarzadzanie kadrami (25 str)
HISTORIA GOSPODARCZA 25 STr
kurs html podstawy tworzenia stron www RHQWUXUAVSLOSX6ABOMEHGX52LV2WV67LZXY6RQ
HTML, Podstawowe ćwiczenia
ekonomiczne podstawy turystyki (4 str), Ekonomia, ekonomia
więcej podobnych podstron