CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.

Slides:



Advertisements
Verwante presentaties
Bouw zelf een digitaal visitekaartje
Advertisements

Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Grafisch werken in ICT: Photoshop
Handboek verzenden van Nieuwsbrief Caribbean.nl 12 september 2012 •Ga naar CMS •Kies Nieuwsbrief Caribbean.nl.
29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.
Online Marketing voor het MBO “SEO, dat kun je zelf!”
Technisch ontwerp.
Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina.
12 juni 2010 Door Bart Bongers en Alex Bossers
HTMLHTML UITLEG & CURSUS. Inleiding HTML: Hyper Text Mark-up Language.
Eerste pagina (eigenschappen) van de beheerkant toont een overzicht van alle eigen- schappen van schoenen: merk, maat, stijl, kleur, type en maximum prijs.
HTML Les 1: Introductie HTML
Webmaster syntra.
Crashcursus HTML en CSS 2013
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
Webpagina ’ s maken ITV 10 maart Onderwerpen Ontwerp en inhoud Navigatie HTML: de basis Webpagina’s in Word.
Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - -
Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - -
Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - -
WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
Webpublicatie 1 HTML 4. Cascading Style Sheets ILSO - Webpublicatie2 4.1 Cascading Style Sheets HTML-code MET blitse titels CASCADING STYLE.
Mijn eerste Website bouwen
Stichting Seniorweb Zoetermeer Cursus WEB!Pro
Rabobank Zoetermeer Sponsor v/h SeniorWeb Stichting Seniorweb Zoetermeer Cursus WEB!Pro.
3 factoren die de Google Ranking bepalen 1. Pagerank 3 factoren die de Ranking bepalen: “ Goede content “ 2. Duur op website + social media knoppen 3.
Hogeschool HZ Zeeland 19 augustus 2003augustus 2003 Data Structuren & Algoritmen Week 3.
het bouwen van een website
Client side representation
WEBBUILDING 07/03/2005 Saartje De Geyter.
Om willekeurig welke site en welk werk dan ook overzichtelijk te houden, moeten er eerst (sub)directories gemaakt worden: Bijeenkomst 2 online journalistiek.
Les 11: SVG.
Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 3: Cascading Style Sheets.
Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 5: Tabellen.
Les 3 Vandaag 1.Bekijken thuisopdrachten 2.Vragen over voorgaande stof 3.Links 4.FTP 5.Huiswerk.
Onderwerpen workshop 2 Categorieën Blog pagina’s Meer met artikelen Hyperlinks Modules Gebruikersbeheer Joomla Workshop 2.
Starten met PHP Dynamischer bouwen. PHP is een een scripttaal waarmee de server pagina’s in elkaar kunt laten zetten. Het verschil met HTML: Een php pagina.
Webmaster syntra.
Online informatie zoeken via de bibliotheekwebsite Demo Nyenrode bibliotheek.
Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.
Deze les * recap css selectors * pseudoclasses * styling links: live tutorial * references, recources, categorisation * live tutorial o add css to template.html.
HTML De basis-elementen.
OFC28 mediawijsheid les 5 samenwerken
JQuery CarouFredsel Gemaakt door Yannick. Inhoudstafel O CarouFredsel O Wat is CarouFredsel ? O Downloaden O Script O HTML O CSS O Javascript O Voorbeelden.
De basis-elementen Deel 2
Css basics. terminologie Block level element Inline element Css – eigenschap : display : Voorbeeld : display eigenschap en genummerde lijst.
1 Les 08: Formulieren. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 8  Bespreken huiswerk  Presentatie over lesstof  formulieren 
1 Les 07: Tabellen. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 6  Bespreken huiswerk  Presentatie over lesstof  tabellen  positionering.
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je.
CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.
HTML & CSS Samen gebruiken. Verschil HTML – Structuur CSS – Styling Twee verschillende dingen – Loskoppelen!
1Informatica in de Tweede Fase Frans Peeters 7 maart 2007 Deze presentatie is downloadable van
HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen.
GUI Graphical User Inferface. Window Definieer object(en) create voeg toe aan Gui update Gui draw Gui.
Workshop website bouwen Les 1. Wie zijn dat nou? Kirstin en Vincent Ouders van Nick.
Hoofdstuk 2 Communicatie
Gameprogrammeren: Objecten en geheugen
Sjabloonsite Koen Van Cauwenberge.
Omdat we op onze eigen account programmeren
Direct Realisatie Les 3 HTML en CSS in s Direct Realisatie Les 3.
Inhoud: Terugkomdag Wie heeft wat gemaakt? Tips?
Hoe maak je een pagina voor een website?
Het aanpassen van Microsoft SharePoint Onlinewebsite
CSS: cascading stylesheets
Welkom :-).
ASP.NET MVC Web Development
Powershell & HTML.
CSS: cascading stylesheets
HTML5 introductie.
Transcript van de presentatie:

CSS & HTML Les 2 Navigatie

De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de link naar de andere pagina te maken! Het element voor het bepalen naar welke pagina je linkt! Het element wordt gebruikt te bepalen waar de link geopend wordt! Het element wordt gebruikt om de link een title mee te geven ! Contact De inhoud van de tag is het label van de link !

Navigatie maken met list-items ! HTML Home Portfolio Diensten Over Marcel Contact Navigatie Css ul { list-style-type:none;} li { float: left; padding-left: 5px; }

Stijlen van een lijst ! Navigatie Css ul { list-style-type:disc;}

Stijlen van een list-item ! Css li { float: left; padding-left: 5px; } Css li { float: left; padding-left: 5px; padding-bottom: 10px; padding-right: 10px; padding-top: 5px;

Stijlen van een list-item ! Css a:link, a:visited, a:link { text-decoration: none; color: #00F;} a:hover {text-transform:uppercase;} ul {list-style-type:none;} li { float: left; padding-left: 5px; padding-bottom: 10px; padding-right: 10px; padding-top: 5px;} Css a:link, a:visited, a:link { text-decoration: none; color: #00F;} a:hover { border:dashed; color:#F33; }

De juiste code! ul#nav { list-style:none;} #nav {position: absolute; left: 300px; width: 1700px; height: 200px;} #nav li { float: left; padding: 10px 10px 10px 10px;} #nav li a { text-decoration: none;} #nav li a:link { text-decoration: none; color: #00F;} #nav li a:visited { text-decoration: none; color: #00F;;} #nav li a:active { text-decoration: none; color: #00F;;} #nav li a:hover { background-color:#00F; color:#FFF;} Alleen voor de tag voor het element met het ID nav. Hoe ziet het er uit ??????

Opdracht 2 ! Voor opdracht 2 ga je de webpagina van opdracht 1 uitbreiden met de navigatie. De navigatie moet bestaan uit de volgende labels. Home | Portfolio | Diensten | Over | Contact Hoe je de navigatie gaat vormgeven is geheel aan jezelf. De opdracht moet voor het het begin van de volgende les opgeleverd worden. Upload de pagina’s naar je eigen webomgeving en stuur de link naar

CSS & HTML