Introducción a HTML y editores de texto
Traducido por
ScribdTranslationsIntroducción a HTML y editores de texto
Traducido por
ScribdTranslationsSNT–2º
PROYECTO DE SITIO WEB
El editor de texto
Un editor de texto es unsoftwaredestinado a la creación y edición dearchivos de [Link] un programa dedicado a
la escritura de código. Existen muchos programas destinados a la creación de sitios web. En la práctica, Bloc de notas,
El editor de texto integrado por defecto en Windows es suficiente.
Pero utilizaremos Note Pad ++, un editor de texto gratuito.
El navegador
El navegador es el programa que nos permite ver los sitios web. Su trabajo es leer el código HTML y CSS.
para mostrar un resultado visual en la pantalla. Si tu código CSS dice "Los títulos son rojos", entonces el navegador
affichera les titres en rouge. Le rôle du navigateur est donc essentiel.
El navegador es un programa extremadamente complejo. El principal problema es que los diferentes navegadores
no muestran el mismo sitio exactamente de la misma manera. Esto se debe a que no siempre conocen los
últimas funcionalidades de HTML y CSS.
Se recomienda utilizar aquí Google Chrome.
1
Curso de HTML
SNT–2º
HTML– Création d’une pageWEB
TP1–Editor
1/ Abrir el editor de texto Notepad++ y escribir 3 líneas respetando los saltos de línea.
Hola
¡Bienvenido a mi sitio!
Comencemos por descubrir el lenguaje HTML.
2/ Guarda el archivo con el nombre [Link] en tu carpeta.
3/ Abre este archivo con Google Chrome.
¿Qué observas?
Para crear una página web no basta con escribir texto, también hay que escribir lo que se llaman etiquetas, que van a
dar instrucciones a la computadora como "ir a la línea", "mostrar una imagen", etc...
Luna balizaes un carácter, o una serie de caracteres, utilizado para la estructuración de un documento y que será invisible
por el lector final.
Las etiquetas y sus atributos
1–Las etiquetas
Las páginas HTML están llenas de etiquetas. Se pueden identificar fácilmente. Están rodeadas de corchetes, es decir,
des symboles<et>, comme ceci :<balise>.
Indican la naturaleza del texto que enmarcan. Quieren decir, por ejemplo: « Este es el título de la página ».
Esta es una imagen », « Este es un párrafo de texto », etc.
Se distinguen dos tipos de etiquetas: las etiquetas en pares y las etiquetas huérfanas:
• Las etiquetas en pares:
Se abren, contienen texto y se cierran más adelante.
<title>Ceci est un titre</title>
Se distingue una etiqueta de apertura :<title>, y una etiqueta de cierre :</title> que indica que el título se
término.
Esto significa para la computadora que todo lo que está entre estas dos etiquetas es un título.
2
curso de HTML
SNT–2º
• Las etiquetas huérfanas :
Elles servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas
nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ».
Una etiqueta huérfana se escribe así: <img />
El / de fin no es obligatorio. Podríamos escribir solo <img>.
No obstante, para no confundirlas con las etiquetas de apertura y para mayor legibilidad, los webmasters
se recomienda agregar este / (barra) al final de las etiquetas huérfanas.
2–Los atributos
Los atributos son las opciones de las etiquetas. Vienen a completarlas para dar información adicional.
El atributo se coloca después del nombre de la etiqueta de apertura y suele tener un valor, así:
<balise attribut="valeur">
Tomemos la etiqueta <img />. Sola, no sirve de mucho. Se añade el atributo 'Fuente' que indica el
nom de l'image à afficher :
<img src="[Link]" />
El ordenador entiende entonces que debe mostrar la imagen contenida en el archivo [Link].
En el caso de una etiqueta que funcione "por pareja", se colocan los atributos en la etiqueta de apertura.
Estructura básica de una página HTML
Toda página en html comienza con el siguiente código:
<!DOCTYPE html>
<html>
<cabeza>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<cuerpo>
</body>
</html>
¿Qué se observa?
• Las etiquetas se abren y se cierran en un orden preciso (como los paréntesis en una expresión)
matemáticas
• Hay espacios al inicio de la línea. Esa es la indentación. No es obligatorio, pero hace que el código
mucho más legible y forma parte de los buenos hábitos que se deben adquirir al comenzar a programar. Uno
puede usar la tecla Tab para obtener este resultado.
3
curso de HTML
SNT–2º
1–DOCTYPE
<!DOCTYPE html>
La primera línea se llama doctype. Es una etiqueta especial, comienza con un signo de exclamación.
Es indispensable porque es ella quien indica que se trata de una página web escrita en HTML5.
2–etiqueta HTML
<html> C'est la balise principale du code. Elle englobe tout le contenu de votre page.
</html> La etiqueta de cierre </html> se encuentra al final del código.
3–etiquetas HEAD y BODY
Una página web se compone de dos partes:
• El encabezado<head>: esta sección proporciona información general sobre la página como su título y
la codificación (para la gestión de caracteres especiales). Esta sección es generalmente bastante corta. Los
las informaciones que contiene el encabezado no se muestran en la página, son simplemente informaciones
generales dirigidas al ordenador. Sin embargo, son muy importantes.
• El cuerpo: es la parte principal de la página. Es dentro del cuerpo donde se encuentra la mayor parte de la
el código está escrito y es lo que se muestra en la pantalla.
4– La codificación CHARSET
<meta charset="utf-8" />
Esta etiqueta indica la codificación utilizada en su archivo html, es decir, la forma en que se guarda el archivo.
Existen diferentes normas de codificación informática, el estándar ASCII es uno de los más conocidos, pero no permite
pas el codificación de los caracteres acentuados. Hoy en día, cerca del 90% de los sitios WEB utilizan la norma UTF-8.
UTF-8, para "Formato de Transformación UCS de 8 bits", es un formato de codificación de caracteres. La principal ventaja de esto
el formato permite codificar miles de caracteres y, por lo tanto, ser utilizado en muchos idiomas
(acentos, ideogramas...).
No basta con decir que su archivo está en UTF-8, también debe estar bien guardado en UTF-8.
Es el caso ahora por defecto en la mayoría de los editores de texto.
Pero si los acentos se muestran mal, es que hay un problema con la codificación. Verifique que la etiqueta meta indica
bienUTF-8y que su archivo está guardado en UTF-8.
(en NotePad++, ve al menú Codificación y verifica que tu archivo esté guardado como > Codificar en
UTF-8 sin BOM).
5–La etiqueta TITLE
<title> Titre </title>
Este es el título de su página. Toda página debe tener un título que describa lo que contiene.
El título no se muestra en tu página, sino en la parte superior de esta (a menudo en la pestaña del navegador).
4
curso de HTML
SNT–2º
6–Los comentarios
Cualquiera que sea el lenguaje de programación utilizado, es muy importante poner comentarios en tu código. Un
commentaire permet de donner des explications sur le fonctionnement de la page. Les commentaires ne sont pas
visibles en la pantalla; se pueden ver, una vez que la página está en línea en la Web, haciendo clic derecho en la página y en
seleccionando « Mostrar el código fuente de la página ».
Un comentario es una etiqueta HTML con una forma muy especial:<!-- -->
<!-- Este es un comentario -->
TP2–Estructura básica
1/ Dans NotePad++, recopier le code de la structure de base d’une page HTML:
------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
------------
2/ Y copié el texto que ingresaste para el TP1
3/ Completar con un Título entre las etiquetas <title> </title>
4/ Guarda tu página WEB con el nombre de [Link]
5/ Abrir en su navegador.
¿Qué constatais?
5
Curso de HTML
SNT–2º
HTML–Organización del texto
1 - Le paragraphe
La etiqueta <p> delimita los párrafos, es decir, un salto de línea con cambio de línea.
• significa « Inicio del párrafo »
• </p> significa « Fin del párrafo »
2 - Ir a la línea
La etiqueta <br /> permite solo ir a la línea.
C'est une balise orpheline qui doit se trouver obligatoirement à l'intérieur d'un paragraphe.
Nota: Teóricamente se pueden poner varias etiquetas<br />de forma continua para hacer varios saltos de línea,
pero es una mala práctica que hace que el código sea delicado de mantener. Para desplazar un texto con más precisión,
utilizaremos CSS, este lenguaje que complementa el HTML.
3 - Los títulos
En HTML, se tienen derecho a utilizar seis niveles de títulos diferentes y, por lo tanto, se tienen seis etiquetas de título diferentes:
• <h1> </h1>: significa "título muy importante".
• <h2> </h2>: significa «título importante».
• …y así sucesivamente hasta<h6> </h6>
Il ne faut pas choisir la balise de titre en fonction de la taille qu’elle applique, les balises s’utilisent dans l’ordre: il ne
no puede haber etiquetas <h3> si no hay etiquetas <h1> y <h2>.
4 - Poner en valor
El uso de estas etiquetas es muy simple: se enmarcan las palabras a resaltar con estas etiquetas.
Balise<em> </em>: para resaltar un poco el texto.
Balise<strong> </strong>: para resaltar bien el texto.
5 - Marcar el texto
La etiqueta <mark> </mark> permite resaltar visualmente una porción de texto. Por defecto, la etiqueta
permite resaltar el texto.
Nota: el papel de las etiquetas no es poner en cursiva, negrita o subrayado, sino indicar el sentido del texto:
importante, muy importante… Hay que entender bien que es el navegador quien elige la visualización final. Para un
navegador, la etiqueta <em> significa poner en cursiva, pero otro navegador podría entenderlo como
6
Curso de HTML
SNT–2º
subrayar. A continuación, el CSS permite modificar la visualización del texto. Sin embargo, estas etiquetas son importantes en HTML
porque los motores de búsqueda leen el código HTML y las palabras clave destacadas están mejor referenciadas.
TP3–Organización del texto
Usarás tu archivo [Link].
En cada paso, guardar y abrir con el navegador (o refrescar el navegador).
1/ Crear párrafos y añadir los saltos de línea
2/ Añadir títulos (al menos 3 niveles de títulos)
3/ Poner en valor algunas palabras del texto utilizando las 2 etiquetas existentes.
4/ Marcar una parte del texto.
¿Qué etiquetas has utilizado?
6 - Las listas
• Lista no ordenada
Balise<ul> </ul>: lista no ordenada (o lista con viñetas)
Entre estas dos etiquetas, se escribe cada uno de los elementos de la lista entre dos etiquetas <li></li>.
Con el siguiente código:
Se obtiene:
<ul>
<li>Brest</li> • Brest
<li>Lorient</li> • Lorient
<li>Clermont-Ferrand</li> • Clermont-Ferrand
</ul>
• Lista ordenada
Balise<ol> </ol>: lista ordenada (o lista numerada)
El orden en el que se colocan los elementos de la lista es importante. El primero <li></li> será el elemento n° 1, el
segundo será el n°2 etc…
Con el siguiente código:
Se obtiene:
<ol>
<li>Lorient</li> Lorient
<li>Brest</li> 2. Brest
<li>Clermont-Ferrand</li>
3. Clermont-Ferrand
</ol>
7
Curso de HTML
SNT–2º
TP4–Listas
1/ Agregar un título de nivel 1 en tu [Link]: Mis deportes favoritos
Los deportes que prefiero son:
3/ Ajouter une liste ordonnée de 4 éléments au minimum.
4/ Poner el 1erelemento de su lista en valor más alto.
8
Curso de HTML
SNT–2º
HTML–Crear enlaces
Un enlace es un texto sobre el que se puede hacer clic para ir a otra página.
Es fácil reconocer los enlaces en una página: están escritos de manera diferente (por defecto, en azul y
souligné) y un cursor en forma de mano aparece cuando se apunta sobre él.
1–Enlace a otro sitio
Para hacer un enlace, la etiqueta que se debe utilizar es <a> con el atributo href, para indicar hacia qué página conduce el enlace.
<a href = "[Link]
Este es el código del enlace que lleva a Google, situado en la dirección[Link]
Un enlace a otro sitio se llama un enlace absoluto porque se indica la dirección completa.
2–Enlace a otra página de su sitio
• Dos páginas en la misma carpeta
Se creó [Link] y [Link] en un mismo directorio.
Para hacer un enlace de la página 1 a la página 2, se indica el atributo href con el nombre del archivo que se desea
alcanzar (archivo objetivo).
[Link] Es ella quien contiene la referencia del enlace.
<p> Hola. ¿Desea consultar <a href="[Link]"> la página 2 ? </a>
</p>
Pá[Link] La página de llegada no contiene nada especial.
<h1> Bienvenido a la página 2 </h1>
Se dice que es un vínculo relativo.
TP5–Liens
1/ Lazo absoluto: Integra en tu página el enlace de un sitio, el sitio del FC Lorient por ejemplo
[Link]
2/ Enlace relativo: Crear una página [Link] en la misma carpeta TP. La página TP3 mostrará un mensaje para
indicar que estamos en la página TP3
3/ Integra en la página [Link] un enlace hacia la página [Link]
4/ Probador
5/ Crear un enlace en la página [Link] para volver a la página [Link]
9
Curso de HTML
SNT–2º
• Dos páginas en carpetas diferentes
Se creó una carpeta "dossier1" que contiene una página html ([Link]) y una carpeta "dossier2" en
lequel se trouve [Link].
En este caso, la ruta de acceso al archivo debe ser indicada de la siguiente manera:
<a href="dossier2/[Link]">
Si hubiera varios subcarpetas, escribiríamos esto:
<a href="dossier2/autredossier/[Link]"> </a>
Si el archivo objetivo está colocado en una carpeta 'padre', que se encuentra 'más arriba' en la jerarquía:
<a href="../[Link]">
3–Enlace a un ancla
Cuando una página HTML es muy larga, es interesante poder acceder directamente a lugares de la página.
sin tener que desplazar todo. Entonces creamos puntos de referencia en la página que llamamos anclas.
Para crear un ancla, se añade el atributo id a una etiqueta que servirá como referencia (cualquier etiqueta).
El atributo permite dar un nombre único al ancla. Luego se podrá usar este nombre, precedido por un almohadilla.
#para hacer el enlace hacia este ancla, siempre con el atributo href.
<h1>Mis deportes favoritos</h1>
<p>
Vaya directamente a la parte que trata sobre:
<a href="#foot">El fútbol</a><br />
<a href="#rugby">El rugby</a><br />
<a href="#tennis_de_table">El tenis de mesa</a><br />
</p>
<h2 id="foot"> El fútbol</h2>
... Ligue1 <br />liga 2<br />nacional<br /> Blablabla…
</p>
<h2 id="rugby"> El rugby </h2>
... Top14 <br />Torneo de las 6 naciones <br />Giras<br /> Blablabla…
</p>
<h2 id="tennis_de_table"> Le tennis de table </h2>
... Reglas del juego…<br />Set y partido… <br />Blablabla…
</p>
TP6–Enlace anclado
1/ Crear una página [Link] con el texto a continuación en la parte central (parte BODY).
Reemplace los????por lo que corresponda.
10
Curso de HTML
SNT–2º
------------
<h1>Mis cursos</h1>
<p>
Ir directamente a la parte que trata de :<br />
La literatura
L’ICN
????</a><br />
</p>
La literatura
... Mi <br />biblioteca <br />ideal… <br /> Blablabla… <br />
mucho texto ... <br />
</????>
<h2 id="????"> LAS SNT </h2>
<p>... HTML <br />y <br />CSS…<br /> blablabla… <br />
beaucoup de texte ... <br />
</p>
<h2 id="maths"> Les mathématiques </h2>
... Pitágoras…<br />Blablabla… <br />
mucho texto ...
</p>
------------
Puede reducir la página de su navegador para probar esta funcionalidad.
4–Enlace a un ancla ubicada en otra página
Se trata de hacer un enlace que abra una página Y que lleve directamente a un ancla situada en esa página.
Se informa el attributhref por el nombre de la página, seguido de un dièse (#), seguido del nombre del ancla.
<a href="[Link]#lorient">
llevará directamente al nivel del ancla llamado leorient en la página [Link].
5– Caso práctico de utilización de enlaces
• Un enlace que muestra un tooltip al pasar el cursor
Se utiliza el atributo title que muestra un globo de ayuda cuando se pasa el cursor sobre el enlace.
<p>Hola. ¿Desea visitar <a href="[Link] title="Para
¿hacer una búsqueda">Google</a> ? </p>
Al pasar el ratón sobre la palabra « Google », aparecerá en un globo « Para hacer una búsqueda ».
• Un enlace que abre una nueva ventana
11
curso de HTML
SNT–2º
Si no se quiere que la página de destino reemplace la que se tiene en pantalla, es posible "forzar" la apertura de un enlace
en una nueva ventana.
Para ello, se añade target="_blank" a la etiqueta <a>
<p>Hola. ¿Quieres visitar <a href="[Link] target =
<a href="_blank">Google</a> ?</p>
Según la configuración del navegador, la página se mostrará en una nueva ventana o en una nueva pestaña.
Se desaconseja abusar de esta técnica ya que perturba la navegación. El usuario puede hacer Mayús + Clic en el
enlace para abrir en una nueva ventana o Ctrl + Clic para abrir en una nueva pestaña.
• Un enlace para enviar un correo electrónico
Para que los visitantes puedan enviar un correo electrónico al creador del sitio, se utiliza el enlace de tipo mailto. El atributo
hrefprend la valeur suivante
<p><a href="[Link] un correo electrónico!</a></p>
Si haces clic en el enlace, se abrirá un nuevo mensaje vacío, listo para ser enviado a tu dirección de correo electrónico.
• Un enlace para descargar un archivo
Mismo principio que para un enlace a una página web, con el nombre del archivo como valor del atributo href.
descargar.
<p><a href="[Link]">Descargar el archivo</a></p>
Permite descargar el archivo [Link] que se encuentra en la misma carpeta que la página web.
12
curso de HTML
SNT–2º
HTML–Las imágenes
Existen varios formatos de imagen que se pueden utilizar en sitios web, y cada formato tiene sus características.
propios. Las imágenes a veces son voluminosas para descargar, lo que ralentiza el tiempo de carga de la página,
por lo tanto, hay que estar atento al formato utilizado.
1– Los diferentes formatos de imagen
Ciertos formatos son más adecuados que otros para ciertos tipos de imágenes; el peso (en KB, incluso en MB) y la calidad
Las imágenes dependen del tipo de formato elegido.
Todas las imágenes difundidas en Internet tienen un punto en común: están comprimidas. Eso significa que
el ordenador realiza cálculos para que sean menos pesadas y, por lo tanto, más rápidas de cargar.
• JPEG o JPG (Grupo de Expertos en Fotografía Conjunta)
Formato más común. Es el formato que más comprime, por lo que está diseñado para reducir el peso de las fotos, que
pueden tener más de 16 millones de colores diferentes. El lado negativo es que la calidad de la imagen puede
être détériorée. Pourune photo, la perte de qualité est minime, en revanche, pour les autres types d’images, il est
deseable de [Link].
• PNG (Gráficos de Red Portátiles)
El formato PNG es el más reciente de todos. Este formato es adecuado para la mayoría de los gráficos (para todo lo que no es
una foto). El PNG tiene dos grandes ventajas: puede hacerse transparente y no altera la calidad de la imagen.
El PNG fue inventado para competir con otro formato, el GIF, en una época en la que el uso de GIF era de pago.
Desde entonces, el PNG ha evolucionado bien y se ha convertido en el formato más poderoso para guardar la mayoría de las imágenes.
El PNG existe en dos versiones, dependiendo del número de colores que debe tener la imagen:
- PNG 8 bits: 256 colores;
- PNG 24 bits: 16 millones de colores (tanto como una imagen JPEG).
Sin embargo, la compresión JPEG es más potente en las fotos. Una foto guardada en JPEG se cargará
siempre mucho más rápido que si estuviera guardada en PNG.
• GIF (Formato de Intercambio de Gráficos)
Hoy en día, el PNG es en general mucho mejor que el GIF: las imágenes son generalmente más ligeras y la
la transparencia es de mejor calidad.
El formato GIF está limitado a 256 colores (mientras que el PNG puede alcanzar hasta varios millones de colores).
Pero el GIF es el único formato que permite animaciones.
En resumen, existe un formato adecuado para cada imagen:
• Une photo : JPEG.
• Un gráfico con pocos colores (menos de 256): PNG de 8 bits o GIF.
• Un gráfico con muchos colores: PNG de 24 bits.
13
curso de HTML
SNT–2º
• Una imagen animada: GIF.
Existen otros formatos de imagen, pero no son interesantes para la Web porque no están comprimidos.
2–Insertar una imagen
• Baliza
Las imágenes deben encontrarse obligatoriamente dentro de un párrafo (<p></p>).
La etiqueta que permitirá insertar una imagen es <img />.
Es una etiqueta de tipo huérfana: esta etiqueta se utiliza para indicar el lugar donde la foto va a ser insertada, no hay
necesito delimitar una porción de texto.
Deux attributs obligatoires :
src: significa "fuente"; permite indicar dónde se encuentra la imagen que se desea insertar. Se indica un camino
absoluto, o una ruta relativa.
alt: esto significa "texto alternativo". Siempre debe haber un texto alternativo para la imagen, es decir, un texto breve.
quien describe lo que contiene la imagen. Se mostrará en lugar de la imagen si esta no se puede descargar (esto
llegar), o en los navegadores de personas ciegas. Esto también ayuda a los robots de los motores de búsqueda
para la búsqueda de imágenes.
<p>
Aquí hay una foto que tomé :<br />
<img src="images/[Link]" alt="Photo de fleur" />
</p>
Aquí, la imagen a insertar se encuentra en la subcarpeta « imagen » y el texto alternativo es « Foto de flor »
Remarque : Ne pas utiliser les accents, majuscules et espaces dans les noms de fichiers et de dossiers.
• Agregar un tooltip
El atributo que permite mostrar un globo de ayuda es el mismo que para los enlaces: se trata de title. Este atributo es
facultativo (a diferencia de alt).
<p> </p>
Aquí hay una foto que tomé :<br />
<img src="images/[Link]" alt="Photo de fleur" title="Magnifique photo !"
/>
</p>
• Miniatura clicable
Para las imágenes voluminosas, se recomienda mostrar una miniatura en el sitio. Luego se agrega un enlace sobre
esta miniatura para que los visitantes puedan ver la imagen en tamaño original.
Existen muchos programas que permiten crear miniaturas de imágenes, por ejemplo, Easy Thumbnails.
14
Curso de HTML
SNT–2º
También puede simplemente reducirlos con Paint.
<p>
¿Deseas ver la imagen en su tamaño original? ¡Haz clic en ella!
/>
<a href="images/[Link]"><img src="images/fleur_mini.jpg" alt="Foto de
fleur" title="Cliquez pour agrandir" /></a>
</p>
La imagen mostrada, por lo tanto la imagen fuente es fleur_mini.jpg y si se hace clic en ella, gracias al atributo href se hace
el enlace con la imagen en tamaño normal.
TP7–Miniatura
1/ Guardar una imagen en una subcarpeta de TEST, llamada IMÁGENES
2/ Crear la versión en miniatura de la imagen y guardarla en la misma carpeta IMÁGENES
3/ Inserte la imagen en miniatura en su página [Link] y haga el enlace a la imagen en tamaño real para que
La imagen ampliada se muestra al hacer clic en la miniatura, con un tooltip.
HTML–Memo
Baliza de apertura Etiqueta de cierre Rol de la etiqueta
<p> </p> Párrafo
<br /> Ir a la línea
<h1> <h2> <h3>… <h6> </h1> </h2> </h3>… </h6> Título
<em> </em> Para resaltar un poco un texto
<strong> </strong> </strong> Para resaltar bien un texto
<mark> </mark> Para marcar un texto
<ul> </ul> Liste non ordonnée
<ol> </ol> Lista ordenada
<li> </li> Elemento de lista
<a> </a> Enlace
<img /> Inserción de imagen
15
curso de HTML