Scribd
Cargar
123 vistas9 páginas

Lab 1 Codigo HTML

Este documento presenta información sobre etiquetas HTML. Explica la estructura básica de una página web con las etiquetas <html>, <head> y <body>. Luego describe varias etiquetas importantes como <img>, <b>, <i>, <center> y sus atributos. También cubre el uso de colores, caracteres especiales, encabezados, líneas horizontales y cómo insertar imágenes en una página web.

Cargado por

abel
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 DOCX, PDF, TXT o lee en línea desde Scribd
123 vistas9 páginas

Lab 1 Codigo HTML

Este documento presenta información sobre etiquetas HTML. Explica la estructura básica de una página web con las etiquetas <html>, <head> y <body>. Luego describe varias etiquetas importantes como <img>, <b>, <i>, <center> y sus atributos. También cubre el uso de colores, caracteres especiales, encabezados, líneas horizontales y cómo insertar imágenes en una página web.

Cargado por

abel
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

ESCUELA INDUSTRIAL SUPERIÓR

¨PEDRO DOMINGO MURILLO¨


CARRERA : INFORAMTICA INDUSTRIAL
ASIGNATURA : TEW-200 Tecnologia Web I
TEMA LAB. : HTML 5 ETIQUETAS
DOCENTE : Edgar Mendoza F.
INTEGRANTE : LOZA YUGRA ABEL
FECHA : 23/08/22

CODIGO HTML
1 OBJETIVOS
 Conocer diversas etiquetas dentro de HTML.
 Conocer las propiedades de las etiquetas en HTML para observar su aplicación en páginas web.
 Realizar diversas páginas web manejando imágenes, tablas y enlaces.

2 MATERIALES, EQUIPO Y SOFTWARE


 Bloc de Notas
 Set de instrucciones, etiquetas.
 Explorador (Mozilla Firefox, Google Chrome, Brave, opera etc)

3 MARCO TEORICO PARA EL DESARROLLO DEL LABORATORIO


3.1 ¿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 cómo desplegar la
página Web.

3.1.1 Estructura básica de una página WEB


Una página web está 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 está 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>.

El hipertexto será grabado con el nombre index.html en alguna ubicación en el disco duro. Al asignar la
extensión .htm 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.

1
Nota importante: Como se ve en el ejemplo1, toda etiqueta abierta debe cerrarse, en caso de no cerrarse el error
podría causar confusión al navegador.

3.1.2 Etiquetas
3.1.2.1 <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.
 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. (Internet Explored).
 bgproperties define el movimiento vertical del fondo. (Internet Explored).

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

3.1.2.1.1 ¿Cómo se utilizan los colores en HTML?


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

 Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue, green, yellow, etc.
 Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura:

#RRVVAA (RGB)
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 {0,1,2,3,4,5,6,7,8,9,,A,B,C,D,E,F}.

2
Se recomienda utilizar aplicaciones externas para determinar una gama mas amplia de colores, entre ella se puede
mencionar CODIGO DE COLORES (app para Android).

Ilustración 1 Interface App para Android

3.1.3 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:
 &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; ó

3
3.1.3.1 <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.

3.1.3.2 <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente, con una
apariencia de tercera dimensión. Esta etiqueta especial, porque 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)

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)

3.1.4 Ubicación, formato y atributos de texto


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

3.1.4.2 <b> </b>


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

3.1.4.3 <u> </u>


Etiqueta que posibilita resaltar un texto con subrayado.

3.1.4.4 <i> </i>


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

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

3.1.4.5 <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.

3.1.5 Imágenes en HTML


Hasta este momento se ha trabajado solamente con texto. Comencemos a introducir gráficos en nuestra página
HTML.
4
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 porque 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.

Nota 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.

3.1.5.1 <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

3.1.6 Tablas en HTML


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
 brderDark Determina el color de la parte oscura de un borde de 3 dimensiones

5
 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

3.1.6.1 <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

3.1.6.2 <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

3.1.6.3 <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.

3.2 DISEÑO DE NUESTRA PAGINA WEB CON LAS ETIQUETAS PRESENTES


3.2.1 Código en HTML (se trabajó con el editor de notas de Windows)
<html><head>

<title> IIME </title>

</head>

<body bgcolor="81BCB4" text="#191719">

<h1 align="center"> <font color="000000"><u> INSTITUTO DE INVESTIGACIONES <br>

MECANICAS Y ELECTROMECANICAS </u></font> </h1> <br>

<center> <img src="C:\Users\NIKO\Desktop\IMAGENES\IIME.jpg" height="60%"> </center>

6
<center> <h3>El Instituto de Investigaciones Mecánicas y Electromecánica, es

una unidad dependiente de la Carrera de Ingeniería <br>

Mecánica de la Facultad de Ingeniería de la Universidad Mayor de San Andrés.</center> </h3>

<h2 align="left"><font color="E22526"><i> HISTORIA</font></i></h2>

<left> <h3>El Instituto de Investigaciones Mecánicas y Electromecánica (IIME), es la unidad de

investigación que depende de la Carrera de Ingeniería Mecánica. Fue creado el 9 de septiembre

de 1994 por Resolución del HCU N° 133/94.</left> </h3>

<h2 align="left"><font color="E22526"><i> MISION </font></i></h2>

<left> <h3>Planificar y ejecutar proyectos de investigación, postgrado e interacción social,

que permitan adquirir, generar y difundir conocimiento en todos los campos de aplicación de

las Ingenierías Mecánica y Electromecánica, para apoyar la labor de formación y extensión

académica de la Carrera de Ingeniería Mecánica de la UMSA, y ponerla al servicio de la Región y

Bolivia.</left> </h3>

<h2 align="left"><font color="E22526"><i>VISION</font></i></h2>

<left> <h3>Que el Instituto de Investigaciones Mecánicas y Electromecánica sea un referente

nacional en temas de investigación, desarrollo e innovación tecnológica de una manera

autosostenible en la interacción con la sociedad.</left> </h3>

<h2 align="left"><font color="E22526"><i>OBJETIVOS</font></i></h2>

<right> <h5>1. Fomentar las actividades de investigación docente y estudiantil, a través de

la proposición, elaboración y ejecución de proyectos, fomentando el trabajo de estos estamentos,

tanto de manera conjunta como separada.</right> </h5>

<right> <h5>2. Contribuir al desarrollo regional y nacional a través de la generación de

conocimientos para: Desarrollar y aplicar la capacidad científica y tecnológica de las

Ingenierías Mecánica y Electromecánica en Bolivia.</right> </h5>

<right> <h5>3.Identificar y priorizar líneas de investigación en diferentes áreas de las

Ingenierías Mecánica y Electromecánica, aplicadas a actividades productivas y de servicio en la

industria nacional, para preparar recursos humanos especializados.</right> </h5>

7
<center> <img src="C:\Users\NIKO\Desktop\IMAGENES\engranajes.gif" height="80%"> </center>

</body></html>

3.2.2 Ilustración de nuestra pagina desde un navegar (Brave)

Ilustración 2 Parte 1 (Pagina Web)

Ilustración 3 Parte 2 (Pagina Web)

8
Ilustración 4 Parte 3 (Pagina Web) (los engranajes presentes son en formato gif, están en movimiento)

Se presenta un orden de imágenes, presentando la pagina Web que se fue desarrollando en base a las etiquetas
conocidas y poniendo así en práctica todo lo aprendido en la Laboratorio 1 (ETIQUETAS HTML).

Ilustración 5 Parte del código presente en la página Web (block de notas)

También podría gustarte