Hola a todos los Taringueros, pues hoy les dejo un post sobre HTML5, de manera mas resumida y entendible. ADVERTENCIA: Este post contiene muchas imágenes, déjalo que cargue; si no logras ver bien las letras de la imagen te sugiero que copies el link de la imagen y lo pegues en otra pestaña para que lo puedas ver con mas claridad Así que empecemos con wikipedia que nos dice: Grande Wikipedia Antes de empezar hay muchas maneras donde puedes comenzar, en un Block de Notas, Macromedia Dreamweaver, Sublime Text, entre otros...Yo les recomiendo el Sublime Text porque si y punto , lo pueden descargar de su Pagina Oficial Si les jode con un mensaje solo ignoren lo es solo para que lo colabores, pues si tienes colabora... Ahora si comencemos... Etiquetas HTML Etiquetas HTML son palabras clave (nombres de las etiquetas) rodeadas por corchetes angulares como Etiquetas HTML que suelen venir en parejas como y b> La primera etiqueta en una pareja es la etiqueta inicial, la segunda etiqueta es la etiqueta de cierre La etiqueta final se escribe como la etiqueta inicial, con una barra diagonal antes del nombre de la etiqueta Inicio y fin son también llamados etiquetas de apertura y cierre de etiquetas Ejemplo: que es el más utilizado. El título suele ser visualizado por los navegadores en la cabecera de página. La etiqueta es compatible con todos los principales navegadores La etiqueta proporciona metadatos sobre el documento HTML. Los metadatos no se muestra en la página, pero será apta para su procesamiento máquina. Meta elementos se utilizan normalmente para especificar descripción de páginas, palabras clave, autor del documento, la última modificación, y otros metadatos. Los metadatos pueden ser utilizados por los navegadores (como mostrar el contenido de la página o reload), los motores de búsqueda (palabras clave), u otros servicios web. Diferencias entre HTML 4.01 y HTML5 El atributo de esquema no es compatible con HTML5. HTML5 tiene un nuevo atributo, juego de caracteres, que hace más fácil para definir charset: HTML 4.01: HTML5: Nota: las etiquetas siempre va dentro del elemento head. Atributos Nota: El atributo contenido deberá ser definido si el nombre o el atributo http-equiv está definido. si ninguno de ellos se definen, el atributo contenido no puede ser definido. La función de la marca es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página. La marca se utiliza también para proporcionar al navegador información sobre la disposición de los objetos en el documento, así como para impostar varios atributos de visualización para el documento. BGCOLOR El atributo BGCOLOR imposta un fondo de un solo color. Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera: Acá te dejo la Tabla de Colores HTML http://html-color-codes.info/codigos-de-colores-hexadecimales/ BACKGROUND BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg. Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen: La imagen se llama Imagen.png y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es: TEXT Gracias al atributo TEXT es posible asignar al texto un color distinto del negro ya que el negro lo asignan los navegadores por defecto. La sintaxis correcta es: También en este caso los colores pueden expresarse con nombres o con valores hexadecimales. LINK Si no viene establecido diversamente, el color de los enlaces (que todavía no se han visitado) es el azul. Gracias al atributo LINK podemos definir colores diferentes: Todos los enlaces de la página no serán ya azules sino rojos (red). ALINK Cuando hacemos clic en un enlace, éste se vuelve de un color distinto al impostado en LINK (o al azul de la opción por defecto). Gracias a ALINK (la A significa Active), es posible modificar este color: VLINK Cuando se visita un URL asociado a un enlace, este último se vuelve de un color distinto al de LINK (o al azul de la opción por defecto). Gracias a VLINK (la V significa Visited), es posible modificar este color: Títulos HTML Títulos HTML se definen con la hasta la
.
Lineas HTML La etiqueta
crea una línea horizontal en una página HTML. El elemento hr se puede utilizar para separar el contenido:
----------------------------------> salto de línea (Una línea nueva) ----------------------------> Negrita ------------------------------> Cursiva --------------> Tiene el mismo significado que la diferencia es que para que el usuario lo vea como algo "importante" ----------------------> Lo mismo es con ------------------------> Texto tachado ---> Se trata de una marca lógica que representa la información "dirección" en el documento. Dicho de otro modo, cuando estamos ante una dirección, una dirección de correo electrónido o un número de teléfono, según las reglas del HTML, hay que insertar esta marca lógica. ------------------------------> superíndices ------------------------------> subíndices Marcas lógicas Se emplea para indicar información relacionada con cualquier tipo de dirección (e-mail, teléfono, etc.).
Estoy dentro de una etiqueta
Empecemos a crear nuestra Pagina. Usen cualquier navegador que dispongas menos IE - . Primero su Bloc de Notas o Sublime Text2 y guarden en formato HTML Ejem: Index.html ¿Porque Index? Porque es la página principal del dominio al cual se accede. Al acceder un dominio cualquiera www.loquesea.com el servidor donde se encuentra ese dominio buscará el archivo llamado index.html donde se incluye todo el texto, imágenes, códigos etc que se quieran mostrar en la página principal. O sea, index.html es la página principal. Una vez guardado se convertirá el icono en unos de sus navegadores. Estructura HTML Dentro de la marca está el elemento hasta la . Párrafos HTML Párrafos HTML se definen con la etiqueta
,Ejemplo:
Esto es un Párrafo
Esto es otro Párrafo
HTML Links Vínculos HTML se definen con la etiqueta . Esto es un Link Imágenes HTML Imágenes HTML se definen con la etiqueta
Lineas HTML La etiqueta crea una línea horizontal en una página HTML. El elemento hr se puede utilizar para separar el contenido:
Otro Párafo
Siguiente Parrafo
No hay la necesidad de cerrar porque no tiene un cierre de etiqueta Otras Etiquetas----------------------------------> salto de línea (Una línea nueva) ----------------------------> Negrita ------------------------------> Cursiva --------------> Tiene el mismo significado que la diferencia es que para que el usuario lo vea como algo "importante" ----------------------> Lo mismo es con
Se usa en las citas textuales que ocupan más de dos o tres líneas. Indica la fuente de la cita. Se utiliza para formatear líneas de códigos de programación. El texto comprendido dentro es una definición. Da énfasis al texto comprendido dentro. y Poco utilizados. Indican cosas que el ordenador debería decir al usuario y viceversa, según un típico concepto de Unix. Denota énfasis fuerte. Asociado a CODE, indica las variables de programación. Tipos de Alineación Con la Marca
Define un párrafo y alinea el texto a la izquierda(left).
Define un párrafo y alinea el texto a la derecha (right).
Define un párrafo y centra el texto (center).
La marca tiene un funcionamiento idéntico al de pero su uso ha sido depreciado por el estándar 4 de HTML.
esto estará centrado en la su pg Con
aling="CENTER": define la alineación de la línea (center, right, left). size=2: define el grosor, en píxel, de la línea. width="400": Puede también expresarse en tanto por cien respecto al espacio a disposición: width=80%. noshade: si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente, produce dicho efecto. La marca tipográfica es una de las más utilizadas y frecuentes en el actual web publishing. La marca se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedaría formateado tal y como estuviera indicado. Me van a formatear FACE="arial" indica el tipo que se visualizará SIZE=5 el tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7) COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales). Listas Las listas ordenadas constan de una sola marca de apertura y cierre
y tantas marcas de lista como voces hay en el menú . La sintaxis correcta para elaborar listas ordenadas es: Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras. Las listas desordenadas constan de una sola marca de apertura y cierre
y tantas marcas de lista. Como voces hay que ordenar . Una lista de definición es una lista de elementos, con una descripción de cada elemento. La etiqueta define una lista de definiciones. La etiqueta se utiliza en conjunción con - (define el elemento en la lista) y
- Atributos de
ALT El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones: Algunos navegadores podrían estar impostados para no invocar las imágenes; Los navegadores textuales para invidentes no conseguirían interpretar las imágenes si carecieran de comentario; Es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma. BORDER Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel.
HSPACE y VSPACE HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). ALIGN ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen. ALIGN=middle: alinea la primera línea del texto con el centro de la imagen. ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen. ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma. ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma. Link en Imagenes Necesita una marca de apertura y una de cierre y entre ellas podemos insertar texto, imágenes y otros elementos multimedia.
TARGET Si hay un Hipervínculo en el texto o imagen se abre una pagina que sustituye al actual La etiqueta hipervínculo soporta el atributo target: texto de enlace que admite los siguientes parámetros: _blank .- abre una nueva ventana (yo mas uso éste) _new .- Lo mismo, Quieres sabes la diferencia entre _new y _blank pues ve a esta pagina para que te informes mejor, no quiero hacerla muy larga el Post _top.- No es muy necesario pero igual lo pongo aquí (infórmate aquí) Texto Title En los enlaces hipertextuales podemos definir un texto con un comentario que se activará cuando pasemos el ratón por encima del enlace. Google.com
También puedes insertan imagen en las tablas escribiendo BACKGROUND prueba Quieres insertar Música pues aquí lo encuentras Dame Click