LAS ETIQUETAS · elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en...
36
PROGRAMACIÓN EN HTML Y EN CSS El lenguaje HTML consiste en un conjunto de etiquetas predefinidas que el navegador interpreta a la hora de construir una página para su visualización. Así, el HTML es el lenguaje utilizado para estructurar una página web. Todas las páginas web se estructuran mediante código HTML acompañado de otros dos lenguajes: CSS y JavaScript. LAS ETIQUETAS Una etiqueta HTML consta de un nombre que la define encerrado entre símbolos <> y escrito en minúsculas. Existen etiquetas que pueden contener texto y otras que representan partes de una estructura. Por ello, las etiquetas con contenido se deben cerrar para definir con precisión qué engloban. Para ello, se emplea una etiqueta de cierre, idéntica a la de apertura, pero con el símbolo / delante del nombre. Si una etiqueta contiene otras etiquetas la más interna debe cerrase antes de poder encerrar la estructura que las contiene. Aunque no es obligatorio, se recomienda incluir el símbolo /, precedido de un espacio al final de la única etiqueta presente para indicar que esta termina ahí. LOS ATRIBUTOS Los atributos son valores adicionales que se agregan a una etiqueta para configurarla o definir su comportamiento. Existen atributos propios y exclusivos de algunas etiquetas, así como atributos globales aplicables a cualquier etiqueta, sino sólo aquellos necesarios para modificar el comportamiento de la etiqueta según corresponda. Los atributos se añaden, únicamente a la etiqueta de apertura, nunca a la de cierre. Cada atributo tiene un nombre que define la propiedad que modifican y un valor encerrado entre comillas dobles. Los atributos se agregan después del nombre de la etiqueta, separados por un espacio de dicho nombre y del resto de atributos. Por ejemplo <img src=”imagen.jpg” alt=”Imagen de prueba”> es un ejemplo de etiqueta de tipo <img> con atributos para insertar una imagen, en esta línea de código vemos: Una etiqueta <img> que hace referencia a que vamos insertar una imagen El atributo src indica cuál es el archivo que contiene la imagen El atributo alt se utiliza para mostrar un texto alternativo en el caso de que la imagen no estuviera disponible. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML (Se puede instalar un complemento para Firefox llamado firebug que nos permite editar código HTML). Para crear un documento HTML se puede utilizar cualquier editor de texto plano. Es conveniente además que el editor elegido resalte el HTML destacando las etiquetas y atributos frente al texto del contenido, de modo que mejore su legibilidad. Antes de empezar a crear el documento HTML es preciso definir la estructura básica, algunos editores añaden esta estructura por defecto. Los elementos básicos que conforman la estructura de un documento HTML son los siguientes:
Transcript of LAS ETIQUETAS · elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en...
PROGRAMACIÓN EN HTML Y EN CSS
El lenguaje HTML consiste en un conjunto de etiquetas predefinidas que el
navegador interpreta a la hora de construir una página para su visualización.
Así, el HTML es el lenguaje utilizado para estructurar una página web.
Todas las páginas web se estructuran mediante código HTML acompañado de
otros dos lenguajes: CSS y JavaScript.
LAS ETIQUETAS
Una etiqueta HTML consta de un nombre que la define encerrado entre símbolos
<> y escrito en minúsculas. Existen etiquetas que pueden contener texto y otras
que representan partes de una estructura. Por ello, las etiquetas con contenido
se deben cerrar para definir con precisión qué engloban. Para ello, se emplea
una etiqueta de cierre, idéntica a la de apertura, pero con el símbolo / delante
del nombre.
Si una etiqueta contiene otras etiquetas la más interna debe cerrase antes de
poder encerrar la estructura que las contiene. Aunque no es obligatorio, se
recomienda incluir el símbolo /, precedido de un espacio al final de la única
etiqueta presente para indicar que esta termina ahí.
LOS ATRIBUTOS
Los atributos son valores adicionales que se agregan a una etiqueta para
configurarla o definir su comportamiento. Existen atributos propios y exclusivos
de algunas etiquetas, así como atributos globales aplicables a cualquier
etiqueta, sino sólo aquellos necesarios para modificar el comportamiento de la
etiqueta según corresponda.
Los atributos se añaden, únicamente a la etiqueta de apertura, nunca a la de
cierre. Cada atributo tiene un nombre que define la propiedad que modifican y
un valor encerrado entre comillas dobles. Los atributos se agregan después del
nombre de la etiqueta, separados por un espacio de dicho nombre y del resto de
atributos. Por ejemplo <img src=”imagen.jpg” alt=”Imagen de prueba”> es un
ejemplo de etiqueta de tipo <img> con atributos para insertar una imagen, en
esta línea de código vemos:
Una etiqueta <img> que hace referencia a que vamos insertar una
imagen
El atributo src indica cuál es el archivo que contiene la imagen
El atributo alt se utiliza para mostrar un texto alternativo en el caso de
que la imagen no estuviera disponible.
ESTRUCTURA BÁSICA DE UNA PÁGINA HTML (Se puede instalar un
complemento para Firefox llamado firebug que nos permite editar código HTML).
Para crear un documento HTML se puede utilizar cualquier editor de texto
plano. Es conveniente además que el editor elegido resalte el HTML destacando
las etiquetas y atributos frente al texto del contenido, de modo que mejore su
legibilidad.
Antes de empezar a crear el documento HTML es preciso definir la estructura
básica, algunos editores añaden esta estructura por defecto.
Los elementos básicos que conforman la estructura de un documento HTML son
los siguientes:
PROGRAMACIÓN EN HTML Y EN CSS
DOCTYPE.- Informa al navegador de qué tipo de archivo se trata. Se incluye
siempre como la primera etiqueta del documento y es la única que se escribe en
mayúsculas.
<html>.- es el elemento raíz que contiene todo el documento HTML, se define
justo después del DOCTYPE.
<head>.- es el primer elemento que aparece en el interior del <html>. Dentro de
esta etiqueta se incluye información general sobre la página web dirigida, por lo
general, al navegador o a los buscadores web. El único elemento cuyo valor se
muestra al usuario es <title>, que define el título de la página y aparece como
título de la ventana cuando el documento se abre en el navegador.
<meta charset=”UTF-8”/>.- se emplea para indicar al navegador el tipo de
codificación de caracteres que utiliza el editor. Para no tener problemas al
utilizar caracteres especiales, se recomienda aplicar UTF-8 como valor, lo que
requiere que el editor utilizado esté configurado para el uso de dicha
codificación.
<body>.- Se añade a continuación de <head>. El contenido que se mostrará al
usuario deberá incluirse dentro del elemtento body.
TIPOS DE ELEMENTOS
Los elementos HTML se pueden clasificar en dos categorías: los elementos de
bloque y los elementos en línea.
Elementos de bloque
o Ocupan por defecto todo el ancho disponible dentro del elemento
que los contiene
o Los elementos situados tras un elemento de bloque siempre se
sitúan debajo de este, aunque se modifique su ancho y puedan
disponerse uno junto al otro
o Pueden contener otros elementos de bloque y otros elementos de
línea
o Los párrafos <p>, los bloques de división <div>, las listas <ul>,
<ol> y las tablas <table> constituyen ejemplos de este tipo de
elementos.
Elementos en línea
o Ocupan tan solo el ancho necesario, que viene definido por la
cantidad de texto incluido o por el tamaño de la imagen que se
debe mostrar
o Los elementos en línea, seguidos, se sitúan uno junto al otro hasta
que ocupan el ancho disponible
o Estos elementos solo pueden contener otros elementos en línea,
texto e imágenes
o Las imágenes <img>, los enlaces <a>, los botones <button> y el
texto resaltado <strong> son ejemplos de este tipo de elementos.
ETIQUETAS BÁSICAS
<div>.- permite dividir la página en secciones. La división del documento en
secciones es muy útil, ya que permite aplicar estilos con CSS más fácilmente
PROGRAMACIÓN EN HTML Y EN CSS
<p>.- representa un párrafo y solo puede englobar elementos en línea. Los
párrafos establecen márgenes superiores e inferiores con respecto al resto del
contenido
<span> se usa para agrupar elementos en línea, es similar a <div> con la
diferencia de que no define un bloque. Se usa para agrupar textos y otros
elementos en línea, así como para, con posterioridad aplicar estilos con CSS
<u>.- El texto al que se le aplique esta etiqueta aparecerá subrayado
<em>.- Al texto al que se le aplique esta etiqueta aparecerá en cursiva
<strong>.- Al texto al que se le aplique este etiqueta aparecerá en negrita.
<sub>.- el texto que engloba esta etiqueta representa un subíndice
<sup>.- el texto englobado se convierte en superíndice
<br>.- fuerza un salto de línea en el texto. No tiene etiqueta de cierre
<hr>.- Elemento de bloque que dibuja una línea de separación horizontal en la
página. No tiene etiqueta de cierre
Estas etiquetas son las más habituales, se muestra la guía completa de
etiquetas HTML5
El simbolo indica que el elemento fue añadido en HTML5. Nótese que otros
elementos listados aqui pueden haber sido modificados o extendido en su significado por
la especificación HTML5.
Elemento raíz
Elemento Descripcion
<!doctype html> Define que el documento esta bajo el estandar de HTML 5
Elemento Descripción
<html>
Representa la raíz de un documento HTML o XHTML. Todos los demás
elementos deben ser descendientes de este elemento.
Metadatos del documento
Elemento Descripción
<head>
Representa una colección de metadatos acerca del documento, incluyendo
enlaces a, o definiciones de, scripts y hojas de estilo.
PROGRAMACIÓN EN HTML Y EN CSS
Elemento Descripción
<title>
Define el título del documento, el cual se muestra en la barra de título del
navegador o en las pestañas de página. Solamente puede contener texto y
cualquier otra etiqueta contenida no será interpretada.
<base> Define la URL base para las URLs relativas en la página.
<link>
Usada para enlazar JavaScript y CSS externos con el documento HTML
actual.
<meta>
Define los metadatos que no pueden ser definidos usando otro elemento
HTML.
<style> Etiqueta de estilo usada para escribir CSS en línea.
Scripting
Elemento Descripción
<script>
Define ya sea un script interno o un enlace hacia un script externo. El
lenguaje de programación es JavaScript
<noscript>
Define una contenido alternativo a mostrar cuando el navegador no
soporta scripting.
Secciones
Elemento Descripción
<body>
Representa el contenido principal de un documento
HTML. Solo hay un elemento <body> en un
documento.
<section> Define una sección en un documento.
<nav>
Define una sección que solamente contiene
enlaces de navegación
<article>
Define contenido autónomo que podría existir
independientemente del resto del contenido.
PROGRAMACIÓN EN HTML Y EN CSS
Elemento Descripción
<aside>
Define algunos contenidos vagamente
relacionados con el resto del contenido de la
página. Si es removido, el contenido restante
seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Los elemento de cabecera implementan seis
niveles de cabeceras de documentos; <h1> es la
de mayor y <h6> es la de menor impotancia. Un
elemento de cabecera describe brevemente el
tema de la sección que introduce.
<header>
Define la cabecera de una página o sección.
Usualmente contiene un logotipo, el título del sitio
Web y una tabla de navegación de contenidos.
<footer>
Define el pie de una página o sección. Usualmente
contiene un mensaje de derechos de autoría,
algunos enlaces a información legal o direcciones
para dar información de retroalimentación.
<address>
Define una sección que contiene información de
contacto.
<main>
Define el contenido principal o importante en el
documento. Solamente existe un
elemento <main> en el documento.
Agrupación de Contenido
Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.
<hr>
Representa un quiebre temático entre parrafos de una sección o
articulo o cualquier contenido.
<pre>
Indica que su contenido esta preformateado y que este formato
debe ser preservado.
<blockquote> Representa una contenido citado desde otra fuente.
PROGRAMACIÓN EN HTML Y EN CSS
Elemento Descripción
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista ennumerada.
<dl>
Define una lista de definiciones, es decir, una lista de términos y
sus definiciones asociadas.
<dt> Representa un término definido por el siguiente <dd>.
<dd> Representa la definición de los terminos listados antes que él.
<figure> Representa una figura ilustrada como parte del documento.
<figcaption> Representa la leyenda de una figura.
<div>
Representa un contenedor genérico sin ningún significado
especial.
Semántica a nivel de Texto
Elemento Descripción
<a> Representa un hiperenlace , enlazando a otro recurso.
<em> Representa un texto enfatizado , como un acento de intensidad.
<strong> Representa un texto especialmente importante .
<small>
Representa un comentario aparte , es decir, textos como un descargo de
responsabilidad o una nota de derechos de autoría, que no son
esenciales para la comprensión del documento.
<s> Representa contenido que ya no es exacto o relevante .
<cite> Representa el título de una obra .
PROGRAMACIÓN EN HTML Y EN CSS
Elemento Descripción
<q> Representa una cita textual inline.
<dfn>
Representa un término cuya definición está contenida en su contenido
ancestro más próximo.
<abbr>
Representa una abreviación o un acrónimo ; la expansión de la
abreviatura puede ser representada por el atributo title.
<data>
Asocia un equivalente legible por máquina a sus contenidos. (Este
elemento está sólamente en la versión de la WHATWG del estandar
HTML, y no en la versión de la W3C de HTML5).
<time>
Representa un valor de fecha y hora; el equivalente legible por máquina
puede ser representado en el atributo datetime.
<code> Representa un código de ordenador .
<var>
Representa a una variable, es decir, una expresión matemática o
contexto de programación, un identificador que represente a una
constante, un símbolo que identifica una cantidad física, un parámetro
de una función o un marcador de posición en prosa.
<samp> Representa la salida de un programa o un ordenador.
<kbd>
Representa la entrada de usuario o usuaria, por lo general desde un
teclado, pero no necesariamente, este puede representar otras formas
de entrada de usuario o usuaria, como comandos de voz transcritos.
<sub>,<sup> Representan un subíndice y un superíndice, respectivamente.
<i>
Representa un texto en una voz o estado de ánimo alterno, o por lo
menos de diferente calidad, como una designación taxonómica, un
término técnico, una frase idiomática, un pensamiento o el nombre de un
barco.
<b>
Representa un texto hacia el cual se llama la atención para propósitos
utilitaros. No confiere ninguna importancia adicional y no implica una
voz alterna.
PROGRAMACIÓN EN HTML Y EN CSS
Elemento Descripción
<u>
Representa una anotación no textual sin-articular, como etiquetar un
texto como mal escrito o etiquetar un nombre propio en texto en Chino.
<mark>
Representa texto resaltado con propósitos de referencia, es decir por su
relevancia en otro contexto.
<ruby>
Representa contenidos a ser marcados con anotaciones
ruby, recorridos cortos de texto presentados junto al texto. Estos son
utilizados con regularidad en conjunto a lenguajes de Asia del Este,
donde las anotaciones actúan como una guía para la pronunciación,
como el furigana Japonés.
<rt> Representa el texto de una anotación ruby .
<rp>
Representa los paréntesis alrededor de una anotación ruby, usada para
mostrar la anotación de manera alterna por los navegadores que no
soporten despliegue estandar para las anotaciones.
<bdi>
Representa un texto que debe ser aislado de sus alrededores para el
formateado bidireccional del texto. Permite incrustar un fragmento de
texto con una direccionalidad diferente o desconocida.
<bdo>
Representa la direccionalidad de sus descendientes con el fin de anular
de forma explícita al algoritmo bidireccional Unicode.
<span>
Representa texto sin un significado específico. Este debe ser usado
cuando ningún otro elemento semántico le confiere un significado
adecuado, en cuyo caso, provendrá de atributos globales
como class, lang, o dir.
<br> Representa un salto de línea.
<wbr>
Representa una oportunidad de salto de línea, es decir, un punto
sugerido de envoltura donde el texto de múltiples líneas puede ser
dividido para mejorar su legibilidad.
PROGRAMACIÓN EN HTML Y EN CSS
Ediciones
Elemento Descripción
<ins> Define una adición en el documento.
<del> Define una remoción del documento.
Contenido incrustado
Elemento Descripción
<img> Representa una imagen.
<iframe>
Representa un contexto anidado de navegación, es decir, un
documento HTML embebido.
<embed>
Representa un punto de integración para una aplicación o contenido
interactivo externo que por lo general no es HTML.
<object>
Representa un recurso externo, que será tratado como una imagen, un
sub-documento HTML o un recurso externo a ser procesado por
un plugin.
<param>
Define parámetros para el uso por los plugins invocados por los
elementos <object>.
<video>
Representa un video , y sus archivos de audio y capciones asociadas,
con la interfaz necesaria para reproducirlos.
<audio> Representa un sonido o stream de audio.
<source>
Permite a autores o autoras especificar recursos multimedia
alternativos para los elementos multimedia como <video> o <audio>.
<track>
Permite a autores o autoras especificar una pista de texto temporizado
para elementos multimedia como <video> o <audio>.
<canvas>
Representa un área de mapa de bits en el que se pueden utilizar
scripts para renderizar gráficos como gráficas, gráficas de juegos o
cualquier imagen visual al vuelo.
PROGRAMACIÓN EN HTML Y EN CSS
Elemento Descripción
<map> En conjunto con <area>, define un mapa de imagen.
<area> En conjunto con <map>, define un mapa de imagen.
<svg> Define una imagen vectorial embebida.
<math> Define una fórmula matemática.
Datos tabulares
Elemento Descripción
<table> Representa datos con más de una dimensión.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody>
Representa el bloque de filas que describen los datos contretos de una
tabla.
<thead>
Representa el bloque de filas que describen las etiquetas de columna de
una tabla.
<tfoot>
Representa los bloques de filas que describen los resúmenes de
columna de una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th> Representa una celda encabezado en una tabla.
PROGRAMACIÓN EN HTML Y EN CSS
Formularios
Elemento Descripción
<form>
Representa un formulario, consistendo de controles que puede ser
enviado a un servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de formulario.
<input>
Representa un campo de datos escrito que permite al usuario o
usuaria editar los datos.
<button> Representa un botón .
<select>
Represents un control que permite la selección entre un conjunto de
opciones.
<datalist>
Representa un conjunto de opciones predefiniddas para otros
controles.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
<option>
Representa una opción en un elemento <select>, o una sugerencia
de un elemento <datalist>.
<textarea> Representa un control de edición de texto multi-línea.
<keygen> Representa un control de par generador de llaves.
<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de una tarea.
<meter>
Representa la medida escalar (o el valor fraccionario) dentro de un
rango conocido.
PROGRAMACIÓN EN HTML Y EN CSS
Elementos interactivos
Elemento Descripción
<details>
Representa un widget desde el que un usuario o usuaria puede
obtener información o controles adicionales.
<summary>
Representa un resumen, título o leyenda para un
elemento <details> dado.
<command> Representa un comando que un usuario o usuaria puede invocar.
<menu> Representa unalista de comandos .
PROGRAMACIÓN EN HTML Y EN CSS
EJEMPLOS
Para llevar a cabo los proyectos usaremos la herramienta de Firefox THIMBLE,
la cual nos permite escribir en paralelo el código y la página en apariencia “real”.
Podemos acceder desde https://thimble.mozilla.org/es/?ref=webmaker.org
Pulsamos “Empieza tu proyecto desde cero”
Nos aparecerá el siguiente fragmento de código:
Que equivale a la siguiente página:
PROGRAMACIÓN EN HTML Y EN CSS
Veamos el código que aparece y qué significa cada elemento:
Estas primeras líneas son “estándar” y deberíamos ponerlas en todas las
páginas que diseñemos.
Esta línea es la que muestra el título, es decir, es la que se mostraría en la parte
superior de la ventana.
Así, todos estos elementos constituyen lo que se denomina <head> o encabezado
de la página, hay que tener en cuenta que ninguno de estos elementos se va a
ver directamente.
ANÁLISIS DEL CUERPO DE LA PÁGINA
El cuerpo de la página es lo que realmente vamos a ver, va dentro de la etiqueta
<body>
En el ejemplo que estamos analizando:
PROGRAMACIÓN EN HTML Y EN CSS
Aquí observamos, dentro de la etiqueta <h1> el título principal de la página,
posteriormente el párrafo (entre <p>) y la palabra amazing que al ir dentro de la
etiqueta <strong> aparece en negrita.
Vamos a modificar la página para añadirle diversos elementos.
LISTAS
Una lista es una estructura que engloba un conjunto de elementos que la
componen. Existen dos tipos de listas, por un lado las listas desordenadas y por
otro lado las listas ordenadas. En el caso de que la lista no mantenga ningún
orden concreto (por ejemplo la lista de ingredientes de una receta) recibe el
nombre de lista desordenada, si se quiere establecer un orden concreto, como
por ejemplo, en la clasificación de la Liga de fútbol, hablamos de lista ordenada.
Los elementos que componen la lista se representan con la etiqueta <li> en
ambos casos. Esta etiqueta es equivalente a un párrafo en cuanto a su
contenido y por lo tanto, es un elemento de bloque.
La lista ordenada se representa con la etiqueta <ol>. Esta etiqueta, además de
los globales, admite varios atributos, de los que estuidaremos:
reversed.- invierte el orden
start.- establece en qué número empieza la lista, por defecto será 1
type, que indica qué tipo de numeral se va a usar:
o 1: números
o a: letras minúsculas
o A: letras mayúsculas
o I: números romanos
o i: números romanos en minúscula
EJEMPLO:
PROGRAMACIÓN EN HTML Y EN CSS
La página web quedaría:
Si queremos editar una lista desordenada, a diferencia de la anterior está
asociada a la etiqueta <ul>, además, no es necesario usar los atributos. Por
ejemplo:
Quedaría una vista como la que se muestra a continuación
PROGRAMACIÓN EN HTML Y EN CSS
Si queremos editar una lista anidada:
Lo que daría lugar a algo así:
LOS ENCABEZADOS
Los diferentes tipos de encabezados se modifican simplemente mediante el
número de que después de la h, a mayor número mayor tamaño de letra, así
<h1> corresponderá a un encabezado con la letra grande y <h6> a un
encabezado con la letra pequeña.
PROGRAMACIÓN EN HTML Y EN CSS
Lo que quedaría:
EJERCICIOS
Ejercicio 1.- Diseña un código HTML que tenga como resultado el siguiente
texto:
Ejercicio 2.- Diseña un código HTML que tenga como resultado el siguiente
texto:
PROGRAMACIÓN EN HTML Y EN CSS
SOLUCIÓN AL EJERCICIO 1
SOLUCIÓN AL EJERCICIO 2
PROGRAMACIÓN EN HTML Y EN CSS
LAS TABLAS
Una tabla (que en código html se denota por <table>) es un elemento de bloque
que se emplea para estructurar una serie de datos alineados según un esquema
de filas y columnas.
Las filas de una tabla se representan con la etiqueta <tr> y solamente contienen
celdas o <td>. Cada fila debe contener el mismo número de celdas, las cuales
pueden contener cualquier texto en su interior.
El atributo border se usa para dibujar bordes de separación con las celdas.
EJEMPLO
El siguiente código:
Corresponde a la siguiente tabla
Si quisiéramos que una fila o columna ocupe más espacio tendremos que usar
la instrucción colspan (número de columnas) o rowspan (número de filas).
PROGRAMACIÓN EN HTML Y EN CSS
EJEMPLO
Con esta instrucción conseguiríamos que la segunda fila ocupara 3 celdas,
quedando una cosa como la que se muestra a continuación:
EJEMPLO 2
Con esto conseguimos que la primera columna ocupe 2 espacios o celdas,
quedando:
PROGRAMACIÓN EN HTML Y EN CSS
EJERCICIOS
1.- Crea un código HTML que haga una tabla de 3 filas y 3 columnas, con borde
de tipo 3. En cada celda tiene que aparecer un nombre de una persona de clase.
2.- Modifica el código anterior para que la segunda columna ocupe 2 celdas
3.- Modifica el código del ejercicio 1 para que la segunda fila ocupe 2 celdas.
PROGRAMACIÓN EN HTML Y EN CSS
SOLUCIÓN AL EJERCICIO 1
SOLUCIÓN AL EJERCICIO 2
PROGRAMACIÓN EN HTML Y EN CSS
SOLUCIÓN AL EJERCICIO 3
PROGRAMACIÓN EN HTML Y EN CSS
IMÁGENES
En HTML las imágenes son elementos en línea. Así, al insertar una imagen en
un documento, se alineará con el resto del texto o, en el caso de varias imágenes
seguidas, aparecerán junto a la otra siempre que el ancho lo permita.
Las imágenes se representan con la etiqueta <img>, la cual no va acompañada
de etiqueta de cierre (no existe </img>). El archivo correspondiente a la imagen
se referencia estableciendo la ruta al mismo con el atributo src. Es conveniente
incluir el atributo alt=_______ que nos permite introducir un texto alternativo en
el caso de que no cargue la imagen.
La ruta a la imagen se establece desde el directorio, donde se encuentra el
documento HTML que se está visualizando. La barra / es el separador de
directorios. En el caso de que se trate de una imagen externa debemos
introducir la dirección completa.
Un ejemplo de imagen sería
<img
src=http://as01.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png
alt=”Real Madrid”/>
El código HTML nos quedaría
Lo cual daría lugar a una página como se muestra a continuación:
PROGRAMACIÓN EN HTML Y EN CSS
Para obtener la dirección de la imagen tenemos que abrirla en el explorador,
pulsar con el botón de la derecha sobre ella y pulsar “Copiar ruta del enlace”.
INSERCIÓN DE ENLACES
En HTML también podemos insertar enlaces que al pulsarlos nos abran nuevas
páginas, para ello, tenemos que usar la etiqueta <a href=”dirección de la
página>Texto</a>
Un ejemplo sería:
Que daría lugar a una página como se muestra:
EJERCICIOS
1.- Diseña un código HTML que dé lugar a una página en la que veamos una
tabla de 1 fila y dos columnas. En cada una de las celdas tiene que haber un
enlace a una página.
2.- Diseña un código HTML en el que aparezcan dos filas y una columna y en
cada celda aparezca una imagen de un escudo de fútbol
PROGRAMACIÓN EN HTML Y EN CSS
SOLUCIÓN AL EJERCICIO 1
Se debe visualizar:
SOLUCIÓN AL EJERCICIO 2
PROGRAMACIÓN EN HTML Y EN CSS
PERSONALIZACION DE LA PÁGINA
CSS es el lenguaje utilizado para definir el modo de presentar el código HTML a
la hora de visualizarlo con el navegador.
Para vincular un código CSS a una estructura HTML tenemos varias
posibilidades:
en un atributo HTML con el atributo style.- el atributo style se puede
incluir en cualquier etiqueta y permite insertar directamente código CSS
como valor de dicho atributo. A su vez, las diferentes instrucciones
incluidas se separan por punto y coma. Esta manera de incluir el código
CSS es desaconsejable. Ejemplo:
Lo que daría una página:
Con la etiqueta <style>.- Esta manera permite establecer un diseño
general que afectará a todo el documento HTML en el que se encuentre
dicha etiqueta. Esta se suele incluir en la cabecera (dentro del elemento
<head>. Ejemplo
PROGRAMACIÓN EN HTML Y EN CSS
En un archivo independiente.- Es la mejor manera de incluir código CSS.
El archivo asociado tendrá extensión .css y se situará en una carpeta
diferente al de los documentos HTML. Para incluir un documento CSS es
preciso insertar la siguiente etiqueta en la cabecera de los documentos
HTML a los que se quiera aplicar:
Donde “css/estilo.css” se correspondería con el nombre del archivo en el que
tenemos recogidos los estilos a aplicar.
En nuestro caso, la última opción va a ser la que usemos. Thimble ya nos
proporciona por defecto un archivo de estilo.
El archivo style.css será el archivo en el que modifiquemos todos los elementos
relativos al formato y a la presentación del documento.
Para poder programar el archivo de estilo debemos saber los códigos del lenguaje
de programación CSS.
PROGRAMACIÓN EN HTML Y EN CSS
EL LENGUAJE CSS El lenguaje CSS se usa para dar formato a una web y para poder modificar
elementos por separado de la web que estemos diseñando.
Para ello, debemos tener diseñado el archivo .html de tal manera que podamos
hacer referencia a los elementos que queremos modificar.
Por defecto el archivo de estilo viene de la siguiente manera:
Esto quiere decir que todo lo que esté dentro de la etiqueta <body> estará
afectado por los requisitos de estilo que aparecen dentro de las llaves
MODIFICACIONES DE TEXTO
Se pueden hacer diversas modificaciones al texto, básicamente las mismas que
se pueden hacer en un editor de textos tipo Word. Las que vamos a usar son las
siguientes:
1.- Alineación de texto. Se usa text-align: las opciones que tenemos:
o Left
o Right
o Center
o Justify
2.- Subrayado.- Se usa text-decoration: posteriormente se añadirá:
o Underline.- subrayado
o Overline.- encima del texto
o Line-through.- tachado
3.- Tamaño del texto.- Se usa font-size Define el tamaño del texto contenido.
Los valores en los que podemos especificar la unidad de medida son:
o Pixeles (px)
o Puntos (pt)
o Porcentaje de aumento (%)
PROGRAMACIÓN EN HTML Y EN CSS
o También se pueden usar tamaños estándar
x-small
small
médium
large
x-large
4.- Tipo de fuente.- Usaremos el comando font-family: seguido del tipo de fuente
que queremos utilizar entre comillas
5.- Sombreado del texto.- Se usa text-shadow: posteriormente se usa el tamaño
del sombreado:
Con todo esto, la página que nos quedaría sería:
COLORES
Para modificar el color del texto que incluye un elemento se utiliza la propiedad
color. Para especificar el color podemos usar varias técnicas:
Nombre del color en inglés
Proporción de cada valor RGB precedido de almohadilla #FF0000.
Proporción de cada color en RGB en decimales: rgb (255,15,13)
PROGRAMACIÓN EN HTML Y EN CSS
Proporción de cada RGB en porcentajes: rgb (100%,5%,36%)
Proporción de cada valor RGB más un valor de 0 a 1 que indica la
transparencia del color rgb(100,25,36,0.5)
Podemos modificar, tanto el color de la letra como el color del fondo
Para modificar el color de la fuente usaremos color:
Para modificar el color del fondo usaremos background-color:
Nos quedaría una cosa de esta manera:
CÓMO HACER PARA MODIFICAR SÓLO UN ELEMENTO
Cuando editamos el código del archivo .css estamos introduciendo cambios que
afectan a todo el cuerpo de la página, pero si queremos modificar un elemento
concreto de la página, debemos realizar otra operación.
En primer lugar, debemos ir al archivo html e identificar el elemento que
queremos modificar, para ello, dentro de la etiqueta que lo contiene, debemos
usar el complemento id=”nombre”.
PROGRAMACIÓN EN HTML Y EN CSS
El nombre que le hayamos puesto servirá para identificarlo en el archivo .css,
para eso, usamos #identificador, es decir, en el archivo .css:
De esta manera estaré actuando sólo sobre el elemento al que afecta el #, la
página que estamos modificando quedará:
Es decir, sólo quedará modificado el texto del párrafo.
También podemos dividir la página en distintas partes usando la etiqueta <div
id=”nombre”> y actuar sobre la división correspondiente.
LOS BORDES
En un elemento HTML, además de un color de fondo se puede añadir un borde
alrededor del mismo. El borde no tiene por qué rodear completamente al
elemento, ya que se puede optar por establecer un borde independiente en la
parte superior, inferior, derecha o izquierda. Otra posibilidad es establecer
bordes con estilos diferentes en cada una de las zonas del elemento.
Las propiedades de borde serán:
1.- Añadir grosor al borde de los cuatro lados: se usa border-width y se establece
en pixels (px) opcionalmente se puede añadir a cada lado usando:
Border-left-width
Border-right-width
Border-top-width
Border-botton-width
PROGRAMACIÓN EN HTML Y EN CSS
2.- Tipo de trazo con el que se dibuja el borde: se usa border-style, los valores
que se le añaden a continuación son:
Solid (línea continua)
Dashed (línea discontinua)
Dotted (línea punteada)
Doublé (línea continua doble)
3.- Color del borde.- Se usa border-color.
4.- Radio de curvatura de las esquinas del borde.- se usa boder-radius y se
especifica en pixels.
MÁRGENES
Al dibujar varios elementos seguidos, no existe ningún tipo de espaciado o
margen entre dichos elementos ni entre el borde de un elemento y su contenido.
Para establecer un espacio de separación entre un elemento y los otros
elementos que lo rodean CSS dispone de dos propiedades:
PROGRAMACIÓN EN HTML Y EN CSS
1.- margin.- representa el espacio entre un elemento y los elementos que lo
rodean, o el borde del elemento que lo contiene. Como unidad se utiliza el pixel
(px) o porcentaje.
2.- padding.- Representa el espacioi o margen interno entre un elemento y su
contenido. De esta manera, es el elemento contenedor el que fuerza que los
elementos interiores se despeguen de su borde. Acepta las mismas propiedades
que margin.
También existe la posibilidad de modificar solamente uno de los márgenes, para
ellos usaremos:
Para modificar el margen de la izquierda margin-left
Para modificar el margen de la derecha margin-right
Para modificar el margen superior margin-top
Para modificar el margen inferior margin-botton
También podemos modificar el ancho y alto con las propiedades width y heigth
especificando en px el tamaño que queremos para el contenedor de texto.
POSICIONAMIENTO
El posicionamiento se usa para hacer que el navegador muestre en posiciones
distintas a la original determinados elementos. Los elementos que vamos a usar
son:
position: static.- es el valor por defecto que, después de cada elemento de
bloque realiza un salto de línea
position: relative.- de cara al resto de elementos de la página, un elemento
con este valor ocupará el mismo espacio que si su valor fuese static, se
puede obligar al navegador a desplazar l aposición donde lo dibujará
usando las propiedades top, bottom, left y right, las cuales desplazar´na
el elemento hacia el lado seleccionado.
position-absolute.- al aplicar este valor, el elemtno se sitúa en la esquina
superior izquierda del elemento que lo contien. Además, hay que tener
en cuenta que se despega del documento, es decir, que para el resto de
elementos, la posición se interpreta como si no estuviera ocupando
espacio en el documento, de forma similar a si se situara en una capa
superior.
margin-top y margin-left.- Permite mover un elemento. Sin embargo, si
se usa esto, el elemento deja de situarse respecto al elemento que lo
contiene y emplea todo el documento como referencia.
ESTABLECER UNA IMAGEN DE FONDO
Para establecer una imagen de fondo en la página se usan las siguientes
propiedades:
background-image.- su valor será la ruta a la imagen deseada (igual que
al introducir imágenes normales)
background-position.- en el caso de que la imagen sea más pequeña que
el elemento esta propiedad establece la alineación vertical y horizontal de
la misma. Se establecen dos valores separados por espacio:
o La alineación horizontal: left, center o right
PROGRAMACIÓN EN HTML Y EN CSS
o La alineación vertical: top, center o bottom.
background-repeat.- si la imagen es más pequeña que el elemento se
repitirá, por defecto horizontal y verticalmente hasta ocupar todo el
espacio disponible. Este comportamiento se puede modificar con los
valores:
o no-repeat.- no se repite
o repeat-x.- se repite horizontalmente
o repeat-y.- se repite verticalmente.
CÓMO CREAR PÁGINAS MULTIPANTALLA
Si queremos crear páginas multipantalla, debemos agregar una archivo html
por cada pantalla que querramos tener. Para agregar pantalla tenemos que
pulsar el botón + que hay en la esquina superior izquierda:
Posteriormente debemos introducir en el código una referencia, al igual que se
hace para introducir un enlace a la página secundaria:
