3 déc. 2013

TEC-CRE |30|11|13

Secrétariat de cours

TECHNOLOGIE DE CRÉA.


RE-CAP


30|11|13


HTML / Merci Justine !
LIENS & INTÉGRATION
Objetcifs :
Créer des liens, pages hypertexte ancres
Intégrer des objets (vidéos, sons)
comprendre architecture d’un site

Introduction

Les liens sont des zones sensibles signalées par une zone soulignés sous le texte ou par un bouton qui permet d’accéder à une autre partie du fichier html (lien interne) ou une pages extérieur (lien externe) qui ne fais plus partie du site. 

La balise de lien (interne et externe) html = la balise se traduit par <a>

<a href=« http://blablabla.com »>...</a>

Ce lien s’ouvre dans la même page et cause un problème de navigation…

Solution : ajouter la balise target 
<a href=« http://blablabla.com »; target=« _blank »; title=« prénom">...</a>

Utilisez l’attribut « title » pour que le nom du lien apparaisse au survol.

Création d’un lien hypertexte/image :

<a href=« l’url cible »><img src=« l’url de l’image »></a>

Création d’une ancre :
Les ancres sont des positions dans une page html, qui pourront être utilisées comme références.
Lien invisible qui fait défiler le texte dans une page. 

<a name=« haut »>blabla</a>

Les liens vers des ancres commencent par le symbole dièse #
Par exemple, pour créer un lien vers mon ancre « haut », je vais encadrer le lien vers la balise suivante:

<a href=« #haut »>let’s go to the sea</a>

Lien hypertexte avec CSS intégré (appliquer un style à mon lien)

<a href=« url » 
style=« color:blue;text-decoration:none; »>Lien coloré non souligné</a>


Architecture du site 

Toujours renommer ses fichiers en caractère minuscule sans accent, sans espace.

Créer pages index (html) les renommer et les insérer dans l'index

Tracer le chemin : chemin interne ou externe

chemin relatif : relatif à l’index, assemblé
chemin absolu : ouvert sur un document hébergé

Trouver un fichier dans un dossier utiliser le slash / 

Nom-du-dossier/fichier.html

Autre manière de créer des liens entre les pages :
utiliser le WYSIWYG (what you see is what you get). De photoshop au code html dans dreamwaver.

Audio :

Mp3 diffère d’une compression à une autre, il n’est pas compatible avec tout les navigateur mais c’est le plus utilisé. 

Balise HTML
<audio src=« musique.mp3 »controls></audio>

Pour être sur que tout les navigateurs lise le fichiers audio:

<audio controls>
<source src=« hype_home.mp3 »></source>

ou installer un lecteur flash type dewplayer.
Pour générer un son en cliquant sur une image, il faut utiliser du javascript. 
Attention, à chaque changement de page la musique s’arrête et reprend, à utiliser avec modération. 

Vidéo :
Insérer une vidéo windows média player

<embed src=« votre nom de fichier »
width=352 height=290 loop=« false »
controller=« true »autoplay=« true »alt=«  »/>
<noembed>commentaire</noembed> 


Aucun commentaire:

Enregistrer un commentaire