Prévia do material em texto
El contenido de la obra ha sido desarrollado exclusivamente por los
miembros del equipo de Software Developer Coach.
Reservados todos los derechos. Queda rigurosamente prohibida, sin la
autorización escrita de Software Developer Coach, bajo las sanciones
establecidas en las leyes, la reproducción parcial o total de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento
informático, así como la distribución de ejemplares mediante alquiler o
préstamo público.
Segunda edición.
Para más información visita:
https://www.softwaredeveloper.coach
https://www.softwaredeveloper.coach/
TABLA DE CONTENIDO
INTRODUCCIÓN
¿QUÉ NECESITO PARA EMPEZAR?
PROCESO DE APRENDIZAJE
Organización
Distribución del fin de semana
HTML
Historia
Sintaxis
CSS
Historia
Sintaxis
ENTORNO DE DESARROLLO
Instalación
Microsoft Windows
macOS
Linux
Manual de uso
Cargando los archivos descargados de los objetivos
MI PRIMERA PÁGINA WEB
OBJETIVO 1: TÍTULO, CABECERAS Y PÁRRAFOS
Conceptos teóricos
Título
Cabeceras
Párrafos
FASE 1: Título y párrafos
FASE 2: Cabeceras
Ahora eres capaz de…
OBJETIVO 2: FORMATEANDO TEXTO EN HTML
Conceptos teóricos
FASE 1: Modificadores de texto
Ahora eres capaz de…
OBJETIVO 3: ESTILOS EN HTML
Conceptos teóricos
Estilos en HTML
Colores
FASE 1: Colores inline
FASE 2: Textos inline
FASE 3: Estilos internal
Ahora eres capaz de…
OBJETIVO 4: ESTILOS UTILIZANDO CSS
Conceptos teóricos
FASE 1: Añadir CSS al HTML
Ahora eres capaz de…
OBJETIVO 5: MODIFICANDO TEXTO CON CSS
Conceptos teóricos
Selectores CSS
Border / Padding / Margin
FASE 1: Texto
Fase 2: Texto y bordes/padding
Ahora eres capaz de…
OBJETIVO 6: HERENCIA DE CSS EN HTML Y
AGRUPAMIENTOS
Conceptos teóricos
Herencia en CSS
FASE 1: Herencia
FASE 2: Agrupamiento
Ahora eres capaz de…
OBJETIVO 7: IMÁGENES
Conceptos teóricos
FASE 1: Imágenes
Ahora eres capaz de…
OBJETIVO 8: LINKS
Conceptos teóricos
FASE 1
Ahora eres capaz de…
OBJETIVO 9: LISTAS
Conceptos teóricos
FASE 1
Ahora eres capaz de…
OBJETIVO 10: TABLAS
Conceptos teóricos
FASE 1: Tablas
FASE 2: Aplicando estilos a tablas
Ahora eres capaz de…
OBJETIVO 11: IDS
FASE 1
Ahora eres capaz de…
OBJETIVO 12: BLOCK VS INLINE
Conceptos teóricos
FASE 1: span
FASE 2: div
Ahora eres capaz de…
OBJETIVO 13: FORMS
Conceptos teóricos
FASE 1: Text input
FASE 2: Text área
FASE 3: Submit
FASE 4: Radio buttons
FASE 5: Checkboxes
FASE 6: Select box
FASE 7: Otros tipos de input
Ahora eres capaz de…
OBJETIVO 14: FORMS AVANZADO
FASE 1: Agrupación de elementos
FASE 2: Estilos
Ahora eres capaz de…
OBJETIVO 15: DISEÑO DE PÁGINAS WEB
Conceptos teóricos
FASE 1: Construyendo el layout
Ahora eres capaz de…
OBJETIVO 16: SECCIÓN HEAD
FASE 1: y lang
Ahora eres capaz de…
¡CONSEGUIDO!
ANEXOS
Guía de estilos de HTML
Comentarios de código
SOBRE LOS AUTORES Y AGRADECIMIENTOS
MATERIAL DESCARGABLE
OTROS LIBROS DE LOS AUTORES
INTRODUCCIÓN
¡Bienvenid@ al maravilloso mundo de la programación web!
Has llegado hasta aquí… ¡eso es porque tienes ganas de aprender
programación web con HTML y CSS! Y lo mejor de todo, es que has
decidido hacerlo con nosotros, ¡muchas gracias!
El objetivo del libro consiste en construir una base sólida de HTML y CSS
para que puedas desenvolverte ante cualquier situación. Para ello, hemos
diseñado un método de aprendizaje basado completamente en prácticas
progresivas junto con nociones básicas teóricas, estructurado de tal forma
que te permitirá aprenderlo en un fin de semana.
Una vez hayas acabado el libro, siguiendo el modo de aprendizaje que te
proponemos, podemos garantizarte que vas a ser capaz de tener la
autonomía suficiente para llevar a cabo tus propios proyectos de
programación, o al menos lanzarte a que lo intentes.
Estamos seguros de que, si nos acompañas hasta el final del libro, se te van
a ocurrir una gran cantidad de ideas de proyectos de programación, ya que
cuantos más conocimientos vas aprendiendo, más curiosidad desarrollarás y
por tanto más ideas te irán surgiendo.
Te animamos a que comiences a adentrarte en este mundo y disfrutes con
cada proyecto. No desesperes si no lo consigues a la primera, ya que seguro
que de cada error aprendes algo que te sirve para seguir avanzando. Esto es
solo el comienzo.
¿Empezamos?
¿QUÉ NECESITO PARA EMPEZAR?
Para aprender HTML y CSS en un fin de semana, tal y como te proponemos
en el libro, necesitarás lo siguiente:
Un ordenador, con total independencia del sistema operativo que
tenga instalado. Si no dispones de conexión a internet deberás de
descargar desde cualquier ordenador conectado a internet la
plataforma de desarrollo que vamos a utilizar para aprender e
instalarlo en el ordenador que vas a utilizar durante todo el
aprendizaje. En los apartados siguientes te explicaremos los pasos a
seguir para instalar el entorno de desarrollo en cada uno de los
sistemas operativos soportados por la plataforma que vamos a
utilizar.
Y por supuesto… ¡un fin de semana!
Al final del libro encontrarás la URL desde dónde puedes descargar el
código fuente de todos los ejercicios del libro.
PROCESO DE APRENDIZAJE
El libro está escrito para ayudarte a aprender HTML y CSS de forma
rápida, sencilla y con un enfoque práctico. Si eres nuev@ en programación,
en el libro vamos a explicarte de forma sencilla todos los conceptos que
necesitas saber para poder aprender a programar utilizando HTML y CSS.
Si ya sabes programar, en el libro vas a encontrar todo lo que necesitas
saber para tener una base sólida de ambos que te permita profundizar más.
Los temas tratados en el libro están seleccionados de forma cuidadosa y
ordenados de tal forma que se facilita el aprendizaje progresivo de todos los
conceptos que se explican.
El libro tiene un claro enfoque práctico, con multitud de ejemplos que te
permitirán afianzar todos los conocimientos teóricos que te explicamos.
Veamos cómo está organizado el libro.
Organización
El aprendizaje está dividido en dos partes claramente diferenciadas:
Bloque teórico sobre HTML y CSS y puesta en marcha de la
plataforma de desarrollo que se va a utilizar.
Teoría de programación y Práctica.
La primera parte del aprendizaje incluye una explicación teórica sobre
ambos lenguajes y todo lo necesario para que seas capaz de poner en
marcha el entorno de desarrollo que utilizarás para aprender.
El aprendizaje práctico está dividido en 16 Objetivos diferentes.
Los Objetivos tienen dificultad incremental. A medida que se va avanzando
se van adquiriendo nuevos conocimientos de mayor complejidad que los
anteriores. Los Objetivos están compuestos por diferentes ejercicios que
llamaremos Fases. En cada Objetivo, antes de empezar, se explican todos
los conceptos teóricos que se utilizarán en todas las Fases que lo componen.
Una Fase es un conjunto de ejercicios que profundizan en un área de
conocimiento dentro del Objetivo. En cada Fase se especifica el código
fuente junto con su explicación, además, se incluye un ejemplo de ejecución
del código fuente.
Distribución del fin de semana
El método de aprendizaje ha sido diseñado y optimizado para que seas
capaz de aprender HTML y CSS en un fin de semana. Obviamente, el
tiempo de aprendizaje puede verse modificado ligeramente por los
conocimientos previos que tengas.
La secuencia de aprendizaje recomendada que debes seguir para alcanzar el
objetivo es la siguiente:
HTML
HTML son las siglas de HyperText Markup Language y hacen referencia al
lenguaje de marcado utilizado para la creación de páginas web. El lenguaje
está considerado como el lenguaje más importante y determinante en la
aparición, desarrollo y expansión de la World Wide Web, cuyas siglas son
WWW.
HTML es un estándar del World Wide Web Consortium, conocido
comúnmente por las siglas W3C. Actualmente, HTML, es el estándar que se
ha impuesto en la creación y visualización de páginas webs y es utilizado
por todos los navegadores web, tales como Internet Explorer, Mozilla,
Chrome, etc.
Un navegador web es un programaun lugar de la Mancha...
En un lugar de la Mancha...
En un lugar de la Mancha...
El navegador mostrará la siguiente página web:
Utilizando el navegador de la vista previa dinámica de Brackets puedes ir
seleccionado cada uno de los textos y podrás comprobar que el elemento
seleccionado cambia visualmente y se aprecian los paddings del elemento
respecto a los cuatro bordes (líneas de puntitos):
El último ejercicio de la fase consiste en aprender a aplicar diferentes
bordes a los elementos HTML en cada uno de sus lados (superior, inferior,
izquierda, derecha). Para ello existen los siguientes estilos:
border-top: establece el borde superior del elemento.
border-bottom: establece el borde inferior del elemento.
border-left: establece el borde izquierdo del elemento.
border-right: establece el borde derecho del elemento.
La forma de utilizar los estilos específicos de los bordes es exactamente la
misma que la que vimos para el estilo border, en el segundo ejercicio de
esta misma fase.
El ejercicio consiste en aplicar a un texto un estilo diferente para el borde
de cada lado. El código fuente es el siguiente:
CSS
p
{
border-top: 2px ridge green;
border-bottom: 3px dashed black;
border-left: 1px groove red;
border-right: 5px inset blue;
}
HTML
HTML & CSS
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que
vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero,
salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda.
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este quinto objetivo has adquirido los siguientes conocimientos:
Utilización de clases en ficheros CSS.
Utilización de estilos para cambiar la fuente de letra, el tamaño,
estilo, color.
Utilización de estilos para establecer la separación entre letras y
palabras.
Aplicación de estilos para establecer la alineación de texto.
Utilización de bordes en elementos HTML.
Utilización de padding (relleno) en elementos HTML.
OBJETIVO 6: HERENCIA DE CSS EN HTML Y AGRUPAMIENTOS
El sexto objetivo del libro consiste en aprender a utilizar herencia en CSS y
a agrupar estilos por elementos HTML.
El objetivo está compuesto por dos fases. En la primera aprenderás todo lo
necesario para utilizar herencia de propiedades en estilos de CSS y en la
segunda aprenderás a agrupar estilos CSS por elementos HTML.
Conceptos teóricos
A continuación te vamos a explicar una serie de conceptos teóricos que
debes conocer para poder realizar los ejercicios del objetivo.
Herencia en CSS
La herencia en CSS es un mecanismo que permite pasar ciertas
propiedades/estilos de un elemento padre a uno hijo. Esto quiere decir que,
definiendo un estilo para un padre, habrá ciertas propiedades del estilo que
serán heredadas por los hijos, pero no todas, ya que únicamente son
susceptibles de herencia un subconjunto del total de propiedades que un
elemento puede tener. Es importante resaltar que siempre heredarán todas
las propiedas que puedan heredar.
Si quieres consultar qué propiedades se pueden heredar puedes consultar
esta URL: https://www.w3.org/TR/css-2010/#properties. En el apartado 4.1
Property Index encontrarás todas las propiedades, aquellas en las que la
columna Inherit tenga el valor true serán heredadas.
Un ejemplo clásico de herencia es definir el tipo de letra, la alineación y el
tamaño en el elemento HTML body y de esta forma toda la página web
tendrá el mismo tipo de letra, tamaño y alineación.
FASE 1: Herencia
https://www.w3.org/TR/css-2010/#properties
En el primer ejercicio de la fase vas a aprender a utilizar la herencia
estableciendo para el elemento HTML body ciertas propiedades/estilos que
serán heredadas por todos los elementos que componen la página web. En
el ejercicio podrás comprobar como los elementos hijos se muestran según
lo especificado en el estilo del elemento HTML body. El código fuente es el
siguiente:
CSS
body {
font-family: Comic Sans MS;
text-align: center;
font-size: 1.2em;
}
h1
{
color: blue;
}
p
{
color: green;
}
HTML
HTML & CSS
Herencia CSS (Body y H1)
Este es mi primer ejercicio con herencia (Body y p)
Texto por defecto (Body)
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en aprender a reemplazar los
valores heredados de las propiedades del padre estableciendo nuevos
valores en el hijo. Para ello, vas a definir una clase general que contenga las
mismas propiedades que el elemento HTML body pero con otros valores y
la aplicarás a un elemento HTML. El código fuente es el siguiente:
CSS
body {
font-family: Comic Sans MS;
text-align: center;
font-size: 1.2em;
}
h1
{
color: blue;
}
.allchanged
{
font-family: Arial;
text-align: left;
font-size: 2em;
}
HTML
HTML & CSS
Herencia CSS (Body y H1)
Este es mi segundo ejercicio con herencia (Body)
Texto con toda la herencia cambiada
El navegador mostrará la siguiente página web:
FASE 2: Agrupamiento
En el objetivo anterior te explicamos en la parte teórica que es posible
asignar un estilo a un conjunto de etiquetas HTML utilizando selectores de
etiquetas. En esta fase vas a aprender a utilizarlos.
El ejercicio consiste en definir un estilo específico para las etiquetas h1 y h2
para establecer el tipo de letra, la alineación y el color de la misma. El
código fuente es el siguiente:
CSS
h1, h2
{
font-family: Comic Sans MS;
text-align: center;
color: blue;
}
HTML
HTML & CSS
Lenguajes de programación
Los lenguajes de programación que conozco son los siguientes.
C#
Aprendí C# hace 15 años y lo uso todo los días en mi trabajo.
Python
Aprendí Python hace 10 años y lo uso para tareas de investigación.
Java
Aprendí Java hace 12 años y lo uso para estudiar.
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este sexto objetivo has adquirido los siguientes conocimientos:
Utilización de herencia en los estilos CSS.
Definición de estilos para conjuntos de elementos HTML a la vez
(agrupamiento).
OBJETIVO 7: IMÁGENES
El séptimo objetivo del libro consiste en aprender a manejar imágenes en
los ficheros HTML.
El objetivo está compuesto únicamente por una fase en la que aprenderás a
incluir imágenes en los ficheros HTML, a modificar su tamaño y a utilizar
las imágenes flotantes junto con texto.
Conceptos teóricos
Las imágenes en las paginas web normalmente son de tres tipos diferentes:
JPG: además de ser el formato más utilizado para imágenes en
páginas web es un formato que permite una gran variedad de colores
diferentes.
PNG: es un formato que añade ciertas funcionalidades respecto al
formato JPG, entre ellas destaca la posibilidad de añadir
transparencia para que se pueda ver el fondo de la página web.GIF: el formato añade animación al formato PNG, es decir, si quieres
imágenes que se muevan deberás utilizar una imagen en formato GIF.
Si quieres tener una web que tarde poco tiempo en cargarse deberás de tener
imágenes que ocupen un tamaño pequeño de memoria, es por eso por lo que
el formato JPG es el más utilizado para las imágenes en las páginas web.
Las imágenes que puedes utilizar en tu página web pueden estar
almacenadas en dos sitios diferentes:
Proyecto web: tu propia página web tendrá las imágenes guardadas
en la misma carpeta de la página. Para utilizar este tipo de imágenes
en tu página web tendrás que poner la ruta de la imagen dentro de la
carpeta de la web en el elemento imagen.
Internet: la imagen se encuentra en internet y deberás de añadir la
dirección en la que se encuentra al elemento imagen.
FASE 1: Imágenes
El primer objetivo de la fase consiste en aprender a utilizar el elemento
HTML que permite añadir imágenes. El elemento es img y tiene el siguiente
formato:
En el valor del atributo src deberás de especificar la ruta dentro de la
carpeta o la ruta de internet en la que se encuentra la imagen.
El ejercicio consiste en mostrar una serie de imágenes con diferentes rutas.
Las dos primeras se encuentran dentro de la carpeta de la página web y la
otra se encuentra en una ruta de internet. El código fuente es el siguiente:
HTML & CSS
Utilizando imágenes
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en aprender a añadir un texto
alternativo en caso de que no se pueda mostrar la imagen y también en
aprender a modificar el tamaño de la imagen.
El tamaño de una imagen se puede modificar de dos formas diferentes:
Atributos del elemento img: mediante los atributos width y height se
puede modificar el ancho y el alto de la imagen.
Estilos: el ancho y el alto de la imagen se puede modificar mediante
las tres formas diferentes de aplicar estilos que te hemos explicado
anteriormente, cambiando los valores de width y height.
El atributo del elemento img que permite añadir un texto a la imagen es alt.
El ejercicio consiste en añadir un texto alternativo a las imágenes y
modificar el tamaño de la imagen de tres formas diferentes: mediante
atributos, mediante estilos inline y mediante estilos con CSS utilizando una
clase. El código fuente es el siguiente:
HTML
HTML & CSS
Utilizando imágenes
CSS
.sized
{
width: 100px;
height: 30px;
}
El navegador mostrará la siguiente página web:
En el tercer ejercicio vas a aprender a añadir imágenes a párrafos de texto y
a alinearlas respecto al mismo, a la izquierda o a la derecha. La alineación
se hace mediante el estilo float y especificando right para alinear a la
derecha y left para alinear a la izquierda.
El ejercicio consiste en añadir una imagen a un párrafo de texto y alinearla
a la derecha y posteriormente hacer lo mismo, pero alineándola a la
izquierda. El código fuente es el siguiente:
HTML & CSS
Utilizando imágenes
Time
of Software es un blog relacionado con el desarrollo de Software
Time
of Software es un blog relacionado con el desarrollo de Software
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este séptimo objetivo has adquirido los siguientes conocimientos:
Inclusión de imágenes en ficheros HTML.
Utilización de texto alternativo a imágenes.
Modificación del alto y ancho de las imágenes.
Alineación de imágenes respecto al texto.
OBJETIVO 8: LINKS
El octavo objetivo del libro consiste en aprender a manejar links (o enlaces)
en los ficheros HTML.
El objetivo está compuesto por una única fase en la que aprenderás a
manejar los links y a realizar ciertas modificaciones sobre los mismos.
Conceptos teóricos
Los links son elementos HTML que te van a permitir abrir nuevas páginas
webs a partir de los clics que se hacen en ellos. La apertura de la página
web incluida en el link puede realizarse en la misma pestaña en la que se
encuentra el link, cerrando la página actual y abriendo la nueva, o también
puede abrir la página en una nueva pestaña.
FASE 1
El primer ejercicio consiste en aprender a utilizar links en las páginas
HTML mediante el elemento HTML a. El elemento sigue el siguiente
formato:
Texto
Veamos en detalle cada elemento:
Dirección: es la dirección de la página web a la que se irá el link al
hacer clic sobre él.
Texto: texto que se muestra y sobre el que se hace clic para ir a la
dirección del link.
El código fuente del ejercicio es el siguiente:
HTML & CSS
Links
Blog de Time of Software
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en aprender a abrir el link en una
nueva pestaña o en la misma. Esto se especifica mediante el atributo target
y puede contener los siguientes valores:
_blank: el link se abrirá en una nueva pestaña.
_self: el link se abrirá en la misma pestaña. Es el valor por defecto si
no se incluye el atributo en el elemento a.
El código fuente del ejercicio es el siguiente:
HTML & CSS
Links
Blog de Time of Software en nueva pestaña
Blog de Time of Software en misma pestaña
El navegador mostrará la siguiente página web:
En el tercer ejercicio vas a aprender a utilizar imágenes como links en lugar
de texto. La forma de introducir imágenes es añadiendo el elemento img en
donde hemos establecido el texto del link anteriormente.
El ejercicio consiste únicamente en añadir una imagen como link. El código
fuente es el siguiente:
HTML & CSS
Links en imágenes
El navegador mostrará la siguiente página web:
En el cuarto y último ejercicio vas a aprender a modificar ciertos
parámetros de los links mediante estilos. Los links pueden tener 4 estados
diferentes:
Link no visitado: se muestra en la pantalla por defecto en color azul y
subrayado.
Link visitado: se muestra en la pantalla color púrpura y subrayado.
Link activo: se muestra en la pantalla subrayado y de color rojo. Un
link activo significaque has hecho clic pero que todavía no has
soltado el clic.
Link resaltado: por defecto no hay ningún cambio en la estética del
link. Un link resaltado es cuando pasas el cursor por encima, pero sin
hacer clic.
Los estilos para cada uno de ellos se pueden cambiar utilizando las
siguiente elementos CSS:
Link no visitado mediante a:link.
Link visitado mediante a:visited.
Link activo mediante a:active.
Link resaltado mediante a:hover.
En el ejercicio también vas a aprender a utilizar un nuevo estilo: text-
decoration. El estilo permite los siguientes valores:
overline: añade una línea en la parte superior del texto.
line-through: tacha el texto.
underline: añade una línea en la parte inferior del texto (subrayado).
underline overline: añade una línea en la parte inferior y en la parte
superior del texto.
El ejercicio consiste en modificar los estilos para cada uno de los posibles
estados de los links. El código fuente es el siguiente:
HTML
HTML & CSS
Links
Blog de Time of Software en nueva pestaña
CSS
a:link {
color: purple;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: lightgreen;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: green;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este octavo objetivo has adquirido los siguientes conocimientos:
Inclusión de links en HTML.
Control de la apertura en pestaña de los links.
Utilización de imágenes como links.
Modificación de estilos en links.
OBJETIVO 9: LISTAS
El noveno objetivo del libro consiste en aprender a utilizar diferentes tipos
de listas de elementos en HTML.
El objetivo está compuesto por una única fase en la que aprenderás a
utilizar listas ordenadas, listas no ordenadas, listas de definiciones y listas
dentro de otras listas.
Conceptos teóricos
Las listas en HTML son un conjunto de elementos, ordenados o no, que
permite representar elementos mediante un listado en el que todos estarán
precedidos, generalmente, por un guión/punto o número.
En HTML existen tres tipos diferentes de listas:
Lista ordenada: lista en la que los elementos se encuentran listados
de forma ordenada. El tipo de identificador/marcador del orden se
puede especificar en la definición de la lista.
Lista no ordenada: lista en la que los elementos son mostrados sin
seguir un orden. El marcador que precede a cada elemento se puede
especificar en la definición de la lista.
Lista de definiciones: lista que sigue la estructura de definición y
valor (como si fuera un diccionario).
FASE 1
En el primer ejercicio de la fase vas a aprender a crear listas ordenadas y no
ordenadas.
La definición de una lista ordenada se hace utilizando la etiqueta HTML ol
junto con elementos HTML li dentro del elemento ol. Veamos un ejemplo:
Elemento 1
Elemento 2
La definición de una lista no ordenada se hace utilizando la etiqueta HTML
ul junto con elementos HTML li dentro del elemento ul. Veamos un
ejemplo:
Elemento 1
Elemento 2
El ejercicio consiste únicamente en definir una lista de cada tipo. El código
fuente es el siguiente:
HTML & CSS
Listas
Lista ordenada:
Abrir el envase.
Introducir en el microondas y calentar durante 3 minutos.
Servir en un plato y presentar al gusto.
Lista no ordenada:
Verde
Blanco
Negro
El navegador mostrará la siguiente página web:
En el segundo ejercicio de la fase vas a aprender a modificar el estilo de los
marcadores de una lista no ordenada. Para ello se utiliza el estilo list-style-
type en el elemento ul. Los diferentes valores que puede tomar el estilo son:
disc: el marcador de la lista es un punto. Es el valor por defecto.
circle: el marcador de lista es un círculo.
square: el marcador de lista es un cuadrado.
none: no se muestra ningún marcador de lista.
El segundo ejercicio de la fase consiste en modificar el marcador de una
lista no ordenada estableciendo el valor a square. El código fuente es el
siguiente:
HTML & CSS
Listas
Lista no ordenada:
Verde
Blanco
Negro
El navegador mostrará la siguiente página web:
En el tercer ejercicio de la fase vas a aprender a modificar los marcadores
de las listas ordenadas. Para ello se utiliza el atributo type del elemento ol.
Los diferentes valores que puede tomar son los siguientes:
1: el marcador son números decimales. Es el valor por defecto.
A: el marcador son letras en mayúsculas.
a: el marcador son letras en minúsculas.
I: el marcador son números romanos en mayúsculas.
i: el marcador son números romanos en minúsculas.
El ejercicio consiste en modificar el marcador de una lista ordenada
estableciendo el valor de números romanos en minúsculas. El código fuente
es el siguiente:
HTML & CSS
Listas
Lista ordenada:
Abrir el envase.
Introducir en el microondas y calentar durante 3 minutos.
Servir en un plato y presentar al gusto.
El navegador mostrará la siguiente página web:
En el cuarto ejercicio de la fase vas a aprender a utilizar listas de
definiciones. Una lista de definiciones se define de la siguiente forma:
Término 1
Definición 1
Término 2
Definición 2
Veamos los elementos que componen las listas de definiciones. El elemento
dl define una lista de definiciones, el elemento dt define un término y el
elemento dd define una definición para el término asociado. Fíjate que la
forma de definirla es primero el término, después la definición, después otro
término, después otra definición, etc.
El ejercicio consiste en definir una lista de definiciones. El código fuente es
el siguiente:
HTML & CSS
Listas
CV:
Lenguajes:
HTML, CSS, Javascript, Python, C#
IDEs:
Brackets, Visual Studio
Bases de datos:
SQL Server, MySQL, Oracle
El navegador mostrará la siguiente página web:
En el quinto ejercicio de la fase vas a aprender a utilizar listas anidadas, es
decir, dentro de los elementos de la lista que tengas otras listas como
elementos de la misma. A continuación te mostramos un pequeño ejemplo:
La lista es un ejemplo conceptual para que entiendas cómo se anidan listas.
Dentro de un elemento, en lugar de introducir texto tal y como hemos hecho
en los ejercicios anteriores, debes de introducir una nueva definición de una
lista. ¡Así de simple! Es posible definir tantos niveles de anidación como
quieras, por ejemplo, dentro de Elemento1_2 puedes definir otra lista si así
lo deseas.
El ejercicioconsiste en modificar la lista del ejercicio anterior cambiando el
contenido en texto por una nueva lista. El código fuente es el siguiente:
HTML & CSS
Listas
CV:
Lenguajes:
HTML
CSS
Javascript
Python
C#
IDEs:
Brackets
Visual Studio
Bases de datos:
SQLServer
MySQL
Oracle
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este noveno objetivo has adquirido los siguientes conocimientos:
Utilización de listas ordenadas, no ordenadas y listas de definiciones.
Modificación de los marcadores de las listas ordenadas y no
ordenadas.
Anidación de listas.
OBJETIVO 10: TABLAS
El décimo objetivo del libro consiste en aprender a manejar tablas en
HTML.
El objetivo está compuesto por dos fases. En la primera fase vamos a
explicarte cómo utilizar tablas en HTML y en la segunda fase vamos a
explicarte cómo aplicar estilos a las tablas.
Conceptos teóricos
Una tabla en HTML no es otra cosa que una estructura para representar
datos en filas y columnas. En otras palabras, una tabla es un conjunto de
filas en la que cada una tiene un número concreto de columnas.
Conceptualmente una tabla se representa de la siguiente forma:
Texto
Texto
Texto
Texto
Tal y como puedes ver dentro de la tabla, se definen todas las filas y dentro
de cada fila se definen cada una de las columnas junto con su contenido.
La tabla resultando de la definición conceptual está compuesta por dos filas
con dos columnas cada una de ella. Visualmente sería así:
Las tablas pueden tener filas o columnas de encabezado, o ambas a la vez.
La función que tienen no es otra que organizar y categorizar el resto de
celdas que componen la tabla. Si añadimos a la tabla conceptual los
encabezados quedaría tal que así:
Otra de las operaciones más comunes que se realizan con las tablas es la
unificación de celdas, que no es otra cosa que combinar o fusionar dos o
más celdas en una única celda resultante. La unificación puede darse entre
celdas de la misma fila (unificación horizontal) o celdas de la misma
columna (unificación vertical), pero todas deben ser adyacentes. Veamos un
ejemplo extendiendo la definición conceptual de las tablas:
FASE 1: Tablas
En el primer ejercicio de la fase vas a aprender a definir una tabla.
Partiendo de la representación conceptual del apartado teórico, una tabla se
representa en HTML de la siguiente forma:
Texto
Texto
Texto
Texto
Veamos los elementos HTML que componen una tabla. El elemento para
definir tablas es table, el elemento para definir cada una de las filas de una
tabla es tr y el elemento para definir cada una de las columnas que tiene una
tabla es td.
El primer ejercicio consiste únicamente en definir una tabla que tiene tres
filas y tres columnas. El código fuente es el siguiente:
HTML & CSS
Tablas
Fila 1, Columna 1
Fila 1, Columna 2
Fila 1, Columna 3
Fila 2, Columna 1
Fila 2, Columna 2
Fila 2, Columna 3
Fila 3, Columna 1
Fila 3, Columna 2
Fila 3, Columna 3
El navegador mostrará la siguiente página web:
En el segundo ejercicio de la fase vas a aprender a establecer unas
cabeceras para las columnas de la tabla. La forma de añadir unas cabeceras
a las columnas es muy simple, únicamente hay que añadir el siguiente
elemento como primer elemento en la definición de la tabla:
Cabecera1
Cabecera2
Fíjate que las cabeceras se especifican con el elemento HTML th y
mediante el atributo scope le especificamos que son de tipo columna (col).
Tienes que tener en cuenta que debes de definir tantas cabeceras como
columnas tenga tu tabla.
El segundo ejercicio consiste en añadir unas cabeceras a las columnas de
una tabla compuesta por tres filas y dos columnas. El código fuente es el
siguiente:
HTML & CSS
Tablas
Ciudad
Gentilicio
Madrid
Madrileños
Badajoz
Pacenses
Albacete
Albaceteños
El navegador mostrará la siguiente página web:
En el tercer ejercicio de la fase vas a aprender a añadir cabeceras a las filas.
Añadir cabeceras a las filas se hace utilizando la misma etiqueta HTML que
en el ejercicio anterior (th) pero estableciendo el valor row al atributo scope
(row significa fila). El lugar en el que son incluidas las cabeceras de fila es
como primera columna dentro de un elemento fila. A continuación te
mostramos un ejemplo de definición de una fila con una cabecera:
Cabecera de fila
Columna
Columna
El ejercicio consiste en modificar la tabla del ejercicio anterior para mostrar
la misma información, pero mostrando cabeceras de fila en lugar de
cabeceras de columnas. El código fuente es el siguiente:
HTML & CSS
Tablas
Ciudad
Madrid
Badajoz
Albacete
Gentilicio
Madrileños
Pacenses
Albaceteños
El navegador mostrará la siguiente página web:
El cuarto ejercicio de la fase consiste es definir una tabla con cabeceras
tanto en las columnas como en las filas. En el ejercicio, la cabecera de la
primera fila la hemos dejado en blanco, pero fíjate que es necesario
introducir un elemento cabecera de columna vacío. El código fuente es el
siguiente:
HTML & CSS
Tablas
España
Inglaterra
Estados Unidos
Gentilicio
Español
Inglés
Estadounidense
CapitalMadrid
Londres
Washington D. C.
Moneda
Euro
Dolar
Libra
El navegador mostrará la siguiente página web:
FASE 2: Aplicando estilos a tablas
La segunda fase del objetivo consiste en aprender a aplicar diversos estilos
a las tablas en HTML y también en aprender otra serie de características
que incluyen las tablas.
En el primer ejercicio de la fase vas a aprender a aplicar los estilos para el
borde de la tabla y a unificar celdas. Para unificar celdas horizontalmente se
utiliza un atributo del elemento td que se llama colspan y cuyo valor es el
número de columnas que quieres que el elemento ocupe. Tienes que prestar
atención para que el número total de columnas que tiene la fila no sobrepase
el total de la tabla, es decir, si la fila tiene tres columnas y añades una que
ocupa tres columnas no podrás añadir más o la tabla quedará totalmente
descuadrada.
El ejercicio consiste en definir un estilo general para la tabla en el que se
especifica que la tabla no tiene borde y otro estilo para los elementos td y th
en el que se define un borde simple, además de realizar unificaciones de
celdas horizontales. El código fuente del ejercicio es el siguiente:
CSS
table {
border: none;
border-collapse: collapse;
}
td, th {
text-align: center;
border: 1px solid #999;
}
HTML
HTML & CSS
Tablas
17:00
18:00
19:00
Sala 1
Zumba
Pilates
Yoga
Sala 2
Kick boxing
Judo
Piscina
Clases de natación
El navegador mostrará la siguiente página web:
En el segundo ejercicio de la fase vas a aprender a unificar celdas de forma
vertical. Para unificar celdas verticalmente se utiliza un atributo de td que se
llama rowspan y cuyo valor es el número de filas que quieres que ocupe el
elemento. La unificación vertical de celdas funciona de forma diferente a la
unificación horizontal, básicamente en la horizontal todo ocurre dentro de la
misma fila y en la vertical a través de todas las filas afectadas por la
unificación, en el ejercicio que haremos a continuación entenderás a lo que
nos referimos.
El ejercicio consiste en darle la vuelta al ejercicio anterior, es decir, donde
antes había filas ahora habrá columnas y al revés. El código fuente es el
siguiente:
CSS
table {
border: none;
border-collapse: collapse;
}
td, th {
text-align: center;
border: 1px solid #999;
}
HTML
HTML & CSS
Tablas
Sala 1
Sala 2
Piscina
17:00
Zumba
Kick boxing
Clases de natación
18:00
Pilates
19:00
Yoga
Judo
Revisado el código podrás comprobar, en la definición de la primera fila, lo
siguiente:
La segunda columna es una unificación de dos celdas de forma
vertical (rowspan="2"). La llamaremos unificación vertical primera.
La tercera columna es una unificación de tres celdas de forma vertical
(rowspan="3"). La llamaremos unificación vertical segunda.
¿Qué implican estas definiciones de unificaciones?
1. La segunda fila de la tabla contendrá únicamente un elemento en la
definición y ocupará la primera celda. Esto se debe a que la segunda
celda está ocupada por la unificación vertical primera y la tercera
celda está ocupada por la unificación vertical segunda.
2. La tercera fila de la tabla contendrá dos elementos en la definición y
ocupará la primera y la segunda celda. La tercera celda estará
ocupada por la unificación vertical segunda.
Tienes que tener mucho cuidado en cómo defines unificaciones de celdas
para que no se superpongan celdas por una definición incorrecta de la tabla.
El navegador mostrará la siguiente página web para el ejercicio:
En el tercer ejercicio de la fase vas a seguir aplicando estilos a los bordes de
la tabla. El ejercicio consiste en especificar un borde un poco más grueso de
lo normal para la tabla, especificándolo en el CSS para table, y en poner un
borde fino a las cabeceras, especificándolo como una clase llamada toprow
de th. El código fuente es el siguiente:
CSS
th.toprow {
border-bottom: 1px solid black;
}
table.borders{
border-top: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
}
HTML
HTML & CSS
Tablas
Sala 1
Sala 2
Piscina
17:00
Zumba
Kick boxing
Clases de natación
18:00
Pilates
19:00
Yoga
Judo
El navegador mostrará la siguiente página web:
En el cuarto ejercicio de la fase vas a aprender a definir un color de fondo
para las celdas de la tabla. Tomando como base el primer ejercicio del
objetivo vas a añadir una serie de estilos y en el estilo referente al elemento
td vas a definir el color de fondo a gris. El código fuente es el siguiente:
CSS
table {
border: 2px solid black;
border-collapse: collapse;
}
td {
text-align: center;
border: 1px solid black;
padding: .5em;
background-color: darkgrey;
font-style: italic;
}
HTML
HTML & CSS
Tablas
Fila 1, Columna 1
Fila 1, Columna 2
Fila 1, Columna 3
Fila 2, Columna 1
Fila 2, Columna 2
Fila 2, Columna 3
Fila 3, Columna 1
Fila 3, Columna 2
Fila 3, Columna 3
El navegador mostrará la siguiente página web:
Elquinto ejercicio de la fase consiste en aplicar únicamente fondo de color
gris a unas filas concretas de la tabla. Para ello vas a definir un estilo de
clase genérico llamado rowgrey que establece el color del fondo a gris y lo
añadirás como clase a aquellas filas que quieres mostrar. El código fuente es
el siguiente:
CSS
table {
border: 2px solid black;
border-collapse: collapse;
}
td {
text-align: center;
border: 1px solid black;
padding: .5em;
font-style: italic;
}
.rowgrey
{
background-color: darkgrey;
}
HTML
HTML & CSS
Tablas
Fila 1, Columna 1
Fila 1, Columna 2
Fila 1, Columna 3
Fila 2, Columna 1
Fila 2, Columna 2
Fila 2, Columna 3
Fila 3, Columna 1
Fila 3, Columna 2
Fila 3, Columna 3
El navegador mostrará la siguiente página web:
El sexto ejercicio de la fase consiste en aplicar padding a los elementos que
componen la tabla para mejorar su aspecto visual. A su vez, vas a
especificar mediante estilos el ancho de cada columna para que cada
columna ocupe exactamente lo mismo. Para ello, el estilo que tienes que
definir para los elementos de la tabla es width y lo establecerás a un valor
de 25%. Al tener cuatro columnas el ejercicio, si quieres que ocupen todas
lo mismo, tendrás que establecer el valor de 25%.
El código fuente es el siguiente:
CSS
th.toprow {
border-bottom: 1px solid black;
}
table.borders{
border-top: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
}
th,td
{
padding: 1em 0.5em 1em 0.5em;
width: 25%;
}
HTML
HTML & CSS
Tablas
Sala 1
Sala 2
Piscina
17:00
Zumba
Kick boxing
Clases de natación
18:00
Pilates
19:00
Yoga
Judo
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este décimo objetivo has adquirido los siguientes conocimientos:
Utilización de tablas.
Utilización de cabeceras en las tablas.
Unificación de celdas de la tabla.
Aplicación de estilos a las tablas.
OBJETIVO 11: IDS
El undécimo objetivo consiste en aprender a definir y utilizar selectores
CSS por id. El objetivo está compuesto por una única fase en la que
aprenderás a utilizarlos.
FASE 1
En esta primera y única fase del objetivo vas a aprender a manejar los
selectores por id que existen en CSS.
Los selectores por id y los selectores por clase son muy parecidos, su
definición es idéntica, cambiando un carácter en su definición, pero su uso
es completamente diferente. La gran diferencia en uso es que los estilos
definidos mediante un identificador únicamente pueden ser utilizados una
vez dentro de toda la página web.
Tal y como te explicamos en el objetivo número cinco, los selectores por
identificador pueden ser generales (aplican a todos los elementos de la
página web) o estar ligados a una etiqueta/elemento HTML (aplican sólo a
ese tipo de elemento).
La forma de crear selectores mediante identificador en CSS es la siguiente:
ElementoHTML#NombreIdentificador
{
EspecificaciónCSS;
}
Veamos cada uno de sus elementos:
ElementoHTML: elemento opcional que únicamente existe para los
identificadores ligados a una etiqueta/elemento HTML.
NombreIdentificador: nombre que tendrá el identificador y que se
tendrá que utilizar para aplicar el estilo al elemento.
EspecificaciónCSS: especificación CSS para el identificador.
Te habrás dado cuenta que la diferencia entre la definición de clases e
identificadores está en que para las clases se utiliza el carácter punto y para
los identificadores se utiliza el carácter almohadilla.
La forma de utilizar el identificador en los elementos HTML es mediante la
propiedad id de la siguiente manera:
id=”NombreIdentificador”
El nombre del identificador tiene que coincidir con el nombre del
identificador definido en el fichero CSS.
En el primer ejercicio de la fase vas a definir un identificador ligado al
elemento HTML p y vas a utilizarlo para especificar el estilo del mismo. El
código fuente es el siguiente:
CSS
p {
font-family:Comic Sans MS;
}
p#important {
font-family:Comic Sans MS;
font-size: 1.5em;
}
p.not_important {
font-family:Comic Sans MS;
font-size: 0.7em;
}
HTML
HTML & CSS
IDs
No importante
Normal
Importante
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en definir un identificador general
para toda la página web dentro de la cabecera del fichero HTML. El código
fuente es el siguiente:
HTML & CSS
#special
{
font-size: 3em;
font-style: italic;
}
Lenguajes de programación
Los lenguajes de programación que conozco son los siguientes.
C#
Aprendí C# hace 15 años y lo uso todo los días en mi trabajo.
Python
Aprendí Python hace 10 años y lo uso para tareas de investigación.
Java
Aprendí Java hace 12 años y lo uso para estudiar.
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este undécimo objetivo has adquirido los siguientes conocimientos:
Utilización de selectores por identificador.
OBJETIVO 12: BLOCK VS INLINE
El duodécimo objetivo consiste en aprender la diferencia que existe entre
elementos de bloque y elementos de línea en HTML.
El objetivo está compuesto por dos fases. En la primera aprenderás a
utilizar elemento de línea y en la segunda aprenderás a utilizar elementos de
bloque.
Conceptos teóricos
Los elementos HTML se pueden clasificar en dos categorías:
Elemento de bloque (block): elemento que ocupa toda una línea. Un
elemento de bloque siempre comienza una nueva línea y puede
contener otros elementos de bloque o elementos de línea.
Elemento de línea (inline): elemento que se encuentra única y
exclusivamente dentro de una línea. Los elementos de línea están
delimitados por las etiquetas que lo definen y pueden contener otros
elementos de línea dentro de ellos.
FASE 1: span
En la primera fase del objetivo vas a aprender a manejar el elemento HTML
inline span para hacer pequeñas modificaciones de estilo dentro de otros
elementos HTML de bloque como h1 o blockquote.
La forma de utilizar span es la siguiente:
Texto
El estilo que definas dentro del atributo stylese aplicará a Texto. Otros
atributos que suelen utilizarse con span son el atributo class e id.
El primer y único ejercicio consiste en realizar una serie de modificaciones
de estilos en porciones de texto dentro de un elemento de bloque. El código
fuente del ejercicio es el siguiente:
HTML & CSS
PRACTICANDO SPAN
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y
galgo corredor.
El navegador mostrará la siguiente página web:
FASE 2: div
En la segunda fase del objetivo vas a aprender a manejar el elemento
HTML de bloque div. El elemento te va a permitir realizar divisiones dentro
del propio elemento HTML que te serán muy útiles a la hora de aplicar
estilos para todos los elementos que contiene. Básicamente, div es un
contenedor de elementos.
ElementosHTML
El estilo definido por la clase de CSS será aplicado a todos los elementos
que están contenidos dentro del elemento HTML div. Otros atributos que
también suelen usarse son el atributo style e id.
El ejercicio consiste en definir dos clases CSS y un identificador CSS que
aplican estilos diferentes junto con tres divisiones dentro de HTML para
aplicar dichas clases/identificador. El código fuente es el siguiente:
HTML & CSS
.setgreen
{
color:green;
}
.setblue
{
color:blue;
}
#important
{
font-size: 1.5em;
font-weight: bold;
}
Lenguajes de programación
Los lenguajes de programación que conozco son los siguientes.
C#
Aprendí C# hace 15 años y lo uso todo los días en mi trabajo.
Python
Aprendí Python hace 10 años y lo uso para tareas de investigación.
Java
Aprendí Java hace 12 años y lo uso para estudiar.
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este duodécimo objetivo has adquirido los siguientes conocimientos:
Elementos inline y block.
Utilización del elemento span,
Utilización del elemento div.
OBJETIVO 13: FORMS
El decimotercer objetivo consiste en aprender a manejar diferentes tipos de
formularios mediante los cuales vas a ser capaz de introducir información
en las páginas web.
El objetivo está compuesto por siete fases diferentes mediante las cuales vas
a aprender a manejar los siguientes formularios:
Entradas simples de texto en diferentes formatos.
Áreas de texto.
Botones.
Selección de valores.
Selección de múltiples valores.
Selección de elementos de una lista.
Para un correcto funcionamiento de los formularios es necesario que exista
un código fuente que se encargue de procesar la introducción de la
información por parte de los usuarios, pero esta parte se encuentra fuera del
ámbito del libro, por tanto, nos centraremos únicamente en aprender a
definir formularios y ver todos los tipos de formularios que se pueden crear.
Conceptos teóricos
Un formulario es un elemento HTML que permite recoger información de
los usuarios de la página web. Los formularios se crean con el elemento
HTML form y dentro de él se especifican los elementos por los que está
compuesto tal y como te mostramos a continuación:
ElementosDelFormulario
Los elementos del formulario se utilizan para recoger, de diferentes formas,
la información introducida por los usuarios de la página web. Los
elementos del formulario normalmente se conocen con el nombre de
controles, y los hay de diferentes tipos, entre ellos:
Introducción de texto.
Introducción de contraseñas.
Subida de ficheros.
Introducción de fechas.
Etc.
FASE 1: Text input
En la primera fase del objetivo vas a aprender a crear un formulario
compuesto por un elemento de introducción de texto.
El elemento de introducción de texto se especifica con el elemento HTML
input de la siguiente forma:
En el atributo type se especifica el tipo de entrada de texto que se utilizará.
En éste primer ejercicio será text. En el atributo name se especifica el
nombre que se le quiere dar al elemento.
En el ejercicio también vamos a utilizar los siguientes atributos:
size: especifica el tamaño del elemento input.
maxlenght: especifica el número máximo de caracteres que pueden
introducirse.
El primer ejercicio de la fase consiste en crear un formulario para solicitar
el nombre a la persona que utiliza la página web. El código fuente es el
siguiente:
HTML & CSS
Text input
Nombre:
El navegador mostrará la siguiente página web:
En el segundo ejercicio de la fase vas a aprender a manejar un tipo de input
que te permite introducir contraseñas sin que se vea el texto que se
introduce. La forma de especificar el elemento es igual que la del ejercicio
anterior, pero estableciendo el valor password al atributo type.
El segundo ejercicio de la fase consiste en crear un formulario para
introducir nombre y contraseña. El código fuente es el siguiente:
HTML & CSS
Text input
Usuario:
Contraseña:
El navegador mostrará la siguiente página web:
FASE 2: Text área
En la segunda fase del objetivo vas a aprender a manejar el formulario de
área de texto mediante el cual se pueden introducir textos que ocupan más
de una línea. Para crear formularios multilínea lo harás utilizando el
elemento HTML textarea de la siguiente forma:
Mediante los atributos rows y cols podrás especificar el número de filas y
de columnas (caracteres por fila) que quieres que tenga el elemento.
En el primer y único ejercicio de la fase vas a simular un formulario de
contacto en una página web, donde hay un elemento para introducir el email
y otro (en este caso el área de texto) para introducir el texto a enviar. El
código fuente es el siguiente:
HTML & CSS
Text area
Email:
Message:
El navegador mostrará la siguiente página web:
FASE 3: Submit
En la tercera fase del objetivo vas a aprender a utilizar el formulario para
enviar información mediante un botón. El elemento HTML que se utiliza es
input y se hace especificando submit en el tipo tal y como se muestra a
continuación:
En el atributo value tienes que introducir el texto que quieres que se
muestre en el botón.
El primer ejercicio de la fase consiste en añadir un botón al ejercicio de la
fase anterior. El código fuente es el siguiente:
HTML & CSS
Submit
Email:
Message:
El navegador mostrará la siguiente página web:
En el segundo ejercicio de la fase vas a aprender a establecer una imagen
como botón. La forma de hacerlo es la siguiente:
El valor del atributo type será image para indicar que se trata de una
imagen. Mediante el atributo src especificarás la dirección en la que se
encuentra la imagen, tal y como aprendiste en el objetivo número siete.
Mediante los atributos width y height podrás establecer el ancho y el alto de
la imagen. Por último, puedes establecer mediante el atributo alt un texto
alternativo por si fallase la carga de la imagen.
El ejercicio consiste en sustituir el botón del ejercicio anterior por una
imagen. El código fuente es el siguiente:
HTML & CSS
Submit
Email:
Message:
El navegador mostrará la siguiente página web:
FASE 4: Radio buttons
En la cuarta fase del objetivo vas a aprender a manejar el formulario
mediante el cual puedes crear selectores, llamados normalmente radio
buttons.
Los radio buttons son elementos que permiten elegir una única opción de
un conjunto de opciones que se muestran en la pantalla. Un elemento de un
radio button se define utilizando el elemento HTML input de la siguiente
forma:
Texto
El valor del atributo type será radio. Mediante el atributo name podrás
establecer el nombre del radio button al que pertenece el elemento y con el
atributo value establecerás el valor. El texto que se mostrará junto al radio
button se establece a posteriori de la definición del elemento.
La definición de radio buttons se hace estableciéndoles a todos los
elementos que lo componen el mismo valor en el atributo name. Una buena
práctica es utilizar el atributo checked con valor true para especificar un
elemento del radio button como seleccionado por defecto. A continuación
tienes un ejemplo de radio button compuesto por cuatro elementos:
Texto1
Texto2
Texto3
Texto4
El primer y único ejercicio de la fase consiste en extender el ejercicio de la
fase anterior añadiendo un radio button. El código fuente es el siguiente:
HTML & CSS
Radio buttons
Email:
¿Cómo nos encontraste?:
Google
Facebook
Instagram
Mensaje:
El navegador mostrará la siguiente página web:
FASE 5: Checkboxes
En la quinta fase del objetivo vas a aprender a manejar el formulario para
definir selectores múltiples, llamados normalmente checkboxes.
La diferencia de los checkboxes y los radio buttons es que los checkboxes
permiten elegir más de una opción de todas las disponibles. La forma de
definirlos y de utilizarlos es la misma, únicamente tendrás que cambiar el
valor del atributo type y establecerlo a checkbox.
El primer y único ejercicio de la fase consiste en añadir un formulario de
checkboxes al ejercicio de la fase anterior. El código fuente es el siguiente:
HTML & CSS
Checkboxes
Email:
¿Cómo nos encontraste?:
Google
Facebook
Instagram
Mensaje:
¿Por qué te pones en contacto con nosotros?:
Duda
Pregunta
Colaboración
Oferta
El navegador mostrará la siguiente página web:
FASE 6: Select box
En la sexta fase del objetivo vas a aprender a manejar el formulario para
utilizar listas de selección, llamados normalmente select box.
Las listas de selección son elementos que permiten elegir uno o varios
elementos del listado de elementos que contienen. La forma de definirlos es
la siguiente:
Texto1
Texto2
Texto3
Texto4
Utilizando el elemento HTML select se define un listado que tendrá el
nombre que indique su atributo name. El elemento contendrá elementos
HTML del tipo option mediante los cuales se establecerán las diferentes
opciones que se mostrarán para elegir. Las opciones contendrán el atributo
value para establecerles el valor y el texto que se mostrará se establecerá
dentro del elemento.
El primer ejercicio de la fase consiste en añadir un elemento de caja de
selección al ejercicio de la fase anterior. El código fuente es el siguiente:
HTML & CSS
Select box
Email:
¿Cómo nos encontraste?:
Google
Facebook
Instagram
Mensaje:
¿Por qué te pones en contacto con nosotros?:
Duda
Pregunta
Colaboración
Oferta
Pais de origen:
EspañaFrancia
Inglaterra
El navegador mostrará la siguiente página web:
En el segundo ejercicio de la fase vas a aprender a utilizar las listas de
selección múltiple, es decir, listas de selección en las que vas a poder
seleccionar más de un elemento de la misma. La forma de realizarlo es
añadiendo al elemento HTML select el atributo size para indicar el tamaño
que tendrá la lista y añadir un nuevo campo a la definición del elemento,
multiple. A continuación tienes un ejemplo de definición:
ElementoDeLaLista
El segundo ejercicio de la fase consiste en definir una lista de colores
multiselección. El código fuente es el siguiente:
HTML & CSS
Select box (Múltiple)
¿Qué colores te gusta?:
Verde
Azul
Rojo
Negro
Rosa
Blanco
El navegador mostrará la siguiente página web:
FASE 7: Otros tipos de input
En la séptima fase del objetivo vas a aprender a manejar otros tipos de
entradas de información que puedes utilizar con los formularios.
A continuación te presentamos el listado de entradas que aprenderás a
utilizar en esta fase:
date: permite introducir una fecha seleccionando una fecha en un
control de fechas.
month: permite introducir un mes seleccionando una fecha en un
control de fechas.
week: permite introducir una semana seleccionando una fecha en un
control de fechas.
time: permite introducir una hora en un control específico de horas.
range: permite introducir un valor en un rango utilizando un control
específico para ello. Mediante los atributos min y max se pueden
establecer el valor mínimo y máximo del rango.
color: permite introducir un color seleccionándolo en un control
específico de colores.
number: permite introducir un número. Mediante los atributos min y
max se puede establecer los valores mínimo y máximo del número
que se introduce.
url: permite introducir una URL o dirección.
email: permite introducir un email.
tel: permite introducir un teléfono al que se le puede especificar un
patrón para el número mediante el atributo pattern.
file: permite introducir un fichero seleccionándolo mediante un
control específico de ficheros.
reset: reestablece a vacío todos los elementos del formulario.
Todos los elementos tienen en común los atributos id y name, mediante los
cuales podrás establecer un identificador y un nombre a los mismos.
El ejercicio consiste en crear un formulario con todos los elementos que
hemos descrito para que aprendas a utilizarlos. El código fuente es el
siguiente:
HTML & CSS
Otros inputs
Fecha de cumpleaños:
¿En qué mes estamos?:
¿En qué semana estamos?:
¿Qué hora es?:
Valores del 1 al 10:
Seleccionar un color:
Introduce tu número favorito:
Página web:
Email:
Teléfono:
Seleccionar un fichero:
Restablecer:
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este decimotercer objetivo has adquirido los siguientes conocimientos:
Creación de formularios.
Utilización de los siguientes elementos de los formularios:
Input
Textarea
Radio buttons
Checkbox
Select box
OBJETIVO 14: FORMS AVANZADO
El decimocuarto objetivo consiste en extender los conocimientos
aprendidos en el objetivo anterior utilizando estilos y agrupaciones de
elementos de formulario.
El objetivo está compuesto por dos fases. En la primera aprenderás a crear
agrupaciones de elementos de los formularios para mejorar la presentación
que se hace de los mismos y en el segundo aprenderás a aplicar estilos a los
formularios.
FASE 1: Agrupación de elementos
En la primera fase vas a aprender a agrupar elementos de un formulario
para que se muestren juntos en una “caja”. Para hacer esta agrupación existe
un elemento HTML que se llama fieldset. Poniendo otros elementos HTML
dentro de él, serán visualizados dentro de una “cajita” en el navegador. A su
vez es posible ponerle un título al elemento fieldset. Esto se hace utilizando
otro elemento HTML llamado legend. Veamos cómo sería:
Título
ElementoDelFormlario
Tal y como puedes ver dentro del elemento fieldset aparecerán tanto el
elemento legend (opcional) como los elementos del formulario que quieres
agrupar.
El primer y único ejercicio de la fase consiste en crear un formulario con
dos agrupaciones de elementos, una para introducir datos personales y otra
para introducir los estudios académicos. El código fuente es el siguiente:
HTML & CSS
Solicitud de información
Información personal
Nombre:
Apellidos:
Email:
Teléfono:
Información académica
Nivel de estudios:
Doctorado
Máster
Grado
FP grado medio
ESO
Introduce tus estudios:
El navegador mostrará la siguiente página web:FASE 2: Estilos
La segunda fase del objetivo consiste en aprender a aplicar estilos a los
formularios. Los estilos en los formularios son exactamente igual que los
que hemos aprendido hasta ahora, únicamente tienes que tener en cuenta
cómo se especifican estilos para diferentes tipos del elemento HTML input.
Veámoslo con una serie de ejemplos.
Si quisieras especificar un estilo para el tipo text del elemento input tendrías
que hacerlo de la siguiente forma:
input[type="text"]
{
Estilo
}
Básicamente, la forma es introduciendo entre corchetes el tipo. Si quisieras
añadir otro tipo al estilo que has definido, por ejemplo el tipo email, podrías
hacerlo de la siguiente manera:
input[type="text"], input[type="email"]
{
Estilo
}
Y así sucesivamente… incluso podrías añadir elementos que no son del tipo
input al estilo, tal y como hemos aprendido en objetivos anteriores.
Tomando como base el ejercicio de la fase 1, en el ejercicio vamos a
especificar estilos para los elementos input de tipo text, email y tel, para el
elemento textarea, estilos generales para el elemento form y finalmente
vamos a establecer un estilo al elemento legend para que se muestre
diferente. El código fuente es el siguiente:
CSS
form
{
width: 50%;
font-family: Verdana;
font-size: 1em;
}
input[type="text"], input[type="email"],input[type="tel"], textarea
{
margin-bottom: .25em;
padding: 0.25em;
font-size: 1em;
}
legend
{
font-weight: 700;
}
HTML
HTML & CSS
Solicitud de información
Información personal
Nombre:
Apellidos:
Email:
Teléfono:
Información académica
Nivel de estudios:
Doctorado
Máster
Grado
FP grado medio
ESO
Introduce tus estudios:
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este decimocuarto objetivo has adquirido los siguientes conocimientos:
Agrupación de elementos de formularios.
Aplicación de estilos a los elementos de los formularios.
OBJETIVO 15: DISEÑO DE PÁGINAS WEB
En este decimoquinto objetivo vas a aprender a diseñar páginas web HTML
utilizando una estructura o layout para páginas web.
El objetivo está compuesto por una única fase en la que irás construyendo
de forma progresiva una página web utilizando una estructura específica
para la misma.
Conceptos teóricos
El diseño de páginas web se corresponde con la parte del diseño gráfico de
los elementos visuales que componen dicha página para mejorar el aspecto
visual de los mismos y del conjunto de la página web.
La disposición de los elementos en las páginas web suelen seguir el
siguiente esquema:
Veamos los diferentes elementos:
Body: elemento que representa a la página web al completo.
Header: elemento que representa la cabecera de la página web. No lo
confundas con el elemengo HTML head.
Navigation Bar: elemento que representa el menú de navegación por
las diferentes páginas web que componen la página web.
Main: elemento principal de la página web que contiene dos
elementos dentro de él:
Content: elemento principal donde se muestra el contenido de
la página web.
Sidebar: elemento opcional para mostrar información o
anuncios.
Footer: elemento final de la página web que contiene información de
contacto normalmente.
Durante muchos años la estructura de las páginas web se definía utilizando
tablas, al fin y al cabo, la estructura que te acabamos de explicar está
compuesta por diferentes tablas y columnas. El cambio en la definición de
la estructura de las páginas web vino con la aparición de CSS. Esto cambió
totalmente la forma de realizar los diseños, dejando atrás la definición de la
estructura mediante tablas por la definición de la estructura mediante CSS.
CSS proporcionó muchas mejoras a la hora de definir el diseño de las
páginas, entre ellas:
Mantenimiento: CSS es mucho más fácil de mantener en lo
referente al diseño de la página web que si utilizas tablas.
Accesibilidad: el diseño utilizando CSS permite adaptar las páginas
web de forma más sencilla que con tablas para que puedan ser
utilizadas por personas con discapacidades visuales.
Velocidad: simplemente por el tamaño de la página web (líneas de
código) la carga de las páginas web por los navegadores será más
rápida si el diseño está hecho con CSS en lugar de con tablas.
Semántica: las tablas no fueron creadas en HTML para crear una
estructura completa de página web, se crearon para poder mostrar
datos que se estructuran por filas y columnas. Utilizar tablas para el
diseño es utilizar algo con un fin diferente para el que se creó.
Resumiendo, lo que empezó como diseño basado en tablas con el paso del
tiempo dio paso a estructuras creadas únicamente utilizando CSS.
Por último, queremos que tengas claro que crear diseños de páginas web
utilizando CSS no es tarea sencilla, en muchas ocasiones encontrarás retos
difíciles, pero los resolverás mejor utilizando CSS que tablas.
FASE 1: Construyendo el layout
En el primer ejercicio de la fase vas a realizar tu primer diseño de una
página web con cuatro de los elementos explicados en el apartado anterior:
Body
Header
Content
Footer
El elemento Body estará definido de la siguiente forma:
body {
margin: 10px auto;
}
En la definición de los estilos del elemento Body se utiliza una nueva
propiedad CSS que ya explicamos teóricamente en el objetivo número
cinco: margin. Mediante dicha propiedad vas a poder definir el margen de
los elementos con respecto a los elementos que le rodean.
Al igual que la propiedad padding, margin puede definirse de forma
absoluta para los 4 márgenes existentes o para cada uno de ellos en
concreto:
margin-top: establece el valor respecto al borde superior.
margin-bottom: establece el valor respecto al borde inferior.
margin-left: establece el valor respecto al borde izquierdo.
margin-right: establece el valor respecto al borde derecho.
margin: establece el valor respecto a los 4 bordes estableciendo el
mismo valor para todos ellos.
La unidad más utilizada a la hora de establecer los márgenes es el píxel
(px).
La definición de los estilos para Body está estableciendo un valor para el
elemento HTML margen igual para todos los elementos de la página web.
En el valor de la propiedad se ha establecido también el valor auto, que
permitirá al elemento centrarse automáticamente con el elemento que lo
tiene contenido.
Para el elemento Header crearás una clase general que contenga la
siguiente definición:
.headsec {
font-size:40px;
color:#009900;
font-weight:bold;
}
Para Header se establecen en los estilos el tamaño de la letra, el color y la
negrita del texto. El elemento que utilizarás para la cabecera lo meterás
dentro del elemento HTML header.
Para el elemento Content crearás una clase general que contenga la
siguiente definición:
.bodysec {
margin-left:20px;
}que permite visualizar páginas webs. El
navegador interpreta el código HTML en el que está escrita la página web y
la visualiza permitiendo la interacción y la navegación por ella.
Historia
Los inicios de HTML surgen en el CERN (Centro Europeo de Investigación
Nuclear) a cargo de Tim Berners-Lee intentando resolver la problemática
del acceso a la información con la que trabajaban desde cualquier ordenador
del centro o desde otras instituciones colaboradoras. Básicamente, lo que
intentaban buscar era una forma sencilla y estándar de acceder a toda la
información que tenían de forma remota. Fue justo en ese momento cuando
nació HTML.
HTML está basado en un lenguaje de marcado llamado Standard General
Markup Language (SGML), que define las reglas de etiquetado y las
estructuras que deben de tener los documentos.
Tim Berners-Lee desarrolló el sistema de forma interna en el CERN, y
junto a Robert Cailliau, compañero suyo en el CERN, presentó una
propuesta para desarrollar el sistema para Internet a la que llamaron World
Wide Web (W3).
La primera versión de HTML nació en 1989 e incluía conceptos básicos
como por ejemplo cómo insertar títulos, texto, enlaces y listas. Además,
también nació el primer navegador con capacidad de visualizar páginas
HTML, el “WorldWideWeb”. Posteriormente siguieron apareciendo más
navegadores.
En octubre de 1994, y tras numeras conversaciones entre Tim y el MIT
(Instituto de Tecnología de Massachusetts), se crear el World Wide Web
Consortium (W3C), con el objetivo de definir estándares para internet.
El proyecto W3 se empezó a extender por todo el mundo y en 1995
apareció la segunda versión de HTML, HTML 2.0, desarrollada por Internet
Engineering Task Force (IETF). Esta versión de HTML se considera la
primera versión estándar del lenguaje ya que fue definida por un organismo
oficial.
Ese mismo año, 1995, el W3C empieza a trabajar en el borrador de lo que
será HTML 3.0, que nunca llegó a ser oficial y se quedó como borrador
para siempre, probablemente porque uno de los principales objetivos que
tenían era que fuese compatible con todo lo que se había creado hasta
entonces, algo bastante más teórico que práctico.
En enero de 1997 la versión HTML 3.2 ve la luz y se convierte en la
primera versión de HTML ampliamente extendida y utilizada en la red. El
gran éxito de la versión 3.2 respecto a la versión 3.0 es que dejó de lado
muchos aspectos teóricos y se centró en ser una versión más práctica. El
gran problema de la versión 3.2 es que dejó muchos aspectos del lenguaje
abiertos y derivó en una lucha entre los diferentes fabricantes de
navegadores para extender el lenguaje con elementos no estándares.
La W3C intentó poner orden respecto a los desarrollos de navegadores
realizando la publicación de HTML 4.0 en 1998 y HTML 4.01 en 1999. La
versión 4.01 fue el inicio de la separación entre la estructura del documento
y la representación visual, creando así un nuevo lenguaje llamado CSS. La
versión 4.01 es la versión más longeva del estándar.
En el año 2004 y estando la W3C inmersa de nuevo en trabajos teóricos, un
grupo de personas creó un grupo paralelo denominado Web Hypertext
Application Technology Working Group (WHATWG) y empezaron a trabajar
en HTML5, algunos los consideraron disidentes y otros oportunistas. Según
ellos, W3C siempre ha tenido unos procesos de estandarización muy largos
y no alineados a las necesidades del mercado. Los objetivos principales de
HTML5 eran los siguientes:
Compatibilidad con todo lo ya creado.
Absorción de todas las funcionalidades que los fabricantes de
navegadores habían desarrollado por su cuenta.
En 2007 la W3C aparcó todos sus trabajos teóricos y empezó a trabajar en
la estandarización de HTML5, incluyendo los trabajos realizados por
WHATWG. En octubre de 2014 el estándar HTML5 es publicado y se
empieza a trabajar en lo que será HTML 5.1, siendo actualmente un
borrador no estandarizado.
Sintaxis
HTML es un lenguaje de marcado que se basa en etiquetas para la
definición de los diferentes elementos que componen la página web.
¿Cómo funcionan los lenguajes de marcado? La mejor forma de
explicártelo es mediante un ejemplo práctico. Supongamos que tenemos un
elemento llamado elemento y que queremos utilizarlo dentro de la página
web, lo haríamos de la siguiente forma:
Contenido
Veámoslo en detalle:
El tipo de elemento que estamos definiendo vendrá identificado por
el nombre del mismo, es decir, por NombreElemento.
Todos los elementos se definen entre los símbolos menor que “”,
Para indicar el comienzo de un elemento basta con añadir su nombre
entre los símbolos menor que y mayor que: .
Para indicar el fin de un elemento basta con añadir su nombre
precedido de una barra invertida al principio y entre los símbolos
menor que y mayor que: .
Existe la posibilidad de utilizar elementos sin necesidad de utilizar una
etiqueta para apertura y otra para el cierre. La forma de utilizar estos
elementos es añadiendo la barra invertida justo antes del símbolo mayor
que. A continuación te mostramos un ejemplo:
HTML posee elementos/etiquetas para multitud de cosas, por ejemplo, para
poner en negrita un texto, para añadir una lista o una tabla, etc. Aprenderlo
es simple, lo primero es conocer la estructura básica de un documento
HTML y lo segundo es aprender qué etiqueta se corresponde con qué
elemento.
Una de las características que tienen los elementos HTML es que pueden
incluir atributos que aportarán cierta funcionalidad o configuración a los
elementos. La definición de los atributos se hace de la siguiente forma:
Los atributos de los elementos siguen la estructura de nombre-valor y tienen
que ser incluidos antes de la etiqueta de cierre de elemento.
La estructura de un documento HTML es muy simple, básicamente tiene
dos secciones que contienen elementos de diferentes tipos:
Sección head: es el primer elemento que te vas a encontrar en un
documento HTML. Se representa con el elemento HTML head y no
tiene representación visual directa. En la cabecera puedes encontrar
información referente a la codificación del documento, lenguaje,
scripts, estilos CSS, etc.
Sección body: es el elemento que contiene la estructura y los
elementos de la página web y se representa con el elemento HTML
body. En la sección body es donde incluirás tus elementos cuando
hagas las páginas web.
Un documento HTML se caracteriza por tener siempre la misma estructura
base, siempre comienza por el elemento HTML html y tendrá las secciones
head y body. A continuación te lo mostramos conceptualmente:
ElementosCabecera
ElementosCuerpo
CSS
CSS son las siglas de Cascading Style Sheets y hacen referencia al lenguaje
de hojas de estilos creado para controlar el aspecto visual de los
documentos HTML. La especificación de CSS está mantenida por la World
Wide Web Consortium.
CSS permite separar los contenidos de HTML de su presentación,
mejorando el acceso al contenido a la vez que dota de más flexibilidad y
control en la especificación de las características visuales. Un aspecto muy
importante de la separación es que un mismo fichero CSS se puede utilizar
para dotar del mismo aspecto visual a diferentes documentos HTML,
reduciendo el código necesario que habría que desarrollar en caso contrario.
Historia
La historia de CSS está ligada a la historia de los Standard General Markup
Language (SGML), ya que siempre se observó la necesidad de definir un
mecanismo que permitiera aplicar estilos a los documentos electrónicos.
Fue la aparición de HTML y el nacimiento de internet lo que produjo que
CSS empezara a tener la importancia que tiene ahora en nuestros días.
La primera propuesta de CSS data de 1994 y su creador fue Håkon Wium
Lie, trabajador del CERN. Su propuesta no fue la única propuesta
presentada para definir CSS,Lo único que va a hacer el elemento Content es establecer en los estilos un
margen en el lado izquierdo.
El elemento Footer estará definido de la siguiente manera:
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
En la definición de Footer se han incluido la siguientes propiedades CSS
nuevas:
bottom: establece una posición fija respecto al margen inferior del
elemento padre. En este caso establece el valor del margen inferior
del elemento. Además de botton existen otras propiedades con el
mismo funcionamiento:
top: establece una posición fija respecto al margen superior del
elemento padre.
right: establece una posición fija respecto al margen derecho
del elemento padre.
left: establece una posición fija respecto al margen izquierdo
del elemento padre.
position: establece el tipo de posicionamiento para el elemento. Los
valores posibles de posicionamiento son los siguientes:
static: los elementos se procesan en orden, tal y como aparecen
en el documento HTML. Es el valor por defecto.
relative: el elemento se posiciona en relación con su posición
normal.
absolute: el elemento se coloca en relación con el primer padre
no estático posicionado.
fixed: el elemento se coloca en relación con la ventana del
navegador.
sticky: el elemento se posiciona en función de la posición de
desplazamiento del usuario dentro de la página web.
En el fichero HTML la definición de los elementos dentro de body seguirá
el orden siguiente:
1. El primer elemento que se definirá en el fichero HTML será Header.
2. El siguiente elemento será Content.
3. Por último, el elemento Footer.
El código fuente del ejercicio es el siguiente:
CSS
.headsec {
font-size:40px;
color:#009900;
font-weight:bold;
margin-left: 10px;
}
body {
margin: 10px auto;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.bodysec {
margin-left:20px;
}
HTML
HTML & CSS
Time of Software
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en
astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
Sección footer
El navegador mostrará la siguiente página web:
En el segundo ejercicio del objetivo vas a aprender a introducir un subtítulo
en la cabecera. Para ello vas a definir una nueva clase dentro del fichero
CSS y la pondrás dentro del elemento HTML header.
El ejercicio consiste en añadir el subtítulo y también una imagen en el
elemento Footer. El código fuente es el siguiente:
CSS
.headsec {
font-size:40px;
color:#009900;
font-weight:bold;
margin-left: 10px;
}
body {
margin: 10px auto;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.bodysec {
margin-left:20px;
}
.subhead {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
HTML
HTML & CSS
Time of Software
Life runs on code!
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en
astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
El navegador mostrará la siguiente página web:
En el tercer ejercicio vas a añadir un formulario a la sección Content. El
código fuente es el siguiente:
CSS
.headsec {
font-size:40px;
color:#009900;
font-weight:bold;
margin-left: 10px;
}
body {
margin: 10px auto;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.bodysec {
margin-left:20px;
}
.subhead {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
form
{
width: 50%;
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
}
input[type="text"], input[type="email"], textarea
{
margin-bottom: .25em;
padding: 0.25em;
font-size: 1em;
}
legend
{
font-weight: 700;
}
HTML
HTML & CSS
Time of Software
Life runs on code!
Información de contacto
Nombre:
Email:
Mensaje:
El navegador mostrará la siguiente página web:
En el cuarto ejercicio de la fase vas a aprender a añadir un menú de
navegación entre diferentes páginas web.
Para el elemento Menú vas a crear una clase general que contenga la
siguiente definición:
.menu {
position: sticky;
background-color: #009900;
color:white;
margin-bottom: 10px;
overflow: scroll;
}
Básicamente lo que estás hacienda es establecer una posición para el menú
siempre visible (sticky) y que tenga un elemento para desplazarse en caso
de no caber a la hora de ir moviéndote por la página web (scroll).
Para los elementos que componen el menú, elementos HTML a
(links/enlaces), vas a definir el siguiente estilo en el CSS:
a {
float: left;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
El ejercicio consiste únicamente en añadir el menú definido al ejercicio
anterior. Elcódigo fuente es el siguiente:
CSS
.headsec {
font-size:40px;
color:#009900;
font-weight:bold;
margin-left: 10px;
}
body {
margin: 10px auto;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.bodysec {
margin-left:20px;
}
.subhead {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
form
{
width: 50%;
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
}
input[type="text"], input[type="email"], textarea
{
margin-bottom: .25em;
padding: 0.25em;
font-size: 1em;
}
legend
{
font-weight: 700;
}
.menu {
position: sticky;
background-color: #009900;
color:white;
margin-bottom: 10px;
overflow: scroll;
}
a {
float: left;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
HTML
HTML & CSS
Time of Software
Life runs on code!
Blog
Productos
Contacto
Información de contacto
Nombre:
Email:
Mensaje:
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este decimoquinto objetivo has adquirido los siguientes conocimientos:
Diseño de páginas web utilizando CSS.
Utilización de la propiedad CSS margin.
Utilización de la propiedad CSS position.
Utilización de las propiedades bottom, top, left y right.
OBJETIVO 16: SECCIÓN HEAD
En este decimosexto y último objetivo vas a aprender a añadir una serie de
elementos a la cabecera de los ficheros HTML que aportarán información a
los navegadores pero que no tienen ningún cometido más allá que ese.
FASE 1: y lang
En esta primera y única fase del objetivo vas a aprender a añadir una serie
de elementos a la cabecera del fichero HTML que van a proporcionar
información a los navegadores y buscadores en internet. A continuación te
mostramos un listado mínimo de elementos que debes de añadir a la
cabecera de las páginas HTML que escribas:
Especificar el juego de caracteres usado por la página:
Especificar una descripción de la página:
Añadir un listado de palabras claves de la página:
Especificar el auto de la página:
Especificar el lenguaje de la página: esto se hace añadiendo al
elemento head un atributo que indica el lenguaje de la página:
El ejercicio consiste en modificar la sección de la cabecera del ejercicio
anterior y añadir todas estas etiquetas. Posteriormente inspeccionaremos el
elemento utilizando una herramienta que tienen todos los navegadores web
y podrás comprobar cómo ha quedado la cabecera después de modificarla.
La cabecera quedaría de la siguiente manera:
HTML & CSS
Una vez has modificado la cabecera tienes que abrir la página web con el
navegador de vista previa dinámica de Brackets. Una vez tienes abierta la
web deberás presionar los tres puntos verticales que aparecen en la esquina
superior derecha del navegador y se desplegará el siguiente menú:
Una vez se despliega el menú tienes que entrar en “Más herramientas” y
seleccionar “Herramientas para desarrolladores”:
Una vez abras las herramientas para desarrolladores se te abrirá un panel en
el navegador junto con la página web del ejercicio. En el panel te aparecerá
algo tal que así:
Al lado de aparece un triángulo, haz un clic sobre él y se te
desplegará la sección head de la página web:
Puedes comprobar que aparecen todos los elementos que hemos incluido
antes en el código dentro de la sección head que hemos desplegado en las
herramientas para desarrolladores.
Las herramientas para desarrolladores son una funcionalidad muy útil que
tienen todos los navegadores web y que permiten inspeccionar los
elementos HTML que componen una web. Son muy útiles para comprobar
qué se muestra, qué errores hay, etc.
Ahora eres capaz de…
En este decimosexto objetivo has adquirido los siguientes conocimientos:
Establecer el lenguaje de la página HTML.
Especificar el juego de caracteres que utiliza la página HTML.
Establecer el autor de la página HTML.
Inclusión de palabras claves y descripción a la página HTML.
¡CONSEGUIDO!
¡Enhorabuena! ¡Has llegado al final del aprendizaje! Para que seas
consciente de todo lo que has aprendido en un fin de semana te hemos
preparado un resumen con los hitos que has alcanzado:
Especificación del título de la página web.
Utilización de cabeceras HTML.
Utilización de párrafos.
Utilización de saltos de línea en párrafos.
Modificación de texto mediante etiquetas.
Creación de citas textuales.
Añadir abreviaturas y sus acrónimos.
Definición de estilos de forma inline e internal.
Definición de estilos para textos y colores.
Inclusión de ficheros de estilos CSS en HTML.
Utilización de clases en ficheros CSS.
Utilización de estilos para cambiar la fuente de letra, el tamaño,
estilo, color.
Utilización de estilos para establecer la separación entre letras y
palabras.
Aplicación de estilos para establecer la alineación de texto.
Utilización de bordes en elementos HTML.
Utilización de padding (relleno) en elementos HTML.
Utilización de herencia en los estilos CSS.
Definición de estilos para conjuntos de elementos HTML a la vez
(agrupamiento).
Inclusión de imágenes en ficheros HTML.
Utilización de texto alternativo a imágenes.
Modificación del alto y ancho de las imágenes.
Alineación de imágenes respecto al texto.
Inclusión de links en HTML.
Control de la apertura en pestaña de los links.
Utilización de imágenes como links.
Modificación de estilos en links.
Utilización de listas ordenadas, no ordenadas y listas de definiciones.
Modificación de los marcadores de las listas ordenadas y no
ordenadas.
Anidación de listas.
Utilización de tablas.
Utilización de cabeceras en las tablas.
Unificación de celdas de la tabla.
Aplicación de estilos a las tablas.
Utilización de selectores por identificador.
Elementos inline y block.
Utilización del elemento span,
Utilización del elemento div.
Creación de formularios.
Utilización de los siguienteselementos de los formularios:
Input
Textarea
Radio buttons
Checkbox
Select box
Agrupación de elementos de formularios.
Aplicación de estilos a los elementos de los formularios.
Diseño de páginas web utilizando CSS.
Utilización de la propiedad CSS margin.
Utilización de la propiedad CSS position.
Utilización de las propiedades bottom, top, left y right.
Establecer el lenguaje de la página HTML.
Especificar el juego de caracteres que utiliza la página HTML.
Establecer el autor de la página HTML.
Inclusión de palabras claves y descripción a la página HTML.
ANEXOS
En el apartado de Anexos vamos a explicarte conceptos teóricos que
amplían los conocimientos adquiridos en todo el libro.
Guía de estilos de HTML
A continuación te mostramos una serie de buenas prácticas relacionadas
con el estilo del código fuente que se escribe en HTML:
Utilización del tipo de documento en todos los ficheros HTML al
comienzo de los mismos:
Añadir siempre el elemento title con el título de la página.
Añadir siempre las etiquetas html, head y body independientemente
de que un documento HTML pueda ser validado sin ellas.
Incluir siempre las etiquetas meta.
Utilización de minúsculas en los elementos HTML y en los atributos.
Poner entre comillas el valor de los atributos de los elementos
HTML.
No dejar espacios en blanco entre el nombre del atributo y su valor:
nombre=”valor”.
Cerrar todos los elementos HTML. Aunque haya elementos que no es
necesario cerrar, es una buena práctica cerrarlos igualmente.
En las imágenes especificar siempre los atributos alt, width y height.
Evitar el uso de líneas de código muy extensas (largas).
Utilizar líneas en blanco únicamente para mejorar la legibilidad del
código.
Utilizar dos espacios en blanco para indentar en lugar de una
tabulación.
Comentarios de código
Un recurso utilizado en programación para aclarar el código fuente que se
escribe es la utilización de comentarios. Los comentarios son una forma de
añadir documentación a los propios ficheros de código fuente. Los
comentarios son ignorados por el navegador, por lo que puedes introducir
todos los comentarios que desees o necesites.
Los comentarios se pueden añadir al código fuente de dos formas
diferentes:
Comentarios de una única línea: comentarios que ocupan
únicamente una línea del fichero.
Bloque de comentarios o comentario de varias líneas: son
comentarios que ocupan más de una línea del fichero. Son útiles
cuando el comentario que se quiere poner es largo o simplemente por
estética.
En HTML los comentarios se introducen de la siguiente forma:
Comentarios de línea:
Comentarios de bloque:
En CSS los comentarios se introducen de la siguiente forma:
Comentarios de línea:
/* Aquí va el comentario */
Comentarios de bloque:
/*
Comentario de la línea 1
Comentario de la línea 2
Comentario de la línea 3
*/
SOBRE LOS AUTORES Y AGRADECIMIENTOS
Este libro y todo lo que rodea a Software Developer Coach es el resultado
de muchos años dedicados a la docencia en el ámbito tecnológico. Primero
con grupos de Educación Secundaria Obligatoria y Bachillerato y
posteriormente mediante la docencia a formadores.
El trabajo de creación del método de aprendizaje, sintetización y ordenación
de toda la información teórica relacionada con HTML y CSS y elaboración
de las diferentes prácticas plasmadas en el libro son responsabilidad de las
personas que componen Software Developer Coach, Alfredo Moreno y
Sheila Córcoles, apasionados por el mundo tecnológico y por la docencia.
Queremos agradecer a nuestras familias, amigos y compañeros de trabajo el
apoyo incondicional y las aportaciones que han realizado al método de
aprendizaje de HTML y CSS que hemos desarrollado, ¡gracias por ser
nuestros conejillos de indias! Sin vosotros esto no hubiera sido posible.
Y por supuesto gracias a ti por adquirir “Aprende HTML y CSS en un fin
de semana”. Esperamos que hayas conseguido el objetivo que te propusiste
cuando compraste el libro. Habrás podido comprobar que esto es sólo el
principio, que HTML y CSS es un mundo apasionante. No tengas dudas en
ponerte en contacto con nosotros para contarnos qué tal te ha ido y cómo te
va, ¡NO ESTÁS SOLO!
MATERIAL DESCARGABLE
El código fuente de todos los ejercicios realizados en el libro puedes
descargarlo de la siguiente URL:
https://www.softwaredeveloper.coach/ejercicios-html-css/
https://www.softwaredeveloper.coach/ejercicios-html-css/
OTROS LIBROS DE LOS AUTORES
Puedes encontrar en Amazon otros libros escritos por nosotros:
Your gateway to knowledge and culture. Accessible for everyone.
Official Telegram channel
Z-Access
https://wikipedia.org/wiki/Z-Library
z-library.sk z-lib.gs z-lib.fm go-to-library.sk
This file was downloaded from Z-Library project
https://z-library.se/
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sehttps://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-library.se
https://z-library.se
https://z-library.sk/
https://z-lib.gs/
https://t.me/zlibrary_official
https://go-to-library.sk/
https://wikipedia.org/wiki/Z-Library
https://z-lib.fm/
https://go-to-library.sk/
https://z-library.sk
altre
altre
altre
altre
altre
altre
INTRODUCCIÓN
¿QUÉ NECESITO PARA EMPEZAR?
PROCESO DE APRENDIZAJE
Organización
Distribución del fin de semana
HTML
Historia
Sintaxis
CSS
Historia
Sintaxis
ENTORNO DE DESARROLLO
Instalación
Microsoft Windows
macOS
Linux
Manual de uso
Cargando los archivos descargados de los objetivos
Mi primera página weB
OBJETIVO 1: TÍTULO, CABECERAS Y PÁRRAFOS
Conceptos teóricos
Título
Cabeceras
Párrafos
FASE 1: Título y párrafos
FASE 2: Cabeceras
Ahora eres capaz de…
OBJETIVO 2: FORMATEANDO TEXTO EN HTML
Conceptos teóricos
FASE 1: Modificadores de texto
Ahora eres capaz de…
OBJETIVO 3: ESTILOS EN HTML
Conceptos teóricos
Estilos en HTML
Colores
FASE 1: Colores inline
FASE 2: Textos inline
FASE 3: Estilos internal
Ahora eres capaz de…
OBJETIVO 4: ESTILOS UTILIZANDO CSS
Conceptos teóricos
FASE 1: Añadir CSS al HTML
Ahora eres capaz de…
OBJETIVO 5: MODIFICANDO TEXTO CON CSS
Conceptos teóricos
Selectores CSS
Border / Padding / Margin
FASE 1: Texto
Fase 2: Texto y bordes/padding
Ahora eres capaz de…
OBJETIVO 6: HERENCIA DE CSS EN HTML Y AGRUPAMIENTOS
Conceptos teóricos
Herencia en CSS
FASE 1: Herencia
FASE 2: Agrupamiento
Ahora eres capaz de…
OBJETIVO 7: IMÁGENES
Conceptos teóricos
FASE 1: Imágenes
Ahora eres capaz de…
OBJETIVO 8: LINKS
Conceptos teóricos
FASE 1
Ahora eres capaz de…
OBJETIVO 9: LISTAS
Conceptos teóricos
FASE 1
Ahora eres capaz de…
OBJETIVO 10: TABLAS
Conceptos teóricos
FASE 1: Tablas
FASE 2: Aplicando estilos a tablas
Ahora eres capaz de…
OBJETIVO 11: IDS
FASE 1
Ahora eres capaz de…
OBJETIVO 12: BLOCK VS INLINE
Conceptos teóricos
FASE 1: span
FASE 2: div
Ahora eres capaz de…
OBJETIVO 13: FORMS
Conceptos teóricos
FASE 1: Text input
FASE 2: Text área
FASE 3: Submit
FASE 4: Radio buttons
FASE 5: Checkboxes
FASE 6: Select box
FASE 7: Otros tipos de input
Ahora eres capaz de…
OBJETIVO 14: FORMS AVANZADO
FASE 1: Agrupación de elementos
FASE 2: Estilos
Ahora eres capaz de…
OBJETIVO 15: DISEÑO DE PÁGINAS WEB
Conceptos teóricos
FASE 1: Construyendo el layout
Ahora eres capaz de…
OBJETIVO 16: SECCIÓN HEAD
FASE 1: y lang
Ahora eres capaz de…
¡CONSEGUIDO!
ANEXOS
Guía de estilos de HTML
Comentarios de código
SOBRE LOS AUTORES Y AGRADECIMIENTOS
MATERIAL DESCARGABLE
OTROS LIBROS DE LOS AUTORESlas demás fueron descartadas por el W3C. La
propuesta de Håkon Wium fue añadida por el W3C al grupo de trabajo de
HTML, apostando de este modo por el desarrollo y estandarización de CSS.
En 1996 el W3C publicó la primera versión de CSS, cuyo nombre fue
CSS1.
En 1998 es publicada una segunda versión de CSS, conocida como “CSS
nivel 2”, que añadía muchas funcionalidades nuevas al lenguaje. Durante
muchos años se estuvo trabajando en una revisión de esta versión, y fue en
2011 cuando “CSS nivel 2 revisión 1” (conocida como CSS 2.1) fue
publicada. CSS 2.1 es la versión con mayor soporte por parte de todos los
navegadores web.
La siguiente evolución del lenguaje CSS es “CSS nivel 3” o “CSS 3”, de la
que se han estado publicado borradores desde 1999. La versión incluye
miles de cambios importantes en todos los niveles del lenguaje y será
mucho más avanzada y completa que “CSS 2”. Es probable que pasen
muchos años hasta que salga a la luz.
La adopción de CSS por parte de los navegadores no ha sido un camino
fácil. En el actual ecosistema de navegadores web que tenemos hoy en día
no existe ninguno con compatibilidad completa a CSS, pero si casi
completa a la versión CSS 2.1. Es por ello, y muy importante, que el
desarrollador conozca el soporte de CSS que ofrece cada navegador.
Sintaxis
La forma más sencilla de explicar la sintaxis de CSS es con un ejemplo. A
continuación te mostramos un esquema básico de estilos CSS:
Selector1
{
Propiedad1_1: Valor1_1;
Propiedad1_2: Valor1_2;
Propiedad1_3: Valor1_3;
}
Selector2
{
Propiedad2_1: Valor2_1;
Propiedad2_2: Valor2_2;
}
Veamos cada uno de sus elementos en detalle:
Regla: cada uno de los estilos que componen una hoja de estilos
CSS, es decir, cada bloque de selector/propiedades/valores.
Selector: indica el elemento o elementos HTML a los que se aplica
cada regla.
Declaración: conjunto de estilos que se aplican al selector, es decir,
todas las propiedades y valores que se encuentran dentro de los
corchetes.
Propiedad: característica que se modifica para el elemento.
Valor: valor que se establece para la propiedad del elemento.
En la práctica, un fichero CSS puede contener tantas reglas como queramos
incluirle y cada regla puede tener tantas propiedades/valores como
necesitemos.
ENTORNO DE DESARROLLO
En este capítulo te explicaremos el entorno de desarrollo que vamos a
utilizar durante la realización de todos los objetivos del libro.
Realmente no existe un entorno de desarrollo especifico para HTML y CSS,
casi todos los entornos de desarrollo actuales dan soporte a dichos lenguajes
y podrías utilizar el que tú quisieras. Nosotros, en el libro, vamos a utilizar
un entorno muy ligero y exclusivo para HTML y CSS que se llama
Brackets.
Brackets es uno de los mejores editores de código fuente de código abierto.
Está desarrollado por Adobe y su foco principal es el desarrollo y diseño
web. Brackets incorpora soporte de HTML, CSS y JavaScript. Puedes
descargarlo de la siguiente web: http://brackets.io
Al entrar en la web te aparecerá la siguiente pantalla:
En la pagina te aparecerá un botón para realizar la descarga específica del
sistema operativo que detecta que tienes instalado. Si tu sistema operativo
es Microsoft Windows o Mac OS X puedes descargarlo para poder
instalarlo (en el siguiente apartado te explicamos cómo), si tu sistema
operativo es Linux podrás descargarlo si tu distribución es Debian o está
basada en Debian. Para el resto de distribuciones te explicaremos cómo
instalarlo en el siguiente apartado.
Instalación
En los siguientes puntos vamos a explicarte cómo instalar Brackets en los
sistemas operativos más populares:
http://brackets.io/
Microsoft Windows
Mac OS X
Linux
Microsoft Windows
Una vez descargado el fichero tienes que ejecutarlo. Te aparecerá la pantalla
de inicio del instalador donde podrás seleccionar la ruta donde lo vas a
instalar además de un par más de opciones para añadir al path del sistema
operativo la ruta de Brackets y para añadirlo al menú contextual de todos
los ficheros y carpetas:
Una vez presionas en Next el proceso de instalación comenzará:
Una vez acabe el proceso de instalación, el instalador te indicará que
Brackets se ha instalado correctamente. Haz clic en el botón Finish y se
cerrará el instalador.
Brackets estará disponible para utilizarse desde el menú Inicio.
macOS
Una vez descargado el fichero, tienes que ejecutarlo y te aparecerá la
siguiente pantalla:
Lo único que tienes que hacer es arrastrar el icono de Brackets a la carpeta,
tal y como te indica la imagen. Una vez arrastrado lo tendrás instalado y
podrás utilizarlo accediendo a las aplicaciones instaladas mediante el
Launchpad.
Linux
La instalación de Brackets en entornos Linux depende de la distribución de
Linux que tengas instalada. En este apartado vamos a explicarte cómo
instalarlo en los sistemas operativos Linux más comunes, Debian y Ubuntu.
En caso de utilizar otra distribución, contacta con nosotros y te ayudaremos
a instalarlo.
Ubuntu
Para distribuciones Linux de Ubuntu la instalación se realiza a través de
“Ubuntu Software”, utilidad del sistema operativo que permite instalar
software. Una vez abierto lo que tienes que hacer es buscar Brackets:
El aplicativo que tienes que instalar es el primero de la lista, selecciónalo y
accederás a ver los detalles del mismo a la vez que te aparecerá un botón
para poder instalarlo. Haz clic en Instalar y el aplicativo se instalará:
Una vez instalado estará disponible en las aplicaciones del sistema y podrás
ejecutarlo desde allí.
Debian
La instalación en sistemas Linux Debian y derivados de Debian se realiza
descargando desde la página web de Brackets el paquete de instalación y
ejecutándolo. Una vez instalado podrás ejecutarlo y utilizarlo.
Manual de uso
Brackets es un editor de código muy sencillo y fácil de manejar, cuando lo
abres por primera vez te das cuenta de su sencillez.
La pantalla está dividida en cuatro partes claramente diferenciadas:
Parte superior: en la parte superior se encuentran los diferentes
menús que tiene Brackets disponibles. Son los siguientes:
Archivo: permite abrir/cerrar/guardar ficheros de código.
Edición: permite realizar operaciones de edición de texto, tales
como copiar, pegar, comentar, renombrar, etc.
Buscar: permite realizar búsquedas y reemplazos en los
ficheros cargados en el editor.
Ver: permite configurar ciertos aspectos visuales de Brackets.
Navegación: incluye funcionalidades de navegación entre los
ficheros.
Desarrollo: incluye una serie de funcionalidades relacionadas
con las operaciones de desarrollo de código.
Ayuda: incluye la guía de ayuda de cómo utilizar Brackets. Si
tienes cualquier duda de cómo usarlo te recomendamos que le
eches un ojo a la guía o nos escribas un email y te ayudaremos.
Parte lateral izquierda: en la parte lateral izquierda se encuentran
los ficheros que tienes cargados en el editor, podrás navegar por ellos
y se irán abriendo en la parte central, donde podrás modificarlos.
Parte lateral derecha: en la parte lateral derecha vas a encontrar dos
funcionalidades muy interesantes:
Vista previa dinámica: mediante la vista previa dinámica vas a
poder visualizar los cambios que vayas haciendo en los ficheros
HTML y CSS en el navegador Chrome. Te recomendamos que
siempre que estés realizando los ejercicios que te proponemos
tengas habilitada esta vista.
Cuando abras la vista por primera vez, te aparecerá el siguiente
mensaje informativo:
Gestor de extensiones: el gestor de extensiones permite
instalar extensiones y temas a Brackets para aumentar las
funcionalidades disponibles y la apariencia. En el aprendizaje
del libro no es necesario instalar ninguna de ellas. La siguiente
imagen muestra la ventana del gestor:
Parte central: en la parte central es donde se abren los ficheros que
seleccionas en la parte izquierda. Esta parte es conocida como editor
de código, donde editarás los ficheros HTML y CSS que iráshaciendo a largo de las prácticas.
Cargando los archivos descargados de los objetivos
Junto con el libro, tienes disponible para la descarga el código fuente de
todos los ejercicios que se incluyen en todos los objetivos. Las
instrucciones de descarga se encuentran al final del libro.
Una de las mejores funcionalidades que tiene Brackets es que te permite
realizar cargas de carpetas. Te recomendamos seguir los siguientes pasos
para cargar en Brackets todos los ejercicios del libro:
1. Descarga los ejercicios y descomprímelos.
2. Abre Brackets.
3. Abre el menú Archivo/Abrir carpeta…
4. Selecciona la carpeta en la que has descomprimido los ejercicios y
dale al botón “Seleccionar carpeta”. En algunos sistemas operativos
puede aparecer “Abrir”, “Seleccionar” o “Aceptar” en lugar de
“Seleccionar carpeta”.
5. En la parte izquierda de Brackets aparecen cargados todos los
ejercicios.
6. Navega por los ficheros cargados para ver cómo se van cargando en
el editor de código.
MI PRIMERA PÁGINA WEB
En este capítulo vamos a explicarte cómo realizar tu primera página web
paso a paso. En todos los lenguajes de programación, normalmente el
primer programa que se realiza es el famoso “Hola Mundo”. Se trata de un
programa muy básico mediante el cual aprendes el proceso de creación y
ejecución de programas.
El objetivo de este capítulo es enseñarte a realizar tu primer “Hola Mundo”
en HTML. A continuación te describimos los pasos que tienes que seguir:
Paso 1: abre el entorno de desarrollo Brackets. Dependiendo del
sistema operativo que tengas lo podrás encontrar en el Launchpad,
Inicio, etc.
Paso 2: una vez abierto el entorno tienes que crear un nuevo fichero
desde el menú Archivo/Nuevo tal y como se muestra en la siguiente
imagen:
El nuevo fichero te aparecerá en el panel izquierdo de Brackets:
Paso 3: en el panel de edición de código escribe el siguiente código
HTML:
Mi primera web
Acabo de hacer mi primera página web!
En este paso es en el que tienes que tener un acto de fe en lo que te
contamos, por lo que escribe el código tal y como te lo hemos puesto,
en los próximos capítulos te explicaremos qué significa.
Paso 4: guarda el fichero en la ruta que quieras desde el menú
Archivo/Guardar tal y como te mostramos en la siguiente imagen:
Es muy importante que guardes el nombre del fichero con extensión
html, por ejemplo, puedes ponerle como nombre:
MiPrimeraWeb.html.
Paso 5: para ver la web en el navegador presiona el botón de “Vista
previa dinámica”:
El navegador Chrome se abrirá y mostrará tu primera página web:
¡¡ENHORABUENA!!
¡¡Acabas de realizar tu primer programa en
HTML!!
Los ejercicios que veremos en el libro siguen el mismo proceso que
acabamos de explicarte en este capítulo, obviamente, con una dificultad
mayor, pero no te preocupes, los iremos explicando paso a paso. Recuerda
que están ordenados en dificultad creciente.
Para cada ejercicio deberás de hacer los siguientes pasos:
1. Crear el fichero o ficheros necesarios.
2. Escribir el código HTML o CSS.
3. Guardar el fichero o ficheros.
4. Ejecutar con vista previa dinámica.
OBJETIVO 1: TÍTULO, CABECERAS Y PÁRRAFOS
El primer objetivo del libro consiste en el aprendizaje y uso del título,
cabeceras y párrafos de HTML, elementos básicos utilizados para el
desarrollo de páginas web.
El objetivo está compuesto por dos fases, en la primera fase vas a aprender
a utilizar el título y los párrafos y en la segunda fase vas a aprender a
manejar las diferentes cabeceras que existen en HTML.
Conceptos teóricos
A continuación vamos a explicarte qué es el título de una página HTML, las
cabeceras y los párrafos.
Título
El título de una página HTML es lo que muestra el navegador en la pestaña
de la página que tiene abierta. El título de una página web se especifica
dentro de la sección head de la siguiente manera:
Título
Por ejemplo, si entras en la página web de la Wikipedia el título que tiene
dicha página es: Wikipedia, la enciclopedia libre, tal y como puedes ver en
la siguiente imagen:
Cabeceras
Las cabeceras en las páginas web tienen el mismo objetivo que las
cabeceras de los periódicos o revistas, que no es otro que identificar qué es
importante y dotar de jerarquía al contenido.
HTML tiene seis tipos de cabeceras, que van desde la cabecera que
es la más importante hasta la que es la menos importante. No es
necesario incluir todas las cabeceras en una página HTML pero sí es
recomendable incluir una cabecera ya que los navegadores siempre
buscan esa cabecera. Una página HTML puede contener tantas cabeceras
como se quiera de las cabeceras que van de la a la , pero
únicamente deberían de incluir una única cabecera , ya que, en caso
contrario, las páginas de búsqueda tendrían dificultades para entender la
estructura de la página.
Las cabeceras HTML se especifican dentro de la sección body de la
siguiente manera:
Cabecera H1
Para utilizar el resto de las cabeceras únicamente hay que sustituir la
etiqueta por alguna del resto de cabeceras (h2, h3, h4, h5 o h6).
Párrafos
El párrafo es el elemento base para introducir contenido de texto en una
página web. Una página web puede tener desde cero a infinitos párrafos.
Los párrafos se especifican dentro de la sección body de la siguiente
manera:
Párrafo de texto
La especificación de un párrafo provoca que el párrafo deje espacio entre el
contenido superior que tiene y el contenido inferior. Lo veremos en los
siguientes ejercicios.
FASE 1: Título y párrafos
En esta primera fase del objetivo vas a aprender a utilizar el título de la
página web y los párrafos a través de una serie de ejercicios.
El primer ejercicio de la fase consiste en crear una página web
especificando un título y añadiendo un texto a mostrar. El título se
especifica en la sección head mediante la etiqueta title y el texto que vamos
a mostrar lo introduciremos dentro de la sección body.
El código fuente es el siguiente:
HTML & CSS
Estoy empezando a aprender HTML y CSS
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en añadir más de una línea al texto
que has introducido en la sección body y ver qué ocurre en el navegador al
visualizar la página web.
El código fuente es el siguiente:
HTML & CSS
Estoy empezando a aprender HTML y CSS
¡Antes aprendí C#, Python y Arduino!
El navegador mostrará la siguiente página web:
Tal y como puedes observar el texto de ambas líneas no se muestra
separado en diferentes líneas, aunque se encuentren de tal forma en el
código HTML. Existen dos formas de separar en diferentes líneas el texto,
la primera es utilizando etiquetas de párrafo y la segunda es utilizando
saltos de líneas.
El tercer ejercicio de la fase consiste en separar el texto del ejercicio
anterior utilizando la etiqueta de párrafo . Para ello debes de introducir
cada línea dentro de una etiqueta de forma independiente.
El código fuente es el siguiente:
HTML & CSS
Estoy empezando a aprender HTML y CSS
¡Antes aprendí C#, Python y Arduino!
El navegador mostrará la siguiente página web:
El cuarto ejercicio de la fase consiste en utilizar un salto de línea para
separar en diferentes líneas el texto del ejercicio número 2. En este ejercicio
no es necesario introducir cada línea en ninguna etiqueta, simplemente se
añade un salto de línea con la etiqueta entre ambas líneas.
El código fuente es el siguiente:
HTML & CSS
Estoy empezando a aprender HTML y CSS
¡Antes aprendí C#, Python y Arduino!
El navegador mostrará la siguiente página web:
FASE 2: Cabeceras
En esta segunda fase vas a aprender a utilizar las diferentes cabeceras que
ofrece HTML para utilizar en sus documentos.
En el primer ejercicio vas a añadir una cabecera al último ejercicio de
la fase anterior. Recuerda que únicamente debes incluir una cabecera
en cada documento de HTML.
El código fuente es el siguiente:
HTML & CSS
Título: Aprendiendo
Estoy empezando a aprender HTML y CSS
¡Antes aprendí C#, Python y Arduino!
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en utilizar todas las cabeceras
existentes para que veas cómo se diferencian “estéticamente” a la hora de
mostrarse por pantalla.
El código fuente es el siguiente:
HTML & CSS
Título 1
Título 2
Título 3
Título 4
Título 5
Título 6
Texto normal
El navegador mostrará la siguiente página web:
El tercer ejercicio de la fase consiste en hacer un ejemplo más o menos real
de uso de las cabeceras. Recuerda que la cabecera contendrá
cabeceras ; las cabeceras contendrán cabeceras , etc. En
el ejercicio hemos introducido varias cabeceras dentro de la cabecera
.
El código fuente es el siguiente:
HTML & CSS
Lenguajes de programación
Los lenguajes de programación que conozco son los siguientes.
C#
Aprendí C# hace 15 años y lo uso todos los días en mi trabajo.
Python
Aprendí Python hace 10 años y lo uso para tareas de investigación.
Java
Aprendí Java hace 12 años y lo uso para estudiar.
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este primer objetivo has adquirido los siguientes conocimientos:
Especificación del título de la página web.
Utilización de cabeceras HTML.
Utilización de párrafos.
Utilización de saltos de línea en párrafos.
OBJETIVO 2: FORMATEANDO TEXTO EN HTML
El segundo objetivo del libro consiste en aprender a modificar el texto que
se muestra en la página web a través de etiquetas HTML.
El objetivo tiene únicamente una fase mediante la cual aprenderás a utilizar
las etiquetas HTML más usadas para la modificación de texto.
Conceptos teóricos
El texto que escribes para ser visualizado en las páginas web se puede
modificar de forma directa para cambiar el formato en el que es presentado.
Existen una serie de etiquetas que se puede aplicar tanto a párrafos
completos como a porciones de este y la forma de uso es igual para todas
ellas:
Texto a modificar
En los ejercicios del objetivo vamos a utilizar las siguientes etiquetas:
b: modifica el texto poniéndolo en negrita.
strong: modifica el texto poniéndolo en negrita y aumentando un
poco el tamaño de la letra.
i: modifica el texto poniéndolo en cursiva.
em: modifica el texto poniéndolo en cursiva y aumentando un poco el
tamaño de la letra.
mark: resalta el texto con fondo amarillo.
small: modifica el texto reduciendo el tamaño de la letra.
del: modifica el texto tachándolo para indicar que se trata de un texto
borrado.
ins: modifica el texto añadiendo subrayado.
sub: modifica el texto convirtiéndolo en texto subíndice.
sup: modifica el texto convirtiéndolo en texto superíndice.
q: modifica el texto convirtiéndolo en una cita.
blockquote: modifica el texto convirtiéndolo en una cita de párrafo.
abbr: define una abreviatura para un acrónimo.
FASE 1: Modificadores de texto
El primer ejercicio de la fase consiste en aprender a utilizar un conjunto de
todos modificadores de los explicados anteriormente. El ejercicio consiste
en mostrar por pantalla el texto modificado junto con un texto descriptivo
del cambio aplicado por el modificador.
El código fuente es el siguiente:
HTML & CSS
Título: Modificando texto
Texto en negrita
Texto importante
Texto cursivo
Texto enfatizado
Texto marcado
Texto pequeño
Texto tachado
Texto subrayado
Texto subíndiceTexto superíndice
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en aprender a utilizar los dos
modificadores relacionados con las citas de texto, tanto el de una línea (q)
como el de bloque (blockquote).
El código fuente es el siguiente:
HTML & CSS
Título: Modificando texto
Aristóteles dijo: La inteligencia consiste no sólo en el conocimiento, sino también en la destreza de aplicar los
conocimientos en la práctica.
El libro de Don Quijote de la Mancha empieza así:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en
astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y
quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
El navegador mostrará la siguiente página web:
El tercer y último ejercicio de la fase y del objetivo consiste en aprender a
utilizar la etiqueta HTML que te va a permitir introducir el significado a
una abreviatura para que se muestre una vez posiciones el cursor sobre
dicha abreviatura.
El código fuente es el siguiente:
HTML & CSS
Título: Modificando texto
La IANA es la entidad que supervisa la asignación global de
direcciones IP, sistemas autónomos, servidores raíz de nombres de dominio DNS y otros recursos relativos a los protocolos de
Internet.
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este segundo objetivo has adquirido los siguientes conocimientos:
Modificación de texto mediante etiquetas.
Creación de citas textuales.
Añadir abreviaturas y sus acrónimos.
OBJETIVO 3: ESTILOS EN HTML
El tercer objetivo del libro consiste en aprender a aplicar estilos visuales en
los ficheros HTML sin utilizar ficheros externos. En el objetivo aprenderás
a utilizar estilos en línea (inline) y estilos internos (internal).
El objetivo está compuesto por tres fases diferentes. Las dos primeras fases
consisten en aprender a aplicar estilos de forma inline en relación con
colores y textos y la tercera fase consiste en aprender a utilizar estilos de
forma internal.
Conceptos teóricos
En los siguientes apartados vas a aprender la teoría necesaria para poder
desarrollar los ejercicios de cada una de las fases sin ningún tipo de
problema.
Estilos en HTML
La especificación de estilos dentro de ficheros HTML se puede realizar de
dos formas diferentes:
Inline: la definición del estilo se introduce mediante el atributo
style en el propio elemento. El atributo sigue el siguiente formato:
style=”Nombre1:Valor1;Nombre2:Valor2;NombreN:ValorN;
”
Cada uno de los estilos que queramos especificar sigue el formato
Nombre:Valory se separan mediante ; cuando se trata de más de
un estilo en el atributo.
A continuación se muestra un ejemplo en el que se establece el
color de la etiqueta p a verde:
Esto es un párrafo de color verde.
Internal: la definición del estilo se introduce en la cabecera
del fichero HTML utilizando la etiqueta style. El uso de
la etiqueta sigue el siguiente formato:
Estilos
La definición de estilos dentro de la etiqueta style se realiza de la
misma forma que se hace mediante CSS. Lo veremos en detalle
más adelante.
A continuación se muestra un ejemplo en el que se establece el
color de la etiqueta p a verde:
p {color:green;}
Una vez definido el estilo para la etiqueta p cada vez que la
utilices el color del texto será verde, a no ser que especifiques lo
contrario de forma inline.
Colores
Los colores en HTML se utilizan en todos los elementos para especificar
colores de fuentes, colores de fondo, colores de relleno, colores de borde,
etc.
Los colores se pueden representar de diferentes formas. A continuación te
explicamos las tres más usadas en HTML:
Nombre: HTML tiene identificados más de 140 colores por sus
nombres, es decir, para utilizar colores por sus nombres
únicamente tienes que escribir el nombre en el estilo.
RGB: todos los colores existentes pueden representarse utilizando
el sistema RGB, rojo (Red), verde (Green) y azul (Blue). Los
colores se representan por un valor de 0 a 255 en cada uno de los
tres. A continuación te ponemos algunos ejemplos:
RGB (0,0,0): color negro.
RGB (255,255,255): color blanco.
RGB (0,0,255): color azul.
RGB (255,0,0): color rojo.
RGB (0,255,0): color verde.
RGB (255,192,203): color rosa.
Hexadecimal: la representación hexadecimal de los colores es la
representación de los valores RGB en valores hexadecimal. Los
dos primeros valores hexadecimales representan al R (rojo), los
dos segundos al G (verde) y los dos últimos al B (azul). Delante
del nombre hay que incluir siempre una #. A continuación te
ponemos los mismos ejemplos de antes pero en hexadecimal:
#000000: color negro.
#ffffff: color blanco.
#0000ff: color azul.
#ff0000: color rojo.
#00ff00: color verde.
#FFC0CB: color rosa.
FASE 1: Colores inline
La primera fase del objetivo consiste en aprender a aplicar estilos inline
para cambiar el color del texto, el color de background (fondo) y el borde
del texto.
Los estilos que aprenderás son los siguientes:
color: permite cambiar el color de la letra del texto. El formato es el
siguiente:
color: ValorColor
En ValorColor se debe introducir el valor del color en uno de los
formatos válidos para representar colores.
background-color: permite cambiar el color de fondo del texto. El
formato es el siguiente:
background-color: ValorColor
En ValorColor se debe introducir el valor del color en uno de los
formatos válidos para representar colores.
border: permite especificar un borde al texto indicando el grosor del
mismo, el tipo de borde y su color. El formato es el siguiente:
border: TamañoBorde TipoBorde ValorColor
Veámoslos en detalle:
TamañoBorde: especifica el número de píxeles que tiene el
grosor del borde. El formato es el siguiente Valorpx. Por
ejemplo, si quieres establecer un borde de 2 píxeles de grosor
tendrás que poner 2px.
TipoBorde: especifica el tipo de borde. En HTML existen una
serie de bordes predefinidos que puedes utilizar, los veremos
en objetivos futuros.
ValorColor: especifica el color del borde en uno de los
formatos válidos para representar colores.
El primer ejercicio consiste en modificar los colores del texto utilizando la
representación de colores por su nombre. El código fuente es el siguiente:
HTML & CSS
Título: Colores de texto
Texto de color verde
Texto de color blanco y fondo negro
Texto de color cyan con borde rojo
Texto de color cyan con borde rojo y fondo
aguamarina
El navegador mostrará la siguiente página web:
El segundo ejercicio de la fase consiste en realizar lo mismo que en el
ejercicio anterior, pero en lugar de utilizar colores por nombre, los utilizarás
con su representación hexadecimal. El código fuente es el siguiente:
HTML & CSS
Título: Colores de texto
Texto de color verde
Texto de color blanco y fondo negro
Texto de color cyan con borde rojo
Texto de color cyan con borde rojo y
fondo aguamarina
El navegador mostrará la siguiente página web:
El tercer ejercicio de la fase consiste en realizar lo mismo que en los dos
anteriores, pero utilizando colores mediante su representación RGB. El
código fuente es el siguiente:
HTML & CSS
Título: Colores de texto
Texto de color verde
Texto de color blanco y fondo negro
Texto de color cyan con borde rojo
Texto de color cyan con
borde rojo y fondo aguamarina
El navegador mostrará la siguiente página web:
FASE 2: Textos inline
La segunda fase del objetivo consiste en aprender a aplicar estilos inline
para modificar el tamaño de la letra, la familia de la letra y la alineación de
esta.
Los estilos que aprenderás son los siguientes:
font-size: permite cambiar el tamaño de la letra del texto basándose
en un porcentaje del tamaño del mismo. El formato es el siguiente:
font-size: Valor%
El valor de porcentaje normal es el 100%, por tanto, si quieres
establecer el doble de tamaño tienes que indicar 200%, y si quieres la
mitad tendrás que establecer 50%.
font-family: permite cambiar la familia de la letra en la que se
escribe el texto. El formato es el siguiente:
font-family: NombreFamilia
font-align: permite especificar la alineación del texto en pantalla. El
formato es el siguiente:
font-align: ValorAlineación
La alineación permite los siguientes valores:
left: alinea el texto a la izquierda, es el valor por defecto.
right: alinea el texto a la derecha.
center: alinea el texto centrado.
justify: alinea el texto de tal forma que llegue desde el
comienzo de línea al final y dividiendo entre varias líneas si
fuera necesario.
inherit: utiliza la alineación del elemento padre.
El ejercicio consiste en modificar el tamaño del texto, su familia y su
alineación. El código fuente es el siguiente:
HTML & CSS
Título: Modificando textos
Texto normal
Texto más grande que el normal
Texto más pequeño que el normal
Texto con la letra cambiada y más grande que el normal
Texto alineado a la derecha
El navegador mostrará la siguiente página web:
FASE 3: Estilos internal
Latercera fase del objetivo consiste en aprender a definir estilos en la
cabecera de HTML mediante la etiqueta style.
La definición de estilos en la cabecera es bastante diferente a como se hace
de forma inline, pero es igual que como se hace utilizando CSS. Debido a
esto, el ejercicio está centrado en aprender a definir estilos dentro de la
cabecera en lugar de explicarte cómo se definen los estilos propiamente
dicho, contenido que veremos durante los siguientes objetivos.
El ejercicio consiste en definir una serie de estilos para los elementos body,
h1 y p. Los estilos a definir son los siguientes:
body: se establece el fondo gris.
h1: se establece el color de la letra a azul.
p: se establece el color de la letra a violeta y se incrementa el tamaño
de la letra un 50%.
En el ejercicio se ha añadido un texto sin ningún tipo de estilo definido con
el objetivo de que compruebes que los estilos se aplican únicamente para
aquellos elementos que los tienen definidos.
El código fuente es el siguiente:
HTML & CSS
body{background-color: lightgray;}
h1{color: darkblue;}
p{color: darkviolet;font-size:150%;}
Título: Estilos en la cabecera
Texto más grande de lo normal y violeta
Texto normal
El navegador mostrará la siguiente página web:
Ahora eres capaz de…
En este tercer objetivo has adquirido los siguientes conocimientos:
Definición de estilos de forma inline e internal.
Definición de estilos para textos y colores.
OBJETIVO 4: ESTILOS UTILIZANDO CSS
El cuarto objetivo del libro consiste en aprender a añadir ficheros de estilos
CSS a los ficheros de HTML que haces.
El objetivo únicamente contiene una fase mediante la cual aprenderás a
añadir ficheros CSS a HTML.
Conceptos teóricos
Los ficheros CSS permiten incluir en ficheros externos a los HTML la
definición de los estilos. Utilizando ficheros CSS podrás cambiar el aspecto
visual por completo de tu página web modificando el fichero CSS.
¿Cómo utilizamos ficheros CSS en fichero HTML? La respuesta es
sencilla: incluyendo dichos ficheros en la sección head del fichero HTML a
través de la etiqueta link. Una vez el fichero es incluido en el fichero
HTML, los estilos definidos en el CSS serán los utilizados por el fichero
HTML.
El formato de la etiqueta link es el siguiente:
Lo único que tienes que modificar es la ruta en la que se encuentra el
fichero CSS.
FASE 1: Añadir CSS al HTML
La única fase que tiene el objetivo consiste en aprender a utilizar ficheros
CSS en los HTML. Para ello, debes de seguir los siguientes pasos:
1. Crea una carpeta con el nombre Ejercicio1.
2. Dentro de la carpeta Ejercicio1 crea una carpeta que se llame css.
3. Crea un fichero dentro de la carpeta css que se llame styles.css.
4. Crea un fichero dentro de la carpeta Ejercicio1 que se llame Ej1.html.
5. Abre ambos ficheros y copia en cada uno de ellos el código que te
indicamos:
CSS
p {
font-family: Comic Sans MS;
}
h1 {
font-family: Arial;
}
HTML
HTML & CSS
Utilizando CSS
Estoy empezando a aprender HTML y CSS
Fíjate en que en el fichero HTML se ha especificado la ruta (css/styles.css)
del fichero CSS dentro de la etiqueta link de la sección head.
Al abrir el fichero HTML el navegador mostrará la siguiente página web:
Los pasos que acabas de aprender los vas a tener que repetir siempre para
todos aquellos ejercicios que hagamos en los que usemos ficheros CSS para
definir los estilos de la página HTML.
Ahora eres capaz de…
En este cuarto objetivo has adquirido los siguientes conocimientos:
Inclusión de ficheros de estilos CSS en HTML.
OBJETIVO 5: MODIFICANDO TEXTO CON CSS
El quinto objetivo del libro consiste en aprender a aplicar estilos que
modifican texto mediante ficheros CSS.
El objetivo está compuesto por dos fases. En la primera vas a aprender
modificadores propios de texto, es decir, poner en negrita, el color, el
tamaño, espacio entre caracteres y palabras, etc. En la segunda fase vas a
aprender a aplicar bordes alrededor del texto y relleno de elementos.
Además, aprenderás a aplicar estilos mediante selectores de tipo y
selectores de clase mediante CSS.
Conceptos teóricos
A continuación te vamos a explicar una serie de conceptos teóricos que
debes conocer para poder realizar los ejercicios del objetivo.
Selectores CSS
Un selector en CSS indica el elemento o conjunto de elementos HTML
sobre los que se aplicará el estilo CSS que se defina.
El estándar de CSS 2.1 incorpora diferentes tipos de selectores para las
diferentes opciones que pueden darse, pero realmente, llevado a la práctica,
todas las páginas web suelen estar construidas utilizando los mismos tipos
de selectores. Son los siguientes:
Selector universal: permite definir estilos sobre todos los elementos
de la página web y se indica utilizando un asterisco “*”. Su uso es
bastante sencillo, pero realmente no se utiliza mucho dado que no es
muy normal aplicar los mismos estilos a todos los elementos que
componen una página web. A continuación te mostramos un ejemplo:
* {
…
}
Selector de etiqueta: permite definir estilos sobre todos los
elementos de la página web que coincidan con el selector. A
continuación te mostramos un ejemplo:
p {
…
}
El estilo estaría definido para todos los elementos HTML de tipo p.
Los selectores de etiquetas pueden contener más de una etiqueta en
su definición. Las etiquetas se separan con comas entre ellas. A
continuación te mostramos un ejemplo:
h1, h2 {
…
}
El estilo estaría definido para todos los elementos HTML de tipo h1 y
h2.
Selector de clase: permite definir estilos que no aplican
específicamente a ningún elemento y que para utilizarlo es necesario
incluirlas dentro del atributo class del elemento HTML. En otras
palabras, nos permiten definir estilos que no aplican de forma
automática y que su uso tiene que ser especificado en el HTML.
Existen dos tipos de selectores de clase:
Generales: los selectores de clase generales se pueden aplicar
a todos los elementos HTML existentes, es decir, podrías
aplicarlos desde un texto a una lista o a una imagen. A
continuación te mostramos un ejemplo:
.nombreclase {
…
}
El nombre de la clase, que es el que tienes que incluir dentro
del atributo class del elemento HTML, es el nombre utilizado
en la definición, en el ejemplo si quisieras utilizar el estilo
tendrías que incluir el atributo class con valor nombreclase.
Ligados a una etiqueta: los selectores de clase ligados a una
etiqueta permiten definir clases única y exclusivamente para el
elemento HTML con el que se corresponde la etiqueta. Es
decir, si defines una clase para el elemento HTML p
únicamente podrás utilizarla para elementos HTML p, no para
otros. A continuación te mostramos un ejemplo:
p.nombreclase {
…
}
Selector de identificador: permite definir estilos que únicamente
pueden ser utilizados una vez en toda la página web. La forma de
utilizar los estilos definidos mediante un selector de identificador es
mediante el atributo id del elemento HTML. Existen dos tipos de
selectores de identificador:
Generales: el elemento definido en el estilo puede ser
utilizado una única vez por uno de los elementos de la página
web. A continuación te mostramos un ejemplo:
#nombreID {
…
}
El nombre del identificador, que es el que tienes que incluir
dentro del atributo id del elemento HTML, es el nombre
utilizado en la definición. En el ejemplo, si quisieras utilizar el
estilo, tendrías que incluir el atributo id con valor nombreID.
Ligados a una etiqueta: el elemento definido únicamentepuede ser utilizado una vez por uno de los elementos HTML
para el que se ha definido. A continuación te mostramos un
ejemplo:
p#nombreID {
…
}
La definición del ejemplo indica que únicamente puede haber
un elemento HTML p que contenga el id con valor nombreID.
Border / Padding / Margin
Las propiedades Border, Padding y Margin de los elementos HTML son
realmente útiles a la hora de colocar elementos HTML en las páginas web.
Veámoslas en detalle:
padding: permite definir el espacio alrededor del elemento HTML y
hasta el borde del mismo.
border: es el borde del elemento HTML. Se encuentra entre el
padding y el margin.
margin: es el espacio que separa al elemento de los demás
elementos. En otras palabras, permite definir un área vacía de
contenido alrededor del elemento.
Veámoslo gráficamente en la siguiente imagen:
Alrededor del elemento HTML vas a encontrar las tres capas que acabamos
que definir. La primera capa alrededor del contenido del elemento llega
hasta el borde, la segunda capa es el propio borde y la tercera capa es la que
va desde el borde al resto de elementos.
FASE 1: Texto
El primer ejercicio de la fase consiste en aprender a utilizar selectores de
tipos en los ficheros CSS. Para ello vas a definir un selector para el tipo p y
otro para el tipo h1 en los que vas a especificar un tipo de letra para ellos y
un tamaño mayor para p.
En el objetivo número 3 vimos cómo utilizar font-size para cambiar el
tamaño de la letra. En este ejercicio, en lugar de utilizarlo con porcentajes
tal y como aprendimos anteriormente, vamos a hacerlo utilizando la unidad
de medida recomendad por la W3C, la em. La em es una unidad que nació
en el mundo de la impresión y que es igual al tamaño de punto, por tanto,
estableceremos el tamaño del punto de la letra para establecer el tamaño de
la misma.
Un tamaño de 1em equivale al tamaño actual del punto de la fuente. Si se
muestra en una pantalla donde el tamaño del punto equivale a 16píxeles la
fuente se mostrará ocupando 16píxeles, en cambio, si se cambia el tamaño
del punto a 24píxeles, la fuente se mostrará ocupando 24píxeles. Por tanto,
utilizar em nos permitirá que el tamaño del texto se ajuste automáticamente
al tamaño del punto en el que se muestra en el navegador.
Veamos algún ejemplo:
1.5em: el tamaño de la letra será el de una vez y media el tamaño del
punto.
0.6em: el tamaño de la letra será el de 0,6 veces el tamaño del punto.
4em: el tamaño de la letra será cuatro veces el tamaño del punto.
El código fuente del primer ejercicio es el siguiente:
CSS
p {
font-family: Comic Sans MS;
font-size: 1.3em;
}
h1 {
font-family: Arial;
}
HTML
HTML & CSS
Utilizando CSS
Estoy empezando a aprender HTML y CSS
¡Me encanta!
El navegador mostrará la siguiente página web:
Observa como el tamaño de la letra dentro del elemento p es más grande
que el que no está dentro del elemento, puedes darte cuenta de cómo se ha
modificado el tamaño del texto al aplicar el estilo.
El segundo ejercicio de la fase consiste en definir dos clases para el
elemento p mediante las cuales se establecen diferentes tamaños de letra.
Uno de ellos (important) tendrá un tamaño más grande que el normal y el
otro (not_important) tendrá un tamaño más pequeño que el normal.
La forma de crear clases para un elemento HTML en CSS es la siguiente:
ElementoHTML.NombreClase
{
EspecificaciónCSS;
}
Veamos cada uno de sus elementos:
ElementoHTML: tipo de elemento HTML sobre el que se crea la
clase. Esto quiere decir que la clase sólo será utilizable por dicho
elemento.
NombreClase: nombre que tendrá la clase y que se tendrá que utilizar
para aplicar la clase al elemento.
EspecificaciónCSS: especificación CSS para la clase.
La forma de aplicar estilos de clase a los elementos es mediante la
propiedad class de la siguiente manera:
class=”NombreClase”
El nombre de la clase tiene que coincidir con el nombre de la clase definida
en el fichero CSS.
El código fuente del segundo ejercicio es el siguiente:
CSS
p {
font-family: Comic Sans MS;
}
p.important {
font-family: Comic Sans MS;
font-size: 1.5em;
}
p.not_important {
font-family: Comic Sans MS;
font-size: 0.7em;
}
h1 {
font-family: Arial;
}
HTML
HTML & CSS
Utilizando CSS
No importante
Normal
Importante
El navegador mostrará la siguiente página web:
El tercer ejercicio de la fase consiste en definir clases no ligadas a un
elemento específico del HTML, es decir, clases que puedan ser utilizadas
por cualquier elemento HTML.
La forma de crear clases generales en CSS es la siguiente:
.NombreClase
{
EspecificaciónCSS;
}
Veamos cada uno de sus elementos:
NombreClase: nombre que tendrá la clase y que se tendrá que utilizar
para aplicar la clase al elemento que la utilice.
EspecificaciónCSS: especificación CSS para la clase.
Además, en el ejercicio vas a aprender a cambiar el estilo de la letra
mediante font-style. El estilo permite los siguientes valores:
Normal: se muestra la letra en estilo normal. Es el valor por defecto.
Italic: se muestra la letra en cursiva.
Oblique: la letra se muestra oblicua. Al valor oblique se le puede
indicar el grado de inclinación en grados (font-style: oblique 10deg;)
y en caso de no indicarse se mostrará igual que la cursiva.
Initial: establece el valor al valor por defecto.
Inherit: el valor será el valor del padre.
El ejercicio consiste en definir dos clases generales, una para establecer el
tipo de letra y otra para establecer un estilo de letra y un tamaño específico.
El código fuente es el siguiente:
CSS
.fontfamily {
font-family: Comic Sans MS;
}
.important {
font-style: oblique;
font-size: 1.3em;
}
HTML
HTML & CSS
Utilizando CSS
Título 2 normal
Título 2 cursiva
Título 2 cursiva y letra cambiada
Texto normal
Texto letra cambiada
Texto letra cambiada y cursiva
El navegador mostrará la siguiente página web:
El cuarto ejercicio de la fase consiste en seguir practicando con la
definición de clases generales y su aplicación a elementos HTML. Aunque
lo veremos en detalle en un objetivo más adelante, para utilizar el estilo de
clase vamos a utilizar el elemento HTML span, que permite incluir estilos
dentro del contenido de otros elementos HTML. El código fuente es el
siguiente:
CSS
.emphasized {
font-style: oblique;
}
.big {
font-size: 1.3em;
}
.redcolor {
color: red;
}
.greencolor {
color: #00cc00
}
HTML
HTML & CSS
Yo soy un texto verde y grande y yo soy un texto rojo y cursiva.
El navegador mostrará la siguiente página web:
En el quinto ejercicio de la fase vas a aprender a modificar la separación
entre las letras de las palabras y la separación entre las palabras. Existen dos
estilos que permiten ajustar estos valores a los valores que queramos:
letter-spaccing: modifica el espacio entre las letras de una palabra.
word-spaccing: modificael espacio entre las palabras.
Los valores que admiten ambos estilos se basan en la unidad de medida que
vimos en el primer ejercicio: em. Ambos estilos se rigen de la misma forma
en función de los valores para em:
em>0: el espacio entre letras/palabras será mayor que el normal.
em
HTML & CSS
Modificando texto
Espaciado entre letras
Letra normal
Letra normal con mucho espaciado
Letra normal con poco espaciado
Espaciado entre palabras
Espaciado normal entre palabras
Espaciado grande entre palabras
Espaciado pequeño entre palabras
El navegador mostrará la siguiente página web:
Fase 2: Texto y bordes/padding
La segunda fase del objetivo consiste en aprender a utilizar bordes en los
elementos HTML junto con algunos estilos de texto.
Es importante que tengas en cuenta que lo que aprendas en esta fase
referente a los bordes y al padding te va a servir para todos los elementos
HTML que vayas aprendiendo a lo largo del libro. La forma en la que se
utilizan es exactamente igual independientemente del elemento al que se
aplican.
En el primer ejercicio de la fase vas a aprender a manejar los siguientes
estilos:
text-align: te va a permitir alinear el texto.
border: te va a permitir añadir un borde al elemento HTML sobre el
defines el estilo.
El estilo text-align puede tener los siguientes valores:
left: alinea el texto a la izquierda.
rigth: alinea el texto a la derecha.
center: alinea el texto de forma centrada.
justify: alinea el texto de forma justificada, es decir, ajusta lo que
ocupa la línea para que ocupe el tamaño máximo de la línea.
initial: alinea el texto a su valor por defecto.
inherit: alinea el texto al valor de su elemento padre.
El estilo border sigue el siguiente patrón:
border: GrosorBordepx TipoBorde ColorBorde;
Veámoslo en detalle:
GrosorBorde: establece el número de píxeles del borde. El valor
tiene que ir seguido por px. Por ejemplo, si quieres establecer un
borde de dos píxeles tendrás que establecerle el valor a 2px.
TipoBorde: establece el tipo visual del borde. Los tipos visuales de
bordes que pueden aplicarse a los elementos HTML son:
None: no se muestra ningún borde. Valor por defecto.
Hidden: visualmente es igual a none, con la diferencia en la
forma que el navegador resuelve los conflictos entre bordes
adyacentes de las celdas de las tablas.
Dotted: formado por una serie de puntos separados por
espacios, conocido como borde punteado.
Dashed: formado por pequeños trazos separados por espacios,
conocido como borde discontinuo.
Solid: formado por una línea continua, conocido como borde
continuo.
Double: formado por dos líneas continuas separadas por un
espacio en blanco, conocido como borde doble.
Groove: visualmente parece estar por debajo del nivel de la
superficie de la pantalla, conocido como borde hundido.
Ridge: visualmente parece estar por encima del nivel de la
superficie de la pantalla, conocido como borde saliente.
Inset: visualmente provoca que el elemento que encierra
parezca que se encuentra por debajo del nivel de la superficie
de la pantalla.
Outset: visualmente provoca que el elemento que encierra
parezca que se encuentra por encima del nivel de la superficie
de la pantalla.
ColorBorde: establece el color del borde del mismo modo en el que
lo explicamos en el objetivo anterior.
El primer ejercicio de la fase consiste básicamente en practicar diferentes
tipos de alineación de texto y en aprender a establecer bordes a los
elementos. El código fuente es el siguiente:
CSS
h1
{
text-align: center;
}
.alignright
{
text-align: right;
}
.alignleft
{
text-align: left;
}
.aligncenter
{
text-align: center;
}
p
{
text-indent: 1em;
}
.blackborder
{
border: 1px solid black;
}
.blueborder
{
border: 3px dotted blue;
}
HTML
HTML & CSS
Alineando textos
Título en la derecha
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo
que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que
carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los
domingos, consumían las tres partes de su hacienda.
Título en la izquierda
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo
que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que
carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los
domingos, consumían las tres partes de su hacienda.
El navegador mostrará la siguiente página web:
En el segundo ejercicio de la fase vas a aprender a manejar el padding
(relleno) de los elementos HTML. La forma en la que vamos a explicarte el
padding es utilizándolo junto con el mostrado de bordes, para que veas el
espacio que queda entre el propio elemento y el borde, que es lo que
establece el padding.
El padding utiliza la misma unidad que vimos en la fase anterior: em.
Existen diferentes estilos para establecer el padding:
padding-top: establece el valor respecto al borde superior.
padding-bottom: establece el valor respecto al borde inferior.
padding-left: establece el valor respecto al borde izquierdo.
padding-right: establece el valor respecto al borde derecho.
padding: establece el valor respecto a los 4 bordes dándoles el
mismo valor para todos ellos.
El ejercicio consiste en aplicar, de diferentes formas, el padding a diferentes
elementos a los que se les ha establecido un borde para que puedas
comprobar visualmente cómo se ve el padding. El código fuente es el
siguiente:
CSS
p
{
border: 1px solid black;
}
.uniquepadding
{
padding: 1em;
}
.toppadding
{
padding-top: 1em;
padding-bottom: 0em;
padding-left: 0em;
padding-right: 0em;
}
.bottompadding
{
padding-top: 0em;
padding-bottom: 1em;
padding-left: 0em;
padding-right: 0em;
}
.leftpadding
{
padding-top: 0em;
padding-bottom: 0em;
padding-left: 1em;
padding-right: 0em;
}
.rightpadding
{
padding-top: 0em;
padding-bottom: 0em;
padding-left: 0em;
padding-right: 1em;
}
HTML
HTML & CSS
Relleno
En un lugar de la Mancha...
En un lugar de la Mancha...
En un lugar de la Mancha...
EnMais conteúdos dessa disciplina
Modelo de Redação- Uso de Por Que e Porquê
- Colocação Pronominal
- português d
- Dicas de Português
- português 1
- Tipos de Variação Linguística
- português f
- Expressões Comuns em Inglês
- Questão 4 de 5 O desenvolvimento de equipe pode ser visto de duas formas específicas, segundo as necessidades da organização. Assim, qual forma dev...
- Ano: 2024 Banca: IV - UFG Órgão: TJ-GO Prova: IV - UFG - 2024 - TJ-GO - Residente Jurídico Texto associado Leia os Textos 1 e 2 para responder à quest
- Ler em voz alta Leia 0 fragmento de texto a seguir Pesquisar por magem Uma comunidade tradicional ribeirinha habita há gerações uma area de floresta a
- (Avança SP - 2022 - Prefeitura de Louveira )Dos pontos de articulação das mãos na Libras, a ponta dos dedos é representada por: Questão 7Resposta a. D
- passei direto apol Considerando o fragmento de texto Rota de Aprendizagem da Aula 4, Tema 1 – Do olhar reflexivo sobre a resistência à aprendizagem: a
- PERGUNTA 4 De acordo com o Conselho Nacional do Ministério Público (2016), o objetivo do assediador, em regra, é motivar o trabalhador a pedir o ...
- O vigia não pode utilizar armamento e não é controlado pela Polícia Federal;
- A presença do vigia escolar é fundamental para a segurança na escola, independente da instituição estar ou não em local privilegiado. Sendo assim, qua
- A presença do vigia escolar é fundamental para a segurança na escola, independente da instituição estar ou não em local privilegiado. Sendo assim, qua
- shopee A loja não pode criar o produto porque é uma loja local do Brasil e o processo KYC não foi aprovado.
- shopee A loja não pode criar o produto porque é uma loja local do Brasil e o processo KYC não foi aprovado.
- A loja não pode criar o produto porque é uma loja local do Brasil e o processo KYC não foi aprovado.
- Qual o principal desafio para o professor no ensino-aprendizagem de estratégias? Questão 9Resposta a. Ensinar estratégias ao mesmo tempo em que aprese
- didatica
- 2 Educação Tecnológica no Brasil A geopolítica e a geografia política
