webmaster n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
webmaster PowerPoint Presentation
Download Presentation
webmaster

Loading in 2 Seconds...

play fullscreen
1 / 83

webmaster - PowerPoint PPT Presentation


  • 235 Views
  • Uploaded on

webmaster. syntra. Laurent Goossens. docent.laurent.goossens@gmail.com 35 10 jaar internetervaring iLibris ISP (hosting) docent webmaster CVO-Birm Antwerpen docent webmaster Syntra jullie zien eindigen met een certificaat webmaster!. Opleiding WebMaster.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'webmaster' - iram


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
webmaster

webmaster

syntra

laurent goossens
Laurent Goossens
  • docent.laurent.goossens@gmail.com
  • 35
  • 10 jaar internetervaring
  • iLibris ISP (hosting)
  • docent webmaster CVO-Birm Antwerpen
  • docent webmaster Syntra
  • jullie zien eindigen met een certificaat webmaster!
opleiding webmaster
Opleiding WebMaster

“ je leert er de basistechnieken voor het ontwikkelen, het beheren en het onderhouden van een professionele website”

  • Basisbgrippen webmaster
  • Bouwstenen ontwikkeling
  • Tools beheer en onderhoud
  • .: Creativiteit :.
opleiding webmaster1
Opleiding WebMaster

Basisbgrippen webmaster

  • Internet (algemeen, werking)
  • Websites (opbouw, werking, talen)
  • Hosting (webspace - dns)
opleiding webmaster2
Opleiding WebMaster

Bouwstenen ontwikkeling

  • Html taal : opbouw webpagina
  • Css taal : verfraaiing webpagina
  • Javascript en Forms (interactie)
  • Multimedia content invoegen
  • Dynamische content genereren
opleiding webmaster3
Opleiding WebMaster

Tools beheer en onderhoud

  • Dreamweaver
  • Firebug
  • XHTML en CSS validators
  • Referentiebronnen
  • Photoshop
  • Flash
  • Zoekmachines
  • FileZilla
  • LAMP-stack (apache – mysql - php)
  • CMS paketten
  • Code libraries (scriptalicious, jquery, wysiwyg)
cursus
Cursus
  • Verdeling
    • 75 uren
    • 25 weken
    • aan 3 uur/week les
    • plus (+) oefeningen thuis
    • Min (-) weken eindwerk evaluatie
cursus1
Cursus
  • Opbouw
    • Hoofdstukken
    • Tussen delen oefeningen en vragen
    • Oefeningen meenemen van/naar thuis
      • usb-stick,
      • email: webmail
    • Oef thuis maken
    • Oefenen, oefenen!
cursus2
Cursus
  • Evaluatie
    • Projectoef
    • Tussentijdse Evaluatie (dec-jan)
    • Vastgelegd packet – vaste evaluatie criteria – minimale verreisten
    • Afhankelijk van verloop meer stof/dieper in stof/meer oef
    • Eindwerk (website+ bespreking - aanwezigheid)
cursus3
Cursus
  • Voorstelling cursisten
    • Naam
    • Beroep
    • Voorkennis internet / grafisch / websites / html
    • Richting met kennis cursus
internet
Internet
  • Client server model
internet1
Internet
  • Browsers
    • Firefox (mac en pc)
    • Internet explorer (pc)
    • Chrome (mac en pc)
    • Safari (mac) + pc versie
  • Webservers
    • Apache : Unix OS
    • IIS Microsoft windows OS
  • Request / Response
internet2
Internet
  • Http : hyper text transfer protocol
  • Basis taal van het internet = Html = tekst! (view source) : hyper text markup language
  • http = de manier hoe de informatie over de draad gaat
  • html is bepaald de manier waarop het vertoond word (in browser)
internet3
Internet
  • Bestand/File opgebouwd in taal html wordt opgevraagd door de browser en geleverd door een webserver
  • De teruggezonden code wordt geïnterpreteerd door de browser en getoond aan de surfer.
  • Webpagina’s vraag – antwoord
  • Website = verzameling van webpagina’s in een folder op een webserver
internet4
Internet
  • Html : bouwstenen
  • Html aangevuld met
    • css : stijl
    • Javascript : manipulaties
  • Dynamische talen genereren html
    • php
    • asp, aspx (asp.net)
internet5
Internet
  • Uploaden / Downloaden (tijdelijke directory)
  • Ftp bestanden uploaden
  • Webtraffic : meetbaar
  • Browser cache (shortcut: F5 / ctr+ F5)
website
Website
  • Html : tekst juist opgebouwd vormen tags (objecten)
  • Opbouw object : syntax

<tag>inhoud</tag>

of

<tag/>

website1
Website
  • Basis architectuur html pagina : minimale code

<html>

<head></head>

<body>

PAGINA INHOUD HIER

</body>

</html>

website2
Website
  • Texteditor : notepad
  • Opslaan als .html
    • folder options
    • “hide know extensions “ … UITvinken
website3
Website

Oefening

  • Oef : eerste html pagina
  • <title>mijn title</title> : binnen head-tags: wordt NIET gerenderd (wel vertoond in de titlebalk)
  • <h1>Hello World!</h1> : binnen de body tags: wordt WéL gerenderd
  • Save as first.html in folder website_1 op desktop
website4
Website
  • Copy first.html naar second.html én naar third.html
    • shortcut: flag+E
    • Select bestand ctr+C  3 maal ctr+V  bestanden hernoemen
    • Files (bestanden)verbonden door links
website5
Website
  • Webpagina’s onderling verbonden door links
  • Interactief object (handje, kleur)
  • Oef : eerste links
  • Oef navigatie pagina : navigatie.html
website6
Website
  • Objecten en attributen
      • <a>link tekst</a>
      • <a href=”second.html”> second page </a>
      • <a href=”http://www.google.be “> search googl</a>
      • <a href=”http://www.google.be “ target=”_blank”> search google

</a>

website7
Website
  • Oef thuis : previous / next links + home link
  • Oef thuis : gegevens hosting verzamelen

(telenet, belgacom, ...)

- hostname

- username

- password

website8
Website

<html>

<head>

<title>de titel</title>

</head>

<body>

de inhoud

</body>

</html>

html html
<html></html>
  • Definieert een html pagina
  • Bevat alle markup:
    • Markup tags met inhoud
      • <object> : openingtag
      • </object> : closingtag
      • Vb :
          • <a>link</a>
          • <h1>hoofding</h1>
    • Markup tags zonder inhoud
      • <object/>
      • Vb :
      • <hr/>
      • <br/>
      • <img/>
head head
<head></head>
  • Wordt niet gerenderd
  • Dus niet zichtbaar in de browser
  • Bevat metadata, css data, javascripts
  • Vb : <title>de titel</title>

 vertoond in de crome (os gebonden)

body body
<body></body>
  • Wordt wel gerenderd
  • Zichtbaar in de browser
  • Beval alle te renderen markup (te vertonen opmaak)
  • Markup draagt info : hoofding, paragraaf, …

OF

  • Markup bouwt pagina op : tabel, lijntjes, prenten, …
oef thuis vorige week
Oef thuis vorige week
  • 3 pagina’s met elkaar gelinkt:
  • Previous – next – home
  •  zie usb stick
first html
first.html
  • <html>
  • <head>
  • <title>First</title>
  • </head>
  • <body>
  • <h1>First page</h1>
  • <a href="second.html">next</a>
  • </body>
  • </html>
second html
second.html
  • <html>
  • <head>
  • <title>Second</title>
  • </head>
  • <body>
  • <h1>Second page</h1>
  • <a href="first.html">previous</a>
  • -
  • <a href="third.html">next</a>
  • </body>
  • </html>
third html
third.html
  • <html>
  • <head>
  • <title>Third</title>
  • </head>
  • <body>
  • <h1>Third page</h1>
  • <a href="second.html">previous</a>
  • -
  • <a href="first.html">home</a>
  • </body>
  • </html>
tags en attributen
Tags en attributen
  • Attribuen  naam="waarde“
  • Worden toegeveogd aan start tag : <a>
  • Specifieren eigenschappen van dat object
  • geen, één of meerdere mogelijk
  • Sommige verplicht :

 noodzakelijk voor werking

vb: <a href="adres“>

  • Sommige optioneel :

 helpen de opmaak

 vb: <body bgcolor="red">

default attributen
Default attributen
  • objecten (tags) hebben default values
  •  Indien niet specifiek gezet : valt de waaarde terug op de default (onzichtbaar)
  • Vb :
    • border op een tabel:

<table>

== <table border= " 0" ></table>

Target bij link:

<a href= "adres" ></a>

== <a href= "adres" target=“_self”></a>

links
Links
  • href=“de gelinkte pagina“
    • Relatief pad : link naar pagina binnen website
      • href= “pagina.html “ : gelinkte pagina staat er naast
      • href= “pages/pagina.html “ : gelinkte pagina staat in een diepere map : pages
      • href= “../index.html “ : gelinkte pagina staat een niveau hoger
      • href= “/pad/pad/pad/pagina.html “ : beginnen van het hoogste niveau dieper en dieper in pad tot aan pagina
    • Absoluut pad : link naar pagina van andere website
      • Href=“http://www.google.be“
      • Href=“http://www.w3schools.com/tags/tag_body.asp“
links1
Links
  • target= "_self"  

opent pagina in zelfde tab/window

  • target= "_blank"  

opent pagina in nieuwe tab/window

  • (_parent, _top, framename)
href http www google be
href= “http://www.google.be"
  • Geen pagina?
  • Default behavior webserver
  • Zoek naar een default page in de webroot van je website (/)
  • index.html, index.htm, default.html, dfault.htm, index.php, default.asp, default.aspx, index.asp, …
oef default page
Oef default page
  • Onze oef
  • Alle pagingas in folder « pages»
  • Links aanpassen?
  • index.html aanmaken (op basis van /assets/basis.html) in webroot
  • Link naar first.html
surfer webserver
Surfer - webserver
  • Client server model
  • Vraag – antwoord
  • Hoe vinden de machines mekaar
  • IP address : 123.456.7.33
  • Webserver IP
  • Effectief adres op het internet waar een machine aangangt (client en server)
  • Client-IP vraagt pagina op bij Server-IP
  • Server-IP anwoord met pagina aan Client-IP
http 123 345 7 33 index html
http://123.345.7.33/index.html
  • Onmenselijk, onnaturlijk
  • Domeinnaam «google.be», «hotmail.com»
  • Domainname resolvement
  • Domain Name Server : DNS
    • Typen iets menselijk in browser
    • Vraag om te resolven wordt gesteld aan dns server
    • Dns server antwoord met ip
    • Effctieve vraag vertrekt naar webserver
dns niveaus
DNS niveaus
  • Tijd besparen
  • Vraag op verschillende niveaus gesteld
  • Eigen os
  • Access providers dnssen
  • Andere wereldwijde dnssen
  • Caches op alle nieveaus
  • Uiteindelijk slechts één DNS dat het adres permanent bewaart, publiceert bewaart
dns caches
DNS caches
  • Eigen pc :
    • Vlaggetje + R
    • cmd
    • ipconfig /flushdns
  • Access providers
    • +/- elke 2 uur
    • Atomatisch – niet te mnipuleren
  • Alles dnssen wereld (tot 48 uur)
  • Authoritive:
    • permanent
    • Editeerbaar
    • Zonefile
    • dnsrecords
dnsrecords
Dnsrecords

Authoritive nameservers : zij onthouden permanent

    • ns1.namserver.be
    • ns2.namserver.be
  • Zonefile
    • Default record : google.be
    • Subdomains :
      • www.google.be -> A -> 123.435.662.3

= standaard subdomein voor website

      • ftp.google.be -> A -> 123.435.6.556
      • Veelgebruikt subdomein voor FTP
    • Mx-Record : inkomende mailserver
      • pop.google.be -> A -> 143.44.3.111
doman tld
doman.tld
  • Top level domain
  • google.be : .be
  • Dns.be : België
  • Erid.eu : europa
  • één orgaan
  • Unieke namen!
  • Huur domein
  • Koppelen aan eigenaar (+ admin-tech)
  • Kopelen aan authoritive nameserver(s)
  • Generische (.com, .net, org, …)
  • http://whois.domaintools.com/hotmail.com
registrar registrant
Registrar - registrant
  • Eigenaar = registrant = liscensee
    • Persoon
    • Organisatie
  • Admin – tech
  • Registrar – agent : firma waar wij gaan « huren »
  • volgende week hosting  meer!
provider
Provider
  • Access provider : telenet, skynet, …
  • Internet Service Provider ISP: hosting
  • Mini hosting
  • Hostname (+usr +passwd)
  • http-address
    • later vervangen door eigen domeinnaam
  • FTP
  • http://filezilla-project.org/
    • Install, connect, upload
  • Local -> remote
  • Online! : surf!
new tags
New tags
  • <br/>
    • Break = new line
  • <p>paragraaf</p>
  • <hr/>
    • Horizontal rule
  • <font>
index html
index.html

My website

-----------------------------------------------------

First

Second

Third

Search Google

Webmaster pagina syntra

-----------------------------------------------------

Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien …..

slide49

<html>

  • <head>
  • <title>mijn website</title>
  • </head>
  • <body>

<h1>My Website</h1>

<hr/>

<a href="pages/second.html"> eerste pagina</a>

  • <br/>

<a href="pages/third.html"> tweede pagina</a>

  • <br/>

<a href="pages/first.html"> derde pagina</a>

  • <br/>

<a href="http://www.google.be" target="_blank"> search google</a>

  • <br/>

<a href="http://www.syntra-mvl.be/opleiding/Webmaster-186" target="_blank">

  • webmaster opleiding syntra
  • </a>
  • <br/>
  • <hr/>

<p>hallooo dan mijn eerste pagina, of is het nu de vijfde weet ik veel...maakt zelfs

  • niet uit , tis maar paragraafvulling hallooo dan mijn eerste pagina, of is het nu de vijfde weet
  • ik veel...maakt zelfs niet uit , tis maar paragraafvulling hallooo dan mijn eerste pagina, of is
  • het nu de vijfde weet ik veel...maakt zelfs niet uit , tis maar paragraafvulling hallooo dan
  • mijn eerste pagina, of is het nu de vijfde weet ik veel...maakt zelfs niet uit , tis maar
  • paragraafvulling</p>
  • </body>
  • </html>
object standaard gedrag
Object – standaard gedrag
  • Object vult gehele breedte parent object
    • <hr/>
    • <br/>
    • <p></p>
    • <h1></h1>
    • <body></body>
  • Object omsluit de inhoud
    • <a></a>
placeholders
placeholders
  • <table></table> : table
  • <ul></ul> : unordered list
  • <ol></ol> : ordered list

 samengestelde objecten/tags

ul ul ol ol
<ul></ul> | <ol></ol>
  • <ul></ul> : holder
  • <li></li> : rows

-------------

<ul>

<li>item 1</li>

<li>item 2</li>

</ul>

-------------

    • Item 1
    • Item2
table table
<table></table>

Holder <table></table>

Rows <tr></tr>

Columns <td></td>

<table border= " 1px " >

<tr>

<td>cel 1</td>

<td>cel 2</td>

</tr>

<tr>

<td>cel 3</td>

<td>cel 4</td>

</tr>

</table>

table table1
<table></table>
  • Standaard gedrag:
    • Géén breedte (tip: plaats een spatie in elke cel : &nbsp;)
    • Doorschijnend 
  • Standaard attribuut waarden:
    • Attribut : Border = "0px “
    • Attribut : cellpadding
      • afstand van inhoud cel tov celwand)
      • = " 2 px“
      • Tabel attribuut: slaat op alle cellen!
    • Attribut : cellspacing
      • Afstand tussen de cellen
      • " 2 px“
      • Tabel attribuut: slaat op alle cellen!
table td attributen
<table><td> attributen
  • width (% of px)
  • height (% of px)
  • bgcolor (yellow, green, red, blue, black, maroon, gray, white)
tr tr td td
<tr></tr><td></td>
  • Attribuut Valign

Vertical aligns the content in a cell

      • top
      • middle
      • bottom
  • Attribuut align

Horizontal aligns the content in a cell

      • left
      • right
      • center
      • Justify
      • <td valign=" middle" align="center" >centered text</td>
td td rowspan
<td></td> : rowspan

Atribute Rowspan : merge 2 or more row cells

<table border="1">

<tr>

<td rowspan="2">e</td>

<td>f</td>

<td>g</td>

</tr>

<tr>

<td>h</td>

<td>i</td>

</tr>

</table>

td td colspan
<td></td> : colspan

Atribute Colspan : merge 2 or more column cells

<table border="1">

<tr>

<td colspan="2">e</td>

<td>f</td>

</tr>

<tr>

<td>h</td>

<td>i</td>

<td>g</td>

</tr>

</table>

tags nesten
Tags nesten
  • <ul>
    • <li>
      • <a>link</a>
    • </li>
  • </ul>

-------------------------

  • <table>
    • <tr>
      • <td>
        • <a>link</a>
      • </td>
    • </tr>
  • </table>

------------------------------

  • <p>
  • Doorlopende tekst en dan opeens een woord dat een <a href="http://www.google.be">link</a>is.
  • </p>
  • <hr>
font font
<font></font>
  • Verouderd (vanaf CSS – niet meer gebruiken)
  • Attributen :
  • color = yellow, green, red, blue, black, maroon, gray, white : tekst kleur
  • face="Arial, Helvetica, sans-serif"
links positioneren op de pagina
Links positioneren op de pagina
  • Previous next
  • Table : width = 100%
  • 1 rij
  • 2 cellen
  • 2 links
  • <table border=“1” width=“100%”>
    • <tr>
        • <td><a href=“first.html”>previous</a></td>
        • <td align=“right”><a href=“third.html”>next</a></td>
    • </tr>
  • </table>
links extra
Links extra
  • Link binnen pagina
  • Oef : <a name=“tabel1”>
  • Link rond object : een tabel
  • Oef : volgende tabel
  • Hotspots : dreamweaver
iso chars
ISO chars
  • Spatie : &nbsp;
    • Effectieve inhoud aan bijv cel geven
  • € :
  • << : &raquo;
  • ¿ : &iquest;
  • Decode html entities
  • http://centricle.com/tools/html-entities/
  • <pre></pre>
  • Oef : tabel : view code
interactie
interactie
  • Formulieren
  •  data doorsturen
  •  interactie
  • <form></form>
form attributes
Form attributes
  • Action=“absolute – relative - mailto”
  • Method=“GET - POST”
  • Name=“naam”
  • Enctype = “multipart/form-data”
  • Enctype = “text/plain”
slide70

<input> Defines an input field

<textarea> Defines a text-area (a multi-line text input control)

<label> Defines a label to a control

<fieldset> Defines a fieldset

<legend> Defines a caption for a fieldset

<select> Defines a selectable list (a drop-down box)

<optgroup> Defines an option group <option> Defines an option in the drop-down box

<button> Defines a push button

opgelet
Opgelet!
  • Action = “mailto:ikke@mij.com”
  • Email harvesting
  • Spam
  • Action sturen naar .php file!
  • File upload
  • Action sturen naar .php file!

Servercode Hosting

hosting
Hosting?
  • Stukje grond op het internet
  • Website : huis
  • Wij architect + aannemer
  • Dns : adres huis bezoeken
  • Nutsvoorzieningen : gas
  • Afstand?
  • Invalswegen?
minimum
Minimum?
  • Webspace MB
  • Domeinnaam
  • Ftp account
  • Transfer
  • Server technologie?
platform native
Platform : native!
  • Linux + apache + MySql + php = (LAMP)
  • Opensource websoftware :
    • CMS
    • Mailsoftware
    • template engines
    • code snippets
  • Linux + Lighthttpd (static), Passenger (RoR),...
  • Windows + IIS
    • Asp, asp.net
    • Siverlight:
    • MSSQL , .mdb
dns webspace mail
Dns + webspace + mail?
  • Domeinnaamregistratie (registrar)
  • Domeinnaamhosting (nameservers - zonefile)
  • Webhosting
  • Database hosting
  • Mailhosting
control panels
Control panels?
  • Plesk
  • Cpanel
  • Liscensee gegevens
  • Nameservers
  • Dns records
  • Filebrowser
  • mailaccounts
  • Webmail
  • Shell access (linux console)
websites per hosting
Websites per hosting?
  • Multiple domain?
  • Own subdomains?
  • Multiple webroots?
  • Facturatie?
  • Transfer?
  • Stats?
  • Multiple stats?
  • CMS
extra s
Extra’s?
  • Installers software : CMS, eCommerce, ....
  • Backup voorzieningen (manueel - auto)
  • Gratis domeinen ?
  • Vouchers google adWords
  • Unlimmited??
hosting providers
Hosting providers
  • http://www.one.com
  • http://www.justhost.com
  • http://www.combell.be
  • http://www.inforbusiness.be
  • http://www.openminds.be
  • http://www.ilibris.be
  • http://www.slicehost.com
  • http://www.mediatemple.com
crossbrowser
crossbrowser
  • Internet explorer IE (IE6 – IE7 – IE8)
  • Firefox, Safari, Chrome
  • Mobile browsers?
  • World Wide Web Consortium : W3C
  • http://www.w3schools.com/tags/default.asp
  • Font deprecated!
  • Tekskleur in dambord tabel?
  • Style=“color:white”
  • Inline css
deprecated
Deprecated?
  • <font></font>
    • Verouderd (vanaf CSS – niet meer gebruiken)
    • Attributen :
      • color = yellow, green, red, blue, black, maroon, gray, white : tekst kleur
      • face="Arial, Helvetica, sans-serif"
  • <tabel height=" px of %"> :
    • niet ondersteund door Netscape
    • tr of td height geven
doctype
<!DOCTYPE>
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • Alles van html4 kan
  • strict.dtd
    • Geen deprecated, geen presentatie attribs
  • frameset.dtd