Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Készítette: Turócziné Kiscsatári Nóra
Html bevezetés Készítette: Turócziné Kiscsatári Nóra
2
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
3
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
4
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
5
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
6
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
7
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>
8
Alapvető tagok - példa Böngészőben: Hello world! Nem került új sorba!
9
Alapvető tagok a BODY részben
Címformátumok <h1>cím 1</h1> <h2>cím 2</h2> … <h6>cím 6</h6>
10
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>
11
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>
12
Betűk Betű méretek: <font size="-2">szöveg</font>
Betű típusok: <font style="font-family: Calligraphic; ">szöveg</font>
13
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.: Relatív esetén csak az aktuális könyvtárhoz képest adjuk meg, hogy hol helyezkedik el. PL.: letoltes/oprend.htm
14
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= " 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 küldj levelet </a>
15
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>
16
NVU - Bevezetés
17
NVU – Ablak felépítése
18
NVU - Nézetek Normál nézet – vizuális szerkesztéshez
19
NVU - Nézetek Minden HTML-elem – elemek kezeléséhez
20
NVU - Nézetek Forrás – forráskód szerkesztéséhez
21
NVU - Nézetek Előnézet – amit a böngésző mutatna
22
NVU – Megtekintés böngészőben
23
NVU – Oldal színe és háttere
Formátum > Oldal színe és háttere
24
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
25
NVU - Képek
26
NVU – Képek kezelése Beszúrás > Kép
27
NVU – Képek kezelése
28
NVU - Hivatkozások
29
NVU – Hivatkozások kezelése
30
NVU – könyvjelző létrehozása
31
NVU – könyvjelző
32
NVU – hivatkozás
33
NVU - Táblázat
34
NVU – táblázat beszúrása
Táblázat > Beszúrás > Táblázat
35
NVU – táblázat szerkesztése
Helyi menüből
36
NVU – táblázat tulajdonságai
37
NVU – Webhely
38
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
39
NVU – Több lapból álló webhely
40
NVU – Több lapból álló webhely
41
NVU – Több lapból álló webhely
42
A végeredmény
Hasonló előadás
