Programozósuli!
Az alábbiakban érhetők el a webszerkesztés-tanuláshoz szükséges anyagok.
- Az első alkalommal megismertük a leíró nyelvek működését egy webes kódszerkesztő segítségével, ahol lehet próbálgatni a webszerkesztést, és látszik is rögtön az eredmény. Ez a kódszerkesztő itt érhető el: http://prog.hangfarm.hu/szerkeszto/
- Szintén az első alkalommal megtanult mindenki alaprajzot tervezni a Sweet Home 3d segítségével. Ez valamiért népszerűbb volt:)
- A második alkalommal, december 3-án képet szerkesztettünk, feltöltöttük erre a webhelyre, majd beillesztettük egy weboldalba. Vagyis ki-ki létrehozta első saját weboldalát!:) A folyamat során használt eszközök:
- Egy, böngészőben futtatható képszerkesztő: SumoPaint
- Egy, szintén böngészőben futtatható ftp alkalmazás: Net2ftp (hozzáférési adatokat kérd el Balázstól!)
A kódot a Net2ftp szerkesztőjében hoztuk létre és módosítottuk. Alább Gréti oldalának első változata látszik:
<![CDATA[
<html>
<head>
<title>Ide írd az oldalad címét</title>
</head>
<body>
Üdvözöllek az oldalamon!<br>
<img src="http://prog.hangfarm.hu/kepek/Greti.png" width="50px" height="400px"><br>
Ez a kép ma készült!
</body>
</html>
]]>
- A harmadik alkalommal, december 17-én kiegészítettük ismereteinket a színkeverés hexadecimális kódjaival (itt ki is próbálhatod őket), így ezeket, valamint a betűtípusokra vonatkozó stílusleírásokat is (lásd itt és itt)
hozzáadtuk a meglévő oldalakhoz. A head egység style definícióit nézd:
<![CDATA[
<html>
<head>
<title>Ez az oldal címe. Ide beírhatsz egyéni címet.</title>
<style>
body {
background-color: #FF00FF;
color: #FFFFFF;
font-family: "Impact", monospace;
font-style: italic;
font-size: 2em;
}
</style>
</head>
<body>
Üdvözöllek a Progsuli oldalán!
</body>
</html>
]]>
, aholis a body arra vonatkozik, hogy most a body egység (törzsszöveg) stílusbeállításai következnek. A background-color a háttérszínt (az #FF00FF a lila színt jelöli - az első FF pár a piros, a harmadik FF a kék jelenlétét, a középső 00 pedig a zöld szín hiányát jelöli), a color a betűszínt (piros, zöld és kék együtt, vagyis fehér), a font-family a betűtípust, a font-style a stílust (dőlt, stb.; ebben az esetben dőlt, vagyis italic), a font-size a betűméretet (2em = kétszerese annak, ami alapértelmezett lenne) határozza meg.
- Készítettem egy példagyűjteményt, hogyan is lehetne meglévő oldaladat fejleszteni: a szövegegységek egyedi formázásaival (span, id, class stb.), önálló egységek kezelésével (div), linkek és egyéb szilveszteri css-trükkök:) itt
Ajánlott weboldalak tanuláshoz: