WEBDESIGN. html tags. Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online

Informatica

naslag

WEBDESIGN html tags HTML is de taal waarop internetsites gebaseerd zijn. Bij het onderdeel webdesign maken we gebruik van een van de bovenstaande webeditors die ons helpen bij het (automatisch) creëren van html-code. Maar voor een goed inzicht en ook voor het kunnen maken van handmatige aanpassingen is enig inzicht van html van groot belang. Om een webpagina te maken heb je niet meer nodig dan het programma kladblok (notepad of notepad++) en wat kennis van html.

html-code met kladblok Open maar eens kladblok en type de volgende html-code: Hallo wereld! Hello, World! Sla daarna het tekstdocument op onder de naam wereld.html in de werkmap (en dus niet onder de naam wereld.html.txt - let op het verschil, zorg ervoor dat de bekende bestandsextensie niet verborgen worden op je computer). Sluit daarna kladblok af. Maak in de werkmap een map images aan en plaats in die map een animated gifje van een draaiende aardbol onder de naam aardbol.gif (zo’n plaatje kun je wel op Internet vinden). Open het document met internet explorer. Je ziet je 'eerste' handgemaakte html-pagina ;-)

een cursus html Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online Neem je tijd voor de cursus en ontdek 'de geheimen' van html

webdesign met html

pagina 1

Informatica

naslag

Een html document moet minimaal uit de volgende codes bestaan, om een pagina als HTML document weer te kunnen geven :

hier de titel

Hier een overzicht van de meest gebruikte tags bij het maken van een HTML pagina: Structuur HTML-pagina Titel pagina Inhoud pagina Structuur HTML-pagina met Frames Titel pagina

Indeling HTML-pagina

HTML code

Nieuwe alinea

Regeleinde

Horizontale lijn

Opmaak

HTML code

Vet

vet

Cursief

cursief

Typewriter

typewriter

Verdana

verdana

Opmaak & layout

HTML code

Koppen

Grote kop

Kleine kop

Lettergrootte

Tekst met lettergrootte x

Basislettergrootte

Relatieve lettergrootte

Tekst met standaard lettergrootte plus x

Tekst in vast formaat (Wat je typt dat wordt getoond door

<pre> Jouw tekst

browser)

Tekstkleur

...

Achtergrondkleur

...

Afbeeldingen

HTML code

Afbeelding opnemen

Hoogte en breedte opgeven

Alternatieve tekst

Achtergrond

weblessen.nl

Naar bestand

Naar bestand

Ankers

HTML code

Positie vastleggen

Naar positie in andere pagina

Naar positie

Naar positie op zelfde pagina

Naar positie

De meest gebruikte html tags

Toelichting

Deze tag is saai maar je moet er veel gebruik van maken. Deze tag komt aan het begin van elke HTML-pagina. Uiteraard sluit je deze tag zo:

Hierna volgen alle acties. De gegevens die op het scherm worden weergegeven staan tussen de en de tags. Tussen deze twee tags stel je ook de achtergrondkleur en de tekstkleur in voor de hele pagina en gebeurtenisprocedures die tijdens het laden van de pagina worden uitgevoerd. Met behulp van de volgende tag wordt bijvoorbeeld een zwarte pagina met zilveren tekst gemaakt.

, <span> en

Gebruik de tags
en <span> voor CSS-positionering om de tekst te plaatsen en te verschuiven, het filteren van tekst of het weergeven en verbergen van bepaalde gebieden op een pagina. Als je een breedte instelt, maak je een kolom. Div-tags lijken erg veel op span-tags. Het enige verschil is dat een div op een eigen regel begint en een span nauw verwant kan zijn met een andere tekststroom. Als je van Netscape Navigator gebruikmaakt moet je de tag gebruiken. Net als de tags
en <span> stelt deze tag gebieden in voor de weergave, maar in tegenstelling tot deze tags is het in Netscape Navigator mogelijk de inhoud op dynamische wijze aan te passen.

Deze populaire tag biedt een uitstekende manier om kolommen te maken die relatief ten opzichte van elkaar zijn gepositioneerd. Tabellen zijn nuttig voor het uitlijnen van gegevens, het maken van kolommen met verschillende uitlijnen en voor het weergeven van gegevens uit databases. De bijbehorende tags zijn: , , en

Als je meer dan één URL tegelijk wilt weergeven of als je een pagina in een gedeelte met een inhoudsopgave en een gedeelte met inhoud wilt opdelen moet je gebruik maken van frames. Onthoud dat je een frame niet in de tag kunt plaatsen. Door een frame een naam te geven, kun je er naderhand eenvoudig naar verwijzen. Verwante tags zijn: en <iframe>

Deze tag bestaat al heel lang. Je kunt ervan gebruik maken als je een element op een pagina wilt centreren.

Br is de afkorting van Break, de tekst die erop volgt wordt op een nieuwe regel voortgezet. Met behulp van deze tag kun je lege regels tussen elementen plaatsen. Hij komt van pas bij het maken van alinea's, bij het scheiden van tekst en afbeeldingen of om gewoonweg wat ruimte te bieden wanneer die nodig is.

Deze tag doet niet veel, hij fungeert als rustplaats voor achtergrondgeluiden, stijlbladen, scripts en titels. Als je een van deze elementen nodig hebt moet je een tag voor de tag plaatsen. Wat veel mensen wel denken maar niet waar is is dat de tag verplicht is! Dit is echter niet zo.

<script>

Deze tag is de sleutel tot alle interactiviteit op je pagina. Plaats je scripts tussen <script> tags. Zorg er dat je de parameter language instelt op "vbscript" als je geen gebruik maakt van "javascript". Maak gebruik van de syntaxis met for/event om scripts in te stellen die gebeurtenissen afhandelen bij activex-bedieningselementen.

Formulieren

Toelichting

Een formulier maken in HTML. In HTML is het alleen mogelijk het formulier te maken, wil je de gegevens doorsturen naar bijvoorbeeld je emailadres dan zul je andere programmeertalen moeten gebruiken bijvoorbeeld PHP, ASP of CGI.

We maken eerst een naaminvulformulier
Naam:

Zo ziet dit eruit:

Door van input type "text" te maken geef je aan dat hier gewoon tekst geschreven kan worden. Er zijn veel meer mogelijkheden voor input.

Mogelijkheden voor input: "text", "radio", "checkbox", "submit", "password"

webdesign met html

Naam:

pagina 3

Informatica

Radio
Man
Vrouw

naslag

Zo ziet dit eruit:

Man

Door achter "radio" checked te zetten geeft de browser deze ronde knop alvast weer als aangeklikt.

Checkbox
Ik heb een Fiets
Ik heb een Auto

Vrouw Zo ziet dit eruit:

Ik heb een Fiets

Door achter "checkbox" checked te zetten geeft de browser de checkbox alvast weer als aangeklikt.

Ik heb een Auto

Submit

Zo ziet dit eruit:

mailen.php dit is een php-bestand dat de gegevens doorstuurt naar bijvoorbeeld een e-mailadres.
Jouw naam:

Jouw naam:

Submit

De value van "Submit" mag veranderd worden. Dit is namelijk de tekst die op de knop verschijnt, je kunt er ook "Verstuur" neerzetten.

Password:

Zo ziet dit eruit:

Naam:
Paswoord:

Naam: Paswoord:

Vul nu maar eens iets in. Je snapt meteen waarom het password heet!

Dropdown menu
<select name="Automerken">

Zo ziet dit eruit: Fiat

De value wordt doorgestuurd en de naam achter de value> staat in het menu. Je kunt dus andere gegevens door laten sturen dan er werkelijk te zien zijn. Achter Fiat staat selected, daarom wordt Fiat als standaard bovenaan gezet!

Fieldset

Zo ziet dit eruit:

Fieldset is een border om de tekstvlakken. Zie voorbeeld:
Maten:
Hoogte Breedte

Tabellen < td>4

1 2

3

webdesign met html

Maten:

Hoogte:

Breedte:

Toelichting

Tabellen zijn zeer makkelijk voor de lay-out van je website. 1

2

3

4

pagina 4

Informatica

naslag

Met een normale border:

1 2

3 4

Met een dike border:

1 2

3 4

Met een zeer dikke border:

1 2

3 4

Opmaak of Lay-out

Enkel tips Zorg voor juiste kleuren. Neem kleuren die je zelf mooi vind en die bij elkaar passen. Het ligt ook aan het onderwerp van de website. Is het een funwebsite dan mogen de kleuren natuurlijk ook wel wat flitsender dan bij een serieuze website. Maar houd het wel duidelijk. Is je website serieus bedoeld houd de lay-out dan rustig en duidelijk! Enkele tips voor een goede lay-out:

- Zorg dat alles goed leesbaar is. - Maak de pagina rustig. Niet te flitsend en rustig voor de ogen. - Zorg dat de links over de hele website hetzelfde zijn. Doe dit bijvoorbeeld met CSS. - Kleur de scrol balk. De meeste mensen vinden een grijze maar saai. - Zorg voor een herkenbare lay-out, geen standaard lay-out die iedereen al heeft. - Zorg voor je eigen stijl, ga niets stelen of een gratis Template(=layout door een ander gemaakt) gebruiken. - Zorg voor een makkelijk en overzichtelijk menu. - Zorg ervoor dat jouw pagina in meerdere browsers te bekijken is. - Ga geen muiseffecten op jouw pagina uitvoeren, zeer storend. - Gebruik geen pop-ups. Jaagt meer bezoekers weg dan er ooit terug komen. - Muziek op de website wordt ook niet echt gewaardeerd door de meeste mensen - Zorg ervoor dat de laadtijd van jouw pagina snel is. Mensen wachten maar een paar seconden. - Vermeld geen teller als je weinig bezoekers hebt. Jaagt ook mensen weg. - Ga geen dingen van andere websites stelen. - Zorg voor weinig tot geen schrijffouten. - Installeer geen beveiligingsfuncties zoals een anti-rechter muisknop. De bron kan altijd gezien worden.

webdesign met html

pagina 5

Copyright © 2024 ADOC.PUB. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

WEBDESIGN. html tags. Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online

Recommend Documents

Grote kop

Kleine kop

Met een normale border:

Met een dike border:

Met een zeer dikke border: