Internet Standaarden HC4

11 oktober 2007

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 Interactieve Media

2

11 oktober 2007

Herhaling Hogeschool van Amsterdam - Instituut voor Interactieve Media

3

11 oktober 2007

Standaardisering – W3C standaarden

Hogeschool van Amsterdam - Instituut voor Interactieve Hogeschool van Amsterdam – Instituut voor Interactieve Media Media

4 4

11 oktober 2007

XHTML Element Lorem ipsum dolor Begin tag

Inhoud


Eind tag

5

11 oktober 2007

XHTML

tagtype

attribuut waarde


6

11 oktober 2007

Nesten HTML elementen zijn ‘genest’

Lorem ipsum dolor sit amet

7

11 oktober 2007

Nesten in een boom, DOM? xhtml

head

title

body

h1

strong

p

ul

a

em


8

11 oktober 2007

Basisrecept XHTML

xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Dit is de titel ...

... Hogeschool van Amsterdam - Instituut voor Interactieve Media

9

11 oktober 2007

3 typen tags Block level Inline Invisible


10

11 oktober 2007

Semantisch opmaken se·man·tiek (de ~ (v.)) 1. leer van de betekenis van de woorden en woordgroepen => betekenisleer 2. [fil.] leer van de interpretatie van formele systemen

Juiste ‘tag’ bij de juiste tekst Hogeschool van Amsterdam - Instituut voor Interactieve Media

11

11 oktober 2007


12

11 oktober 2007

& Vuistregel Zorg voor een duidelijke scheiding van vormgeving en inhoud


13

11 oktober 2007

CSS basis selector h1 { font-family: color:

arial, sans-serif; red;

eigenschap

waarde

}


14

11 oktober 2007

& Vuistregel Geef bij font-family als laatste één van de vijf algemene lettertypefamilies aan, zodat hier op teruggevallen kan worden. Hogeschool van Amsterdam - Instituut voor Interactieve Media

serif sans-serif cursive fantasy monospace 15

11/10/07

Kleuren Kleurnamen

yellow lime white etc.

RGB code – Rood, Groen, Blauw percentages: getal tussen 0-255 hexadecimaal:

(100%, 0%, 10%) (255, 0, 26) (FF, 0, 1A)

Hogeschool van Amsterdam – Instituut voor Interactieve Media

16

11/10/07


17

11 oktober 2007


18

11 oktober 2007


19

11 oktober 2007


20

11 oktober 2007


21

11/10/07

Breedte en hoogte Relatief em { width: 100% height: 3em; } Vast em { width: 800px; heigth: 50px; }


22

11 oktober 2007

Let op!

Alleen bij block-level elementen kun je een breedte en een hoogte opgeven


23

11 oktober 2007


24

11 oktober 2007

Deze week XHTML en CSS in een notedop Advanced stuff Voorbereiding tentamen


25

11 oktober 2007

XHTML in een notedop , , , <body> <p> <h1> t/m <h6> <ol>, <ul>, <li> <a href=" " rel="nofollow"> <img src= " " alt= " " /> <table>, <tr>, <th>, <td> <caption> <strong>, <em> <div>, <span><br /> <br /> basis elementen in elk document paragraaf koppen lijstjes linkjes plaatjes tabellen onderschrift benadrukken groeperen<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 26<br /> <br /> 11 oktober 2007<br /> <br /> CSS in een notedop - tekst <br /> <br /> color font-family font-size font-style font-weight text-align text-decoration line-height letter-spacing list-style<br /> <br /> <br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> kleur van tekst lettertype grootte normaal, schuin vetdrukken links, rechts, gecentreerd onderstrepen regelafstand letterafstand soort opsommingsteken 27<br /> <br /> 11 oktober 2007<br /> <br /> CSS in een notedop - opmaak <br /> <br /> width, height border padding margin background-color background-image overflow display float<br /> <br /> <br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> breedte en hoogte rand (dikte, stijl en kleur) witruimte binnen de rand witruimte buiten de rand achtergrondkleur achtergrondplaatje scrollbalk block, inline, invisible links of rechts<br /> <br /> 28<br /> <br /> 11 oktober 2007<br /> <br /> Hoeveel <div>'s in deze pagina? <h1><br /> <br /> <div><br /> <br /> <div><br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> <ul><br /> <br /> 29<br /> <br /> 11 oktober 2007<br /> <br /> Waarom een lijst <ul> voor een menu?<br /> <br /> <ul><br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 30<br /> <br /> 11 oktober 2007<br /> <br /> Zelfde pagina met CSS uit<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 31<br /> <br /> 11 oktober 2007<br /> <br /> <h1>,<h2>,<h3>,<h4>,<h5> of <h6>?<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 32<br /> <br /> 11 oktober 2007<br /> <br /> Semantiek Kies een tag niet op basis van de opmaak (de grootte bijv.) die hij automatisch krijgt. wel op basis van de semantische waarde die hij presenteert<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 33<br /> <br /> 11 oktober 2007<br /> <br /> <table>,<br />,<dl>,<pre> of <blockquote>?<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 34<br /> <br /> 11 oktober 2007<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 35<br /> <br /> 11 oktober 2007<br /> <br /> Pseudo-classes Lijken op classes Ingebouwd in de browser Vaak de ‘status’ van een element Helaas werken ze in oude versies van IE alleen bij a href (een link) Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 36<br /> <br /> 11 oktober 2007<br /> <br /> Pseudo-classes :hover :active :link :visited Demo<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 37<br /> <br /> 11 oktober 2007<br /> <br /> Hover: met plaatjes a:link, a:visited { display:block; text-align: right; width: 157px; height: 27px; background: url(button.gif); } a:hover { background: url(button-over.gif); } a:active { background: url(button-active.gif);<br /> <br /> }<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 38<br /> <br /> 11 oktober 2007<br /> <br /> Advanced stuff<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 39<br /> <br /> 11 oktober 2007<br /> <br /> Maar nu met 1 plaatje<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 40<br /> <br /> 11 oktober 2007<br /> <br /> Met één plaatje a:link, a:visited { display: block; text-align: right; width: 157px; height: 27px; background: url(button.gif); } a:hover { background-position: -157 0; } a:active { background-position: -314 0; }<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 41<br /> <br /> 11 oktober 2007<br /> <br /> Bij normaal: background: url(button.gif); Bij hover: background-position: -157 0; Bij active: background-position: -314 0;<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 42<br /> <br /> 11 oktober 2007<br /> <br /> Ronde hoeken - www.cssplay.co.uk<br /> <br /> CSS: #quadtl, #quadtr, #quadbl, #quadbr { position:absolute; font-size:150px; font-family:arial; color:#08c; line-height:40px; } Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> HTML: <div class="curvy"> <div id="ctl"><div id="quadtl"> •</div></div> <div id="cbl"><div id="quadbl"> •</div></div> <div id="ctr"><div id="quadtr"> •</div></div> <div id="cbr"><div id="quadbr"> •</div></div> <div id="txt"><p>I know it's been ....</p> </div> </div><br /> <br /> 43<br /> <br /> 11 oktober 2007<br /> <br /> Onderwerpen en tips tentamen<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 44<br /> <br /> 11 oktober 2007<br /> <br /> Belangrijk voor het tentamen <br /> <br /> Geschiedenis van Internet/Web Nesten van html-elementen & DOM Semantiek Block level vs inline elementen Selectors / pseudo classes Opbouw van een CSS regel RGB-kleuren Scheiding van vormgeving en inhoud Je eigen website!<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 45<br /> <br /> 11 oktober 2007<br /> <br /> Inzichtvragen – over je site Bijvoorbeeld: Absolute/relatieve maten, welke heb je gebruikt en waarom? Beschrijf hoe je je menu hebt gemaakt Bijv. een list, ‘losse’ links, div’s Waarom heb je het op die manier toegepast<br /> <br /> Beschrijf hoe je site navigeerbaar is en waarom je voor deze oplossing hebt gekozen<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 46<br /> <br /> 11 oktober 2007<br /> <br /> Tentamen Open boek Spriekbrief, één A4, handgeschreven Stof: colleges + boek hfst 1 t/m 10 + 14<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 47<br /> <br /> 11 oktober 2007<br /> <br /> Tentamen Woensdag 24 oktober 19:00 uur IWO zaal Rood (bij AMC) Routebeschrijving http://www.uva.nl/locaties/object.cfm?objectid=E91BC714-4D16-47BF-A1C2E1774A659F4D<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 48<br /> <br /> 11 oktober 2007<br /> <br /> Volgend Blok Programmeren met Actionscript<br /> <br /> Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 49<br /> <br /> 11 oktober 2007<br /> <br /> Tools'r'us Tijdens toetsweek (week van 5 nov) 3 dagen 1 dag Photoshop 1 dag Illustrator 1 dag Flash<br /> <br /> Inschrijven via groepengids op intranet vanaf ma 22 oktober Vooraf CS3 installeren (Photoshop, Illustrator, Flash) Als al Tools'r'us gedaan mogelijkheid flash opdrachten zelf thuis te doen Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 50<br /> <br /> 11 oktober 2007<br /> <br /> VRAGEN? Hogeschool van Amsterdam - Instituut voor Interactieve Media<br /> <br /> 51<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/internet-standaarden-hc4" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Internet Standaarden HC4"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <span><a href="https://adoc.pub/about">About Us</a></span> | <span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> | <span><a href="https://adoc.pub/term">Terms of Service</a></span> | <span><a href="https://adoc.pub/copyright">Copyright</a></span> | <span><a href="https://adoc.pub/contact">Contact Us</a></span> | <span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html>

Internet Standaarden HC4

Recommend Documents