A már megismert ! emmettel adjuk meg a
dokumentum vázát,
<!DOCTYPE html>
minden esetben ezzel kezdődik a
dokumentumunk, mindig ennek kell a legelső elemnek lennie a dokumentumban,
többféle létezik belőle de 99,9%-ban html5-ös doctypeot használunk
<html> itt
megadhatjuk a doksi nyelvét: <html lang="hu"> w3c –oldalán meg
tudjuk nézni a country kódokat, a html –tagen belül mindig meg kell adni azt,
hogy milyen nyelven íródjon a dokumentum.
<head> ezen
belül adunk meg egy csomó általános dolgot ami a dokumentumunkra vonatkozik. ide
kerülhetnek a meta tag-ek. A head tagen belül tudunk különböző metatageket
megadni, nézzük meg a w3c ajánlását.
<meta
charset="UTF-8"> ez nagyon fontos, hogy megadásra kerüljön a
dokumentumunkban, mert ezzel azt jelöljük, hogy ez a doksi utf 8 kódolású. Ide
kerül a karakter kódolás UTF 8 ipari sztendert lett használva a neten.
A következő kettő a
description és a keyword, valamikor nagyon nagy divat volt, amikor a kereső
optimalizálás elkezdődött, és még nem voltak annyira kifinomult
keresőszoftverei a böngészőknek mint manapság, akkor ennek nagy jelentősége
volt. Ma már kevésbé van jelentősége, de azért célszerű használni, mivel
kifinomult keresők vannak:
<meta name="description"
content="Free Web tutorials"> de
itt tudjuk megadni néhány szóban miről szól a weboldalunk
<meta name="keywords"
content="HTML, CSS, JavaScript"> a kulcsszavaknak is régen volt
jelentősége, de ma már a kifinomult kereső motorok használatának köszönhetően
ezeket is idejüket múlták, de mindenestre az oldalhoz különböző kulcsszavakat szoktak
megadni
<meta name="author" content="John
Doe"> oldal szerzőjének a nevét tudjuk megadni
<meta name="viewport"
content="width=device-width, initial-scale=1.0"> a viewport
metagat nagyon fontosá vált, amikor a
reszponzív weboldalak elkezdtek terjedni, és több eszközre, több kijelző méretre
kezdtek el weboldalakat tervezni a fejelsztők. , Nézzük meg a w3s ajánlását, tehát
a viewport a felhasználó által látható része a weboldalnak. Ez változó érték
lehet, kisebb egy mobiltelefonon és nagyobb a számítógép kijelzőjén.
Ha nyitunk egy
ablakot a böngészőben f12-vel vagy a laptopon
ctr+shit+i vel tudjuk megjeleníteni az oldal forrását, https://www.w3schools.com/tags/tag_meta.asp
itt alul látható, hogyan néz ki ha nincs a viewport beállítva, gyakorlatilag
ugyanúgy néz ki, csak össze van nyomva az oldal, ha pedig be van állítva a
viewport akkor mobiltelefonon is élvezhető nézetet kapunk. Viewport szélessége
mindig az lesz, amekkorára hagyom megnyitva az ablakot. Vizsgáljuk meg a
fejlesztőben, felül látható, hogy vannak előre megadott méretek is, megadhatjuk
pl hogy galaxy s5 –re állítsa be, és ha erre kattintunk, akkor ennek a
mobiltelefonnak a viewportját fogja beállítani. Consol helyett válasszuk ki az
elemts tabot hagyjuk is megnyitva, sokat
lesz rá szükség, a sor végén az initial-scale=1.0" azt jelenti, hogy az
alap értelmezett nagyítása mekkora legyen a weboldalnak. Ha megnézzük a w3s-en
írja is, hogy ha megnöveljük az értékét, annyival fogja nekünk felnagyítani, ha
megnyitjuk a weboldalunkat a böngészőben. Ha lejjebb görgetünk, láthatunk egy
tökéletes példát arra, hogy néz ki az oldal, ha ez a viewport nincsen
beállítva. Itt látható, hogy megfelelő beállítások nélkül ugyanúgy néz ki a
telefonon, mintha asztali böngészőt használnánk, csak össze fogja nyomni, és
olvashatatlan lesz, ha pedig be van állítva a viewport akkor szépen tördelni
fogja a sorokat úgy, hogy mobil telefonon is élvezhető nézetet kapjunk.
<title>Első
weboldalam</title> a dokumentumunk címét fogja megadni. Adjuk
meg a és nézzük meg a böngészőben hol jelenik meg.
A legtöbb html tagnek
van lezáró tagje. Ha az egyikre rákkatintunk, akkor a sintax highlightnek
köszönhetően ki fogja jelölni a lezáró taget. Mi a helyzet azokkal, amiknek
nincsen lezáró tagje. Itt van pl a meta, aminek nincsen lezáró tagje, és ha
rákattintunk nem fog kijelölni semmit, mert olyan hogy meta lezáró tag nem
létezik, mivel ezeket nem szükséges lezárni a html5-ös szabvány szerint.
A korábbi xhtml
szerint minden taget kötelező volt lezárni, még ezeket az ún sefl closing
tageket is, mégpedig úgy, hogy mielőtt lezártuk a relációs jelet szépen elé
betettük a szlasht.
pl: <meta
name="author" content="John Doe"/> ezzel lényegében egy rövidített lezárást hoztunk létre, ez
tulajdonképpen ugyanaz mintha leírtuk volna elé hogy meta, csak ez nem felel
meg a nyelv szintaxisának, viszont ezzel el lehetett érni azt, hogy ezek a
tagek is le voltak zárva. A html5 ös szabvány szerint ki lehet tenni ezeket, ha
valaki ragaszkodik hozzá, de nincsen rá szükség, haladunk a korral és mi sem
fogjuk kitenni sehol, ahol nem szükséges, nem dolgozunk vele fölöslegesen.
</head>
A következő a
dokumentum törzse lesz amit <body>tagek közé fogunk tenni, ennek is
értelemszerűen van egy nyitó és egy záró tagje.
The content of the
document......</body> és végül záró </html>
Dok törzse body, ami
e közé kerül ez jelenik meg a böngészőben. Ez a htm dok váza.
Html 5 lower keys,
tehát kis betűket használunk. visual studio automatikusan rendezi a
behúzásokat, a node++-nál el kell dönteni milyen formát használunk. Ha ide
beírunk 3 pontot és vissza megyünk a böngészőbe és nyomunk egy frissítést,
akkor ott már meg fog jelenni nekünk a 3 pont.
Mielőtt elkezdünk
dolgozni ki kell találni azt, hogy milyen kódolási konvenciót használunk a
behúzásra, bár nekünk a vsc-ben automatikusan megoldja a program, bracketnél
vagy note++ nál van jelentősége.
A tageket kis betűvel
kell írni, a doctype nagy betűs de ha átírjuk kisbetűre ugyanúgy működik,
lényeg az , hogy a markupot kisbetűvel írjuk.
Mentsük el a
dokumentumot és a következő oldalt nyissuk meg.
https://validator.w3.org/ itt tudjuk ellenőrizni a forráskódunkat!3
féle módon, másoljuk is be és check. kiírják a hibákat, vagy
figyelmeztetéseket, mielőtt átadnánk egy weboldalt, mindig itt ellenőrizzük le.
Ezen mindig érdemes lefutattani a kódunkat mielőtt élsbe felöltöltenénk a
szerverre, vagy átadnák az ügyfélnek. Az azért nem garantálható hogymindig
lehetésges tökéletes kódok írni, hogy egyáltalán ne mutasson warningokat, de ha
error van azt ki kell javítani. Lényeg error ne legyen, de egykét warning egy
8000-soros weboldalaba bele fér, ha nem okoz hibát, akkor nem érdemes plusz sok
10órát rászánni a plusz around working-okra, amikor a való életben, már ott vár
a következő munka.
Menjünk vissza a w3s
dokumentációra keressük ki a tagek felsorolását, nagyon sokat át fogunk
ismételni, de a későbbiekben látni fogjuk, hogy ezeknek csak egy töredékét
használjuk a napi munka során.
Html tagek közül
általában 15-20 taget fogunk használni, a többi az ritkábban kerül elő. A
szerkesztéshez érdemes lorem ipsum szöveget használni, amit itt tudunk
generálni: https://hu.lipsum.com/ de az emmetel automatikusan
innen tudunk
használni szöveget, ami jobb mint az oldal szerkesztés alatt, vagy feltöltés
alatt
bekezdéseket a
<p> </p> taggel jelölhetjük - paragraph
hozzunk létre 3
bekezdést p tagekben
sortörés: <br> a
break angol megfelelője, ahány br szúrunk be, annyi sortörést csinál, viszont,
hogyha egy sornál nagyobb távolságot szeretnénk azt stílusokkal fogjuk megoldani, tehát
ilyet, hogy br-ek egymás után, nem használunk a való életben. Nincs lezáró
tagje, ez is egy self closing tag, de beírhatjuk szleshel is, akkor is validált
lesz a kódunk
Következő u
–underline, aláhúzza a szövegünket, i-italic dőltbetűs lesz,
Azonos eredményt
érhetünk el a <strong> és a <b> bold tagekkel, vastagított szöveget
fog ererdményezni. Ezeket ha megnézzük a böngésző fejlesztőjében és az egeret
oda húzzuk, ki fogja nekünk jelölni. A strong az valamivel szemantikusabb,
megnézve a foráskódot azt jelenti, kiemelt szövegérszt jelentünk meg. Későbbiekben
még rátérünk miért jó ez.
vizsgáljuk meg a
fejlesztőben a szövegünket, a bekezdéseket, jelöljük ki a kijelöléseket, ezek
később fontos dolgok lesznek, tehát mindenképpen kezdjük el megszokni a használatát
a deveoloper toolsnak magyarul fejlesztői eszközöknek.
s áthúzott szöveget
fog nekünk megjeleníteni. Nézzük a definicióját a dokumentációban, mely
szerint: Azokat a szövegeket tudjuk így jelölni, amik pl nem érvényesek, ha pl
árcsökkenést kell ábrázolni. itt látunk is rá példát, try it – már látjuk is
hogy hogyan működik. Ezeket azért érdemes megismerni, hogy későbbiek során
szemantikusabb markupokat tudjunk írni.
következő <sub> alsó indexbe teszi a szöveget
<sup> felső index, pl ha celsius fokot akarunk beírni, vagy négyzetmétert
próbáljuk is ki,
<mark> kiemelt szöveget jeleníthetünk meg vele,
htmlben sárgával emeli ki a szöveget, nézzük meg a w3s ajánlását. Az internet
explorer elég sokmindent nem támogat, ezért ezzel nem foglalkozunk, még az
újabb változata az edge tud valamit. Régen is a webfejelsztők rémálma volt,
hogy elkészült egy weboldal, tök jól nézett ki firefoxban chrome safari opera
meg minden alatt, kivéve az Explorer, telejesen máshogy nézett ki, és utólag
egy csomót kellett rajta dolgozni, meg hackelni, hogy nagyjából használható
eredményt lehessen elérni. Ahogy jöttek az újabb böngészők gyakorlatilag a
chrome és a firefox teljesen kiütötte az internet explorert, így manapság már
nem is nagyon használja senki, úgyhogy éppen ezért nem is fogunk vele külön
foglalkozni.
Következő tagunk a <blockquote>
lesz aminek az ajánlását a w3on láthatjuk, ez a tag arra szolgál, hogy egy
másik forrásból származó dolgot idézzünk vele. pl:
<blockquote
cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has
been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million
members in the United States and close to 5 million globally.
</blockquote>
van egy nyitója egy zárója illetve megadhatjuk, hogynnan származik az idézet.
Nézzük meg a try outot, másoljuk be a mi kis kódunkba és nézzük meg a
böngészőben. pl a második bekezdés első két mondatára húzzuk rá ezt a taget.
A következő kettő a <del> és <ins> valami
helyett del áthúzza a szöveget az ins aláhúzza. Nézzük meg a böngészőben. Ez a
javított tartalom megjelölésére szolgál, nézzük meg mit ír róla a w3. Tehát a
szöveg egy törölt résszel és helyette beillesztett szöveg jelölésére szolgál.
Try out editor.
<abbr title="World Health Organization">WHO</abbr>
abbriviation – rövidítést jelent, arra szolgál, hogy rövidítéseket tudunk vele
megmagyarázni. hogy linket tudunk jelölni, ha fölé húzzuk az egeret akkor
megjelenik a link, ahonnan másoltuk.
Címsorok: <h1>
-től <h6> ig összesen hat féle címsort tudunk megadni a htmlben, első a
legnagyobb, utána egyre kisebb, ahogy követik egymás után a hierarchiában
<hr> egyenes
vonalat fog nekünk beszúrni, ez is egy sefclosing tag. a css –t kipuskázhatjuk
az oldalról.
<time>
időpontokat tudunk vele megjelölni. A böngészőben nem látunk rajta semmi
változást.
w3c ajánlásban:
datetime – nem a dátumot írjuk ki, hanem a hozzá kapcsoldó eseményt
link beillesztése <a
href="https://www.w3schools.com">Visit W3Schools</a> ha nem
jelöljük a nyelvet a validator warning-ot jelöl ezért jobb ha:
<a href="https://www.w3schools.com" hreflang="en">W3Schools</a>
új oldara nyitást is érdemes jelölni:
<a href="https://www.w3schools.com" hreflang="en"
target="_blank">Visit W3Schools</a>
kép beillesztése:
<img src="img_girl.jpg" alt="Girl
in a jacket" width="500" height="600"> a
reszponzív weboldalak korában már nem szokás megadni a kép méretét, inkább a
cssnél lehet beállítani.
at alt-ot az akadálymentesítés érdekében adjuk meg,
hogy a vakok felolvasó szoftvere be tudja olvasni.
bordert már nem használjuk, arra volt jó hogy az
internet explorer a linket képre egy kék keretet tett és ezzel a borderrel le
lehetett venni nullára, de a html5 már nem támogatja.
srcset – képek
esetében használjuk, a jpg elérésének útja, vagy ha más formátumban is fel van
töltve a kép.
Új htm5 tagek
figure és figcaption
– kép neve ,a kép alá középre simán beleírja a kép címét.
main – a weboldal
tényleges tartalma, csak egy lehet belőle, és egyedi tartalommal kell
rendelkeznie
artice blokkok
aside olyan tartalmi
egységet tudunk alkotni ami eltérő, tartalomhoz részben tartozó szöveget tudunk
vele jelölni
footer lábléc
header fejlécet
tudunk megjelölni
div – bármihez
használhatjuk, oldal struktúráját lehet vele osztani
űrlapok
szerteágazó téma,
mindig form tagek közé tesszük, form method értéke lehet get vagy post, get-ben
az urlben ott lesz minden, a post nem jeleníti meg a linkben az egészet
fieldset az űrlap
elemek csoportosítására szolgál
legend elemek közé
tesszük az űrlap címét
<input
type=”text”>
text mellett vagy
helyett állhat benne mail, password, tel, file, submit a submit utána
value=”felirat”
<select>
<optgroup
label=”olasz autók”>
<option>Fiat</option>
<option>alva</option>
</otpgroup>
</select>
<textarea rows="4" cols="50">itt már nem adjuk meg a méretét, hanem
css-ben
<progress
value=”40” max=”100”>
