Post on 11-Jan-2016
description
Podstawy języka HTML
Technologie Informacyjne
HyperText Markup Language czyli HTML
HTMLHTML - język opisujący sposób wyświetlania na ekranie odbiorców
treści tekstowej i multimedialnej dokumentów hipertekstowych oraz
organizację wzajemnych połączeń między nimi.
XHTMLXHTML – (ang. eXtensible HyperText Markup Language) – język
służący do tworzenia stron WWW będący następcą standardu HTML.
Dokumenty pisane w XHTML są zgodne z oficjalną specyfikacją XML,
dzięki czemu możliwe jest łatwe łączenie go z innymi językami zgodnymi z XML np. MathML (język służący do opisywania
wzorów i symboli matematycznych)
Edytory HTML
• Windows:Windows:– darmowe: EdHTML, edytor znaczników – ezHTML,
HateML Pro, kED, PSPad, FOXEdit– płatne: Pajączek, CoreEditor
• Linux:Linux:– Bluefish, gedit, Kate, Quanta Plus
• Mac OS X:Mac OS X:– Bluefish, Smultron, Taco HTML Edit
Umieszczanie stron na serwerze
Darmowe serwery:Darmowe serwery:
Klient FTP:Klient FTP:• FileZilla • SmartFTP• Staff-FTP• TotalCommander
Adres Rozmiar
http://www.cba.pl/ 400 MB
http://60free.ovh.org/ 60 MB
http://freehost.pl/ 500 MB
http://miasto.interia.pl/ 40 MB
http://www.lua.pl/ 350 MB
http://www.hosting.osemka.pl/
500 MB
http://republika.pl/ 30 MB
Szablon strony<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Tu wpisz opis zawartości strony" />
<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
<title>Tu wpisz tytuł strony</title>
</head>
<body>
Tu wpisuje się treść strony
</body>
</html>
Deklaracja wersji języka XMLDeklaracja wersji języka XML
Deklaracja typu dokumentu (DTD)
Deklaracja typu dokumentu (DTD)
Otwarcie znacznika <html> i określenie przestrzeni nazw języka XML
Otwarcie znacznika <html> i określenie przestrzeni nazw języka XML
Nagłówek (sekcja <head>)Nagłówek (sekcja <head>)
Tytuł stronyTytuł stronyZawartość
strony (sekcja <body>)
Zawartość strony (sekcja <body>)Znacznik
kończący dokument HTML
Znacznik kończący dokument HTML
Znaczniki
Budowa podstawowego elementu języka HTML:Budowa podstawowego elementu języka HTML:
<nazwa_znacznika atrybut=„wartość”> zwartość </nazwa_znacznika>
znacznik otwierającyznacznik otwierającyatrybuty znacznikaatrybuty znacznika znacznik zamykającyznacznik zamykający
Znaczniki
Budowa podstawowego elementu języka HTML:Budowa podstawowego elementu języka HTML:
<nazwa_znacznika atrybut=„wartość”> zwartość </nazwa_znacznika>
Przykład:Przykład:<body bgcolor=„silver” align=„center”>
Tutaj wpisz jakiś tekst
</body>
Formatowanie tekstu w dokumentach HTML
Akapit i jego atrybuty
<p> </p>
<p align=„wartość”>
ALIGN=left - równanie do lewej ALIGN=center – centrowanie, efekt centrowania można uzyskać również
poleceniem <CENTER> .. </CENTER> ALIGN=right - równanie do prawej
np.
<p>Ten tekst domyślnie wyrówna się do lewej</p> <p align=center>Ten będzie na środku</p> <p align=right>Ten zaś wyrówna się do prawej</p>
Ten tekst domyślnie wyrówna się do lewejTen będzie na środku
Ten zaś wyrówna się do prawej
Formatowanie tekstu w dokumentach HTML
<br /> - przejście do następnej linii  – „dodatkowa” spacja
Czcionka i jej atrybutya) wielkość<font> </font><font size=„a”> gdzie a: 1-7 lub <Hx> </Hx> gdzie x: 1-6np.<H1> To jest nagłówek nr 1 </H1> <H2> To jest nr 2 </H2>
efekt
To jest nagłówek nr 1 To jest nr 2
b) typ<font face=„Arial”>
Formatowanie tekstu w dokumentach HTML
Czcionka i jej atrybuty cd…
c) Pozostałe atrybuty czcionki<b> </b> - pogrubienie<i> </i> - kursywa<u> </u> - podkreślenie
c) indeksy<sup> </sup> - indeks górny
<sub> </sub> - indeks dolny
Przydatne znaczniki
<pre> </pre> - zachowanie formatowania wprowadzanego teksu zgodnie
z pierwotny fomatowaiem jego w kodzie źródłowym
<blink> </blink> - miganie tekstu
Kolory w języku HTML
Sposoby umieszczania kolorów w dokumencie HTMLSposoby umieszczania kolorów w dokumencie HTML• deklaracja słowna np.: red, green, blue• kod szesnastkowy w postaci #RRGGBB lub skróconej #RGB
Przykładowe zastosowania:
<body bgcolor="kolor">...</body>
<font color="kolor">...</font>
Zagnieżdżanie znaczników
Przykład nr 1:<br /><a href=„przyklad.html”><b>Link do strony z przykładami</b></a><br />Przykład nr 2:<br /><b><i>Pogrubiona kursywa</i></b><br />
Wstawianie odnośników i obrazków
Odnośnik:Odnośnik:<a href=„przyklad.html”><b>Link do strony z przykładami</b></a>
Obrazek:<img src=„obrazek.jpg” alt=„przykładowy obrazek”
width=„300px”/>
Listy wypunktowane i numerowane
<ol>
<li>Poniedziałek</li>
<li>Wtorek</li>
<li>Środa</li>
</ol>
<ul>
<li>Koń</li>
<li>Krowa</li>
<li>Droga na Ostrołękę</li>
</ul>
Tabele
<table border="1px„ cellspacing="5px" cellpadding="20px">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>