Monday, November 12, 2012

0 Aprende HTML5 de la manera mas sencilla, bueno eso creo...

p://pagead2.googlesyndication.com/pagead '>"; // -->

Hola a todos los munderos, 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 <html>
Etiquetas HTML que suelen venir en parejas como <b> 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:

<p>Estoy dentro de una etiqueta</p>


Empecemos a crear nuestra Pagina. Usen cualquier navegador que dispongas menos IE - :ok: .

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



<Head> </Head>

Dentro de la marca <head> está el elemento <Title></Title> que es el más utilizado. El título suele ser visualizado por los navegadores en la cabecera de página.

La etiqueta <meta> es compatible con todos los principales navegadores
La etiqueta <meta> 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: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">


Nota: las etiquetas <meta> 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.


<Body> </Body>


La función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página.
La marca <BODY> 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.
<BODY BGCOLOR="red">

Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:
<BODY BGCOLOR="#ff0000">

Acá te dejo la Tabla de Colores HTML



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:
<BODY BACKGROUND="Imagen.png">



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:

<BODY BACKGROUND="Imagen.png" TEXT="red">

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:

<BODY BACKGROUND="Imagen.png" LINK="red">
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:

<BODY BACKGROUND="Imagen.png" ALINK="yellow">

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:

<BODY BACKGROUND="sfondo.gif" VLINK="green">

Títulos HTML


Títulos HTML se definen con la <h1> hasta la <h6>.


Párrafos HTML


Párrafos HTML se definen con la etiqueta <p> ,Ejemplo:

<p>Esto es un Párrafo </p>
<p>Esto es otro Párrafo </p>

HTML Links


Vínculos HTML se definen con la etiqueta <a>.

<a ="http://www.jennettemccurdyhot.blogspot.com/">Esto es un Link</a>

Imágenes HTML


Imágenes HTML se definen con la etiqueta <img>.

<img src="Imagen.png" width="104" height="142">


Lineas HTML


La etiqueta <hr> crea una línea horizontal en una página HTML. El elemento hr se puede utilizar para separar el contenido:
<p>Otro Párafo</p
<hr><p>Siguiente Parrafo</p>

No hay la necesidad de cerrar porque no tiene un cierre de etiqueta

Otras Etiquetas


<br> ----------------------------------> salto de línea (Una línea nueva)
<b></b> ----------------------------> Negrita
<i></i> ------------------------------> Cursiva
<strong></strong>--------------> Tiene el mismo significado que <b> la diferencia es que para que el usuario lo vea como algo "importante"
<em></em> ----------------------> Lo mismo es <em> con <i>
<strike></strike> ------------------------> Texto tachado
<ADDRESS></ADDRESS>---> 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.
<sup></sup>------------------------------> superíndices
<sub></sub>------------------------------> subíndices

Marcas lógicas


<ADDRESS>
Se emplea para indicar información relacionada con cualquier tipo de dirección (e-mail, teléfono, etc.).
<BLOCKQUOTE>
Se usa en las citas textuales que ocupan más de dos o tres líneas.
<CITE>
Indica la fuente de la cita.
<CODE>
Se utiliza para formatear líneas de códigos de programación.
<DFN>
El texto comprendido dentro es una definición.
<EM>
Da énfasis al texto comprendido dentro.
<KBD> y <SAMP>
Poco utilizados. Indican cosas que el ordenador debería decir al usuario y viceversa, según un típico concepto de Unix.
<STRONG>
Denota énfasis fuerte.
<VAR>
Asociado a CODE, indica las variables de programación.

Tipos de Alineación


Con la Marca <p>

<p align=left>
Define un párrafo y alinea el texto a la izquierda(left).

<p align=right>
Define un párrafo y alinea el texto a la derecha (right).

<p align=center>
Define un párrafo y centra el texto (center).

<Center></Center>

La marca <CENTER> tiene un funcionamiento idéntico al de <p align=center> pero su uso ha sido depreciado por el estándar 4 de HTML.
<center>esto estará centrado en la su pg</center>

Con <hr>

<HR align="CENTER" size=2 width="400" color="Red" noshade>

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.

<FONT>


La marca tipográfica <FONT> es una de las más utilizadas y frecuentes en el actual web publishing.
La marca <FONT> 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.

<FONT FACE="arial" SIZE=5 COLOR=red>Me van a formatear</FONT>

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 <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. 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 <UL></UL> y tantas marcas de lista. Como voces hay que ordenar <LI>.



Una lista de definición es una lista de elementos, con una descripción de cada elemento.
La etiqueta <dl> define una lista de definiciones.
La etiqueta <dl> se utiliza en conjunción con <dt> (define el elemento en la lista) y <dd>


Atributos de <IMG>


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.

[color=#000000]<IMG SRC="Imagen.png" BORDER=2>[/color]

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.
[color=#000000]<a  ="http://www.google.com/"> <img SRC="imagen.png"> </a> [/color]

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:

[color=#000000]<a  =destino target=parametro>texto de enlace</a>[/color]

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í)
[color=#000000]<a  =destino target=_new>Texto</a>[/color]



Title

En los enlaces hipertextuales podemos definir un texto con un comentario que se activará cuando pasemos el ratón por encima del enlace.

[color=#000000]<a  ="http://www.google.com/" title="Esto es google" target=_blank>Google.com </a>[/color]

<Table> </Table>




También puedes insertan imagen en las tablas escribiendo BACKGROUND
[color=#000000]<TD width=100 BACKGROUND="Imagen.gif"> prueba </TD>[/color]

Quieres insertar Música pues aquí lo encuentras Dame Click
<Header></Header> <Nav><Nav> <article> <section></section> </article> <aside></aside> <footer></footer>



La etiqueta <header> especifica un encabezado de un documento o sección.
El elemento <header> debe utilizarse como un contenedor para el contenido de introducción o un conjunto de enlaces de navegación.

La etiqueta <nav> define una sección de enlaces de navegación.
No todos los enlaces de un documento debe estar en un elemento <nav>. El elemento <nav> está destinado sólo para el bloque principal de vínculos de navegación.


La etiqueta <footer> define un pie de página de un documento o sección.
Un elemento <footer> debe contener información acerca de su elemento contenedor.
A pie de página suele contener el autor del documento, información del copyright, enlaces a términos de uso, información de contacto, etc



La etiqueta especifica <article> independiente, autónomo contenido.
Un artículo debe tener sentido por sí mismo y que debería ser posible para distribuir de forma independiente del resto del sitio.
Las fuentes potenciales para el elemento <article>:

- Mensaje Foro
- Blog mensaje
- Noticia
- Comentario

La etiqueta <section> define las secciones de un documento. Tal como capítulos, encabezados, pies de página o cualquier otra sección del documento.

La etiqueta define <aside> algún contenido aparte de los contenidos que se coloca pulg
El contenido de un lado debe estar relacionado con el contenido circundante.

Atributos Globales aquí

Quieres saber todas las Etiquetas de HTML5
Pues entra a esta Pagina

<DIV> </DIV>


La etiqueta <div> define una división o una sección de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro alguno.
Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas <div>. Esto da más significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propósito de ese marcado.

"El elemento div no tiene un significado semántico, representa un conjunto de elementos. Puede ser usado con los atributos class, lang y title para darle una semantica a un grupo de varios elementos."
W3C Specification



Todos los elementos tienen propiedades diferentes y todas las propiedades tienen valores por defecto. Estos valores por defecto se pueden restablecer el diseñador web. La forma en que se lleva a cabo es mediante el uso de hojas de estilo en cascada o CSS .
Mientras que una comprensión completa de CSS está más allá del alcance de un tutorial inicio HTML, HTML básico para aprender lo que necesita saber lo que es CSS y tener una idea general de cómo funciona.

[color=#000000]<div class="outer-div">
  Esta etiqueta div
    <div class="inner-div">
       contiene esta etiqueta DIV.
    </div>
</div>[/color]



Este elemento es muy útil al diseñar "layouts" sin la utilización de tablas.

<HGROUP></HGROUP>

La etiqueta <hgroup> se utiliza para agrupar elementos de encabezado.

El elemento <hgroup> se utiliza para agrupar un conjunto de <h1> a <h6> elementos, cuando un encabezado tiene múltiples niveles (subtítulos).


<hgroup>
      <h1>hola este es un Título en hgroup</h1>
      <h2>otro título</h2>
</hgroup>

<p> Texto </p>

Aquí mi pagina que hice a lo rápido para mostrarles, todo esta dentro de body


Y así quedo


En Head agregue el <Meta> que eso sirve cuando las personas estén buscando información en un buscador que uno provea en su página lo puedan encontrar. Por Ejemplo:





Se preguntarán porque no e echo un buen diseño, pues es claro los diseños lo voy a hacer con css la cual estaré publicando todo sobre css3 en la próxima semana al parecer.

Infórmate algo sobre CSS


Favicon a tu web.


Un Favicon es una pequeña imagen, un icono visible en los navegadores al costado de la URL o en las pestañas de los navegadores actuales.



Para crear un Favicon, e implementarlo en tu web, podemos seguir los siguientes pasos.

Si quieren convertir su imagen y ridimencionar


Un editor de imágenes que guarde en formato .ico

La imagen debe medir 16 x 16 px.
16 colores (4 bits);
Formato ICO, no BMP, no GIF, no JPG.
Algunos navegadores permiten iconos más grandes, una gama cromática más amplia y otros formatos. LO cierto es que si queires con certeza que el favicon se vea en todos deberá seguir las características expuestas, 16x16 px, con 16 colores y en formato ICO.

Modificar el HTML con un editor de texto

Demos declarar en nuestras páginas para que los navegadores lo reconozcan, la existencia de ese Favicon. Hay que añadir el siguiente código teniéndo en cuenta la ruta donde hayas guardado previamente al imagen. El código se debe escribir entre las etiquetas <HEAD> y </HEAD> de tus ficheros HTML.
<link rel="shortcut icon"  ="http://www.tudominio.com/favicon.ico">

________________________________Separador a lo Pobre________________________________________


Si has echo tu pagina wep y quieres ver si esta bien entonces ve a esta Pagina Markup Validation Service

solo has click en "validate by file upload" y seleccionas el archivo, osea tu pagina index.html y debe salirte así


Si te sale rojo es porque algo esta mal y te lo va enseñar en la parte de abajo de la pagina cual es el error
Alojar la Pagina a un Servidor


Si ya tiene tu pagina terminada entonces seguro quieres alojarla a un servidor verdad, entonces esto es una manera...
Primero descarga el Filezilla e instala, next, next, next
Luego ve a 000webhost.com

Guíate de este vídeo
Si quieres informarte mas de Filezilla pues ve a este vídeo



Si quieres mejor ver tutoriales en Youtube entonces te dejo estos link

Como crear una pagina web completa en HTML - 1
Como crear una pagina web completa en HTML - 2
Como crear una pagina web completa en HTML - 3
Como crear una pagina web completa en HTML - 4
Como crear una pagina web completa en HTML - 5
Como crear una pagina web completa en HTML - 6
Como crear una pagina web completa en HTML - 7

Una temporada completa como crear una pagina HTML5 con CSS

Crea una Página Web en HTML5 y CSS del 1 al 15

Algunas novedades de HTML5

Despídete de los elementos que HTML5 no quiere que sigas usando

________________________________Separador a lo mas Pobre______________________________


Tengo poco tiempo con HTML, NO ME JUZGUEN...
Bueno al parecer es todo, espero no haberme olvidado nada (voy a odiarme si me doy cuenta que me falto algo) les dejo music, una música que lo estuve escuchando cuando iba haciendo el Post


link: http://www.youtube.com/watch?v=A6BD4PpQRw8

Seguro de aquí una semana estaré publicando un Post sobre CSS, pensaba publicarlo aquí en este Post pero no quiero hacerla totalmente larga, a la vez para informarme bien y darle una buena información
Si no quieres esperar entonces déjame ayudarte a buscar todo sobre css : Dame Click
Lo siento si encuentran mala ortografía en el Post
Bueno Me despido...



No olvides Comentar y Compartir aquellos que no saben nada de HTML
PD: En algunas palabras en negrita suelen tener link ocultos...

Popular Posts

Blog Archive

 
back to top //PART 2