Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Készítette: Turócziné Kiscsatári Nóra

Hasonló előadás


Az előadások a következő témára: "Készítette: Turócziné Kiscsatári Nóra"— Előadás másolata:

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= "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 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


Letölteni ppt "Készítette: Turócziné Kiscsatári Nóra"

Hasonló előadás


Google Hirdetések