podstawy html

Technologia informacyjna, podstawy html

.text {FONT: 10pt Tahoma, "Arial Ce", arial, helvetica, san-serif; COLOR: black; LETTER-SPACING: 0px}
.lewa_kolumna {FONT: bold 10pt Tahoma, "Arial", arial, helvetica, san-serif; COLOR: black; LETTER-SPACING: 0px}
.texel {FONT: bold 10pt Verdana, Arial; color: black; background-color: yellow; LETTER-SPACING: 0px}
.siwy {FONT: 10pt Verdana, Arial; color: black; background-color: #cccccc; LETTER-SPACING: 0px}
.textb {FONT: bold 8pt Tahoma, "Arial", arial, helvetica, san-serif; COLOR: #eeeeee; LETTER-SPACING: 0px}
.stopka {FONT: 8pt Tahoma, "Arial", arial, helvetica, san-serif; COLOR: #333333; LETTER-SPACING: 0px; text-align: center}
.text_darkb {FONT: bold 8pt Tahoma, "Arial", arial, helvetica, san-serif; COLOR: #333333; LETTER-SPACING: 0px}
.text_head {FONT: bold 10pt "Arial", arial, helvetica, san-serif; COLOR: black; LETTER-SPACING: 0px}
.text_H2 {FONT: bold 15 pt, Verdana, helvetica, san-serif; COLOR: black; font-style: bold; LETTER-SPACING: 0px}
.text_head2 {FONT: bold 10pt "Arial", arial, helvetica, san-serif; COLOR: Red; LETTER-SPACING: 0px}
.menu_gorne {FONT: bold 8pt Tahoma, "Arial", arial, helvetica, san-serif; font-style: normal; COLOR: white; LETTER-SPACING: 0px; text-align: left}
.menu_dolne {FONT: bold 8pt Tahoma, "Arial", arial, helvetica, san-serif; font-style: normal; COLOR: #e5e5e5; LETTER-SPACING: 0px; text-align: center}
A {text-decoration: none;}
A:link {color: #333399; text-decoration: none; font-style: bold;}
A:visited {color: #333399; text-decoration: none}
A:alink {color: #333399; text-decoration: none}
A:hover {color: #333399; text-decoration: none; background-color: #f4f4f4;}

Najprostsza strona WWW
POJĘCIA: znaczniki, P, DIV, SPAN, H1, STYLE, WIDTH, COLOR ALIGN BACKGROUND FONT-SIZE FONT-WEIGHT FONT-FAMILY

Przy tworzeniu strony a następnie umieszczaniu plików na serwerze
należy pamiętać
o sprawdzeniu małych i dużych liter w nazwach !!
Np. plik o nazwie "obrazek.JPG" nie wyświetli się nam na stronie jeżeli w pliku
HTML
był umieszczony jako "obrazek.jpg"

NAJPROSTSZA STRONA

Wykonajmy najprostszą stronę. Potrzebny jest nam prosty edytor typu notes. Otwieramy nowy dokument i zapisujemy go pod dowolną nazwą, ale z rozszerzeniem
htm albo html np. strona.html

Przykład 1.
W pliku wystarczy wpisać:

<html>
<body>
Pomiędzy znacznikami "body" umieszczona
jest właściwa treść tekstowa strony.
</body>
</html>

Po wyświetleniu pliku np. w Internet Explorer nasza strona wyświetli się w następującej postaci:

Pomiędzy znacznikami "body" umieszczona
jest właściwa treść tekstowa strony.

Po co te dodatki na początku strony?
Elementy zamykane w takich ostrych nawiasach służą do ustalenia sposobu
wyświetlania strony, do wybierania czcionek, służą także do oznaczenia
części (bloków) strony. Mówi się o nich jako o znacznikach.
I tak:
<html>
znacznik oznacza rozpoczęcie części pisanej w języku html
</html> znacznik kończy część strony pisaną w
html
<body> znacznik oznacza rozpoczęcie
właściwej zawartości strony
</body> znacznik kończący zawartość strony
Jak widać znaczniki takie występują parami <znacznik> i </znacznik> czyli znak otwierający jakąś część i drugi zamykający tę część.
Gdzie tutaj są jakieś elementy języka html?
Faktycznie nie wpisaliśmy innych znaczników oprócz znaczników html i body
oznaczających części strony. Podam teraz kilka prostych znaczników służących do
formatowania strony. Znaczniki możemy pisać małymi lub wielkimi literami, możemy
pisać tekst jednym ciągiem, znaków ENTER edytor i przeglądarka nie bierze pod
uwagę, a wielokrotne spacje są traktowane jako jedna
spacja (oprócz
znacznika pre).

PROSTE ZNACZNIKI:
b, i, u, itd.Podstawy formatowania i abecadło języka html:

<b>Tekst wytłuszczony</b> (po angielsku
bold)
<i>Tekst pochylony</i> (po angielsku
italic, czyli pismo odręczne, włoskie, pochylone, kursywa)
<u>Tekst podkreślony</u> (po angielsku underline)
<strong>Wyróżniony</strong> (mocny-strong, mocny akcent, tekst wyróżniony)
<H1>Tytuł pierwszy H1</H1> tytuł pierwszego poziomu (od Head - czyli nagłówek)
<H2>Tytuł drugi H2</H2> tytuł drugiego poziomu, pisany mniejszą czcionką
<H3>Tytuł trzeci H3</H3> tytuł trzeciego poziomu, pisany mniejszą czcionką

<em>Zacytowany fragment</em> Zacytowany fragment, czyjaś wypowiedź, tytuły książek itp.
<hr> Linia (nie polecana!)
Koniec wiersza<br>i przejście do następnego

<p>Paragraf, czyli
większy fragment tekstu, nazywany czasem akapitem. Na początku i na
końcu paragrafu wstawiany jest pusty wiersz</p>
Jak widać, część znaczników występuje pojedynczo np. <br> (koniec wiersza,
linia), bez pary otwierającej i zamykającej.
Część, jak pogrubienie,
pochylenie czcionki i inne znaczniki stosowane do bloku tekstu zawsze
występują parami.
INNE ZNAKI:
  niełamliwa spacja służąca np. do łączenia nierozdzielanych wyrazów np. Agnieszka Borkowska.
Po wspisaniu znaczników © ® ™ otrzymamy symbole © ® ™

Przykład 2.
A teraz ten sam przykład z zastosowaniem poznanych znaczników:

<html>
<body>
<H2>Strona startowa</H2> Cześć, witam na tej stronie!<br>Mógłbym zostać twoim
<b>nauczycielem</b> Technologii Informacyjnej.<br>Ta strona
zawiera tekst wprowadzający<br>oraz obrazek stworzony wektorowo a zapisany
jako bitmapa >>
<img border="0" src="xaraGlobe2.JPG" >
<br>Mam nadzieję , że to wprowadzenie <i>do HTML</i>było
przydatne
</body>
</html>

Wyświetli się on w następujący sposób:

Strona startowa
Cześć, witam na tej stronie!Mógłbym zostać twoim nauczycielem
Technologii Informacyjnej.Ta strona zawiera tekst wprowadzający.
oraz obrazek stworzony wektorowo a zapisany jako bitmapa >>

Mam
nadzieję , że to wprowadzenie do HTML było przydatne.

ZNACZNIKI BLOKU
<P> </P>
Paragraf. Na początku wstawiany jest pusty wiersz. Na końcu, po paragrafie, też jest wstawiany pusty wiersz.

<DIV> </DIV>
Blok Div służy do łączenia elementów. Ten blok kończy się przejściem do
następnego wiersza, ale nie wstawia pustego wiersza "pod" jak w
znaczniku <P>.

<SPAN> </SPAN>
Blok służący do zmiany cech elementów. Nie wstawia żadnych pustych
wierszy, nie przenosi kursora do następnego wiersza. (więcej w stylach).

FORMATOWANIE BLOKU
WIDTH
Element służy do ustalania szerokości, np. szerokości linii.
<HR WIDTH=100> linia o szerokości 100 pikseli

<HR WIDTH=5%> linia o szerokości 5% szerokości strony

ALIGN
Wyrównywanie elementów np. wyrównanie linii do prawej krawędzi strony
<HR WIDTH=20% ALIGN=right> linia o szerokości 200 pikseli wyrównana do prawej

COLOR
Kolor elementu np. linii
<HR SIZE=20 WIDTH=150 ALIGN=left COLOR=green> zielona linia o wysokości 20 pikseli szerokości 150 pikseli wyrównana do lewej

PRZYKŁAD ZASTOSOWANIA BLOKU DO FORMATOWANIA TEKSTU

Style
<P STYLE="font-family: verdana; font-size: 18pt; font-weight:
lighter; background: yellow; color: red">Przykład zastosowania stylu
do zmiany własności tekstu.</P>.

Przykład zastosowania stylu do zmiany własności tekstu.

COLOR
Zmiana koloru tekstu
Do tekstu najlepiej stosować znacznik STYLE. Pozwala on określić wszystkie cechy tekstu
<P STYLE="COLOR=red"> Blok tekstu koloru czerwonego </P>
Blok tekstu koloru czerwonego

<P STYLE="COLOR: blue; FONT-SIZE: 20pt; BACKGROUND: black">Tekst niebieski na czarnym, rozmiar 20 punktów</P>

Tekst niebieski na czarnym, rozmiar 20 punktów
UWAGA:
Zobacz, że w stylu określa się elementy pisząc wartości po znaku dwukropka, znaczniki oddzielamy średnikiem.

ELEMENTY FORMATOWANIA W ZNACZNIKU STYLE

FONT-SIZE
FONT-SIZE określa rozmiar pisma
Przykład:
Tym razem zastosujmy blok DIV.
<DIV STYLE="FONT-SIZE: 8pt;">Rozmiar 8 punktów</DIV>
Rozmiar 8 punktów
Rozmiar 10 punktów
Rozmiar 15 punktów

COLOR
COLOR określa kolor pisma
Przykład:
Tym razem ze znacznikiem SPAN (nie wstawia znaku końca wiersza)
<SPAN STYLE="FONT-SIZE:12; COLOR: brown; ">Tekst brązowy</SPAN>
Tekst brązowy

Przykład innych kolorów:

Black (Czarny) Gray (Szary) Silver (Srebrny) Green (Zieleń)
Blue (Niebieski) Navy (Niebieski marynarski) Yellow (Żółty)

WIDTH
WIDTH określa szerokość
Przykład:
Określmy szerokość bloku
<SPAN STYLE="WIDTH: 200">Dłuższy fragment tekstu wymagający przełamania</SPAN>
Dłuższy fragment tekstu wymagający przełamania, tutaj wyświetlany tylko w bloku o szerokości 200 pikseli.

BACKGROUND
BACKGROUND określa kolor tła
Przykład:
<SPAN STYLE="BACKGROUND: red; COLOR:
white;"> Fragment tekstu w kolorze białym na czerwony
tle. </SPAN>
Fragment tekstu w kolorze białym na czerwony tle.

Jeżeli chcecie żeby tekst nie rozpoczynał się razem z tłem, to wstawcie przed tekstem i po tekście twardą spację  

FONT-WEIGHT
FONT-WEIGHT określa wagę pisma (ciężkie pismo i lekkie)
Przykład:
<SPAN STYLE="FONT-WEIGHT: normal;">Tekst normalny.</SPAN>
Abecadło z pieca... Tekst normalny. normal
Abecadło z pieca... Tekst lekki. lighter
Abecadło z pieca... Tekst ciężki. bold
Abecadło z pieca... Tekst cięższy. bolder

FONT-FAMILY
FONT-FAMILY określa rodzinę czcionki
Przykład:
<SPAN STYLE="FONT-FAMILY: Times;">Tekst pisany czcionką Times.</SPAN>
Tekst pisany czcionką Times
Tekst pisany czcionką Arial
Tekst pisany czcionką Courier
Tekst pisany czcionką Verdana

UWAGA:
Tekst jest pisany jednakową czcionką i tego samego rozmiaru aż do napotkania
kolejnego znacznika
zmieniającego rozmiar lub rodzaj czcionki.

POJĘCIA: znaczniki, P, DIV, SPAN, H1, STYLE, WIDTH, COLOR ALIGN BACKGROUND FONT-SIZE FONT-WEIGHT FONT-FAMILY

Wyszukiwarka

Podobne podstrony:
Podstawy HTML
podstawy html czesc II
podstawy html czesc I
Podstawowe texty HTML
HTML Podstawy
Wyk6 ORBITA GPS Podstawowe informacje
Podstawowe informacje o Rybnie
3 podstawy teorii stanu naprezenia, prawo hookea
zestawy cwiczen przygotowane na podstawie programu Mistrz Klawia 6
html
podstaw uniw

więcej podobnych podstron