Készítette: Turócziné Kiscsatári Nóra Html bevezetés Készítette: Turócziné Kiscsatári Nóra
A HTML HTML HyperText Markup Language Hipertext jelölő nyelv A HTML lapok egyszerű szöveges fájlok .htm vagy .html kiterjesztéssel (szerkeszthetők jegyzettömbben is) A nyelv TAG-ekből épül fel. <tag>ERRE VONATKOZIK</tag> <em>Ez dőlt lesz!</em> A szöveget tagok segítségével formázhatjuk Minden HMTL lapnak tartalmaznia kell a <HTML> </HTML> tagokat
A HTML fájl szerkezete <HTML> <HEAD> </HEAD> Head rész Karakterkészlet (kínai, cirill, stb..) Kereső információk Speciális utasítások <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Body rész Ez a rész fog megjelenni a böngészőben
Alapvető tagok a HEAD részben <TITLE> </TITLE> A dokumentum címe, ami megjelenik a böngésző címsorában <STYLE> </STYLE> Beágyazott stílusok <LINK …….> Stíluslap, javascript fájl hozzáfűzése
Alapvető tagok a HEAD részben <META http-equiv="Content-Type" content="text/html; charset=utf-8" /> Magyar karakterkészlet beállítása <META name="Keywords" content=" kulcsszó1, kulcsszó2 "> Kulcsszavak kereséshez <META name="Description" content=" leírása "> Az oldal rövid leírása
Alapvető tagok a BODY részben <strong>szöveg</strong> félkövér <em>szöveg</em> dőlt <u>szöveg</u> aláhúzott <br /> újsor <p>szöveg</p> bekezdés
Alapvető tagok - példa <html> <head> </head> Egy egyszerű html: <html> <head> </head> <body> Hello world! Ez <strong>vastag</strong> vagy <em>nem</em>? </body> </html>
Alapvető tagok - példa Böngészőben: Hello world! Nem került új sorba!
Alapvető tagok a BODY részben Címformátumok <h1>cím 1</h1> <h2>cím 2</h2> … <h6>cím 6</h6>
Alapvető tagok a BODY részben Igazítások Balra zárt <p align="left">szöveg</p> Középre zárt <p align="center">szöveg</p> Jobbra zárt <p align="right">szöveg</p> Sorkizárt <p align="justify">szöveg</p>
Alapvető tagok a BODY részben Felsorolások Számozattlan (unordered) <ul> <li> Első elem </li> <li> Második elem </li> <li> Harmadik elem </li> </ul> Számozott (ordered) <ol> <li> Első elem </li> <li> Második elem </li> <li> Harmadik elem </li> </ol>
Betűk Betű méretek: <font size="-2">szöveg</font> Betű típusok: <font style="font-family: Calligraphic; ">szöveg</font>
Hivatkozások HTML dokumentumok közötti „ugrások” végrehajtására 2 típusa: Abszolút esetén mindig a teljes elérési utat használjuk. PL.: www.avkf.hu/~kiscsatari.nora/index.htm Relatív esetén csak az aktuális könyvtárhoz képest adjuk meg, hogy hol helyezkedik el. PL.: letoltes/oprend.htm
Hivatkozások Mire használhatjuk? Ugrás egy másik oldalra <a href= "..\index.html">Vissza a főoldalra</a> Másik oldal megnyitása új ablakban <a href= "http://www.gmail.com" TARGET="_blank" > GMail új ablakban</a> Könyvjelzők <a href= " #eleje" >Vissza az elejére</a> Levél küldése levelező program segítségével <a href="mailto:kiscsatari@avkf.hu"> küldj levelet </a>
Képek kezelése Egyszerű kép <IMG SRC="kep.jpg"> Gyorstipp mutatása a képre állva: <IMG SRC="kep.jpg" alt="Ez egy kép"> Hiperhivatkozás egy képen <A HREF= "..\index.html"><IMG SRC= "fooldal.jpg"></A>
NVU - Bevezetés
NVU – Ablak felépítése
NVU - Nézetek Normál nézet – vizuális szerkesztéshez
NVU - Nézetek Minden HTML-elem – elemek kezeléséhez
NVU - Nézetek Forrás – forráskód szerkesztéséhez
NVU - Nézetek Előnézet – amit a böngésző mutatna
NVU – Megtekintés böngészőben
NVU – Oldal színe és háttere Formátum > Oldal színe és háttere
NVU - Szövegkezelés Kisebb, nagyobb betűméret Félkövér Dőlt Betűszín Aláhúzott Betűtípus Behúzás növelése, csökkentése Balra-, jobbra-, középre és sorkizárt Bekezdés-formátum Számozott, számozatlan lista
NVU - Képek
NVU – Képek kezelése Beszúrás > Kép
NVU – Képek kezelése
NVU - Hivatkozások
NVU – Hivatkozások kezelése
NVU – könyvjelző létrehozása
NVU – könyvjelző
NVU – Email hivatkozás
NVU - Táblázat
NVU – táblázat beszúrása Táblázat > Beszúrás > Táblázat
NVU – táblázat szerkesztése Helyi menüből
NVU – táblázat tulajdonságai
NVU – Webhely
NVU – Több lapból álló webhely Előnyei: Közzététel (feltöltés webszerverre, ftp-n keresztül) Fogd és vidd (Drag and Drop) módszerrel egyszerűen illeszthetők be képek, hivatkozások más lapokra Könyvtárak és fájlok egyszerű kezelése
NVU – Több lapból álló webhely
NVU – Több lapból álló webhely
NVU – Több lapból álló webhely
A végeredmény