odstępy(odcięcia)(akapity) robi się za pomocą p z angielskiego - paragraph
można także "Łamać" za pomocą break przykład poniżej w kodzie
pisze sobie tekst i nagle używam breaka, żeby go podzielić
i tekst jak widzimy się podzielił
i tak bedziemy go terz stosować
a znka ! i dwie poziome kreski -- to komentarz, który sie nie wyświetla a na końcu też dwie kreski i znak większości
rzeczywiście zmieniło kolor i się nie wyświetliło, może będę umieszłał komentarze, ale głównie informację postaram sie umiescić na stronie -->
atrybut = para - klucz - wartość - która daje dodatkowe informacje, ustalone z góry
Przykłady:
align - Wyrównanie
może być też right lub center
ta strona nazywa się index - jest to spis - czyli strona wejściowa - od tego się zaczyna od niej się zaczyna serwery otwierają tą strone jako pierwszą.
W międzyczasie ogarnąłeś naukę file zilli jako programu do transferu plików lokalnych na serwer, oraz poznałeś edytor APTANA studio i zapisywanie projektów.
zmieniłeś domenę z drogakrolikaref.pl na drogakrolik.prv.pl
Metatagi:
Przechowują metadane, informacje o danych zawartych na stronie, mają znajdować się w nagłówku "head", korzystaja z nich boty np. google
w metatagach nie piszemy meta z tyłu i przodu, tylko z przodu a zakańcza się "/>"
Zwróć uwagę że metadane " http-equiv, name=author i name = robots są nad title. - ma to wpływ "
KODOWANIE
Komputer używa jedynie języka binarnego 01001000110 dlatego jak chcemy, żeby interpretował polskie znaki to musimy wipasć metadane z kodowaniem polskich znaków jest to standard kodowania - charset=UTF-8 lub lib iso-8859-2
każda podstronka będzie "dziedziczyć sposób kodowania z głównej strony można to zmienić w ustawieniach w głównym katalogu folderu z projektem
DTD - Typ oraz reguły pisiennictwa
definicja dokumentu - jego opis - w jaki sposób jest pisany - my będziemy pisali w XHTML 1.0 Transitional
funkcja ctrl + Q otwiera kod strony
ENCJE - WALIDACJA Strony
Encja to stała zmienna - pewnego rodzaju tekst za który podstawia się wartośc ustaloną z góry - masz przykład w kodzie źródłowym jako komentarz
przykład encji - zobacz co jest zamiast znaku mniejszości: 5 < 10
teraz zmienić wszędzie znaki mniejszości większoći i innych na prawodłowo zapisane encje, w tym celu wciskamy ctrl + f i wyszukujemy znak cytatu i zamieniamy na encje i klikamy repleace. zmieniamy tylko w tekście,
chyba, że chodzi o ampersandy czyli "&", je zmieniamy wszędzie
Możesz sprawdzić swój kod czy nie ma błędów pod adresem - https://validator.w3.org/
DROGA KRÓLIKA ====== Usagi Yojimbo ===== Komiks o Króliku Samuraju
wszystko piszemy małymi literami
każdy ma zakończenie atrybuty klucz też piszemy małą, każdy atrybut ma zawsze wartość
no i wszystko cacy
to jest czerwony tekst
to jet inną czcionką TAGI SEMANTYCZNE
To tagi z wartością dodaną dla np. robotów: To jest pogrubiony tekst ale niesie ze soba wartość dodatkową od słowa emphasis - kłaść nacisk i robi to samo co iteracja ale z wartością semantyczną
x2 x1 przykładowy tekst przykładowy tekst przykładowy tekst HEADER - NAGŁÓWEK
To jest główny tytuł
To jest podtytuł
To jest tekst
To jest jakiś tytułek ale też ważny
PREFORMATOWANIE
jakię tekst bez break
preformatowany,
dlatego jest tak jak w kodzie strony
W sumie to fajna sprawa
<pre> - popatrz jak to zapisałem, nie zapominaj o ENCJi int A; int B; - zmienna - variable
Szun Tzu - cite - przytaczać
Jeżeli choć trochę czujesz zapach swój, to znaczy, że śmierdzisz w chuj
to jest jakaś definicja - od define - definiować
Sztampowa 15. wypizgród
W3C - akronim - skrótowiec
prof. abbreviation - skrót LISTA
Ol - order list - ponumerowana lista
Li - List Item - elementy listy
- non breakable space - niełamiąca się spacja - poniżej w liście przykład
Sztyma
Luta
słoń
Lista jest o tyle fajna, że jak usuniesz pozycję to automatycznie zmieni numerację/oznaczenie
Nie zawsze jednach chcemy, żeby lista była ponumerowana wtedy używamy :
ul - unordered list
Myszka
Kotek
Piesek
Wsza
dl - definition list
dt - definition term - definicja pojęcia
dd - definition data - definicja informacji
to jest definicja pojęcia
to jest definicja informacji
A teraz jakaś lista fildset - ponobno mało znane a ciekawe
A TERAZ KRESKA ODCINAJĄCA - HORIZONTAL ROAD - hr
i jest git TABELE
Tabele zapisujemy w atrybucie table, a tag tr określa liczbę wierszy table rov - wiersz tabeli
Z kolei td to table data - informacja ile komórek w tym przypadku niżej w tr czyli wierszach
Ramka domyślnie ma 0 pikseli i jest niewidoczna, musimy ustawic dodatkowy atrybut - border
border = ramka(dokładniej granica), ramka jest blisko tekstu wiec dodajemy atrybut cellpadding - wypełnienie wokół komurek
atrybut cellspacing to odstęp między granicami komurek - ustaw na zero
atrybut table header - th - nagłówek tabeli zobacz w kodzie poniżej
w atrybucie table - możesz zmieniać wielkośc komurek za pomoca atrybutu - height i width
Możemy także zmieniać pozycję tekstu za pomocą:
valign - vertical align - top, midle bottom
caption to nagłuwek główny tabelki
Możemy także podzielić tabelke na 3 cześci:
HEAD, BODY, FOOT - thead, tbody, tfoot
Służy to do podziału tabeli na te części i umieszczanie w nich zmian zaraz przy tym atrybucie(thead,tbody,tfoot)
Jak umiescimy w śdodku kodu tabeli np. tfoot to i tak doda ta zawartość na dole i analogicznie head i body
scalanie komórek - w danym wierszu dodajemy atrybut callspan, czyli <tr> colspan i wartośc
colspan - column span - rozpiętość kolumny - dziwne bo jak chcemy połączyc komórki wzglęgled własnie kolumny(w dół)to uzywamy atrybutu
rovw pan - rów span rozpiętość wiersza
nagłówek główny Tabeli
table header
to nagłówek
informacja 3
informacja 4
1
2
3
Rowspan
a
b
c
colspan - column span
DODAWANIE OBRAZÓW
<img /> -to jest tag do dodawania obrazków
do tego atrybu source - src
zdjęcie które chcemy umiescić na stronie należy przenieść do folderu project explorer
a to adres który samodzielnie dodałes na stonie droga królika zdjecie i działa - brawo ty
Kurwwa teraz pokazał że jest podgląd - klikawy w górną ikonke show preview i przeciągały na ekran
Wrzuciłem obraz do folderu obrazy, więc musze zaktualizować ścieżkę, patrz w kodzie
powyżej
kolejny atrybut to alt od alternative patrz komentarz w kodzie powyżej
Atrybut ma znaczenie jeżeli chodzi o pozycjonowanie dlatego wpisuj w alternative słowa kluczowe
zawsze dodawaj atrybut alternative
dodajemy także do tagu obrazka img jego wymiary - Height i width, patrz wyżej
najpierw szerokość potem wysokość - możesz to zobaczyć w folderze ze zdjęciem w szczegółach zdjęcia
Robimy to po to, żeby strona sie nie rozjechała podczas błędu i szybciej bedzie sie wczytywać
Atrybut allign także zmienia położenie obrazka - ale robi się to z poziomu css - nie wiem jeszzcze co to jest
DODAWANIE LINKÓW
abu zrobić link musimy zarzucić kotwicę czyli po prost tag a
a - od angielskiego anchor - kotwica
dodajemy atrybut o kluczu href - hypertext reference - odwołanie pierwszy link - joe monster
można dodać atrybut title to pojawi się dymek po najechaniiu
Mail do wiadomości robimy tak, że w href wpisujemy adres mail poprzedzony napisem:
mailto: Mój adres mailowy
możemy także stworzyć linka idź do góry
musimy na gurze zakotwiczyć nazwę np. a name='góra'>nbsp;/a
popatrz że trzeba dodac atrybut name
a potem na dole coś takiego: a href="#góra">idź do góry a/>
możemy to tagże zrobic w jednym linku pzykład w kodzie
jak zakotwiczymy link i dodamy name to stworzymy : ETYKIETY idź do góry go on top RAMKI
Ogólnie nie używamy ramek bo ich nie czytaja boty ale to dobry trening więc lecimy
zaczniemy od zbioru do przechowywania ramek tag - frameset - zbiór ramek
DOCTYME TRANSITIONAL NIE OBSŁUGUJE RAMEK WIĘC MUSIMY JE Zmienić
ale jebać bo i tak tego się nie używa FORMULARZ
używa się tagu form, miejsce w formularzu gdzie wpisujesz dane zwie się wejście
formularz wymaga atrybutów które będą go opisywały
atrybut action - jaka akcja
Ale żeby tworzyć ciekawe formularze trzeba znać PHP -Języki programowania do pisania skryptów
póki co znając jedynie HTML mogę w formularzu wpisywać maila.
atrybut method= post - pozwala wysłac coś - dowiem sie więcej jak poznam PHP
atrybut enctype - encription type - okresla w jaki sposób mają te dane być wysyłane
encytpe = text/plane
doadatkowo atrybut accept-charset - acceptcharakterset - akceptój zbiór rodzajów
tutaj podajemy sobie kodowanie strony najcześciej czyli UTF-8
wprowadzamy tag input - bo jak wyżej wejście i musimy okreslić typ tej rubryki, możemy okreśić takie atrybuty jak:name -
jak wpiszemy imię to pod imię bedzie wyświetlana wartośc którą wpiszemy w wejście.
czyli imie = Tomasz
Możemy wpisać także atrybut value - value=wartość domyślna
typ - submit - to do wyślij
