Informatikai rendszerek HTML alapjai gyakorlat 2
A HTML alapjai A html állományok alapfelépítése: <html> <head> <title> dokumentum címe </title> </head> <body> dokumentum tartalma </body> </html>
Egyéb szövegformázások <address> postacímet jelöl ki.</address> <blink> ez itt villog, de csak netscape-ben! </blink> <MARQUEE> ez egy mozgó szöveg </MARQUEE> <big> nagyobb karakterméret </big> <blockquote> szövegblokk - érdemes kipróbálni!</blockquote> <code> programkód - a más betűstílus miatt érdemes használni</code> <s> keresztülhúzott szöveg</s> <small> kisebb betűméret </small> <strong> vastagított megjelenés </strong> <sub> alsó index </sub> <sup> felső index </sup>
Html linkek Szintakszis: <a href="url"> Link text </a> Példa: <a href="http://www.uni-miskolc.hu" target="_blank">Miskolci Egyetem</a> Horgony: <a name="teszt">teszt</a> Link a horgonyra: <a href="#teszt">ugorj a teszt horgonyra</a> E-mail küldés: <a HREF="mailto:htmlinfo@htmlinfo.hu">írj nekem</a> Link szinezése: <body link="#808080" vlink="red">
Képek linkelése Szintakszis: <IMG SRC="kepek/pelda.gif"> Paraméterek: width="x" height="y" border="z" alt="szöveg" align="right" (left,center,right,middle) Példa: <p> <img src="logo.gif" alt=„cég logó" width="100" height="100" align="middle" > This is some text. This is some text. This is some text. </p>
Űrlap vezérlők Egyszerű űrlap két szövegmezővel: <form> Keresztnév: <input type="text" name="firstname"> <br> Vezetéknév: <input type="text" name="lastname"> </form>
Űrlap vezérlők Rádió gombok: <form> <input type="radio" name=”nem" value=”férfi"> Férfi <br> <input type="radio" name=”nem" value=”nő"> Nő </form> Alapértelmezetten bejelölt gomb a checked=”checked” attribútummal adható meg.
Űrlap vezérlők Checkboxok <form> <input type="checkbox" name="bicikli"> Van egy biciklim <br> <input type="checkbox" name="auto"> van egy autom </form>
Űrlap vezérlők Legördülő menük <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>
Űrlap vezérlők Szövegmező Díszített legördülő <textarea rows="10" cols="30"> Ide egy hosszabb szöveg írható </textarea> <select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </select>
Email küldés <form name="fel11" action="mailto:hivatalos@tferi.hu" method="post" enctype="text/plain"> Kérem a nevét! <input type="text" name=”mintaUserNev"> <br> <input type="submit" value="Mehet!"> <br> <input type="reset" value="Mégsem"> </form>
<html> <head><title>Űrlapok készítése - Példa</title></head> <body> <form name="urlap_1" method="post" action="mailto:myd@netposta.net"> <input type="radio" name="valasztogomb_1" checked>1. választógomb <input type="radio" name="valasztogomb_1">2. választógomb <input type="radio" name="valasztogomb_1">3. választógomb <br><br> <input type="checkbox" name="jelolonegyzet_1" checked>1. jelölőnégyzet <input type="checkbox" name="jelolonegyzet_2">2. jelölőnégyzet <input type="checkbox" name="jelolonegyzet_3" checked>3. jelölőnégyzet <input type="text" name="szovegmezo_1" value="1. szövegmező" size="13"> <input type="text" name="szovegmezo_2" value="2. szövegmező" size="20"> <input type="button" name="gomb_1" value="1. gomb" onClick="alert('1. gomb lenyomva!')"> <input type="button" name="gomb_2" value="2. gomb" onClick="alert('2. gomb lenyomva!')"> <select name="valasztomenu_1" onChange="alert('Megváltozott a kijelölés!')"> <option name="menupont_1" value="1">1. menüpont <option name="menupont_2" value="2" selected>2. menüpont <option name="menupont_3" value="3">3. menüpont <option name="menupont_4" value="4">4. menüpont </select> <textarea cols="20" rows="5" name="szovegmezo_4" value=„nagyszoveg">nagy szovegmezo</textarea> <input type="submit" value="Elküldés"> <input type="reset" value="Törlés"> </form> </body> </html>
Az űrlap megjelenése böngészőben Az eredmény az elküldés gomb lenyomását követően után
A CSS alapjai http://weblabor.hu/cikkek/cssalapjai1 Miért jó a CSS? <html> <head> <title>CSS példa</title> <style type="text/css"><!-- h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; } --></style> </head> <body> <h1>Bevezetés</h1> <p>A vers...</p> <h1>Tárgyalás</h1> <p>A költő...</p> <h1>Összefoglalás</h1> <p>Végezetül</p> </body> </html> <html> <head> <title>CSS példa</title> </head> <body> <h1><font size="4" color="#a00000">Bevezetés</font></h1> <p><font size="2" color="#00a000">A vers...</font></p> <h1><font size="4" color="#a00000">Tárgyalás</font></h1> <p><font size="2" color="#00a000">A költő...</font></p> <h1><font size="4" color="#a00000">Összefoglalás</font></h1> <p><font size="2" color="#00a000">Végezetül...</font></p> </body> </html>
A CSS alapjai CSS formázás HTML oldalon belül <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>Header 1</h1> <p>A paragraph.</p> </body> </html> Elemhez rendelt stíluslap: <h1 style="font-size: 20px; color: #a00000;">Bevezetés</h1>
A CSS alapjai CSS hozzákapcsolása a HTML-hez <head> <link rel="stylesheet" href="kulso.css" type="text/css"> </head> A kulso.css fájl tartalma: h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; }
A CSS alapjai Osztály és azonosító alapú CSS definíciók <html> <head> <style type="text/css"> h1 {color:red;} p {color:blue;} .osztaly {color:green; font-size:20px;} #szoveg { color: #ff0000; } </style> </head> <body> <h1>Header 1</h1> <p>A paragraph.</p> <p class="osztaly">green paragraph</p> <p id="szoveg">gray text</p> </body> </html>
A CSS alapjai CSS leírás: http://weblabor.hu/cikkek/cssalapjai1