Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML

No description
by

Edit Danczik

on 23 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML

HTML
HyperText Markup Language
A HTML nyelv
a weboldalak leírására szolgál
tagekből épül fel (pl. <html>)
a tagek különböző tartalmakat írnak le, általában egy nyitó és egy záró tagből állnak
(pl. <html> és </html>)
a tageket tulajdonságokkal lehet ellátni, ezek az attribútomok
HTML dokumentum felépítése
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
A doctype meghatározza, hogy milyen elemeket használhatunk a HTML dokumentumunkban. Többféle dokumen-tumtípus létezik (pl. HTML5, XHTML 1.0).

Egy weboldal helyes megjelenítéséhez a böngészőnek tudnia kell a dokumentum típusát és verziószámát.

Minden szabványos HTML dokumentum-nak ezzel kell kezdődnie!
Maga a HTML dokumentum <html> taggel kezdődik, és a </html> záró taggel végződik. A <html> elem definiálja az egész HTML dokumentumot.
<!DOCTYPE html>
Metaadatokat tartalmaz, azaz adatokat magáról a HTML dokumentumról. A metaadatok nem megjeleníthetők.
A következő tagek metaadatokat írnak le:
A böngészők csak a body (törzs) részben lévő tartalmat jelenítik meg!
<html></html>
<head></head>
<body></body>
A különböző tagek egymásba ágyazhatók, de ügyelni kell arra, hogy azt a taget kell előbb lezárni, amelyik később lett megnyitva.
Tagek elhelyezkedése
Helyes:
<div>
<p>
</p>
</div>
Megjegyzés: habár a HTML5 nem érzékeny a kis- és nagybetűkre, a tageket és attribútumaikat mindig írjuk kisbetűvel!
Segítségével leellenőrizhetjük, a HTML dokumentumunk megfelel-e a választott szabványnak.

http://validator.w3.org
W3C Validator
Helytelen:
<div>
<p>
</div>
</p>
<title> - böngésző címsorán megjelenő cím
<meta> - leírás, kulcsszavak, szerző, karakterkódolás
<style> - formázásra vonatkozó információk
<link> - külső fájllal való kapcsolatot definiál
Címsorok
<h1>Ez a legfontosabb címsor.</h1>
<h2>Ez egy kevésbé fontos címsor.</h2>
<h3>Ez még kevésbé fontos.</h3>
Bekezdések
<p>Ez itt egy bekezdés.</p>
<p>Ez pedig itt egy másik.</p>
Sortörés
Megjegyzés
<br/>
<!-- Az itt lévő szöveg nem jelenik meg a dokumentumban.-->
Szóközök
A böngészők mindig eltávolítják a HTML dokumentum megjelenítésénél a többszörös szóközöket. Ha mégis több szóközt kell megjeleníteni, a &nbsp; ún. karakter entitást kell használni.
<: &lt;
>: &gt;
Egyéb jelek
Linkek
1. HTML dokumentum adott pontjára ugrik

<h1
id="cim"
>Piroska és a farkas</h1>
.
.
.
<a href="#cim">Vissza az elejére</a>

Linkek
2. másik HTML dokumentumra ugrik

<a href="http://andrassygimi.hu" target="_blank">
Andrássy gimi
</a>

Felsorolások
1. számozatlan listák

<p>Linux disztribúciók:</p>
<ul>
<li>Ubuntu</li>
<li>Debian</li>
<li>Fedora</li>
<li>Red Hat</li>
</ul>

Felsorolások
2. számozott listák

<p>Linux disztribúciók:</p>
<ol type="1">
<li>Ubuntu</li>
<li>Debian</li>
<li>Fedora</li>
<li>Red Hat</li>
</ol>

type: "1"/"A"/"a"/"I"/"i"
Felsorolások
3. Többszintű listák

<p>Operációs rendszerek</p>
<ul>
<li>Windows
<ul>
<li>Windows XP</li>
<li>Windows 7</li>
</ul>
</li>
<li>Linux
<ul>
<li>Debian</li>
<li>Fedora</li>
</ul>
</li>
</ul>

Táblázatok
Alap táblázat:
<table>
<tr>
<td>1. sor 1. cella</td>
<td>1. sor 2. cella</td>
<td>1. sor 3. cella</td>
</tr>
<tr>
<td>2. sor 1. cella</td>
<td>2. sor 2. cella</td>
<td>2. sor 3. cella</td>
</tr>
</table>
Táblázatok
Fejléc cella:
<table>
<tr>
<th>1. cella</th>
<th>2. cella</th>
<th>3. cella</th>
</tr>
<tr>
<td>1. sor 1. cella</td>
<td>1. sor 2. cella</td>
<td>1. sor 3. cella</td>
</tr>
</table>
Táblázatok
Fejléc csoport: <thead></thead> között
<table>
<thead>
<tr>
<th>1. cella</th>
<th>2. cella</th>
</tr>
</thead>
<tr>
<td>1. sor 1. cella</td>
<td>1. sor 2. cella</td>
<td>1. sor 3. cella</td>
</tr>
</table>
Táblázatok
Törzs csoport: <tbody></tbody> között

Lábléc csoport: <tfoot></tfoot> között
A csoportok használatával lehetővé válik, hogy a böngészők a törzsben lévő táblázatrészt a fejléctől és a lábléctől külön tudják gördíteni.
Nyomtatáskor nagy táblázatok esetében a fejléc és a lábléc minden oldal tetején, illetve alján megjelenik.
Táblázatok
Cellaegyesítések:

<th>, <td> tagek attribútumaiként

colspan: oszlopok összevonása
rowspan: sorok összevonása
Például:
két sor összevonása: <td rowspan="2">
négy oszlop összevonása: <td colspan="4">
Képek
Kép megadása: <img> taggel
Attribútumai:
src: kép forrása (fájl neve, elérési útvonala)
alt: helyettesítő szöveg
usemap: képtérkép használatakor
Például:
<img src="pelda.gif" alt="Példa" />
Képtérképek
A kép meghatározott részei linkként funkcionálnak.

Két részből tevődik össze:
1. térkép definiálása
2. térkép összekötése a képpel
Térkép definiálása:
<map name="terkep">
<area shape="circle" coords="50,75,10" alt="Kör" href="kor.html" />
<area shape="rect" coords="0,0,50,75" alt="Téglalap" href="teglalap.html" />
<area shape="poly" coords="35,70,85,90,40,100" alt="Háromszög" href="haromszog.html" />
</map>
Térkép összekötése a képpel:
<img src="pelda.gif" alt="Példa" usemap="#terkep" />
Koordináták:
circle: középpont koordinátái + sugár
rect: bal fölső és jobb alsó csúcs koordinátái
poly: csúcspontok koordinátái
Full transcript