Estamos en Facebook Estamos en Google + Visita nuestro RSS Siguenos en Twitter Proximamente en Vimeo Suscribete en Youtube
Mostrando entradas con la etiqueta xhtml. Mostrar todas las entradas
Mostrando entradas con la etiqueta xhtml. Mostrar todas las entradas

jueves, 1 de agosto de 2013

Tutorial HTML5: 15 fin de estos tutoriales de HTML5


Hola que tal en esta ocasión vamos a dar por hecho y concluido estos tutoriales HMTL5 no porque ya no queda nada por ver si no por en lo básico pero no tiene nada que decir que no se van a ver más cosas ya que es necesario ver muchas más.

martes, 30 de julio de 2013

Tutorial HTML5: 14 los metadatos


Hola que tal en esta ocasión vamos a ver los metadatos que son y para que nos sirven

Primero veamos un ejemplo de metadatos


 <meta name="description" content="Cursos, tutoriales de calidad solo aqui" />
 <meta name="keywords" content="HTML5, CSS3, Javascript, Diseño, Web, Programacion" />
 <meta name="robots" content="index, follow" />
 <meta name="copyright" content="dequepuedopuedo" />
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <meta name="author" content="Omar Ramirez" />


lunes, 29 de julio de 2013

Tutorial HTML5: 13 las imágenes



Hola y que tal bienvenido a esta nueva parte hoy vamos a ver como colocar imágenes en nuestro documento HTML5

Así que comencemos

Tutorial HTML5:12 los enlaces


Hola que tal en esta ocasión vamos a ver los enlaces los cuales todo mundo ya conoce así que vamos a ver cómo hacerlos

En el pasado hable sobre la maquetación pero eso lo dejare para tutoriales de CSS3 mas adelante

sábado, 27 de julio de 2013

Tutorial HTML5:2 parte formularios


Hola que tal y te agradezco que estés aquí de vuelta como te distes cuenta el pasado tutorial fue muy largo pero aun no acabamos con los formularios aún falta muchas cosas por ver así que comencemos

Empecemos viendo cómo funciona esto de los formularios una vez que ya conocemos sus partes

La acción que se usa es muy sencilla

viernes, 26 de julio de 2013

Tutorial HTML5: 10 los formularios


Hola que tal en esta nueva parte vamos a ver los formularios

En muchas ocasiones nos ha tocado llenar formularios en la que tenemos que colocar datos  y enviar esos datos para muchos intereses como iniciar sesión en Facebook o en youtube

Todo mundo detesta llenar formularios así que en lo personal vamos a pensar en cómo deben ser los formularios y en las categorías en las que se pueden dividir

En primera si tú entras en una página y quieres registrarte  pero como nos da flojera cuando vemos un formulario que pide más de lo necesario por ejemplo: la dirección, la edad, etc etc.

Esto termina aburriendo a la gente y consigues menos usuarios así que cuando estés en esto de los formularios e intenta que solo pidan lo necesario, como por ejemplo Facebook y twitter




Puedes ver que no es mucho lo que te piden, entonces intenta pedir lo necesario y nunca hagas formularios excesivos y aburridos

lunes, 22 de julio de 2013

Tutorial HTML5: Listas ordenadas, desordenadas y de definición




Hola que tal en esta ocasión vengo con una nueva parte HTML5 y son las lista así que comencemos inspirado y escuchando music  :)

Listas ordenadas

En muchas ocasiones me imagina que haz echo listas ordenadas como por ejemplo en la escuela, trabajo, en casa y esto es muy frecuente digamos que en una receta de cocina cuando se enumeran los pasos para preparar le pastel o cualquier otra
En HTML5 es muy fácil hacer listas y como ya estás aquí y quiero imaginar que llevas todo los tutoriales de HTML5 desde el inicio así que solo voy a poner la tag, su significado, el código de ejemplo y su demostracion:

lunes, 5 de noviembre de 2012

SUSCRIPCION POR EMAIL BLOGGER POR FEEDBURNER

RECONOCIMIENTO A: FRANCISCO
DE BLOGANDWEB.COM


La suscripción por correo electrónico no ha muerto, por el contrario, mucha gente aun prefiere actualizarse por este medio y dependiendo de la temática el porcentaje puede ser más o menos importante. En esta guía mostraremos desde como activar este servicio hasta crear un formulario personalizado de suscripción paso a paso para Blogger y WordPress.

lunes, 16 de enero de 2012

8. SALTOS DE LINEA, ESPACIOS ,TEXTO PREFORMATIADO EN XHTML


 En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el resto se omiten en la representación del documento. En el documento fuente podremos usar el espaciado que deseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetas HTML.

un ejemplo reflejante de esto es:

==============================
<html>
<head>

</head>
<body>
<p>
 En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de  línea) 
 separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y 
 el resto se omiten en la representación del documento.
</p>
<p>
 En HTML no está permitido más de     un elemento blanco (espacios, tabuladores, saltos de  línea) 
 separando cualquier elemento o                        texto, todos estos son convertidos a un único 
 
 espacio blanco y 
 el resto se omiten en la representación        del documento.
</p>
</body>

</html>


================================

en este ejemplo se puede apreciar dos parrafos exactamente iguales solo que los dos estan con distintas separaciones y saltos de linea visualizalos y veras que no afecta en su reproduccion en el navegador se ven exactamente iguales

La razón de este comportamiento es que HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras.

NUEVAS LINEAS

<br>

 Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a la línea siguiente, sin dejar una línea de separación. En este caso será un cambio de línea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implícitos un salto de línea, ni tampoco es necesaria la etiqueta de fin </BR>.


ver mas en:


ejemplo:

========================================

<html>
<head>

</head>
<body>
<p>
 En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) 
 separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y 
 el resto se omiten en la representación del documento.
</p>
<p>
 En HTML no está permitido más de     un elemento blanco (espacios, tabuladores, saltos de línea) 
 separando cualquier elemento o <br/>texto, todos estos son convertidos a un único espacio    blanco y 
 el resto se omiten en la representación del documento.
</p>
</body>

</html>

===============================================




ESPACIOS EN BLANCO:


&nbsp;


Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de forma efectiva, pudiendo mostrar más de un espacio en blanco de separación. Se incluirán tantas expresiones &nbsp; como espacios en blanco se desee conseguir.


ejemplo:


===============================================




<html>
<head>


</head>
<body>
<p>
 En HTML no está permitido más de un elemento &nbsp;&nbsp;&nbsp;blanco (espacios, tabuladores, saltos de línea)
 separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y
 el resto se omiten en la representación del documento.
</p>
<p>
 En HTML no &nbsp;&nbsp;&nbsp;&nbsp;está permitido más de     un elemento blanco (espacios, tabuladores, saltos de línea)
 separando cualquier elemento o <br/>texto, todos estos son convertidos a un único espacio blanco y
 el resto se omiten en la representación del documento.
</p>
</body>


</html>


================================================


visualizalo y ve lo que ocurre


TEXTO PREFORMATEADO:


<pre></pre>




Muestra un porción de texto en el que se respetan los saltos de línea, tabuladores y espacios en blanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostrará tal y como se expresa en el fuente del documento html. Para mostrar este texto se utiliza una fuente de espaciado fijo más pequeña que el texto normal.


     Presenta un problema cuando la línea es demasiado larga, ya que no la corta el navegador y se mostraría tal y como aparece en el fichero fuente. No se recomienda como forma rápida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentación.


     Dentro de la etiqueta PRE no tendrán validez la mayoría de las instrucciones HTML, solo se podrán utilizar <b>, <i> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.


ejemplo:


==============================================




<html>
<head>


</head>
<body>
<pre>
Muestra un porción de texto en el que se respetan los saltos de línea, tabuladores y
espacios en blanco.     Todo lo que se encuentre entre las etiquetas de inicio y fin de texto
preformateado
se mostrará tal y como se expresa  en el      fuente del documento html. Para mostrar
este texto se utiliza una fuente de
espaciado fijo más pequeña que el texto
normal.

</pre>
</body>


</html>


==============================================




visualizalo en tu navegador aver lo que ocurre




y por ultimo:


<code>


En la mayoría de páginas web, no tiene sentido utilizar la etiqueta <code>. Sin embargo, en muchas páginas web técnicas que incluyen listados de programas, trozos de código o etiquetas HTML, lo correcto es emplear la etiqueta <code>.


ejemplo:


===========================================




<html>
<head>


</head>
<body>
<code>
Muestra un porción de texto en el que se respetan los saltos de línea, tabuladores y
espacios en blanco.     Todo lo que se encuentre entre las etiquetas de inicio y fin de texto
preformateado
se mostrará tal y como se expresa  en el      fuente del documento html. Para mostrar
este texto se utiliza una fuente de
espaciado fijo más pequeña que el texto
normal.

</code>
</body>


</html>


===========================================


saludos y puedes checar mas informacion de codigo en:

sábado, 14 de enero de 2012

6.TEXTO HTML ,SECCIONES Y MARCADO BASICO

saludos a esta sexta entrega del curso de xhtml : TEXTO HTML ,SECCIONES Y MARCADO BASICO



en esta parte vimos lo que son los textos en html y como se definen:
El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas en otros entornos de publicación de contenidos. De esta forma, HTML define etiquetas para estructurar el contenido en secciones y párrafos y define otras etiquetas para marcar elementos importantes dentro del texto.

y bueno como estructurarlo:

empezamos con <p>:

que son PARRAFOS los parrados son de tipo bloque:
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo
=======================================
<html>

<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>

<body>
<p>este es un parrafo </p>

<p>El segundo párrafo </p>
</body>

</html>

====================================

visualizalo y veras de que se trata:

navegadores soportados

Internet Explorer Firefox Opera Google Chrome Safari


QUERES CONSULTAR MAS DE <P> EN:


Y continuamos con con las:

SECCIONES

Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.

ejemplo:
===============================
<html>
<head>

</head>
<body>

<h1>secciones</h1>
<h2>secciones</h2>
<h3>secciones</h3>
<h4>secciones</h4>
<h5>secciones</h5>
<h6>secciones</h6>


</body>
</html>

===============================

navegadores soportados

Internet Explorer Firefox Opera Google Chrome Safari

QUERES CONSULTAR MAS DE <h1>a<h6> EN:



continuamos con :

MARCADO BASICO

HTML proporciona varias etiquetas paramarcar cada uno de los diferentes tipos de texto.

<em> se usa cuando queremos dar un formato enfatizado en itálica y así dar un especial énfasis al texto.

ejemplo:

=================================
<html>
<head>

</head>
<body>

<p>saludos <em>esta</em> es una palabra con enfasis</p>

</body>
</html>



============================

pruebalo en tu navegador

otro es el <strong>

<strong>es una etiqueta HTML que usamos para señalar un especial énfasis sobre una parte del documento. Generalmente se muestra en negrita.

ejemplo:

===============================

<html>
<head>

</head>
<body>

<p>aora estoy usando <strong>strong</strong></p>

</body>
</html>

=============================

continuamos con el de insercion:

<ins>

<ins> señala el texto que se ha insertado en un documento. Se suele usar para informar sobre cambios o actualizaciones.

ejemplo:

=============================

<html>
<head>

</head>
<body>

<p>la palabra <ins>insercion</ins> fue colocada</p>
</body>
</html>

=============================

continuamos con el de borrado:



<del>

Se emplea para marcar una modificación en los contenidos originales consistente en el borrado de cierto contenido


ejemplo:

===============================

<html>
<head>

</head>
<body>

<p> Mi color favorito es el azul <del>azul</del> <ins> rojo </ins> </p>
</body>
</html>

================================

y por ultimo tenemos el de citas contextuales:

<blockquote>

<blockquote> sirve para poder dar formato con sangría a un parrafo de un documento HTML. Con esta etiqueta se definen citas largas.

ejemplo:

================================

<html>
<head>

</head>
<body>

<blockquote>
Here is a long quotation here is a long quotation here is a long    quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
</body>
</html>











========================================

como ya saben pueden checar todos sus arributos de cada uno en:


viernes, 13 de enero de 2012

5.SINTAXIS XHTML CORRECTO

saludos y espero todo bien hasta aqui continuamos con la quinta parte del curso: SINTAXIS XHTML CORRECTO

Diferencias entre HTML y XHTML:


La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML a ser una aplicación del más estricto XML:






Antes de nombraros estas  reglas quiero mencionar los 3 Doctype que tenemos en XHTML para la declaracion del tipo de documento. Es obligado utilizar siempre el Doctype para una correcta validación

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

esto lo veremos mas adelante por el momento no te preocupes



1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
correcto de html pero incorrecto en xhtml:
<p><a>omar</p></a>
correcto en xhtml:
<p><a>omar</a></p>
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
correcto de html pero incorrecto en xhtml:
<IMG src=""/>
correcto en xhtml:
<img src=""/>
3) El valor de los atributos siempre se encierra con comillas:
correcto de html pero incorrecto en xhtml:
<img src=foto.jpg/>
correcto en xhtml:
<img src="foto.jpg"/>
4) Los atributos no se pueden comprimir:
correcto de html pero incorrecto en xhtml:
<img compact/>
correcto en xhtml:
<img compact="compact"/>
5) Todas las etiquetas deben cerrarse siempre:
correcto de html pero incorrecto en xhtml:
<input type="button" value="enviar">
correcto en xhtml:
<input type="button" value="enviar"></input> <input type="button" value="enviar"/>

<![CDATA[ ]]>
<script language="JavaScript"> <![CDATA[ function image() { window.open('<xsl:value-of select="/ROOT/SEE_PICTURE/IMAGE/@href" />'); } ]]> </script>


saludos y bendiciones

4.ELEMENTOS HTML

saludos y buenvenido a la cuarta entrega del curso de xhtml: ELEMENTOS HTML.



como pueden observar la imagen de arriba la e colocado como la imagen del curso pero hase mucho enfasis 
a lo que son los elementos en xhtml

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

de todos modos coloca otra imagen para que quede bien explicado:

saludos y bendiciones