html | szkolnytiktak

HTML i CSS

Programista od zera. Czego trzeba się nauczyć by robić strony. #1

Szybki kurs tworzenia stron internetowych #1 - Podstawy HTML5

Szybki kurs tworzenia stron internetowych #2 - Struktura HTML5

Szybki kurs tworzenia stron internetowych #3 - Wprowadzenie do CSS3

Szybki kurs tworzenia stron internetowych #4 - Tworzenie menu strony

Grafika na strony internetowe

Obecnie tylko dwa rodzaje plików graficznych używa się do prezentacji grafiki na stronie, jest jpg i png. Dawniej był i do dziś jest sporadycznie stosowany format gif. Były próby wprowadzenia innych formatów, jednak dziś dominują te dwa formaty plików.

Plików z rozszerzeniem jpg używamy najczęściej, służą one głównie do prezentacji obrazów wykonanych aparatami cyfrowymi – czyli zdjęć. Jest to najlepszy format właśnie do umieszczania zdjęć w serwisach www. Format jpg jest formatem kompresji stratnej, to znaczy, że część informacji zwiększając kompresję tracimy.

Pliki z rozszerzeniem PNG, są mniej popularne, a to dlatego że mają inny sposób kompresji i jest to kompresja bezstratna, dodatkowo mają pełna paletę barw. Jednak jest to okupione dużym rozmiarem tych plików. Stąd używa się ich do prezentacji obrazów o prostszej zawartości np. rysunki. W pliku png możemy zawrzeć przezroczyste tło, to jest jedna z najważniejszych właściwości tego formatu, często wykorzystywana przy budowie szablonów stron.

Rozmiar grafiki

Czasami wchodzimy na strony, gdzie zdjęcia bardzo wolno się ładują, pomimo że mają mały rozmiar. Wynika to z dwu przyczyn:
• nie właściwego zastosowania formatu – tutaj zamiast formatu jpg został użyty format png, który nie jest zalecany do zdjęć.
• zdjęcie nie zostało zmniejszone do odpowiedniego rozmiaru. Czyli nasz aparat wykonał zdjęcie o rozmiarze np. 4000x3000px – takie zdjęcie jest bardzo duże i nie jest optymalne do wyświetlania na stronach internetowych.
Zalecam zmniejszenie grafiki do odpowiednich rozmiarów. W sieci jest wiele programów, które automatycznie zmniejszają zdjęcia. Oczywiście możemy zachować kilka procent tolerancji. Umieszczając grafikę na stronie najczęściej będzie to grafika o rozmiarze do 800 px szerokości.
Reasumując zaplanujmy wielkość grafik na stronę i zmniejszmy je do wymaganych rozmiarów.

Nazwy plików

Nie stosujmy zbyt długich nazw plików. Nie stosujmy w nazwie polskich znaków i spacji. Tak będzie nam łatwiej dodawać grafiki. Pamiętajmy też o tym, by nazwy pozwoliły nam identyfikować grafikę na serwerze. Ja często stosuję taki format nazwy plików nazwa_pliku_nr.rozszerzenie. Czyli plik nazywam dwoma/trzema słowami rozdzielonych podkreślnikiem oraz trzeci człon to numer.

1. Tworzymy stronę, zapisujemy ją

<html>

<head>

</head>

<body>

Płock moje miasto

</body>

</html>

zapis: wskaż miejsce docelowe:

plik/zapisz jako/(nazwa pliku) index.html/(zapisz jako typ) wszystkie pliki/(kodowanie)ANSI

______________________________________________________________

2. Dodajemy kolor strony

<html>

<head>

</head>

Płock moje miasto

</body>

</html>________________________________________

3. Dodajemy zapis taki, aby użytkownicy różnych systemów operacyjnych I przeglądarek mogli odczytać polskie litery

<html>

<head>

</head>

Płock moje miasto

</body>

</html>

4. Dodajemy tytuł strony

<html>

<head>

<TITLE> Strona o moim mieście</TITLE>

</head>

Płock moje miasto

</body>

</html>

5. Nagłówek strony I jego wyśrodkowanie

<html>

<head>

<TITLE> Strona o moim mieście</TITLE>

</head>

Płock moje miasto

</body>

</html>

H2 oznacza nagłówek drugiego stopnia

ALIGN=”center” oznacza wyśrodkowanie tekstu na stronie

6. Wstawiamy linię rozdzielającą koloru siwego

<html>

<head>

<TITLE> Strona o moim mieście</TITLE>

</head>

Płock moje miasto

</body>

</html>

7. Wstawiamy wyśrodkowane zdjęcie zapisane w pliku tam, gdzie index.html

<html>

<head>

<TITLE> Strona o moim mieście</TITLE>

</head>

Płock moje miasto

< P ALIGN=”center”>

</body>

</html>

8. Dodajemy listę wypunktowaną

<html>

<head>

<TITLE> Strona o moim mieście</TITLE>

</head>

Płock moje miasto

<H3 ALIGN=”left”>Nasze masto jest:</H3>

<OL>

<LI> Pięknie położone

<LI> Zabytkowe

<LI>Przemysłowe

</OL>

</body>

</html>

<OL> </OL> - dla listy uporządkowanej

<LI> element listy

9. Wstawiamy hiperłącza

<html>

<head>

<TITLE> Strona o moim mieście</TITLE>

</head>

Płock moje miasto

<H3 ALIGN=”left”>Nasze masto jest:</H3>

<OL>

<LI> Pięknie położone

<LI> Zabytkowe

<LI>Przemysłowe

</OL>

<A HREF=”strona2.html”> Przejdź dalej</A>

</body>

</html>

jeśli wewnątrz znacznika <ol> dopiszesz:

type="A", to w wyliczeniu wystąpią litery ABC

type="a", to w wyliczeniu wystąpią litery abc

type="I", to w wyliczeniu wystąpią liczby rzymskie

type="1", to w wyliczeniu wystąpią litery 123

zamiast <ol> użyjecie znacznika <ul> powstanie lista wypunktowana

Objaśnienia użytych znaczników

<body bgcolor=”red”> kolor tła czerwony

<H1> Tytuł pierwszego poziomu</H1>

Płock moje miasto

tytuł drugiego poziomu wyśrodkowany

<P ALIGN=”left”> wyrównanie do lewej strony

<P ALIGN=”right”> wyrównanie do prawej strony

<HR WIDTH=”570”size=”4”color=”silver”> linia o długości 570 pikseli I o grubości 4 pikseli, kolor siwy

<P ALIGN=”center”> wyśrodkowanie akapitu

<IMG SRC= “plock.jpg” WIDTH=”200”Height=”130”></P> wstawienie zdjęcia “nazwa pliku graficznego wraz z rozszerzeniemz’; długość zdjęcia 200 pikseli, wysokość 130

<OL> </OL> - dla listy uporządkowanej

<LI> element listy

<A HREF=”strona2.html”> Przejdź dalej</A> oznacza przejście do strony 2 po kliknięciu odnośnika Przejdź dalej

Inne znaczniki, których można używać tworząc stronę WWW

Zastosowanie obrazu (zdjęcia) jako tła:

<BODY background=”nazwa_pliku”>, na przykład

Hiperłącze do innego dokumentu:

<AHREF=”inny_dokument”>-element, który należy kliknąć , aby wyświetlićinny document.</A>

Czcionka pogrubiona

Podkreślenie

Czcionka pochylona

Zmiana koloru czcionki:

Zmiana kroju czcionki

Zmina wielkości czcionki

czcionki”>

Ćwiczenie 1

Utwórz w HTML-u stronę. Wstaw tytuł i pasującą do tytułu grafikę . Zapisz stronę jako WWW

Ćwiczenie 2

Do utworzonej w poprzednim ćwiczeniu strony dołącz listę wypunktowaną

Odpowiedz na pytania

Co to jest język HTML?
W jakich edytorach można tworzyć strony WWW
Jak zapisujemy utworzoną stronę w języku HTML?

Szerokość marginesów

gdzie x1 oznacza szerokość lewego marginesu, x2-szerokość prawego marginesu, y1-wysokość górnego marginesu, y2-wysokość dolnego marginesu ( wszystkie wymiary w pikselach ).

<html>
<head>
<META HTTP-EUQIV=Content =text/html;charset=iso-8859-2">
<title>Page of my city</title>
</head>
<body bgcolor=cc9900>
<H2 ALIGN ="center">Płock moje miasto.</h2>
<HR width="570" size="4" color="white">
<marquee behavior="slide">WeLcOmE</marquee>
<p align="center">
<img src="/plock.jpeg"width="200"height="130"></p>
<H3 align="left">Nasze miasto jest:</H3>
<ol>
<li> Pięknie położone
<li> Zabytkowe
<li> Przemysłowe
</ol>
<a href="/strona2.html">Ogladaj dalej</a>
</body>
</html>

Tworzymy ankietę

<html>
<body bgcolor="#99CCCC">
<font face="Comic Sans MS" size="6" color="blue">
A N K I E T A
</font>
<form enctype="text/plain" action="mailto:misiek@o2.pl" subject="Ankieta"
method="post">
<font face="Comic Sans MS" size="3">
<input type="text" name="kod" size="6">  kod <br>
<input type="text" name="miejscowość">  miejscowość <br>
<input type="text" name="ulica" size="26">  ulica <br>
<input type="text" name="nazwisko" size="35">  nazwisko i imię <br>
<input type="text" name="e-mail" size="25">  e-mail <br>
<input type="text" name="telefon" size="15">  telefon <br>
<br>
<b>Ile masz lat?</b>
10 - 17<input type="radio" name="wiek" value="10 - 17"><br>
18 - 25<input type="radio" name="wiek" value="18 - 25"><br>
26 - 35<input type="radio" name="wiek" value="26 - 35"><br>
36 - -<input type="radio" name="wiek" value="36 - -"><br>
<b>Jakie programy umiesz obsługiwać ?</b>
<br>
<input type="checkbox value="tak" name="MS WORD"> MS WORD<br>
<input type="checkbox value="tak" name="MS EXEL"> MS EXEL<br>
<input type="checkbox value="tak" name="MS PowerPOINT"> MS PowerPOINT<br>
<input type="checkbox value="tak" name="MS ACCESS"> MS ACCESS<br>
<input type="checkbox value="tak" name="PAINT"> PAINT<br>
<input type="checkbox value="tak" name="CorelDRAW"> CorelDRAW<br>
<input type="checkbox value="tak" name="Język HTML"> Język HTML
<br><br>
<b>Najbardziej nie lubię :</b>
<br>
<select name="nie lubię" size="1">
<option value="zupy mlecznej"> zupy mlecznej </option>
<option value="arogancji"> arogancji </option>
<option value="wulgarności"> wulgarności </option>
</select><br<br>
<b>Co byś dodał/dodała do naszej strony </b>
<br>
<font size="2" font face="arial">
Wpisz swoje uwagi w poniższym polu
<br>
<textarea name="opinia" rows="5" cols="50" wrap=physical>
</textarea>
<br>
<p>
<input type="submit" value="Wyślij"> 
<input type="reset" value="Wyczyść">
</form>
</body>
</html>

obrazkowe tło strony

lub

tabele

muzyka, dźwięki

<html>
<body bgcolor="#99CCCC">
<bgsound src="/nazwa pliku.mp3" loop="infinite">
<font face="tahoma" size="7" color="red">
A MUZYKA GRA...
</body>
</html>

wstawianie piku video

<html>
<body bgcolor="#99CCCC">
<center>
<font face="comic sans ms" size="7" color="blue">
nazwa pliku
<br><br>
<embed src="/bezpiecznym_w sieci_byc.wmv">
</body>
</html>

padający śnieg

<SCRIPT type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
for this script and many more
*/

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximum-size of your snowflakes
var snowmaxsize=22

// Set the minimal-size of your snowflakes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

/*
// * NO CONFIGURATION BELOW HERE *
*/

// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}

function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy
}
movesnow()
}

function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy

if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
</SCRIPT>

1. Szkielet strony

Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce.

Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony.

Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.

W praktyce wygląda to następująco:

Informacje o dokumencie, łącznie z tytułem

</HEAD>
<BODY>

Treść dokumentu - tekst, grafika, odsyłacze itp.

</BODY>
</HTML>

2. Tytuł strony

Najważniejszym elementem jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki. Tytułu nie należy mylić z pierwszym nagłówkiem strony, aczkolwiek oba te elementy mogą mieć oczywiście tę samą treść

3. Parametry znacznika BODY

Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy żółty

parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła.

4. Atrybuty czcionek

<B> Czcionka pogrubiona </B>

<I> Czcionka pochylona </I>

<U> Czcionka podkreślona </U>

<TT> Czcionka o stałej szerokości znaku</TT>

<STRIKE> Czcionka przekreślona</STRIKE>

<SUP> Superskrypt (indeks górny) </SUP>

<SUB> Subskrypt (indeks dolny) </SUB>

<BIG> Duża czcionka (+1 punkt)</BIG>

<SMALL> Mała czcionka (-1 punkt)</SMALL>

Kolory czcionki

Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru.

Składnia: <FONT COLOR="nazwa_koloru"> </FONT>

Nazwa koloru:

black - czarny

olive -oliwkowy

red - czerwony

blue - niebieski

navy - morski

gray - szary

white - biały

orange - pomarańczowy

lime - jasnozielony

fuchsia - różowy

green - zielony

purple - purpurowy

silver - srebrny

yellow - żółty

aqua - morski

Wielkość czcionki

Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników

Czcionka normalna ma przypisaną wartość 3 (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.

Możemy także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość.

Czcionka bazowa

Czcionka ma domyślną wielkość 3, ale w dowolnym momencie możemy ją zmienić za pomocą polecenia:

Oznacza ono, że od momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości.

Zmiana kroju czcionki

Jeszcze jedną możliwość urozmaicenia dokumentu (nie mieszczącą się jednak w zakresie HTML 3.2) daje polecenie

Pozwala ono zmienić krój czcionki dla danego dokumentu

5. Tytuły

pierwszego stopnia: <H1> </H1>

drugiego stopnia: <H2> </H2>

trzeciego stopnia: <H3> </H3>

czwartego stopnia: <H4> </H4>

piątego stopnia: <H5> </H5>

szóstego stopnia: <H6> </H6>

Wyrównywanie tytułów

sposób: LEFT, RIGHT, CENTER

6. Znacznik akapitu

<P> - powoduje przejście do nowej linii rozpoczynając nowy akapit

Wyrównywanie akapitów:

<P ALIGN=LEFT>…. </P> - do lewej

<P ALIGN=RIGHT>…</P> - do prawej

<P ALIGN=CENTER> </P> - do środka

Znacznik końca wiersza<BR> - powoduje przełamanie wiersza be znaku końca akapitu

Blokada przełamania <NOBR>... </NOBR>

Niekiedy zdarza się, że jakiś tekst powinien być wyświetlany w jednym wierszu. Aby zapobiec przełamaniu wiersza, możemy objąć tekst poleceniem <NOBR> </NOBR>.

Należy je stosować ostrożnie, gdyż przeglądarka jest wtedy zmuszona do sztucznego poszerzania okna. Gdyby tekst był długi, użytkownik byłby zmuszony do kłopotliwego przewijania okna wszerz, aby przeczytać całą zawartość wiersza.

7. Pozioma linia

<HR>

Linia może być pozbawiona cieniowania - <HR NOSHADE>

Linii możemy nadać dowolną grubość - np.: <HR SIZE=5>

Linia może mieć określoną długość w pikselach - np:<HR WIDTH=300>

lub w procencie szerokości strony - <HR WIDTH=50%>

<HR ALIGN=center> - linia wyrównana do środka

<HR ALIGN=left> - do lewej

<HR ALIGN=right> - do prawej

<hr color="nazwa_koloru"> - ustalenie koloru linii

8. Blok preformatowany

Tekst preformatowany, wyświetlany czcionką monotypiczną (o stałej szerokości znaku)

pozwala wprowadzać dodatkowe spacje, uwzględnia także punkty tabulacji, i znaki końca akapitu:

a1 a2 a3 a4

b1 b2 b3 b4

9. Wykazy

nieuporządkowany - służy do sporządzenia wykazu nienumerowanego

<UL>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</UL>

Lista nieuporządkowana może dodatkowo zawierać definicję graficznego symbolu:
<UL TYPE=disc> - koło;

<UL TYPE=circle> - okrąg;
<UL TYPE=square> - kwadrat

uporządkowany - służy do sporządzenia wykazu numerowanego

<OL>

<LI>Pierwszy punkt

<LI>Drugi punkt

<LI>Trzeci punkt

</OL>

Parametr START=x pozwala rozpocząć numerowanie listy od x: <OL START=x>

Parametr TYPE=n pozwala określić typ numerowania listy:

<OL TYPE=A> numerowanie według wielkich liter

<OL TYPE=a> numerowanie według małych liter

<OL TYPE=I> numerowanie według wielkich liczebników rzymskich

<OL TYPE=i> numerowanie według małych liczebników rzymskich

<OL TYPE=1> numerowanie według liczebników arabskich

10. Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać:

IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (żródło).

Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka.

Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość).

Na przykład:
<IMG SRC="tucows.gif" HEIGHT=150>
<IMG SRC="tucows.gif" WIDTH=200>

Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli:

Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu:
<IMG SRC="tucows.gif" HSPACE=50>
<IMG SRC="tucows.gif" VSPACE=50>

Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu.

Konstrukcja ma postać <IMG SRC="obrazek" ALIGN=abc>

ALIGN=left; ALIGN=right; ALIGN=top; ALIGN=middle

11. Odsyłacze
Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci:

<A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A>

Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony.

Do jakich miejsc możemy się odwoływać?

Do stron WWW, których charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć postać:

<A HREF="http://host.domena>Tekst</A>

np: <A HREF="http://www.onet.pl>ONET</A>

Zauważmy od razu, że taki adres powoduje wywołanie głównej (domyślnej) strony WWW. Nazwy strony nie podawaliśmy. Dlatego zaleca się, aby strona główna serwisu była plikiem o nazwie index.htm lub index.html.

Do pliku tekstowego (*.TXT):

np: <A HREF="czytaj.txt">CZYTAJ</A>
Plik czytaj.txt powinien się znajdować w katalogu bieżącym

Do pliku graficznego (*.GIF):

np: <A HREF="chomik.gif">CHOMIK</A>
Plik chomik.gif powinien się znajdować w katalogu bieżącym

Do poczty e-mail:

Często stosowanym odsyłaczem jest konstrukcja pozwalająca czytelnikowi strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczną. Jej konstrukcja wygląda następująco:

<A HREF=mailto:adres e-mail>Tutaj kliknij</A>

Przykładowa zachęta do wysłania listu mogłaby wyglądać następująco:

<A HREF=mailto:j_kowalski@poczta.interia.pll>napisz do mnie</A>

Do FTP

Równie często stosowaną usługą jest FTP, który pozwala sięgnąć do serwera FTP w poszukiwaniu jakichś plików.Odpowiednia konstrukcja wskazująca na FTP ma postać:

<A HREF=ftp://ftp.adres>Jakiś tekst</A>

Gdybyśmy chcieli sięgnąć do serwera Wydawnictwa Lupus, możemy podać odsyłacz:

<A HREF=ftp://ftp.polbox.com.pl/library/!lupus>Tutaj znajdziesz listingi Dla Praktyków</A>

12. Ogólne ramy tabeli

Definicja tabeli musi być umieszczona między tymi dwoma znacznikami. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

Wiersz tabeli

Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu:

<TABLE>

</TABLE>

Komórka w wierszu

HTML i CSS

​

Programista od zera. Czego trzeba się nauczyć by robić strony. #1

​

Szybki kurs tworzenia stron internetowych #1 - Podstawy HTML5

​

Szybki kurs tworzenia stron internetowych #2 - Struktura HTML5

​

Szybki kurs tworzenia stron internetowych #3 - Wprowadzenie do CSS3

​

Szybki kurs tworzenia stron internetowych #4 - Tworzenie menu strony

​

Grafika na strony internetowe

Rozmiar grafiki

Nazwy plików

Płock moje miasto

Płock moje miasto

Płock moje miasto

Płock moje miasto

Płock moje miasto

Płock moje miasto

1. Szkielet strony

2. Tytuł strony

3. Parametry znacznika BODY

4. Atrybuty czcionek

Kolory czcionki

Wielkość czcionki

Czcionka bazowa

Zmiana kroju czcionki

5. Tytuły

6. Znacznik akapitu

<P> - powoduje przejście do nowej linii rozpoczynając nowy akapit

Wyrównywanie akapitów:

7. Pozioma linia

8. Blok preformatowany

10. Wstawianie grafiki do dokumentu

Do FTP

12. Ogólne ramy tabeli

Wiersz tabeli