Mostrando las entradas con la etiqueta HTML5. Mostrar todas las entradas

jueves, 23 de marzo de 2017

HTML5 : 4.1. Formato de textos

El encabezado es una etiqueta que nos permite definir el tamaño de una titulación , para la definición de un escrito.

ETIQUETA	USO	EJEMPLO
<b>…</b>	Poner texto en negrita	Puede ser sustituido por CSS.
<strong>…</strong>	Poner texto en negrita	Puede ser sustituido por CSS.
<i>…</i>	Poner texto en cursiva	Puede ser sustituido por CSS.
<em>…</em>	Poner texto en cursiva	Puede ser sustituido por CSS.
<u>…</u>	Poner texto subrayado	Desuso.
<small>…</small>	Poner texto más pequeño	Puede ser sustituido por CSS.
<big>…</big>	Poner texto más grande	Puede ser sustituido por CSS.
<sub>…</sub>	A _{Poner texto subíndice}	Puede ser sustituido por CSS.
<sup>…</sup>	A^{Poner texto superíndice}	Puede ser sustituido por CSS.
<strike>…</strike>	~~Poner texto como tachado~~	Desuso
<s>…</s>	~~Poner texto como tachado~~	Desuso.
<del>…</del>	Poner texto como tachado	NO SOPORTA

Ejemplo 1.-

Las Redes Sociales y su importancia en la sociedad

Las Redes Sociales están cobrando gran importancia en la sociedad actual, reflejando la necesidad del ser humano de expresión y reconocimiento, bien lo dijo Aristóteles “El Hombre es un ser sociable por naturaleza”, pues para satisfacer sus exigencias físicas y espirituales necesita vivir en sociedad, ya que al ser una criatura racional e individual, no es autosuficiente y requiere la ayuda y protección de los demás de su especie, por ello forma comunidades”.
¿Qué es una Red Social?
Podríamos definirla como una forma de interacción social, en donde se produce un intercambio dinámico entre personas, grupos e instituciones que comparten gustos o preferencias entre sí, logrando un sentido de pertenencia y desarrollando un tejido que actúa por el bienestar de toda la comunidad. Las distintas redes sociales como MySpace, Facebook, Twitter; son utilizadas por millones de personas alrededor del mundo.
¿Con cuáles fines?
Pues, demasiadas; para mencionar algunas: conocer personas de otras partes del mundo, promocionar bandas, productos, intercambiar información y opiniones, hacerse conocer, entre muchísimas más,su popularidad crece en forma exponencial xⁿ. Pero, como todo en la vida; tiene sus ventajas y desventajas

VENTAJAS

Te permiten conocer personas ~~siendo su identidad no corroborada~~, y reconectarte con aquellos que tenías años sin ver
Te permite estar al día con esas personas
Te permite organizar eventos, y hasta enviar invitaciones sin siquiera pararte de la silla
Incluso hasta podrás estar informado sobre hechos y eventos actuales, tanto sociales como académicos, políticos, de cualquier índole
La facilidad de tener álbumes digitales, en el caso de MySpace ® y Facebook ®
Tienes la opción de bloquear usuarios no deseados.

DESVENTAJAS

Da libertad para personas no deseadas que se enteren de todos tus movimientos
Tus imágenes cargadas pueden ser utilizadas para cualquier fin
Tu vida deja de ser privada
Puedes llegar a perder más tiempo pendiente de lo que ocurre allí que en tu vida real.

Codigo que genera el ejemplo 1.-

<h1>Las Redes Sociales y su importancia en la sociedad</h1>
<p>Las Redes Sociales están cobrando gran importancia en la sociedad actual, reflejando la necesidad del ser humano de expresión y reconocimiento, bien lo dijo Aristóteles <i>&ldquo;El Hombre es un ser sociable por naturaleza&rdquo;</i>, pues para satisfacer sus exigencias físicas y espirituales necesita vivir en sociedad, ya que al ser una criatura racional e individual, no es autosuficiente y requiere la ayuda y protección de los demás de su especie, por ello forma comunidades&rdquo;.</p>
<p ><b > <font color="#FF0000">¿Qué es una Red Social?</font> </b> </p>
   <p>Podríamos definirla como una forma de interacción social, en donde se produce un intercambio dinámico entre personas, grupos e instituciones que comparten gustos o preferencias entre sí, logrando un sentido de pertenencia y desarrollando un tejido que actúa por el bienestar de toda la comunidad.
  Las distintas redes sociales como MySpace, Facebook, Twitter; son utilizadas por millones de personas alrededor del mundo. </p>
   <p><b><font color="#FF0000">¿Con cuáles fines?</font> </b></p>
   <p>Pues, demasiadas; para mencionar algunas: conocer personas de otras partes del mundo, promocionar bandas, productos, intercambiar información y opiniones, hacerse conocer, entre muchísimas más,su popularidad crece en forma exponencial x<sup>n</sup>. Pero, como todo en la vida; tiene sus ventajas y desventajas </p>
<p>&nbsp;</p>
   <p><strong> VENTAJAS</strong></p>
<ul>
  <li>Te permiten conocer personas <s>siendo su identidad no corroborada</s>, y reconectarte con aquellos que tenías años sin ver</li>
  <li> Te permite estar al día con esas personas </li>
  <li>Te permite organizar eventos, y hasta enviar invitaciones sin siquiera pararte de la silla</li>
  <li> Incluso hasta podrás estar informado sobre hechos y eventos actuales, tanto sociales como académicos, políticos, de cualquier índole </li>
  <li>La facilidad de tener álbumes digitales, en el caso de <em><strong>MySpace&nbsp;&reg;</strong></em> y <em><strong>Facebook&nbsp;&#174;</strong></em></li>
  <li><u>Tienes la opción de bloquear usuarios no deseados. </u></li>
</ul>
<p><strong>DESVENTAJAS</strong></p>
<ol>
  <li> Da libertad para personas no deseadas que se enteren de todos tus movimientos</li>
  <li> Tus imágenes cargadas pueden ser utilizadas para cualquier fin </li>
  <li>Tu vida deja de ser privada </li>
  <li>Puedes llegar a perder más tiempo pendiente de lo que ocurre allí que en tu vida real.</li>
</ol>
<hr />

domingo, 19 de marzo de 2017

HTML5 : 3. Lista de Etiquetas

HTML5 12:26:00 p.m.

puedes bajarte el archivo aquí---> http://bit.ly/etiquetasHTML5

Elemento raíz

Elemento	Descripcion
<!doctype html>	Define que el documento esta bajo el estandar de HTML 5

Elemento	Descripción
`<html>`	Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

Metadatos del documento

Elemento	Descripción
`<head>`	Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
`<title>`	Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
`<base>`	Define la URL base para las URLs relativas en la página.
`<link>`	Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
`<meta>`	Define los metadatos que no pueden ser definidos usando otro elemento HTML.
`<style>`	Etiqueta de estilo usada para escribir CSS en línea.

Scripting

Elemento	Descripción
`<script>`	Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
`<noscript>`	Define una contenido alternativo a mostrar cuando el navegador no soporta scripting.

Secciones

Elemento	Descripción
`<body>`	Representa el contenido principal de un documento HTML. Solo hay un elemento `<body>` en un documento.
`<section>`	Define una sección en un documento.
`<nav>`	Define una sección que solamente contiene enlaces de navegación
`<article>`	Define contenido autónomo que podría existir independientemente del resto del contenido.
`<aside>`	Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
`<h1>,` `<h2>,` `<h3>,<h4>,` `<h5>,<h6>`	Los elemento de cabecera implementan seis niveles de cabeceras de documentos; `<h1>` es la de mayor y `<h6>` es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
`<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.
`<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.
`<address>`	Define una sección que contiene información de contacto.
`<main>`	Define el contenido principal o importante en el documento. Solamente existe un elemento `<main>` en el documento.

Agrupación de Contenido

Elemento	Descripción
`<p>`	Define una parte que debe mostrarse como un párrafo.
`<hr>`	Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
`<pre>`	Indica que su contenido esta preformateado y que este formato debe ser preservado.
`<blockquote>`	Representa una contenido citado desde otra fuente.
`<ol>`	Define una lista ordenada de artículos.
`<ul>`	Define una lista de artículos sin orden.
`<li>`	Define un artículo de una lista ennumerada.
`<dl>`	Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
`<dt>`	Representa un término definido por el siguiente `<dd>`.
`<dd>`	Representa la definición de los terminos listados antes que él.
`<figure>`	Representa una figura ilustrada como parte del documento.
`<figcaption>`	Representa la leyenda de una figura.
`<div>`	Representa un contenedor genérico sin ningún significado especial.

Semántica a nivel de Texto

Elemento	Descripción
`<a>`	Representa un hiperenlace , enlazando a otro recurso.
`<em>`	Representa un texto enfatizado , como un acento de intensidad.
`<strong>`	Representa un texto especialmente importante .
`<small>`	Representa un comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
`<s>`	Representa contenido que ya no es exacto o relevante .
`<cite>`	Representa el título de una obra .
`<q>`	Representa una cita textual inline.
`<dfn>`	Representa un término cuya definición está contenida en su contenido ancestro más próximo.
`<abbr>`	Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo `title`.
`<data>`	Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
`<time>`	Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
`<code>`	Representa un código de ordenador .
`<var>`	Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa.
`<samp>`	Representa la salida de un programa o un ordenador.
`<kbd>`	Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.
`<sub>`,`<sup>`	Representan un subíndice y un superíndice, respectivamente.
`<i>`	Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
`<b>`	Representa un texto hacia el cual se llama la atención para propósitos utilitaros. No confiere ninguna importancia adicional y no implica una voz alterna.
`<u>`	Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.
`<mark>`	Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
`<ruby>`	Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
`<rt>`	Representa el texto de una anotación ruby .
`<rp>`	Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
`<bdi>`	Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto. Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
`<bdo>`	Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
`<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 `dir`.
`<br>`	Representa un salto de línea.
`<wbr>`	Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.

Ediciones

Elemento	Descripción
`<ins>`	Define una adición en el documento.
`<del>`	Define una remoción del documento.

Contenido incrustado

Elemento	Descripción
`<img>`	Representa una imagen.
`<iframe>`	Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
`<embed>`	Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
`<object>`	Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.
`<param>`	Define parámetros para el uso por los plugins invocados por los elementos `<object>`.
`<video>`	Representa un video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos.
`<audio>`	Representa un sonido o stream de audio.
`<source>`	Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como `<video>` o `<audio>`.
`<track>`	Permite a autores especificar una pista de texto temporizado para elementos multimedia como `<video>` o `<audio>`.
`<canvas>`	Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
`<map>`	En conjunto con `<area>`, define un mapa de imagen.
`<area>`	En conjunto con `<map>`, define un mapa de imagen.
`<svg>`	Define una imagen vectorial embebida.
`<math>`	Define una fórmula matemática.

Datos tabulares

Elemento	Descripción
`<table>`	Representa datos con más de una dimensión.
`<caption>`	Representa el título de una tabla.
`<colgroup>`	Representa un conjunto de una o más columnas de una tabla.
`<col>`	Representa una columna de una tabla.
`<tbody>`	Representa el bloque de filas que describen los datos contretos de una tabla.
`<thead>`	Representa el bloque de filas que describen las etiquetas de columna de una tabla.
`<tfoot>`	Representa los bloques de filas que describen los resúmenes de columna de una tabla.
`<tr>`	Representa una fila de celdas en una tabla.
`<td>`	Representa una celda de datos en una tabla.
`<th>`	Representa una celda encabezado en una tabla.

Formularios

Elemento	Descripción
`<form>`	Representa un formulario, consistendo de controles que puede ser enviado a un servidor para procesamiento.
`<fieldset>`	Representa un conjunto de controles.
`<legend>`	Representa el título de un `<fieldset>`.
`<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>`	Representa un botón .
`<select>`	Representa un control que permite la selección entre un conjunto de opciones.
`<datalist>`	Representa un conjunto de opciones predefiniddas para otros controles.
`<optgroup>`	Representa un conjunto de opciones, agrupadas lógicamente.
`<option>`	Representa una opción en un elemento `<select>`, o una sugerencia de un elemento `<datalist>`.
`<textarea>`	Representa un control de edición de texto multi-línea.
`<keygen>`	Representa un control de par generador de llaves.
`<output>`	Representa el resultado de un cálculo.
`<progress>`	Representa el progreso de finalización de una tarea.
`<meter>`	Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.

Elementos interactivos

Elemento	Descripción
`<details>`	Representa un widget desde el que un usuario puede obtener información o controles adicionales.
`<summary>`	Representa un resumen, título o leyenda para un elemento `<details>` dado.
`<command>`	Representa un comando que un usuario puede invocar.
`<menu>`	Representa una lista de comandos .

HTML5 : 2.¿Qué se necesita para crear una página web?

HTML5 11:47:00 a.m.

No es necesario programa especial para crear una Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo.

Editores de texto.

Notepad (windows)
Sublime

IDE SUBLIME

gedit(linux)

editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes).-

Dreamwever

En linea :

Coding with Chrome, la app de Google para aprender a programar

sábado, 18 de marzo de 2017

HTML5 : 1. Introducción y Conceptos

HTML5 9:39:00 a.m.

La versión HTML5 (Hyper Text Markup Language)
(Lenguaje de marcado de hipertexto ,versión 5)

Lenguaje utilizado para la creación de páginas web .

Desde sus versiones más básicas ,ha ido cambiando y mejorando la manera de representar las web . Con la popularización de los teléfonos inteligentes o smartphones y tablets , esta , a tenido en mejorar para la mejor visualización e interactividad.

Se podría decir que es un lenguaje basado en etiquetas (tags) que tiene como virtud entre otras, la de poder ser complementado por código de otros lenguajes como JavaScript o que amplían y mejoran su capacidad original.

El código HTML utiliza el código ASCII puro que puede teclearse en cualquier editor básico para posteriormente ser interpretado secuencialmente por un objeto cliente denominado navegador (browser) que visualiza el resultado en pantalla.

La sintaxis de las etiquetas de HTML está estructurada según el siguiente protocolo o sintaxis:

Estas etiquetas se estructuran conformando un esqueleto funcional , que a pesar del número de versiones , no ha variado en el orden .

Estructura básica de un documento HTML

los documentos Html tienen la estructura que se muesta a continuación:

<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
        <META name="description" content="Información sobre enseñanzas que se pueden cursar">
        <META name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">
    </HEAD>

    <BODY>
        Aquí iría el contenido de la página
    </BODY>
</HTML>

Estructura básica de un documento HTML5

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Ejemplo de HTML5">
  <meta name="keywords" content="HTML5, CSS3, JavaScript">

  <link rel="stylesheet" href="css/styles.css">

<script language="JavaScript">
<!--
Aquí iría el código
// -->
</SCRIPT>

<title>Este texto es el título del documento</title>
</head>
<body>hola mundo !!
</body>
</html>

<!DOCTYPE html>

Identifica la versión que tiene la web que se esta creando , en este caso identifica el html 5 .

<html lang="es">

Esta etiqueta identifica a toda estructura web , como podrá apreciar , las etiquetas o tags(su nombre en inglés) , mantienes un orden de comienzo y final ; ya finalizando la estructura se presenta el "cierre" con este tags </html>

<head>

Es la cabecera donde podemos encontrar etiquetas de inicialización , como los <meta > , que nos brinda información importante de el tema que toca la web creada , la identificación de palabras clave , etc.

<meta>

<meta name=”nombre de la etiqueta” content=”contenido de la etiqueta”>

<link>

Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML , ejm:

<link href="estilo.css" media="screen" rel="StyleSheet" type="text/css">

<title>

El título del documento

<body>

Aquí se encuentra la mayor parte del codigo que se visualiza y forma parte de la web.