Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.
|
|
|
- Stijn van der Zee
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 CSS Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina: 1. Sommige elementen gedragen zich als een doos (box, block) en kan je een hoogte en een breedte geven. Net zoals een doos een hoogte of een breedte heeft. 2. Sommige elementen kan je geen hoogte of breedte meegeven nl. tekstelementen. Je kan niet zeggen dat een titel 100 pixels hoog moet zijn, want de hoogte van een titel wordt bepaald door zijn lettergrootte.
2 Starten met CSS Tekstelementen zoals titels, alinea's... kan je dus geen hoogte of breedte geven, maar je kan wel een heleboel andere eigenschappen opmaken: 1. lettertype 2. lettergrootte 3. marge (links, boven, rechts, onder... of allemaal tegelijk) 4. kleur Uiteraard gebruiken we voor CSS ook vaste benamingen in het Engels. Je kan niet zo maar wat gaan schrijven. lettertype lettergrootte marge (links, boven, rechts, onder... of allemaal tegelijk) kleur uitlijning font-family font-size margin (margin-left, margin-top, margin-right, margin-bottom...) color text-align Doos elementen kan je ook nog andere eigenschappen meegeven: breedte hoogte positie (een absolute plaats of een relatieve plaats) tov. andere elementen plaats op de pagina (links, rechts...) stapelen (elementen boven elkaar plaatsen) afronding achtergrondkleur achtergrondafbeelding marge (links, boven, rechts, onder... of allemaal tegelijk): de afstand van dit element tov andere elementen daar buiten padding (links, boven, rechts, onder... of allemaal tegelijk): de afstand van dit element tov andere elementen daar binnen rand width height position float z-index border-radius background-color Background-image margin (margin-left, margin-top, margin-right, margin-bottom...) padding (padding-left, padding-top, paddingright, padding-bottom...) border (border-left, border-top, border-right, border-bottom...) Hiermee hebben we nog lang niet alle mogelijkheden opgesomd, maar je kan er al mee aan de slag.
3 Hoe noteren we CSS? In het bestand bouweenwebpagina.pdf leer je hoe je elementen in een webpagina kan selecteren om ze vorm te geven met CSS. Voor de duidelijkheid: we plaatsen al onze CSS-code in een apart bestand in de map style van de websitemap. We bewaren dit bestand met de naam style.css. Vermits dit bestand via een link is gekoppeld aan al onze webpagina's (zie coderegel hieronder), zal elke wijziging aan het bestand style.css een onmiddellijk effect hebben op de weergave van al onze pagina's. <link rel="stylesheet" href="style/style.css" /> Eerst bepalen we de algemene instellingen die voor de hele pagina gelden. Heel het visuele gedeelte van de website staat in het onderdeel <body>. Om alle ergerlijke marges en ruimtes te vermijden zetten we alle marges op 0. We selecteren het <body>-element. body{ margin:0; padding:0; We willen dat heel de inhoud van de pagina netjes centraal zal staan. Voor oude versies van Internet Explorer moet je daarom één regeltje toevoegen aan dit stukje code. body{ margin:0; padding:0; text-align:center; Een beetje vreemd eigenlijk, want hiervoor dient text-align eigenlijk niet, maar plaats je het niet, dan doet IE helemaal niet wat je verwacht. IE redeneert: Alle elementen gaan netjes in het midden staan. IE beveelt zoals een schoolmeester tegen zijn kindjes. Andere browser doen dit op een andere manier. Het eerste element dat we in onze <body> tegenkomen is een <div>-element. Div-elementen gedragen zich letterlijk als dozen, daarom zie je ze ook zo vaak opduiken in de HTML-code van webpagina's. Opgelet: als je nu het <div>-element zou selecteren, zouden je CSS-instructies gelden voor alle <div>-elementen op de pagina. Dus als je dit zou schrijven: div{ border: 1px solid red;
4 dan zou niet alleen de eerste <div> een rood randje krijgen, maar alle div's op de pagina. Hoe lossen we dit op? Vergelijk het met een leraar die straf geeft. Hij geeft geen straf aan alle jongens, maar aan één specifieke jongen. In onze HTML-code hebben we aan alle <div>-elementen een identiteit gegeven door de parameter id=. De eerste <div> draagt als id de naam container. Een id kan je selecteren op de volgende manier: #container Zo'n beetje zoals op Twitter: een hekje gevolgd door de id. Om deze container ook netjes te centreren in alle andere browsers (buiten IE), stellen we de marges in op automatisch. De container weet hierdoor dat hij zelf in het midden moet gaan staan, hij heeft geen bevel nodig van het body-element zoals in IE. #container{ margin:auto; Door de extra instructie voor IE, zien we als resultaat dat alle inhouden in het midden gaan staan. Immers: IE vroeg text-align= center. Het gevolg is dat effectief alles gecentreerd wordt. Dit lossen we snel op: #container{ margin:auto; text-align:left; We geven de container ook een breedte. Je kan een vaste breedte kiezen in pixels (standaard is 960px omdat de webpagina dan op alle platformen kan weergegeven worden) of een procentuele waarde. Vaste breedte in pixels: #container{ margin:auto; text-align:left; width:960px; Een breedte in procenten (fluid layout): #container{ margin:auto; text-align:left; width:90%; In dit laatste geval, vult de container 90% van de beschikbare breedte van het browservenster. Zowel links, als rechts blijft er dan een marge van 5% over. Je merkt meteen het verschil tussen beide als je je browservenster begint te resizen.
5 Je kan zowel voor de body als voor de container een aparte achtergrondkleur instellen: body{ margin:0; padding:0; text-align:center; background-color:black; #container{ margin:auto; text-align:left; width:90%; background-color:white; Vervolgens komen we in de <div id= container > terecht. In deze doos zitten nog andere dozen die we eerst en vooral op de juiste plaats moeten zetten en de juiste afmetingen geven. Eerst en vooral stoten we op <div id="header">. Hierin komt onze bannerafbeelding en een slogan. #header{ height:300px; De bedoeling is dat we in onze header een achtergrondafbeelding plaatsen, maar daar wachten we nog even mee tot de rest van de pagina in orde is. Wel kunnen we al een achtergrondkleur toekennen zodat we duidelijk het verschil zien tussen de header en de rest van de pagina. #header{ height:300px; background-color:#cccccc; Je merkt dat we hier de waarde #cccccc toegevoegd hebben. Dat is de RGB-kleurwaarde voor lichtgrijs. We komen op de kleurwaardes later nog terug. Onze pagina ziet er nu ongeveer uit zoals in het voorbeeld hieronder:
6 Na de header vinden we de volgende onderdelen: <div id="pagecontent"> </div> <div id="navigation"> </div> <ul> </ul> <div id="content"> </div> <section> </section> Kris Merckx Werken met tekst in HTML Creative Commons License 2014 <li><a href="index.html">home</a></li> <li><a href="contact.html">contact</a></li> <li><a href="info.html">info</a></li> <li><a href="portfolio.html">portfolio</a></li> <article> </article> <h1>welkom op mijn website</h1> <p>een alinea met tekst.</p> De doos pagecontent bevat nog twee ingesloten dozen. Onder de header staat dus een doos die gevuls is met twee andere dozen: de <div id="navigation"> en de <div id="content"> De buitenste doos <div id="pagecontent"> zorgt ervoor dat de rest netjes op zijn plaats blijft staan. Binnen die div verdelen we de pagina in twee kolommen. Eentje voor het navigatiemenu (dit plaatsen we aan de linkerkant), eentje voor de eigenlijke paginainhoud ( content ). Voor de buitenste doos (<div id="pagecontent">) hoeven we dus niet echt opmaak te regelen. Toch merken we een onhandigheidje op. Als er zo goed als geen inhoud in onze pagina staat, plakt de footer (het onderste deel van de webpagina) meteen tegen de inhoud en de navigatie aan. We lossen dit even op door een hoogte te geven aan <div id="pagecontent">. Naargelang de inhoud die je in de pagina plaatst, wordt de pagina automatisch hoger. Hij lijkt een beetje op een doos met een rubberen onderkant. Hij kan oneindig uitrekken. Je zal merken dat een procentuele hoogte (bijvoorbeeld: height:100%) over het algemeen niet zal werken. Een browservenster heeft immers geen vaste hoogte. Als de tekst meer ruimte inneemt dan de schermhoogte of de hoogte van het browservenster, verschijnen er schuifbalken (srollbars).
7 Een hoogte kan je niet procentueel instellen omdat een webpagina nooit een vaste hoogte heeft, je kan hem in principe oneindig lang maken. We kunnen dit deel van de webpagina echter wel een minimumhoogte (min-height) geven. #pagecontent{ min-height: 600px; We gaan nu naar <div id="navigation">. #navigation{ De navigatiebalk verschijnt links en laten we ongeveer 200 pixels ruimte innemen van de container. #navigation{ float:left; width:200px; Dit zal in de meeste browsers meteen het gewenste effect krijgen. De inhoud gaat automatisch rechts staan, maar als je meer tekst toevoegt, kan het fout lopen.
8 We moeten er voor zorgen dat de pagina-inhoud niet plots aan de linkerkant uitlijnt als hij langer wordt dan het navigatiemenu. Het navigatiemenu is 200 pixels breed. Als we de pagina-inhoud een linkermarge geven van 210 pixels, blijft die altijd rechts staan en plakt die niet meteen tegen het navigatiemenu aan. #content{ margin-left:210px; Je merkt dat de footer ook automatisch op zijn plaats staat. Onze pagina is echter nogal kort omdat er op dit moment niet echt veel tekst in de pagina staat. We richten onze pijlen nu op het navigatiemenu. Voor onze links staan nog zwarte bolletjes, de links zijn standaard blauw en onderstreept. Dat moet en kan anders. We moeten nu goed opletten wat we doen. De links (<a>) staan stuk per stuk in een lijstitem (<li>), die <li>-elementen zijn een onderdeel van een ongeordende lijst (<ul>), en die lijst staat op zijn beurt in een <div> met als id navigation.
9 Of omgekeerd DIV#navigation => UL => LI => A We kijken eerst naar het diepste element, de links. We moeten opletten dat we onze stijl enkel toepassen op de links in het navigatiemenu en niet op alle links in de pagina. We schrijven dus niet a{ maar #navigation ul li a{ We willen onze links standaard in het wit, de achtergrond in het zwart en de lijn eronder moet weg: #navigation ul li a{ color:white; background-color:black; text-decoration:none; Je merkt meteen dat dit niet het gewenste resultaat oplevert. De stijl is wel aangepast, maar de zwarte achtergrond is slechts zo breed als het opschrift van de link en de link is enkel op de tekst aanklikbaar. De link gedraagt zich niet als een knop. We moeten aan onze browser vertellen dat hij de links moet behandelen als een doos, als één blok. #navigation ul li a{ color:white; background-color:black; text-decoration:none; display:block;
10 Dit ziet er al wat beter uit, maar nog niet helemaal zoals we wensen: 1. Er staan vervelende bolletjes voor de links. 2. Het navigatiemenu staat erg naar rechts. Kris Merckx Werken met tekst in HTML Creative Commons License Het opschrift van de link plakt helemaal tegen het zwarte kader aan. Het probleem met de bolletjes heeft niets te maken met de links zelf. De bolletjes zijn een eigenschap van de list-items (<li>) en de lijst (<ul>). Om ze te laten verdwijnen, moeten we de lijst selecteren. #navigation ul{ list-style-type:none; De vervelende bolletjes zijn nu verdwenen, maar de lijst plakt nog steeds niet tegen de linkerkant van de container aan. Om dit doel te bereiken, plaatsen we alle marges op 0. #navigation ul{ padding:0; margin:0; list-style-type:none; Dat ziet er al aardig beter uit. Nu moeten we de afstand van de opschriften tot de rand nog aanpassen. Hiervoor moet je niet margin, maar de padding (de marges aan de binnenkant van een element) vergroten. #navigation ul li a{ color:white; background-color:black; text-decoration:none; display:block; padding:13px; Het zou leuk zijn om de links een ander uitzicht te geven, als je er met de muis overheen beweegt. Daarvoor gebruiken een bijzondere CSS-techniek:
11 We selecteren opnieuw de links, maar vertellen nu wat er moet de gebeuren als de gebruiker met zijn muis over een hyperlink (:hover) een link beweegt. Dan veranderen we de kleur van het lettertype en de achtergrondkleur. #navigation ul li a:hover{ color:black; background-color:white; Nu ontbreekt er nog een lettertype. Dit hoef je maar één keer in te stellen nl. in het body -element. body{ margin:0; padding:0; text-align:center; background-color:black; font-family: helvetica, arial, sans-serif; Je merkt dat er niet één, maar meerdere lettertypes zijn ingegeven. Waarom? Niet op alle computersystemen staan dezelfde lettertypes. Je moet dus voorzien dat wanneer één lettertype ontbreekt, de browser automatisch op zoek gaat naar een ander. Als helvetica niet aanwezig is, zoekt hij naar arial. Als ook dat niet aanwezig is, neemt hij het eerste lettertype zonder voetjes. Zie zo... onze eerste CSS-layout is klaar. Tijd om te tweaken, te finetunen... aan te passen aan je eigen smaak. Hulpmiddelen: HTML-kleuren Kleurpaletten Lettertypes CSS3-effecten met browsercontrole
Werken met afbeeldingen in webpagina's
Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.
Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.
Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving
HTML krijgt een standaard opmaak van de browser
1 HTML krijgt een standaard opmaak van de browser Een link in HTML In HTML maakt u een link met de HTML-markering (HTML-tag) . Een a-tag (anchor, anker) heeft een attribuutwaarde nodig om de link te
Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >
Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken
Natuurlijk moet je niet element invoeren, maar de afgesproken benamingen, meestal afkortingen: zo staat p voor alinea en h1 voor een grote kop.
HTML-elementen Met de markeertaal HTML bouw je webpagina's en kan je ze eveneens aan elkaar koppelen (linken). Een webpagina bouw je niet met een tekstverwerker. Je schrijft hem best in code. Een browser
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014
Min-height en min-width
Oefening 15.5 Min-height en min-width Maak op van uw een webpagina s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint
Descendant selectors toepassen
HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving. 13.7 Verticaal navigatieblok Een
Websitecursus deel 2 CSS
Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website
Inhalen les 7 (versie B)
Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.
Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011
Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011 1 Inhoudsopgave Wat gaan we doen?... 4 Eerst wat uitleg:... 4 Wat is HTML:... 4 Wat is CSS:... 4 Wat is het resultaat
Interactief blok 2 code opdracht 6 - wireframe
Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).
Om te beginnen heb je een geraamte van je website nodig. Maak een nieuwe map met de naam gevorderden_website aan om je website in te zetten.
1 2 Als je de Beginner en Midden HTML & CSS Sushi Kaarten hebt afgerond, dan weet je al veel over het programmeren met deze twee talen. Deze kaarten leren je hoe je al die onderdelen samenvoegt om een
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
<head><style type="text/css">h1 {font-size: 150%}h2 {font-size: 130%}p {fontsize:
h1 {font-size: 150%h2 {font-size: 130%p {fontsize: 100%h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%
Welkom bij mijn website tutorial (Deel 2)
Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.
Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te
6. De sitemap of stamboom van uw website
6. De sitemap of stamboom van uw website Dynamisch of statisch? CMS of Dreamweaver? Een databankgestuurde website en CMS Grotere websites hebben nood aan een eenvoudiger manier om informatie toe te voegen,
Programmeren in MyShop
Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je
Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012
Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Positie en flow Boxes, block-level en inline elements: Ieder HTML-element wordt, als het ware, als een omkaderd block-
Cascading Style Sheets
Cascading Style Sheets Dit gedeelte wordt uitgebreid besproken in http://www.handleidinghtml.nl/css/index.html 1TIN Internettechnologie 2003-2004 les 07 1 Onderwerpen Cascading model Syntax Toevoegen van
HTML&CSS OEFENBOEKJE. van:
HTML&CSS OEFENBOEKJE van: HTML SYNTAX De meeste HTML tags zien eruit zoals hierboven. Een tag om te openen , en een tag om te sluiten . De letters die tussen de staan, geven aan wat voor
XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters
XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Het opmaken van hyperlinks... 1 1.1.2. Kleur... 1 1.1.3. Het gebruik van kleuren bij het
LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting.
LES 8: CSS Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress
HTML en CSS gevorderd
HTML en CSS gevorderd Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke
1. De basis 2. De basis uitbreiden
Wordpress Theme Hoe moet je deze reader gebruiken? Deze reader is digitaal, zodat je makkelijk stukjes code kunt kopieren en plakken. 1. De basis 2. De basis uitbreiden Hier aan de linkerkant vind je een
Internet Standaarden HC4
Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor
Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.
MIJN EERSTE WEBSITE Sushi DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Van hier Naar daar 1 2 3 Doe het stap voor stap om te zien hoe CSS werkt! Voeg een rand toe van 1 punt in de breedte om
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Eindopdracht webdesign
Eindopdracht webdesign Opdracht 1: html Maak html-pagina jouwnaam-formulier.html met een webformulier volgens het voorbeeld: Geef in de form tag attribuut action de waarde../cgi-bin/formmail.pl en geef
Les 7. Instap. CSS en views: schilderijen. Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is.
Les 7 Instap Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is. CSS en views: schilderijen Ons eerste overzicht in de vorige les bestond uit het tonen van
FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:
1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina
Inhoud leereenheid 3 CSS. Introductie 65. Leerkern 66. Terugkoppeling 91. Uitwerking van de opgaven 91
Inhoud leereenheid 3 CSS Introductie 65 Leerkern 66 1 HTML zonder CSS 66 1.1 Default styling 66 1.2 Block, inline, table 66 1.3 Reset CSS 67 2 Planning op papier 68 2.1 Responsive design 68 2.1.1 Eenheden
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 6) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Eindopdracht HTML/CSS: hovenier
Eindopdracht HTML/CSS: hovenier De eindopdracht is verplicht voor wie de opleiding Applicatie Ontwikkelaar wil gaan doen. Het is de bedoeling dat je zo veel mogelijk individueel werkt. Als je samenwerkt
Er is nog heel wat voor nodig om van alle losse HTML-code
Boxmodel, weergavemodel en positionering 9 Er is nog heel wat voor nodig om van alle losse HTML-code een toonbare pagina te maken, meer dan u misschien op het eerste gezicht denkt. Als de HTML-code is
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 5) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp
DOORLOPENDE OPDRACHT KINEPOLIS Beste studenten, Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp maken/ code schrijven voor de Kinepolis website. Wat hoort er thuis
Wat is een child-theme?
Child theme Waarschuwing 1. Het maken van een child theme is relatief eenvoudig, u hebt er wel FTP toegang voor nodig bij uw provider. 2. Het is soms lastig om precies uit te vinden welke css codes u moet
Van Dreamweaver CS4 naar CS5
Danny Devriendt Van Dreamweaver CS4 naar CS5 Beknopte overstapgids www.wwwsoft.be Bijlage gratis te downloaden bij Basiscursus webdesign Dreamweaver CS4 WWW-Soft GCV 2010 www.wwwsoft.be CS5 Nieuw in Dreamweaver
Nu maak je een template en exporteert hem later naar de gewenste omgeving.
Gebruik Artisteer Start Artisteer 4 start enigszins anders dan de vorige versies. Vroeger moest je eerst kiezen voor welke omgeving je een template zou maken. Nu maak je een template en exporteert hem
programmeren in HTML (5) CSS (3) JavaScript
programmeren in HTML (5) CSS (3) JavaScript Op dit lesmateriaal is een Creative Commons licentie van toepassing. 2010 Remie remie.woudt@gmail.com Woudt Inhoudsopgave 1 HTML...1 1.1 Wat heb je nodig?...1
Frontpage 2003. Een web aanmaken in Frontpage doe je zo: 1 Start Frontpage op. Het openingsvenster van Frontpage verschijnt.
opmerking In deze instructie wordt een web gemaakt met frames. Het voorbeeld behandelt een digitaal portfolio, maar natuurlijk kun je de instructies gebruiken voor elk web met frames, ongeacht het onderwerp.
Leer CSS Positioneren in Negen Stappen
Leer CSS Positioneren in Negen Stappen Deze tutorial (vertaald uit het engels, origineel hier te vinden: http://www.barelyfitz.com/screencast/html-training/css/positioning/ ) laat zien hoe je met CSS verschillende
Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash
Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis
CSS. CSS - Inleiding. Scheiding van inhoud en vorm
CSS opmaken met Cascading stylesheets inleiding style sheet declaratie stijl declaratie stijl eigenschappen commentaar
FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40
FFOUCHIER 01/11/2018 FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40 De meeste juiste antwoorden: #22 Minste Juiste antwoorden: #30 1. Selecteer de juiste HTML-code voor het maken
Lesbrief Les 2 Basis CSS
Lesbrief Les 2 Basis CSS Jullie hebben net de basis uitleg van CSS gehad. Om deze uitleg wat te laten bezinken gaan we aan de slag met de oefenopdracht voor deze week. Lees de opdracht goed door zodat
Safira CMS Handleiding
Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...
De frameset uit de afbeelding wordt op de volgende manier gedefinieerd:
FRAMES GEBRUIKEN Met frames kan het venster van een browser zo worden ingedeeld, dat er meerdere webpagina's tegelijk getoond kunnen worden. In de afbeelding hieronder staat een webpagina met frames. We
HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.
Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for
Frontend ontwikkeling
Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft
Handleiding Net-Book voor webdesigners. Iedereen kan het!
Handleiding Net-Book voor webdesigners Iedereen kan het! Colofon Colofon Leverancier: Become-IT Herderlaan 8 3851 BD ERMELO Telefoon: 0341-470068 Internet: http://www.become-it.nl Ondersteuning: Per e-mail:
Publicatie formulieren en surveys
Handleiding: Publicatie formulieren en surveys Deze handleiding is in te zetten voor MailPlus Marcom en MailPlus ecom. Inhoudsopgave Introductie... 1 1 Formulieren integreren... 2 1.1 Formulieren integereren
Toetsmatrijs Web Markup
Toetsmatrijs Web Markup Deze toetsmatrijs verstrekt de leerdoelen en toetscriteria voor het vak Web Markup competentienummers of C 1.1 Een eenvoudige webpagina bouwen, testen en publiceren op het web HTML,
HTML/CSS GEVORDERDEN 1
Inhoudsopgave 5 6 7 8 9 Configuratie Alle kleuren! Organiseren van je pagina Thema's ontwerpen Jouw individuele stijl Inspector Gadget Groter Maken Animatie Leer Klara om om te rollen!.....5.6.7.8.9 Configuratie
Software Instructions for Real Kids - Felix Plesoianu (2009) en Kris Merckx (2013) - Creative Commons License
SIRK Software Instructions for Real Kiddies (versie 0.247) De programmeeromgeving, interpreter en compiler kan je online gebruiken op www.ardeco.be/sirk Variabele Functies Functienaam Parameters Voorbeeld
LES 6 HTML, STYLE SHEETS EN DE AFBOUW VAN DE WEBSITE
LES 6 HTML, STYLE SHEETS EN DE AFBOUW VAN DE WEBSITE Eerst wat theorie. Kijkt u eens naar de links. De link Bolnes eerst zonder lijntje onder, en dan met een lijntje boven. Dat resultaat is verkregen door
LES 3 WEBPAGINA'S MAKEN MET HTML VOOR DE INHOUD EN MET CSS VOOR DE OPMAAK
LES 3 WEBPAGINA'S MAKEN MET HTML VOOR DE INHOUD EN MET CSS VOOR DE OPMAAK De webpagina die we in de eerste twee lessen maakten, bestond uit een gedicht van tien woorden. titel van de webpagina
Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.
Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in
Template instellingen
Template instellingen Bij Vormgeving/Template instellingen vind je alle mogelijkheden om jouw huisstijl door te voeren in je shop. De template instellingen zijn onderverdeeld in diverse tabbladen. In dit
WEBDESIGN HTML / CSS 2
WEBDESIGN HTML / CSS 2 Fons Vitae Lyceum INHOUD 1 INLEIDING 1.1 wat is HTML 1.2 wat is CSS 1.3 browsers browserkeuze top 5 meest gebruikte browsers 1.4 wat is er nodig 2 HTML: een eerste webpagina 2.1
Extra: Hoe u uw website met HTML kunt verbeteren
Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel
Technische werking whitelabel reviewmodule
Na integratie van de whitelabel reviewmodule van Kieskeurig.nl kunnen bezoekers via jouw website reviews op Kieskeurig.nl en je eigen website achterlaten. In dit document vind je meer informatie over de
Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3
Uitgave 6 versie 2 Augustus 2010 Highpotech IT Nieuwsbrief Een webpagina maken Eerdere uitgaven Een website wordt weergegeven op een hoek waarvan de verhoudingen dicht in de Werken met Excel beeldscherm
XHTML en CSS. Ruud Koortens Frans Peeters
XHTML en CSS Ruud Koortens Frans Peeters januari 2008 Inhoudsopgave Inleiding... i 1. XHTML 1.0... 1 1.1. XML Declaratie... 1 1.2. Het juiste DOCTYPE in hoofdletters... 2 1.3. De XML-namespace... 2 1.4.
Pro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen
Informatietechnologie 1. Inleiding tot CSS. Richtlijnen voor opmaak. Kristof Michiels
Informatietechnologie 1 Inleiding tot CSS Richtlijnen voor opmaak Kristof Michiels In deze presentatie Voordelen en kracht van CSS Hoe schrijf je CSS stijlregels? Toevoegen aan HTML documenten Basisconcepten:
I'VE GOT EM FRONTEND DEVELOPMENT LES 3
I'VE GOT EM FRONTEND DEVELOPMENT LES 3 VORIGE WEEK CSS bling Selectors deel 1 Even heel kort samenvatten waar we het ook al weer over hebben gehad vorige week. Niet te lang bij stilstaan want er is heel
Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid
LEEREENHEID HTML/CSS Dit document bestaat uit twee onderdelen - Onderdeel Leereenheid - Onderdeel Onderwijsproduct 1 Naam leereenheid In deze tabel staat de naam en het type van de leereenheid Leereenheid
Hand-out Web Technologies, werkcollege 5 Alex Reuneker 2012
Hand-out Web Technologies, werkcollege 5 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Groeperen (div- en span-elementen) : Het HTML-element div is een block-level element (zie hand-out bij het
Les 8 (Drupalversie: 7) Display Suite
Les 8 (Drupalversie: 7) Display Suite Display Suite (DS) is de tegenhanger van Panels. Eigenlijk is dat een verkeerde uitspraak want in deze les gaan we beiden combineren. Step 1: Voorbereiding Download
Foutoplossing FotoSpecial Blok
Les 9 Foutoplossing FotoSpecial Blok In een vorige les maakten we een blok op de front die de verschillende fotocategoriën weergeeft. Dat doet een beetje raar bij het hoveren. In onderstaande bijlage kan
WEBSITE USABILITY. white-paper
WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te
1 Start Dreamweaver op. De workspace verschijnt. De Dreamweaver MX Workspace. 2 Klik op Dreamweaver Site in de kolom Create New.
In deze instructie wordt een web gemaakt met frames. Het voorbeeld behandelt een digitaal portfolio, maar natuurlijk kun je de instructies gebruiken voor elk web met frames, ongeacht het onderwerp. Deze
Contactformulier...74 Gebruikers...77 Login...78 Registratie...79 Gebruikersnaam vergeten en wachtwoord vergeten...81 Module stijlen bepalen en
Inhoud Inhoud...1 De Basis Template bestanden...3 Basis Template Joomla 3 bestanden...4 templatedetails.xml...6 index.php...8 ...11 Wat te wijzigen?...14 Melding maken voor IE6 en IE7...14 Lettertype,
Proefexamen TEKSTVERWERKEN
Proefexamen TEKSTVERWERKEN Beschikbare tijd: 90 minuten 150731 1 Proefexamen HET PROEFEXAMEN BESTAAT UIT 6 GENUMMERDE PAGINA'S, waarin opgenomen: 7 OPDRACHTEN, gericht op toetsing van vaardigheden met
Editie 2010. Handleiding Tiny MCE. Tiny MCE Uitgebreide handleiding Sanmax bvba Mieënbroekstraat 33 3600 Genk T 070.250.236 E info@sanmax.
Editie 2010 Handleiding Tiny Tiny Uitgebreide handleiding Sanmax bvba Mieënbroekstraat 33 3600 Genk T 070.250.236 E info@sanmax.be Sanmax Tiny handleiding Inhoudsopgave Deel 1: Inleiding... 3 Deel 2: icoontjes
Handleiding Nieuwsbrief InSocial in Mailchimp
Handleiding Nieuwsbrief InSocial in Mailchimp Inhoud 1 Mogelijkheden page 2 2 Bericht opties page 3 3 Achtergrond page 4 4 Afbeeldingen page 5 5 Tekst page 6 6 Link page 7 7 Testen page 8 TEST altijd eerst
MARTINA. Wist je dat..? Truckjes en weetjes in Drupal 7. 6. Artikels, lengte en aantal op frontpagina (en welkomtekst zonder lees meer )
MARTINA Wist je dat..? Truckjes en weetjes in Drupal 7 Inhoud: 1. Inlogknop 2. Aangepast beheerdermenu 3. Actieve pagina in de broodkruimel 4. Afbeelding op zoekknop (en geen tekst) [CSS] 5. Logo met link
Op heel brede monitoren kan een dergelijke site er snel ongemakkelijk worden doordat de tekst op heel lange regels komt te staan.
Layout met CSS Naast het opmaken van tekst, navigatie menu s en foto s komt de echte kracht van CSS tot uiting voor de layout van de webpagina. Het is geen eenvoudig onderwerp, daarom eerst een beetje
Dennis Wagenaar 19-04-10 v 1.0
Ontwerprapport Save Energy Leiden Dennis Wagenaar 19-04-10 v 1.0 Inhoudsopgave Inleiding...4 1 Grafisch Ontwerp...5 1.1 De website...5 1.2 Header...6 1.3 Menu...6 1.4 Content...7 1.5 Grafieken...7 1.5
XHTML en CSS. Deel 2. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters
XHTML en CSS Deel 2 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Positionering, absoluut en relatief... 2 1.1.2. Float en clear... 3 1.1.3. Float en clear
Stelt de voorgrondkleur van de tekst van een element in. Stelt in hoe de achtergrondfiguur moet worden herhaald, standaard: repeat.
OVERZICHT CSS - EIGENSCHAPPEN Eigenschap Beschrijving Mogelijke waarden KLEUR EN ACHTERGROND color Stelt de voorgrondkleur van de tekst van een element in. background-color Stelt de achtergrondkleur van
Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen
Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 1 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text)
INHOUD: 1. INDEX 2. Tekst opties instellen 3. Andere kleur kiezen dan de getoonde. Cellen bewerken: Foto s en/of afbeeldingen toevoegen:
INHOUD: 1. INDEX 2. Tekst opties instellen. Andere kleur kiezen dan de getoonde. Cellen bewerken: cel noemt men de plaats waarin b.v. deze tekst staat 3 Foto s en/of afbeeldingen toevoegen: 4 Het uiterlijk
Bijlage. Onderzoeksrapport. Onderwerp: HTML 5 - CSS 3.0 - Web 3.0 Opdrachtgever: Karel de Heer Opdrachtnemers: Future Websolutions
Bijlage Onderzoeksrapport Onderwerp: HTML 5 - CSS 3.0 - Web 3.0 Opdrachtgever: Karel de Heer Opdrachtnemers: Future Websolutions Tom Somerville 428573 Roy Rutten 428148 Rob Lohmann 429898 Gerard Peters
Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/
Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden
Sushi MIJN EERSTE WEBSITE EEN WEBPAGINA BEWERKEN. Kaart 1 van 10 Ik ben HTML/CSS aan het leren
MIJN EERSTE WEBSITE Sushi EEN WEBPAGINA BEWERKEN Kaart 1 van 10 We gaan een nieuwe website bouwen! We gaan hem over boeken maken maar je kan hem ook zo maken zoals jij zelf wilt! Download de HTML code
Leerlingdossier & handelingsplannen. Welke mogelijkheden biedt de online tekstverwerker in ESIS? FAQ
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
HTML/CSS GEVORDERDEN 2
Inhoudsopgave 5 6 7 Configuratie Klikbare kaarten Alles op een rijtje Opmerkingen en bijschriften Ontwerp een gave pagina opmaak Fotocollage Speciale effecten.....5.6.7 Configuratie We gebruiken Thimble
Heeft hetzelfde effect als <b> </b> maar is belangrijker voor SEO. Underline: de tekst wordt onderlijnd. Italic: de tekst wordt schuingedrukt
Hoofdstuk 1 : HTML 1.1 Structuur van het HTML bestand hier komt de titel van de pagina hier komt alles wat we op de pagina willen zien 1.2 HTML- TAGs De BREAK tag wordt gebruikt om
3 Website opbouwen: vervolg
3 Website opbouwen: vervolg 3.1 Elementen 3.1.1 Bestand Op je website kan je een bestand plaatsen (doc, pdf, ) dat door je bezoekers gedownload kan worden 3.1.2 Links. Zowel bij het typen van tekst (2.1.1)
HTML-EDITOR GEBRUIKEN
HTML-EDITOR GEBRUIKEN Over TinyMCE TinyMCE is een kleine What-You-See-Is-What-You-Get (WYSIWYG) editor voor teksten. De bediening vindt plaats in de web browsers, zoals MSIE of Mozilla. Het werken met
RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA
RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA AGENDA Het Doel #responsivemobilefirsthtml5buzzwordcompliant CSS preprocessing SASS Werken
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend:
Cascading Style Sheets (CSS)
pagina 1 van 32 Cascading Style Sheets (CSS) Copyright 2001-2005 Edwin Martin Laatst aangepast: 4 juni 2005. Bij veel voorbeelden in de cursus wordt gebruik gemaakt van style sheets.
studentengids Media Vormgever Grafische Vormgeving training 025 Website Bouwen Met Adobe Dreamweaver en Adobe Photoshop leerjaar 2 t 025 versie 001
studentengids Met Adobe Dreamweaver en Adobe Photoshop leerjaar 2 t 025 versie 001 Competenties In deze training ga je aan de slag met de volgende kerntaken, bijbehorende werkprocessen en competenties.