HTML Basico

Instituto Superior Tecnológico Privado
Lenguaje de Programación III

INTRODUCCIÓN
El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi
infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible
encontrar lo que se busca. La unidad básica donde está almacenada esta información son las
páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e
incluso sonido y video. Una de las características más importantes de las páginas Web es que
son hipertexto.
HTML
HTML es HyperText Markup Language (Lenguaje de marcas de Hypertexto), es el formato
mediante se le dice a un navegador estructuramos la información que va a aparecer en una
página web. Los documentos son simplemente archivos de texto etiquetas, especiales o códigos
mediante los cuales el navegador sabe cómo interpretar y mostrar en pantalla la información.
ESTRUCTURA BÁSICA DE UNA ETIQUETA HTML
HTML es un lenguaje de marcas (etiquetas) y estas estarán entre 2 etiquetas, una etiqueta de
inicio y una etiqueta de fin. Funcionando de la siguiente manera:
<etiqueta de inicio> Mensaje a trabajar </etiqueta de fin >
Todo lo que vaya entre dos etiquetas HTML se verá afectado por éstas, por ejemplo
<h1>Esto es un encabezado</h1>
<p>Pero esto no, esto es un párrafo</p>
ESTRUCTURA DE UNA PÁGINA WEB
Todo documento HTML está formado por los bloques que podemos apreciar a continuación:
<HTML>
<HEAD>
Etiquetas de HEAD
</HEAD>
<BODY>
Etiquetas de BODY
</BODY>
</HTML>
En primer lugar deberemos especificar que en el archivo HTML, usamos las instrucciones de
inicio y fin de la etiqueta <HTML> al principio y al final del archivo: Dentro de el hay dos
grandes bloques, uno es el HEAD y el otro BODY.
En HEAD se introduce toda aquella información que afectará a toda la página, como el título,
palabras clave que pueden ser de utilidad para motores de búsqueda, y otros datos que no se
consideran parte del contenido del documento. En general, los agentes de usuario no representan
los elementos que aparecen como contenido del HEAD. Sin embargo, pueden poner la
información del HEAD a disposición de los usuarios a través de otros mecanismos.
HTML Básico 1 Ing. Luis Cherre Lizama

En BODY introduciremos todos aquellos elementos de los que queremos que conste nuestra
página como pueden ser texto, imágenes, imágenes, colores, gráficos, etc.
Nota: de indiferente que se escriba en mayúscula o minúsculas las etiquetas.
ETIQUETAS DE BASICAS DE HTML

<html></html> Al principio y al final de todo documento.
<head> </head> Cabecera del documento. Dentro del head se ponen las etiquetas:
<title> </title> indica el título de la página para el navegador.
<meta> permite aportar metainformación al documento, para su mejor identificación e
indexación por los motores de búsqueda. Hay distintos tipos:
<meta name="description" content="Frase descriptiva de los contenidos de la
página">
<meta name="keywords" content="Palabras clave que resuman la temática de los
contenidos de la página”>
<meta name="author" content="Nombre/s del autor/es de la página">
<body> </body> Dentro de esta etiqueta se insertan los contenidos del documento
El cierre de la etiqueta </body> se coloca justo antes del cierre </html>
Ejemplo:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago,
espero que les guste.
Ing. Luis Cherre Lizama
</body>
</html>
PROPIEDADES DE LA PÁGINA
La etiqueta <body> puede llevar incluida información sobre las propiedades de la página:
<body bgcolor="#xxyyzz"> define el color de fondo de la página.
<body text="#xxyyzz"> define el color por defecto del texto en la página.
<body link="#xxyyzz"> define el color de los enlaces.
<body vlink="#xxyyzz"> define el color de los enlaces visitados.
<body alink="#xxyyzz"> define el color de los enlaces activos.
<body background="imagen.gif"> establece una imagen para el fondo de la página.

Todos estos parámetros se pueden agrupar en una única etiqueta <body> de la siguiente
manera:
<body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz"
alink="#xxyyzz">
 Sirve para anotar aclaraciones 'privadas' del autor de la página. Lo que se
escribe dentro de esta etiqueta es ignorado por el navegador y no se muestra en la página.
FORMATO DE TEXTOS
<b> </b> negrita (también sirve la etiqueta <strong>… </strong>)
<i> </i> cursiva (también sirve la etiqueta <em>…</em>)
<u> </u> subrayado
<font size=”X”> …… </font> marca el tamaño de los caracteres, donde X es un valor del 1 a
7, o un valor relativo (+ 1-7).
<font color=”#XXYYZZ”> …… </font> define el color del texto, donde XXYYZZ es
un valor formado por letras y números que indica el color.
<font face=”arial”> …… </font> determina el tipo de la fuente.
La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente y color):
<font size=X color=#XXYYZZ face=fuente escogida> …… </font>
<pre> preformateado. Respeta espacios, saltos de línea y los retornos utilizados.
<blink> hace parpadear el texto (no para Explorer)
<marquee> Texto a mostrar en movimiento</marquee>
FORMATO DE PÁRRAFOS
<p> salto de párrafo </p>
<br> salto de línea
<blockquote> </blockquote> sangrado.
<center> centrar el texto.
<p align=center> párrafo centrado.
<p align=left> párrafo alineado a la izquierda.
<p align=right> párrafo alineado a la derecha.
LA ETIQUETA DE LISTAS
Lista no numerada:
<ul>
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul> cierra lista

Lista numerada:
<ol>
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
</ol> cierra lista.
Lista de glosario o definición:
<dl>
<dt>término que se va a definir</dt>
<dd>definición del término</dd>
</dl> cierra lista.
LA ETIQUETA DE LÍNEAS HORIZONTALES
<hr> línea horizontal.
<hr width="x%"> anchura de la línea en porcentaje.
<hr width=x> anchura de la línea en píxeles.
<hr size=x> altura de la línea en píxeles.
<hr align=center> línea alineada en el centro.
<hr align=left> línea alineada a la izquierda.
<hr align=right> línea alineada a la derecha.
<hr noshade> línea sin efecto de sombra.
LA ETIQUETA DE IMÁGENES
<img src="dirección de la imagen” "> indica la ruta de la imagen.
<img ... border=”X"> establece un borde de X pixels en torno a la imagen.
<img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y anchura) en
pixels.
<img ... alt="texto explicativo"> se muestra un texto al pasar el cursor sobre la imagen.
<img ... align="bottom"> alineación inferior del texto respecto de la imagen.
<img ... align="middle"> alineación del texto en el medio de la imagen.
<img ... align="top"> alineación superior del texto respecto de la imagen.
<img ... align="left"> alineación izquierda de la imagen en el párrafo.
<img ... align="right"> alineación derecha de la imagen en el párrafo.
<img ... hspace=X> espacio horizontal entre la imagen y el texto.
<img ... vspace=y> espacio vertical entre la imagen y el texto.
LA ETIQUETA TABLAS:
Son útiles para componer la página y para presentar datos tabulares.
<table>……</table> Define dónde comienza y termina la tabla
<table width="XX%"> Determina la anchura de la tabla. Puede darse en píxeles (no lleva el
símbolo %), o en porcentaje de la página.
<table height="XX> Determina la altura de la tabla en píxeles.
<table border="X"> Establece el grosor en píxeles del borde de la tabla
<table cellspacing="X"> Define el espacio en píxeles entre las celdas
<table cellpadding="X"> Define el espacio en píxeles entre el borde y el texto
<tr>……<tr> determina cada una de las filas de la tabla
<td>……</td> determina cada una de las columnas dentro de las filas

Ejemplo de tabla de 2 filas y 3 columnas:

<table width="100%" height="200" border="1" cellspacing="3" cellpadding="5">
<tr>
<td>primera columna de la fila 1</td>
<td>segunda columna de la fila 1</td>
<td>tercera columna de la fila 1</td>
</tr>
<tr>
<td>primera columna de la fila 2</td>
<td>segunda columna de la fila 2</td>
<td>tercera columna de la fila 2</td>
</tr>
</table>
<td rowspan="2"> </td> une dos celdas de dos filas adyacentes, en una única celda.
<td colspan="2"> </td> une dos celdas de dos columnas adyacentes en una sola celda.
Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el color de fondo,
con las etiquetas habituales para texto, párrafos o imágenes.
LA ETIQUETA CREACIÓN DE ENLACES
<a href=”http://www.servidor.com/directorio/pagina.htm”>Enunciado del enlace </a>
<a href=”mailto:dirección de mail”> Vínculo a una dirección de correo-e.
<a name=”marcador”> define un marcador (ancla) en un punto concreto de una página, para
poder enlazarlo posteriormente.
<a href=”#marcador”> dirige un enlace interno al punto dónde está el marcador.
<a href=”dirección página#marcador”> dirige el enlace a un punto concreto de otra página.
Dentro del a href:
target="_blank" Abre la página en un nuevo navegador.
target=”_top” Abre la página en toda la pantalla para evitar los frames.
TARGET="_self" el documento enlazado será mostrado en el mismo frame o ventana
donde está el enlace.
TARGET="_parent" el documento sera mostrado en el frames padre del frame actual.
LA ETIQUETA CAPAS
<div> </div> Crea un contenedor que incluye texto, imágenes, tablas, etc. se considera una
capa y puede posicionarse en el documento html.
FORMULARIOS EN HTML
Los formularios interactivos permiten a los autores de páginas Web poner elementos
interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar
a las cartas de respuestas que se encuentra en algunas revistas.

LA ETIQUETA FORM
<FORM> </FORM> Se utiliza para crear formularios y permite reunir varios elementos de
formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:
METHOD indica cómo se enviarán los datos a través del formulario, esto se puede realizar
mediante "POST" o “GET”
ACTION indica la dirección a la que se enviará la información.
Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" > … </FORM>
Ejemplos:
<FORM METHOD=POST ACTION="mailto:webmaster@hotmail.com">
<FORM METHOD=GET ACTION="http://www.bestsoft.com/ejemplo.html”>
Nota:
INPUT: Todos los botones y casillas de texto
TEXTAREA: una casilla de texto
SELECT: una lista de opciones múltiples
LA ETIQUETA INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear
muchos elementos “interactivos”. La sintaxis de esta etiqueta es la siguiente:
<INPUT TYPE="TipoElemento” VALUE="Valor_Inicial” NAME="Nombre_campo">
TYPE: Especifica el tipo de elemento se representa con la etiqueta INPUT.

checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked
(seleccionado) o unchecked (no seleccionado).
hidden: Este campo no se muestra, permanece oculto.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva al
archivo que se enviará con el formulario.
image: Un botón que nuestra una imagen.
password: Aparecen asteriscos que camuflan el texto de entrada.
radio: Activa el botón de opciones. Cada uno de estos botones debe tener el mismo
atributo name
reset: Un botón de restauración para quitar todos los elementos en el formulario y
restablecer sus valores predeterminados.
submit: Un botón de envío para enviar el formulario. El texto en el botón puede
definirse usando el atributo value.

text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede
definirse usando el atributo size y la extensión máxima del texto con el atributo
maxlength.
LA ETIQUETA TEXTAREA
La etiqueta TEXTAREA se usa para definir un cuadro de texto. Esta etiqueta tiene los
siguientes atributos:
cols: número de caracteres que puede contener un línea
rows: número de líneas
name: nombre asociado con el cuadro de texto.
readonly: impide que el usuario modifique el texto
value: valor predeterminado que se enviará
LA ETIQUETA SELECT
La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las
etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:
name: nombre asociado con la casilla de texto.
disabled: crea un lista desactivada, que aparece atenuada
size: número de líneas de la lista (este valor puede ser más grande que el número de
elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista
Ejemplo de formulario
NOTA: Los formularios pueden ubicarse en una página usando tablas (algo
recomendable para una presentación profesional).
<FORM method=post action="/ejemplo/ejemplo.html">

Registro de un usuario
<TABLE BORDER=0>
<TR>
<TD>Apellidos del Usuario</TD>
<TD> <INPUT type=text name="apellidos"> </TD>
</TR>
<TR>
<TD>Nombres del Usuario </TD>
<TD><INPUT type=text name="nombres"> </TD>
</TR>
<TR>
<TD>Género</TD>
<TD>Hombre: <INPUT type=radio name="genero" value="M">
<br>Mujer: <INPUT type=radio name="genero" value="F"></TD>
</TR>
<TR>
<TD>Ocupación del Usuario</TD>

<TD><SELECT name="ocupacion">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT></TD>
</TR>
<TR>
<TD>Comentarios</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Escriba aquí sus comentarios</TEXTAREA></TD>
</TR>
<TR>
<TD COLSPAN=2><INPUT type="submit" value="Enviar"></TD>
</TR>
</TABLE>
</FORM>

LA ETIQUETA MARCOS
<html>
<head>
<title>título de la página</title>
</head>
<frameset cols="20%, 80%"> (divide la página en dos marcos en forma de columnas, cada una
con su anchura correspondiente en porcentaje)
<frame src="menu.htm" name="navegacion"> (archivo menu.htm que corresponde al marco de
la izquierda, llamado “navegación”, 20% de anchura)
<frame src="principal.htm" name="contenidos"> (archivo principal.htm que corresponde al
marco de la derecha, llamado “contenidos”, 80% de anchura)
</frameset>
</html>
Las páginas también se pueden dividir en marcos horizontales con

<frameset rows=" , ">
frameborder="NO" evita que se vea el borde entre los marcos
framespacing="2" establece 2 pixels de separación entre los marcos
scrolling="NO" evita que aparezca una barra de scroll dentro del marco
scrolling="auto" mostrará la barra de scroll sólo si es necesario
Ejemplo:
De página con tres marcos en forma de filas. La superior y la inferior tienen un tamaño fijo de
80 pixels; la del medio es adaptable. No se muestran los bordes entre los marcos
<frameset rows="80,*,80" frameborder="NO" border="0" framespacing="0">
<frame src="navegacion_up.htm" name="topFrame" scrolling="NO">
<frame src="principal.htm" name="mainFrame">
<frame src=" navegacion_down.htm " name="bottomFrame" scrolling="NO">
</frameset>

HTML Basico

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Basico

Cargado por

Copyright:

Formatos disponibles

Instituto Superior Tecnológico Privado

Lenguaje de Programación III

HTML Básico 1 Ing. Luis Cherre Lizama

ETIQUETAS DE BASICAS DE HTML

HTML Básico 2 Ing. Luis Cherre Lizama

HTML Básico 3 Ing. Luis Cherre Lizama

HTML Básico 4 Ing. Luis Cherre Lizama

Ejemplo de tabla de 2 filas y 3 columnas:

HTML Básico 5 Ing. Luis Cherre Lizama

TYPE: Especifica el tipo de elemento se representa con la etiqueta INPUT.

HTML Básico 6 Ing. Luis Cherre Lizama

<FORM method=post action="/ejemplo/ejemplo.html">

HTML Básico 7 Ing. Luis Cherre Lizama

HTML Básico 8 Ing. Luis Cherre Lizama

Las páginas también se pueden dividir en marcos horizontales con

HTML Básico 9 Ing. Luis Cherre Lizama

También podría gustarte