top of page

HTML y
Proyecto a Desarrollar

/////////////////////////////////////////////////////////////////////////////////////////////////////////

Actividad de consolidación.

App Mentimeter

MENTIMETER.jpg

Progresión: representa la solución de la situación, fenómeno o problemática a través de páginas web (hosting u hospedaje, dominio, ftp, usuarios, contraseñas), con el lenguaje de Marcas –Hyper Text Markup Language o HTML.

Meta específica: organiza y presenta información, o datos, que dan solución a un problema, a través de un sitio web con el uso etiquetas de HTML.

Considera la siguiente información para mejorar tus páginas HTML, pero también considera que la Inteligencia Artificial te podrá ser también de ayuda para ello. Pregunta a tu profesor(a) por esta opción.

Fondos y texto

Hasta ahora hemos visto como se colocan los textos, sin embargo, podemos hacer uso de etiquetas para mejorar la apariencia del texto que hemos escrito.

Las etiquetas más comunes que se emplean para dar formato al texto son las siguientes:

HTML08.jpg

Atributos que permiten hacer modificaciones sobre el tipo de fuente (tipo de letra) <FONT> fuente </FONT>

HTML09.jpg

Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, que puede tomar los valores siguientes.

• LEFT: el párrafo es justificado a la izquierda. Valor por defecto.

• CENTER: el párrafo es centrado.

• RIGHT: el párrafo es justificado a la derecha.

 

A Continuación, te comparto parte de una gran serie de códigos para colores que podrás ver en la siguiente página web https://htmlcolorcodes.com/es/:

HTML10.jpg

Haremos un ejemplo para cambiar el fondo de la página al color azul. Cópialo en el block de notas y guárdalo como ejemplo2.html):

 

<HTML>

<HEAD>

    <TITLE>MI PÁGINA EN COLORES</TITLE>

</HEAD>

<BODY BGCOLOR=”#70DB93”>

     <FONT SIZE=10 COLOR=#FFFFFF> Texto de COLOR blanco

       y TAMAÑO de la fuente de 10

    <H1> Bienvenido a mi página Web, recuerda que este

       es un encabezado </H1>

     <P> Aquí va el resto de la página </P></FONT>

</BODY>

</HTML>

 

El resultado será algo más o menos así:

HTML14.jpg

Puedes hacer cambios en colores y tamaños de la letra.

 

Imágenes

 

Las imágenes son un elemento esencial para diseñar páginas atractivas. No obstante, un excesivo número de imágenes en una página pueden hacer ralentizar el proceso de visualización (las imágenes son las partes de las páginas que más espacio ocupan, por lo que su transferencia requiere más tiempo que la del texto). Es importante lograr balance entre una página atractiva (lo que lleva incluir gráficos), y una página que pueda cargarse en un tiempo razonable.

 

Principales formatos gráficos en Internet. 

 

Existen una gran cantidad de formatos gráficos en el mundo de los equipos de cómputo, cada uno de ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en Internet, solamente debemos tener en cuenta dos formatos muy específicos: el formato GIF y el formato JPEG. Su elección no es en absoluto un capricho, además de la alta resolución que consiguen, se trata como veremos, de dos formatos que comprimen el tamaño de las imágenes, por lo que éstas pueden transmitirse más rápidamente por la red.

 

Para crear y manipular imágenes hay que utilizar un editor de imágenes, entre los más conocidos se encuentran: Paint Shop Pro, Gif Construction Set, y Graphic Workshop.

 

Inclusión de imágenes  

 

La etiqueta que se utiliza para la inclusión de imágenes en una página Web es la siguiente:

<IMG SRC=”imagen.jpg”> </IMG>  dónde imagen.jpg es un archivo de imagen

 

Tamaño de las imágenes.

Si no especificamos nada más, las imágenes aparecerán en el navegador con el tamaño que tienen originalmente.

Para modificar el tamaño de las imágenes se utilizan los siguientes modificadores en la etiqueta <IMG>:

WIDTH: especifica la anchura en pixeles de la imagen.

HEIGTH: especifica el número de pixeles que tendrá de alto la imagen.

Imágenes con texto alternativo.

 

Los visualizadores tienen la opción de no mostrar las imágenes, en un intento de acelerar el acceso a las páginas. Muchas veces, las imágenes incluidas en una página son fundamentales para comprender la información que se ofrece. Por ejemplo, una página destinada a alumnos de bachillerato de asignaturas de matemáticas puede contener imágenes de fórmulas. Para estos casos se puede añadir a la imagen un texto ALTernativo, que dé una idea del contenido de la imagen. Para añadir un texto alternativo, se utiliza la orden como se muestra a continuación:

 

<IMG SRC="nombre_imagen" ALT="Texto_alternativo">

 

Uso de imágenes como enlaces.

Para utilizar una imagen como enlace a otra parte de la página o a otra página, simplemente hay que introducirlas dentro de la etiqueta <A HREF> de la siguiente manera:

 

<A HREF=”enlace”> <IMG SRC=”imagen”> </A>

bottom of page