HTML4 – treść i tekst


Poznaliście już budowę nagłówka strony: <head>

Teraz zajmiemy się sekcją <body>.

Pomiędzy tagami <body></body> umieszczamy wszystko co tworzy naszą stronę. Za chwilę poznacie tagi formatujące tą zawartość.

Pamiętajcie że sekcja <body> występuje RAZ na stronie, jeżeli chcecie użyć poniższych właściwości dodawajcie je kolejno po spacji.

USTAWIENIA GLOBALNE

czyli jednakowe dla całej strony, np:

  • Kolor tekstu na stronie
      <body text="kolor">...</body>

kolor wpisujemy po angielsku lub w HEX. Was obowiązuje nazewnictwo HEX. Paleta kolorów: LINK

  • Kolor tła
      <body bgcolor="kolor">...</body>
  • Tło obrazkowe
<body background="ścieżka dostępu do obrazka">...</body>
lub
<body background="ścieżka dostępu do obrazka" bgproperties="fixed">...</body>

obrazek powinien znajdować się w tym samym miejscu co index.html

  • Kolor odsyłaczy
<body link="kolor nowych" vlink="kolor odwiedzonych" alink="kolor aktywnych">...</body>
kolor nowych

Kolor odsyłaczy które nie zostały jeszcze użyte
kolor odwiedzonych
Kolor odsyłaczy, które zostały już użyte
kolor aktywnych
Kolor aktywnego odsyłacza, czyli takiego który właśnie został użyty
  •  Szerokość marginesów

Internet Explorer (również Opera 7 i nowsze wersje przeglądarek na silniku Gecko, czyli Netscape/Mozilla/Firefox):

<body leftmargin="x1" rightmargin="x2" topmargin="y1" bottommargin="y2">...</body>
x1
Szerokość lewego marginesu
x2
Szerokość prawego marginesu
y1
Wysokość górnego marginesu
y2
Wysokość dolnego marginesu

Netscape/Mozilla/Firefox:

<body marginwidth="x" marginheight="y">...</body>
 x
Szerokość poziomego marginesu (lewy = prawy = x)
y
Wysokość pionowego marginesu (górny = dolny = y)

Polecenie to pozwala ustalić szerokości marginesów na stronie, czyli odstępów tekstu od poszczególnych krawędzi strony.

  •   Kolor suwaków

(tylko Internet Explorer 5.5 lub nowszy oraz Opera 7 przy niestandardowych ustawieniach!)

<html style="scrollbar-base-color: kolor">...</html>
 Polecenie to pozwala zmienić kolor suwaków na stronie, na której się znajduje. Dzięki niemu można dopasować ich barwę do koloru tła strony.

 

FORMATOWANIE TEKSTU

Umieszczone tutaj tagi wykorzystujemy pomiędzy znacznikami <body> tutaj umieszczamy tagi </body>

Proszę pamiętać o zamykaniu tagów!

 

<p> akapit </p>

atrybuty akapitu: align, czyli wyrównanie w poziomie, może przyjmować wartości: left, right, center, justify

<p align="right"> akapit wyrównany do prawej </p>

 

<hn> nagłówek </hn>

„n” może przyjmować wartości od 1 do 6

atrybuty nagłówka: align, czyli wyrównanie w poziomie, może przyjmować wartości: left, right, center, justify

<h1 align="left"> nagłówek wyrównany do lewej </h1>

 

 

<div> blok </div>

atrybuty bloku: align, czyli wyrównanie w poziomie, może przyjmować wartości: left, right, center, justify

<div align="justify"> wyjustowany tekst w bloku </div>

 

<center> wyśrodkowanie</center>

<center> tekst wyśrodkowany </center>

 

</ br> koniec linii

koniec linii </ br>

 

<nobr> blokada przełamania wiersza </nobr>

<nobr> ten tekst pozostanie w jednej linii </nobr>

 

<b> pogrubienie </b>

<b> tekst pogrubiony </b>

 

<i> pochylenie </i>

<i> tekst pochylony </i>

 

<p> podkreślenie </p>

<u> tekst podkreślony </u>

 

<s> przekreślenie </s>

<s> tekst przekreślony </s>

 

<blink> migotanie </blink>

<blink> tekst migoczący </blink>

 

<em> wyróżnienie słabe </em>

<em> emfaza </em>

 

<strong> wyróżnienie mocne </strong>

<strong> tekst mocno wyróżniony </strong>

<sup> indeks górny </sup>

<sup> indeks górny </sup>

<sub> indeks dolny </sub>

<sub> indeks dolny </sub>

<font> czcionka </font>

atrybuty czcionki: size – rozmiar, color – kolor, face – typ czcionki np: Times New Roman

<font size="n" color="kolor" face="rodzaj1, rodzaj2, rodzaj3...">...</font>

<pre> tekst preformatowany</pre>

<pre> czcionka monotypiczna </pre>

<code> kod komputerowy </code>

<code> kod komputerowy </code>

<kbd> klawiatura </kbd>

<kbd> klawiatura </kbd>

<tt> dalekopis </tt>

<tt> dalekkopis </tt>

<samp> przykład </samp>

<samp> przyklad </samp>

<var> zmienna </var>

<var> zmienna </var>

cytat

<cite> odniesienie do źródła </cite>
<q> krótki cytat </q>
<blockquote> blok cytowany </blockquote>

<address> adres </address>

<address> adres </address>

zmiany

<ins> treść dodana </ins>
<del> treść usunięta </del>

skrót

<abbr> skrót </abbr>
<acronym> akronim </acronym>

<dfn> definicja </dfn>

<dfn> definicja </dfn>

słownik

<dl>
<dt>Pierwszy termin</dt><dd>Definicja pierwszego terminu</dd>
<dt>Drugi termin</dt><dd>Definicja drugiego terminu</dd>
<dt>Trzeci termin</dt><dd>Definicja trzeciego terminu</dd>
</dl>

wykazy

wypunktowanie
<ul type="rodzaj">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

 gdzie jako „rodzaj” należy podać:

  • disc” – (domyślny) – koło
  • circle” – okrąg
  • square” – wypełniony kwadrat
numerowanie
<ol type="rodzaj numeracji">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

<ol start="n"> - podanie numeru początkowego
<li value="n">Punkt drugi</li> możliwość zmiany numeracji w trakcie

 gdzie jako „rodzaj numeracji” należy podać:

  • 1” (domyślny) – numeracja według liczb arabskich
  • I” – według dużych liczb rzymskich
  • i” – według małych liczb rzymskich
  • a” – według małych liter
  • A” – według dużych liter

:

 

pozioma linia </ hr>

atrybuty linii: align, czyli wyrównanie w poziomie, może przyjmować wartości: left, right, center

<hr /> - zwykła
<hr noshade="noshade" /> - pozbawiona cieniowania
<hr size="y" /> o określonej grubości
<hr width="x" /> lub <hr width="x%" /> określonej szerokości
<hr color="kolor" /> zadanego koloru

<fieldset> obramowanie </fieldset>

<fieldset> obramowanie </fieldset>

<!– komentarz –>

<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->