curso de desarrollo web: etiquetas html
TRANSCRIPT
Para realizar sitios web debes probar su funcionamiento en la mayor cantidad de navegadores posibles o en los más utilizados, los cuales son: Chrome (64,8%), Firefox (21,3%), IE (7,1%), Safari (3,8%), Opera (1,8%). Junio de 2015. w3school.com
Estadísticas del uso de los navegadores en los dispositivos móviles hasta Abril del 2015.Las cifras demuestran que hoy el uso de internet es mayoritariamente desde los dispositivos móviles que de escritorio.
Hoy ya no es necesario saber cierta aplicación para decir que se sabe de diseño web (como era antes con Dreamweaver), ahora es más importante saber cierta tecnología independiente del software. Puedes crear tus páginas desde el simple block de notas o aplicaciones gratuitas como Brackets, Atom, Sublime Text, Bluefish, ICEcoder, TextWrangler, Notepad++, Kompozer, etc.
Capítulo 1: Etiquetas HTMLEstructura HTML
La mayoría de las etiquetas tienen un inicio y un final y su contenido se encuentra dentro de estas dos, ej: <html> </html>
Pero existen otras que se cierran solas, ej: <img src=“foto.jpg”>
Las etiquetas que se cierran solas y las de apertura pueden llevar uno o más atributos
Curso de Desarrollo Web Prof. Jorge Llantén Briceño. Diseñador Gráfico Publicitario de Universidad Santo Tomás (2000). Diplomado Profesional Web Manager & Web Design Pro (2014). [email protected] 9-98367785 www.j2.cl
<!DOCTYPE html> Esta etiqueta indica que nuestro documento es HTML5.
<html> Inicio de nuestro documento HTML.
<head><head> Cabecera del documento. Aquí va información importante para los buscadores y no se ve dentro de nuestro navegador.
<body></body> Cuerpo del documento. Es todo lo visible en nuestro navegador.
</html> Cierre del documento HTML.
Capitulo 1: Etiquetas HTML Página � de �1 6
ej: <html lang=“es”>(Indica que el contenido de nuestro documento está en idioma español y si el navegador no esta en el mismo idioma te da la alternativa de traducir el sitio.)
<!--comentario --> Etiqueta para aplicar comentarios dentro del HTML sin influir en el resto del código.
Las siguientes etiquetas son las mas frecuentes que van dentro de <head>
<title></title> Titulo del documento. Es importante para los buscadores, si no lo tienes quedaras abajo en los resultados de búsqueda.
<meta> Define los metadatos que no pueden ser definidos usando otro elemento HTML.Puede tener los siguientes atributos.
<meta charset=“UTF-8”> Indica que la codificación de caracteres utilizados es occidental.
<meta name="author" content="nombre del autor”>
Autor del sitio.
<meta name="description" content=“descripción de la página”>
Descripción del sitio.
<meta name="keywords" content=“palabras, clave”>
Palabras clave separadas por “,” (Cada vez se usa menos).
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
Hacer que nuestra página ajustable y se adapte en IOS
<link> Un vinculo a otro archivo independiente. Puede ir con los siguientes atributos
<link rel="stylesheet" href=“style.css”>
Para llamar a nuestra hoja de estilos
<link rel="shortcut icon" type="image/x-icon" href=“favicon.ico”>
Agregar un Favicon. Para mostrar el resto de los códigos para favicon de diferentes plataformas y tamaños. Puedes general el código y las imágenes desdehttp://realfavicongenerator.net
<link href=“mobile.css” rel=“stylesheet” type=“text/css” media=“only screen and (min-width:0px) and (max-width:320px)”>
Linea para llamar a diferentes archivos CSS de una página adaptable. (las medidas son variables)
<script><script> Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
<script src=“js/jquery-1.11.2.min.js”></script>
Para utilizar la libreria de JQuery Suele utilizarse también al final de la página, antes que acabe la etiqueta <body>
Capitulo 1: Etiquetas HTML Página � de �2 6
<!—[if lt IE 9]><script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><!—[endif]>
Hacer funcionar las etiquetas HTML5 en versiones de IE incompatibles.
<style><style> Información de estilos. Se usa cada vez menos dentro del documento HTML.
<style>p{margin: 0;}</style> Ejemplo de uso de la etiqueta <style>
<p></p> Párrafo
<strong></strong> Énfasis fuerte. deja el texto en negrita indicando importancia
<em> </em> Énfasis menos fuerte. deja el texto en cursiva indicando importancia, pero menos que <strong>
<h1></h1>…hasta… <h6></h6> Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce. <h1> solo se puede usar una vez.
<address></address> Define una sección que contiene información de contacto.
<blockquote></blockquote> Representa una contenido citado desde otra fuente.
<q></q> Representa una cita textual inline.
<cite></cite> Representa el título de una obra .
<abbr></abbr> Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
<code></code> Fragmento de código de computadora.
<dfn></dfn> Representa un término cuya definición está contenida en su contenido ancestro más próximo.
<ins></ins> Define una adición en el documento.
<del></del> Define una remoción del documento.
<sub></sub> Representa un subíndice.
<sup></sup> Representa un superíndice.
<img> Representa una imagen. ej: <img src="logo.jpg" width="100" height="100" alt="Logo" title="Logo de empresa"/>
<a></a> Representa un hiperenlace o vínculo , enlazando a otro recurso.
Capitulo 1: Etiquetas HTML Página � de �3 6
Etiquetas HTML más comunes que podemos agregar dentro de <body>
Otros atributos que podemos agregar dentro del vinculo son:target=”_blank” para abrir cada vínculo con esta opción en una ventana nueva.target=”new” para abrir todos los vínculos con esta opción en una sola ventana nueva.title=“textos” titulo que aparece al situar el cursor sobre el vínculo.
Ejemplos de vínculos <a>
<a href=“http://www.j2.cl”>Ir a J2</a> URL absoluta
<a href=“contacto.html”>contacto</a> URL relativa
<a href=“#arriba”>subir</a> Ancla dentro de la misma página
<a href=“mailto:[email protected]”>Escribeme</a> Abre la aplicación de correo electrónico por defecto con la dirección de correo.
<a href=“1.pdf”>baja el archivo</a> Se puede vincular a cualquier archivo.
<a href=“tel:+56955555”>llamame</a> En los móviles el vínculo marca el número telefónico.
<a href=“sms:+56955555”>Enviame un mensaje</a> En los móviles el vínculo envía un mensaje de texto a ese número telefónico.
Listas
<ol></ol> Define una lista ordenada de artículos.
<ul></ul> Define una lista de artículos sin orden.
<li></li> Define un artículo de una lista ennumerada.
<dd></dd> Representa la definición de los términos listados antes que él.
<dl></dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt></dt> Representa un término definido por el siguiente <dd>.
Ejemplo de Lista de definición
<dl> <dt>gato</dt> <dd>es peludo</dd> <dd>toma leche</dd> <dt>perro</dt>
<dd>come huesos</dd></dl>
Resultado:gato es peludo toma lecheperro come huesos
Capitulo 1: Etiquetas HTML Página � de �4 6
Otras etiquetas usadas frecuentemente<br> Representa un salto de línea.<hr> Separador de linea horizontal.<iframe></iframe> Representa un contexto anidado de navegación, es decir, un documento
HTML embebido.
Ejemplo de Lista sin orden
<ul><li>León</li><li>Elefante</li><li>Jirafa</li></ul>
Resultado:• León• Elefante• Jirafa
Ejemplo de Lista ordenada
<ul><li>Primero</li><li>Segundo</li><li>Tercero</li></ul>
Resultado:1. Primero2. Segundo3. Tercero
Tablas
<table></table> Representa datos con más de una dimensión.
<tr></tr> Representa una fila de celdas en una tabla.
<td></td> Representa una celda de datos en una tabla.
<th></th> Representa una celda encabezado en una tabla.
Formularios
<form></form> Representa un formulario, consistente de controles que puede ser enviado a un servidor para procesamiento.
<fieldset></fieldset> Representa un conjunto de controles.
<legend></legend> Representa el título de un <fieldset>.
<label></label> Representa el título de un control de formulario.
<input> Representa un campo de datos escrito que permite al usuario editar los datos.
<button></button> Representa un botón
<select></select> Represents un control que permite la selección entre un conjunto de opciones.
<datalist> </datalist> Representa un conjunto de opciones predefiniddas para otros controles.
<option></option> Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
<textarea></textarea> Representa un control de edición de texto multi-línea.
<keygen> Representa un control de un generador de contraseñas.
Capitulo 1: Etiquetas HTML Página � de �5 6
Las etiquetas se pueden visualizar principalmente de 2 formas, en linea o en bloque. Hoy las etiquetas que ocupamos en su mayoría tienen un significado semántico para que los buscadores reconozcan el contenido de las etiquetas.
Existen 2 etiquetas que podrían reemplazar a todas esas que no tienen ningún contenido semántico las cuales deberían ir desapareciendo mientras más se ocupen las etiquetas HTML5.
PRÓXIMO CAPITULO: ESTILOS CSS
<div></div> Representa un contenedor genérico sin ningún significado especial.
<span></span> Representa texto sin un significado específico. Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o id.
Etiquetas más comunes HTML5
<header> </header> Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<nav> </nav> Define una sección que solamente contiene enlaces de navegación
<section> </section> Define una sección en un documento.
<article> </article> Define contenido autónomo que podría existir independientemente del resto del contenido.
<aside> </aside> Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<footer> </footer> Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
<figure> </figure> Representa una figura ilustrada como parte del documento.
<figcaption> </figcaption> Representa la descripción de una figura.
<time> </time> Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
<video> </video> Representa un video , sus archivos de audio y canciones asociadas, con la interfaz necesaria para reproducirlos.
<audio> </audio> Representa un sonido o stream de audio.
<svg> </svg> Define una imagen vectorial insertada.
<main> </main> Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.
Capitulo 1: Etiquetas HTML Página � de �6 6