420 likes | 528 Views
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>
E N D
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 • 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 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 - 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 – 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 kezelése Beszúrás > Kép
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ö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