1 / 42

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>

vita
Download Presentation

Html bevezetés

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 • 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 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.: 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

  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 href="mailto:kiscsatari@avkf.hu"> 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 – Email 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

More Related