lunes, 2 de febrero de 2015

6. ENLACES EN HTML

6.1. LOS ENLACES O LINKS 

Los enlaces o links(en Inglés) nos permiten conectarnos con otros documentos: una imagen, un video, un archivo de sonido, sitios en la web y mandar un email.

 Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor (ancla). La etiqueta <a> tiene como cierre </a>. 
enlace a enlaces en html





  

 

6.2. EL ATRIBUTO TARGET

 Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace.

6.3. EL ATRIBUTO NAME

Este atributo se usa para definir una determinada ubicación dentro de la página.
Supongamos que definimos un destino de vínculo llamado "destino-uno" en el archivo "uno.html".

6.4. CREANDO UN ENLACE A UN EMAIL


 Se utiliza en caso que queramos que un enlace mande un email.
En el momento que presionamos dicho link se abrirá automaticamente el programa de email que tenemos definido por defecto.

 <body>
<a href="/mailto: alguien@gmail.com">Mandar email</a>
</body>

6.5. ENLACE A PARTIR DE UNA IMAGEN

Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.

 <body>
<a href="http://www.google.com/"><img src="/../graficos/google.gif"></a>
</body>
Publicado por en No hay comentarios:

5. CARÁCTERES ESPECIALES EN HTML


 5.1. CARÁCTERES ESPECIALES


Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML
(por ej. "<" - menor que).
Para poder mostrarlos, debemos usar su nombre en código.

Los nombres de las entidades están compuestos por el signo(&), luego el nombre de la entidad y al final (";" - punto y coma).
Los números de estos caracteres están compuestos por (&), luego (# - numeral), el número de la entidad y al final (";" - punto y coma).

Por ejemplo para mostrar el signo "<" debemos escribir &lt; o &#60;.

El uso más común de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automaticamente borra 4.
Para ingresar espacios en blanco usamos "&nbsp;" y HTML los dejará en su lugar.

Otro uso muy frecuente es el de insertar acentos en el código html por medio de los números de las entidades
 Enlace sobre caracteres html

5.2. CÁRACTERES ESPECIALES DE USO FRECUENTE




































































































Publicado por en No hay comentarios:

4. FORMATO DE TEXTO CON HTML

 4.1.FORMATO BÁSICO DE TEXTO


HTML nos permite definir el formato de visualización del texto en la pantalla.

Muy útil para cuando queramos resaltar o enfatizar un texto en especial.

También muy usado para subrayar o escribir subíndices o superíndices.

Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos



Enlace sobre formato de textos
EJEMPLO:

<b>Texto en negrita</b> <big>Texto grande</big> <em>Texto enfatizado</em> <i>Texto en itálica</i> <small>Texto pequeño</small> <strong>Texto fuerte</strong> <sub>Texto subíndice</sub> <sup>Texto superíndice</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt>
 
Resultado
Texto normal Texto en negrita
Texto normal Texto grande
Texto normal Texto enfatizado
Texto normal Texto en itálica
Texto normal Texto pequeño
Texto normal Texto fuerte
Texto normal Texto subíndice
Texto normal Texto superíndice
Texto normal Texto subrayado
Texto normal Texto tachado
Texto normal Texto teletipo

4.2.ETIQUETAS PARA DAR FORMA AL TEXTO


<b> Define un texto en negrita
<big> Define un texto grande
<em> Define un texto enfatizado
<i> Define un texto en itálica
<small> Define un texto pequeño
<strong> Define un texto fuerte
<sub> Define un texto subíndice
<sup> Define un texto superíndice
<ins> Define un texto subrayado
<del> Define un texto tachado
<tt> Define un texto de teletipo
<s> Define un texto tachado. Desaprobado. Use <del> en su lugar
<strike> Define un texto tachado. Desaprobado. Use <del> en su lugar
<u> Define un texto subrayado. Desaprobado. Use <ins> en su lugar     

4.3. ETIQUETAS DE TEXTO ESTRUCTURADO


<code> Define un texto en código de computadora
<kbd> Define un texto del teclado
<samp> Define un texto ejemplo de código de computadora
<var> Define una variable
<pre> Define un texto preformateado
<listing> Desaprobado. Use <pre> en su lugar
<plaintext> Desaprobado. Use <pre> en su lugar
<xmp> Desaprobado. Use <pre> en su lugar


4.4. ETIQUETAS DE CITACIONES Y DEFINICIONES

<abbr> Indica una forma abreviada (p.ej., WWW, HTTP, etc.)
<acronym> Indica un acrónimo (p.ej., WAC ,radar, autobús, etc.)
<address> Define la información sobre el autor
<bdo> Define la dirección del texto (p.ej., de izq. a der., de der. a izq.)
<blockquote> Designa una cita larga
<q> Designa una cita corta
<cite> Contiene una cita o una referencia a otras fuentes
<dfn> Indica que aquí es donde se define el término encerrado



































































































































Publicado por en No hay comentarios:

viernes, 30 de enero de 2015

3. ETIQUETAS BÁSICAS HTML

3.1 ETIQUETAS BÁSICAS

 enlace sobre etiquetas basicas

Headings

Nos definen el tamaño de un título o cabecera.

 <h1> nos dá el tipo de letra más grande.
<h6> nos dá el tipo de letra más pequeño.
HTML agrega automaticamente un espacio antes y después de cada título.

 <h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un 
 sitio web.

 <html>
<head>
<title>Headings</title>
</head>

<body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
</body>
</html>
Resultado

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

3.2. PÁRRAFOS

Los párrafos se definen con la etiqueta <p>

 <html>
<head>
<title>Párrafos</title>
</head>

<body> <p>Este es el primer párrafo.</p> <p>Y este es el segundo párrafo.</p>
</body>
</html>
Resultado
Este es el primer párrafo.
Y este es el segundo párrafo.

 

 3.3. COMENTARIOS

 
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.
<!-- Esto es un comentario. -->
* Nota que el signo de exclamación se coloca solo al principio del código.


3.4. SALTO DE LINEA

El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos cortar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.

Ejemplo
Código
Esto es <br> un salto de lí<br>nea.
Resultado
Esto es
un salto de lí
nea. 		    

3.5. TRAZAR UNA LINEA

La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.
La etiqueta <hr> no tiene cierre.
 
Publicado por en No hay comentarios:

miércoles, 28 de enero de 2015

2. ELEMENTOS Y ETIQUETAS DE HTML

2.1. Los elementos y las etiquetas

Los elementos son declaraciones para visualizar o dar forma a una página Web.



Las etiquetas(en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.


2.2. Reglas básicas

  • Las etiquetas están encerradas entre los signos "<" y ">".
  • Generalmente vienen en pares <p> y <⁄p>.
  • La primera es de apertura y la segunda de cierre.
  • El texto que se encuentra entre dos etiquetas es el contenido del elemento.
  • Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.

2.3. ¿Qué son los atributos de las etiquetas?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
  • Los atributos siempre van con la estructura: nombre="valor".
  • Los atributos siempre van en la etiqueta de apertura.
  • Los valores siempre hay que ponerlos entre comillas.ç

Publicado por en No hay comentarios:

1. INTRODUCCIÓN AL HTML

1.1. ¿QUÉ ES  HTML?

  • HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".
  • HTML es el lenguaje que te permite describir y dar forma a tús páginas Web.
  • Publica tus propias páginas con fotos, listas, tablas, etc.
  • Obtén información de los visitantes de tu sitio.
  • Diseña los formularios que te permitirán contactar tus futuros clientes.
  • Crea un sitio para vender tús productos o servicios.
  • Incluye video clips, música, sonidos, y otras aplicaciones que darán vida a tús páginas Web


 1.2. ¿Qué conocimientos previos debes poseer?

Para estudiar HTML no se requiere de conocimientos previos en programación.
Es muy simple de aprender ya que no es un lenguaje de programación sino que es un lenguaje de marcas.


1.3. Los archivos HTML

  • Los archivos HTML deben tener una extensión htm o html (ej. misitio.htm o misitio.html).
  • Para crear un archivo HTML solo hace falta un editor de texto.
  • Un archivo HTML está compuesto por etiquetas.
  • Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.) como mostrar la página Web.
  • enlace sobre HTML 

 1.4. Etiquetas

<html> --> Indica al navegador que abre un archivo HTML. <head> --> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla. <title>Mi primera página Web</title> --> Título de la página. </head> --> Cierre de la cabecera del documento.
 <body> --> Apertura del cuerpo del documento. Esta sección aparece en la pantalla. Hola a todos. --> Texto que va a ser mostrado por el navegador. </body> --> Cierre del cuerpo del documento. </html> --> Cierre del archivo HTML


 La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.

Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página(<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento.

Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".
Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)