Html bevezetés

Transcript Html bevezetés

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
<BODY>
</BODY>
</HTML>
Body rész
Ez a rész fog megjelenni
a böngészőben
•Karakterkészlet (kínai, cirill, stb..)
•Kereső információk
•Speciális utasítások
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:[email protected]"> 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
Bekezdésformátum
Behúzás
növelése,
csökkentése
Számozott,
számozatlan lista
Balra-, jobbra-,
középre és
sorkizárt
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