iuiuh

Nowoczesne medium, porządkuje świat i dostarcza angażujące informacje,
rozrywkę i usługi w czasie rzeczywistym.
Przewodnik Polaków w wirtualnym świecie.

img - image - obrazek
src - source - źródło
alt - alternative - alternatywa
width - szerokość
height - wysokość

Jak nazywać pliki .html?
Czemu główny plik html nazywa się index.html?
Czemu podpunkty z tagiem ‹br>
Dlaczego warto byłoby zastosować tag <ol>?
lista uporządkowana tag <ol>
lista nieuporządkowana tag <ul>

ul>li*5czyli polecenie stworzenia listy z pięcioma elementami
można jeszcze dać { } w której ma być treść,
oraz [ ] w którym ma być atrybut
alt + lewy przycisk myszy tworzenie kilku kursorów żeby pisać w kilku miejscach jednocześnie

<dl> - definition list
<dt> - definition term
<dd> - definition description
dl>dt+dd czyli tagi <dt> oraz <dd> mają być umieszczone w tagu <dl>
tagi na tym samym poziomie to rodzeństwo, tagi na wyższym poziomie to rodzice,
na niższym - dzieci
jeżeli chcemy stworzyć 10 dzieci w tagu, to robimy to tak jak w matematyce dl>(dt+dd)*10

Linki

Do podlinkowania używamy tagu <a>(anchor-kotwica)
a w środku tagu dajemy atrybut href

tutaj daje odnośnik do podstrony, którą dopiero będę pisał, aby do niej przejść kliknij tutaj

odnośnik do linku zewnętrznego google
aby otworzyć w nowej karcie należy umieścić atrybut target o wartości _blank
target="_blank"

ETYKIETY-PRZESKAKIWANIE NA STRONIE

Aby przekierować użytkownika do etykiety należy stworzyć kotwicę (<a>) w której dajemy atrybut href, który przeniesie nas do etykiety
Etykietę tworzymy w miejscu do którego będziemy przenosić użytkownika za pomocą kotwicy z atrybutem name lub dodajemy do tagu atrybut id

napisz do mnie
zadzwoń do mnie

ciekawostka: gładkie scrollowanie ustawiamy za pomocą atrybutustyle="scroll-behavior: smooth;" w tagu <html>

Naglówki <h1>

od h1 do h6

h2

h3

h4

h5

h6

Ćwiczenie:

Podstawy Tworzenia stron - krótko i zwięźle

Czym jest HTML?

HTML to z ang. Hypertext markup language. Jest to język tagów (znaczniki)

Czym są tagi?

Tag to znacznik, służy do zaznaczania tekstu. Nadaje tekstowi określone znaczenie

Czym są atrybuty?

Atrybut to dodatkowa informacja o tagu. Niektóre tagi mogą mieć potrzebę umiejscowienia

Czym jest CSS?

CSS to język umożliwiający zmianę z jednego miejsca wyglądu wszystkich tagów na stronie.

Czym jest selektor?

Selektor to operator, pozwalający wyselekcjonować (wybrać) ze strony konkretne tagi, które

Jak dołączyć plik CSS na stronie?

Aby dołączyć plik na stronie należy w sekcji head skorzystać z tagu <link>

zwijanie tekstu: alt + z

**h${Tekst $}*6**

Tekst 1

Tekst 2

Tekst 3

Tekst 4

Tekst 5

Tekst 6

Tagi <cite> <blockquote> <q>

Cytaty, cudzysłów

Tagi semantyczne <strong> <em> <mark> vs <b> <i> <u> <s>

b - bold - pogrubienie
i - italic - kursywa
u - underline - podkreślenie
s - strike - ~~przekreślenie~~

strong - silny (pogrubia)
em - emphasis (podkreślenie/akcent/nacisk)
mark - oznaczyć markerem (z pomocą żółtego koloru)

Tagi <dfn> <abbr>

dfn - definition - definicja
abbr - abbreviation - skrót

przykład:
HTML to język znaczników do tworzenia stron WWW , najeżdżając na wyraz HTML pojawia się skrót jego definicji

<abbr title="Hypertext markup language">HTML

tag dfn tylko oznacza, że to jest definicja (dla botów i pozycjonowania strony)

Tagi <sup> <sup>

sub - subscript - indeks
sup - superscript - napisany u góry

przykład:

H₂O
E=MC²

Tekst preformatowany, tagi: <pre> <code> <var>

pre - pre formatted (sformatowany tekst przed wklejeniem)
code - tag używany do oznaczenia kodu (by odróżnić go od tekstu)
var - variable (zmienna) - do pokazania, że w tekście jest zmienna

przykład:

    .rectangle
{
    width:960px;
    margin:20px;
    text-align:center;
}

.square
{
width:50%;
float:left;

podmiana znaków: ctrl+f ctrl+h

    <head>
        <title>Moja strona</title>
        <meta name="description" content="strona o niczym">
        <meta name="author" content="Piotr Mancewicz">
        <meta charset="UTF-8">
    </head>

Formularze <form>

tagi:

form - kontener formularza

input - pole do wpisywania

atrybuty:

text - tekst
password - hasło
submit - przycisk wyślij

przykład:

    <form action="login.php" method="POST">
        login: <input type="text" name="login">
        hasło: <input type="password" name="password">
        <input type="submit" value="Zaloguj">
     </form>

Pole radio

Tak to wygląda w kodzie

    <form action="ankieta.php">
        <fieldset>
        <legend>Ile masz lat?</legend>
        
        <input type="radio" name="kategoria_wiekowa" id="kategoria_wiekowa1" value="7-18"><label for="kategoria_wiekowa1">7-18<br>
        <input type="radio" name="kategoria_wiekowa" id="kategoria_wiekowa2" value="19-29"><label for="kategoria_wiekowa2"> 19-29<br>
        <input type="radio" name="kategoria_wiekowa" id="kategoria_wiekowa3" value="30-50"><label for="kategoria_wiekowa3"> 30-50<br>
        </fieldset>    
            <input type="submit" value="wyślij">
    </form>

Pole checkbox w kodzie:

<fieldset>
    <legend>Jakie jest twoje hobby?</legend>

   <input type="checkbox" name="sport" id="sport"> <label for="sport">sport</label>
   <input type="checkbox" name="muzyka" id="muzyka"> <label for="muzyka">muzyka</label>
   <input type="checkbox" name="gry" id="gry"> <label for="gry">gry</label>

</fieldset>

atrybuty:

checked - domyślnie zaznaczone
required - wymagany
autofocus - automatyczne skupienie - zaznaczone od razu po odświeżeniu strony
autocomplete - autouzupełnianie
size - wielkość rubryki
maxlenght - ile znaków można wpisać
value - wartość domyślna
placeholder - co ma być wyświetlone w rubryce na szaro

textarea - okno w którym użytkownik może pisać z enterami

Tutaj mój formularz wykonany w ramach ćwiczenia..

    <form>
        <input type="date">
        <input type="time">
    </form>

Tabele

tr - table row - wiersz (poziomo)
td - table data - informacje w tabeli (komórka, rubryka)
th - nagłówki tabeli
caption - podpis - nazwa tabeli

Video Kursy
Nazwa	Cena(zł)
C++	49
PHP	39
Java	45

Ćwiczenie: zrób tabelę z trzema wierszami i pięcioma kolumnami

Dyżury
Piotr	Paweł	Adam
Pn.	Wt.	Śr.
Czw.	Pt.	Pn.
Wt.	Śr	Czw.
Pt.	Pn.	Wt.
Śr.	Czw.	Pt.

tak to wygląda w kodzie:

    <table>
        <caption>Dyżury</caption>
        <tr>
            <th>Piotr</th><th>Paweł</th><th>Adam</th>
        </tr>
        <tr>
            <td>Pn.</td>
            <td>Wt.</td>
            <td>Śr.</td>
        </tr>
        <tr>
            <td>Czw.</td>
            <td>Pt.</td>
            <td>Pn.</td>
        </tr>
        <tr>
            <td>Wt.</td>
            <td>Śr</td>
            <td>Czw.</td>
        </tr>
        <tr>
            <td>Pt.</td>
            <td>Pn.</td>
            <td>Wt.</td>
        </tr>
        <tr>
            <td>Śr.</td>
            <td>Czw.</td>
            <td>Pt.</td>
        </tr>
    </table>

Rozpiętość komórek

atrybuty:

span - rozpiętość
colspan - na kolumny (w poziomie)
rowspan - rozpiętość na wiersze (w pionie)

tak to wygląda w kodzie: <td rowspan="3">

Zaczynamy naukę CSS

class="nazwa" - klasa, którą można zastosować dla wielu tagów .nazwa
id="nazwa" - identyfikator, który można zastosować tylko dla jednego tagu #nazwa

display: block;  - wyświetlane w bloku (z enterami)
display: inline; - wyświetlane w linii (bez enterów)
display: inline-block; - bloki wyświetlane w linii (bez enterów)

Tabelki z opisem selektorów CSS

przenieś do góry

Darmowy hosting zapewnia PRV.PL