html5 & css3 · 2017-03-04 · práctica 4 usando selectores css para estilizar elementos...
TRANSCRIPT
HTML5 & CSS3Gilberto Ayala
¿Qué es HTML?
¿Qué es HTML?Introducción
HyperText Markup Language (Lenguaje de marcas de hipertexto) Lenguaje de marcado: codificar un documento mediante texto y etiquetas
No es lenguaje de programación No aritmética No variables
¿Qué es HTML?Puntos importantes
Estándar a cargo del World Wide Web Consortium (W3C) Lenguaje más importante en la WWW Language interpretado Adaptación a cambios
¿Qué es HTML?Elementos
Descripción por etiquetas <>/
Elementos Estructura básica de HTML <elemento> </elemento>
Propiedades Atributo: contiene restricciones para validar el documento. Contenidos dentro de la etiqueta. <elemento atributo=“valor”> Contenido</elemento>
¿Qué es HTML?Elementos: ejemplos
<h2>Hola mundo</h2> <b>Negrita</b> <em>Énfasis</em>
¿Qué es HTML?Atributos
Pares nombre=valor Se escriben en la etiqueta inicial Valor entre comillas “” ‘’
¿Qué es HTML?Estructura básica
<html> inicio del documento <head> cabecera del documento <title> título de la página <link> vinculación de documentos externos <style> vinculación con estilos externos <meta> metadatos del documento
<body> cuerpo del documento <h1>-<h6> encabezados <table> tabla
¿Qué es HTML?Estructura básica
<a> hipervínculo <div> división de página <li><ol><ul> etiquetas para listas
¿Qué es HTML?Estructura básica
¿Qué es HTML?Versiones
Tim Berners-Lee Diseñado para compartir fácilmente información entre científicos. Funcionamiento sobre redes de computadoras basadas en el protocolo TCP/IP. En 1990 Tim crea el proyecto WWW y el sistema que facilita la lectura de información mediante un programa de navegación. En 1993 se propone HTML+ como propuesta evolutiva gradual sin éxito.
¿Qué es HTML?Versiones
En 1995 se presenta el estándar 3.0 por la W3C Tablas, elementos matemáticos complejos. Fue abandonado.
HTML 3.2 abandona las características del 3.0. MathML.
HTML 4.0 Hojas de estilo Scripts Marcos
¿Qué es HTML?HTML5
Quinta revisión del lenguaje HTML Elementos nuevos: <nav> <footer> <article> <aside> <audio> <canvas> <datalist> <figure> <header> <section> <time> <video> Incorpora etiquetas con codecs para mostrar contenido multimedia. Etiquetas para manejo de datos Mejoras en los formularios Visores: MathML, SVG
¿Qué es HTML?HTML5: Web Semántica
Añade etiquetas para construcción de Web Semántica (Web 3.0) Las etiquetas permiten describir el significado del contenido Permite indexación e interpretación de la meta información Permite incorporar ficheros RDF/OWL para descripción de relaciones entre términos
Web Semántica
¿Qué es HTML?HTML5: APIs y JavaScript
Drag & Drop mediante eventos. Offline: descarga de contenidos y trabajo local. Geolocalización Storage: almacenamiento local (SQLite). WebSockets: comunicación bidireccional entre páginas. Estándar futuro: acceso al hardware a bajo nivel; red, ficheros, CPU, memoria, puertos USB, cámaras, micrófonos.
Descargar cheat sheet
¿Qué es HTML?DOCTYPE
<!DOCTYPE> deberá ser la primera línea que se declare en el documento html. No es una etiqueta html. Es una instrucción para el navegador sobre la versión del documento HTML que está siendo interpretado. HTML no está basado en SGML, de ahí que no requiera ninguna otra referencia. <!DOCTYPE html>
¿Qué es HTML?DOCTYPE
No es case sensitive HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd">
Contiene todos los elementos y atributos html, incluyendo elementos de presentación y elementos obsoletos.
Validador
Editores
EditoresDreamweaver
Software de pago Versión actual: Adobe Dreamweaver CC Adobe
Prueba gratuita
EditoresTextMate
Software gratuito Disponible sólo para MacOS Soporta mas de 50 lenguajes Creación de macros Proyectos
Descargar
EditoresEclipse
Software gratuito Multiplataforma Proyectos Múltiples lenguajes de programación Integración con Github
Descargar
EditoresAptana
Software gratuito Multiplataforma Proyectos Enfocado en desarrollo Web Integración con Eclipse
Descargar
EditoresNotepad
Imprescindible en cualquier S.O. No identificación de sintaxis Sin administrador de proyectos Simple
EditoresAtom
Gratuito Multiplataforma Instalación de paquetes Administración de proyectos Personalización Aplicación desarrollada con HTML, JavaScript y CSS
Descargar
EditoresAtom: combinaciones de teclado
ctrl/cmd + alt + i ctr/cmd + d ctr/cmd + shift + l ctr + g
EditoresAtom: combinaciones de teclado
Atajo Acción
ctr + N Nueva pestaña
ctr + W Cerrar pestaña
ctr + S Guardar pestaña
ctr + shift + t Reabrir pestaña cerrada
ctrl + m Saltar llave - paréntesis
ctr + z Deshacer el último cambio
ctr + y Revertir el último cambio
EditoresAtom
instalar: minimap file-icons autoclose-html open-in-browser
Práctica 1
Práctica 1Hello World
1. Abrir Atom. 2. Escribir “Hello World” 3. Abrir el navegador. 4. Agregar dentro de etiqueta <h1> 5. Ver cambios 6. Agregar etiqueta <h2> con el texto Cake App
7. Agregar una etiqueta pe con el texto: Hello Paragraph
Práctica 2Comentarios
Sintaxis: <!— —> 1. Ocultar la etiqueta h1 sin eliminar el texto.
2. Sustituir el texto del párrafo por el texto lorem ipsum
Práctica 3Cambiar color del texto
Utilizar atributo: style = "color: blue” atributo = valor en etiqueta h2 Color deseado: rojo
Práctica 4Usando selectores CSS para estilizar elementos
Existe cientos de propiedades de CSS (Cascadig Style Sheets) puedes usar para cambiar la manera en la que un elemento se muestra. Al inicio de tu código crea un elemento style, como el siguiente: <style> </style>
Dentro de dicho elemento puedes crear un selector CSS para modificar los elementos que quieras, por ejemplo: <style> h2 {color: red;} </style>
Práctica 5Usando selectores CSS para estilizar elementos
1.Elimina el estilo de tu etiqueta h2 y crea un estilo CSS para hacer todas las etiquetas h2 rojas.
Práctica 6Usar una Clase CSS para estilizar un elemento
Las clases son estilos reutilizables que pueden ser agregados a elementos HTML. Ejemplo: <style> .blue-text { color: blue; } </style>
Puede aplicar la clase a un elemento de esta manera: <h2 class=“blue-text”>Cake App</h2>
1. Dentro de tu elemento style cambia el selector a .red-text y actualiza el valor de azul a rojo.
2.Agrega la clase a tu elemento h2 para que obtenga el valor de la clase red-text.
Práctica 7Estilizar múltiples elementos con una clase CSS
Recuerda que puedes agregar clases a elementos html usando: class=“your-class-here" Recuerda que los selectores CSS de clase requieren un punto al inicio, tal como: .blue-text { color: blue; } Y que las declaraciones de clases no requieren iniciar con un punto: <h2 class=“blue-text”>Cake App</h2>
1. Aplica el estilo red-text a tu elemento p.
Práctica 8Cambiar el tamaño de fuente de un elemento
El tamaño de fuente es controlado por la propiedad font-size: h1 { font-size: 30px; }
1. Crea un segundo elemento p después del ya declarado con el siguiente texto ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
2. Dentro de la etiqueta style que contiene tu clase red-text, crea una entrada para elementos p y establece el tamaño de fuente a 16 pixeles: 16px.
Práctica 9Establecer la familia de fuente de un elemento
Puedes establecer la familia de fuente mediante la propiedad font-family, por ejemplo si quieres que tus etiquetas h2 usen la fuente Sans-serif, tendrías que aplicar el siguiente estilo: h2 { font-family: Sans-serif; } 1. Haz que todos tus elementos p usen la fuente Monospace.
Práctica 10Importar una fuente desde Google Font
Puedes importar una fuente desde el servicio Google Fonts, y utilizar una fuente sin importar si no está instalada en tu computadora o en la computador del cliente.
1. Copia el siguiente snippet al inicio de tu código: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type=“text/css">
2. Cambia la fuente de tus etiquetas h2 por la fuente importada Lobster.
Práctica 10Especificar como seleccionar una fuente
Existen fuentes predeterminadas instaladas en los navegadores (Monospace, Serif, Sans-Serif).
Cuando una fuente no está disponible, puedes indicarle al navegador por cual fuente sustituir la fuente original.
Ejemplo: si quieres usar Helvetica, pero si no está disponible, usar Sans-serif: p { font-family: Helvetica, Sans-Serif; }
1. Comenta tu llamada a Google Fonts.
2. Agrega Monospace como opción de fuente en tu etiqueta h2.
Práctica 11Agregar imágenes a tu sitio web
Puedes agregar imágenes a tu sitio web usando el elemento img y apuntando a una imagen específica mediante su URL, usando el atributo src. Ejemplo: <img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up. “> Deberá tener un atributo alt (para lectores).
Los elementos img no tienen etiqueta de cierre.
1. Agrega la siguiente imagen:
http://bit.ly/GameOfTrhonesC
Práctica 12Redimensionar tus imágenes
CSS tiene una propiedad llamada width que controla la anchura de un elemento, se utiliza px, como medida.
Si queremos crear una clase CSS llamada large-image la cual le de a los elementos una anchura de 500 pixeles, usaríamos: <style> .larger-image { width: 500px; } </style> 1. Crea una clase smaller-image y úsala para redimensionar la
imagen a 100 pixeles de ancho.
2. Agrega la clase a tu elemento img.
Práctica 13Agregar bordes alrededor de tus elementos
CSS borders tiene propiedades como style, color, width, por ejemplo si queremos crear un borde rojo de 5 pieles alrededor de un elemento html, usaríamos: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>
1. Crea una clase llamada thick-green-border que establezca un borde de 10 pixeles de grosos con un estilo sólido y agrega el estilo a la foto del pastel. Recuerda que puedes agregar varias clases a un elemento separándolas con un espacio:
<img class="class1 class2">
Práctica 14Agregar bordes redondeados con Border Radius
Podemos crear bordes redondos con la propiedad CSS llamada border-radius.
Puedes especificar un radio de borde en pixeles.
1. Agrega un borde de 10 pixeles a tu clase thick-green-border.
Práctica 15Crear imágenes circulares con border-radius
Adicionalmente puedes usar border-radius usando un porcentaje.
1. Modifica el borde de tu imagen y agrega un 50% de border-radius.
Práctica 16Enlazar a páginas externas con elementos ancla
Los elementos a, también conocidos como anchor, son utilizados para crear enlaces a contenidos que están fuera de la página actual, por ejemplo:
<a href=“http://example"> Example text</a>
etiqueta anchor texto del enlace
atributo href
1. Crear un enlace hacia http://elartedehacerarte.com con el texto “Fotos de pasteles” como texto.
Práctica 17Anidar un elemento ancla a un párrafo
Anidar significa poner un elemento dentro de otro.
1. Anida tu elemento existente dentro de una etiqueta p, de tal manera que aparezca el texto “Ve más fotos de pasteles” pero sólo “ve más” sea texto y “fotos de pasteles” sea parte del texto del elemento enlace.
Práctica 18Crear links inhabilitados
Algunas veces necesitarás crear elementos ancla a tu sitio web antes de establecer hacia dónde redireccionarán, además son útiles cuando se modifica el comportamiento de un enlace usando JavaScript.
1. Reemplaza tu elemento a con el atributo href establecido como “#”.
Práctica 19Convertir una imagen en un enlace
Puedes convertir elementos en enlaces anidándolos dentro de etiquetas a, por ejemplo: <a href="#"> <img class="smaller-image thick-green-border" src="http://bit.ly/GameOfTrhonesC" alt="Game of thrones cake. "></a> Recuerda utilizar el simbolo #, para crear enlaces inhabilitados.
1. Convierte la imagen actual en un enlace inhabilitado.
2. Abre la página en tu navegador y pasa el curso sobre ella.
Práctica 20Crear una lista con viñetas
HTML tiene un elemento especial para crear listas desordenadas, es decir, con viñetas.
Una lista desordenada inicia con <ul> y dentro de ella se deben declarar los elementos dentro de otra etiqueta <li>, por ejemplo: <ul> <li>Pateles</li> <li>Cupcakes</li> </ul> 1. Elimina las dos etiquetas p, creadas anteriormente y crea una lista de
con los siguientes elementos: pasteles, cupcakes, postres.
Práctica 21Crear una lista ordenada
HTML tiene un elemento especial para crear listas ordenadas.
Una lista desordenada inicia con <ol> y dentro de ella se deben declarar los elementos dentro de otra etiqueta <li>, por ejemplo: <ol> <li>Pastel de fondant</li> <li>Pastel de bodas</li> </ol> 1. Elimina las dos etiquetas p, creadas anteriormente y crea una lista de
con los siguientes elementos: Pastel de bodas, Pastel de fondant, Pastel de quequis.
Práctica 22Crear un campo de texto
Los campos de texto son una manera conveniente de obtener datos introducidos por el usuario, se pueden crear con la etiqueta input: <input type=“text"> 1. Crear un input del tipo text al final de tu documento.
Práctica 23Agregar un placeholder a un campo de texto
Un placeholder es el texto que aparece en tu campo de texto antes que el usuario escriba algo.
Puedes crear un placeholder agregando el atributo en tu campo de texto: <input type="text" placeholder="this is placeholder text”> 1. Agregar un placeholder al text input que creaste con el siguiente texto
“Cake photo url”.
Práctica 24Crear un elemento formulario
Puedes construir formularios web que envíe datos a un servidor usando HTML puro. Para hacerlo, sólo necesitas declarar un elemento form:
<form action=“/url-where-you-want-to-submit-form-data"></form>
1. Anida tu campo de texto dentro de un elemento form.
2. Agrega el atributo action=“/submit-cake-photo" al formulario.
Práctica 25Agregar un botón submit al formulario
Podemos agregar un botón a nuestro formulario para presionar y enviar datos a una URL especificada en el atributo de nuestro formulario, podemos definir el botón de la siguiente manera:
<button type="submit">this button submits the form</button>
1. Agrega un botón submit a tu formulario con la palabra “Submit” como su texto.
Práctica 26Usar HTML5 para requerir un campo
Puedes requerir campos de formulario específicos, de tal manera que tus usuarios no puedan enviar el formulario hasta que no se hayan rellenado todos los campos.
Por ejemplo, si quieres hacer que un campo de texto sea obligatorio, sólo necesitas agregar la palabra required dentro de tu etiqueta input.
1. Agrega required a tu campo de texto.
2. Intenta enviar el formulario sin escribir en el formulario.
Práctica 27Crear un conjunto de radio buttons
Puedes usar radio buttons para preguntas dónde deseas que el usuario sólo pueda escoger una respuesta.
Son un tipo de input.
Cada radio buttons debe estar anidado con su propio elemento label.
Todos los radio buttons deben tener el mismo atributo name. Ejemplo: <label><input type="radio" name="indoor-outdoor"> Indoor</label> 1. Agrega una etiqueta p, que diga “Sabor del pan”.
2. Agrega un par de radio buttons a tu formulario. Uno debe tener opción, chocolate, y otro vainilla. El nombre de los radio buttons debe ser “sabor-pan”.
BibliografíaJames H. Coombs, Allen H. Renear, Steven J. DeRose (1995). «Markup Systems and the Future of Scholarly Text Processing». Detroit, Estados Unidos: Universidad de Michigan. Consultado el 10 de Octubre 2016.
A. Fernández-Valmayor, A. Navarro, B. Fernández-Manjón y J. L. Sierra. «Lenguajes de programación, lenguajes de marcado y modelos hipermedia: una visión interesada de la evolución de los lenguajes informáticos». Madrid: Universidad Complutense de Madrid. ISSN 1139-8736. Consultado el 10 de Octubre 2016.
Carolina García Cataño y David Arroyo Menéndez (2002). «Biblioteca Digital y Web Semántica» (BiblioWeb de SinDominio edición). Consultado el 10 de Octubre 2006.. Aplicación de los lenguajes de marcas para una biblioteca digital. Disponible bajo GFDL.
Goldfarb, Charles F. (1996). «The Roots of SGML -- A Personal Recollection». Consultado el 10 de Octubre 2016.
Goldfarb, Charles F. The SGML Handbook. Oxford University Press. ISBN 0-19-853737-9.
HTML5. (2016, 21 de diciembre). Wikipedia, La enciclopedia libre. Fecha de consulta: 21:19, diciembre 29, 2016 desde https://es.wikipedia.org/w/index.php?title=HTML5&oldid=95754034.
Freecodecamp. https://freecodecamp.com
Mozilla developer. https://developer.mozilla.org
HTML5. (2016, 21 de diciembre). W3schools. Fecha de consulta: 21:19, diciembre 29, 2016 desde http://www.w3schools.com/html/default.asp
Este trabajo está licenciado bajo una licencia Internacional Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, por Gilberto
Ayala, openmasterproject.org.
http://creativecommons.org/licenses/by-nc-sa/4.0/