Notatki z kursu - HTML

Powrot do indexu Notatki CSS

Okreslanie typu dokumentu na poczatku pliku za pomoca < !DOCTYPE html>, informacja dla przegladarki jakiego wersji html uzywasz. Zawsze go dodajemy

Nazewnitcto plikow HTML - pliki HTML powinny byc samonazywajace sie, tzn. ze nazwa pliku powinna opisywac do zawartosci strony. Nie uzywamy spacji, uzywamy - i nie stosujemy polskich znakow

W elemecie head umieszczamy informacje o stronie np. title, meta, script

elemety i tagi ktore umieszczamy w head

• < title > obrazuje to co znajduje sie na stronie < title />
• < meta > tagi meta sluza do dodawania informacji o stronie np. autor lub opis strony. Meta tagi powiny znajdowac sie na szycie elementy head tak aby byly latwo dostepne. Przykladowe atrybuty:
  • < meta name="nazwaAtrybutuMeta" content="wartoscAtrybutu">
  • < meta name="robots" content="index, follow"> - ten meta tag pozwala okreslic zasady dla robotow wyszukiwarek np. napisanie noindex spowoduje ze wiitryna nie powinna pojawiac sie w wyszukwaniu, follow definije czy roboty maja wchodzic w linki na stronie
  • < meta name="keywords" content="koty,jedzenie"> - w zwiazku z naduzyciami tego tagu raczej nie jest brany pod uwage przy pozycionowaniu storny, jedank mimowszystko warto umieszczac tam keywordy.
  • < meta name="author" content="Ernest Strzalkowski"> - autor storny
  • < meta name="description" content="Opis strony internerowej"> - bardzo wazny meta tag sluzacy do wyswietlania krotkiego i zwiezlego opisu strony. Bedzie to widoczne w wyszukiwarce np. google, takze roboty pozycionujace sprawdzaja opis storny gdy decyduja czy ja pokazac w wynkiach
  • < meta http-equiv="Content-Type" content="text/html;charset=UTF-8" > lub < meta charset="UTF-8" > - kodowanie znakow, aby poprawnie wyswietlac wszystkie znaki i litery ze wszystkich jezykow swiata nalezy ustalic kodowanie znakow. Nalezy zwrocic uwage tekst na strone jest zapisywany w takim samym kodowaniu w ktorym pozniej jest wyswietlany. Najlepsze obecnie kodowanie to UTF-8

W elemecnie body umieszczamy zawartosc strony

elemety i tagi

!!! elementy nalezy zamykac zgodnie z kolejnoscia otwarcia, najwczesniej otwarty musi zostac byc zamkniety najpozniej

!!! wszystkie elementy nawet takie ktore maja tylko jeden element np. < br /> najelepiej zamkyac bo np. react tego wymaga i warto wyrobic sobie taki nawyk

!!! aby uzywac znakow specialnych uzywamy ENCJI: SHIFT + 7 &kodEncji; Encje HTML

definicje tagow

< b >

bold, tag sluzy do pogrubania tekstu: pogrubiony tekst

< i >

italic, tag sluzy pisania kursywa: tekst napisamy kusywa

< p >

paragrpah, definiuje nowy akapit

< br >

break, czyli przelamanie lini, ale nie zostawia dotakowych przerw jak element

< span >

neutralny element, bez domuslnej funkcji, uzywa sie go do tylko przypisywania atrybtow bez zmiany wygladu tekstu

< img >

sluzy do umieszcznia obrazkow do stronie, wazne atrybuty to:

• src="images/gitara-basowa.png" - source, wartosc to sciezka do pliku obrazka, dobra praktytka: zmiast spacji myslnik, same male litery, nazwa powinna opisywac obraz
• alt="gitara basowa" - altenative, tekst alternatwy do wyswietlenia gdy obrazek sie nie zaladuje, tekst opowinien opisywac obraz
• width="100", height="100" - dobra praktyka jest ustawianie tych wartosci do rzeczywistego rozmiaru obrazka, tak aby w razie gdy obrazek sie nie zalduje to bedzie pokazywala sie ramka odpowiedniej wielkosci, warto tutaj skorzystac komendy Emmet Update with image size - zaznaczmay element img i uzywamy skrotu (shift+ctrl+p)
• Przyklad img: < img src="images/color-wheel.jpg" alt="Kolo kolorow" width="100" height="75" />
  

< !-- komentarz -->

pozwala umiesic komentarz ktory nie bedzie wyswietlony na stronie, warto uzywac komentarzy tak aby zwiekszac czytelnosc swojego kodu Mozna takze uzyc skrotu ctrl+/ aby szybko zamienic linjke na komentarz

< ol>

ordered list

1. przylkad
2. przylkad
3. przylkad

< ul>

unordered list

• przylkad
• przylkad
• przylkad

dl dt dd

definiton list, definiton term, defintion desciprtion - zestaw tagow uzywanych do tworzenia list z definicajmi. Stoswanie tego ma znacznie dla robotow ktore powiazuja z tej listy ze soba, wyplywa to lepiej na pozycionowanie. Przykladowe uzycie w sekcji skroty klawiszowe

< a>

anchor - kotwica, Do zdefiniowania celu linku uzywamy atrubuty href="" - hypertext reference Linkiem moze byc dowolny tekst lub element np. obrazek. Jedank dobra prkatyka jest to zeby tekst anchoru wskazywal nazwe strone do korej sie przeniosmy.
Przyklad: < a href="">TekstAnchora < a /> Cwiczenie 1
Specialne atrybuty

• href="/" - przenosi do katalogo glownego, czyli do miesjca w ktorym znajduje sie index.html
• href="../" - cofa sie o jeden folder relatywnie do obecnej sciezki.
• target="_blank" - atrybut target pozwala zdecydowac czy referencja powinna sie otworzyc w nowej pustej karcie (_blank)
• rel="" - definije relacje miedzy twoja strona a docelowa
• #etykiety name="#nazwaEtykiety" - pozwala na zdefiniowanie edykiety, dzieki temu mozna skakac po stronie, szczegolnie przydatne gdy stona jest dluga skok mozna wykonac w nastepujacy sposob < a href="#nazwaEtykiety">tekst < a />. Do gory #top Mozliwe jest rowniez wykonanie do skoku do atrybutu id Do gory id="#okreslanieTypuDokuemntu"

< address>

- zawartosc tego elementu zawiera informacje o kontaktowe, ma to wplyw na SEO i powinno sie uzywac tego tagu gdy podajemy numer telefonu, url autora, email czy adres
Przyklad:

Ernest Strzalkowski
strzalkowski.e@gmail.com <- przyklad linku do wysylania email z tytulem
+48 737 170 589 <- przyklad linku do numeru telefonu, takie linki zwieszaja dostepnosc strony i wygode uzytkownika

< h1>

header, naglowek możliwe warianty od h1 do h6

h1

h2 class="subtopic"

h3

h4

h5

h6

< form>

formularz, tag definiuje miejsce gdzie uzytkownik moze wprowadzac dane. np. panel logowania, formularz kontaktowy, form moze zawierac inne tagi np:

• input type="text"
• input type="password"
• input type="number"
• input type="date"
• input type="submit input typu sumbit, sluzy do wyslania danych z formularzu.
• input type="radio" - towrzy liste do wyboru jednej opcji, radia laczymy ze soba nadajac im takie samo name, aby teskt opisujacy radio byl kliklany nalezy uzyc tagu label z atrubtem for w ktorym podajem id powiaznego z nim elementu. Nalezy rowniez dodac atrybut value, ktory okrelsa wartosc do przekzania
  Ile masz lat?

  7-18 19-25 26+

  Ten formularz wykorzystuje tag fieldset do stworznia ramki oraz tag legend to umieszczenia tekstu na ramce

  input type="checkbox" - pozwla zanaczy wiecej lub jenda opcje lub nie znanaczac wcale

  Jakie masz hobby?

  pływanie gry komputerowa samochody

atrybut action - form action="mijesceDoWyslanieDanychPoKlikneciuSumbt" np. "login.php", po takiej definicji, nacisniecie przycisku sumbit spowoduje odczyt danych ze wszykich tagow input w fromularzu i przeslanie ich do wybranej lokalizacji.

atrybut method - pozwala wybrac metode obslugi danych po nacisnieciu sumbit np POST,GET

cite blockquote q

tagi sluza do oznacznia cytatow na stronie, zrodlo cytatu podajemu uzywajac element cite

Ernest Strzalkowski

tagu cite mozna uzyc jako atrybutu w ktorym podamy np. link do zrodla cytatu

jesli nie ma potrzeby tworzyc nowego bloku tekstu nalezy uzyc tagu q wtedy cytat bedzie w tej samiej lini
abbr

tag semantyczny sluzy do oznacznia rozwiniec skrotow:

< abbr title="Hypertext Markup Language >HTML\< abbr/> HTML to jezyk uzywany do towrzenia stron internetowych
sub sup
tagi sluza do pisania tektu ^{na gorze} lub na _{dole lini}
table

tag table sluzy do tworzenia tabeli, do tego celu uzywamy tagow td, tr, th Przykladowa tabela:

Ceny przedmiotow

Produkt	Cena	Kategoria
Cebula	30 PLN	Promocja
Kasza	10 PLN
Zupa	20 PLN
Narodowe produkty

atrybuty

!!! atrybuty umieszcza sie elementach i sluza do umieszcza dodatkowych funkcji to elemntow np:
< tag nazwaAtrytutu="wartoscAtrybutu"> < tag />

• title ="tekst do wyswietlenia" - wyswietla tekst po najachuniu myszka np. do dodakowych infromacji
• lang ="kodJezyka" - uzywany razem z elementem HTML to okreslania w jakim jezyku jest strona np. pl,en,de,es
• src ="images/obraz.png" - uzywany do wskazania sciezki do plliku - aby dostac sie do folderu nadrzednego uzywamy nastpeujacego fromatu "../images/obraz.png"

• style ="background-color: red;" - atrybut uzywany do definiowania wygladu elementu za pomoca CSS
  Warto kozystac kola kolorow ktore samo dobiera pasujaca do siebie palete kolorw przyklad: CLICK
  Przykladowa zmina koloru tla

skroty klawiszowe

Operatory emmeta i tricki

Przykladowy skrot "dl>(dt{nazwa$}+dd{opis$})*5"

>

umieszcza kolejny element w srodku elementu jt. zagniezdza poziom nizej

+

umieszcza kolejny element obok elementu

$

znak dolara zostanie zamieniony na liczbe w przypadku kopiowania

*

definiuje ile razy stworzyc kopie obiektu

{}

sluzy do wpisywania zwartosci elementu

[]

sluzy do definiowania atrybutow i ich wartosci

()

pozwla na gruopwaie elementow, przydatne przy uzywaniu *

Ogolne skroty

shift + end

zaznacza cala linie do konca

alt + lewa myszka

tworzy nowy kursor i pozwala pisac w kilku liniach naraz

shift + ctrl + p

otwiera palete komend

ctrl + /

owija zaznaczony tekst w komentarz

alt + strzalki

szybka zmiana lini miejscami

ctrl + alt + p

moj wlasny skrot do komendy -> emment wrap with abbreviation

Darmowy hosting zapewnia PRV.PL