De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Syntra.   35  10 jaar internetervaring  iLibris ISP (hosting)  docent webmaster.

Verwante presentaties


Presentatie over: "Syntra.   35  10 jaar internetervaring  iLibris ISP (hosting)  docent webmaster."— Transcript van de presentatie:

1 syntra

2   35  10 jaar internetervaring  iLibris ISP (hosting)  docent webmaster CVO-Birm Antwerpen  docent webmaster Syntra  jullie zien eindigen met een certificaat webmaster!

3 “ 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 :.

4 Basisbgrippen webmaster ◦ Internet (algemeen, werking) ◦ Websites (opbouw, werking, talen) ◦ Hosting (webspace - dns)

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

6 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)

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

8  Opbouw ◦ Hoofdstukken ◦ Tussen delen oefeningen en vragen ◦ Oefeningen meenemen van/naar thuis  usb-stick,  webmail ◦ Oef thuis maken ◦ Oefenen, oefenen!

9  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)

10  Voorstelling cursisten ◦ Naam ◦ Beroep ◦ Voorkennis internet / grafisch / websites / html ◦ Richting met kennis cursus

11  Client server model

12  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

13  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)

14  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

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

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

17  Html : tekst juist opgebouwd vormen tags (objecten)  Opbouw object : syntax inhoud of

18  Basis architectuur html pagina : minimale code PAGINA INHOUD HIER

19  Texteditor : notepad  Opslaan als.html ◦ folder options ◦ “hide know extensions “ … UITvinken

20 Oefening  Oef : eerste html pagina  mijn title : binnen head-tags: wordt NIET gerenderd (wel vertoond in de titlebalk)  Hello World! : binnen de body tags: wordt WéL gerenderd  Save as first.html in folder website_1 op desktop

21  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

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

23  Objecten en attributen  link tekst  second page  search googl  search googlehttp://www.google.be

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

25 de titel de inhoud

26  Definieert een html pagina  Bevat alle markup: ◦ Markup tags met inhoud  : openingtag  : closingtag  Vb :  link  hoofding ◦ Markup tags zonder inhoud   Vb : 

27  Wordt niet gerenderd  Dus niet zichtbaar in de browser  Bevat metadata, css data, javascripts  Vb : de titel  vertoond in de crome (os gebonden)

28  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, …

29  3 pagina’s met elkaar gelinkt:  Previous – next – home   zie online

30   First   First page   next 

31  Second   Second page  previous  -  next 

32  Third   Third page  previous  -  home 

33  Attribuen  naam="waarde“  Worden toegeveogd aan start tag :  Specifieren eigenschappen van dat object  geen, één of meerdere mogelijk  Sommige verplicht :  noodzakelijk voor werking vb:  Sommige optioneel :  helpen de opmaak  vb:

34  objecten (tags) hebben default values   Indien niet specifiek gezet : valt de waaarde terug op de default (onzichtbaar)  Vb : ◦ border op een tabel: == Target bij link: ==

35  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“http://www.google.be  Href=“http://www.w3schools.com/tags/tag_body.asp“

36  target= "_self "  opent pagina in zelfde tab/window  target= "_blank "  opent pagina in nieuwe tab/window  (_parent, _top, framename)

37  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, …

38  Onze oef  Alle pagingas in folder « pages»  Links aanpassen?  index.html aanmaken (op basis van /assets/basis.html) in webroot  Link naar first.html  Werkt enkel (= webserver default gedrag) op webserver

39  Client server model  Vraag – antwoord  Hoe vinden de machines mekaar  IP address :  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

40  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

41  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

42  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

43 Authoritive nameservers : zij onthouden permanent ◦ ns1.namserver.be ◦ ns2.namserver.be  Zonefile ◦ Default record : google.be ◦ Subdomains :  -> A -> = standaard subdomein voor website  ftp.google.be -> A -> ftp.google.be  Veelgebruikt subdomein voor FTP ◦ Mx-Record : inkomende mailserver  pop.google.be -> A ->

44  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, …) 

45  Eigenaar = registrant = liscensee ◦ Persoon ◦ Organisatie  Admin – tech  Registrar – agent : firma waar wij gaan « huren »  volgende week hosting  meer!

46  Access provider : telenet, skynet, …  Internet Service Provider ISP: hosting  Mini hosting  Hostname (+usr +passwd)  http-address ◦ later vervangen door eigen domeinnaam  FTP  ◦ Install, connect, upload  Local -> remote  Online! : surf! (users.pandora.be/laurent.goossens1)

47  ◦ Break = new line  paragraaf  ◦ Horizontal rule  tekst wrapper

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

49   mijn website  My Website eerste pagina  tweede pagina  derde pagina  search google   webmaster opleiding syntra  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 

50  Object vult gehele breedte parent object ◦  Object omsluit de inhoud ◦

51  : table  : unordered list  : ordered list  samengestelde objecten/tags

52  : holder  : rows item 1 item ◦ Item 1 ◦ Item2

53  Holder  Rows  Columns  ◦  cel 1  cel 2 ◦  cel 3  cel 4 ◦  cel 1Cel 2 Cel 3Cel 4

54  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“  Tabel attribuut: slaat op alle cellen!

55  width (% of px)  height (% of px)  bgcolor (yellow, green, red, blue, black, maroon, gray, white)

56  Attribuut ValignValign  Vertical aligns the content in a cell  top  middle  bottom  Attribuut alignalign Horizontal aligns the content in a cell  left  right  center  Justify  centered text

57 : rowspan  Atribute Rowspan : merge 2 or more row cells  ◦  e  f  g ◦  h  i ◦  efg hi

58 : colspan  Atribute Colspan : merge 2 or more column cells  ◦  e  f ◦  h  i  g ◦  EF hig

59

60 ◦  link ◦   ◦   link  ◦    Doorlopende tekst en dan opeens een woord dat een link is.http://www.google.be 

61  Verouderd (vanaf CSS – niet meer gebruiken)  Attributen :  color = yellow, green, red, blue, black, maroon, gray, white : tekst kleur  face="Arial, Helvetica, sans-serif"

62  Previousnext  Table : width = 100%  1 rij  2 cellen  2 links  ◦  previous  next ◦ 

63 WEE K MADIWODOVRZA VM NM AVO

64

65 redyellow greygreen blue

66 Jfsdkfdsjfdsfdsfsdfd Fdfsdfdsfdsfdsfdsfds Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf fdsfdsfdsfdsfdsf Jfsdkfdsjfdsfdsfsdfds Fdfsdfdsfdsfdsfdsfds Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf fdsfdsfdsfdsfdsf Jfsdkfdsjfdsfdsfsdfds Fdfsdfdsfdsfdsfdsfds Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf fdsfdsfdsfdsfdsf

67

68  Link : file download  Zie “derde les”  Van zodra je linkt naar een bestand dat geen ‘webpagina’ is; start de brower een download window  Webpagina = een pagina dat de browser kan parsen/vertonen  Link binnen pagina  Oef :  Link rond object : een tabel, image  Oef : volgende tabel  Hotspots  Vlakje gedefinïeerd door coördinaten : klikbaar ->dreamweaver

69  Spatie : ◦ Effectieve inhoud aan bijv cel geven  € : €  « : »  ¿ : ¿  Decode html entities    Oef : tabel : code view

70  background="../images/tile.jpg"  text= "black"  link= " gray"  vlink=" gray "  alink=" gray "  leftmargin="0"  topmargin="0"  marginwidth="0"  marginheight="0"

71  Attributen ◦ Noodzakelijk  Src = “absoluut pad” of “relatief pad” ◦ Optioneel  aangewezen: mooie redering  Width (px)  Height (px)  Interessant :  hspace (px)  vspace(px)

72   Open source  Gratis ;-)

73  Assets folder ◦ Basislayout : template.html  Table ◦ Head ◦ Nav ◦ Content  Links list  Image tile

74  Werk op basis van templates ◦ Basis.html ◦ table.html ◦ template.html  W3schools.com  Html reference (tags én attributes) ◦  Html entities: ◦  Gevalideerde code  Crossbrowser!

75  World Wide Web Consortium : W3C   De enige internet standaard  Onze recource; onze holy grale  Font deprecated!  Tekstkleur in dambord tabel?  Background td?  Style=“color:white”  Inline css : eerste stap naar uitgebreidere vertonings manipulaties : “styles”

76   : ◦ niet ondersteund door Netscape ◦ tr of td height geven?  border? Ipv alle borders van alle td’s  Oplossing : « styles»

77  Eerste stap in evolutie  Mogelijk op ELK html4 object  Minder kennis van welk attribuut waar nodig  Vergemakkelijkt styling  Één of meerdere values  style=“value(s)”!  Style=“attr:value;attr:value;attr:value”

78  Opbouw : ◦  Attributen ◦ Font-family: Helvetica, Arial, Verdana, sans-serif; ◦ Background-color:#RRGGBB ◦ Background-image:url(../../images/bg.gif); ◦ Color: #RRGGBB; ◦ Font-size: 10px; ◦ Font-weight: bold; (normal) ◦ Width:100px; (50%) ◦ Height: 120px;(33%)

79  attributen ◦ Padding-bottom: (- top, - left - right) : 0px; ◦ Border-width:(bottom- top, - left - right) : 2px; ◦ Border-color: #RRGGBB; ◦ Border-style:solid (dotted, groove, dashed) ◦ Margin-top:0px; ◦ Margin-bottom:0px; ◦ Margin-left:0px; ◦ Margin-right:0px;

80  Internet explorer IE (IE6 – IE7 – IE8)  Firefox, Safari, Chrome  Mobile browsers?  -> belang gebruik : later

81  ◦  ◦ 

82 ◦ Alles van html4 kan  strict.dtd ◦ Geen deprecated, geen presentatie attribs  frameset.dtd

83   type inhoud : text/html  Character set gebruikt  É -> ?

84  Uit den boze! ◦ SEO ◦ Security ◦ Sessions ◦...  Wel nog aanwezig   ◦ in pagina ipv framset  Samengestelde tags ◦  Website_4 : frames

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

86  Webspace MB  Domeinnaam  Ftp account  Transfer  Server technologie?

87  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

88  Domeinnaamregistratie (registrar)  Domeinnaamhosting (nameservers - zonefile)  Webhosting  Database hosting  Mailhosting  Optimale situatie om allen samen te hebben ◦ 1 pakketje ◦ Alles inbegrepen ◦ 1 prijs

89  Plesk  Cpanel  Liscensee gegevens  Nameservers  Dns records  Filebrowser  mailaccounts  Webmail  Shell access (linux console)

90  Multiple domain?  Own subdomains?  Multiple webroots?  Facturatie?  Transfer?  Stats?  Multiple stats?  CMS

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

92          

93  Lamp stack kan op een pc worden voorzien  xamp-stack = windows simmulatie  Kan zelfs op een usb stick gezet worden (gemakkellijk mee naar huis te nemen)  Syntra voorziet de omgeving in leslokaal  Een échte hosting is dus FACULTATIEF  ‘Nice to have’ daar iedereen voor élke website een hosting zal moeten hebben/voorzien.  er blijft een verschil tussen Win en Lin!!!

94  Dmv Formulieren   data doorsturen   interactie 

95  Action=“absolute – relative - mailto”  Method=“GET - POST”  Name=“naam” : verplicht  Enctype = “multipart/form-data” ◦ file uploads  Enctype = “text/plain” ◦ Tekst uit velden  Value!

96  ◦   Action=“mailto: adres”

97  Een rij text – bepaalde lengte  Attribuut type=“”  button  checkbox  File (+ browse knop)  Hidden  password  radio  reset  submit  text

98  checked="checked“  Checked  Name  value

99  Value=“”  Name =“”  Radio button group  Name is op beiden gelijk  checked : uitzonderlijk attribuut

100  Andere attributen ◦ value =“de tekst al ingevuld” ◦ Readonly (tekst) ◦ Disabled ◦ Checkbox (radio - checkbox) ◦ Size : x aantal chars (font groote bepaald) ◦ Maxlength (veiligheid, databanken)

101 Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a selectable list (a drop-down box) Defines an option in the drop-down box

102  Rows  Cols

103  attributen ◦ Name ◦ Size  Noodzakelijk ◦ hallo

104   

105  Action =  Mailclient moet aanwezig zijn  harvesting  Spam  >> Action sturen naar.php file!  File upload  Action sturen naar.php file! Servercode  publieke hosting nodig

106  algemeen ◦ Werking internet ◦ DNS ◦ http/ftp ◦ Hosting  bouw ◦ Basis.html ◦ Aantal basis tags ◦ Attributen ◦ Gecombineerde tags ◦ Resource : alle tags : w3schools.com ◦ Iso chars ◦ Template.html ◦ Codevalidation : W3C ◦ Form (contact – post other site) ◦ Inline styles

107  Opm forms  Opm hosting  SEO  Css in head : definiëring pagina styles  Css in apart bestand  Oefeningen!

108  Search engine optimising  == SEO ◦ Robots.txt ◦ Meta  description  keywords  Laatste 2 gaan uitsterven volgens google  Sowieso vertoning in lijst resultaten ◦ Title tag ◦ a tags! ◦ alt attr : img tag ◦ Vorming links : relevante woorden ◦ Gebruik tags waar ze voor gemaakt werden ◦ h1, h2, li, p (later meer relevante tags)

109  Search engine optimising  First steps to success: ◦

110  Prive detective 

111  engines/metatag-analyzer.html engines/metatag-analyzer.html  Vb

112  robots.txt  Eerste waar elke zoekrobot naar zoekt  Bevat instructies voor de robotten To index or not to index  Negatief als hij er niet staat!

113 User-agent: * Disallow: User-Agent: * Disallow: /newsection/ User-agent: * Disallow: /

114  Alt attribuut img (IE)  Title attribuut img (firefox)  Tekst in de link zelf  Title page  Name file

115  Attributen html niet consequent  Niet gemakkellijk mooi te maken  Allerlei truuks uithalen met html objecten om gewenst resultaat te bereiken  Oplossing:  Attribuut style! ◦ Redelijk consequent toepasbaar op alle objecten ◦ Nieuwe syntax; nieuwe taal : CSS ◦ Ingevoerd vanaf html3

116  Globaal definiëren voor heel de pagina  In de head ingelezen ◦ vóór rendering ◦ Snellere rendering ◦ Achter de schermen  Veel minder code : sneller!!  Minder typen! (3 tabellen = 3 x style def)  Zorgt voor consequentie in vormgeving  Opm snelheid: ◦ Request verwerken ◦ Info over draad ◦ Pagina renderen op client

117  tag ◦  ◦ Hier de definëringen  ◦

118  Opbouw: ◦ selector {property:value}  Selectors ◦ Selector by tagname (type object) ◦ Selector by class  a ◦ Selector by id  a  Pseudoclasses ◦ a:hover

119  Opbouw Tagname{ Attr:value; attr:value; }

120  Pagina tabellen   surf : copy / paste code  Deleted all attributes  Deleted all font tags  Add basic global styles  Body – table – h1 - hr

121  Basics : op alle objecten toepasbaar ◦ Font-family: Helvetica, Arial, Verdana, sans-serif; ◦ Background-color:#RRGGBB ◦ Background-image:url(../../images/bg.gif); ◦ Color: #RRGGBB; ◦ Font-size: 10px; ◦ Font-weight: bold; (normal) ◦ Width:100px; (50%) ◦ Height: 120px;(33%)

122  lists ul {list-style-type:square;}  Text ◦ a{text-decoration:none} ◦ a{text-decoration:underline} ◦ text-align:justify;  >> Recource!

123  margin-top: 0px;  margin-right: 0px;  margin-bottom : 0px;  margin-left : 0px;  ==magin: ;  padding: ;  padding: 0 10px 0 10px;  Border: 1px solid black;  (-width –style - color)

124 .classname{  property:value;  }  Oef : Wit –zwart table 

125  #layout-table{  property:value  }   Oef:  Zet layout tabel terug rond tables (met nav)  Overrule met id’s  Nav-td, header-td, content-td

126    voorlopig : CSS basic  RGB kleuren kiezen? ◦

127  Nav in  H1,h2, p,...  ALL styles in in head  External sheet  >> objecten en styles scheiden! Redenen:  Alterantieve css : print, slechtziend,...  Symantic web! Data style

128  Cascading style sheets ◦ Tag selector ◦ Overruled by class selctor ◦ Overrules by id selector ◦ Inline style overrules all!  CMS paketten  Html mailings

129  Hermaak template : basic design  (Alle) html attributen verwijderen  css in head  Body – table – h1- a,...

130

131  Aanvulling vorige slide  Validate CSS and HTML  Verplaats naar style.css  Foto carrousel (prev -next)  Class=“active”  Nieuws pagina  3 kolommen  2 krant  1 zoek op de standaard.be  Link naar contactpagina  Search op google  Tables : a name links!

132

133

134

135

136

137

138

139  Effect op selector:   a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */

140  Framset periode  Oplossing : active class toekennen  - definiëer actieve link style  - ken class toe op de ‘huidige’ link  Oef:  Active class toekennen in nav

141  /stdtheme.css  Browsercache!  Een keer laden ;-)  IE : ◦ extra -> Int. Options -> browse hist. -> settings  Firefox : ◦ https://addons.mozilla.org/en- US/firefox/addon/1801

142

143  Aanwezig in lokaal  Aangewezen voor thuis ◦ manufacturers_id/24/products_id/49  Snelheid coderen / bouwen  Intellisence  Hulpmiddellen ◦ ftp ◦ Filebrowser ◦ Project beheer ◦ linkchecking

144

145

146

147

148

149

150  Web 1.0   html  Web 2.0   social media (webservices)  Web 3.0  The semantic web   div, dt, span,...

151  Html ◦ Hyper text markup language  Xhtml  CSS ◦ Cascading style sheets  Javascript  Dhtml ◦ Dynamic html ◦ Hml+ css + javascript  Xml ◦ File dat data draagt ◦ datacontainer; file database  Xslt ◦ Soort style sheet voor xml data ◦ Zet om naar html

152  Formcontrole!  Classes wijzigen on event  Image preloading ...

153  Een website  Één slideshow  Eén contact formulier  Eén css file  Alle webmaster strategiën geïmplementeerd  Op hosting (desnoods op mijn telenet ruimte)  Bezoekbaar met


Download ppt "Syntra.   35  10 jaar internetervaring  iLibris ISP (hosting)  docent webmaster."

Verwante presentaties


Ads door Google