html od podstaw

Divy

Super User
Kategoria: Bez kategorii

Do budowy sekcji możemy użyć elementu blokowego <div> (ang. division – oddział, wydział, sekcja). Element ten nazywany jest również box’em (pudełkiem), albo kontenerem (ang. container, contain – zawierać w sobie), z tego względu, że zawiera on w sobie inne elementy.

<div></div>

listy wypunktowane i numerowane

Super User
Kategoria: Bez kategorii

Widok w kodzie HTML:

 <ul>
    <li>Królestwa Północy</li>
    <li>Scoia'tael</li>
    <li>Cesarstwo Nilfgaardu</li>
    <li>Skellige</li>
 </ul>

Rezultat w przeglądarce:

  • Królestwa Północy
  • Scoia'tael
  • Cesarstwo Nilfgaardu
  • Skellige

  • Widok w kodzie HTML:

     <ul>
        <li>Królestwa Północy</li>
        <li>Scoia'tael</li>
        <li>Cesarstwo Nilfgaardu</li>
        <li>Skellige</li>
     </ul>

    Rezultat w przeglądarce:

    • Królestwa Północy
    • Scoia'tael
    • Cesarstwo Nilfgaardu
    • Skellige

podstawowe znaczniki

Super User
Kategoria: Bez kategorii

Strukturę dokumentu HTML możemy przedstawić następujšco:

<HTML>

    <HEAD>

        <TITLE>Tytuł strony</TITLE>

    </HEAD>

    <BODY>

    </BODY>

</HTML>

W niej zagnieżdżać będziemy pozostałe znaczniki.

Wiersze i akapity

Każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "zwykły tekst". Gdybyœmy jednak wpisali dłuższy fragment tekstu, rozdzielajšc w edytorze akapity za pomocš klawisza Enter, przeglšdarka zignoruje znaki końca wierszy i akapitów i wyœwietli jednolity blok tekstu. Aby rozdzielić akapity, należy się posłużyć się znacznikiem <P> (P = paragraph), który wstawi interlinie między poszczególne fragmenty tekstu. Znacznikiem zamykajšcym jest </P>.

Przykład:

<P>Treœć pierwszego akapitu</P>

<P>Treœć drugiego akapitu</P>

Aby przełamać tekst, nie wprowadzajšc przy tym znaku końca akapitu, możemy zastosować pojedynczy znacznik <BR>, który przenosi tekst o jeden wiersz w dół nie wprowadzajšc dodatkowej interlinii.

Pierwszy wiersz<BR>
Drugi wiersz<BR>
Trzeci wiersz<BR>

Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między paragrafami. Znacznik <BR> nie występuje w parze ze znacznikiem zamykajšcym.

Tytuły

W dokumentach często wprowadzamy nagłówki, tytuły. Służy do tego para znaczników <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (jest ich szeœć). Przykładowo polecenie wprowadzajšce tytuł stopnia pierwszego składa się ze znacznika otwierajšcego <H1> i zamykajšcego </H1>. Im wyższy numer nagłówka tym mniejsza czcionka. .

Przykładowy formularz

Super User
Kategoria: Bez kategorii 
<form action="mailto:twój_adres_poczty@domena" method="post" enctype="text/plain"><div>
<!-- Podstawowe pole tekstowe -->
<input name="Imię">Podaj swoje imię<br>
<input name="Nazwisko">Podaj swoje nazwisko
<!-- Pole typu RADIO -->
<p>Podaj swoją płeć:</p>
<input type="radio" name="Płeć" value="Kobieta">Kobieta
<input type="radio" name="Płeć" value="Mężczyzna">Mężczyzna
<!-- Pole typu RADIO -->
<p>Ile masz lat?</p>
<input type="radio" name="Wiek" value="mniej niż 15">mniej niż 15<br>
<input type="radio" name="Wiek" value="15-19">15-19<br>
<input type="radio" name="Wiek" value="20-29">20-29<br>
<input type="radio" name="Wiek" value="30-39">30-39<br>
<input type="radio" name="Wiek" value="40-60">40-60<br>
<input type="radio" name="Wiek" value="więcej niż 60">więcej niż 60 
<!-- Pole typu CHECKBOX -->
<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p>
<input type="checkbox" name="Muzyka" value="Rock">Rock<br>
<input type="checkbox" name="Muzyka" value="Heavy Metal">Heavy Metal<br>
<input type="checkbox" name="Muzyka" value="Pop">Pop<br>
<input type="checkbox" name="Muzyka" value="Techno">Techno<br>
<input type="checkbox" name="Muzyka" value="Muzyka poważna">Muzyka poważna<br>
<input type="checkbox" name="Muzyka" value="Inna">Inna (podaj jaka):
<input name="Muzyka">
<!-- Lista rozwijalna (typ podstawowy) z zaznaczoną opcją domyślną -->
<p>Jakiej przeglądarki internetowej używasz?</p>
<select name="Przeglądarka">
	<option selected>Internet Explorer</option>
	<option>Netscape</option>
	<option>Opera</option>
	<option>Mozilla</option>
	<option>Inna</option>
</select>
<!-- Lista rozwijalna (typ rozszerzony) z zaznaczoną opcją domyślną i zmniejszoną wysokością -->
<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p>
<select name="System operacyjny" multiple size="3">
	<option selected>Dos</option>
	<option>Windows</option>
	<option>Linux</option>
	<option>Inny</option>
</select>
<!-- Pole komentarza (o powiększonych rozmiarach oraz z tekstem domyślnym) -->
<p>Podaj swój komentarz:</p>
<textarea name="Komentarz" cols="50" rows="10">Proszę, wpisz tutaj jakiś komentarz...</textarea>
<br><br><br>
<!-- Przycisk WYŚLIJ -->
<input type="submit" value="Wyślij formularz">
<!-- Przycisk WYCZYŚĆ DANE -->
<input type="reset" value="Wyczyść dane">
</div></form>

Struktura dokumentu

Super User
Kategoria: Bez kategorii 
<!DOCTYPE HTML>
<html lang="pl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Tytuł strony</title>
</head>

<body>

<header></header>

<section>
<p>To jest nasza nowa strona internetowa HTML5 CSS3.</p>
</section>

<footer></footer>

</body>

</html>