HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML...
Transcript of HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML...
![Page 1: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/1.jpg)
HTML PROGRAMOZÁSALAPISMERETEKKÉSZÍTETTE: SZELI MÁRK 10.D
![Page 2: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/2.jpg)
REGISZTRÁCIÓ ATW.HU-RA
Kiválasszuk a webtárhelyet
Majd ingyenesre
beregisztrálunk
Kitöltjük az oldalunkhoz kapcsolódó adatokat!
![Page 3: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/3.jpg)
FTP KAPCSOLAT LÉTESÍTÉSE TOTAL COMMANDERSEGÍTSÉGÉVEL
Kitöltjük az FTP beállításokat!
Új kapcsolatot hozunk létre!
FTP kapcsolatot létesítünk!
![Page 4: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/4.jpg)
HTML FÁJL LÉTREHOZÁSA TOTAL COMMANDER-BEN
Kiválasztjuk az „Új”
gombot, majd ott a
„Text Document (.txt)”
(„Szöveges
dokumentum”)
Jobb klikkFőoldalt hozunk létre: „index.html” !
Design fájlt hozunk létre: „index.css” !
És létre is hoztuk! De még nem
tartalmaz semmit!
![Page 5: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/5.jpg)
HTML FÁJL SZERKESZTÉSÉNEK MEGNYITÁSA TOTALCOMMANDER-BEN
Jobb klikk
Kiválasztjuk „X64”, azon
belül az „Edit with
Notepad++”-t, azaz
„Szerkesztés
NotePad++-szal”
![Page 6: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/6.jpg)
FŐOLDAL
HTML 5!
!
!
!
!
!
Az oldal
Fej rész
Oldalcím, majd lezárása!
Design
Test – maga az oldal.
Navigációs link, majd lezárása!
Nem sorszámozott rész, majd lezárása!
Lista
a = hivatkozás
Elérési útvonal megadása! Cím beírása!
h1-h6: főcímek (ahogy növekszik a
szám, úgy csökken a méret;
természetesen ezeket is le kell zárni)
Fej rész bezárása!
Az oldal bezárása.Test – maga az oldal bezárása.
A hivatkozás,
majd a lista
lezárása!
INDEX.HTML
Ne navigáljon sehova A jelenleg aktív oldal
![Page 7: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/7.jpg)
INDEX.CSS
Margó
Lista előtti jel
TúlcsordulásHáttérszín
Elhelyezkedés
Soron belüli megjelenítésBetűszín
Szöveg elhelyezkedése
Ha rávisszük az egeret milyen
színű legyen
Az aktív oldal színe
#333
#4CAF50
![Page 8: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/8.jpg)
![Page 9: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/9.jpg)
MENÜ
![Page 10: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/10.jpg)
ALOLDAL LÉTREHOZÁSA
Létrehozunk egy mappát az
aloldalnak!
Informatika-ismeretek aloldalnak
létrehozzuk az „infism” almappát!
Az „infism” almappán belül létrehozunk az aloldalnak egy HTML fájlt!
• Ebben az esetben az „infism.html” fájl.
• Elérési útvonala: infism/infism.html
Természetesen az összes aloldalnak létre kell hozni külön mappát és
külön fájlt! (pl.: csharp/csharp.html vagy web/web.html vagy sql/sql.html
![Page 11: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/11.jpg)
INF-ISM
ALOLDAL
INFISM/INFISM.HTML
Változott az oldal címe!
../ jelentése: A gyökérmenütől való navigáció.
../ hiányában: Az adott aloldaltól kezd el navigálni.
Változott az oldal tartalma!
Ne navigáljon sehova!A jelenleg aktív oldal.
![Page 12: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/12.jpg)
![Page 13: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/13.jpg)
INF-ISM OLDAL FELTÖLTÉSE
INFISM/INFISM.HTML<BODY> … </BODY>
![Page 14: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/14.jpg)
INF-ISM OLDAL TETEJEINFISM/INFISM.HTML
<BODY> … </BODY> RÉSZ
<h1 align=”left”> = 1. főcím helyeződjön: balra
<h1 align=”center”> = 1. főcím helyeződjön: középre
<h1 align=”right”> = 1. főcím helyeződjön: jobbra
<b> = kiemelt
</b> - lezárás
<u> = aláhúzott
</u> - lezárás
<i> = dőlt
</i> - lezárás<br> = sortörés
<h1 align=”…”> = 1. főcím helyeződjön
![Page 15: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/15.jpg)
![Page 16: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/16.jpg)
NAVIGÁCIÓ KÜLÖN OLDALRAINFISM/INFISM.HTML
<BODY> … </BODY> RÉSZ
Elérési útvonal megadása!
Az oldal megnyitása új lapon!
Az oldal címe:
a = hivatkozás /a = hivatkozás lezárása
![Page 17: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/17.jpg)
![Page 18: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/18.jpg)
HTML FÁJL LÉTREHOZÁSA TOTAL COMMANDER-BEN
Jobb klikk
Kiválasztjuk az „Új” gombot, majd ott a
„Text Document (.txt)”
Majd beírjuk névként, amit megadtunk
NotePad++-ban!
És létre is hoztuk! De még nem tartalmaz
semmit!
![Page 19: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/19.jpg)
Ha most megnézzük az oldalunkat, akkor láthatjuk, hogy jelenleg
nem tartalmaz SEMMIT!
Ezért most feltöltjük!
![Page 20: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/20.jpg)
INFISM/LAPTOPOK.HTML
Az oldal címét változtatjuk meg!
Visszaállítotjuk a navigálást!
Más címet adunk neki!
![Page 21: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/21.jpg)
![Page 22: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/22.jpg)
FELTÖLTJÜK AZ OLDALT!
![Page 23: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/23.jpg)
![Page 24: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/24.jpg)
KÉP FELTÖLTÉSEimg=kép
src=a kép elérési útvonala alt=kép neve width-szélesség height-magasság
Pixelben megadva! (px)
Ahhoz, hogy a kép megjelenjen, be kell tenni abba a mappába, ahol dolgozunk!
Ebben az esetben az „infism” almappába kell letölteni a képet!
Figyeljünk arra, hogy a kép se túl nagy, se túl kicsi ne legyen!
![Page 25: HTML programozás Alapismeretekusers.atw.hu/infism/programozas/htmlprogramozasalapjai.pdf · HTML PROGRAMOZÁS ALAPISMERETEK KÉSZÍTETTE: SZELI MÁRK 10.D. REGISZTRÁCIÓ ATW.HU-RA](https://reader033.fdocuments.net/reader033/viewer/2022041906/5e635c165305c076150c9bd8/html5/thumbnails/25.jpg)