Tutorial van "Semmiiee" hij vroeg of ik het wou releasen

Hey iedereen,

Ik ga nog eens een poging maken voor en grote Scripttaal Tutorial.
We gaan hierbij de basics van 3 talen leren, namelijk:

CSS,
HTML,
PHP

We beginnen bij HTML.

1. Inhoud

Hoofdstuk 1) De basics tags
Hoofdstuk 2) Beginnen met je eerste Webpage
Hoofdstuk 3) Lettertype, en lettergrootte veranderen
Hoofdstuk 4) Tekst in het midden of rechts zetten.
Hoofdstuk 5) Formulieren maken
Hoofdstuk 6) Extra: Redirecting
Hoofdstuk 7) Extra tags
Hoofdstuk 8) Overview en Einde

Hoofdstuk 1) De basic tags
Voor iedere functie in HTML is er een bepaalde tag.
In HTML (en ook PHP)begint een tag met en eindigt met .
(Waar nu tag staat, gaat natuurlijk de tag staan van de functie).

Er zijn wel enkele uitzonderingen (bijv:
,

---

, ...)
Maar daar komen we later op terug.

De open- en eind tag van een html-script is doodsimpel, binnen de <> gewoon, het woord: "html" te schrijven.
Bijv;

<html>
<!-- Hier komt je script -->
</html>

In die tags komt dus heel je webpagina, maar dan zijn er nog 3 andere tags.
De volgende tags:




De head tag, hierin komt de title tag, en scripts van CSS (ook nog andere scripttalen bijv; Javascript)
De title tag, hierin komt de titel van je website die kunt zien in de browser. (Bijv; bij youtube.com is dat: Youtube -Broadcast Yourself)
De body tag, in de body tag, komt eigenlijk je hele webpagina (simpel gezegt). Hierin komen dan ook de PHP Scripts (php komt dus niet in de head-tag)!

Hoofdstuk 2) Beginnen met je eerste webpage!
Nadat we de basic-tags kennen gaan we beginnen we aan je eerste website.

In je BODY-Tags kun je gewoon tekst schrijven. Deze komt dan in standaart-lettertype (Times New Roman).
Meer hoef je toch eigelijk niet te kennen? (denk je...)

HTML is de makkelijkste scrip taal, en die heb je ook snel geleert.
-----
We kunnen dus gewoon tekst schrijven, spaties, alineas, etc... doen nu he?
of niet?

Neen.
1) Spaties
Als je bijv typt: "Hallo ik ben sem". Dan komt er simpel "Hallo ik ben sem". te staan,
Maar, als je dit wilt typen: "Hallo, Ik, ben SEM ." dan komt er te staan: "Hallo, Ik, ben SEM ".
Omdat er voor meer dan 1 spatie een code nodig is, namelijk:   .
Dat is 1 spatie/code.
Wil je 11x spatie? Dan moet je 11x   gebruiken!
Bijv:
           

2) Alineas
Er is ook een speciale tag ontwikkelt die bij html hoort, voor een alinea namelijk:

.
P staat voor paragraph oftewel, alinea. Zo simpel is het! .

3) Enter
Zo simpel is het niet, even een enter plaatsen en denken dat het zo is, neen hoor.
Als je een zin wil eindigen gebruik je de volgende tag:
.

------
Hoofstuk 3) Lettertype, en lettergrootte veranderen.

Omdat veel mensen liever andere lettertypes gebruiken dan de standaartlettertype "Times New Roman"
Is er ook een tag ontwikkelt voor de lettertype te veranderen.
Een ander woord voor lettertype is font.

En zo is de tag dan ook, neen. Het is niet maar er moet nog een woordje bij, namelijk het woord face.
Dit betekend gezicht.

Ik ben niet goed in de betekenis (preciese betekenis van een woord) dus ik weet niet waarom dat is,
Maar de tag is wel dus .

In de "" moet de lettertype zijn.
Bijv;
Tekst

Dan zal je tekst geschreven zijn in de font: arial.
------
De lettergrootte veranderen kan op 2 manieren.
Veel mensen gebruiken voor hun titel de H-Tag.
Deze zijn makkelijk te begrijpen.

= Groottste tekst

= Kleinste tekst

Natuurlijk is er dan ook nog

,

, etc.

Daarnaast zei ik dat er nog een andere manier was.
Jullie kennen de nu al. Achter/voor de face="" kun je size="" plaatsen.
IN de "" van size kun je dus, 1,2,3,4,5,6,... plaatsen. Hier heb je dus veel meer keuze uit tekstgrootte.

Hooftstuk 4) Tekst in midden of rechts zetten.

Je kan met de tag:

tekst

de tekst, links (standaart), center, of rechts zetten.
Align staat voor richten.

dus de richting waar de tekst staat, links, rechts, of in het midden.
(sorry voor onduidelijke uitleg. Maar ik kan het niet uitgebreider uitleggen).

Hoofdstuk 5) Formulieren maken
Een form maken doe je met de tags: .
Alleen moeten in de form nog wat functies staan.

ACTION=""
Action, oftewel. Waar de form moet naar "luisteren" waar de code staat wat de form moet doen
Bijv:

METHOD=""
De method, dit kan POST of GET zijn.
POST = direct weergeven (soort refresh van pagina, maar dan met extra info/ oid)
GET = ?p=pagina.php=pagina oftewel. Het gene wat word vergeven word achteraan de link geplakt.

Wat heb je nu?

Spoiler tonen

<form action="index.php" method="POST"></form>

In de formulieren kun je tekstvakken, buttons, ... maken.
TEKSTVAK:
PASS-PROTECTION:
BUTTON:

zo zijn er nog veel meer.
-----

Hoofdstuk 6) Extra: Redirecting
Makkelijk hooftstukje nu.

Een redirect kun je ook doen zonder en met een host.
a) Zonder host!

Zonder een host kun je (hier op one2xs) gewoon een HTTP-Direct instellen.
Super simpel.

Maar de andere is,
moet je in je index.php dit plaatsen:

Dat is een meta functie. Deze moet je in de head plaatsen.
Zoals je ziet staat er REFRESH, dus je site word automatisch gereresht en naar de url gestuurt die jij wilt.

Makkelijk, niet? .

-----
Hoofdstuk 7) Extra tags

---

= Een rechte (horizontale) lijn. Hier kun je ook de width, ... instellen (ook de kleur).

= Enter
= Link, tussen de "" moet je een link plaatsen. Als je dan op de tekst klikt word je doorgestuurt naar dat adres. (hyperlink)
= Cursieve tekst
= Vetgedrukte tekst
= Onderlijnde tekst
= Single-Regel waar je uitleg, info, ... kan schrijven. (alleen te zien in source)

Hoofdstuk 8) Overview en Einde

Ik hoop dat jullie van de html tut iets hebben van geleert.
Ik heb zoveel mogelijk uit gelegt dat ik kon,

Uitleggen is niet mijn beste kant.
Als er iets fout is a.u.b het laten weten door een reactie!

Als ik iets vergeten ben, even zeggen dan kan ik er ook wat over schrijven!
---------------------------------------

Nu gaan we beginnen aan de basics van CSS.

1. Inhoud

Hoofdstuk 1) Voorwoord
Hoofdstuk 2) Achtergrond instellen
Hoofdstuk 3) Div Id en Div Classes
Hoofdstuk 4) CSS Links
Hoofdstuk 5) Tables versieren
Hoofdstuk 6) Margin
Hoofdstuk 7) Extra: Alles op een rijtje.
Hoofdstuk 8) Overview en Einde.

Hoofdstuk 1) Voorwoord

Dit is mijn 2e deel van de tutorial.
CSS!

Ikzelf ben nog geen "master" van CSS.
Ik ken er wel al wat van, en alles wat ik kan ga ik dan ook uitleggen!

PS: Ik leg hier niet echt de basics uit. Maar gewoon handige dingen!
Hoofdstuk 2) Achtergrond instellen

Je ziet wel bij bijna elke website dat hun een achtergrond hebben.
En dat gaan wij ook leren bij dit hoofstukje.

Maar eerst moet je weten hoe en waar je de style-tags moet zetten.
In de head-tags. Moet je de style tags zetten.

Zoals je weet is dit gewoon .
Alleen moet zoals mbij formulieren in de tag nog wat tekst.
Hier moeten we de type aangeven. En dat is CSS.

EN we schrijven het met tekst. Dus dan word het: "type="text/css".
Dan krijgen we dus: .

Maar nu terug over naar de achtergrond.
We moeten eerst aangeven waar we dat willen.
We willen dat natuurlijk over de hele pagina, en zoals jullie weten in de webpagina in de body-tag.
Dan schrijven we al dit:

<style type="text/css">
body {}
</style>

De {} staat er ook bij ja, en moet er ook bij. Tussen deze dingen moet je de functies schrijven wat er moet gebeuren.

En achtergrond betekend in het engels "Background". En kleur betekend "color". Dus je doet doodsimpel background-colorleur; daar.
PAS OP! Je moet de kleuren OF in kleurcode (#000000) schrijven, of in het engels (black, green, yellow, ...)

Maar veel mensen gebruiken images (plaatjes) als achtergrond. Dan verander je gewoon de "-color" in "-image".
Dan krijg je:

<style type="text/css">
body {background-image: imageurl;}
</style>

Toch?

Bijna! Je moet nog na de : schrijven; url(); . Tussen de moet dan de image-url staan.

Hoofdstuk 3) Div Id en Div Classes

Je wilt een stukje uit je tekst een bepaalde css-code geven. Maar je weet niet hoe?
Met ID & Class kun je dit heel makkelijk.

Hier is weer een Div, nu is het

en

.
Met je tekst gebeurt niks. Maar alles tussen de class of id word "geselecteert".
Oftewel, de naam van je class of id kun je simpel in je stylesheet schrijven.

BIjv:
Je noemt je class sem, dan krijg je:

<html>
<head>
<title>titel hier</title>
<style type="text/css">
.sem {}
#sem {}
</style>
</head>
<body>
<div class="sem">Tekst hier.</div>
<div id="semmiiee">Tekst hier.</div>
</body>
</html>

Zoals je ziet word voor de class een punt (.) geschreven, en voor de id een #.
Meer niet! .

Hoofdstuk 4) CSS Links
Je ziet soms wel bij sites;
ALs je over een link gaat dat de tekstkleur verandert, en als je er weer af gaat weer verandert!
Of als je er op hebt geklikt een andere kleur heeft (niet standaart).

CODE:

a:link {color:#000000;}      
a:visited {color:#000000;}  
a:hover {color:#000000;}  
a:active {color:#000000;}

a:link.
Dit betekend als je er nog niet op hebt geklikt.

a:visited
Hiermee kun je de kleur bepalen nadat de gebruiker op de link heeft geklikt

a:hover
Dit betekend, als je over de link gaat dat de kleur een bepaalde kleur krijgt.

a:active
Dit is als je de link selecteert.

Hoofdstuk 5) Margin

a) margin-top
b) margin-bottom
c) margin-left
d) margin-right

Wat is het?
Met Margin kun je kiezen waar je tekst kan staan.
Dit word uitgedrukt in pixels (px).

Margin-top: Hoeveel pixels van de top je tekst moet staan.
Margin-left: Hoeveel pixels vanaf links je tekst moet staan.
Margin-right: Hoeveel pixels vanaf rechts je tekst moet staan.
Margin-bottom: Hoeveel pixels vanaf beneden de tekst moet staan.

Hoofdstuk 6) Extra: Alles op een rijtje.

Dit zou je nu moeten kunnen:

<!doctype html>
<head>
<title>Voorbeeld Test!</title>
<style type="text/css">
a:link {color:#000000;}      
a:visited {color:#000000;}  
a:hover {color:#FF00FF;}  
a:active {color:#000000;}  

body {background-color:red;}
.test1{
    margin-top:40px;
    margin-right:40px;
    margin-left:40px;
    margin-bottom:40px;
}
.test2{
    margin-top:50px;
    margin-right:40px;
    margin-left:40px;
    margin-bottom:50px;
}


</style>
</head>
<body>
<h1><div class="test1"><i>Voorbeeld.nl</i></div></h1>
<font size="2"><div class="test2">Tekst... Tekst... Tekst... Tekst... Tekst... Tekst... Tekst... Tekst... </div></font>
</body>
</html>

Hoofdstuk 7) Overview en Einde.

Ik weet dat mijn CSS Tutorial kleiner was dan HTML.
Omdat ik hierzelf ook niet echt pro in ben. Maar ik ken er wel al wat van.

Mijn sterkste vak in niet uitleggen. Maar alle codes zijn getest in PHPDesigner 7 dus normaal horen er geen fouten in de sripts te zitten!
-----------
Nu over naar het 3e deel, systemen maken: PHP .

1. Inhoud

Hoofdstuk 1) Begin tags
Hoofdstuk 2) Vars
Hoofdstuk 3) if, else
Hoofdstuk 4) $_POST (en $_GET)
Hoofdstuk 5) Overview en einde

Hoofdstuk 1) Begin tags

PHP is weer wat anders dan html.
Je kunt ze op 2 manieren openen en sluiten:



Ik raad aan om te gebruiken.

Bij php zijn er geen andere begintags zoals head, body, title.

Hoofdstuk 2) Vars
Een var begin je altijd met een dollarteken ($) en daarna komt de naam van je var.
Bijv: $test.

Daarna moet je de betekenis van de var schrijven, dit kies je ook zelf.
Bijv: $test = "Dit is een test";

Hoofdstuk 3) if, else

if () 
{
    then
}

Zoals je ziet,
if betekend als.

Ik ga een var aanmaken, allebei cijfers.

[COLOR= #0000BB]<?php
$date[/COLOR] [COLOR= #007700]=[/COLOR] [COLOR= #0000BB]11[/COLOR][COLOR= #007700];[/COLOR]
?>

En met de if, else kun je checken als het waar is wat er staat, of niet.

Dus we gaan doen:

Als 11 kleiner is dan 15 dan komt er te staan "JUIST!"
Als 11 groter is dan 15 komt er te staan "FOUT!".

Dan krijg je:

[COLOR= #0000BB]<?php
$date[/COLOR] [COLOR= #007700]=[/COLOR] [COLOR= #0000BB]11[/COLOR][COLOR= #007700];[/COLOR]

[URL="http://www.php.net/if"]if[/URL] [COLOR= #007700]([/COLOR][COLOR= #0000BB]$date[/COLOR][COLOR= #007700]<[/COLOR][COLOR= #0000BB]15[/COLOR][COLOR= #007700])
{[/COLOR]
    [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]"JUIST!"[/COLOR][COLOR= #007700];
}[/COLOR]
[URL="http://www.php.net/else"]else[/URL]
[COLOR= #007700]{[/COLOR]
    [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]"FOUT!"[/COLOR][COLOR= #007700];
}[/COLOR]
?>

Hoofstuk 4) $_POST en $_GET

Met $_GET en $_POST Kun je gegevens krijgen wat de gebruiker heeft opgeschreven.
Bijv:

Iemand schrijft op in een tekstvak "HALLO!" en dan drukt op submit. Dan je via $_GET of $_POST dan kunt zetten bv: "Je zei: HALLO!".

Bij dat werk je ook met een if-else statement.

GET:
Als je een tekstvak hebt met de naam: "name". En dan daar iets invult en verzend. Krijg je achter de url ?name=OPGEGEVENNAAM

POST:
Hetzelfde als GET eigenlijk. Alleen komt er niets achter de url te staan.

html code:

<!-- We gaan een formuliertje maken. -->
<form action="" method="post">
Naam: <input type="text" name="name">
</form>

PHP:

[COLOR= #0000BB]<?php
$naam[/COLOR] [COLOR= #007700]=[/COLOR] [COLOR= #0000BB]$_POST[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]name[/COLOR][COLOR= #007700]];[/COLOR] [COLOR= #FF8000]//met $_POST[naam] haal je dus op wat de gebruiker daar had geschreven[/COLOR]

[URL="http://www.php.net/if"]if[/URL] [COLOR= #007700]([/COLOR][URL="http://www.php.net/isset"]isset[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$naam[/COLOR][COLOR= #007700]))
{[/COLOR]
    [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]"Jou naam is:"[/COLOR] [COLOR= #007700].[/COLOR][COLOR= #0000BB]$naam[/COLOR][COLOR= #007700].[/COLOR] [COLOR= #DD0000]"!"[/COLOR][COLOR= #007700];
}[/COLOR]
[URL="http://www.php.net/if"]if[/URL] [COLOR= #007700]([/COLOR][URL="http://www.php.net/empty"]empty[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$naam[/COLOR][COLOR= #007700]))
{[/COLOR]
    [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]"Vul a.u.b iets in!"[/COLOR][COLOR= #007700];[/COLOR] [COLOR= #FF8000]//met deze functie check je als de gebruiker iets heeft ingevult. Als het niet is krijg je deze error![/COLOR]
[COLOR= #007700]}[/COLOR]
?>

Hoofstuk 5) Overview en einde
Ik weet dat ik de PHP Fel heb ingekort.
Maar toch nog het belangrijkste van de basics heb gezegt, of niet?
Ik heb +- 4 uur gedaan over deze tutorial te schrijven. Als ik fouten heb geschreven (in scripts!) a.u.b het melden! .
Uitleggen is niet mijn beste vak, maar ik heb zo veel mogelijk gezegt dan ik kon!

Met vriendelijke groet,
Semmiiee

Wat een faal.

Quote:
Met vriendelijke groet,
Semmiiee

Het is van semmiiee en hij vroeg of ik het wil releasen op one2xs sindsdien hij geband is

nice uitgelegd, maar je hebt een beetje simpele tags uitgelegd.

Niet slecht als basis-basis maar je zegt bij het begin nogal verwarrend hoe de tags in elkaar steken, dat maakt opzich niet veel uit maar ik zou dan wel eventjes een voorbeeldje erbij doen

Leuk gedaan semmiiee. .

Bij PHP en dan H1 staat een klein foutje:

Quote:
Bij html zijn er geen andere begintags zoals head, body, title.

Moet PHP zijn
Verder een keurige Tut

edited thankx

Ik gebruik php ook in html bestanden?
Ik heb gewoon een index.html.

Zit CSS bij, en de PHP Tags, en HTML tags
Dus ze gaan wel samen

Dylano schreef:

Ik gebruik php ook in html bestanden?
Ik heb gewoon een index.html.

Zit CSS bij, en de PHP Tags, en HTML tags
Dus ze gaan wel samen

Mmmh, dat is raar.
PHP werkt niet als ik een .html file maak.

Skytop schreef:

Eerdere citaten tonen

Dylano schreef:

Ik gebruik php ook in html bestanden?

Ik heb gewoon een index.html.

Zit CSS bij, en de PHP Tags, en HTML tags
Dus ze gaan wel samen
Mmmh, dat is raar.
PHP werkt niet als ik een .html file maak.

Dat moet je ook met .htaccess instellen. Bij mij werkt het wel.

Deze tutorial faalt. Want er word gesproken over een scripttaal maar html is geen scripttaal.
En waarom is er in een html tutorial voor beginners ook php toegevoegd??

Freestyle schreef:

Deze tutorial faalt. Want er word gesproken over een scripttaal maar html is geen scripttaal.
En waarom is er in een html tutorial voor beginners ook php toegevoegd??

Als je kon lezen staat er, HTML, CSS & PHP tutorial.
Je mag semmiiee niet. Daarom zeg je dat deze tutorial faalt.

Schrijf eens zelf een tutorial. En dan gaan we eens vergelijken.
Ik vind dit juist een handige tutorial.

Als je geen PHP wilt, kijk je toch alleen naar de HTML/CSS gedeelte?

Ik vind het PHP stukje veel te kort