Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 241

Visitas el mes pasado: 309

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




1. El lenguaje HTML (I)

1.1 Etiquetas

html

Como funciona HTML

HTML es el lenguaje que emplean los navegadores para visualizar las páginas web. Para excribir en HTML escribiremos el propio texto que aparecerá en la página acompañado de una serie de instrucciones sobre cómo queremos que aparezca el texto.

En las páginas, no todos los textos son iguales, ya que hay títulos, subtítulos, párrafos, enlaces... el texto puede además tomar distintos formatos. Hay también imágenes, fondos de distintos colores, etc. Todo esto debe indicarse junto con el texto de la página en HTML.

Para ello el texto que aparece en la página va enmarcado por unas etiquetas que van a determinar sus características, tal como veremos a continuación.


Lenguaje de etiquetas

Todo texto o instrucción que pongamos en la página lo haremos a través de un mecanismo llamado "etiquetas".

Las etiquetas dan las instrucciones necesarias para convertir cada texto en un título, un párrafo... o para colocar enlaces, imágenes, etc.

Para insertar un texto dentro de una página web lo haremos de la siguiente forma:

<etiqueta>Texto a insertar</etiqueta>

Escribiremos primero los signos < >. Dentro de ellos (donde hemos escrito "etiqueta") escribiremos una palabra clave que indica el tipo de texto o la acciòn que pretendemos conseguir. A las etiquetas también se les llama "tags".

Normalmente escribiremos después el texto a mostrar en la página, y cuando este acaba insertamos otra etiqueta de cierre. Por lo tanto el texto queda encerrado entre dos etiquetas, la de apertura y la de cierre. La etiqueta de cierre es igual que la de apertura, pero con una barra inclinada al comienzo ( </tag> ).

Las etiquetas o "tags" son la base del lenguaje HTML; y su estructura básica es la que hemos indicado, es decir: hay una etiqueta de apertura y otra de cierre, y el texto o elemento afectado queda entre estas dos etiquetas.

<tag>Texto a mostrar</tag>

Veamos con más detalle la estructura de la etiqueta:

Si hemos insistido sobre este punto es porque las etiquetas o "tags" son la base del HTML.

Sin embargo, no todas las etiquetas funcionan así, como veremos más adelante, hay algunas etiquetas que no necesitan tener otra etiqueta de cierre. Esto ocurre cuando la etiqueta no se usa para incluir textos, sino para realizar otra serie de acciones (incluir saltos de línea, imágenes, etc.).


Atributos.

Aunque HTML dispone de un variado número de etiquetas, (91 exactamente en su versión 4.01) éstas no son suficientes para definir todos los aspectos que podemos darle a un texto. Para ello la etiqueta de apertura puede ir acompañada de otras palabras clave llamadas atributos. Estos atributos a su vez pueden tomar diferentes valores. las etiquetas de apertura pueden, por lo tanto, tener cero, uno, o varios atributos.

Por ejemplo, queremos definir un párrafo, pero lo queremos centrado. Para ello definiremos una etiqueta que indique que el texto es un párrafo, y un atributo que indique que queremos dar alineacion al texto, con un valor "centrado" como tipo de alineación. En este ejemplo la etiqueta quedará así:

<p align="center">Texto del párrafo</p>

En este código p es la palabra clave de la etiqueta, y nos indica que ésta es un párrafo; align es el atributo que indica alineación y center es el valor del atributo que indica "centrado".

observa la sintaxis del atributo: una palabra clave (align, seguida por el signo igual ( = ) y su valor entre comillas ( "center" ).

El valor se escribe siempre entre comillas y dependiendo del atributo puede ser otra palabra clave, un número o un porcentaje. Veamos este ejemplo :

<hr align="center" size="2" width="60%">

En este caso la etiqueta hr indica que hay un salto de línea y con una línea de separación. los atributos indican las características de la línea de separación: align="center" -alineación centrada- size="2" anchura = 2, width="60%" largo = 60%. Esta etiqueta no necesita etiqueta de cierre, ya que no se escribe ningún texto dentro. En la página esta línea quedará así:




Observa cómo los valores de los atributos son respectivamente una palabra clave, un número y un porcentaje.

Los atributos van siempre en las etiquetas de apertura. Las etiquetas de cierre nunca llevan atributos.

La forma genérica de una etiqueta con atributos sería la siguiente:

<etiqueta atributo="valor" atributo="valor">texto o elemento afectado</etiqueta>

Algunas etiquetas deben llevar siempre un atributo específico, tal es el caso de los enlaces o las imágenes, cuyo atributo tiene como valor la ruta a la que apunta el enlace o donde está la imagen.


Donde escribir en HTML

El HTML es un lenguaje y por lo tanto debemos escribirlo. La escritura que hagamos nosotros en lenguaje HTML es lo que se llama código, o código fuente. Deberemos, por tanto tener un programa donde poder escribir el código fuente. Este programa puede ser un simple editor de texto plano. Nos vale el bloc de notas de Windows para empezar.

Un editor de texto plano es un programa en donde podemos escribir texto sin más adornos. el texto aquí está desprovisto de cualidades como tipo de letra, color, tamaño, etc. lo único importante es el texto en si. después debemos poder guardar el archivo con distintos tipos de formato o extensiones (como texto, como archivo HTML, como archivo CSS, etc.).

Aunque ya lo hemos visto en la introducción, insistimos en la importancia del editor de textos, al fin y al cabo el editor de textos es nuestra principal herramienta de trabajo para crear una página.

logo html-kit

Nosotros recomendamos el editor HTML-Kit. Ya que es es uno de los más completos de los editores de texto gratuitos que podemos encontrar para la creación de páginas web. Nosotros en este manual utilizaremos para nuestras pruebas el editor HTML-Kit, versión 292

En la sección de complementos encontrarás como descargar HTML-Kit 292 (pulsa en este enlace o en la imagen del logo HTML-kit para ir a esta seccion) .

Si pensamos en editores de texto, no podemos usar programas como Microsoft-Word o Word-Pro que son para crear documentos de texto ya formateado, y que utilizamos para otras cosas. Tenemos también programas como Frontpage o Dreamweaver, éstos son programas pensados para crear páginas web. En ellos tienes la opción de usar el método "diseño", donde lo que escribes es lo que se verá en la página. El programa en este caso se encarga de generar las etiquetas necesarias. Aunque muchas veces no queda exactamente como queremos, y casi siempre necesita algunos retoques en el código.

Si Quieres usarlos para seguir este curso, debes ponerlos en modo "codigo" para poder escribir tú mismo las etiquetas. Pretender usar un programa de estos sin saber el funcionamiento básico de HTML, sería como, por ejemplo, usar una calculadora sin saber aritmética. Una vez que hayas adquirido un poco de experiencia puedes usarlos en modo "diseño", pero aún así siempre conviene revisar el código de la página.


Navegadores

Por último, tal como ya se dijo en la introducción, es conveniente tener instalados varios navegadores en tu ordenador, ya que no siempre el mismo código se ve igual en diferentes navegadores. En la sección Complementos/ Programas / Navegadores te expica cuales son los principales navegadores y dónde descargarlos.

Para tener una covertura de más de un 99% de los usuarios debemos comprobar la visualización de nuestras páginas en los siguientes navegadores :

Conviene sobre todo tener instalado el navegador Mozilla-Firefox, el cual es el preferido por la mayoría de diseñadores de páginas, ya que tiene muchos complementos pensados para ayudar al diseñador.

Aunque aquí tratamos fundamentalmente la creación de páginas web destinadas a ser vistas por ordenador, hay que tener en cuenta que cada vez son más los usuarios que utilizan tabletas y teléfonos móviles para ver las páginas. debemos tener por lo tanto en cuenta también cómo se verá nuestra página en este tipo de dispositivos.




Ahora que ya sabemos cómo se escriben las etiquetas, vamos a ver algunas de ellas, usadas para formar la estructura básica de la página Web, pero esto será ya en la siguiente página de este tema:

Estructura Básica de una Página



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com