HTML Alapok2-1

WEBLAPKÉSZÍTÉS
HTML ALAPOK+CSS
SEGÉDLETEK:
Oktató videók: Mérei Tamás html, css
Mádi Gábor: https://www.youtube.com/watch?v=D2SHXAHsvsY
További segédletek:
www.edubase.hu
http://htmlkezdoknek.blogspot.hu/
http://pcsysak.uw.hu/
https://www.w3schools.com/css/css_border.asp
http://www.webkalap.hu/html/html.php
Kódszerkesztés
Microsoft Office Sharepoint Designer Kódlapja
Használható még program: Notpad ++ - ez egy speciális szövegszerkesztő
Kódolás
Kódolás beállítása: File, Tulajdonságok, Nyelv: - UTF 8-as.
UTF: 8-bit Unicode Transformation Format, 8 bites Unicode átalakítási formátum
Az internetes karakterkódolás standardja. Támogatja minden karaktermegjelenítését, és így minden
nyelv egységes kódolást tud használni, megelőzve a betűk nem tervezett „átalakulását”.
Az ASCII kódtábla karaktereit használja.
Dokumentum típusának a megadása:

(X)HTML Doctype Declarations List:
http://www.w3.org/QA/2002/04/valid-dtd-list.html : Strict
Ezt beírjuk (másoljuk) a notpad első sorába: Ezt össze lehet húzni egy sorba is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Mentés
Index.html néven (vagy főoldal, vagy kiindulás)
Üres oldal kódjai:
A Tag-eket kiemli színesen.

Notpad: Ha valamelyik tag-re rákattintunk, mutatja a záró tag-jét is.
WEB-lap általános felépítése:
<!DOCTYPE html> A dokumentum típusa
<html> Az oldal eleje
<head> Fejrész:
Az oldal általános információit
<title>An HTML standard template </title> tartalmazza: az oldal címe,
<meta charset="utf-8" /> Meta-tag-ek: kulcsszavak, rövid leírás,

karakter kódolás
Fejrész vége
</head>
Törzs: a valóságos weblap, ezt látjuk ez

<body> jelenik meg.
Ez jelenik meg az oldalon.
Bekezdés tag: tagoljuk a szöveget
<p> Itt új bekezdést kezdünk… Bekezdpés vége
</p>
Törzs vége
</body>
Az oldal vége
</html>
TAG-ek: meg kell nyitni, és le kell zárni:

<html>
</html>
META TAG-ek:
A HEAD részben használjuk őket. Ezt csak egy /-el zárunk le.
Alap meta tag-ek:
<title> cím Ez jelenik meg a böngésző címsorában.
Szigorúan véve nem meta tag, de fontossága miatt kell
itt említeni. Ez az oldal címe, és az egyik legfontosabb
jelzés a Google-nak arról, hogy miről szól az oldal.
Max. 70 karakter.
meta http- Karakterkódolás Formátuma:
equiv = megadása <meta http-equiv=”Contetnt-Type”
”Contetnt- content=”text/html; charste=utf-
Type” 8”/>
meta name kulcsszavak Formátuma:
="keywords", <meta name =" keywords " content
=" honlaptervezés, marketing,
marketing tanácsadás, logótervezés
" />
Keresés optimalizáláshoz
Itt kell felsorolni az oldal kulcsszavait, 4-10 szót.
Fontos, hogy előfordulási gyakoriságuk sorrendjében
írjuk fel a szavakat, első helyre azt, amelyik a
legtöbbször szerepel az oldalon.
meta name= az oldal leírása A formátuma:
"description” <meta name =" description "
content =" Keresőoptimalizált, a
Googleban megtalálható honlapokat
készítünk. Marketing tippeket
adunk, hogyan fejlessze
vállalkozását. " />
Az oldal tartalmának összefoglalását kell itt
megfogalmazni 200 karakterben, újabb források szerint
150 karakterben.
meta name= Szerző megadása <meta name =" author " content ="
„Author” Sajer " />
meta name= Szerzói jogok
„Copyright”
meta name= Célközönség
„Distribution” megadása
meta name= Nyelv megadása
„Language”
A szövegformázás
Új bekezdés: <p> (paragraph) és zárása: </p>
Úgy tűnik, mintha a szöveg

tagolva lenne, de megtekintve
a böngészőben, ez folyamatos
szöveg lesz.
Bekezdésekre kell tagolni!
Bekezdés nyitó- és zárótag-je
Eredménye: a bekezdések
között távolságok lesznek.
Sortörés: <br/> (break) – a bekezdésen belül új sorban kezd valamit! (Ezt nem kell külön lezárni)
Tervező nézetben: SHIFT+ENTER-t ütünk.
Sortörés
Félkövér szöveg: <b> (bold) és záró tag-je: </b>
Ugyan ezt az eredményt érjük el a STRONG tag- et használva

Dőlt: <i> (italic) és és záró tag-je: </i>
Aláhúzott: <u> (underline) és záró tag-je: </u>
Felsőindex: <sup> (superscript) és záró tag-je: </sup>

Alsóindex: <sub> (subscript) és záró tag-je: </sub>
Címsorok: (Head) – kiemelt formázások:

<h1>Városok</h1>
CSS - stíluslapok
CSS = Cascading Style Sheets / Stílusok rendezett lapja
Típusai:
External CSS: A stílusok gyűjteményét egy külön fájl tartalmazza, amit csatolunk a HTML fájl-hoz.
(KÜLSŐ). Style.css – ebben a fájlban határozzuk meg a HTML stílusokat.
Össze kell kapcsolni az index.html-t a style.css-sel: (Formátum/CSS Stílusok/ Stíluslap csatolása)
A head részbe bekerül egy új sor: <link rel="stylesheet" href= "style.css"/>
Ezt a stíluslapot használhatjuk más HTML fájlhoz is.
Internal stílus: A stílust a HTML fájl Head részében

definiáljuk.
Ezek a stílusok csak ezen az oldalon használhatóak.
(EGYEDIEK- BELSŐ)
Inline stílus:
Meglévő stílust egyedi jelleggel látunk el.
Pl: A H1 stílus, csak ebben a sorban kap egy egyedi színt és margót.
Font-family: milyen betűtípust használjon a body. Több karaktertípust kínál fe, azt használ, ami a
számítógépre telepítve van.
Font-size: betűméret definiálása
Line-height: sortávolság
Margin: bekezdés közötti távolság. 4 értéke lehet:
Margin: 0, 0, 10, 0
fent jobbra lent balra
Margin: 0; mindegyik 0
Margin: 10px 0; fent és lent 10 px, jobb és bal margó 0 px.
Color: betűszín
Például:
A bekezdésekre
vonatkozó beállítások
Csak a dőltek
zöldek
Ha csak egy bekezdést szeretnék másként formázi, akkor azt az index.html-ben definiálom.
Font-weight: betűstílus: bold: (félkövér)

Bekezdések formázása:
Szöveg igazítása: (a bekezdés szélességén belül):

Text-align: left; right; center; justify;
Bekezdések szélessége: width: 500px;
Bekezdések háttere: background: #ddd;
Bekezdés margója: margin: 10px (mindenütt)
A szöveg távolsága a kerettől (belül): Padding: 10 px;

(bélésnek is nevezik)
Bekezdés szegélye:
Vastagság: border-width: 2px;
Szegély stípus (pl: pontozott): border-style: dotted;
Szegély színe. Border-color: #000;
Ezt írhatjuk egy sorba is: border: 2px dotted #000; -
Class-szok
A programozók nem szeretik az egyedi formázásokat magában a HTML-ben, mindent kiszednek a
css-be: nevesítik a HTML-ben és a formátumot a CSS-ben leírják.
.
Elnevezzük a elso class-nak, amit formázni szeretnék, és definiáljuk a CSS-ben az eslo Class-t.
Csak a második bekezdés félkövérjei legyenek 20 px-esek!

„Elso” class
Italic: zöld
„Általános”
bekezdés
„Masodik” class
„Masodik b”
„Harmadik” class
„Masodik a„
(hivatkozás)
Felsorolás, számozás
Kóddal Eredménye
<OL> Ordered list Sorszámozás, a sorok LI-vel elválasztva (rendezett lista)

<UL> Unordered list Felsorolás, a sorok LI-vel elválasztva (nem rendezett lista)
Felsorolás szimbólumainak definiálása a HEAD-ben: Eredmény:
<body>
Definíciós lista
Hivatkozás
Abszolút hivatkozás: A Budapest szóra kattintva a www.budapest.hu oldalra ugrik:
<a href="http://www.budapest.hu">Budapest</a>
Relatív hivatkozás: A Berlin szóra kattintva az ajanlat.html lapunk nyílik meg: (benne van pl. a
mappánkban ez a fájl.)
<a href="ajanlat.html">Berlin</a>
E-mail küldése: A link egyik típusa, amikor levelet küldünk: (megnyílik az egyik levelező program, és
lehet írni a levelet)
<a href="mailto:sajer.zsuzsa@gmail.com">Ide küldheti véleményét!</a>
Könyvjelzőre hivatkozunk: Hivatkozhatunk a dokumentum egy adott pontjára. Ezt úgy érjük el, hogy
beállítunk egy könyvjelzőt, és erre a könyvjelzőre hivatkozunk!
Beszúrás/ Könyvjelző – el kell nevezni
Könyvjelző beszúrása: <a name="Szabályok">A játék szabályai:</a>
Hivatkozás rá: <a href="#Szabályok">Ugrás az oldal tetejére!</a>
Hivatkozások a css-ben formázva: A hivatkozás szövege 20 px, és ne legyen aláhúzása:

Hivatkozások típusai:
 LINK a normál, még fel nem keresett link

 VISITED a link, amit már felkerestünk
 HOVER a link, amikor az egeret fölé visszük
 ACTIVE a link, amire most állunk
text-decoration: underline; Aláhúzott legyen vagy NONE: akkor nincs aláhúzva

Képek
Beszúrás, kép , fájlból
<img alt="fővárosunk" src="bp.jpg" width="500" height="331" class="style3" />
img: a kép
scr: a fájl neve
alt: Helyettesítő vagy alternatív szöveg
Vonal
Beszúrás, HTML, Vízszintes vonal
<hr style="width: 500px" class="style6" />
Táblázatok
Táblázat: <table> </table>

Táblázat sorai: TR
Táblázat cellája: TD
Fejléc cellája: TH-
colspan: oszlopokat egyesít (span: átér, áthidal)

rowspan: sorokat egyesít
Caption: A táblázat címe:
Keretek - Border
Border Style: Keret stílusa
Lehetőségek:
PONTOZOTT
SZAGGATOTT
EGYSZERŰ VONAL
DUPLA
3D HATÁSÚ
3D HATÁSÚ
3D HATÁSÚ
3D HATÁSÚ
VEGYES
Keret kódolása: pl: p.dotted {border-style: dotted;} ha mind a 4 oldalon ugyan az
MIX keret stílusának megadása:
Vagy egy sorban: p.mix {border-style: dotted dashed solid double;}
Kétféle stílusú: p { border-style: dotted solid; } (lent-fent azonos és jobb-bal azonos.)

Keret vastagsága: BORDER-WIDTH
Például:
Keret színe: BORDER-COLOR
A színeket megadhatjuk:
1. Névvel: red
2. Hexadecimális számmal: #ff0000 (16-os számrendszerben megadott)
3. RGB Kóddal: "RGB(255,0,0)"
Háttér színe: BACKGROUND -COLOR
Egyben megadva:
p { border: 5px solid red; }
Példák:
Kerekített:
Űrlapok, űrlapelemek
Az űrlap elemeinek többségét az <input> tag segítségével lehet létrehozni. Nincs záró tagja.
Legfontosabb attribútumai, amelyek minden elem-típushoz hozzárendelhetőek:
 type: Az űrlapelem típusát adja meg. A HTML 4.01 szabványban megengedett

értékei: text, password, checkbox, radio, file, hidden, submit, reset, button, image.
 name: Az elem neve. Az űrlap adatait feldolgozó program ez alapján tudja azonosítani a
felhasználó által bevitt adatokat.
 value: Az űrlapelem kezdeti értéke. Kötelező megadni, ha a typeattribútum
értéke radio vagy checkbox, egyébként használata opcionális.
 id, class, style: általános attribútumok
Egysoros szövegmező: TEXT
Példa:
Felhasználó név:
<input type="text" name="username" size="35" maxlength ="50">
A példában szereplő attribútumok jelentése:
 size: A szövegmező szélességét adja meg a látható karakterek számában.

 maxlength: A beírható karakterek maximális száma. Az alapérték a végtelen.
Ha a maxlength értéke nagyobb, mint a size attribútum értéke, akkor a felhasználónak

lehetősége van arra, hogy több karaktert írjon a szövegmezőbe, mint ami abban
egyszerre látszódhat. Ez általában nem okoz problémát, mert a kurzort a billentyűzeten
lévő nyilakkal mozgatva a felhasználó el tudja érni a beírt szöveg minden részét.
Ha CSS-ben definiálom a szélességét:
input[type="text"] { width: 300px;}

Jelszó mező: PASSWORD
Példa:
Jelszó:
<input type="password" name="userpassword" size="20"
maxlength="15"> (maximum 15 karakter)
Ami így jelenik meg:
Az attribútumok használata megegyezik az egysoros szövegmezőnél leírtakkal.
A jelszó mezőben a beírt karakterek pont vagy csillag formájában jelennek meg, de a
"titkosítás" csak a képernyőre vonatkozik. Az űrlap elküldésekor a jelszó is egyszerű
szöveges adatként kerül továbbításra.
Jelölő négyzet - CHECKBOX
HTML űrlapokon jelölő négyzetek alkalmazásával érhetjük el azt, hogy a weblap

látogatója az előre felkínált lehetőségek közül tetszőleges számú opciót kiválaszthasson.
Példa:
Nyelvtudás:
<input type="checkbox" name="lang1" value="hu" checked>magyar<br>
<input type="checkbox" name="lang2" value="en">angol<br>
<input type="checkbox" name="lang3" value="de">német<br>
<input type="checkbox" name="lang4" value="other">egyéb<br>
Ezt a kódot a böngészők így jelenítik meg:
Ha a checked attribútum meg van adva, akkor a böngészők a négyzetet kiválasztott

állapotban jelenítik meg.
Rádió gombok: RADIO
A rádió gombok arra szolgálnak, hogy a weblap készítője által definiált lehetőségek közül
a felhasználók választhassanak. Az azonos name attribútummal rendelkező rádió gombok
alkotnak egy csoportot. Egy csoporton belül csak egyetlen egy gomb lehet bekapcsolt
állapotban.
Példa:
Legmagasabb iskolai végzettség:

<input type="radio" name="education" value="elementary">alapfokú<br>
<input type="radio" name="education" value="secondary" checked> középfokú
<br>
<input type="radio" name="education" value="higher">felsőfokú<br>
Ami a következőképpen jelenik meg:
A HTML szabvány ajánlása szerint a weblap

fejlesztőjének gondoskodnia kell arról, hogy az egyik
gomb alapértelmezés szerint bekapcsolt állapotban
legyen. (checked)
LABEL- CIMKE
<label for="kezdo"> Kezdő </label>

Ilyen esetben nem csak a rádiógombokra kattintva tudjuk „bepöttyözni” a megfelelő
választ, hanem a mellette lévő CIMKÉRE is kattinthatunk, és a pötty a helyére kerül.
Legördülő lista
SELECT -OPTION
<select name="carlist1">
<option value="none" selected>Válassz autó márkát</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
<option value="suzuki">Suzuki</option>
<option value="toyota">Toyota</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="opel">Opel</option>
<option value="vw">Volkswagen</option>
</select>
A MÓDOSÍTÁSban adhatjuk
meg, melyik legyen
kijelölve alapértelemzés
szerint
Ha több elemet Ha több elemet

akarunk egyszerre akarunk egyszerre
látni, itt adjuk meg kiválasztani
Fájl csatolása: FÁJL
Példa:
Csatolt fájl:
<input type="file" name="attachment" size="40">
Ami a böngészőben ilyen beviteli mezőt eredményez:
A size attribútum itt is a beviteli mező szélességét adja meg a látható karakterek
számában.
Űrlap elküldése: SUBMIT
Általában egy weboldalon azért készítünk űrlapot, hogy a látogatók elküldhessék az

általuk beírt információkat. Ehhez biztosítani kell számukra egy <Küldés> vagy más
hasonló feliratú gombot, amire kattintva a böngésző továbbítja az adatokat a szerver
felé.
Példa:
<input type="submit" value="Űrlap küldése">
Ez egy ilyen gombot eredményez a képernyőn:
Egy űrlap több küldés gombot is tartalmazhat.
Adatok törlése: RESET
Egy űrlapon belül <Reset> gomb is definiálható, ami törli a felhasználók által bevitt
adatokat. A gombra kattintva az űrlap mezők visszaállnak az oldal HTML kódjában
megadott alapértékekre. A szabvány nem ír elő kötelező viselkedésmódot arra az esetre,
amikor egy mezőre nincs kezdőérték megadva. (Ilyenkor a böngésző programok törlik a
mezőben lévő adatot, de az sem ellentétes a szabvánnyal, ha megmarad a felhasználó
által utoljára beírt információ.)
Példa:
<input type="reset" value="Adatok törlése">
Ami a következőképpen jelenik meg:

Többsoros szövegbeviteli mező: TEXTAREA
Csoport létrehozása:
<FILDSET> </ FILDSET> Ezzel nyitom és ezzel zárom a csoprtot!
<LEGEND> < /LEGEND> A csoportot ezzel nevezem el. A felső keret szélére kerül rá.
TAG-ek listája
html az oldal egészét magába foglalja
head fejrész
body az oldal látható részét foglalja magába
h1-h6 bekezdéscímeknél használjuk (az 1-es a legnagyobb méret)
p egy bekezdést jelöl
/br sortörés
hr vízszintes vonal
a linket jelöl
 kommentet jelöl
b félkövér betűstílus
i dőlt betűstílus
big a szöveg nagyobb méretű lesz
strong félkövér szerű kiemelés
sub alsóindex
sup felsőindex
address címek megadásánál használjuk
del áthúzás
u aláhúzás
abbr rejtett szöveg, akkor jelenik meg, ha a kurzort a szöveg fölött tartjuk
bdo tükrözött szöveget jelöl
blockquote hossző idézeteknél használjuk
q rövid idézeteknél használjuk
font betűtípus
img képet definiál
table táblázatot definiál
tr táblázat sort definiál
td táblázat oszlopot definiál
th táblázat sor vagy oszlop címet definiál
thead táblázat fejléce
tfoot táblázat lábléce
caption az egész táblázatnak címet adhatunk
colspan oszlopok egyesítése
rowspan sorok egyesítése
ol rendezett listát definiál
ul rendezetlen listát definiál
li listaelemet definiál
dl definíciólistát definiál
dt definiálandó fogalmat definiál
dd definíciót definiál
fildset űrlapoknál csoportot fog össze
legend űrlapok csoportjainak neve
label címke – erre is kattinthatunk

HTML Alapok2-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Alapok2-1

Uploaded by

Copyright:

Available Formats

WEBLAPKÉSZÍTÉS

Dokumentum típusának a megadása:

A Tag-eket kiemli színesen.

<meta charset="utf-8" /> Meta-tag-ek: kulcsszavak, rövid leírás,

Törzs: a valóságos weblap, ezt látjuk ez

TAG-ek: meg kell nyitni, és le kell zárni:

Úgy tűnik, mintha a szöveg

Bekezdés nyitó- és zárótag-je

Ugyan ezt az eredményt érjük el a STRONG tag- et használva

Felsőindex: <sup> (superscript) és záró tag-je: </sup>

Címsorok: (Head) – kiemelt formázások:

Ezt a stíluslapot használhatjuk más HTML fájlhoz is.

Internal stílus: A stílust a HTML fájl Head részében

Font-weight: betűstílus: bold: (félkövér)

Szöveg igazítása: (a bekezdés szélességén belül):

A szöveg távolsága a kerettől (belül): Padding: 10 px;

Csak a második bekezdés félkövérjei legyenek 20 px-esek!

<OL> Ordered list Sorszámozás, a sorok LI-vel elválasztva (rendezett lista)

Felsorolás szimbólumainak definiálása a HEAD-ben: Eredmény:

Hivatkozások a css-ben formázva: A hivatkozás szövege 20 px, és ne legyen aláhúzása:

 LINK a normál, még fel nem keresett link

text-decoration: underline; Aláhúzott legyen vagy NONE: akkor nincs aláhúzva

Táblázat: <table> </table>

colspan: oszlopokat egyesít (span: átér, áthidal)

Keret kódolása: pl: p.dotted {border-style: dotted;} ha mind a 4 oldalon ugyan az

MIX keret stílusának megadása:

Vagy egy sorban: p.mix {border-style: dotted dashed solid double;}

Kétféle stílusú: p { border-style: dotted solid; } (lent-fent azonos és jobb-bal azonos.)

Háttér színe: BACKGROUND -COLOR

p { border: 5px solid red; }

Legfontosabb attribútumai, amelyek minden elem-típushoz hozzárendelhetőek:

 type: Az űrlapelem típusát adja meg. A HTML 4.01 szabványban megengedett

Egysoros szövegmező: TEXT

A példában szereplő attribútumok jelentése:

 size: A szövegmező szélességét adja meg a látható karakterek számában.

Ha a maxlength értéke nagyobb, mint a size attribútum értéke, akkor a felhasználónak

Ha CSS-ben definiálom a szélességét:

input[type="text"] { width: 300px;}

Ami így jelenik meg:

Az attribútumok használata megegyezik az egysoros szövegmezőnél leírtakkal.

Jelölő négyzet - CHECKBOX

HTML űrlapokon jelölő négyzetek alkalmazásával érhetjük el azt, hogy a weblap

Ezt a kódot a böngészők így jelenítik meg:

Ha a checked attribútum meg van adva, akkor a böngészők a négyzetet kiválasztott

Legmagasabb iskolai végzettség:

Ami a következőképpen jelenik meg:

A HTML szabvány ajánlása szerint a weblap

<label for="kezdo"> Kezdő </label>

Ha több elemet Ha több elemet

Ami a böngészőben ilyen beviteli mezőt eredményez:

Űrlap elküldése: SUBMIT

Általában egy weboldalon azért készítünk űrlapot, hogy a látogatók elküldhessék az

<input type="submit" value="Űrlap küldése">

Ez egy ilyen gombot eredményez a képernyőn:

Egy űrlap több küldés gombot is tartalmazhat.

Adatok törlése: RESET

<input type="reset" value="Adatok törlése">

Ami a következőképpen jelenik meg:

You might also like