Software DevelopmentBasicode historie Webdesign, allerlei Video file saving in Wmv Save audio in Wma Downloads Matrox Marvel G200 Digital TV DVB-C/S Media Center remote control Analog TV and FM radio Teletext on a PC Digital TV DVB-T DirectX and DirectShow Amcap video capture Introduction Meest gelezen onderwerpen: Website blog... Mediastreaming van Windows P... Pingen en een IP adres vinde... Gastenboek lezen... Geluidsapparatuur aansluiten... UTP, straight en cross ... Schrijf een bericht... Windows 7, 8 en 10 in een th... Gastenboek schrijven... Een thuisnetwerk aanleggen...
| Webdesign, allerleiWebpagina's maken is een leuke bezigheid, vooral als dit enthousiaste lezers aantrekt. Enerzijds is het leuk om anderen van alles en nog wat te vertellen en/of te laten zien. Anderzijds is het leuk al die onderwerpen op een leuke manier te presenteren.Ik zelf ga er vermoedelijk te makkelijk aan voorbij dat webpagina's maken niet voor iedereen altijd even makkelijk gaat. Voor mij is het vaak zelfs nogal eens een heel gepuzzel. Daarom een pagina die een en ander vertelt over mijn eigen ervaringen over het maken van webpagina's voor een website of homepage.
Inleiding
De reden om deze pagina te gaan schrijven, had te maken met het programma Nvu. Dit lijkt namelijk een fantastisch stuk gereedschap. Na er wat meegewerkt te hebben, verdween mijn enthousiasme. Eigenlijk is het programma alleen geschikt voor het gewone werk, met HTML. Ik had mijn pagina's voorzien van Php scripts, alleen bleek Frontpage en Nvu daar niet echt handig mee om te gaan. Nu laat Frontpage de Php voor wat het is, helaas maakt Nvu er een complete chaos van. Dit programma is dus voor sommige situaties een keiharde afrader. De eerste stappenHoe? Start Frontpage op: klik op Start, Klik op Programma's, klik op Microsoft Frontpage. Vervolgens verschijnt er een venster met de naam "nieuwe_pagina_1.htm". Daarbij zijn een drietal tabbladen te zien. Bekijk deze eens goed, klik eens op HTML, Voorbeeld en Normaal. Met Nvu gaat het nog makkelijker, hoewel? Gewoon proberen!Voorbeeld geeft de pagina weer zoals die weergegeven gaat worden. Het is wel verstandig de werkelijke weergave te controleren met een echte internet browser. Het tabblad Normaal biedt een grafische werkomgeving om de pagina vorm te geven. Dit is min of meer te vergelijken met de mogelijkheden van de tekstverwerker Wordpad of Word. HTML toont de werkelijke HTML code die ervoor zorgt dat de pagina er leesbaar uitziet. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Voorbeeld pagina </title> </head> <body> <H1>Hello world!</H1> </body> </html>Het eindresultaat is dat de tekst "Hello world!" op het scherm verschijnt. De code tussen < en de > tekens wordt een tag genoemd. Title tagDe tekst in de title tag is de naam van de pagina. Deze naam verschijnt in de titelbalk van Internet Explorer.Body tagBinnen de Body tag <Body> zomaar wat tekst </Body> komt de eigenlijke internet informatie te staan. Dit kunnen HTML opdrachten zijn maar ook gewoon tekst. Er is in ieder geval veel mogelijk. De kleur code wordt in de volgende table weergegven met "x", hier volgt eerst wat uitleg over deze code. Als voorbeeld neem ik: BGCOLOR="#ffffcc"Eerste FF = Rood in 256 variates: 0-FF (hexadecimaal) Tweede FF = Groen in 256 variaties Derde FF = Blauw in 256 variaties De body tag kan ondermeer de volgende kleur kenmerken bevatten:
De H1, H2, H3 enzovoort tagsDit is een hoofdstuk tag. Deze kan op de volgende wijze worden gebruikt:<H3>Dit is een voorbeeld!</H3> Afbeeldingen toevoegenEen afbeelding toevoegen kan met de de <img src= ... > tag:<IMG src="afbeelding.jpg" title="omschrijving afbeelding" alt="altenatieve tekst afbeelding">>Aanvullende opties zijn: align="left", andere waardes voor align zijn "right","top", "bottom", "middle" width="150", de waarde voor width mag ook in procenten height="100", de waarde voor height mag ook in procenten nosave Koppelingen gebruiken binnen en buiten een HTML paginaDe A tag met de href optie <A href="x.htm">Voorbeeld</A> verwijst naar een bestand. Zo'n A tag stelt een koppeling voor. De zichtbare tekst is Voorbeeld. Het leuke van deze A tag is dat een goed leesbare en begrijpelijke tekst kan worden ingevuld terwijl het bestand (met pad) een heel complexe en onleesbare naam kan zijn. Het voorgaande voorbeeld is geschikt voor koppelingen naar pagina's buiten de HTML pagina. Het is ook mogelijk om koppelingen binnen een HTML pagina te gebruiken. Dat is best handig om een submenu aan het begin van de pagina te plaatsen om zo een snelle keuze van een bepaald onderwerp mogelijk te maken. Deze functionaliteit is te gebruiken via de A tag.Dit is de koppeling: <A href="ditbestand.htm#onderwerp">Omschrijving onderwerp</A>De koppeling verwijst naar de plek waar de naam in de A tag is geplaatst: <A name="onderwerp">Tekst waar de koppeling naar verwijst</A>In dit voorbeeld is het "onderwerp" het centrale woord van de koppeling binnen het bestand. Oh ja, de name en de A tag staan normaliter in hetzelfde bestand. In dit voorbeeld moet de name tag met "onderwerp" in "ditbestand.htm" staan. De A tag mag eventueel in een ander bestand staan. In een A tag mag een afbeelding ook als omschrijving van het onderwerp worden gebruikt. Met optie border=0 in de IMG tag kan je aangeven om de koppeling kleuren te verbergen. Bijvoorbeeld: <A href="ditbestand.htm"><IMG src="omschrijving.gif"></A> Nog een paar handige tagsMaak tekst vet (bold):Maak tekst <B>vet (bold)</B>Maak scheve (italic) tekst: Maak <I>scheve (italic)</I> tekstMaak een nieuwe paragraaf met <P> en breek een regel af met <BR>. Gevonden worden door zoekmachines zoals Google?Het is leuk als je eigen webpagina makkelijk is te vinden met Google. Dat kan dan twee dingen betekenen, of het zoekwoord is erg uniek of het onderwerp is erg populair. Middels een metatag 'keywords' kunnen zoekwoorden worden opgegeven die te maken hebben met het beschreven onderwerp. Een toepasselijk voorbeeld:<meta Name="keywords" Content="Webdesign, Frontpage, Nvu, gastenboek, weblog, tips">Verder schijnt het dat veel links naar een specifieke website de kans op een gunstige plaats in de Google zoeklijst vergroot. Het verzenden van webpagina'sHet verzenden van webpagina's kan middels een programma als ftp (file transfer protocol), in gewoon Nederlands is dat dus bestand overdrachts protocol. Er bestaan veel handiger apps dan ftp, zoals WinSCP, FileZilla Ftp die op overzichtelijke wijze bestanden kunnen verzenden naar of op te halen van uw website. Verder bieden deze apps vaak de mogelijkheid om de webbestanden op eenvoudige te bewerken. Dit gaat veel makkelijker dan met bijvoorbeeld het standaard ftp programma. Het mooiste programma om webpagina's te maken is ongetwijfeld Dreamweaver, maar dit programma kost toch wel wat. Het verzenden van webpagina's kan ook middels een webeditor zoals nvu of Composer en er zijn nog veel meer/ Composer is leuk om even te proberen omdat dit programma erg geschikt is voor html pagina's. Het voordeel van een webeditor is dat al spelenderwijs een leuke pagina gemaakt kan worden. Eventueel kan een webpagina of een reeks webpagina's ook met Microsoft PowerPoint of Publisher gemaakt worden. Helaas kunnen deze programma's zelf geen webpagina's versturen.
Het plaatsen van een website of homepage bij uw internet provider lijkt makkelijk maar levert nogal eens problemen op.
Niet zozeer vanwege de software maar vooral om de informatie die ingevuld moet worden.
Het gebruik van dit soort software is daarom best wel lastig, zeker voor de eerste keer.
Onlangs moest ik iemand helpen die de probeerversie van ws_ftp gebruikte.
Helaas was de proefperiode verstreken, gelukkig kent Windows (of Linux) dus ook het standaard programma ftp.
Eenvoudig doch enigszins beperkt in de mogelijkheden. Hoe ftp te gebruiken?
Het eenvoudigste is om een Opdrachtprompt venster op te starten (in Linux is dat een Console venster).
Ga van daaruit naar de map waar de te versturen bestanden staan.
Eventueel kan ook sftp of WinSCP gebruikt worden om bestanden te uploaden of te downloaden.p
Mogelijke upload adressen zijn bijvoorbeeld home.hccnet.nl of members.ziggo.nl
Daarna moet de opgegeven gebruikersnaam en wachtwoord ingevuld worden.
Als die vraag niet komt, dan klopt het opgegeven adres niet.
Er zijn nog veel meer opdrachten. Het lijkt hocus pocus maar echt, het werkt dan ook echt. Tja, ftp is echt een basis programma, niet prettig te gebruiken voor een website met veel bestanden en mappen. Anderzijds, met ftp zijn de basis principes van het bestand overdrachts protocol wel wat beter te begrijpen.
Belangrijk om te weten, is nog wel dat er twee soorten bestanden bestaan.
Het eerste soort is een tekst of een Ascii bestand.
Veelal is dat dus een HTM, HTML, CSS of JS bestand.
Het tweede soort is een ander bestand, zoals een plaatje of een foto.
Veelal is dat dus een JPG, JPEG, GIF of PNG bestand.
Het gebruik van Php en MysqlDit is een heel erg lang verhaal. Ik ben begonnen met het boek 'Webdesign met Php5' geschreven door Ward van der Put. Bij dit boek zit een CD met voorbeelden, dus alles overtikken dat hoeft niet. Alleen ja, van kant en klare voorbeelden leer je weinig, dus ga wel echt aan de slag.Om gebruik te kunnen maken van Php (en Mysql), moet er nog wel een geschikte werkomgeving worden gecreëerd. Dit kan bijvoorbeeld met WAMP, LAMP, XAMPP, XAMPPLite en vermoedelijk nog veel meer verzamelpakketten. Mocht u nu aan de slag gaan, let er dan wel op dat je gaat voor de nieuwste versie Php, bijvoorbeeld versie 7.4 en Mysql versie 8.0. Een goed startpunt om Php en Mysql te leren gebruiken, is bijvoorbeeld WAMP of XAMPPLite. Beide programma's bieden een verzameling programma's die tesamen een interessante ontwikkelomgeving bieden. Als test heb ik recent beide programma's uitgeprobeerd. Hoewel beide versies stellen dat men gelijk een werkende omgeving heeft, zet ik daar voor beiden een vraagteken achter. Ongetwijfeld zal ergens in een handleiding wel staan hoe bijvoorbeeld phpadmin gebruikt moet worden. Echter met beide programma's werd ik gelijk doorverwezen naar de configuratie bestanden. Tja, dat is zogezegd van de wal in de sloot. Verstandiger is de vraag aan Google stellen. Het resulterende antwoord was in mijn geval een stuk bruikbaarder. Verder ontdekte ik daarna dat WAMP al heel wat meer had te bieden dan vijf jaar geleden, toen deze pagina voor het eerst werd geschreven. Hoewel de eerste stappen met WAMP bijna net zo rampzalig verliepen als met XAMPPLite, had ik met WAMP wel als eerste de ontwikkel omgeving daadwerkelijk werkend met mijn eigen databases. Ik kon nu ook mijn oorspronkelijke website pcpret.nl geschikt maken voor de nieuwste php versie. Vandaag het ik mijn recente ervaringen aan deze pagina toegevoegd. Ik hoef nu niet meer allerlei log bestanden door te pluizen om php problemen op te sporen. De ontwikkelomgeving toont de problemen vanzelf. Verder wordt er ook een syntax controle gedaan, dus mocht er ergens foutieve code zitten, dat 5 jaar terug nog geen problemen gaf, nou dan kunnen er vrij verrassende resultaten worden bereikt. Het gebruik van CSS (Stylesheets)CSS is het heden en de toekomst hoor ik velen zeggen. Tot voor kort maakte ik er zelf minimaal gebruik van omdat mijn huidige website toch al vrij groot is geworden. Zomaar iets veranderen, heeft dan toch wel wat gevolgen. Over dit onderwerp valt heel veel te vertellen. Gelukkig hebben er al velen over CSS geschreven dus daar wil ik dan ook graag naar verwijzen, bijvoorbeeld deze: CSS (stylesheets), www.html-site.nlVoorbeelden van websitesIk gebruik mijn eigen zelf gebouwde websites als oefenmateriaal. Het zijn websites die informatie geven over allerlei onderwerpen. Alles sites bieden een gastenboek en de mogelijkheid om een bericht te versturen!
Back to the beginning? Click here. | ||||||||||||||||||||||
