Embed Size (px)
DESCRIPTION
HTML nyelv. Általános jellemzés. Hiper-Text Markup Language leíró nyelvtan normál szövegfájl HTML szerkesztő programok .html , .htm kiterjesztés böngésző: compiler és interpreter DOS-os nyelvtani szabályok index.html. Általános jellemzés. utasítások – „ tag ”-ek: < tag > - PowerPoint PPT Presentation
Citation preview
HTML nyelv
Általános jellemzés
• Hiper-Text Markup Language
• leíró nyelvtan
• normál szövegfájl
• HTML szerkesztő programok
• .html , .htm kiterjesztés
• böngésző: compiler és interpreter
• DOS-os nyelvtani szabályok
• index.html
Általános jellemzés
• utasítások – „tag”-ek: < tag >• Nyitó és záró tag (pl.: <td> , </td>)• foglalt szavak (pl.:head, body, table, img,…)• Dos-os fájlnevek használata• elérési út (pl.: ../mappa/nev.jpg)• színkód
– RGB – hexadecimális formátum: #rrggbb (pl.:fekete=#000000)
Általános jellemzés
• szerver – kliens oldalak
• ftp kapcsolat
• könyvtárstruktúra
• lap elemei azonos könyvtárban
• minden könyvtárban: index.html
• ../ egy szinttel fentebb
• hivatkozás: ../könyvtár_név/fájl.kit
Entitások• < <
• > >
• & &
• ó ó
• Ó Ó
• ö ô
• ő õ
• szóköz
Szintaxis
<HTML> …első tag<HEAD> …fejléc<TITLE>cím</TITLE> …dokumentumcím</HEAD><BODY> …törzs
.
.
.</BODY></HTML> …lezáró tag-ek
A HTML dokumentum fejléce
• A böngésző nem jeleníti meg, meta-információ
• <TITLE>dokumentum címe</TITLE>
• <META name="mező„ content="érték">
pl.: alkotó, létrehozó, tartalom, keresőszavak, stb.
A HTML dokumentum fejléce• karakterkészlet
<META http-equiv=content-type content=text/html;charset=iso-8859-1>
• alkotó <META content=„Gipsz Jakab" name=author>
• kulcsszavak a keresőmotoroknak<META content=„címszó1, címszó2" name=keywords>
• szkriptek (java, php, vb, …) <SCRIPT> </SCRIPT>
A HTML dokumentum szövegteste
• <BODY> megjelenítendő rész</BODY>
• <BODY background="fájlnév.kit" bgcolor="színkód" text="színkód" link="színkód" vlink="színkód" alink="színkód">
• karakter <FONT face=arial size=10px color=#ff02e7>
• bekezdés <div align=center>szöveg</div>
A HTML dokumentum szövegteste
• bekezdés <p> illetve <br>
• bekezdésformázás <p align=center>
• címsorok <h1>címsor1</h1>
• táblázat <table><tr><td>…</td></tr></table>
• hivatkozás <a href=„lapnév.html”>szöveg</a>
• kép <img src=„kép.jpg” alt=„szöveg”>
Karakter formázás• <b>félkövér</b> • <i>dőlt</i> • <u>aláhúzott</u> • <s>áthúzott</s> • <em>kiemelt</em> • <cite>idézet</cite> • <strong>kiemelés</strong> • <big>nagyméretű</big> • <small>kisméretű</small> • <sub>alsó index</sub> • <sup>felső index</sup> • <blink>villogó</blink>
Karakter formázás• <font color="#FF3333" size=1>kicsi piros</font>• <font size=2>N</font>• <font size=3>ö</font>• <font size=4>v</font>• <font size=5>e</font>• <font size=6>k</font>• <font size=7>v</font>• <font size=8>ő</font>• <font face="Arial CE" size=9>ARIAL CE</font>• <font face="Symbol" size=10>SYMBOL</font>
Címszintek felépítése
• <BANNER>címszalag</BANNER>
• <H1 align="left">Legfelső szintű címsor</H1>
• <H2 align="center">2. szintű alcímsor</H2>
• <H3 align="right">3. szintű alcímsor</H3>
• <H4 nowrap>Negyedik szintű alcímsor</H4>
• <DIV align="center">szakasz</DIV>
Bekezdések felépítése
• <p>alapértelmezett bekezdés</p>
• <p align=hely>igazított bekezdés
hely: left, center, right, justify
• <p nowrap>tördelés tiltása</p>
• sortörés elem, nem új bekezdés: <br>
Tabulálás• nem minden böngésző támogatja
• pozicionálás táblázattal, stílussal (css)
• <p>Szöveg<tabstop ID="elso">szöveg
folytatás<tabstop ID="masodik"> ...
• <br><tab to="elso" align=„igazítás">
igazítás: left, center, right, decimal
• <p><tab indent=32>alapértelmezett távolság: 32
• <br><tab>ez a 32. karakternél kezdődik.
Felsorolás• <ul> felsorolás kezdete• <li>szöveg első sor• <li>szöveg második s• <ul><li>szöveg második szint
…• </ul></ul> felsorolás vége• <ul type=„típus”> felsorolás elem beállítása
típus: circle, disc, square• <ul src=„fájlnév.kit"> felsorolás elem beállítása• <li> -nek nincs záró tag-je!
Sorszámozás
• <ol> sorszámozás kezdete• <li>szöveg első sorszám• <li>szöveg második sorszám• <ol><li>szöveg második szint
…• </ol></ol> sorszámozás vége• <ol seqnum="szám"> kezdő sorszám beállítása• <ol continue> előző sorszámozás folytatása• <li> -nek nincs záró tag-je!
Táblázat
<table> táblázat<tr> 1. sor<td> 1. cella<td> 2. cella<tr> 2. sor<td> 1. cella<td> 2. cella …</table> táblázat vége
Táblázat
• minden sorban azonos számú cella<table border="szám" align="hely" cellpadding="pszám" cellspacing="kszám" bgcolor="szín">
• elegendő az első sor celláit méretezni<td width=„szám” height=„szám”>
• cellák egyesítése: colspan=„cellaszám” – vízszintesrowspan=„cellaszám” - függőleges
Képek
• szigorúan kisbetűs, DOS-os nevek• azonos mappában a lappal• a kép méretének változtatásával a foglalt terület
nem változik• átlátszó: „interlaced”• hivatkozás írható rá• scriptekkel effektek• pozicionálás
Képek
• aktuális szövegpozícióban:<img src="elérési_út/fájlnév.kit">
• blokkban pzicionálva:<img align="hely" src="fájlnév" hspace="vszám" vspace="fszám" width="szméret" height="mmeret" alt="szöveg">
Hivatkozások
• a HTML lényege• lapon belül <a href="#vege">végére</a>
<a name=„vege”>vége</a>• lapok között
<a href=„fájlnév”><img src="fájlnév"></a>• külső <a href=„http://www.lap.hu”>lap</a>• levélküldő
<a href="mailto: [email protected]">írj</a> nekem! • képre írt <a href=„fájlnév”>link_szöveg</a>
