A webfejlesztés
Fejezetek:
HTML
CSS
Include-olás
Frame
Sitemap
Egyéb
Weboldalkészítés
Megosztás
Blog
Egyéb2
Linkek
A HTML
HyperText Markup Language (Hiperszöveges jelölőnyelv)
A honlap kinézete:
1.
HTML típus deklerálása.
Ha pl. XHTML szabványt használjuk, akkor a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
kódot érdemes a HTML fájlunk elejére rakni.
2.
Honlap címe, a fej.
<html>
<head>
<title>Ide írjuk a honlap címét,amely megjelenik a böngészőben címként</title>
</head>
3.
A honlap teste, a BODY. Ide írjuk a megjelenítendő részeket.
<body>
Tartalom
</body>
4.
A zárótag
</html>
Mit jelenítsünk meg a honlapon?
Bekezdések:
<p> Bekezdés</p>
Sortörések:
<br>
<clear left> bekezdés törés
Elválasztóvonalak:
<hr>
Címek, nagyobb betűméretű szövegek:
<h1>Szöveg</h1>
<h2>Szöveg2</h2>
<h3>.....
Felsorolás:
<ol> felsorolás</ol>
<ul> megszámozott</ul>
<li> meghatározás</li>
<dl> <dt>1. fogalom</dt> <dd>az első fogalom magyarázata</dd> <dt>2. fogalom</dt> <dd>a második fogalom magyarázata</dd> </dl>
Képek:
<img src=”megjelenitendokep.jpg”>
Linkek:
<a href=”http://www.origo.hu/>Az Origo hírportál</a>
Táblázat:
<table> <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> </table>
Formázás, tulajdonságok:
<b>félkövér szöveg</b>
<i>dőlt szöveg</i>
<u>aláhúzott szöveg</u>
<big>nagyobb szöveg</big>
<pre>előre formázott szöveg</pre>
<small>kisebb szöveg</small>
<strike>áthúzott szöveg</strike>
<sub>alsó index</sub>
<sup>felső index</sup>
Igazítás
align=”left”
pl. <p align=”left”>Balra rendezett bekezdés</p>
align=”right”
align=”center”
align=”bottom”
align=”top”
Linkek, szövegek színe, mérete:
Szöveg színe
<body text="#000066">
Link színe
<body link="#000066">
Látogatott link színe
<body alink="#000066">
Utoljára látogatott link
<body vlink="#000066">
Betűméret
<font size="2">2-es méret </font>
<font size="+2">2-el növelt méret </font>
Betűstílus
<font face="Comic Sans MS"> szöveg </font>
Betűszín
<font color="red"> Piros szöveg</font>
Háttér:
Háttérkép
<body background="kepek/hatter.gif">
Háttérszín
<body bgcolor="#000066">
Ismétlődés
repeat: vízszintes és függőleges ismétlődés
pl. <body background=”kepek/hatter.gif” repeat-y>
repeat-x: csak vízszintesen ismétlődik
repeat-y: csak függőlegesen ismétlődik
no-repeat: nincs ismétlődés
Valaminek a neve, szélessége, magassága, célja?
name azonosító
target célkeret
title információ
size vonal magassága
alt kép leírás
width kép szélessége
height kép magassága
pl. <img src=”hatter.gif” width=”200px” height=”200px”> vagy <img src=”hatter.gif” width=”15%” height=”15%”>
border kép szegélyének vastagsága
hspace vízszintesen kihagyandü térköz
vspace függőlegesen kihagyandó térköz
bordercolor keretszín
cellpadding cellahatár és szöveg közti távolság
callspacing cellák közti távolság
cols oszlopok száma
left bal oldalra kerülés
right jobb oldalra kerülés
A CSS
Cascading Style Sheets - stíluslapok
Lehetőségünk van arra, hogy egy külső fájlban megadjuk a weboldalunk stílusát, jellemzőit.
<head>
<title>Oldal címe</title>
<link rel="stylesheet" href="kulso.css" type="text/css"> </head>
Betűszín:
p { color: #000000; }
Betűstílus:
p { font: bold 12px Comic Sans MS; }
Igazítás:
p { text-align: left; }
Betűméret:
p {font-size: 12px; }
Háttérkép:
body { background-image: url(hatter.gif); background-position: top left; background-repeat: repeat-y; }
Háttérszín:
body { background-color: #000000; }
Divek
Html-ben:
<div id="ab" > - elhelyezett div címzése (css-ben tulajdonságokat adhatunk meg neki) Css-ben:
#ab { width: 100px; }
Include-olás PHP-val
<?PHP
$p = $_GET['p'];
if(!isset($p)) {
$p = "start";
}
$file = $p . ".php";
if(file_exists($file)){
include("$file");
}
?>
Ahol a start - az alapértelmezetten megjelenített oldal neve.
Az aloldalak mindig .php-sak legyenek!
Az aloldalakban nem kell html, head, title és body tag.
Frame
<frameset cols="20%">
<frame src="valami.html">
<frame src="valami2.html">
</frameset>
<noframes>
az a szöveg, amely akkor jelenik meg, ha a böngésző nem engedélyezi a frame-ket... </noframes>
Sitemap
A botoknak érdemes ilyet csinálni...
Tartalmazhatja az oldalaid címét:
Neve: "sitemap.xml"
Szövegszerkesztővel így szerkeszd meg:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://ijcweb.extra.hu/</loc>
</url>
<url>
<loc>http://ijcweb.extra.hu/index.php</loc>
</url>
<url>
<loc>http://ijcweb.extra.hu/film/index.php?p=tortenet</loc>
</url>
</urlset>
Színkódok
"#000000"
Az ilyen szerkezetű html színkódokat RGB színek felhasználásával kaphatod meg. Képszerkesztő programok segítségével (pl. GIMP) meg tudod nézni, hogy mi a html színkódja egy-egy színnek (fekete - 000000, fehér - ffffff).
Gombok
CSS segítéségével tudsz csinálni.
Legyen egy linked, ami valami aloldalra mutat:
<a href="valami.html">
Ezután css-ben adj meg a linknek, és a hovernek is tulajdonságot:
a { text-color:#000000; }
a:hover { text-color:#FFFFFF; }
Egyéb szerkesztési lehetőségek
Ha úgy akarsz weboldalt készíteni, hogy nem akarsz forráskódokat tanulni és használni, helyette egy könnyebb lehetőséget választanál, akkor itt van néhány nyelv ismeretet nem igényelő program, vagy szolgáltatás:
eOldal.hu
Röviden: Magyar oldal, design-ből sok választási lehetőség van. Könnyen használható, jó fotóalbum kezelője van.
Google Page Creator
Röviden: Design-ből közepes mennyiségű választási lehetőség van :). Könnyen használható, picikét ugyan hiányos még.
Google Webhelyek
Portált hozhatunk létre itt.
350 webpages
Röviden: Angol nyelvű, design választási lehetőségek jók, színvonalas.
Mindenkilapja
Magyar nyelvű.
Gportál
Magyar nyelvű.
Joomla!
Telepítést igényelő rendszer. Nagyméretű portált hozhatunk létre vele.
Drupal
Telepítést igényelő tartalomkezelő rendszert. Portált hozhatunk létre vele.
Megosztás
Ha kész van a weboldalad, akkor már csak fel kell töltened valahova. Íme néhány tárhelyszolgáltató:
FreeWeb
500MB-s tárhely, MySQL, PHP, postafiók, és egyebek. Fájlméret korlátozásra ügyeljetek!
Ultraweb.hu
200MB-s tárhely, SQL, e-mail fiók!
ATW Internet
500MB tárhely, Php, MySql, e-mail fiók, fájlméret korlátozás nincs!
CJB.HU
Korlátlan tárhely, PHP, MySQl, Fórum, Chat. Fájlméret korlátozásra ügyeljetek!
TárHelyem.net
1GB tárhely, domain, mysql.
Fizetős tárhelyek
www.mediacenter.hu
fiberhost.hu
Blogolás
Ha nem akarsz egy website-ot létrehozni, hanem csak blogolni szeretnél, vagy információkat megosztani a világgal, akkor legegyszerűbb, ha telepített blog oldalakat használsz:
freeblog.hu
blog.hu
blogger.com
blogspot.com
blogging.hu
hotdog.hu
blogter.hu
Blogolás más módszerrel
Ha saját tárhelyre szeretnél feltölteni valamilyen blogmotort, amelynek segítségével nem kell weblapokat szerkesztened, vagy kódolnod, hanem elég telepíteni, és rögtön használhatod az üzembehelyezett blog-ot, akkor itt az egyik legismertebb blogmotor magyar oldala, ahonnan letölthető az:
Wordpress
Egyéb
RSS
<link rel="alternate" type="application/rss+xml" title="RSS - Tartalom" href="/rss" />
<link rel="alternate" type="application/rss+xml" title="RSS - Hozzászólások" href="/rss/hozzaszolas" />
Pl, ha van rss.xml, akkor:
</head> elé:
<link rel="alternate" type="application/rss+xml" title="RSS - Tartalom" href="/rss.xml" />
.htaccess
www.tutorial.hu/a-hasznos-htaccess-fajl/
Pl. könyvtár listázásának engedélyezése:
Adott könyvtárban legyen meg a .htaccess fájl.
Tartalma:
Options +Indexes
Ezt érdemes txt-fájlba menteni, először pl. htaccess.txt néven, aztán töltsd föl a tárhelyre .htaccess néven.
Könyvjelző ikon létrehozása:
<link rel="shortcut icon" href=" http://www.google.com/favicon.ico" type="image/x-icon"/>
Könyvjelzőt létrehozhatsz a következő weboldalon is! Csak egy e-mail címet kell megadnod, amire elküldi az oldal a kedvencek – ikont. http://www.favicon.hu/
Illetve magad is létrehozhatsz egyszerű képszerkesztővel: Javasolt: 16*16os vagy 32*32es képet szerkessz, majd mentsd el név.ico néven .ico formátumban.
XAMPP
Egyszerűen telepíthető szerver (HTTP, PHP, FileZilla szerverek)
http://www.apachefriends.org/en/xampp.html
Google Analytics
Google követő
https://www.google.com/analytics
Remek forgalomfigyelő. Honnan érkeztek, mennyi ideig, mely aloldalakat tekintették meg, böngésző, nyelv/ország, stb.
Linkek
fiberhost.hu - Tárhely, domain
www.w3schools.com
WebGraphiq - Webfejlesztés
Weblabor - a fejlesztői forrás
Webpillangó
Html kódok
Webfejlesztés - ELTE publikus tananyagai
Tamás Ferenc - html szerkesztés
Crazy but Real - honlapszerkesztésről, és egyebekről tutorialok
Oktatóvideók
Joomla! tartalomkezelő rendszer
Forráskód ellenőrző
Analizátor
Lynx Viewer
Free Web Button Maker
JAlbum albumgeneráló
Domain regisztráció
Honlapkészítés kezdőknek - Webdiák.hu
Ugrás az elejére!