Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012
|
|
|
- Roel Hendrickx
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), Id s en klassen (id- en class-attributen) id-attribuut: Elk HTML-element kan gespecificeerd worden door middel van een id-attribuut. Met dit attribuut krijgt een HTML-element een unieke aanduiding binnen een HTML-pagina. Belangrijk hierbij is dat de attribuutwaarde (de daadwerkelijke identificatiewaarde) maar eenmaal op dezelfde pagina mag voorkomen. Het onderstaande HTML-element mag dus slechts één keer op een webpagina voorkomen. Met CSS (en later met JavaScript) maken we dankbaar gebruik van het id-attribuut. <p id= postmodernisme >Willem Brakmans postmoderne literatuur</p> class-attribuut: Waar met het id-attribuut een unieke waarde aan een HTML-element wordt toegekend, specificeert het class-attribuut welke klasse aan een HTML-element wordt toegekend. Meerdere HTML-elementen kunnen dezelfde klasse toegewezen krijgen. Zo kan vervolgens met CSS gemakkelijk een opmaak worden gespecificeerd voor alle elementen van dezelfde klasse binnen een webpagina. <p class= literatuurstroming >Willem Brakmans postmoderne literatuur</p> NB klassen en id s kunnen worden gecombineerd. 2. Block- en inline-niveau Blokelementen: Blokelementen worden in de browser standaard op een nieuwe regel weergegeven (onder elkaar). Voorbeelden van blokelementen zijn <h1>, <p>, <ul> en <li>. Inline-elementen: Inline-elementen worden in de browser standaard binnen een regel weergegeven (naast elkaar). Voorbeelden van inline-elementen zijn <a>, <b>, <em> en <img>. 3. CSS Cascading StyleSheets (CSS): Opmaaktaal: Elementen: Selectors: Declaraties: Cascading stylesheets ( overervende stijlbladen ) beschrijven de visuele opmaak van HTML-elementen. Denk dan aan typografie, kleur en lay-out. CSS is een opmaaktaal en verschilt in syntaxis van HTML. Ieder HTML-element, zowel een blok- als inline-element, kan worden opgemaakt door middel van CSS. Hieronder wordt een h1-tag opgemaakt. HTML: <h1>de reis van de douanier naar Bentheim</h1> CSS: font-family: Arial; color: red;} In de bovenstaande CSS-code is h1 de selector. De selector is van toepassing op alle h1-elementen (alle h1-tags) binnen een HTML-pagina. De stijlregels die erbij horen worden declaraties genoemd. Declaraties specificeren de opmaak van het HTML-element waarnaar de selector verwijst. 1
2 Interne CSS: Externe CSS: Een declaratie bestaat uit een eigenschap of property (font-family, color) en een waarde of value (Arial, red). Interne CSS wordt opgenomen in de head-sectie van een HTML-pagina (de opmaak zegt immers iets over de inhoud van de pagina en is daarmee een metagegeven), middels de style-tag. Middels het type-attribuut dient te worden gespecificeerd dat het type text/css is. <head> <title>brakman, Willem - De reis van de douanier</title> <style type= text/css > font-family: Arial; color: red;} </style> </head> NB Gebruik interne CSS slechts dan als een website uit niet meer dan een pagina bestaat. Bij externe CSS wordt in de head-sectie van een HTML-pagina, middels de link-tag een verwijzing naar een CSS-bestand (.css) opgenomen. De attributen href, type en rel specificeren respectievelijk het pad naar het CSS-bestand, het type (ook hier text/css ) en het type relatie (in dit geval stylesheet ). <head> <title>brakman, Willem - De reis van de douanier</title> <link href= css/styles.css type= text/css rel= stylesheet /> </head> NB Gebruik externe CSS als een website uit meer dan een pagina bestaat. 4. CSS-selectors Universal selector: Type selector: Een universal selector is van toepassing op alle elementen binnen een HTML-pagina. * { font-family: Arial;} Een type selector is van toepassing op het gelijknamige HTML-element. h1, h2 { color: green;} 2
3 Class selector: Een class selector is van toepassing op HTML-elementen van de genoemde klasse en wordt gespecificeerd door middel van het.-teken. HTML: <p class= author >Dit verhaal is geschreven door W. Brakman.</p> CSS:.author { Ook specifieke element-klasse-combinaties kunnen worden aangesproken. p.author { De bovenstaande declaratie is alleen van toepassing op p-tags die de klassenwaarde author hebben. Pseudo-class selector: Een pseudo-class selector is van toepassing op HTML-elementen in een bepaalde staat. Denk hierbij aan een link waarop geklikt is. (Zie pagina s 290 en 291 in het boek.) a:visited { color: purple;} Id selector: Een id selector is van toepassing op HTML-elementen met de genoemde (unieke) idwaarde en wordt gespecificeerd door middel van het #-teken. HTML: <h1 id= top > De reis van de douanier naar Bentheim</h1> CSS: #top { color: purple;} Child selector: Een child selector is van toepassing op HTML-elementen die direct binnen de parent staan (ouder-kind-relatie). li>a { Door middel van de bovenstaande selector en declaratie worden alle links die direct in een list-item staan gecursiveerd. Descendant selector: Een descendant selector is van toepassing op HTML-elementen die direct of indirect binnen de parent staan (grootouder-kind-kleinkind-relatie). li a { Door middel van de bovenstaande selector en declaratie worden alle links die direct of indirect in een list-item staan gecursiveerd (zoals links die binnen een list-item en binnen een strong-tag staan). Overerving: Binnen CSS is het concept van overerving zeer belangrijk. Sommige eigenschappen of properties gelden niet alleen voor de HTML-elementen van hun selector, maar ook voor hun descendants. Een voorbeeld hiervan is de font-family-eigenschap. Middels de onderstaande CSS-code worden (bijna) alle HTML-elementen, zoals paragrafen en links, in lettertype Arial weergegeven. font-family: Arial;} 3
4 Wanneer twee of meer selectors (direct of indirect) van toepassing zijn op een HTMLelement, zijn de onderstaande regels van toepassing. a. Een regel overschrijft een ervoor gespecificeerde regel. b. Een specifieke(re) regel overschrijft een minder specifieke (generieke) regel. c.!important overschrijft regels a en b. p b { color: blue!important;} p b { color: yellow;} NB Zie bladzijden 239 en 240 in het boek voor voorbeelden. 5. Kleur Color: Background-color: Kleurnamen: RGB: HEX: HSL en HSLA: Opacity: De color-eigenschap specificeert de kleur van tekst binnen een HTML-element. p { color: grey;} De background-color-eigenschap specificeert de achtergrondkleur van een HTML-element. background-color: yellow;} De kleurwaarde wordt gespecificeerd door middel van een kleurnaam, een RGB-waarde of een HEX-waarde. Er zijn 147 kleurnamen waarmee kleurwaarden kunnen worden aangegeven. h2 { color: red;} Een kleur kan worden gespecificeerd middels een RGB-waarde. (RGB staat voor rood, groen en blauw.) Elke deelwaarde binnen de RGB-waarde ligt tussen 0 (minimum) en 255 (maximum). h2 { color: rgb(255,0,0);} Een kleur kan worden gespecificeerd middels een HEX-waarde. De waardenparen binnen de HEX-waarde representeren R, G en B en liggen tussen 0 (minimum) en e (maximum). Een HEX-waarde wordt aangeduid met het #-teken. p { color: #ee0000;} Een kleur kan worden gespecificeerd middels een HSL-waarde. HSL staat voor hue, saturation en lightness. Bij HSLA wordt de doorzichtigheid toegevoegd middels de alphawaarde. (Zie pagina s 255 en 256 in het boek voor uitleg.) background-color: hsl(15,100%,100%,0.5;} De opacity-eigenschap specificeert de doorzichtigheid van een HTML-element. De opacitywaarde ligt tussen 0.0 (minimum) en 1.0 (maximum). 4
5 p { background-color: red; 6. Typografie Sans-serif: opacity: 0.5;} Sans-serif betekent schreefloos. Schreefloze lettertypen kennen geen zogenaamde schreef (de dwarsstrepen aan de horizontale en verticale uiteinden van de letters). Schreefloze letters zijn geschikt voor beeldschermtekst en minder voor gedrukte tekst. Een voorbeeld van een schreefloos lettertype is Helvetica (zie hieronder). Abcdefg Serif: Serif-lettertypen kennen wel een schreef. Lettertypen met schreef zijn geschikt voor gedrukte tekst en minder voor beeldschermtekst. Een voorbeeld van een schreeflettertype is Times New Roman (zie hieronder). Abcdefg Monospace: Bij monospace-lettertypen is elke letter van dezelfde breedte. Vooral voor code, zoals HTML- en CSS-code, is een monospace-lettertype geschikt, omdat e.e.a. zo goed uitlijnt. Een voorbeeld van een monospace-lettertype is Courier New. Abcd Mnwj Lettertypen: Een lettertype of font dient op de client aanwezig te zijn (te zijn geïnstalleerd), om te kunnen worden weergegeven. Standaardlettertypes zijn bijvoorbeeld Arial, Times New Roman en Helvetica. Een niet-standaard-lettertype kan worden gebruikt middels de font-face-eigenschap. Zo kunnen lettertypen op de server of bijvoorbeeld Google-fonts worden { font-family: ChunkFiveRegular ; src: url( fonts/chunkfive.eot );} font-family: ChunkFiveRegular, Georgia, serif;} 5
6 weight: style: stretch: size: Align: NB Zie pagina 277 in het boek. De font-weight-eigenschap (light, medium, bold of black) specificeert de dikte van een letter. p { font-weight: medium;} De font-style-eigenschap (normal, italic of oblique) specificeert of een letter cursief wordt weergegeven..remark { De font-stretch-eigenschap (condensed, regular, of extended) specificeert hoe breed een letter en de tussenruimte zijn. font-stretch: extended;} De font-size-eigenschap specificeert (in pixels, percentages of ems) hoe groot een letter wordt weergegeven. font-size: 12px;} font-size: 200%;} h2 { font-size: 1.3em;} NB ems specificeert de grootte van een letter relatief ten opzichte van de standaardgrootte van de letter m. Zie ook pagina s in het boek voor een duidelijk overzicht. De text-align-eigenschap (left, right, center en justify) specificeert de uitlijning van de tekst. (De tekst in de kaders is afkomstig uit Brakman 1983: 5.) Left Right Center Justify Andere tekst- Andere tekst-eigenschappen zijn transform (p. 281), decoration (p. 282), line-height (p. 283), eigenschappen: letter- en word-spacing (p.284) en indent (p. 287). Zie de respectievelijke pagina s in het boek voor uitleg. Bronnen Brakman, Willem (1983). De reis van de douanier naar Bentheim. Amsterdam: Querido. Duckett J. (2011) HTML and CSS: Design and Build Websites. Indianapolis: John Wiley and Sons Inc. 6
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-
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
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
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
Toen stylesheets nog niet bestonden, moesten webdesigners met
Hoofdstuk 11 Creatief met kleuren en lettertypen In dit hoofdstuk: `` Tekstopmaak definiëren met CSS `` Werken met paginakleuren en achtergronden `` Lettertypeweergave veranderen `` Tekstbehandelingen
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
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.
Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.
Stijlregels I Nu je de verschillende soorten CSS kent kan je deze ook gaan toepassen. Onthoudt dat alle opmaak in xhtml met CSS gemaakt moet worden. Tegenwoordig zijn er meer dan 200 CSS properties, deze
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
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
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
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
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
Een webpagina maken. Een website bouwen met HTML en CSS practicum 1
Een webpagina maken De komende periode wordt in 8 practica een aantal technieken behandeld, die je nodig hebt om een (eenvoudige) website te kunnen bouwen. Nadat je deze 8 practica hebt doorgewerkt, moet
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
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
Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: <i>dit is scheve tekst</i>
Wat is HTML? HTML staat voor HyperText Markup Language. Een HTML tekst bestaat uit zogenaamde platte tekst (ook wel de eerste 128 tekens van ASCII genoemd). In tegenstelling tot bijvoorbeeld tekstverwerker
Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?
HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@cs.vu.nl Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) Demo Vragen vrije Univers iteit amsterdam 1 2 Opmaaktaal Letter Kleur Plaatjes
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
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
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
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
<meta name="description" content= "de tekst die in zoekresultaten bij de link te lezen is" />
Author Description Favicon
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:
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
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)
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.
BIJLAGEN Begrippenlijst HTML
BIJLAGEN Begrippenlijst HTML In dit overzicht staan alle elementen, attributen en andere begrippen van xhtml versie 1.0 strict die in dit boek zijn behandeld, alfabetisch gerangschikt. BIJLAGEN Begrippenlijst
HTML richtlijnen e-mail marketing. part of the valley
e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van
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
Een LOI-opleiding is méér dan leerstof alleen
Een LOI-opleiding is méér dan leerstof alleen Bedankt voor het aanvragen van deze proefles. Hierin laten we een stukje van de leerstof zien, om een indruk te geven van de opzet en het niveau. Maar een
Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans
Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald
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
HTML. Dennis van Wakeren. CC Naamsvermelding 3.0 Nederland licentie. http://maken.wikiwijs.nl/68933
Auteur Laatst gewijzigd Licentie Webadres Dennis van Wakeren 14 December 2015 CC Naamsvermelding 3.0 Nederland licentie http://maken.wikiwijs.nl/68933 Dit lesmateriaal is gemaakt met Wikiwijsleermiddelenplein.
Agenda (X)HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?
(X)HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@few.vu.nl vrije Universiteit amsterdam Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) XHTML Vragen Demo 1 vrije Universiteit
CSS. CSS - Inleiding. Scheiding van inhoud en vorm
CSS opmaken met Cascading stylesheets inleiding style sheet declaratie stijl declaratie stijl eigenschappen commentaar
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
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
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
Doelen: Als je deze opdracht hebt uitgevoerd, heb je de volgende doelen bereikt: Je kunt een eenvoudige webpagina maken met behulp van HTML.
OPDRACHTKAART MM-05-04-01 HTML Voorkennis: Geen. Intro: De opmaaktaal voor het WWW heet HTML (Hyper Text Markup Language). Met HTML kan een webpagina worden gemaakt, inclusief hyperlinks. Tijdens deze
<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%
Stap voor stap door je studie
Groei door. Stap voor stap door je studie Welkom, Bedankt voor het aanvragen van deze proefles. Hiermee krijg je een goede indruk van studeren bij de LOI en de opleiding van je keuze. Je maakt kennis met
HTML & CSS. Studievaardigheden 2013. Frank Takes (ftakes@liacs.nl) LIACS, Universiteit Leiden
HTML & CSS Studievaardigheden 2013 Frank Takes (ftakes@liacs.nl) LIACS, Universiteit Leiden Inleiding Voorkennis: geen Stof: www.w3schools.com en dit college: www.liacs.nl/~ftakes/pdf/htmlcss.pdf Opdracht:
Module IV - Cascading Style Sheets (CSS)
Module IV - Cascading Style Sheets (CSS) Cascading Style Sheets kunnen we het best vergelijken met opmaakprofielen binnen tekstverwerkers zoals Microsoft Word, Corel WordPerfect, OpenOffice Opmaakprofielen,
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
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
CLOUDSUITE. stijlwijzer. februari 2015
CLOUDSUITE stijlwijzer februari 2015 colofon Aan deze uitgave kunnen op geen enkele manier rechten worden ontleend. Onder voorbehoud van (druk)fouten. Niets uit deze uitgave mag zonder toestemming van
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
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.
AutoTrack.nl. CSS Documentatie Voorraadlijst
AutoTrack.nl CSS Documentatie Voorraadlijst CSS Documentatie Voorraadlijst CSS documentatie Voorraadlijst Bij uw AutoTrack.nl voorraadlijst is het mogelijk om de standaardopmaak aan te passen naar uw wens,
AutoTrack.nl. Handleiding Implementatie Voorraadlijst
AutoTrack.nl Handleiding Implementatie Voorraadlijst Basis Implementatie De nieuwe AutoTrack.nl Voorraadlijst kunt u (of uw webbouwer) implementeren door op uw website de URL die u van AutoTrack.nl heeft
Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013
Zelf een eenvoudige website opzetten Jorrit Groenevelt & Arjan Kraak Juni 2013 1 Inleiding/Doel Een onmisbaar onderdeel van het starten van een bedrijf is het opzetten van een website. Een onderneming
Handleiding - Styling van OFB Web 4.0
Handleiding - Styling van OFB Web 4.0 Versie: 1.0 Inleiding OFB Web is opgebouwd uit controls. De plaatsing en positionering van de controls wordt vastgelegd in de page.aspx. Dit bestand kan gezien worden
Internet_html.doc 1/6
Internet_html.doc 1/6 Internet html. HTML syntax en regels Een HTML-element is opgebouwd uit een startmarkering en een eindemarkering (behalve enkele speciale markeringen zoals bvb. , , ).
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 Vormgever 5. Sliders aanpassen
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
HANDLEIDING VORMGEVING E-MAIL TEMPLATES
HANDLEIDING VORMGEVING E-MAIL TEMPLATES copyright 2012 Blinker BV Inhoudsopgave H1 H2 H3 Voorwoord... 2 Een e-mail nieuwsbrief ontwerpen... 3 2.1 Wat we verwachten... 3 2.2 De breedte van je ontwerp...
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
Liesbeth Mantel. Mediacollege webdesign professional
Liesbeth Mantel Mediacollege webdesign professional Juni 2006 Inhoud 1 Inleiding... 3 2 Grid en layout... 4 3 Kleurenpalet... 5 4 Typografie... 6 5 Navigatie... 7 6 Schetsen... 8 7 Stylesheet... 10 1 Inleiding
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
Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.
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
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
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
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
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
Stanley Sterken Mv1D taak 1.2.A4 - typografie boekje. bronnen:
16 1 Stanley Sterken Mv1D taak 1.2.A4 - typografie boekje bronnen: http://nl.wikipedia.org/wiki/carol_twombly http://en.wikipedia.org/wiki/myriad_pro 15 sieraden. Twombly volgde en voltooide haar opleiding
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. Departement VHTI. Studiegebied handelswetenschappen en bedrijfskunde Industriële wetenschappen en technologie opleiding van één cyclus
Katholieke Hogeschool Zuid-West-Vlaanderen Studiegebied handelswetenschappen en bedrijfskunde Industriële wetenschappen en technologie opleiding van één cyclus Departement VHTI VRIJ HOGER INSTITUUT VOOR
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.
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
Handboek huisstijl Sander Thomas
Handboek huisstijl Sander Thomas 1. Inleiding Huisstijl Een huisstijl betekent in de ruime zin van het woord: de stijl van het huis in 3 elementen: design, communicatie en gedrag. Dit document behandelt
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
Webdesign. cursusjaar 2009-2010. Practicumoefeningen met. (X)HTML en CSS
Webdesign cursusjaar 2009-2010 Practicumoefeningen met (X)HTML en CSS Departement Informatica Bacheloropeliding Informatiekunde Hans Voorbij (2010) Inhoud 1. Basisoefeningen met HTML...........................................
Workshop Joomla nivo 1 op 14 november 2015.doc
Handout workshop Joomla beginners november 2015 Overzicht over de workshop 1 Frontpagina bron.amnesty.nl 2 Achterkant Inlogscherm 3 Controlpanel Hathor beheertemplate 4 Controlpanel Isis beheertemplate
HET NIEUWE LOGO & DE BASELINE
BRAND MANUAL 1. Het nieuwe logo & de baseline...22 2. Kleurgebruik...3 3. Typografie...45 4. Minimumafmetingen...5 6 5. Grafische elementen...56 6. Plaatsing...67 7. Don ts...78 8. Papierkeuze...7 8 1
Monks DESIGN CHECKLIST
EMAIL DESIGN CHECKLIST Merk Optimalisatie Merknaam staat in de Van naam Het verstuur adres is herkenbaar Het Aan-veld is gepersonaliseerd met de naam van de ontvanger De onderwerpregel is informatief kort
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
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
Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1
Software 1 Basis HTML bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis HTML 1. Introductie 2.
Web building basis: HTML. Karel Nijs 2008/09
Web building basis: HTML Karel Nijs 2008/09 Web building basis eerste les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Web building
Text font: GoodWebPro-BoldItalic Link font: MoreWebPro-BoldItalic Next article font: pt sans, Arial, Helvetica, sans-serif
Header fonts: pt sans, Arial, Helvetica, sans-serif Text font: GoodWebPro-BoldItalic Link font: MoreWebPro-BoldItalic Next article font: pt sans, Arial, Helvetica, sans-serif Door fonts te gebruiken die
Nieuwsbrief. Een webpagina bouwen. Piet Mondriaan. Highpotech IT
September 2009 Highpotech IT Nieuwsbrief Een webpagina bouwen Indit nummer Maak een webpagina met Gebruik CSS om deze op te maken Volg een proefles en zie hoe het werkt. Een website wordt weergegeven op
Word 2010 minimum eisen
MAX course material Word 2010 minimum eisen t.b.v. Bureau Telecommunicatie proeftoets praktijkopdrachten Proeftoets met praktijkopdrachten behorende bij de serie Word. Samen met het overig materiaal heeft
CSS: clip-path, shapes, variabelen, multiple columns layout. Variabele webfonts en de nieuwe Firefox developertools
1 Presentatie Nieuwe CSS3-features en Firefox CSS-editors Presentatie thema-avond HCC Joomla! Heerenveen 4 december 2018 CSS: clip-path, shapes, variabelen, multiple columns layout. Variabele webfonts
Een ASP.NET applicatie opzetten. Beginsituatie:
Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.
DOM: attributen, styling, classes, events, timeouts en intervallen, willekeurige getallen en forms
Informatietechnologie 2 JavaScript DOM: attributen, styling, classes, events, timeouts en intervallen, willekeurige getallen en forms Kristof Michiels Belangrijkste bouwstenen tot nu toe: Werken met variabelen
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
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.
qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty
qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer Basiscursus HTML5 en CSS tyuiopasdfghjklzxcvbnmqwerty Applicatie Ontwikkelaar leerjaar 1 uiopasdfghjklzxcvbnmqwertyui
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
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
Nieuwe invoercellen voeg je toe door de cursor tussen twee cellen in te zetten, en invoer in te tikken.
Technische Universiteit Eindhoven, 2007 Complexe getallen Mathematica In een invoercel kun je Mathematica commando's invullen. Door op Shift + Enter te drukken laat je Mathematica de berekening uitvoeren.
APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010
APEX Templates OGH APEX dag 30 maart Art Melssen Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring APEX trajecten o.a. bij Centraal Boekhuis en eboekhuis
NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files
NVU work shop Moerman http://www.keesmoerman.nl November 2006 1 1 Overzicht 1. Overzicht van een web site Wat is een web site HTML files 2. NVU: Een HTML editor Overzicht Een eerste pagina Configuratie
HTML&CSS. websites ontwerpen en bouwen JON DUCKETT
HTML&CSS websites ontwerpen en bouwen JON DUCKETT inhoud Inleiding 1 Is het moeilijk om te leren? 4 De structuur van dit boek 5 Hoe mensen online gaan 6 Hoe websites gemaakt worden 7 1. Structuur 11 Hoe
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK
Agenda. Wat is HTML? Meer over HTML... Waarom HTML leren? Aniel Bhulai. Inleiding Computergebruik - HTML 1. Waarin maak je een HTML-bestand?
Agenda HTML algemeen Wat is HTML? Korte historie Opbouw HTML document Aantal tags + voorbeelden Vragen 2 3 Opmaaktaal Letter Kleur Plaatjes Tabellen Formulieren Links Wat is HTML? Waarin maak je een HTML-bestand?
Deel I: CSS(3) Deel II: Usability - Navigatie. Hoorcollege IUW Thema Web 17 November 2015 Christof van Nimwegen
Deel I: CSS(3) Deel II: Usability - Navigatie Hoorcollege IUW Thema Web 17 November 2015 Christof van Nimwegen 1 CSS: Waarom? HTML was bedoeld voor documentstructuur (text met verschillende levels in headings