HTML para principiantes

Inicio: 15/11/2015 - Última actualización:

--(00) Introducción

Esta página se inicia con el fin de poner en práctica lo aprendido del Curso Online de Actívate, asi como distintos tutoriales. Mientras vaya adquiriendo mas conocimientos, se actualizará la página con el objetivo de poseer un "manual" para consultar en una sola página, asi como un producto de todo lo aprendido; y tal vez, y solo tal vez, sirva a otra persona iniciante en el lenguaje HTML.

La información de esta página esta centrada en la aplicación del lenguaje, sin detallar las definiciones de ciertas tecnologías relacionadas pero puede ayudar que se conozca previamente las definiciones de HTML, Navegador Web, URL, Internet, La Nube.

--(01)Etiquetas básicas

1.1 Definición

Las etiquetas definen la estructura de la página mediante distintos elementos, estan representados por los marcadores (< >), la mayoria de etiquetas necesitan tener un macador inicial y otro final, el final se diferencia por tener un signo "slash" (</ >), dentro de los marcadores va el nombre de la etiqueta:

<Etiqueta inicio> Elemento </Etiqueta final>

1.2 Etiquetas para Documento y Formato

<html> </html>

Todo documento HTML debe iniciar con la etiqueta <html> y terminar con la etiqueta </html>, estas etiquetas determinan que se esta creando un documento HTML, que posteriormente se dividirá en "Cabecera" y "Cuerpo".

<head> </head>

Cabecera: Estas etiquetas establecen el area que determina como "Cabecera", posteriormente se detallará su uso.

<body> </body>

Cuerpo: Estas etiquetas establecen el area que determina como "Cuerpo", donde se ubicaran todos los elementos del documentos, que seran visibles por los usuarios desde su navegador web.

<p> </p>

Párrafo: Una vez ya ya establecidas las áreas del documento, dentro del "cuerpo" se creará el contenido (Texto, imágenes, videos, animaciones, formularios, etc). El texto debe estructurarse mediante párrafos, definiendo su inicio con la etiqueta <p> y el final con la etiqueta </p>.

<b> </b>

Negrita: Estas etiquetas resaltaran en negrita aquella palabra o palabras que se encuentren entre ellas. También existe la etiqueta <strong> </strong>, que a efectos prácticos ofrece el mismo resultado.

Texto normal - Texto en negrita

<em> </em>

Destacado: Estas etiquetas enfatizan el texto que se encuentre entre ellos.

Texto normal - Texto enfatizado

<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4>

Encabezados: Estas etiquetas dan un formato de tamaño y negrita segun el número que se utilice, siendo el <h1> </h1> el de mayor tamaño.

Encabezado h1

Encabezado h2

Encabezado h3

Encabezado h4

<u> </u>

Subrayado: Estas etiquetas subrayan el texto que se encuentre entre ellos.

1.3 Etiquetas únicas y Caracteres especiales

Etiquetas sin cierre:
Por lo general las etiquetas estan emparejadas, teniendo una de inicio y otra de final, pero existen ciertas excepciones.

<br>

Salto de linea: Se inserta al final de la linea, es decir donde se requiera "saltar de linea". Se obtiene el mismo resultado si se usa como etiqueta de cierre </br>, pero no es recomendable.

<hr>

Linea: Inserta una línea.


Referencias de carácteres:
Además algunos carácteres que son usado por el lenguaje HMTL como códigos de programación, el navegador no los interpreta ( por ejemplo: >), si se necesita mostrar esos carácteres, existen ciertas referencias. Inician con el simbolo (&) seguido del nombre del carácter y un (;) al final.

&nombre;

Ampersand (&): &amp;
Comillas ("): &quot;
Apóstrofe ('): &apos;
Menor (<): &lt;
Mayor (>): &gt;
Espacio (  ): &nbsp; [No-break space]

Dato: Al momento de digitar el texto dentro del lenguaje de programación HTML, el lenguaje solo reconoce un espacio del teclado, asi como no considera el salto de linea mediante la tecla Enter. De ahí la necesidad de usar la etiquetas <br> si requiere hacer un salto de linea o la referencia &nbsp; si se requiere mas espacio del único posible mediante el teclado.

.::Ejemplo::.

Código Resultado
<html>
<head>
</head>
<body>
<h1>Cesar Vallejo</h1>
<p>Breve resumen del escritor peruano:</p>
<p><u>Nacimiento</u><br>
Nació el 16 de Marzo de 1892 en Santiago de Chuco, La Libertad.</p>
<p><u>Géneros Literarios</u><br>
Poesía, Narrativa, Teatro, Ensayo y Traducciones.</p>
<p><u>Obras</u><br>
Destacan <b>Los Heraldos Negros</b> y <b>Trilce</b>, así también es notable Paco Yunque.</p>
</body>
</html>

Cesar Vallejo

Breve resumen del escritor peruano:

Nacimiento
Nació el 16 de Marzo de 1892 en Santiago de Chuco, La Libertad.

Géneros Literarios
Poesía, Narrativa, Teatro, Ensayo y Traducciones.

Obras
Destacan Los Heraldos Negros y Trilce, así también es notable Paco Yunque.

--(02)Atributos de las etiquetas

2.1 Atributos y Valores.

Dentro del marcador inicial de una etiqueta, es posible agregar atributos para personalizar un elemento, estos atributos a su vez pueden poseer distintos Valores que personalicen aun más el elementos, tiene la estructura siguiente:

<Etiqueta inicio Atributo 1="Valor" Atributo 2="Valor"> Elemento </Etiqueta final>

El atributo se digita despues del nombre de la etiqueta en el marcador inicial y unido mediante el signo (=) y entre comillas ("") se asigna el valor, de la misma se puede asignar mas atributos (dependiendo de los que tenga disponible la etiqueta), todos separados solo por espacios.

.::Ejemplo::.

La etiqueta <h1> </h1> posee el atributo align [alignment / alineación], como su nombre lo dice sirve para alinear, para ello debemos especificar un valor: left, center, right o justify, .

<h1 align="center">Encabezado h1</h1>

Cada valor indica un tipo de alineación [izquierda, centrado, derecha o justificado].

2.2 Etiquetas para Imagenes y Enlaces

<img>

Imagen: La etiqueta para insertar imagen requiere el atributo src y el valor es la URL de la imagen que se desea insertar.

<img src="http://imagen.com/imagen1">

<a> </a>

Enlace: Esta etiqueta convierte un elemento en un enlace o "Link". Existen 2 tipos de enlaces:
Enlace dentro de la misma página: Nos dirige a cierto punto específico de la misma página. Se usa el atributo href, debiendo agregar como valor el nombre del destino.

<a href="#nombre">Link</a>

Donde #nombre equivale al destino, el cual debe definirse con el atributo id, ya sea dentro de una etiqueta de párrafo <p> o una etiqueta de encabezado <h1>:

<p id="nombre">texto</p>

En este ejemplo, el párrafo que será el destino, deberá tener asignado un "nombre" cualquiera, el cual debe ser el mismo que se señale en el enlace, de esa forma se relacionan enlace y destino.

Dato: Este tipo de enlaces son usados en las páginas de Wikipedia para sus Índices.

Enlace hacia página externa: Se usa el atributo href, debiendo agregar como valor la URL de la página destino.

<a href="URL">Link</a>

A diferencia de el primer enlace, el URL define como destino a toda una nueva página, por lo que no necesita detallar el destino.

En la siguiente tabla se resumen los principales atributos que poseen ciertas etiquetas, los valores disponibles y el uso que tienen cada uno de ellos.

Etiqueta Atributos Valores Uso
<h1> </h1> align left Alinear a la izquierda
center Centrar
right Alinear a la derecha
<p> </p> align left Alinear a la izquierda
center Centrar
right Alinear a la derecha
justify Justificar texto
id nombre* Define el párrafo como destino para la etiqueta <a>
style background-color: Asigna un color de fondo
<a> </a> href #nombre Nombre que identifica al destino
URL Link de la página externa
<hr> color red, green, etc Asigna un color a la línea
<img> src URL
alt Nombre o referencia

--(03)Listas de HTML

No Ordenadas (ul) [li] Unordeded List/List Item

Se pueden usar los Types: (Square, Por defecto círculo)

Ordenadas (ol) [li] Ordered List/List Item

Se pueden usar los Types: (A, a, I, i, por defecto número)

  1. Ejemplo 1
  2. Ejemplo 2
  3. Ejemplo 3
De descripción (dl) [dt][dd] Description List
Ejemplo 1
Ejemplo 1.1
Ejemplo 1.2
Ejemplo 2
Ejemplo 2.1
Ejemplo 3.2
Ejemplo 3
Ejemplo 3.1
Ejemplo 3.2

--(05)Formularios

La etiqueta principal es la <form> </form>, dentro de ellas se insertan las demás etiquetas que determinaran que tipo de elemento se desea crear. Existen atributos por ejemplo el atributo name que identifica el elemento, el atributo value indica el valor que se enviará representando a la respuesta.

form
input.
  name
  type
    text.
        maxlength
        size
        value
    checkbox.
        name
        checked
        value
    radio.
        name
        checked
        value
    file.
        accept
    password.
    hidden.
    button.
    submit.
    image.
        alt
        src
    reset.
  disabled
  readonly
select (Lista despegable)
  multiple
  option (Etiqueta interna por cada opcion de la lista)
    value
  optgroup (Etiqueta interna agrupa opciones)
    label
textarea
  cols (por defecto 20)
  rows (por defecto 2)
label
  for (asocia el texto a una opcion, por ejemplo una casilla que debe indicar en el atributo id el mismo nombre)
fieldset
  legend (etiqueta interna)

.::Ejemplo::.


Nombre

Apellidos

Sexo mujer

Correo

Marca las casillas

Deseo suscribirme

Declaro estar de acuerdo

Selecciona un país

Seleccione sus géneros favoritos (Ctrl + clic)

Escribe un comentario


--(07)Dominio, Hosting, Publicación

Un Servicio de alojamiento (Hosting) consiste en

Páginas que ofrecen servicio de Hosting:
Hostinger
Galeon
Miarroba

Cliente FTP
Publicación de página web mediante Fillezilla

Cliente FTP Online
Net2ftp