Minden a html alkalmazásáról
Ebben a bejegyzésben arról fogsz olvasni, hogyan készíts egyszerű és nagyszerű html oldalt. Tulajdonképpen ha ügyes vagy, mindent meg fogsz tudni tanulni erről a leírónyelvről, ami az alkalmazásához szükséges.
A html oldal felépülése
A html oldalaknak létezik egy standard szerkezetük, amelyet tulajdonképpen minden egyes weboldal tartalmaz hellyel közzel. Erről már volt szó az előző cikkemben, ezért simán csak bemásolom az ott a témában leírtakat.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
- Ez a sor deklarálja a dokumentum típusát, ami jelen esetben html.
- A két html tag között foglal helyet a html struktúra.
- A head-ben található majd a css, vagy a külső css fájl linkelése, és egyéb linkek, például a google font-ok (betütípusok) linkjei.
- A body a html "teste", ez a látható felület.
Ha ezt minden oldaladba bemásolod, hát nagyon jól fogsz járni.
Span, p, div, címsor
Előrebocsátom, hogy a span ebben az esetben nem havert jelent.
Span
Így néz ki a span:
<span></span>
Annyira nem bonyolult ám, arra tudod használni, hogy sortörés nélkül tudj megjeleníteni szöveget. Próbáld ki!
Div
Így néz ki:
<div></div>
Arra tudod használni, hogy sortöréssel jeleníts meg szöveget. Próbáld ki!
P
Arra tudod használni, hogy paragrafusokat írj le. Lényegében elég ritkán alkalmazzák, különösebb gyakorlati jelentősége a span és a div mellett nem nagyon van.
Címsorok
A címsorok érdekes módon pont azt jelentik itt, mint máshol. Kiemelt, nagyobb, szélesebb betűket, melyek az átláthatóságot szolgálják, és strukturálják a szöveget, pontokba szedik azt. A böngésző alapból kiemeli a címsorokat, de lehet css kódot is rendelni hozzájuk. Így néznek ki:
<h1></h1>
Címsor 1
<h2></h2>
Címsor 2
stb... Próbáld ki! A címsorok alapból sortörést hoznak létre, egymás alatt fognak elhelyezkedni, ha egymás mellé írod öket.
Class-ek és id-k
A class-eknek és id-knek akkor van jelentőségük, ha css-t is alkalmazunk. Lényegében minden kaphat class-t és id-t, a címsortól a p-ig bezárólag. A class-re és az id-re is meg tudunk határozni kinézetet. Mi a különbség a kettő között? Egy id-ból csak egy lehet egy html struktúrában, vagy ha nem így lesz, akkor a css az elsőt fogja figyelembe venni. Class-ből több lehet, benne is van a nevében, hogy osztály, egy osztályba többmindent is tudunk sorolni. Emellett egy html taget több osztályba lehet sorolni, de csak egy id-t kaphat. De hogyan?
<div class="osztaly"></div>
Hogy kaphat többet? Elválasztjuk őket szóközzel
<div class="osztaly1 osztaly2"></div>
Az id-k megadása pedig így történik:
<div id="azonosito">
Képek és linkelés
Sok esetben szükség van arra, hogy különböző képeket, vagy linkeket helyezzünk el a szövegben. Ezt a következőféleképpen tudjuk megtenni:
Link
<a href="http://example.hu">
Sokszor felmerül az igény arra vonatkozóan, hogy a linkek új ablakban nyíljanak meg. Semmi mást nem kell tennünk, csak a kékkel kiemelt részt szükséges a webcím utáni macskaköröm után leírnunk.
<a href="http://example.hu" target="_blanket">
Kép
A kép elhelyezése a következőképpen zajlink:
<img src="mappa/kep.png">
Fontos, hogy a képeknek meg tudunk adni úgynevezett title és alt attribútumokat. Későbbiekben ezek majd az azonosításra fognak szolgálni, és a keresőoptimalizálásban is jelentőségük lesz.
<img src="mappa/kep.png" title="kep_címe" alt="kep_valamimas">
Ennyi volt a móka mára, zárul miki mókatára! :D
Ajánlott bejegyzések:
A bejegyzés trackback címe:
Kommentek:
A hozzászólások a vonatkozó jogszabályok értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a Felhasználási feltételekben és az adatvédelmi tájékoztatóban.
