Scribd
Cargar
141 vistas

Basico HTML5

El documento proporciona una guía básica sobre la estructura y etiquetas HTML5 para crear páginas web simples. Explica elementos como <head>, <title>, <meta>, <p>, <br>, <font>, <ol> y <ul>.

Cargado por

alexander ruiz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
141 vistas

Basico HTML5

El documento proporciona una guía básica sobre la estructura y etiquetas HTML5 para crear páginas web simples. Explica elementos como <head>, <title>, <meta>, <p>, <br>, <font>, <ol> y <ul>.

Cargado por

alexander ruiz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 16

Guía para el cursante que se inicia en HTML

Utilizar con fines didácticos


Este material es una idea de dónde empezar para la creación
de páginas web sencillas.
Estructura HTML5

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

Es recomendable al iniciar la etiqueta <html> se añada el lenguaje o idioma a utilizar de la siguiente forma:
<html lang="es"> donde lo que aparece entre comillas es el idioma de la página (es – español)

Después de la etiqueta <html> la primera estructura es la cabecera <head></head>, dentro de ella aparecen
los <meta> Meta de "metainformation" - metainformación. Sirve para aportar información sobre el
documento.

El elemento meta con atributo charset en un documento HTML está el destinado a indicar la codificación de
caracteres utilizada (letras, números y símbolos) En nuestro caso usaremos UTF-8. Gracias a esto, nuestro
navegador o el cliente de correo muestra el contenido del texto correctamente decodificado, sin errores ni
caracteres extraños. De esta forma se escribe:

<meta charset="utf-8">

Además, puede añadir información de la página. Ejemplo:

<meta name="author" content="Jesús Felipa">


<meta name="description" content="Ejemplo de mi primera página html5">
<meta name="keywords" content="código HTML etiqueta página web">

En general los tipos más comunes son:

Tipo Significado
author Autor de la página
classification Palabras para clasificar la página en los buscadores
description Descripción del contenido de la página
generator Programa utilizado para crear la página
keywords Palabras clave

Página 2 de 16
La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que
debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name.

Por ejemplo, imaginemos que por algún motivo queremos que nuestra página se actualice automáticamente
cada 30 segundos. En ese caso, deberíamos utilizar la acción Refresh (actualizar). Podríamos utilizar el
siguiente código:
<html>
<head>
<meta http-equiv="Refresh" content="30">
</head>
Ahora imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página web, y queremos
que cuando algún usuario visite la página en la dirección antigua, a los 5 segundos el navegador lo redirija
automáticamente a la dirección nueva. En ese caso podríamos insertar el siguiente código en la página que
se encuentra en la dirección antigua:
<html>
<head>
<meta http-equiv="Refresh" content="5; URL=http://www.google.com/">
</head>

De este modo, el navegador realizaría la función de actualizar la página, pero cargando la que se encontrara
en la nueva dirección (URL= http://www.google.com/).

Así mismo, después de <meta>, está la etiqueta <title>….</title> que es donde se colocará el título
principal de la Página que se muestra en la barra del navegador. Ejemplo:
<title>Mi Primera Página HTML5</title>
Siguiendo estos pasos, nuestra estructura HTML, debería ser así:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="author" content="Jesús Felipa">
<meta name="description" content="Ejemplo de mi primera página html5">
<meta name="keywords" content="código HTML etiqueta página web">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
<body>

</body>
</html>

Página 3 de 16
Para nuestro ejemplo, no utilizaremos, la actualización de página (<meta http-equiv="Refresh"
content="30"> ) o la redirección a otra página (<meta http-equiv="Refresh" content="5;
URL=http://www.umbv.edu.ve/">)

<FONT>

La etiqueta <font> es usada para modificar el tamaño el color y la fuente del texto. Utiliza los atributos
"size", "color" y "face" para personalizar tu texto

La etiqueta Font no es utilizada últimamente, ya que se usa CSS para establecer el estilo de texto,
obteniéndose un resultado idéntico. Sin embargo, utilización de hojas de estilo (CSS) quedará para
otro momento ya que por ahora nos concentraremos en la edición HTML y sus etiquetas.

Ejemplo de etiqueta FONT

Código HTML: Resultado:

<font size="7" face="Georgia, Arial" Informática


color="red">I</font>nformática.

<BR> (LINEBREAK)

Saltos de Línea <br>, como su nombre lo indica, al final de cada línea si se desea continuar el texto en la
línea siguiente, deberá colocarse al final la etiqueta <br> Ejemplo:

Código HTML: Resultado:

Base Aérea<br>Mariscal Sucre<br>Maracay Base Aérea


Mariscal Sucre
Maracay

<P> (PÁRRAFO)

El párrafo es un elemento base en la edición de texto. La etiqueta para un párrafo es <p>.

Este atributo deja un espacio vacío encima y debajo del texto para evidenciarlo, así tanto el navegador como
el usuario lo podrá distinguir como tal.

Página 4 de 16
Código HTML: Resultado:

<p>Este es el párrafo 1 que verá en su Este es el párrafo 1 que verá en su navegador.


navegador.</p>
<p>Este es el párrafo 2 que verá debajo del texto Este es el párrafo 2 que verá debajo del texto
anterior y observará un espacio vacío entre anterior y observará un espacio vacío entre ellos.
ellos.</p>

HTML - Párrafo justificado, centrado, alineación derecha, alineación izquierda:

Los párrafos pueden ser editados con la misma facilidad que lo hace un editor de texto normal y corriente. El
siguiente ejemplo es para ejemplificar el atributo justify, center, right, left.

Código HTML: Resultado:

<p align="justify">Este es el párrafo 1 que verá en Este es el párrafo 1 que verá en su navegador.
su navegador.</p>
<p>Este es el párrafo 2 que verá debajo del texto Este es el párrafo 2 que verá debajo del texto
anterior y observará un espacio vacío entre anterior y observará un espacio vacío entre ellos.
ellos.</p>

Código HTML: Resultado:

<p align="center">Este es el párrafo 1 que verá en Este es el párrafo 1 que verá en su navegador.
su navegador.</p>
<p>Este es el párrafo 2 que verá debajo del texto Este es el párrafo 2 que verá debajo del texto
anterior y observará un espacio vacío entre anterior y observará un espacio vacío entre ellos.
ellos.</p>

Código HTML: Resultado:

<p align="right">Este es el párrafo 1 que verá en su Este es el párrafo 1 que verá en su navegador.
navegador.</p>
<p>Este es el párrafo 2 que verá debajo del texto Este es el párrafo 2 que verá debajo del texto
anterior y observará un espacio vacío entre anterior y observará un espacio vacío entre ellos.
ellos.</p>

Código HTML: Resultado:

<p align="left">Este es el párrafo 1 que verá en su Este es el párrafo 1 que verá en su navegador.
navegador.</p>
<p>Este es el párrafo 2 que verá debajo del texto Este es el párrafo 2 que verá debajo del texto
anterior y observará un espacio vacío entre anterior y observará un espacio vacío entre ellos.
ellos.</p>

Página 5 de 16
LISTAS

En HTML existen tres tipos de listas. ol muestra una lista ordenada mientras que ul muestra una lista no
ordenada, y para realizar una lista de definiciones, la etiqueta dl. Usa los atributos type y start para hacer
una lista según tus necesidades.

• ul - lista sin clasificar, bullets (puntos).


• ol - listas ordenadas, números.
• dl - lista de definiciones.

Listas Ordenadas

Usa la etiqueta ol para construir lista lista ordenada. Para señalizar al navegador los elementos de una
lista tienes que usar la etiqueta li dentro de ol.

Código HTML: Resultado:

<p align="center">Objetivos</p> Objetivos

<ol> 1. Encontrar un trabajo


<li>Encontrar un trabajo</li> 2. Ganar mucho dinero
<li>Ganar mucho dinero</li> 3. Cambiarse de ciudad
<li>Cambiarse de ciudad</li>
</ol>

Puedes empezar tu lista con el número que desees simplemente especificándolo con la ayuda del atributo
start.
Código HTML: Resultado:

<p align="center">Objetivos</p> Objetivos

<ol start=”4”> 4. Encontrar un trabajo


<li>Encontrar un trabajo</li> 5. Ganar mucho dinero
<li>Ganar mucho dinero</li> 6. Cambiarse de ciudad
<li>Cambiarse de ciudad</li>
</ol>

Aparte del ejemplo de arriba existen otros tipos de listas ordenadas. En lugar de la numeración habitual,
puedes usar números romanos, o también letras, pero en ambos casos sólo podrás usar letras minúsculas o
mayúsculas. Utiliza el atributo type si quieres modificar el tipo de numeración.

Página 6 de 16
Código HTML: Resultado:

<p align="center">Objetivos</p> Objetivos

<ol type=”a”> a. Encontrar un trabajo


<li>Encontrar un trabajo</li> b. Ganar mucho dinero
<li>Ganar mucho dinero</li> c. Cambiarse de ciudad
<li>Cambiarse de ciudad</li>
</ol>

Código HTML: Resultado:

<p align="center">Objetivos</p> Objetivos

<ol type=”A”> A. Encontrar un trabajo


<li>Encontrar un trabajo</li> B. Ganar mucho dinero
<li>Ganar mucho dinero</li> C. Cambiarse de ciudad
<li>Cambiarse de ciudad</li>
</ol>

Código HTML: Resultado:

<p align="center">Objetivos</p> Objetivos

<ol type=”i”> i. Encontrar un trabajo


<li>Encontrar un trabajo</li> ii. Ganar mucho dinero
<li>Ganar mucho dinero</li> iii. Cambiarse de ciudad
<li>Cambiarse de ciudad</li>
</ol>

Código HTML: Resultado:

<p align="center">Objetivos</p> Objetivos

<ol type=”I”> I. Encontrar un trabajo


<li>Encontrar un trabajo</li> II. Ganar mucho dinero
<li>Ganar mucho dinero</li> III. Cambiarse de ciudad
<li>Cambiarse de ciudad</li>
</ol>

Lista No Ordenadas
Para construir una lista no ordenada usamos la etiqueta ul. Las listas no ordenadas son de diferentes tipos:
Casillas, puntos, y círculos. El valor estándar en la mayoría de los navegadores son los puntos o bullets.

Página 7 de 16
Código HTML: Resultado:

<p align="center">Lista de compras</p> Lista de compras

<ul> • leche
<li>leche</li> • queso
<li>queso</li> • huevos
<li>huevos</li> • azúcar
<li>azúcar</li>
</ul>

Mas abajo puedes ver como se formas los diferentes estilos de listas que comentamos anteriormente. Así
como las etiquetas <ol type=””> puede cambiar la forma de mostrar la lista ordenada; las listas no ordenadas
pueden cambiar la viñeta que se usa para listar cada elemento de la lista. Prueba usando
<ul type="square"> <ul type="disc"> <ul type="circle"> y veras los cambios.

Listas de definición
También puedes hacer listas de definición utilizando la etiqueta dl. Esta lista dará la definición a la palabra
especificada. Para que la palabra sea más evidente y que se distinga bien de la descripción se suele poner
también en negrita usando la etiqueta <b></b> o >strong></strong>.

Código HTML: Resultado:

<dl> Cheese
<dt><strong>Cheese</strong></dt> Palabra en inglés para queso
<dd>Palabra en inglés para queso</dd> Computer
Palabra en inglés para ordenador
<dt><strong>Computer</strong></dt>
<dd>Palabra en inglés para ordenador</dd>
</dl>

Títulos y encabezados
En HTML, un título es exactamente lo que parece: un título o un subtítulo real. Cuando pones un texto en
una etiqueta <h1>, el texto estará en negrilla, y la dimensión de la letra será igual al número del encabezado.
Los títulos pueden tener dimensiones entre 1 y 6, siendo 1 la más pequeña y 6 la más grande.

Página 8 de 16
Código HTML: Resultado:

<h1>Los encabezados</h1>

Los encabezados
<h2>son</h2>
<h3>geniales</h3>
<h4>para</h4>
<h5>los títulos</h5>
<h6>y los subtítulos</h6>
son
geniales
para
los títulos
y los subtítulos

Enlaces e hipervínculos
El atributo href nombra la conexión hacia otra página web. En realidad, es el lugar donde será dirigido el
usuario cuando haga click en el enlace o link HTML.
Los links pueden ser:
enlaces internos - hacia lugares específicos desde la página(anclas)
href="#nombredelancla"
enlaces locales - hacia otras páginas desde el mismo dominio
href="../img/foto.jpg"
enlaces globales - hacia otros dominios, fuera de la página web
href="http://www.google.com/"

Para fijar el comienzo y el fin de un ancla se puede usar <a> y con su etiqueta de cierre </a>. Escoge el tipo
de atributo que necesites, después escríbelo dentro de la etiqueta. El atributo "href" define la página que se
abrirá al pinchar en enlace.

Código HTML: Resultado:

<a href="http://www.google.com/">Buscardor
Google</a> Buscardor Google

Página 9 de 16
Imágenes
Las imágenes son muy importantes en una página web. Por lo tanto, es conveniente utilizarlas de manera
correcta. Inserta imágenes usando la etiqueta <img>.

Código HTML: Resultado:

<img alt="imagen html de ejemplo"


src="image.jpg" />

Código HTML: Resultado:

<img alt="imagen html de ejemplo"


src="image.jpg" width="120" height="75" />

Para esto utilizaremos los atributos align y valign. Las opciones ofrecidas por estos atributos son:

Align (horizontal) Valigh (vertical)

right (derecha) top (arriba)


left (izquierda) bottom (abajo)
center (centro) center (centro)

Página 10 de 16
Código HTML: Resultado:

<img alt="imagen html de ejemplo" Lorem ipsum dolor sit amet,


align="right" src="image.jpg" /> consectetur adipiscing elit, sed do
<p>Lorem ipsum dolor sit amet, consectetur eiusmod tempor incididunt ut labore et
adipiscing elit, sed do eiusmod tempor dolore magna aliqua.
incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing
aliqua.</p> elit, sed do eiusmod tempor incididunt ut labore et
<p>Lorem ipsum dolor sit amet, consectetur dolore magna aliqua. Ut enim ad minim veniam, quis
adipiscing elit, sed do eiusmod tempor nostrud exercitation ullamco laboris nisi ut aliquip ex
incididunt ut labore et dolore magna aliqua. Ut ea commodo consequat. Duis aute irure dolor in
enim ad minim veniam, quis nostrud reprehenderit in voluptate velit esse cillum dolore eu
exercitation ullamco laboris nisi ut aliquip ex ea fugiat nulla pariatur. Excepteur sint occaecat
commodo consequat. Duis aute irure dolor in cupidatat non proident, sunt in culpa qui officia
reprehenderit in voluptate velit esse cillum deserunt mollit anim id est laborum.
dolore eu fugiat nulla pariatur. Excepteur sint
Duis aute irure dolor in reprehenderit in voluptate
occaecat cupidatat non proident, sunt in culpa
velit esse cillum dolore eu fugiat nulla pariatur.
qui officia deserunt mollit anim id est
laborum.</p>
<p>Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>

Etiquetas especiales DIV

La etiqueta div no es más que un contenedor para otras etiquetas. Estos son los atributos mas importantes
de la etiqueta div:
id - define una id para hacer referencia el div vía javascript o estilo CSS mediante un #nombre_estilo
title - muestra un título del elemento
style - define estilo vía CSS inline
height - altura del div. Es recomendable usar CSS
width - ancho del div. Es recomendable usa CSS
El resto de los atributos no son usados con frecuencia, además se pueden sustituir por las propiedades de
CSS.
Aquí hay un ejemplo usando la etiqueta <div>

Página 11 de 16
Código HTML:

<div id="mi_menu" align="right">


<a href="#">INICIO</a> | <a href="#">CONTÁCTAME</a> | <a href="#">ACERCA DE</a>
</div>

<div id="contenido" align="left">


<h4>HTML5 - ejemplo</h4>
<p>este es un ejemplo de etiqueta simple para usar en su página web</p>
</div>
Código HTML:

INICIO | CONTÁCTAME | ACERCA DE

HTML5 - ejemplo
este es un ejemplo de etiqueta simple para usar en su página web

Ejemplo 2:

Código HTML:

<div id="mi_menu" align="right">


<a href="#">INICIO</a> |
<a href="#">CONTÁCTAME</a> |
<a href="#">ACERCA DE</a> |
<a href="#">MAPA DEL SITIO</a>
</div>

<div id="contenido" align="left">


<h4>HTML5 – ejemplo 2 </h4>
<p>Una etiqueta HTML que se usa ampliamente para dividir una página web en elementos,
cada uno con sus propios atributos de diseño. La etiqueta SPAN es algo similar a DIV, excepto que
SPAN define una pequeña cantidad de texto, mientras que DIV define un bloque entero de datos
en la página.</p>
<h4>Segundo párrafo</h4>
<p>La macro Div ajusta el contenido en una etiqueta div con clases y estilos opcionales. La
etiqueta div es un elemento no visual (por defecto) que se puede usar para aplicar propiedades
adicionales al contenido en él. A diferencia de la etiqueta span</p>
</div>

Página 12 de 16
Código HTML:

INICIO | CONTÁCTAME | ACERCA DE | MAPA DEL SITIO

HTML – ejemplo 2
Una etiqueta HTML que se usa ampliamente para dividir una página web en elementos, cada uno con
sus propios atributos de diseño. La etiqueta SPAN es algo similar a DIV, excepto que SPAN define una
pequeña cantidad de texto, mientras que DIV define un bloque entero de datos en la página.

Segundo párrafo
La macro Div ajusta el contenido en una etiqueta div con clases y estilos opcionales. La etiqueta div es
un elemento no visual (por defecto) que se puede usar para aplicar propiedades adicionales al contenido
en él. A diferencia de la etiqueta span

Existen otras etiquetas HTML que se adaptan a necesidades del diseñador web… Es hora de crear nuestra
primera página con algunas de las etiquetas vistas. Sigue las instrucciones paso a paso para poder ver
los resultados esperados.
Instrucciones:
1. Crear una carpeta que hará las veces de directorio raíz con el nombre de “html5web”
2. Dentro de la carpeta “html5web” crear la carpeta “img” esta contendrá los archivos tipo imagen de
su proyecto.
3. Utilizando el Block de notas o de preferencia un editor de páginas web (como Dreamweaver o similar
para sistemas basados en Linux ) crear un documento nuevo y guardarlo con el nombre de
mipagina1.html Si utilizan un editor de paginas web, deberá estar configurado para crear
páginas con formato HTML5. (SE EXPLICA MAS ADELANTE).
4. Escribir el siguiente código:

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="author" content="Jesús Felipa">
<meta name="description" content="Ejemplo de mi primera página html5">
<meta name="keywords" content="código HTML etiqueta página web">

<title>Mi Primera Página HTML5</title>


</head>
<body>

</body>
</html>
Página 13 de 16
Ahora vamos agregar más etiquetas al cuerpo de nuestra página:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="author" content="Escriba su nombre">
<meta name="description" content="Ejemplo de mi primera página html5">
<meta name="keywords" content="código HTML etiqueta página web">
<title>Mi Primera Página HTML5</title>
</head>
<body>
<h1 align="center">Bienvenidos a mi Página</h1>
<div align="right">
<a href="#quiensoy">Quién soy</a> |
<a href="#pasatiempo">Mi Pasatiempo</a> |
<a href="#profesion">Mi Profesión</a> |
<a href="#foto">Mi Foto</a>
</div>
<div>
<h3><a id="quiensoy">Quién soy</a></h3>
<p align="justify">Agregar su texto aquí…<p>
<br><br>

<h3><a id="pasatiempo">Mi Pasatiempo</a></h3>


<p align="justify">Agregar su texto aquí…</p>
<br><br>

<h3><a id="profesion">Mi Profesión</a></h3>


<p align="justify">Agregar su texto aquí…</p>
<br><br>

<h3><a id="foto">Mi Foto</a></h3>


<p align="center">
<img src="img/mifoto.jpg" width="281" height="500" alt="mi foto">
</p>

<footer style="clear:both; background:#003; text-align:center;">Mi diseño de página web - &copy;


Escriba su nombre aquí 2018</footer>
</div>
</body>
</html>

Página 14 de 16
Ahora vamos mejorar el código, agregando estilo visual e hipervínculos internos al cuerpo de nuestra página:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="author" content="Escriba su nombre">
<meta name="description" content="Ejemplo de mi primera página html5">
<meta name="keywords" content="código HTML etiqueta página web">
<title>Mi Primera Página HTML5</title>
</head>
<body style="font-family:Arial;">
<h1 id="arriba" align="center">Bienvenidos a mi Página</h1>
<div align="right" style="background:#CCC; font-family:Tahoma, Geneva, sans-serif; font-
weight:bold; font-size:14px; padding:5px;">
<a href="#quiensoy">Quién soy</a> |
<a href="#pasatiempo">Mi Pasatiempo</a> |
<a href="#profesion">Mi Profesión</a> |
<a href="#foto">Mi Foto</a>
</div>
<div style="background:#036; font-family:Tahoma, Geneva, sans-serif; color:#FC3; padding:10px;">
<h3><a id="quiensoy">Quién soy</a></h3>
<p align="justify">Agregar su texto aquí…<p>
<br><br>

<h3><a id="pasatiempo">Mi Pasatiempo</a></h3>


<p align="justify">Agregar su texto aquí…</p>
<br><br>

<h3><a id="profesion">Mi Profesión</a></h3>


<p align="justify">Agregar su texto aquí…</p>
<br><br>

<h3><a id="foto">Mi Foto</a></h3>


<p align="center">
<img src="img/mifoto.jpg" width="281" height="500" alt="mi foto">&nbsp;<a
style="background:#CCC;" href="#arriba">Ir arriba</a>

Página 15 de 16
</p>
<footer style="clear:both; background:#003; text-align:center;">Mi diseño de página web - &copy;
Escriba su nombre aquí 2018</footer>
</div>
</body>
</html>
Ejemplo aproximado resultante:

Página 16 de 16

También podría gustarte