Webmaster syntra.

Slides:



Advertisements
Verwante presentaties
Het internet.
Advertisements

Bouw zelf een digitaal visitekaartje
SharePoint denk in blokken Ton Stegeman.
Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Paginanaam aanpassen Activeren of deactiveren vd pagina Verwijderen vd pagina NOOIT OP KLIKKEN Geen functie.
Bouw je eigen website met gratis software Je eigen website bouwen  Waarom?  Eigen zaak (  Vereniging (
Website maken Door Kick de Wolff April • Aangekondigd was dat het een presentatie over Publisher zou worden, maar weinig mensen hebben Publisher,
MAKEN VAN EEN WEBSITE Door het Ict-team : Claes -Van Damme- –Van Nyverseel Januari 04 (GEMSTAM)
Een Website Voor Je School FrontPage Door …  Hans De Four  KlasCement:  Classy:
Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Mijn.
Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina.
Internet College 1 Architecturen.
Databases via internet
Websites en accounts.
Cartografie met als medium het ‘World Wide Web’
WELKOM! Les 1 Vandaag 1.Voorstellen 2.Inhoud en doel cursus 3.Inleiding website 4.Benodigde software 5.Inleiding HTML 6.Huiswerk 7.Afwas ☺
Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Mijn.
Website maken met WordPress
Tips Rudy 22/09/2013. Webgobbler Formatfactory p exe.
HTML Les 1: Introductie HTML
Webmaster syntra.
Blok 7: netwerken Les 8 Christian Bokhove.
CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.
WordPress les 3.
Crashcursus HTML en CSS 2013
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
Webpagina ’ s maken ITV 10 maart Onderwerpen Ontwerp en inhoud Navigatie HTML: de basis Webpagina’s in Word.
WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
ICT-voorstelling: onderhoud van een website Donderdag 23 oktober 2008.
Nieuw in LIPS VLUG 2 26 juni 2006 Kristof Brams. Overzicht Vernieuwde editor Printervriendelijke pagina Statistieken Variabele fontgrootte Grootte van.
Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Mijn.
Mijn eerste Website bouwen
Cursus Websites bouwen Bibliotheek Rijswijk Seniorweb Rijswijk docenten: Peter Blansjaar Peter Smits.
Hoofdstuk 16 en 19 PHP en MYSQL
WEBBUILDING 07/03/2005 Saartje De Geyter.
Deel XXI 1 Internetapplicaties Internetprogrammeren Capita Selecta.
Deel XX Hosting 1 Internetapplicaties Deel XX Hosting.
Om willekeurig welke site en welk werk dan ook overzichtelijk te houden, moeten er eerst (sub)directories gemaakt worden: Bijeenkomst 2 online journalistiek.
Windows Applicaties Bouwen met Visual Studio.NET Sijmen Koffeman Development Consultant Microsoft.
Client-side scripting. 1.Scripting in webpagina’s 1. Verschillende talen VB: toepassingen in Windowsomgeving VBA: toepassingen in MS-Office VBScript internet.
Les 3 Vandaag 1.Bekijken thuisopdrachten 2.Vragen over voorgaande stof 3.Links 4.FTP 5.Huiswerk.
Wat is WordPress en hoe installeer je het?. Wat is WordPress? WordPress is een CMS (Content Management Systeem) net als Joomla; Met een CMS kan een gebruiker.
Starten met PHP Dynamischer bouwen. PHP is een een scripttaal waarmee de server pagina’s in elkaar kunt laten zetten. Het verschil met HTML: Een php pagina.
PHP & MYSQL LES 01 PHP BASICS. PHP & MYSQL 01 PHP BASICS 02 PHP & FORMULIEREN 03 PHP & DATABASES 04 CMS: BEST PRACTICE.
Netwerken (2) Informatica.
Webmaster syntra.
PADS4 maakt het eenvoudig om informatie te verspreiden naar een specifiek publiek op de juiste plaats en het juiste moment PADS4 is een professionele oplossing.
Starten met PHP Dynamischer bouwen.
Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.
Een overzicht van de hedendaagse mogelijkheden voor het bouwen van websites.
Deze les * recap css selectors * pseudoclasses * styling links: live tutorial * references, recources, categorisation * live tutorial o add css to template.html.
HTML De basis-elementen.
De basis-elementen Deel 2
Webbrowsers Inhoudsopgave  Webbrowser  Geschiedenis  Verschillende webbrowsers Bekende webbrowsers Minder bekende webbrowsers  Vergelijking.
CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.
Hoe een website realiseren ? Horen, zien en ontsluiten Gooik, 27 januari 2006 Johnny Van Bavegem Heemkundige Kring van Gooik.
Basics SERP = Search Engine Results Page Betaalde resultaten = SEA Natuurlijke resultaten = SEO Search Engine Optimization SEO is een lange termijn verhaal.
wordPress  Het meest flexibele CMS CMS= Content Management System.
Webwinkel in het D-cluster van de opleiding Logistiek Ad van Kooten – docent ERP toepassingen  Pract. 1.
Introductie ‘Hacklab MOOC’
Surfen op het internet Basisbegrippen
Sjabloonsite Koen Van Cauwenberge.
Direct Realisatie Les 3 HTML en CSS in s Direct Realisatie Les 3.
Inhoud: Terugkomdag Wie heeft wat gemaakt? Tips?
Hoe maak je een pagina voor een website?
M5 Datacommunicatie Applicatielaag
CSS: cascading stylesheets
CSS: cascading stylesheets
HTML5 introductie.
Transcript van de presentatie:

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 “ 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 WebMaster Basisbgrippen webmaster Internet (algemeen, werking) Websites (opbouw, werking, talen) Hosting (webspace - dns)

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

Opleiding WebMaster Tools beheer en onderhoud Dreamweaver Firebug XHTML en CSS validators Referentie bronnen Photoshop Flash Zoekmachines FileZilla LAMP-stack (apache – mysql - php) CMS paketten Code libraries (scriptalicious, jquery, wysiwyg)

Cursus Verdeling 75 uren 25 weken aan 3 uur/week les plus (+) oefeningen thuis Min (-) weken eindwerk evaluatie

Cursus Opbouw Hoofdstukken Tussen delen oefeningen en vragen Oefeningen meenemen van/naar thuis usb-stick, email: webmail Oef thuis maken Oefenen, oefenen!

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)

Cursus Voorstelling cursisten Naam Beroep Voorkennis internet / grafisch / websites / html Richting met kennis cursus

Internet Client server model

Internet Browsers Webservers Request / Response 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

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)

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

Internet Html : bouwstenen Html aangevuld met css : stijl Javascript : manipulaties Dynamische talen genereren html php asp, aspx (asp.net)

Internet Uploaden / Downloaden (tijdelijke directory) Ftp bestanden uploaden Webtraffic : meetbaar Browser cache (shortcut: F5 / ctr+ F5)

Website Html : tekst juist opgebouwd vormen tags (objecten) Opbouw object : syntax <tag>inhoud</tag> of <tag/>

Website Basis architectuur html pagina : minimale code <html> <head></head> <body> PAGINA INHOUD HIER </body> </html>

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

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

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

Website Webpagina’s onderling verbonden door links Interactief object (handje, kleur) Oef : eerste links Oef navigatie pagina : navigatie.html

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>

Website Oef thuis : previous / next links + home link Oef thuis : gegevens hosting verzamelen (telenet, belgacom, ...) - hostname - username - password

Website <html> <head> <title>de titel</title> <body> de inhoud </body> </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/> <hr/> <br/> <img/>

<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> 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 3 pagina’s met elkaar gelinkt: Previous – next – home  zie usb stick

first.html <html> <head> <title>First</title> <body> <h1>First page</h1> <a href="second.html">next</a> </body> </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 <html> <head> <title>Third</title> <body> <h1>Third page</h1> <a href="second.html">previous</a> - <a href="first.html">home</a> </body> </html>

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 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 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“

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" 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 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 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 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 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 Eigen pc : Access providers 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 Authoritive nameservers : zij onthouden permanent Zonefile 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 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 Eigenaar = registrant = liscensee Persoon Organisatie Admin – tech Registrar – agent : firma waar wij gaan « huren » volgende week hosting  meer!

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 <br/> <p>paragraaf</p> <hr/> Break = new line <p>paragraaf</p> <hr/> Horizontal rule <font>

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 …..

<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> <a href="pages/first.html"> derde pagina</a> <a href="http://www.google.be" target="_blank"> search google</a> <a href="http://www.syntra-mvl.be/opleiding/Webmaster-186" target="_blank"> webmaster opleiding syntra </a> <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 vult gehele breedte parent object <hr/> <br/> <p></p> <h1></h1> <body></body> Object omsluit de inhoud <a></a>

placeholders <table></table> : table <ul></ul> : unordered list <ol></ol> : ordered list  samengestelde objecten/tags

<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> Holder <table></table> Rows <tr></tr> Columns <td></td> <table border= " 1px " > <tr> <td>cel 1</td> <td>cel 2</td> </tr> <td>cel 3</td> <td>cel 4</td> </table> cel 1 Cel 2 Cel 3 Cel 4

<table></table> Standaard gedrag: Géén breedte (tip: plaats een spatie in elke cel :  ) 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“

<table><td> attributen width (% of px) height (% of px) bgcolor (yellow, green, red, blue, black, maroon, gray, white)

<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 Atribute Rowspan : merge 2 or more row cells <table border="1"> <tr> <td rowspan="2">e</td> <td>f</td> <td>g</td> </tr> <td>h</td> <td>i</td> </table> e f g h i

<td></td> : colspan Atribute Colspan : merge 2 or more column cells <table border="1"> <tr> <td colspan="2">e</td> <td>f</td> </tr> <td>h</td> <td>i</td> <td>g</td> </table> E F h i g

Tags nesten <ul> </ul> ------------------------- <li> <a>link</a> </li> </ul> ------------------------- <table> <tr> <td> </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> 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 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>

WEE K MA DI WO DO VR ZA VM NM AVO

1 2 3 4 5 6 7 8 9

red yellow grey green blue

Jfsdkfdsjfdsfdsfsdfd Fdfsdfdsfdsfdsfdsfds Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf fdsfdsfdsfdsfdsf Jfsdkfdsjfdsfdsfsdfds

Links extra Link binnen pagina Oef : <a name=“tabel1”> Link rond object : een tabel Oef : volgende tabel Hotspots : dreamweaver

ISO chars Spatie :   € : << : » ¿ : ¿ Effectieve inhoud aan bijv cel geven € : << : » ¿ : ¿ Decode html entities http://centricle.com/tools/html-entities/ <pre></pre> Oef : tabel : view code

interactie Formulieren  data doorsturen  interactie <form></form>

Form attributes Action=“absolute – relative - mailto” Method=“GET - POST” Name=“naam” Enctype = “multipart/form-data” Enctype = “text/plain”

<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

mailto:

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

Hosting? Stukje grond op het internet Website : huis Wij architect + aannemer Dns : adres huis bezoeken Nutsvoorzieningen : gas Afstand? Invalswegen?

Minimum? Webspace MB Domeinnaam Ftp account Transfer Server technologie?

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? Domeinnaamregistratie (registrar) Domeinnaamhosting (nameservers - zonefile) Webhosting Database hosting Mailhosting

Control panels? Plesk Cpanel Liscensee gegevens Nameservers Dns records Filebrowser mailaccounts Webmail Shell access (linux console)

Websites per hosting? Multiple domain? Own subdomains? Multiple webroots? Facturatie? Transfer? Stats? Multiple stats? CMS

Extra’s? Installers software : CMS, eCommerce, .... Backup voorzieningen (manueel - auto) Gratis domeinen ? Vouchers google adWords Unlimmited??

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 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? <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 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