Transcript HTML alapok
Weblapkészítés alapjai Legfontosabb parancsok, a weblap felépítése További segédanyagokat találsz: kossuth.ucoz.hu/8/htmlalap.htm www.w3schools.com/ weboldalakon. .HTM/.HTML fájlok készítése: A weblapfájlok gyakorlatilag szöveges dokumentumok. Üres weblapfájl készítéséhez legegyszerűbb módszer: készítünk egy egyszerű szöveges dokumentumot, majd módosítjuk a kiterjesztését .htm vagy .html típusúra. pl.: total commander segítségével Egyszerű szöveges dokumentum létrehozása és átnevezése: index.txt index.htm 2 Objektumok HTML-ben: <objektumnév kapcsoló1 kapcsoló2 …> Néhány példa: <BODY bgcolor=RED background=hatter.png> <IMG src=kép.jpg width=300 height=400> <A href=http://google.hu target=_blank> <H1 align=center> <P align=justify> <FONT color=#00FF00 size=4> <DIV style=„margin-left:200”> 3 HTML dokumentum alapszerkezete: <!– Megjegyzések készítése --> <HTML> <!-- Weblap kezdete. --> <HEAD> <!-- Fejléc kezdete. --> <TITLE> Weblap címe </TITLE> <!-- Cím --> </HEAD> <!-- Fejléc vége. --> <BODY> <!-- Tartalom kezdete. --> <P>Egy bekezdés.</P> </BODY> <!-- Tartalom vége. --> </HTML> <!-- Weblap vége. --> 4 Objektumok és kapcsolóik: A fejléc <HEAD> <title>weblap címe</title> <!--weblap címe--> <meta http-equiv=„content-language" content="hu" /> <!-- weblap nyelve--> <meta charset="UTF-8"> <!– weblap karakterkódolása --> <meta name="description" content=„weblap leírása"><!– leírása a weblapról --> <meta name="keywords" content=„kulcsszavak helye"> <!--kulcsszavak--> <meta name="author" content=„készítő neve"> <!--készítette--> <link type="text/css" rel=„stylesheet" href=„style.css„> <!--stíluslap hozzárendelése--> <link rel=„shortcut icon" href=„ikon.gif" /> <!--weblap fülön megjelenő kép--> </HEAD> 5 Objektumok és kapcsolóik: BODY <BODY bgcolor=#00FF00> <!--háttérszín színkóddal--> <BODY bgcolor=GREEN> <!--hátérszín névvel--> <BODY background=„kep.PNG”> <!--háttérkép megadása--> <BODY link=> <!-- még nem látogatott linkek színe --> <BODY alink=> <!-- aktív linkek színe (egér a linken) --> <BODY vlink=> <!-- látogatott linkek színe --> <BODY text=> <!-- szövegek alapértelmezett színe --> </BODY> 6 Objektumok és kapcsolóik: Szöveges tartalmak <P align=„X”> <!-- egyszerű bekezdés igazítva X szerint: (X lehet=left, right, center, justify) --> <H1>címsor1</H1> <!-- Nagyobb betűméretű bekezdések. --> <H6>címsor1</H6> <!-- legnagyobb méretű: 1 legkisebb: 6 --> <PRE> </PRE> <!-- Olyan különleges bekezdés amely megjeleníti a „felesleges” szóközöket és tabulátorokat. Formálható szövegkép. --> 7 Objektumok és kapcsolóik: Kép, link beszúrása <IMG SRC=„kep.jpg” width=500 height=300> <!-- SRC(source) kép helyének megadása, Width kép szélességének beállítása, Height kép magasságának beállítása. --> <A href=http://www.google.hu>Google!</A> <A href=szöveg.docx>tölts le</A> <!-- href(hivatkozás) hova mutasson a link (ez lehet weblap vagy egy fájl Megjelenő szöveg. --> 8 Objektumok és kapcsolóik: Rétegek használata <DIV style="color:#0000FF" align=center> <H1> tartalom </H1> <P> tartalom </P> </DIV> <!-- Align: a benne lévő tartalom igazodása, Color: a tartalmak szövegének színe, Bővebben a div tag használatáról és előnyeiről: http://www.w3schools.com/html/html_layout.asp--> 9 Objektumok és kapcsolóik: Táblázat <TABLE border=2> <TR> <TD> 1. sor 1. cella </TD> <TD> 1. sor 2. cella </TD> </TR> <TR> <TD> 2. sor 1. cella </TD> <TD> 2. sor 2. cella </TD> </TR> <TR> <TD colspan=2> 3. sor 2 db összevont cella vízszintesen</TD> </TR> <TR> <TD rowspan=2> 4.-5. sor 2 db összevont cella függőlegesen</TD> <TD> 4. sor 2. cella </TD> </TR> <TR> <TD> 5. sor 2. cella </TD> </TR> </TABLE> 10 További ötletek: http://www.w3schools.com/tags/tag_table.asp Táblázat legfontosabb attribútumai: 11 Attribútumok (kapcsolók) Értékek Leírás align left center right Teljes táblázat igazítása. bgcolor rgb(x,x,x) #xxxxxx szín neve Háttérszín border szám Keretvastagság cellpadding Pixel Cellák közötti térköz nagysága cellspacing Pixel Cellán belüli térköz nagysága (cella fala és a tartalom között) width Pixel % Táblázat teljes szélessége