HTML nyelv.

Slides:



Advertisements
Hasonló előadás
Weblapkészítési tudnivalók 2: Útmutató az elnevezésekhez Pék Ágnes © 2009.
Advertisements

BPS Web 2.0 Felhasználói kézikönyv. A szerkesztő főoldala A bejelentkezett felhasználóA szerkesztő főmenürendszere Stílusformázások Nyelv- és nézetváltás.
HTML nyelv Hiper-Text Markup Language 1. óra.
HTML nyelv.
Szövegszerkesztés Összefoglalás.
Microsoft Office XP Word
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
2. óra. Emlékeztető Hello Világ! Ez Makk Marci honlapja!
Amit a HTML-ről érdemes tudni
Honlap készítés Érdekességek.
HTML parancsok használata
Leírónyelvek: HTML és XHTML
Készítette: Rummel Szabolcs
Dokumentum.
Szöveg egységei, gépelés
Hernyák Zoltán XML és HTML.
WebStarter ECDL W e b k e z d ő ECDL Webkezdő mintafeladat.
Készítette: Nagy-Szakál Zoltán 2007.
A HTML alapjai Havlik Barnabás Készítette:
HTML (Hypertext Mark-Up Language). Jellemzői Szöveges alapú internetes oldalak nyelve A formázási műveleteket is szövegesen írja le Szöveget, képeket,
HTML dokumentum felépítése
Vizuális és web programozás II.
HTML oldal felépítése Készítette: Pataki Arnold
Webszerkesztés A HTML alapjai.
Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem
Microsoft Excel Általános ismeretek.
Buris Katalin V. földrajz - informatika
Szövegszerkesztés Páll Éva Boglárka.
XHTML – a tanultak összefoglalása
Weblapok és készítésük
A <DIV> tag és formázás CSS-sel
DOKUMENTUMOK KÉSZÍTÉSE WORD 2007 SZÖVEGSZERKESZTŐVEL II. rész.
CSS A CSS bemutatása.
HTML nyelv.
Weboldalak tervezése (X)HTML.
Feladatlap stílusokra
Hyper Text Markup Language
Hyper Text Markup Language
6. óra. Összefoglalás (egy feladaton keresztül) Betűtípus, betűszín, betűméret Háttérszín, alapértelmezett betűszín Címsorok Igazítás Kép, link, táblázat.
Honlap készítés 2. óra.
A szövegszerkesztés elmélete
Web-programozás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Előadás Tananyag: A WWW A HTML nyelv alapjai.
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
Html nyelv (HyperText Markup Language)
Gazdasági informatikus - Szövegszerkesztés 1 Hosszú dokumentumok kezelése.
Karakterek formázása.
Táblázatok.
Weblap-szerkesztés. Információs hálózati szolgáltatások Internet fontosabb szolgáltatásai (szóbeli) Elektronikus levelezési rendszer használata (szóbeli)
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Weblapkészítés alapjai
A HTML dokumentumokról A HTML dokumentum-formátumot tekinthetjük az ún. hyper-text egyik megvalósítási formájának is. A HTML dokumentum egy olyan szövegfájl,
SZÖVEGSZERKESZTÉS III. ~ KARAKTERFORMÁZÁS ~
Weblapkészítés.
Java web programozás 2..
Az Apache+PHP+MySQL rendszer
SZÖVEGSZERKESZTÉS IV. ~ BEKEZDÉSFORMÁZÁS ~
A Mozilla magyar nyelvű szerkesztőjének használata
Webszerkesztés. IP cím pl: Domain cím - DNS pl: ország nevehttp:// számítógép címe World Wide Web Webszerverre.
A <DIV> tag és formázás CSS-sel
Alkalmazott Informatikai Tanszék
Weblapok és készítésük
Információ és kommunikáció
CSS Cascading Style Sheet HTML.
MS Office Word 2010 Szövegszerkesztés.
Html parancsok.
Táblázatok A táblázat megadása a tag használatával lehetséges. A és tageken belül: a és tagek között adhatjuk meg a.
Szövegszerkesztés Összefoglalás.
Adatfeldolgozási ismeretek 15. ML osztály részére 2017.
MS Office Word 2010 Szövegszerkesztés.
Előadás másolata:

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 … </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ízszintes rowspan=„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: hmg@index.hu">írj</a> nekem! képre írt <a href=„fájlnév”>link_szöveg</a>