Lenguajes de marcas
HTML Y CSS
¿QUÉ ES HTML?
HTML es un lenguaje de marcas para describir
documentos web (páginas web).
HTML significa Hyper Text Markup Language
Un lenguaje de etiquetas es un conjunto de
etiquetas
Los documentos HTML son descritos por las
etiquetas HTML
Cada etiqueta HTML describe diferentes contenidos
documento.
EJEMPLO HTML
<!DOCTYPE html>
<html>
<body>
<h1>Mi Primer título</h1>
<p>Mi primer parrafo</p>
</body>
</html>
EXPLICACIÓN DEL EJEMPLO
La declaración DOCTYPE define el tipo de
documento. (html)
El texto entre <html> y </ html> describe el
todo el documento web
El texto entre <body> y </ body> se describe el
contenido visible de la página
El texto entre <h1> y </ h1> describe un título
El texto entre <p> y </ p> describe un párrafo
ETIQUETAS HTML
Las etiquetas HTML son palabras clave (nombres de
etiqueta) rodeadas por paréntesis angulares:
<etiqueta>contenido</etiqueta>
Etiquetas HTML normalmente vienen en pares como
<p> y </ p>
La primera etiqueta en una pareja es la etiqueta de
inicio, la segunda etiqueta es la etiqueta de cierre
La etiqueta final se escribe igual que la etiqueta inicial,
pero con una barra antes del nombre de la etiqueta
NAVEGADORES WEB
El propósito de un navegador web (Chrome, IE,
Firefox, Safari) es leer los documentos HTML y
mostrarlos.
El navegador no muestra las etiquetas HTML,
pero los utiliza para determinar cómo visualizar
el documento:
NUESTRO EJEMPLO EN UN NAVEGADOR
ESTRUCTURA DE PÁGINA HTML
VERSIONES DE HTML
Versión Año
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
DECLARACIÓN DEL DOCTYPE
A través del Doctype el navegador sabe que versión de HTML
va a mostrar.
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"[Link]
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"[Link]
[Link]">
Aplicaciones Web
NUESTRA PRIMERA PÁGINA HTML
Abre el editor de texto:
Utilizaremos el NotePad ++.
Escribe el primer ejemplo:
<!DOCTYPE html>
<html>
<body>
<h1>Mi primer título</h1>
<p>Mi primer párrafo</p>
</body>
</html>
Guarda el documeto como HTML.
File-> Save as ->html
Haz doble click sobre el documento que
acabas de guardar.
Aplicaciones Web
ETIQUETAS BÁSICAS DE HTML
TÍTULOS EN HTML
Títulos HTML se definen con las etiquetas h,
que van desde <h1> a <h6>.
Prueba:
<h1>Esto es un titulo</h1>
<h2>Esto es un titulo</h2>
<h3>Esto es un titulo</h3>
<h4>Esto es un titulo</h4>
<h5>Esto es un titulo</h5>
<h6>Esto es un titulo</h6>
PÁRRAFOS
Los párrafos en html se definen con la etiqueta
<p>
Prueba:
<p>Esto es un ejemplo.</p>
ENLACES
Los enlaces son definidos con la etiqueta <a>
Ejemplo:
<a href="[Link]
Esto es un enlace
</a>
La dirección del enlace se especifica en el atributo href.
Los atributos se utilizan para proporcionar información
adicional acerca de los elementos HTML.
IMAGENES
Imágenes HTML se definen con la etiqueta
<img>.
<img src="[Link]" alt= Texto
Alternativo" width="104" height="142
">
El archivo de origen (src), texto alternativo (alt)
y el tamaño (ancho y alto) se proporcionan
como atributos
PRÁCTICA
Haz dos páginas HTML en la misma carpeta.
En cada una de ellas escribe una noticia o un
post con:
Título, descripción y una imagen
Introduce un enlace en las imágenes que lleve al
usuario a la página del centro
([Link]
Introduce en cada noticia un enlace a la otra
noticia
APRENDIENDO HTML DESDE CERO
ELEMENTOS
Los elementos HTML comprende una etiqueta
de apertura, el contenido y la etiqueta de
cierre.
Ej: <p>My first paragraph.</p>
Existen elementos vacios (no tienen contenido),
estos se pueden, abrir y cerrar en la misma
etiqueta aunque no es obligatorio cerrarlos.
Ej : <br/>
<HEAD>
ELEMENTO <HEAD>
El elemento HTML <head> es la cabecera
HTML(no tiene nada que ver con la cabecera de la
página)
El elemento <head> sólo contiene metadatos (No
visibles por el usuario, si por los navegadores).
El HTML <head> se coloca entre la etiqueta
<html> y el <body>:
ELEMENTO <HEAD>
<!DOCTYPE html>
<html>
<head>
<title>Mi Primer HTML</title>
<meta charset="UTF-8">
</head>
.
.
.
<body>
METADATOS
Metadatos: Datos acerca de los datos.
HTML metadatos: Los datos sobre el
documento HTML.
Etiquetas que representan metadatos:
<title>
<meta>
<style>
<link>
<TITLE>
Define el título del documento HTML.
No se mostrará en el documento. Sin embargo,
podría ser exhibido en una de las pestañas del
navegador.
<META>
Define el juego de caracteres utilizado en el
documento HTML
El HTML <style> define las hojas de estilo CSS
internas.
El HTML <link> puede definir hojas de estilo
CSS externos.
PRÁCTICA
Introduce en tus páginas anteriores metadatos
para que:
Se vean bien las tildes
En la pestaña del navegador podamos ver el título
del periódico o blog.
<BODY>
REGLA HORIZONTAL (HORIZONTAL RULES )
La etiqueta <hr> crea una línea horizontal en
una página HTML.
El elemento hr se puede utilizar para separar el
contenido:
<p>Esto es un parrafo.</p>
<hr>
<p>Esto es un parrafo.</p>
<hr />
FORMATEO DE TEXTO
This text is bold
This text is italic
This is subscript and superscript
FORMATEO DE TEXTO
HTML utiliza etiquetas como <b> (“bold” en
negrita) y <i> (“Italic”, cursiva)
FORMATEO DE TEXTO
Etiqueta Significado
<b> Define texto en negrita
<em> Define texto enfatizado
<i> Define parte de texto en cursiva
<small> Define texto en pequeño
<strong> Define texto importante
<sub> Define texto subescrito
<sup> Define texto superescrito
<ins> Define texto insertado
<del> Define texto eliminado
<mark> Define texto marcado
COMENTARIOS
Cuando una página es grande, es muy
conveniente comentar el código, para ello
utilizamos las etiquetas de comentarios:
<!-- Esto es un comentario -->
PRÁCTICA
Modifica las páginas anteriores :
Une las dos noticias en la misma página y sepáralas con
una línea horizontal.
Añade el Titulo del periódico/blog y sepáralo con otra línea
horizontal.
Añade un subtítulo (resumen de la noticia/entrada) a cada
una.
Formatea el texto
Marca palabras más importantes
Escribe texto en cursiva y en negrita
Añade comentarios indicando donde empieza:
La cabecera html(head), el cuerpo (body), la primera y
segunda noticia.
ATRIBUTOS HTML
ATRIBUTOS HTML
Los elementos HTML pueden tener atributos
Los atributos proporcionan información adicional
sobre un elemento
Atributos siempre se especifican en la etiqueta
inicial
Atributos vienen en pares nombre / valor, como:
nombre = "valor"
EL ATRIBUTO TITLE
Párrafos HTML se definen con la etiqueta <p>.
En este ejemplo, el elemento <p> tiene un
atributo title. El valor del atributo es "Acerca de
Cenec":
<p title="Acerca del profe">
Victor Custodio es un profesor de
programación
</p>
EL ATRIBUTO HREF
Los vínculos HTML se definen con la etiqueta
<a>. La dirección del enlace se especifica en el
atributo href como ya hemos visto.
ATRIBUTOS DE TAMAÑO
Imágenes HTML se definen con la etiqueta
<img>.
El nombre del archivo de la fuente (src), y el
tamaño de la imagen (ancho y alto) son
proporcionados como atributos:
<img src= [Link]" width="104" hei
ght="142">
EL ATRIBUTO ALT
El atributo alt especifica un texto alternativo
que se utilizará, cuando un elemento HTML no
se puede visualizar.
El valor del atributo puede ser leído por los
lectores de pantalla . De esta manera, alguien
puede "escuchar" a la página web, es decir,
una persona ciega, puede "oír" el elemento.
CSS
ESTILIZANDO HTML CON HOJAS DE ESTILO(CSS)
El estilo CSS se puede agregar a los elementos
HTML de las siguientes 3 maneras:
Inline - utilizando el atributo de estilo en elementos
HTML
Interno - utilizando el <style> en la sección <head>
Externa - el uso de archivos CSS externos
La forma más común para agregar estilo, es poner
la sintaxis CSS en archivos CSS separados.
ESTILOS EN LÍNEA
Estilo Inline es útil para aplicar un estilo único
a un solo elemento HTML:
Estilo Inline utiliza el atributo de estilo.
Este estilo de línea cambia el color del texto y
el margen izquierdo del párrafo único:
<p style="color:green;margin-
left:20px;">This is a paragraph.</p>
ALGUNOS ATRIBUTOS CSS
El estilo css background-color define color de
fondo para un elemento HTML.
<body style="background-color:lightgrey">
El estilo CSS family-font define el tipo de letra
a utilizar en el elemento HTML:
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
ALGUNOS ATRIBUTOS CSS
El estilo CSS font-size define el tamaño del
texto usado en el elemento html:
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
El estilo CSS color define el color a utilizar en
el elemento HTML:
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
ALGUNOS ATRIBUTOS CSS
El estilo CSS text-align especifica la alineación
horizontal del texto de un elemento:
<h1 style="text-align:center">
Center-aligned heading</h1>
<p>This is a paragraph.</p>
CSS INTERNO
Una hoja de estilo interna se puede utilizar para definir un estilo
común para todos los elementos HTML de una página.
Estilos internos se definen en la sección <head> de una página
HTML, en el elemento <style>:
LA sintaxis CSS es : elemento { propiedad:valor ; propiedad:valor }
El elemeto es el nombre de elemento HTML. Propiedad es una
propiedad CSS y valor es un valor CSS, para describer varis
propiedades, estas se separan por ;
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue; text-align:center}
p {color:green}
</style>
</head>
CSS EXTERNO
Hoja de estilos externa son ideales cuando se aplica el estilo
de muchas páginas.
Con hojas de estilo externas, puedes cambiar el aspecto de un
sitio completo, cambiando un solo archivo.
Estilos externos se definen en la sección <head> de una
página HTML, en el elemento <link>:
<head>
<link rel="stylesheet" href="[Link]">
</head>
El atributo rel indica la relación del archivo enlazado con el documento html(en este
caso es su hoja de estilo)
EL ATRIBUTO ID
En todos los ejemplos anteriores el uso de CSS
se realiza en los elementos HTML de una
manera general.
Los estilos CSS definen un estilo igual para
todos los elementos iguales.
Para definir un estilo especial para un
elemento especial, es necesario añadir un
atributo id para el elemento:
EJEMPLO ATRIBUTO ID
<p id="p01">I am different</p>
Ahora, de forma inline o externa podemos
definir un estilo para el elemento p01 en lugar
de para todos los elemetos <p>:
p#p01 {
color:blue;
}
ATRIBUTO CLASS
Para añadir un estilo especial a un tipo de elemento
especial, se usa el atributo class.
A diferencia del atributo id, pueden existir varios
elementos de la misma clase.
Ejemplo:
<p class="error">I am different</p>
Desde la hoja de estilo podremos moficiar el estilo de los
elemtos de clase p de clase de erro de la siguiente
forma:
[Link] {
color:red;
}
RESUMEN DEL CAPÍTULO CSS
Utiliza el atributo style HTML para el estilo en línea
Utiliza el CSS background-color para los colores de
fondo
Utiliza la CSS font-family para tipos de fuentes
Utiliza la CSS font-size para tamaños de fuente
Utiliza la CSS text-align para las alineaciones de texto
Utiliza el código HTML <style> para definir CSS interna
Utiliza el código HTML <link> para definir CSS externa
Utiliza el código HTML elemento <head> para guardar
los elementos <style> y <link>
PRÁCTICA
Realiza los ejercicios CSS1,CSS2,CSS3 y CSS4
Estiliza tu página html con un CSS externo que:
Cambie el tipo de letra de los párrafos(comic-sans).
Cambie el color de fondo de las noticas
Cambie el color de letra de los títulos
Alinee el titulo de la página en el cetro
Aumente el tamaño del titulo de la página
Añade el resto de cambios que veas oportunos
para que la página quede más a tu gusto.
CSS MODELO CAJA
MODELO DE CAJA
Cada elemento HTML visible tiene un cuadro a
su alrededor, incluso aunque no lo veamos.
MODELO DE CAJA
Podemos modificar las propiedades CSS de estos elementos
con los nombres
Padding
Border
Margin
PROPIEDAD BORDER
Empecemos añadiendo un borde a un párrafo:
p {
border:1px solid;
}
En el borde podemos cambiar su grosor, su estilo y su color
p {
border-style: solid;
border-color: red;
border-width: 2px;
}
Si queremos ver el borde es OBLIGATORIO cambiar su estilo al menos, ya
que por defecto su valor es : “none” (ninguno).
Abreviatura de esta propiedad es: border: width style color
El ejemplo anterior abreviado sería:
p { border: 2px solid red;}
PROPIEDAD PADDING (RELLENO)
El padding es el espacio entre el contenido y el
borde.
Toquemos el ejemplo anterior para definir el
tamaño del padding del párrafo:
p {
border: 2px solid red;
padding: 20px;
}
PROPIEDAD MARGIN (MARGEN)
El Margin (margen) define el espacio fuera del
borde, es decir el espacio alrededor del elemento
que lo define.
Añadimos margen al ejemplo anterior
p {
border: 2px solid red;
padding: 20px;
margin: 20px;
}
DISTINTOS LADOS DE LA CAJA
Hasta ahora siempre hemos definido el tamaño (del
border,padding y margin) de los cuatro lados de la caja.
Podemos definirlos de forma independiente añadiendo
el lado de la caja que queremos modificar de la
siguiente forma:
p {
border-top: 2px solid red;
padding-top: 20px;
margin-left: 20px;
}
DISTINTOS LADOS DE LA CAJA
Tambien podemos cambiar los distintos lados de
la caja de forma abreviada teniendo en cuenta el
siguiente orden:
propiedad: top right bottom left
Ejemplo:
p {
padding: 25px 50px 25px 50px;
}
En el ejemplo existe un relleno de 25px encima y
debajo del contenido, mientras que a los lados
existe un relleno de 50px.
PRÁCTICA
Dibuja la caja para el título del periódico con
las siguientes características:
Color de fondo
Borde
Margen arriba de 10px y debajo de 25px
Padding a los lados de 30px y arriba y debajo de
10px.
APRENDIENDO HTML DESDE CERO
TABLAS
TABLAS
Las tablas se definen con la etiqueta <table>.
Las tablas se dividen en filas de la tabla con la
etiqueta <tr>.
Las filas se dividen en datos de la tabla con la
etiqueta <td>.
Una fila de la tabla también puede dividirse en
encabezados de la tabla con el <th> etiqueta.
TABLAS
<tr> -> Nueva fila
<td> -> nuevo dato (una celda más en la
misma fila)
<th> -> es una celda igual que <td> pero para
los títulos de las tablas.
TABLAS
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Firstname Lastname Points
Jill Smith 50
Eve Jackson 94
John Doe 80
TABLAS
La etiqueta <caption> añade un titulo a la tabla.
Ejemplo:
<table style="width:100%">
<caption>Ahorro mensual</caption>
<tr>
<th>Mes</th>
<th>ahorro</th>
</tr>
<tr>
<td>Enero</td>
<td>100€</td>
</tr>
<tr>
<td>Febrero</td>
<td>50€</td>
</tr>
</table>
DANDO FORMATO A LAS TABLAS (CSS)
Para añadir bordes a la tabla y las celdas:
table{
border: 1px solid black;
}
th{
border: 1px solid black;
}
td{
border: 1px solid black;
}
Para abreviar lo anterior podemos
utilizar:
Table,td,th{
border: 1px solid black;
}
DANDO FORMATO A LAS TABLAS (CSS)
Propiedad CSS border-collapse: Si le damos el
valor collapse, une los bordes de las celdas en
un solo bode.
Ej:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
DANDO FORMATO A LAS TABLAS (CSS)
Propiedad CSS border-spacing: Indica la
separación entre las celdas.
Ej:
table {
border-spacing: 15px;
}
PRÁCTICA
Investiga, que hacen y como se utilizan los
atributos HTML colspan y rowspan. Realiza uno
o varios ejemplos donde los uses y guárdalo
como Tabla_ejercicio0.html
Realiza los ejercicios 1,2,3,4,5,6 sobre tablas.
LISTAS
LISTAS
Veremos los tipos de listas más usados
en HTML.
Lista sin ordenar Lista Ordenada
•The first item [Link] first item
•The second item [Link] second item
•The third item [Link] third item
•The fourth item [Link] fourth item
LISTA SIN ORDENAR
Una lista sin orden comienza con la etiqueta
<ul>.
Cada elemento de la lista se inicia con la
etiqueta <li>.
Los elementos de la lista se marcarán con
balas (pequeños círculos negros).
LISTA SIN ORDENAR
Ejemplo
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
LISTA SIN ORDENADR- ESTILO
Podemos modificar el estilo del marcador de la
lista con la propiedad CSS list-style-type.
Ejemplo:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
LISTA SIN ORDENADR- ESTILO
Existen 4 valores para el atributo list-style-type:
Estilo Descripción
list-style-type: disc Los elementos de la lista se
marcará con balas (por
defecto)
list-style-type: circle Los elementos de la lista
serán marcados con círculos
list-style-type: square los elementos de la lista
estará marcada con
cuadrados
list-style-type: none Los elementos de la lista no
se marcarán
LISTAS ORDENADAS
Una lista ordenada comienza con la etiqueta <ol>.
Cada elemento de la lista se inicia con la etiqueta
<li>.
Los elementos de la lista serán marcados con los
números.
Ejemplo:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
LISTAS ORDENADAS - ESTILO
Al igual que con las listas no ordenadas
podemos modificar el marcado de elemento,
en este caso con el atributo html type
Ejemplo:
<ol type="A">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
LISTAS ORDENADAS - ESTILO
Type puede tener 5 valores distintos
Type Descripcion
type="1" La lista se enumera con números
type="A" La lista se enumera con letras mayúsculas
type="a" La lista se enumera con letras minúsculas
type="I" La lista se enumera con números romanos en
mayusculas
type="i" La lista se enumera con números romanos en
minúsculas
MEZCLA DE LISTAS
Podemos meter una lista dentro de otra.
Ejemplo
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
LISTAS HORIZONTALES
Para realizar una lista horizontal, basta con cambiar la propiedad
CSS display( como se muestra el elemento) de cada elemento(li).
Ejemplo:
<style>
li {
display:inline;
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
BLOQUES
BLOQUES Y ELEMENTOS EN LINEA
La mayoría de los elementos HTML se definen como elementos de
bloque o elementos en línea.
Los elementos de nivel de bloque comienzan normalmente (y
finalizan) con una nueva línea, cuando se muestra en un navegador.
Ejemplos: <h1>, <p>, <ul>, <table>
Los elementos en línea normalmente se muestran sin saltos de
línea.
Ejemplos: <b>, <td>, <a>, <img>
ELEMENTO <DIV>
El HTML <div> elemento es un elemento de bloque que
puede ser utilizado como un contenedor para otros
elementos HTML.
El <div> elemento no tiene ningún significado especial. No
requiere atributos, pero el estilo y la clase son comunes.
Debido a que es un elemento a nivel de bloque, el
navegador mostrará saltos de línea antes y después de ella.
Cuando se utiliza junto con CSS, el elemento <div> se puede
utilizar para bloques de estilo de contenido.
Ejemplo:
<div style="background-color:black;
color:white; margin:20px; padding:20px;">
<h2>London</h2>
<p>
London is the capital city of England. It is
the most populous city in the United Kingdom,
with a metropolitan area of over 13 million
inhabitants.
</p>
</div>
ELEMENTO <SPAN>
El elemento HTML <span> Es un elemento en línea que
puede utilizarse como un contenedor para el texto.
El elemento <span> no tiene ningún significado especial. No
requiere atributos necesarios, pero el estilo y la clase son
comunes.
A diferencia de <div>, que está formateado con saltos de
línea, el elemento <span> no tiene ningún tipo de formato
automático.
Cuando se utiliza junto con CSS, el <span> puede ser
utilizado para piezas de estilo del texto:
ELEMENTO <SPAN>
Ejemplo:
<h1>My <span style="color:red">Impor
tant</span>Heading</h1>
IFRAME
<iframe> es una etiqueta utilizada para
mostrar una página html dentro de otra página
html.
La sintaxis es :
<iframe src="URL“ width=“ancho”
height=“alto” ></iframe>
PRÁCTICA
Crea un bloque por cada noticia y modifica su
background
Crea una nueva página html que tenga un
iframe a la página de cenec.
LAYOUTS (PLANTILLAS)
LAYOUTS
El <div> se utiliza a menudo como una
herramienta de diseño, ya que fácilmente se
puede posicionar con CSS.
Ejemplo:
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section"">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © [Link]
</div>
</body>
LAYOUTS
Mismo ejemplo CSS:
<style>
#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
LAYOUT CON HTML5
HTML5 ofrece nuevos elementos semánticos
que definen las diferentes partes de una
página web:
NUEVOS BLOQUES SEMÁNTICOS
<header>:Define un encabezado de un documento o una
sección
<nav> Define un contenedor para los enlaces de navegación
<section> Define una sección en un documento
<article> Define un artículo autónomo independiente
<aside> Define a un lado el contenido aparte del contenido
(como una barra lateral)
<footer> Define un pie de página de un documento o una
sección
<details> Define detalles adicionales
<summary> Define un título para el elemento de datos
Ejemplo:
body>
<main>
<header><h1>City Gallery</h1></header>
<nav id= menu >
<ul><li>London</li><li>Paris</li><li>Tokio</li></ul>
</nav>
<aside>
Columna </br>
Columna </br>
</aside>
<section>
<article><h1>London</h1><p>London is the capital city of England. It is the most populous
city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article><p>Standing on the River Thames, London has been a major settlement for two
millennia,its history going back to its founding by the Romans, who named it Londinium.</p>
</section>
</article>
<footer>Copyright © [Link]</footer>
</main>
</body>
CREANDO UNA PLANTILLA CON HTML5 Y CSS3
Selector universal *
Comencemos con algunas reglas básicas que
nos ayudarán a proveer consistencia al diseño:
*{
margin: 0px;
padding: 0px;
}
CREANDO UNA PLANTILLA CON HTML5 Y CSS3
Nueva jerarquía para cabeceras
h1 { font: bold 20px verdana, sans-serif; }
h2 {font: bold 14px verdana, sans-serif; }
Las propiedades que pueden ser declaradas usando font son:
font-style, font-variant , font-weight, font-size, line-height, y
font-family en este orden. Con estas reglas estamos
cambiando el grosor, tamaño y tipo de letra del texto dentro
de los elementos <h1> y <h2>
Centrando el cuerpo
body {
text-align: center;
}
Creando la caja principal
main {
width: 960px;
margin: 15px auto;
text-align: left;
}
CREANDO UNA PLANTILLA CON HTML5 Y CSS3
La cabecera
header{ Recuerda, padding es el margen
interior, al igual que margin tiene
background: #FFFBB9; 4,2,o 1 valores.
border: 1px solid #999999;
padding: 20px;
}
Barra de navegación
#menu {
background: #CCCCCC;
padding: 5px 15px; #menu li, es un selector de los li hijos de
} menu
Display: inline-block convierte en cajas inline
List-style: none les quita el estilo de lista
#menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;
}
section y aside : son dos cajas ordenadas horizontalmente. El Modelo de Caja Tradicional es
construido sobre estilos CSS que nos permiten especificar la posición de cada caja. Usando la
propiedad float podemos posicionar estas cajas del lado izquierdo o derecho de acuerdo a nuestras
necesidades.
section {
float: left;
width: 660px; Float: Hace que el elemento flote hacia un lado o al otro
margin: 20px; en el espacio disponible
} El tamaño que ocupa cada caja a lo ancho es su width,
aside { más el margen y el padding a cada lado.
float: left;
width: 220px;
margin: 20px 0px;
padding: 20px;
background: #CCCCCC;
}
Footer: Otra propiedad tiene que ser aplicada al elemento
<footer> para posicionarlo de forma correcta.
footer{
clear: both; clear: Esta propiedad simplemente restaura
las condiciones normales del área ocupada
text-align: center;
por el elemento, no permitiéndole
padding: 20px; posicionarse adyacente a una caja flotante.
border-top: 2px solid #999999; El valor both, significa que ambos lados del
} elemento serán restaurados y el elemento
seguirá el flujo normal. Para un elemento b
lock, quiere decir que será posicionado
debajo del último elemento, en una nueva
línea
últimos toques: Lo que nos queda por hacer es trabajar
en el diseño del contenido.
article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
PRÁCTICA
Implementa una aplicación web (varias páginas
html) que agrupe 3 noticias de 3 periódicos
distintos y que siga el siguiente formato:
Titulo de tu Aplicación
Periodico1 Periodico2 Periodico 3
Noticia1
Noticia 1 Subtitulo notica 1
Noticia 2 Nombre Periodico
Imagen Notica 11
Noticia 3 Texto noticia1 Texto noticia1Texto
noticia1……………………………………………
………………………………………………………
Noticia2
Subtitulo notica 2 …….
….
Pagina creada por Víctor Custodio Copyright 2015
CONSEJOS
El formato en bloques de HTML de las páginas
será:
header
nav
SECTION
Article
Nombre Periodico 1
aside Article
Article
footer
CONSEJOS
Para realizar esta práctia debes crear 3
páginas html (1 por cada periódico).
Los enlaces de la barra de navegación (que
tiene los nombres de periódicos) enlazarán
con la página html que has realizado de cada
periódico.
Los enlaces en la columna de la izquierda
(bloque aside) enlazarán con las noticias de la
página web actual (un enlace interno)
CONSEJOS
Para crear enlaces internos debes etiquetar el elemento con el elemento a que solo
tenga un id como atributo y posteriormente, en el enlace, indicar en el atributo href,
el id del elemento a enlazar.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<p> <a href="#C4">Mira el Capitulo 4.</a> </p>
<h2>Capitulo 1</h2>
<p>Este capitulo explica bla bla bla…</p>
<h2>Capitulo 2</h2>
<p>Este capitulo explica bla bla bla…</p>
<h2>Capitulo 3</h2>
<p>Este capitulo explica bla bla bla…</p>
<h2><a id=“C4”>Capitulo 4 </a></h2>
<p>Este capitulo explica bla bla bla…</p>
<h2>Capitulo 5</h2>
<p>Este capitulo explica bla bla bla…</p>
....
CONSEJOS
Crea primero una página, preocúpate de que
funcione, después realiza las otras dos copiando,
pegando y cambiando el contenido. Por último enlaza
las páginas.
El contenido es lo menos importante, lo importante es
el uso de todos los elementos que hemos visto hasta
ahora, si te motiva más hacer una página de recetas,
o de criticas de películas u otro tipo de página
consúltalo con el profesor para que verifique que es
un contenido adecuado para la práctica.
FORMULARIOS
FORMULARIOS
Formularios HTML se utilizan para pasar datos a un
servidor.
Un formulario HTML puede contener elementos de
entrada como campos de texto, casillas check, botones
de radio, botones de envío y más. Un formulario también
puede contener listas de selección, áreas de texto libre,
leyendas y elementos de etiquetado.
La etiqueta <form> se utiliza para crear un formulario
HTML:
El elemento del formulario más importante es el elemento
<input>.
El elemento <input> se utiliza para seleccionar la
información del usuario.
Un elemento <input> puede variar de muchas maneras,
dependiendo del tipo de atributo. Un elemento <input>
puede ser de tipo de campo de texto, casillas de check,
contraseña, botón de radio, botón de enviar, y más.
A continuación se describen los tipos de entrada más
comunes.
LOS CAMPOS DE TEXTO
<input type = "text"> define un campo de
entrada de una línea donde un usuario puede
introducir texto:
<form>
Nombre: <input type="text" name= nombre"><br>
Apellidos: <input type="text" name= apellidos">
</form>
CAMPO DE CONTRASEÑA
<input type="password"> define el campo de
contraseña
<form>
Password: <input type="password" name="pwd">
</form>
BOTONES DE RADIO
<input type = "radio"> define un botón de
radio. Los botones de radio permiten al usuario
seleccionar sólo una de un número limitado de
opciones:
<form>
<input type="radio" name="sex" value= Hombre">Hombre<br/>
<input type="radio" name="sex" value= Mujer">Mujer
</form>
CASILLAS CHECK
<input type = "checkbox"> define una casilla de
check. Las casillas de check dejan a un usuario
seleccionar cero o más opciones de un número
limitado de opciones.
<form>
<input type="checkbox" name= vehiculo" value= bici">Tengo una bici<br>
<input type="checkbox" name="vehiculo value= coche">Tengo un coche
</form>
LISTAS DE SELECCIÓN
<select> define una selección y las <option>
que estén dentro definen las distintas opciones
que tiene el usuario.
<form>
<select name=“coche">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
ÁREA DE TEXTO
El <textarea> define un control de entrada de texto de varias líneas.
Un área de texto puede contener un número ilimitado de caracteres,
y hace que el texto en una fuente de ancho fijo (generalmente
Courier).
El tamaño de un área de texto puede ser regulado por los atributos
cols y rows, o incluso mejor; a través de las propiedades CSS de
altura y anchura:
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
BOTON DE ENVIAR
Un botón de enviar se utiliza para enviar datos del
formulario a un servidor. Los datos se envían a la
página especificada en el atributo de acción del
formulario.
El programa definido en el atributo de acción, por
lo general hace algo con las aportaciones
recibidas:
<form name="input" action= [Link]" method="get">
Nombre de usuario: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<BUTTON>
Esta etiqueta también creará un botón, pero
este botón no tiene porque estar dentro de un
formulario ni tiene porque enviar ninguna
información al servidor:
<button type="button">Cliqueame!</button>
El atributo type puede tener los valores:
reset,button y submit.
HTML 5- NUEVOS TIPOS DE CAMPOS
HTML5 tiene varios nuevos tipos de entrada para los formularios. Estas
nuevas características permiten un mejor control de entrada y validación:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
Week
Ejemplo de uso:
<form>
<input type=“color” name=“colorFavorito”/>
</form>
HTML5 – NUEVOS ATRIBUTOS PARA LOS
ELEMENTOS INPUT
HTML5 añade los siguientes atributos para configurar las etiquetas
input:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
PRÁCTICA
1. Investiga como funcionan los nuevos tipos de inputs de html5, y
crea un formulario donde muestres su uso (si funcionan en
Chrome). Guarda el ejercicio como
ejercicioFormulario_tunombre.html
2. Investiga como funciona y utiliza en el formulario del punto anterior
los atributos:
Autofocus, min & max, placeholder y required.
Guarda el ejercicio como ejercicioFormulario2_tunombre.html
3. Añade en la página de noticias del anterior ejercicio, un enlace a
una página de logueo y otro enlace a una página de registro. Haz
estas dos páginas. La página de registro debe solicitar los mismos
datos que la página de registro de Facebook, la página de login, un
nombre de usuario una contraseña y un botón de enviar.