Diseño de Portales Web y Recursos Multimedia.: octubre 2022

jueves, 27 de octubre de 2022

RA2: Desarrollar aplicaciones web.

RA2.

Desarrollar aplicaciones web y multimedia para satisfacer las necesidades del cliente, según requerimientos establecidos.

jueves, 20 de octubre de 2022

Código de mi pagina web.

Código de mi pagina web.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01>

<html>

<head>

<title>Desarrollo de Portales web </title>

</head>

<body>

<h1 align="center" >POLITECNICO CALASANZ SAN EDUARDO </h1>

<h2 align="center"> Calle guacanagarix # 18, Ensanchez Quisqueya, La Romana, Rep. Dom.</h2>

<B>PIEDAD Y LETRAS</B>

</marquee>

</font>

<p></p>

</center>

</center>

</body>

</html>

Código de pagina web del profesor.

Código de pagina web del profesor.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01>

<html>

<head>

<title>Desarrollo de Portales web </title>

</head>

<body>

<h1 align="center" >POLITECNICO CALASAN SAN EDUARDO </h1>

<h2 align="center"> Calle guacanagarix # 18, Ensanchez Quisqueya, La Romana, Rep. Dom.</h2> <h4 align="center"> Piedad y Letra </h4>

</body>

</html>

El cuerpo del documento.

El cuerpo del documento.

La otra parte es el cuerpo o <body> </body>, es el contenido de la página web. Tiene una etiqueta con cierre:

Y ahora el contenido:

<h1 align="center"> Mi primera página web</h1>

Con esto colocaremos el texto en formato <h1> (o cabecera 1) y centrado ( align="center"), o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:

<hr>

Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto explicativo en un párrafo ( <p></p>), o sea, un bloque de texto comprendido entre dos saltos de párrafo (puntos y aparte).

<p>Esto tan sencillo es una verdadera página web, aunque

le falta el contenido, pero todo llegará.</p>

Fíjate como en la página este párrafo se muestra como una sola linea, que no se rompe después de la palabra aunque. Esos saltos de linea no afectan a la página cuando la ves en el navegador.

Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

Para ponerte al día mira una página similar (primera página web) pero usando la versión actual de HTML

Si consideras que ya tienes conocimientos sobre los lenguajes de la web o quieres probar algo de más nivel, puedes seguir todo el proceso para crear una landing page sencilla que te servirá para entrar en materia de forma más amena

La explicacion.

La explicación.

Si te fijas la página vista con el explorador solo muestra parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Lo ves es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas o marcas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

Como ves una apertura (< >) y un cierre (</>). Algunas etiquetas (como <br> cambio de línea o <hr> linea horizontal) no llevan cierre.

Fijaros que lo primero que tenemos es la descripción del documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

En HTML 5 esto es mucho más simple:

<!doctype html>

La siguiente etiqueta es <html> cerrada al final del documento con </html>, eso quiere decir que estamos ante código HTML:

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <head> </head>. El contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la ventana en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

<head> <title>Mi página web</title> </head>

Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.

El codigo.

El código.

La mejor manera de aprender a hacer algo es ¡hacerlo!, por eso se dice que a programar se aprende programando. Así que vas a crear tu primera página web. Abre tu editor de texto (notepad o similar) o tu editor web o nuestro editor online , crea un archivo nuevo que puedes llamar:

mipagina.htm

y escribe el código que ves a continuación.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Mi primera página web </title> </head> <body> <h1 align="center" >Mi Primera página web </h1> <hr> <p>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</p> </body> </html>

Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí, y tranquilo que se abrirá en otra ventana.

No dejes de visitar la sección HTML 5 donde verás como la versión actual de HTML hace aún más sencillo crear tu primera página web.

Recuerda que también puedes editar tu primera pagina online, con la herramienta ediweb que tiene a tu disposición en este sitio web.

Conceptos básicos de HTML.

Conceptos básicos de HTML.

El lenguaje de marcado de hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una pagina web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos , una lista con viñetas, o imágenes y tablas de datos. Como le sugiere el titulo, este articulo te dará una comprensión básica de HTML y cual es su función.

Entonces, ¿Qué es HTML en realidad?

HTML no es un lenguaje de programación, es un lenguaje de marcado que define la estructura de tu contenido, HTML consiste en una serie de elementos que usuras para en diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre puede hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente linea de contenido:

Definición de etiquetas.

Mi gato es muy gruñón.

Si quieres especificar que se trata de un párrafo, podrías encerar el texto con la etiqueta del párrafo: (<p>)

<p> Mi gato es muy gruñón </p>

<¡DOCTYPE html/>

<html>

<meta charset= "utf-8">

</head>

<body>

<img src= "images/firefox-icon.png"> alt= "mi imagen de prueba">

</body>

</html>

Mi primera pagina web.

Mi primera pagina web.

Código HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01>
<html>
<head>
<title>Desarrollo de Portales web </title>
</head>
<body>
<img src= "file:///C:\Users\Dell\Pictures\download.png" align= "left" width= "100" height="100">
<img src= "C:\Users\Dell\Pictures\images.jpg" align= "right" width= "100" height="100">
<h1 align="center" >POLITECNICO CALASANZ SAN EDUARDO </h1>
<h2 align="center"> Calle guacanagarix # 18, Ensanchez Quisqueya, La Romana, Rep. Dom.</h2>
<hr size="8px" color="blue" />
<center><font color="black" size="10">
<p><marquee behavior="scroll" bgcolor= "yellow" direction="left"> <font size="16">
<B>PIEDAD Y LETRAS</B>
</marquee>
</font>
<p></p>
</center>
<hr size="8px" color="Red" />
<center>
<iframe src="https://www.youtube.com/embed/hrvAySo7VpQ" width= "400" height="200"></iframe>
<iframe src="https://www.youtube.com/embed/PM60XecG6zs" width="400" height="200"></iframe>
<iframe src="https://www.youtube.com/embed/oy37_ZfK1jE" width="400" height="200"></iframe>
</center>
</body>
</html>

Definición de HTML.

¿Qué es HTML?

Es un lenguaje de marcado que se utiliza para el desarrollo de paginas de internet. Se trata de la sigla que corresponde a Hypertext Markup Language, es decir, Lenguaje de marcas de hipertexto, que podría ser traducido como lenguaje de formato de documentos para hipertexto.

RA1: Seleccionar e instalar herramientas web.

RA1.

Seleccionar e instalar herramientas web para facilitar el funcionamiento de la aplicación, según requerimientos.