Ir al contenido principal

Parcial 1

 

Software y servicios de internet 

Software  

Es el conjunto de componentes lógicos que permiten la realización de tareas específicas en una  computadora. Se clasifica en tres tipos principales: 

Software de Aplicación

Son programas diseñados para que los usuarios realicen tareas específicas, realizar tareas  específicas, como trabajar, aprender o entretenerse Manejan información y ofrecen funcionalidades  concretas. 

Audaces: Audaces es una empresa que ofrece soluciones tecnológicas para la industria de la moda,  incluyendo software para el diseño de patrones, corte y confección, depende Hardware: necesita  computadoras con especificaciones adecuadas para ejecutar el software de diseño y procesamiento. 

Optitex: es un software especializado en diseño de moda y confección, depende de un Sistema  Operativo: funciona principalmente en Windows. 

Word: Microsoft Word es un procesador de texto diseñado para crear, editar y formatear  documentos, depende de un Sistema Operativo, necesita Windows o macOS para su instalación. 

Excel: es una hoja de cálculo que permite realizar cálculos, análisis de datos y visualización a  través de gráficos, depende de hardware, necesita un hardware adecuado que incluya un buen  procesador y memoria RAM 

PowerPoint: es una aplicación utilizada para crear presentaciones visuales, depende de Conexión  a Internet, aunque se puede trabajar sin conexión. 

Software de Sistema 

Controla y administra los recursos del hardware. Facilita la ejecución de otros programas. 

Windows: es un sistema operativo desarrollado por Microsoft, ampliamente utilizado en  computadoras personales y empresariales, depende de un controlador, para que Windows funcione  correctamente con el hardware.

Linux: Linux es un sistema operativo de código abierto basado en Unix. Es conocido por su  flexibilidad y robustez, depende Kernel, el núcleo del sistema operativo Linux es esencial para su  funcionamiento. 

MacOS: es el sistema operativo desarrollado por Apple para sus computadoras Macintosh, depende  solo se puede ejecutar en hardware Apple. 

Software de Programación 

Permite la creación de software mediante herramientas de desarrollo. Facilita la comunicación entre  el usuario y la máquina. 

HTML: Lenguaje de marcado estándar para crear y estructurar contenido en páginas web, depende de Navegadores Web. 

  

CSS: Lenguaje para describir la presentación de documentos HTML, aplicando estilos visuales  dependen de HTML. 

JavaScript: Lenguaje de programación dinámico para crear contenido interactivo en páginas web,  depende de navegadores de web. 

PHP: Lenguaje de programación del lado del servidor para desarrollo web y generación de  contenido dinámico, dependen de servidor Web y bases de Datos. 

MySQL: Sistema de gestión de bases de datos relacional utilizado para almacenar y gestionar  datos, depende de servidor MySQL y conectores/Drivers. 

jQuery: Biblioteca ligera de JavaScript que simplifica la manipulación del DOM y la gestión de  eventos, depende de JavaScript y HTML/CSS. 

Oracle: Sistema de gestión de bases de datos relacional conocido por su robustez y características  avanzadas, depende de Conectores/Drivers.

SQL Server: Sistema de gestión de bases de datos relacional creado por Microsoft, utilizado en  entornos empresariales, depende de Servidor SQL Server. 




 MI SISTEMA 

MIS APLICACIONES




Manual Básico de HTML  

Creación y Estructura de Páginas WEB  Carlos Eduardo Aníbarro Zelaya  

Versión 1.3 ©  

2001 


Manual Básico de HTML  Creación y Estructura de Páginas WEB  Indice  

ACERCA EL AUTOR..................................................................................................................1

REQUERIMIENTOS Y MATERIAL ........................................................................................1 LICENCIA.....................................................................................................................................2 HISTORIA.....................................................................................................................................2 ¿EN QUÉ CONSISTE EL MANUAL?.......................................................................................2 INTRODUCCIÓN.........................................................................................................................3 ¿QUÉ ES HTML?.........................................................................................................................3 ¿POR DÓNDE COMENZAR? ....................................................................................................3 PÁGINAS WEB ............................................................................................................................4 ETIQUETAS .................................................................................................................................4 ESTRUCTURA BÁSICA DE UNA PÁGINA WEB..................................................................5 

¿CÓMO SE UTILIZAN LOS COLORES EN HTML?............................................................7 TEXTO EN HTML.......................................................................................................................8 ENCABEZADOS ........................................................................................................................10 

UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO.......................................................11 IMÁGENES EN HTML .............................................................................................................13 

TABLAS.......................................................................................................................................15 NUMERACIÓN Y VIÑETAS....................................................................................................17 HIPERVÍNCULOS.....................................................................................................................19 FRAMES......................................................................................................................................21 OTRAS ETIQUETAS ÚTILES.................................................................................................23 NOTAS:........................................................................................................................................27

Manual Básico de HTML  

Manual Básico de HTML  Creación y Estructura de Páginas WEB 

Acerca el Autor  

Mi nombre es Carlos Aníbarro, trabajo con Internet desde mediados de 1995. Soy Ingeniero en  Sistemas y soy propietario del Web Site Bolivia en Internet.  

Mi página en el World Wide Web es:  

http://www.bolivia-internet.com/cae  

Mi correo electrónico es:  

cae@bolivia-internet.com  

Requerimientos y material  

Internet es un medio que no precisa de mucho conocimiento, el prerequisito inmediato para poder  usar este manual es tener conocimientos básicos de manejo de Windows, un editor de texto y haber  utilizado alguna vez un navegador de Internet.  

Para la aplicación de los ejemplos de este manual usted necesitara:  

Un navegador de Internet  

Un editor de texto, preferentemente el Block de notas (Notepad)  

Un medio físico para grabar los ejemplos, ya sea un disquete o una carpeta en su disco  duro.  

Un archivo para fondo, llamado fondo.gif.  

Un archivo gráfico, llamado foto.jpg.  

Licencia.  

El manual es gratuito, catalogado dentro de la categoría FREEware.  

Usted podrá hacer uso libre de este manual, sin modificar su contenido. 

Página 1 

Manual Básico de HTML  

Usted NO podrá realizar ninguna modificación al contenido del manual.  Si desea publicar cualquier parte o el manual entero en su site, precisa de permiso  expreso del autor para este efecto. Póngase en contacto con: cae@bolivia internet.com.  

Historia  

Luego de haber pasado casi un año dando clases de como construir de forma sencilla y sin muchas  vueltas desde una página web hasta un Web Site completo, me animo a lanzar de forma pública  una guía que he querido llamar "Manual Básico de HTML: Creación y diseño de páginas WEB",  la misma que tiene como objetivo mostrar de la manera más sencilla, y basándose en la práctica y  aplicación, como construir páginas HTML.  

El Site completo Bolivia en Internet y muchas otros que también he creado, han sido construidos  basados en las normas que son detalladas en este manual.  

¿En qué consiste el manual?  

Se trata de un manual y guía de instrucciones a la vez, que explica los usos, aplicaciones y  resultados de varias etiquetas (instrucciones) de HTML. Luego de avanzar un grupo de etiquetas  relacionadas se procede a aplicar lo aprendido en un ejemplo para mostrar de forma práctica el uso  de dichas etiquetas.  

Se comienza con una página sin mucho brillo, y poco a poco se aplican colores, tamaños, formato  y atributos al texto y a la página en sí. Se termina con una página con frames y que cuenta con  viñetas, listas ordenadas y tablas.  

El objetivo es que el usuario pueda ya construir sus web sites luego de 3 horas de ir experimentando  con este manual.  

Introducción.  

Internet, como está ahora, es una excelente herramienta para búsqueda de información,  independientemente de en qué punto del mundo se encuentre. Las aplicaciones de negocios, de  hecho, se afanan por dar a los usuarios herramientas para crear nueva información a partir de cero. 

Página 2 

Manual Básico de HTML  

Internet está al borde de una pequeña revolución que, aunque usted como usuario no se dé cuenta  de ello, transformará no la forma en que está diseñada o construida, sino la manera en que usted la  utilizará.  

De todos los servicios que nos presta Internet, el segundo más utilizado es el World Wide Web o  WWW.  

Una vez que uno se encuentra en condiciones de utilizar los programas clientes de Internet y en  especial los Navegadores o Browsers (Mosaic, Netscape Navigator o Microsoft Internet Explorer)  tal vez se pregunte ¿Cómo se crean estas páginas Internet?  

La respuesta es ..... con HTML  

¿Qué es HTML?  

HTML son las iniciales de Hiper Text Markup Language.  

Es un conjunto o serie de etiquetas incluidas en archivos de texto que definen la estructura de un  documento WWW y sus vínculos con otros documentos.  

Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar  como desplegar la página Web.  

¿Por dónde comenzar?  

Lo primero es saber donde crear el archivo texto que contendrá las instrucciones HTML  (Hipertexto), para lo cual tenemos varias opciones:  

1. Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos  citar:  

Microsoft Front Page  

Hot Dog  

Microsoft Internet Assistant  

Microsoft Office 97  

2. Utilizar un editor de texto y crear nuestro propio código, el mismo que ya no contendría  código basura.


Página 3 

Manual Básico de HTML  

La primera opción es la más sencilla y más rápida, sin embargo está limitada y es dependiente del  software a utilizar, ya que es el software el que se encarga de elaborar y ubicar los códigos de la  página WEB y uno estaría prácticamente “Arando en el mar”. 

La segunda opción es más lenta y menos vistosa, pero esta opción le enseña a utilizar cada uno de  los comandos y instrucciones HTML (etiquetas) sin depender de ningún programa. Esto tiene sus  beneficios y el principal de ellos es que nuestras páginas ya no contarán con código excedente y/o  código basura, de modo que ocuparán menos espacio, por ende serán más rápidas al momento de  ser cargadas por Internet y al invertir menos tiempo en cargar una página, se gastará menos dinero  pagando al proveedor de Internet.  

Como casi todos los sistemas más comunes en PC funcionan bajo un entorno  

Windows, para crear los Hipertextos utilizaremos un accesorio que viene incluido  en el sistema. El Bloc de Notas o Note Pad.  

Páginas WEB  

El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por  un navegador de Internet. Estas instrucciones son denominadas Etiquetas.  

Etiquetas  

Una etiqueta cumple su función de la siguiente manera:  

<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”  texto/gráfico/etiquetas A la cual se aplica la etiqueta  

</nombre de la etiqueta> Cierra de la etiqueta siempre entre “</ >”  

Al acabar de crear un hipertexto , este se deberá grabar con la extensión .html o bien .htm. Es  bueno acotar que un archivo HTML es un archivo texto que tiene una extensión definida. Este  archivo de texto contiene etiquetas, las mismas que son expresadas como instrucciones y el  navegador WEB es quien las interpreta. 

Página 4 

Manual Básico de HTML  

Estructura básica de una página WEB  

Una página web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la página.  Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas  en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son:  <html> </html> Indica al navegador que el documento texto que esta leyendo es un documento  

HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo.  <head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de  <html>.  

<body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre  luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la  página, cerrándose antes de </HTML>.  

Ejemplo 1:  

<html> 

<head> </head> 

<body> 

Bienvenidos al curso de HTML 

</body> 

</html> 

El hipertexto será grabado con el nombre index.html en su disquete o en alguna ubicación en el  disco duro. Al asignar la extensión .html o .html ya se crea un hipertexto.  

Asegúrese de ingresar “index.html” como nombre a grabar en su bloque de notas (incluidas las  comillas) para evitar que se añada la extensión .txt.  

Sin cerrar el programa de edición de texto que estamos usando, abra su navegador de WWW. En  la pantalla de dirección WEB, introduzca la ruta completa a su archivo index.html, y usted deberá  poder ver en su pantalla su primera página WEB.  

Importante:  

Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error  podría causar confusión al navegador. 

Página 5 

Manual Básico de HTML  

Etiqueta: <title> </title>  

Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define  en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de  la pantalla de su navegador.  

Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo <title>  entre las etiquetas de apertura y cierre del encabezado (head).  

Ejemplo 2:  

<html> 

<head> <title>Curso de HTML</title> </head> 

<body> 

Bienvenidos al curso de HTML 

</body> 

</html> 

El nuevo archivo HTML se grabará con el mismo nombre index.html, tan solo usando la opción  de Grabar en su editor de Texto. Una vez realizado esto, y sin cerrar su editor de texto, vamos al  navegador en el que seleccionamos la opción de Actualizar/Refresh y nuestra nueva página estará  visible. Notará que el título aparecerá en la parte superior de la página.  

Etiqueta <body> </body>  

Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas  <body>...</body>. Esta etiqueta cuenta con los siguientes atributos:  

Bgcolor define el color de fondo de la página  

Text define el color del texto de la página 

Página 6 

Manual Básico de HTML  

Link define el color de los vínculos en la página  

Alink define el color del vínculo actual o activado en la página  Vlink define el color del vínculo ya visitado  

Background define el archivo gráfico que será desplegado como fondo  Bgsound define el archivo de audio que se tocará en la página.1 Bgproperties define el movimiento vertical del fondo.2 

Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.  

¿Cómo se utilizan los colores en HTML?  

Se pueden llegar a tener 16 millones de colores en una página web.  

Existen dos formas para aplicar colores a una página web:  

1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue,  green, yellow  

2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente  estructura:  

#RRVVAA  

El color tiene un signo de numeral # antecediendo a los 6 números.  

Existen dos números para cada color principal: rojo, verde y azul.  

Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.  

Ejemplos de Colores:  

#RRVVAA Color #RRVVAA Color 

#FFFFFF Blanco #000000 Negro 

1 Solo para Microsoft Internet Explorer  

2 Solo para Microsoft Internet Explorer 

Página 7 

Manual Básico de HTML  

#FF0000 Rojo #00FF00 Verde 

#0000FF Azul #FF00FF Magente 

#00FFFF Cyan #FFFF00 Amarillo 

#70DB93 Agua Marino #000080 Azul Marino #FF7F00 Coral #A62A2A Café 

#C0C0C0 Plomo #4F2F4F Violeta 

Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos para este  efecto los atributos bgcolor y text. :  

Ejemplo 3:  

<html> 

<head> <title>Curso de HTML</title> </head> 

<body bgcolor=”#C0D9D9” text=”#000000”> 

Bienvenidos al curso de HTML 

</body> 

</html> 

Grabe este archivo seleccionando la opción de Guardar/Grabar de su editor de texto, de modo que  se mantenga el nombre index.html. Cuando usted vaya a su navegador WWW y seleccione la  opción de Actualizar, notara el cambio.  

Texto en HTML  

Una vez que ya se tiene una idea de cómo funcionan la etiqueta de encabezamiento y parte de la  etiqueta de definición del cuerpo de la página, trabajemos con el texto.  

HTML fue creado en principio para el alfabeto en inglés, sin embargo se buscaron modos para  mostrar también caracteres o símbolos denominados especiales.  

Para utilizar caracteres especiales usaremos los símbolos & y ; para denotar el inicio y final  respectivamente de un símbolo especial.  

De esta manera:  

Texto: Descripción: Pantalla:

Página 8 

Manual Básico de HTML  

&acute; Acento ´ 

&ntilde; eñe ñ 

&quot; Comillas Dobles " 

&deg: Grados ° 

&aacute; a con acento á 

&eacute; e con acento é 

&nbsp; espacio en blanco 

La idea básica para acentos y signos latinos es combinar dos teclas. Para lograr una o con acento  debemos combinar una o y un acento:  

&oacute; ó 

Para entender un poco más este proceso, veamos el siguiente ejemplo:  

Ejemplo 4:  

<html> 

<head> <title>Curso de HTML</title> </head> 

<body bgcolor=”#C0D9D9” text=”#000000”> 

Bienvenidos al curso de HTML 

Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o. Este es un ejemplo de p&aacute;gina WEB :) 

</body> 

</html> 

Luego de realizar el proceso para grabar y actualizar la página notara que se incluyen en la página  los símbolos de grados, la i con acento y la a con acento.  

Notará también que el texto se encuentra de corrido en una sola fila, para bajar de linea utilizaremos  la siguiente etiqueta especial ...  

Etiqueta <br>  

La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento  HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una máquina de  escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre. 

Página 9 

Manual Básico de HTML  

Etiqueta <hr>  

La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada  automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que no  necesita de cierre, tiene los siguientes atributos:  

Align establece que la regla se alinee a la izquierda, centro o derecha  LEFT,CENTER o RIGHT  

NOSHADE quita el sombreado predeterminado de la regla  

WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)  SIZE permite especificar el alto de la regla (en pixeles)  

Ejemplo 5:  

<html> 

<head> <title>Curso de HTML</title> </head> 

<body bgcolor="#C0D9D9" text="#000000"> 

Bienvenidos al curso de HTML<br> 

<hr align=center width=50%><br> 

Cuando la temperatura es menor a 15&deg;c hace  

bastante fr&iacute;o.<br> 

<hr align=left width=25% size=5><br> 

Este es un ejemplo de p&aacute;gina WEB :)<br> 

</body> 

</html> 

Encabezados  

Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son encabezados del  cuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notará que  si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carro al final  del mismo. La etiqueta tiene el siguiente atributo:  

Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de  la pantalla (LEFT, CENTER,RIGHT) 


Página 10 

 Página 11

Manual Básico de HTML  

<head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000">  <h1 align="center"> 

Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> 

Ejemplo 6:  

<html> 

<h2>Bienvenidos</h2> 

Cuando la temperatura es menor a 15&deg;c hace  

bastante fr&iacute;o.<br> 

<hr align=left width=25% size=5><br> 

Este es un ejemplo de p&aacute;gina WEB :)<br> 

</body> 

</html> 

Luego de realizar el proceso de grabado/actualización notará las diferentes dimensiones de las dos  primeras líneas.  

Ubicación, formato y atributos de texto  

Etiqueta <center> </center>  

Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre.  

Etiqueta <b> </b>  

Esta es la etiqueta que nos posibilita un texto con negrillas.  

Etiqueta <u> </u>  

Etiqueta que posibilita resaltar un texto con subrayado.  

Etiqueta <i> </i>  

Etiqueta que permite resaltar el texto con inclinación itálica



Página 12 

Manual Básico de HTML  

<head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000">  <h1 align="center"> 

Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> 

Recuerde que puede combinar entre si todas estas etiquetas. Veamos un ejemplo para demostrar el  uso de las últimas 4 etiquetas que se vieron.  

Ejemplo 7:  

<html> 

<h2>Bienvenidos</h2> 

Cuando la temperatura es menor a 15&deg;c hace  

bastante fr&iacute;o.<br> 

<hr align=left width=25% size=5><br> 

Este es un ejemplo de p&aacute;gina WEB <b><i>:)</i></b><br> <b>Este texto esta con negrillas</b><br> 

<u>Este texto esta con subrayado</u><br> 

<i>Este texto esta con inclinaci&oacute;n it&aacute;lica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> </body> 

</html> 

Note el cambio en la sentencia de la línea o regla <hr>, se eliminó “align=left”. Notará que la  nueva regla saldrá al centro, pues esta es la alineación por defecto. Además sacamos el punto final  que existía en la primera línea que ahora aparece centrada.  

Etiqueta <font> </font>  

Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente,  tamaño y color. Atributos:  

Color determina el color que se aplica al texto  

Size determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7,  siendo el predeterminado el 3 y el más grande el 1.  

Face asigna una fuente o tipo de letra. 

Página 13 

Manual Básico de HTML  

<head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000">  <h1 align="center"> 

Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> 

Ejemplificando, introduciremos lo siguiente: Bolivia. Note que la primera B es más grande que  el demás texto. Usaremos el tamaño 7 para la letra B y el tamaño estándar (3) para las demás letras.  

Ejemplo 8:  

<html> 

<h2>Bienvenidos</h2> 

Cuando la temperatura es menor a 15&deg;c hace  

bastante fr&iacute;o.<br> 

<hr align=left width=25% size=5><br> 

Este es un ejemplo de p&aacute;gina WEB <b><i>:)</i></b><br> <b>Este texto esta con negrillas</b><br> 

<u>Este texto esta con subrayado</u><br> 

<i>Este texto esta con inclinaci&oacute;n it&aacute;lica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>  <font color="red"><font size=7>B</font>o</font><font color="yellow">  li</font><font color="green">via</font><br> 

</body> 

</html>

Página 14 

Manual Básico de HTML  

<head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000">  <h1 align="center"> 

Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> 

Imágenes en HTML  

Hasta este momento se ha trabajado solamente con texto. Comenzemos a introducir gráficos en  nuestra página HTML.  

Se deben tener dos consideraciones importantes para trabajar con gráficos:  Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg. Las  imágenes no deben ser de tamaño grande por que el visualizador o navegador puede demorar  demasiado en bajarlas.  

Acá trabajaremos también con el atributo background de la etiqueta <body> que había quedado  pendiente.  

La idea de trabajar con un fondo en una página web, es la misma que tener un fondo en nuestro  entorno Windows. El archivo puede estar ubicado en la misma carpeta o bien en otra que contenga  solo gráficos. Trate de que el color de fondo de la página (que ya no aparecerá) sea parecido al  color principal de la imagen que usará como fondo. Si es necesario re acomode los colores de texto  y vínculos definidos en <body>.  

Supondremos tenemos un gráfico llamado “fondo.gif” para el ejemplo 8 que como notará será re  formulado en función a utilizar las nuevas etiquetas. 

Página 15 

Manual Básico de HTML  

Importante  

En Internet por lo general una mayúscula no es igual a una minúscula. Tome en cuenta esto al  utilizar y hacer referencia a archivos. Como sugerencia es bueno tener todos los archivos con  minúsculas.  

Etiqueta <img>  

Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al  navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es:  <img src=”imagen.ext”>  

No es necesario re dimensionar en forma permanente un archivo gráfico para exhibirlo en  contextos variables; sin embargo, el autor de HTML puede indicar al navegador que re dimensione  la imagen especificando los siguientes atributos:  

Src identifica la imagen que se desplegará.  

Height para redimensionamiento de gráfico (en pixeles o en  porcentaje)  

Width para redimensionamiento de gráfico (en pixeles o en porcentaje) A la  imagen se le puede aplicar un borde que se hace notorio especialmente cuando se trata de  una imagen que además es un hipervínculo:  

Border Definido en pixels  

La imagen también puede alinearse con respecto al texto:  

ALIGN Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y  RIGHT  

En caso de que la imagen no pueda exhibirse, se puede desplegar un texto:  ALT Especifica el texto alterno  

Es a partir de este ejemplo, que se va a realizar una nueva página, la misma que llamaremos  pag2.html o bien pude ser grabada con otro nombre. Supondremos contamos con un gráfico  llamado foto.jpg

Página 16 

Manual Básico de HTML  

Ejemplo 9:  

<html> 

<head> <title>Curso de HTML</title> </head> 

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"> <center><h1> 

Bienvenidos al curso de HTML</h1></center><br> 

<hr width=50%><br> 

<h2>Informaci&oacute;n General</h2> 

Este curso muestra los conceptos b&aacute;sicos del uso de  

etiquetas e instrucciones en la elaboraci&oacute;n de documentos  <b><i><font color="#000080">HTML</font></i></b>.<br><br> 

<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center> <br> 

Es muy importante saber ubicar los gr&aacute;ficos y combinar  de buena manera los colores para brindar una buena imagen 

<b><i><font color="red">:)</font></i></b>.<br><br> 

Una p&aacute;gina WEB es muy importante, pues provee a nuestro  trabajo una ventana al mundo.<br> 

</body> 

</html> 

Realice el proceso de grabado con el nuevo nombre de página “pag2.html” y cargue la nueva  página en su navegador.  

Tablas  

En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:  

Etiqueta <table></table>  

Señala el inicio y final de una tabla. Sus atributos son:  

Align Establece la alineación de la tabla o texto mediante ALIGN=LEFT o  ALIGN=RIGHT  

Bgcolor Establece el color de fondo de las celdas de la tabla  Border Determina el ancho del borde en pixeles  

BorderColor Asigna un color al borde  

BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones  BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones  Caption Especifica el titulo para la tabla  

Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda  Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla  Width Determina el ancho de la tabla en pixeles o en un porcentaje 

Página 17 

Manual Básico de HTML  

Etiqueta <th> </th>  

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla.  Atributos principales:  

Colspan especifica el número de celdas que cubre el encabezado  Align Determina la posición del texto del titilo  

Etiqueta <tr> </tr>  

Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como la  etiqueta que define filas.  

Align Alineación del texto/objetos en toda la fila  

Etiqueta <td> </td>  

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una  tabla. Atributos principales:  

Align Alineación del texto/objeto de la celda  

Bgcolor Color de fondo de la celda  

Background imagen de fondo de una celda  

Width Ancho de la celda/columna con respecto al ancho de la tabla Solo  precisa definir el ancho en la primera celda de la columna.  

Recuerde que dentro de una celda, usted puede insertar desde texto o un gráfico hasta una tabla  entera.  

Ejemplo 10:  

<html> 

<head> <title>Curso de HTML</title> </head> 

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"> <center><h1> 

Bienvenidos al curso de HTML</h1></center><br> 

<hr width=50%><br> 

<h2>Informaci&oacute;n General</h2> 

Este curso muestra los conceptos b&aacute;sicos del uso de  

etiquetas e instrucciones en la elaboraci&oacute;n de documentos  <b><i><font color="#000080">HTML</font></i></b>.<br><br> 

<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center> <br>

Página 18 

Manual Básico de HTML  

Es muy importante saber ubicar los gr&aacute;ficos y combinar  de buena manera los colores para brindar una buena imagen 

<b><i><font color="red">:)</font></i></b>.<br><br> 

Una p&aacute;gina WEB es muy importante, pues provee a nuestro  trabajo una ventana al mundo.<br> 

<br><center> 

<table width=80% align=center border=3> 

<tr><th colspan=3>Directorio Telef&oacute;nico</th></tr> 

<tr align=center> 

<td width=40% bgcolor="#C0C0C0"> 

Nombre 

</td> 

<td width=30% bgcolor="#C0C0C0"> 

Teléfono 

</td> 

<td width=30% bgcolor="#C0C0C0"> 

E-Mail 

</td> 

</tr> 

<tr> 

<td> 

Jos&eacute; Rodr&iacute;guez 

</td> 

<td> 

223454 

</td> 

<td>jose@prueba.com.bo</td> 

</tr> 

<tr> 

<td> 

Carolina Nu&ntilde;ez 

</td> 

<td> 

453444 

</td> 

<td>carolina@prueba.com.bo</td> 

</tr> 

</table> 

<br></center> 

</body> 

</html> 

Grabe este archivo con el nombre pag2.html sobre escribiendo el archivo anterior.  Consejo:  

Puede usar tablas sin borde (usando BORDER=0 en la sentencia <table>) para ubicar gráficos y  texto de forma elegante. 

Página 19 

Manual Básico de HTML  

Numeración y viñetas  

En HTML todo es posible, y tal cual en un editor de texto podemos trabajar con numeración y  viñetas, lo podemos hacer acá.  

Etiqueta <ul> </ul>  

Indica al navegador que cree una lista con viñetas no ordenada.  

No solamente usada para fines de numeraciones y viñetas, sino también para fines de sangría u  tabulaciones.  

Etiqueta <ol> </ol>  

Listas ordenadas, esta etiqueta predeterminada indica al navegador que numera la lista de  elementos comprendidos dentro de las etiquetas <ol>  

Etiqueta <li> </li>  

Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de línea en  una lista. Atributos:  

Type Especifica el tipo para listas ordenadas Type=A Usa letras mayusculas,  TYPE=a emplea letras minúsculas, Type=I Usa números romanos grandes, Type=i usa  números romanos pequeños y Type=1 usa números arábigos.  

Type también puede servir para definir la forma de la viñeta en las  

listas no ordenadas. Type=DISC, CIRCLE y SQUARE son las  

opciones disponibles.  

Value Indica que se inicie la numeración a partir del número especificado.  Creamos una nueva página para el siguiente ejemplo: 

 Ejemplo 11:  

<html> 

<head> <title>Curso de HTML</title> </head> 

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"> <center><h1> 

Bienvenidos al curso de HTML</h1></center><br> 

<hr width=50%><br> 

<h2>Debemos a comprar</h2><br> 

<ul> 

<li>Camisas para Jos&eacute;</li> 

<li>Loci&oacute;n para Daniel</li> 

</ul><br> 

<h2>Estudiar para ma&ntilde;ana</h2><br> 

<ol> 

<li type=a>Geometr&iacute;a</li> 

<li>ciencias Sociales</li> 

</ol><br> 

<h2>Actividades de la semana</h2><br> 

<ol> 

<li type=i>Asistir a la Universidad</li> 

<li>Comprar Disco</li> 

<li>Llevar el auto al mec&aacute;nico</li> 

</ol><br> 

<h1>Objetivos</h1> 

<ul>El uso de estas etiquetas tambi&eacute;n puede ayudar a mover  el texto en base a tabulaciones o sangr&iacute;as de texto, para  diferenciar parrafos o textos de los encabezamientos. </ul> 

</body> 

</html> 

Grabamos el nuevo ejemplo con el nombre “pag3.html”. Hasta este punto tenemos 3 páginas  HTML.  

Hipervínculos  

Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra dirección  URL, página WEB o recurso. 

Página 21 

Manual Básico de HTML  

Etiqueta <A> </A>  

La etiqueta <A> que viene de “ancla”, denota el inicio y el final de una instrucción que contiene  alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario vincularse a otra  ubicación dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de  correo electrónico, ... Atributos:  

HREF Recurso al cual se hace referencia el hipervínculo  

NAME Especifica el nombre de la posición a donde apuntar  TARGET Destino del enlace (generalmente para páginas con Frames)  

Por ejemplo, desde una nueva página, que llamaremos pag4.html, crearemos enlaces a las 3  páginas anteriores y además otros enlaces importantes.  

En este ejemplo, aplicaremos también los atributos para colores de los vínculos de la etiqueta Body.  

Ejemplo 12:  

<html> 

<head> <title>P&aacute;gina de enlaces</title> </head> 

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"  link="#000080" vlink="magenta" alink="black"> 

<center><h1> 

<a name="tope"></a> 

Enlaces</h1><br> 

<img src="foto.jpg" alt="Foto de Claudia"><br><br>  

<a href="index.html">P&aacute;gina Principal o 

P&aacute;gina Uno</a><br> 

<a href="pag2.html">P&aacute;gina Dos</a><br> 

<a href="pag3.html">P&aacute;gina Tres</a><br> 

<br> 

<a href="http://www.bolivia-internet.com/">Bolivia en Internet</a><br> <a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br> <a href="mailto:cae@bolivia-internet.com">Env&iacute;a comentarios  sobre este manual por E-Mail</a><br> 

<br><br> 

<a href="#tope">De vuelta arriba</a> 

</center> 

</body> 

</html> 

Podrá notar que los enlaces de la parte inferior hacen referencia a recursos que se encuentran en  Internet. Reemplazando la dirección E-Mail del ultimo enlace, podrá crear un enlace a su E-Mail. 

Página 22 

Manual Básico de HTML  

El último enlace hace referencia a una porción de la misma página, que fue definida al inicio de la  página HTML. Esta parte es útil para accesos a partes diversas de una sola página.  

Frames  

Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.  

Etiqueta <frameset> </frameset>  

Define la disposición gráfica de los marcos en la pantalla. Atributos:  

Rows Determina el alto de las filas Cols  

Determina el ancho de las columnas.  

Framespacing Espacio entre frames  

Etiqueta <frame></frame>  

Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>.Sus  atributos son:  

Marginheight Determina que tanto espacio vertical (en pixeles) existe entre  el objeto ubicado en un marco, y los extremos superior o ingerior de este.  MarginWidth Determina que tanto espacio horizontal (en pixeles) existe  entre el objeto ubicado en un marco, y los extremos izquierdo o derecho de éste.  Name Ofrece la capacidad de Dar nombres a las ventanas  FRAME, de modo que puedan ser utilizados como destino de  

los hipervínculos.  

Noresize indica que el usuario no puede redimensionar el marco  Scrolling Habilita una barra de desplazamiento para un marco.  Existen tres parámetros posibles SCROLLING=YES,  

SCROLLING=NO y SCROLLING=AUTO que habilita la  

barra solo si es necesario  

SRC indica que exhiba en un marco el contenido de un documento  HTML.  

Etiqueta <noframes></noframes>  

Etiqueta que es usada para desplegar un texto o una página alternativa cuando un navegador no es  capaz de desplegar los marcos. 

Página 23 

Manual Básico de HTML  

Veamos un ejemplo que resume todo esto. Debemos crear un nuevo archivo html, al cual  llamaremos: frames.html.  

Ejemplo 13:  

<html> 

<head> <title>P&aacute;gina de frames</title> </head> 

<frameset COLS="20%,*" frameborder=0 framespacing=0 border=0> <frame name="izquierda" src="pag4.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no"> 

<frameset ROWS="30%,*" frameborder=0 framespacing=0 border=0> 

<frame name="superior" src="pag2.html" marginheight="0" scrolling="auto" frameborder="no"> <frame name="principal" src="pag3.html" marginheight="0" scrolling="auto" frameborder="no">  </frameset> 

</frameset> 

<noframes> 

<center> 

Su navegador no puede desplegar frames. 

</center> 

</noframes> 

</html> 

marginwidth="0" marginwidth="0" 

Una vez que cargue la nueva página frames.html podrá ver los marcos que se crearon.  Notará que los enlaces del marco derecho aparecen en el mismo marco, lo que debemos hacer es  redireccionar estos enlaces usando el atributo target en el ejemplo pag4.html que quedaría de esta  manera: 


                        Ejemplo 14:  

<html> 

<head> <title>P&aacute;gina de enlaces</title> </head> 

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"  link="#000080" vlink="magenta" alink="black"> 

<center><h1> 

<a name="tope"></a> 

Enlaces</h1><br> 

<img src="foto.jpg" alt="Foto de Claudia"><br><br> 

<a href="index.html" target="principal">P&aacute;gina Principal  o 

P&aacute;gina Uno</a><br> 

<a href="pag2.html" target="principal">P&aacute;gina Dos</a><br> <a href="pag3.html" target="principal">P&aacute;gina Tres</a><br> <br> 

<a href="http://www.bolivia-internet.com/" target="principal">Bolivia  en Internet</a><br> 

<a href="ftp://ftp.microsoft.com/pub/" target="principal">FTP de  Microsoft</a><br> 

<a href="mailto:cae@bolivia-internet.com">Env&iacute;a comentarios  sobre este manual por E-Mail</a><br> 

<br><br> 

<a href="#tope">De vuelta arriba</a> 

</center> 

</body> 

</html> 

Guarde este archivo con el nombre pag4.html y haga una actualización de la página en su  navegador para notar los cambios.  

Otras etiquetas útiles  

A continuación algunas etiquetas que pueden ser útiles al momento de elaborar las páginas HTML.  Se detalla el objetivo de cada una de las etiquetas y un ejemplo.  

Etiqueta de comentarios <!-- -->  

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada  para realizar acotaciones y/o comentarios.  

Sintaxis de Ejemplo:  

<!-- Los comentarios se introducen de esta manera -->

Página 25 

Manual Básico de HTML  

Etiqueta de comentarios <comment> </comment>  

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada  para realizar acotaciones y/o comentarios.  

Sintaxis de Ejemplo:  

<comment>Los comentarios se introducen de esta manera</comment> 

Etiqueta <address></address>  

Ofrece una manera de dr formato a un pequeño cuerpo de texto que se asemeje a la rotulación de  una carta convencional.  

Sintaxis de ejemplo:  

<address>Roberto Rojas<br>  

POBOX 2282<br> 

La Paz – Bolivia</address> 

Etiqueta <cite> </cite>  

El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita Sintaxis  de ejemplo:  

<cite>Este texto estar&aacute; inclinado</cite> 

Etiqueta <code> </code>  

El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono espaciados cuando  se visualiza a través de un navegador.  

Sintaxis de ejemplo:  

<code>Este texto aparece con tipo de letra especial</code> 

Etiqueta <credit> </credit>  

Esta etiqueta se emplea para indicar los créditos por el material incluido en un documento. A  menudo se asignan créditos para las fuentes e individuos que se citan en forma directa.  Sintaxis de ejemplo:  

<credit>Foto usada bajo permiso de Carlos An&iacute;barro</credit>



Página 26 

Manual Básico de HTML  

Etiqueta <em> </em>  

Indica que se debe dar énfasis al texto que se contiene. EL navegador resaltará este texto con  negrillas e inclinación italica.  

Sintaxis de ejemplo:  

<em>Texto resaltado</em> 

Etiqueta <kbd> </kbd>  

La etiqueta <kbd> indica al navegador que interprete el texto especificado en una fuente en negritas  de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada del teclado hecha  por el usuario.  

Sintaxis de ejemplo:  

<kbd>Teclee su mensaje ac&aacute;:</kbd> 

Etiqueta <nobr> </nobr>  

La etiqueta <nobr> impide que el navegador inserte un salto de línea, incluso cuando es adecuado  el ajuste de texto. Algunas cadenas de texto no deberían romperse bajo ninguna circunstancia. Un  buen ejemplo de una cadena de texto que debe permanecer sin cortes es un URL extenso.  Sintaxis de ejemplo:  

No deseo que esta dirección URL larga sea cortada:  

<nobr>http://www.bolivia-internet.com/irc</nobr> 

Etiqueta <p> </p>  

La etiqueta <p> o de párrafo, indica el inicio y el final de oraciones a exhibir con un solo párrafo.  Sintaxis de ejemplo:  

<p>a partir de ahora definimos p&aacute;rrafos de esta manera.</p> <p align=”center”>P&aacute;rrafo en el centro</p> 

<p align=”left”>P&aacute;rrafo a la izquierda</p>  

<p align=”right”>P&aacute;rrafo a la derecha</p>

Página 27 

Manual Básico de HTML  

Etiqueta <pre> </pre>  

La etiqueta <pre> significa texto “preformateado” y se usa para conservar espacios y saltos de  línea en cuerpos de texto. Esta etiqueta resulta útil en el formateo de un párrafo completo que el  autor quisiera que el navegador cliente lo exhibiese palabra por palabra.  

Sintaxis de ejemplo:  

<pre>El texto que usted ve. 

Aparecer&aacute; tal cual, incluidos los retornos de carro</pre> 

Etiqueta <s> </s> o <strike> </strike>  

Instruye al navegador que tache el texto incluido entre las etiquetas.  

Sintaxis de ejemplo:  

<strike>Este texto esta tachado</strike> 

Etiqueta <strong> </strong>  

Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el texto en  cursivas. 

Sintaxis de ejemplo:  

<strong>Este texto esta sobre saltado</strong> 

Etiqueta <sub> </sub>  

Instruye al navegador que exhiba el texto especificado como subíndice.  

Sintaxis de ejemplo:  

Agua: H<sub>2</sub>0 

Etiqueta <sup> </sup>  

Indica al navegador exhibir el texto especificado como super índice Sintaxis  de ejemplo:  

Mate: 2*2 = 2<sup>2</sup>.

Página 28 

Manual Básico de HTML  

Etiqueta <tt> </tt>  

Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de ancho  fijo.  

Sintaxis de ejemplo:  

<tt>Este es un tipo de letra de teletipo</tt> 

Etiqueta <var> </var>  

Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo.  Sintaxis de ejemplo:  

<var>Este texto será mas pequeño y de formato especial</var> 

Atributo bgproperties=”fixed ” del BODY  

Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma  vertical.  

Sintaxis de ejemplo:  

<body text=”#FFFFFF” bgcolor=”#000000” background=”fondo.gif”  bgproperties=”fixed”> 

Notas:  

La última versión de este manual se encuentra disponible siempre en:  

http://www.bolivia-internet.com/html 

Los ejemplos pueden ser bajados directamente de:  

http://www.bolivia-internet.com/html/ejemplos.exe  

O bien pueden ser comparados vía Internet en esta dirección: http://www.bolivia internet.com/html/ejemplos/ 

Si existe más de una página en el ejemplo, usted deberá específicamente deberá poner el nombre  de la sub página. En el ejemplo 9 se tuvo que crear una página llamada pag2.html, note que si usted  pone esta dirección: http://www.bolivia-internet.com/html/ejemplos/ejemplo9/ ingresará a la 

Página 29 

Manual Básico de HTML  

página index.html y no así a la pag2.html, y deberá colocar esta dirección para ingresar a la sub  página: http://www.bolivia-internet.com/html/ejemplos/ejemplo9/pag2.html/ .  


TABLA(HORARIO) 

<HTML> 

<HEAD> 

<TITLE>Paginas1 en Internet</TITLE> 

</HEAD> 

<BODY> 

<TABLE width=100% align=center border=3> 

<tr><th colspan=6>Horario 

De Clase</th></tr> 

<tr align=center> 

<td whidth=40% bgcolor=”#COCOCO”> 

SESION 

</td> 

<td whidth=40% bgcolor=”#Red”> 

LUNES 

</td> 

<td whidth=40% bgcolor=”#Orange”> 

MARTES

Página 30 

Manual Básico de HTML  

</td> 

<td whidth=40% bgcolor=”#Orange”> MIERCOLES 

</td> 

<td whidth=40% bgcolor=”#Black”> JUEVES 

</td> 

<td whidth=40% bgcolor=”#Green”> VIERNES 

</tr> 

<td> 

8:00-8:50 

</td> 

<td> 

Submodulo 1 

</td> 

<td> 

Tutoria 

</td> 

<td> 

Submodulo 1

Página 31 

Manual Básico de HTML  

</td> 

<td> 

Submodulo 1 </td> 

<td> 

TSM 1 

</td> 

</td> 

</tr> 

<td> 

8:50-9:40 

<td> 

Submodulo 1 </td> 

<td> 

TSM 1 

</td> 

<td> 

Submodulo 1 </td> 

<td>

Página 32 

Manual Básico de HTML  

Submodulo 1 

</td> 

<td> 

TSM 1 

</td> 

</td> 

</tr> 

<td> 

9.40-10:30 

<td> 

Honores a la bandera  </td> 

<td> 

Submodulo 2 

</td> 

<td> 

TSM I 

</td> 

<td> 

Submodulo 1 

</td>

Página 33 

Manual Básico de HTML  

<td> 

Ciencia Historica </td> 

</td> 

</tr> 

<td> 

10:30-11:10 

<td> 

</td> 

<td> 

</td> 

<td> 

</td> 

<td> 

</td> 

</td> 

<td>

Página 34 

Manual Básico de HTML  

SO 

</td> 

<tr> 

<td> 

11:10-12:00 

</td> 

<td> 

Ciencias Historicas <td> 

Submodulo 2 

<td> 

Ingles IV 

</td> 

<td> 

Submodulo 1 

</td> 

<td> 

Ingles IV 

</td> 

</tr> 

<tr>

Página 35 

Manual Básico de HTML  

<td> 

12:00-12:50 

</td> 

<td> 

Ciencias Historicas <td> 

Submodulo 2 

</td> 

<td> 

Submodulo 2 

</td> 

<td> 

Submodulo 1 

</td> 

<td> 

Ingles IV 

</td> 

<tr> 

<td> 

12:50-13:40 

<td>

Página 36 

Manual Básico de HTML  

Ciencias Sociales III <td> 

Submodulo 2 

</td> 

<td> 

CNE y T IV 

<td> 

</td> 

<td> 

Submodulo 2 

</td> 

</tr> 

<tr> 

<td> 

13:40-14:30 

<td> 

Submodulo 2 

<td> 

Ingles IV Asesorias </td> 

</td>

Página 37 

Manual Básico de HTML  

<td> 

CNE y T IV 

</td> 

<td> 

</td> 

<td> 

CNE y T IV 

</td> 

</tr> 

<td> 

14:30-15:20 

<td> 

Submodulo 2 

</td> 

<td> 

Ciencias Sociales III <td> 

<td> 

<td> 

CNE y T IV 

</tr>

Página 38 

Manual Básico de HTML  

</TABLE> </BODY> </HTML> 
<HTML> <HEAD> 



EGIPTO 




<TITLE>Paginas en Internet</TITLE> 

</HEAD> 

<BODY background = "mega-egipto.jpg" bgsound src="Ancient Egyptian Music Tomb of the  Ancients.mp3" loop="1"> 

<font fase="helvetica" size="5" color="white"> 

<h1><center>EGIPTO</center></h1>

Página 39 

Manual Básico de HTML  

<P> El Imperio Antiguo se inicia con gran esplendor politico y artistico. Este es el periodo de la  construccion de las colosales piramides. En la III dinastia, Zoser construye la piramide  escalonada de Saqqara, prototipo arquitectonico de las edificadas posteriormente. Keops erigio la  Gran piramide de Gizeh, junto a la cual edificaron las suyas los faraones Kefren y Micerinos. A  finales de la IV dinastia comenzo a desestabilizarse el poder politico y aumento notablemente la  influencia de los gobernadores provinciales. La consecuencia fue una gran crisis de Estado que  desembocaria en el desmoronamiento del Imperio Antiguo.</P> 

<P><u><i>Como y porque momificaban a los muertos.</i></u></P> 

<P><b>Para los egipcios la muerte no era un punto final a su existencia, sino que significaba el  inicio de una nueva vida.</b></P></front> 

<BR><BR> 

<A HREF = "curriculum.html">DA CLIC</A> 

</BODY> 

<audio whidth="300"heigt="32" src="Ancient Egyptian Music Tomb of the Ancients.mp3"  controls="controls" autoplay="utoplay" preload=""> 

</audio> 

</HTML>

Página 40 

Manual Básico de HTML  

CURRICULUM VITAE 

<HTML> 

<HEAD> 

<TITLE>CURRICULUM VITAE</TITLE> 

</HEAD> 

<img src= "4a2c3e13-d3bb-4646-97eb-bff0449b3cbc.jfif" HEIGHT= "250" WIDTH ="200"  ALIGN ="RIGHT"> 

<HR> 

<BODY background ="descarga.jfif"> 

<font face="Bauhaus 93" size="5" color="black"> 

<h1><center>ANGELA LIZBETH ALVAREZ GONZALEZ</center></h1> <HR> 

<BR> 

<font face="helvetica" size="5" color="purple"> 

<h4><B>Datos personales</B></h4> 

<font face="helvetica" size="5" color="black"> 

<h6><i>Fecha de nacimiento : 19 de Octubre del 2008</i></h6> 

<h6><i>Telefono : 4861153436</i></h6> 

<h6><i>Edad : 16</i></h6> 

<h6><i>Direccion : Juventino Rosas #104</i></h6> 

<h6><i>Correo : al23124011230117@cbta123.edu.mx</i></h6> 

<h6><i>Grado de Escolaridad : IV Semestre Ofimatica "C" Bachillerato</i></h6> 

<font face="Bauhaus 93" size="5" color="purple"> 

<h4><B>Perfil personal</B></h4> 

<font face="Bauhaus 93" size="5" color="black"> 

<h6><i><P>Soy una persona responsable en su trabajo, me gusta hacer las cosas bien, soy muy  ordenada, me gusta trabajar en equipo y apoyar a las personas. Tengo experiencia en en usar los 

Página 41 

Manual Básico de HTML  

programas de Office, conozco elementro de un equipo de computo, igual que  ativirus</P></i></h6> 

<font face="Bauhaus 93" size="5" color="blue"> 

<h4><B>Educacion</B></h4 

<font face="helvetica" size="5" color="black"> 

<h6><i>Pescolar : Rafael Nieto</i></h6> 

<h6><i>Primaria : Rafael Nieto</i></h6> 

<h6><i>Telesecundaria : Herues Potosinos</i></h6> 

<h6><i>Bachillerato : Centro de Bachillerato Tecnologico Agropecuario</i></h6> <BR><BR> 

<A HREF="file:///Users/angela/Desktop/MOLUD0%201/TABLA%20(HORARIOS).html>DA  CLICK</A> 

</BODY> 

</HTML> 


FORMULARIO 

<HTML> 

<H1><CENTER>EJEMPLO DE UN FORMULARIO</CENTER></H1>

Página 42 

Manual Básico de HTML  

<BODY BGCOLOR="purple"> 

<HR> 

<FORM ACTION="https://mail.google.com/mail/u/0/?tab=rm#inbox" METHOD="GET"> NOMBRE: <INPUT TYPE="TEXT" NAME="NOMBRE"><BR> 

EDAD: <INPUT TYPE="TEXT" NAME="EDAD" SIZE="3"><BR> E-MAIL: <INPUT TYPE="TEXT" NAME="email" SIZE="40"><BR> CONTRASEÑA: <INPUT TYPE="PASSWORD" NAME="CLAVE" SIZE="20"><BR> <HR> 

¿CUALES MATERIAS TE GUSTAN MAS?<BR> 

<INPUT TYPE="CHECKBOX" NAME="CURSO">ESPAÑOL<BR> <INPUT TYPE="CHECKBOX" NAME="CURSO">INGLES<BR> <INPUT TYPE="CHECKBOX" NAME="CURSO">PINTURA<BR> <INPUT TYPE="CHECKBOX" NAME="CURSO">MATEMATICAS<BR> <INPUT TYPE="CHECKBOX" NAME="CURSO">MUSICA<BR> <INPUT TYPE="CHECKBOX" NAME="CURSO">LITERATURA<BR> <HR> 

INDIQUE EL TIPO DE CURSO AL QUE LE GUSTARIA INSCRIBIRSE<BR> (SELECCIONE UNO)<BR> 

<INPUT TYPE="RADIO" NAME="CURSO">ESPAÑOL<BR> 

<INPUT TYPE="RADIO" NAME="CURSO">INGLES<BR> 

<INPUT TYPE="RADIO" NAME="CURSO">PINTURA<BR> 

<INPUT TYPE="RADIO" NAME="CURSO" CHECKED>MATEMATICAS<BR> <INPUT TYPE="RADIO" NAME="CURSO">MUSICA<BR> 

<INPUT TYPE="RADIO" NAME="CURSO">LITERATURA<BR> <HR> 

INDIQUE SU PAIS DE ORIGEN: 

<SELECT NAME="PAIS" SIZE="1"> 

<OPTION VALUE="PAIS1">ARGENTINA</OPTION> 

<option value="PAIS2">BRASIL</option> 

<option selected value="PAIS4">MÉXICO</option> 

<option value="PAIS3">COLOMBIA</option> 

<option value="PAIS5">USA</option> 

</select> 

<hr> 

ANOTA AQUÍ TUS COMENTARIOS<br> 

<textarea cols="40" rows="6"></textarea><br> 

<hr> 

<input type="submit" value="ENVIAR DATOS"> 

<input type="reset" value="LIMPIAR FORMULARIO"> 

</form> 

<hr> 

</body>

Página 43 

Manual Básico de HTML  

</html>

<HTML> <HEAD> 





EXAMEN 

<TITLE>EXAMEN</TITLE> 

</HEAD> 

<BODY BGCOLOR="PINK"> 

<FORM ACTION="mailto:angelalizbeth364@gmail.com"METHOD"="GET"> <TABLE width=100%align=center border=2> 

<TR> 

<TD> 

INFORMACION PARA COTIZACION 

Página 44 

Manual Básico de HTML  

</TR> 

</TD> 

<TD> 

POR FAVOR ROPORCIONA TU CODIGO POSTAL Y SELECCIONATU COLONIA Y  POBLACION 

</TD> 

</TR> 

<TR> 

<TABLE width=50%align=center border=2> 

<TR> 

<TD> 

CODIGO POSTAL 

</TD> 

<TD> 

<INPUT TYPE="TEXT" NAME="CODIGO POSTAL"> 

</TD> 

</TR> 

<TR> 

<TD> 

ESTADO 

<TD> 

<INPUT TYPE="TEXT" NAME="ESTADO"> 

</TD> 

</TR> 

<TR> 

<TD> 

CUIDAD/MUNICIPIO 

<TD> 

<INPUT TYPE="TEXT" NAME="CUIDAD/MUNICIPIO"> 

</TD> 

</TR> 

<TR> 

<TD> 

COLONIA/POBLACION 

<TD> 

<SELECT NAME="COLONIA/POBLACION" SIZE="1"> 

<OPTION VALUE="PAIS1">Santa Cruz</OPTION> 

<option value="PAIS2">Nto Padre Jesus</option> 

<option selected value="PAIS4">San Francisco</option>

Página 45 

Manual Básico de HTML  

<option value="PAIS3">San Juan</option> 

</select> 

<TR> 

<TD> 

TIPO DE ASEGURADO 

<TD> 

<SELECT NAME="TIPO DE ASEGURADO" SIZE="1"> <OPTION VALUE="PAIS1">Propietario</OPTION> 

<option value="PAIS2">Arrendatario</option> 

</select> 

<TR> 

<TD> 

SUMA ASEGUARDA DEL EDIFICIO 

<TD> 

<SELECT NAME="SUMA ASEGUARDA DEL EDIFICIO" SIZE="1"> <OPTION VALUE="PAIS1">$500,000</OPTION> 

<OPTION VALUE="PAIS2">$600,000</OPTION> 

</select> 

<TR> 

<TD> 

SUMA ASEGURADA DE CONTENIDOS 

<TD> 

<SELECT NAME="SUMA ASEGURADA DE CONTENIDOS" SIZE="1"> <OPTION VALUE="PAIS1>$250,000</OPTION> 

<OPTION VALUE="PAIS2">$300,000</OPTION> 

<OPTION VALUE="PAIS3">$350,000</OPTION> 

</select> 

<TR> 

<TD> 

TIPO DE VIVIENDA 

<TD> 

<SELECT NAME="TIPO DE VIVIENDA" SIZE="1"> 

<OPTION VALUE="PAIS1>Unifamiliar</OPTION> 

<OPTION VALUE="PAIS2">Condominio Vertical</OPTION> <OPTION VALUE="PAIS3">Condominio Horizontal</OPTION> </select> 

<TR>

Página 46 

Manual Básico de HTML  

<TD> 

USO DE VIVIENDA 

<TD> 

<SELECT NAME="TIPO DE VIVIENDA" SIZE="1"> 

<OPTION VALUE="PAIS1>Habitada permanentemente</OPTION> <OPTION VALUE="PAIS2">Descanso con personal al cuidado de la casa</OPTION> <OPTION VALUE="PAIS3">Descanso sin personal al cuidado de la casa</OPTION> </select> 

<TR> 

<TD> 

MUROS 

<TD> 

<SELECT NAME="MUROS" SIZE="1"> 

OPTION VALUE="PAIS1">Muro de tabique, piedra o block</OPTION> <OPTION VALUE="PAIS2">Muro tepetate, o adobe</OPTION>  <OPTION VALUE="PAIS3">Muro de concreto y/o madera</OPTION> </select> 

<TR> 

<TD> 

TECHO 

<TD> 

<SELECT NAME="TECHO" SIZE="1"> 

<OPTION VALUE="PAIS1">Tabique, piedra o blok</OPTION> <OPTION VALUE="PAIS2"> Tepetate, o adobe</OPTION> 

<OPTION VALUE="PAIS3">Cocreto y/o madera</OPTION> 

</select> 

<TR> 

<TD> 

COLINDANTES SIN FINCAR 

<TD> 

<SELECT NAME="COLINDANTES SIN FINCAR" SIZE="1"> <OPTION VALUE="PAIS1">Ninguno</OPTION> 

<OPTION VALUE="PAIS2">De un solo lado</OPTION> 

<OPTION VALUE="PAIS3">Por ambos lados</OPTION> 

</select> 

<TR> 

<TD>

Página 47 

Manual Básico de HTML  

VIGILANCIA 

<TD> 

<SELECT NAME="VIGILANCIA" SIZE="1"> 

<OPTION VALUE="PAIS1">Sin vigilancia</OPTION> 

<OPTION VALUE="PAIS2">Vigilancia exclusiva. No armada</OPTION> <OPTION VALUE="PAIS3">Vigilancia exclusivaarmada</OPTION> </select> 

<TR> 

<TD> 

ALARMA LOCAL 

<TD> 

<SELECT NAME="ALARMA LOCAL" SIZE="1"> 

<OPTION VALUE="PAIS1">Si</OPTION> 

<OPTION VALUE="PAIS2">No</OPTION> 

</select> 

<TR> 

<TD> 

ALARMA CENTRAL 

<TD> 

<SELECT NAME="ALARMA CENTRAL" SIZE="1"> 

<OPTION VALUE="PAIS1">Si</OPTION> 

<OPTION VALUE="PAIS2">No</OPTION> 

</select> 

<TR> 

<TD> 

CAJA FUERTE 

<TD> 

<SELECT NAME="CAJA FUERTE" SIZE="1"> 

<OPTION VALUE="PAIS1">Si</OPTION> 

<OPTION VALUE="PAIS2">No</OPTION> 

</select> 

<TR> 

<TD> 

ACCESO CONTROLADO Y VIGILANCIA LAS 24 HRS 

<TD> 

<SELECT NAME="ACCESO CONTROLADO Y VIGILANCIA LAS 24 HRS" SIZE="1"> <OPTION VALUE="PAIS1">Si</OPTION> 

<OPTION VALUE="PAIS2">No</OPTION>

Página 48 

Manual Básico de HTML  

</select> 

<TR> 

<TD> 

<input type="submit" value="ENVIAR DATOS"> 

<input type="reset" value="LIMPIAR FORMULARIO"> 

</form> 

</TR> 

</TD> 

</body> 

</html>







Comentarios

Entradas más populares de este blog

PORTAFOLIO

Parcial 1   Parcial 2                 Parcial 3            Portafolio de Evidencias   Submódulo 1: Gestiona información mediante el uso de software en línea Alumno: Angela Lizbeth Álvarez González   Profesor: T.P. Juan Gerardo Gallegos Chiquito  Semestre: IV Semestre  Grupo: “C”  Lugar: Cerritos San Luis Potosí   Carrera: Técnico en Ofimática   Periodo: Febrero – Julio 2025 FICHA DE IDENTIFICACION   Nombre del alumno: Angela Lizbeth Álvarez González  Asignatura: Gestiona información mediante el uso de software en línea  Profesor: T.P. Juan Gerardo Gallegos Chiquito   Semestre: IV semestre   Grupo: C  Escuela: Centro de bachillerato tecnológico agropecuario  Edad: 16   Domicilio: Juventino Rosas #104  Fecha de nacimiento: 19 de octubre del 2008   Lugar de nacimiento: Cerritos...

Parcial 3

  FORMS Encuesta Examen

Parcial 2

  Herramientas Google Aplicadas a Educación                           Índice de contenido                Google Chrome: hay vida más allá de Windows Internet Explorer                                2                        Con Google Chrome, Google Apps funciona mejor                                               2            ...