De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Webmaster syntra.

Verwante presentaties


Presentatie over: "Webmaster syntra."— Transcript van de presentatie:

1 webmaster syntra

2 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!

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

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

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

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

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

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

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

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

11 Internet Client server model

12 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

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

14 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

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

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

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

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

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

20 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

21 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

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

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

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

25 Website <html> <head> <title>de titel</title>
<body> de inhoud </body> </html>

26 <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/>

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

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

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

30 first.html <html> <head> <title>First</title>
<body> <h1>First page</h1> <a href="second.html">next</a> </body> </html>

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

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

33 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">

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

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

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

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

38 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 Werkt enkel (= webserver default gedrag) op webserver

39 Surfer - webserver 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 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

41 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

42 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

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

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

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

46 Provider 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 New tags <br/> <p>paragraaf</p> <hr/>
Break = new line <p>paragraaf</p> <hr/> Horizontal rule <font>tekst wrapper</font>

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

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

50 Object – standaard gedrag
Object vult gehele breedte parent object <hr/> <br/> <p></p> <h1></h1> <body></body> Object omsluit de inhoud <a></a> <font></font>

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

52 <ul></ul> | <ol></ol>
<ul></ul> : holder <li></li> : rows <ul> <li>item 1</li> <li>item 2</li> </ul> Item 1 Item2

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

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

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

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

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

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

59 Opmerking placeholders Tables
<table></table> kan enkel <tr></tr> dragen <tr></tr> kan enkel <td></td>’s dragen Enkel <td></td>’s kunnen data (tekst, andere objecten) dragen Lists <ul></ul>’s en <ol></ol>’s kunnen <li></li>’s dragen Enkel <li></li>’s kunnen data (tekst, andere objecten) dragen

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

61 <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"

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

63 WEE K MA DI WO DO VR ZA VM NM AVO

64 1 2 3 4 5 6 7 8 9

65 red yellow grey green blue

66 Jfsdkfdsjfdsfdsfsdfd
Fdfsdfdsfdsfdsfdsfds Sffdsfdsfdsfdsfdsffdsf Sdffdsfdsfdsfdsfdsf fdsfdsfdsfdsfdsf Jfsdkfdsjfdsfdsfsdfds

67 oefeningen Website_2

68 Links extra Link : file download Link binnen pagina
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 : <a name=“table1”> Link rond object : een tabel, image Oef : volgende tabel Hotspots Vlakje gedefinïeerd door coördinaten : klikbaar ->dreamweaver

69 ISO chars –html entities
Spatie :   Effectieve inhoud aan bijv cel geven € : € « : » ¿ : ¿ Decode html entities <pre></pre> Oef : tabel : code view

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

71 <img /> Attributen Noodzakelijk Optioneel
Src = “absoluut pad” of “relatief pad” Optioneel aangewezen: mooie redering Width (px) Height (px) Interessant : hspace (px) vspace(px)

72 Gimp Open source Gratis ;-)

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

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

75 W3C : Thé webmaster recource
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 Deprecated? <font></font>
<tabel height=" px of %"> : niet ondersteund door Netscape tr of td height geven? <td> border? Ipv alle borders van alle td’s Oplossing : « styles»

77 Inline CSS 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 CSS : inline styles Opbouw : Attributen
<htmlobject style=“attr:value”> 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 CSS : Inline styles 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 crossbrowser Internet explorer IE (IE6 – IE7 – IE8)
Firefox, Safari, Chrome Mobile browsers? -> belang gebruik <div></div>: later

81 Validatie code : W3C <p> </p>
<a href="http://validator.w3.org/check?uri=http://use rs.pandora.be/laurent.goossens1/index.html"> <img src=http://www.w3.org/Icons/valid-html401 alt="Valid HTML 4.01 Transitional" height="31" width="88"> </a> </p>

82 <!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

83 Content type <meta http-equiv="Content-Type" content="text/html; charset=iso "> type inhoud : text/html Character set gebruikt É -> ?

84 frames Uit den boze! Wel nog aanwezig  <iframe></iframe>
SEO Security Sessions ... Wel nog aanwezig  <iframe></iframe> in pagina ipv framset Samengestelde tags <frameset></frameset> <frame></frame> <frame src=“pagina.html”> Website_4 : frames

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

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

87 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

88 Dns + webspace + mail? Domeinnaamregistratie (registrar)
Domeinnaamhosting (nameservers - zonefile) Webhosting Database hosting Mailhosting Optimale situatie om allen samen te hebben 1 pakketje Alles inbegrepen 1 prijs

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

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

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

92 Hosting providers http://www.one.com http://www.justhost.com

93 Opm hosting 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 Website : interactie? Dmv Formulieren  data doorsturen  interactie
<form></form>

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

96 Minimale onderdelen <form action="contact.php" method="get“ enctype="text/plain"> <input name="submit" type="submit" value="indienen"/> </form> Action=“mailto: adres”

97 Form field : <input />
Een rij text – bepaalde lengte Attribuut type=“” button checkbox File (+ browse knop) Hidden password radio reset submit text

98 <input type=“checkbox” />
checked="checked“ Checked Name value

99 <input type=“radio” />
Value=“” Name =“” Radio button group Name is op beiden gelijk checked : uitzonderlijk attribuut

100 Form field : <input />
Andere attributen value =“de tekst al ingevuld” Readonly (tekst) Disabled Checkbox (radio - checkbox) Size : x aantal chars (font groote bepaald) Maxlength (veiligheid, databanken)

101 Other form fields <input> Defines an input field <textarea> Defines a text-area (a multi-line text input control) <label> Defines a label to a control <select> Defines a selectable list (a drop-down box) <option> Defines an option in the drop-down box

102 <textarea /> Rows Cols

103 <select></select>
attributen Name Size Noodzakelijk <option value=“hallo”>hallo</option>

104 Search google <form method="get" action="http://www.google.com/search"> <input type="submit" name="btnG" value="Search" /> <input type="text" name="q" value="" /> </form>

105 Opgelet! Action = mailto:ikke@mij.com Mailclient moet aanwezig zijn
harvesting Spam >> Action sturen naar .php file! File upload Action sturen naar .php file! Servercode publieke hosting nodig

106 recap algemeen bouw Werking internet DNS http/ftp Hosting 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 Deze les Opm forms Opm hosting SEO
Css in head : definiëring pagina styles Css in apart bestand Oefeningen!

108 Strategie webmaster 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 SEO Search engine optimising First steps to success:
<title></tilte> <meta name=“description" content="Your descriptive sentence or two goes here."> <meta name =“keywords" content="your keywords,go here,separated by a comma,but not a space">

110 Vb meta tag invulling Prive detective
<META name="description" content="Privé- detective Abyss investigations voor privaat en bedrijven, gespecialiseerd in vaststelling overspel, schaduwen, achtervolgingen en controles op werknemers tijd verbruik. Privé onderzoek op maat." > <META name="keywords" content="privé, detective, dedectieves, investigations, overspel, onderzoek, privaat, observatie, geheim, discreet, schaduwen, controles, achtervolging, observatie, antwerpen, vlaanderen, belgie, ontrouw" >

111 Analyse! engines/metatag-analyzer.html Vb

112 SEO 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 SEO User-agent: * Disallow: ------------ User-Agent: *
Disallow: /newsection/ User-agent: * Disallow: /

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

115 Styles : css 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 CSS in head 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 CSS in head </head> <head> <style type="text/css">
<style > tag <head> <style type="text/css"> Hier de definëringen </style> </head>

118 CSS in head : definiëringen
Opbouw: selector {property:value} Selectors Selector by tagname (type object) Selector by class <a class=“classname”>a</> Selector by id <a id=“linkname”>a</> Pseudoclasses a:hover

119 CSS : Selector by tagname
Opbouw Tagname{ Attr:value; attr:value; }

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

121 Basic attr:values 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 specific lists Text >> Recource! ul {list-style-type:square;}
a{text-decoration:none} a{text-decoration:underline} text-align:justify; >> Recource!

123 Body{} 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 CSS selector by class .classname{ property:value; }
Oef : Wit –zwart table <object class=“myclass”> <table class=“rechthoek”>

125 CSS selector by id #layout-table{ property:value }
<object id=“eerste-lijn”> Oef: Zet layout tabel terug rond tables (met nav) Overrule met id’s Nav-td, header-td, content-td

126 CSS resource http://www.w3schools.com/css/  voorlopig : CSS basic
RGB kleuren kiezen?

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

128 CSS : algemeen Cascading style sheets Tag selector
Overruled by class selctor Overrules by id selector Inline style overrules all! CMS paketten Html mailings

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

130

131 oef 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 Pseudo classes Effect op selector: <a>
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 A:active? 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 External style sheet <link rel="stylesheet" type="text/css" href="/stdtheme.css" /> Browsercache! Een keer laden ;-) IE : extra -> Int. Options -> browse hist. -> settings Firefox : https://addons.mozilla.org/en- US/firefox/addon/1801

142 W3C validation : CSS <p> <a href="http://jigsaw.w3.org/css- validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css- validator/images/vcss" alt="Valide CSS!" /> </a> </p>

143 dreamweaver 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 Internet historiek Web 1.0  html Web 2.0  social media (webservices)
The semantic web  div, dt, span, ...

151 webtalen Html Xhtml CSS Javascript Dhtml Xml Xslt
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 Javascript Formcontrole! Classes wijzigen on event Image preloading
...

153 vakantiewerk 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 "Webmaster syntra."

Verwante presentaties


Ads door Google