Presentación
Voy a proceder no sólo a subir el ejercicio que realicé de Html hasta el momento, sino también a explicar sus diferentes partes.
Ejercicio
HTML 0
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="descripción de la página">
<meta charset"utf-8" />
<title>página con tildes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#A901DB0">
<h1> BIENVENIDOS </h1>
<h2> aquí estoy probando </h2>
<h3> distintos tipos </h3>
<h4> de titulares </h4>
<h5> aunque creo que </h5>
<h6> esto va a quedar raro </h6>
<!-- <p>Bienvenidos1</p> -->
<p> Hola amigos,ésta es mi nueva página web </p>
<p> Este párrafo irá con algo <b> en negrita </b> </p>
<p> Este tendrá una <i> cursiva</i> </p>
<p> Esta tendrá un <u> trozo subrayado </u> muy bonito </p>
<p> Y aquí viene la <b> locura </b> y es que <u> queda muy bonito </u> de repente <i> poner cursiva </i> </p>
<p><img src="C:\Users\ETC5\Desktop\melani/imagesCAYE8O22.jpg" width="284px" height="177px" alt="mariposa chica anime"></p>
<p><a href="http://www.comocreartuweb.com" target="_blank" title="Crear páginas web">Crear Paginas Web</a></p>
<p><a href="https://www.google.es/search?q=imagen+mariposa&rlz=1C1OPRB_enES591ES591&es_sm=93&source=lnms&tbm=isch&sa=X&ei=bZ6RU9bpCYLV0QW264CwBA&ved=0CAgQ_AUoAQ&biw=1600&bih=756#imgdii=_" target="_blank" title="mariposas">mariposas</a></p>
<p><a href="https://www.google.es/search?q=imagen+mariposa&rlz=1C1OPRB_enES591ES591&es_sm=93&source=lnms&tbm=isch&sa=X&ei=bZ6RU9bpCYLV0QW264CwBA&ved=0CAgQ_AUoAQ&biw=1600&bih=756#imgdii=_"><img src="C:\Users\ETC5\Desktop\melani/images.jpg" alt="mariposas"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html" target="_blank" title="html 1">html 1</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html" target="_blank" title="html 2">html 2</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html" target="_blank" title="html 3">html 3</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html"><img src="C:\Users\ETC5\Desktop\melani/images (1).jpg" alt="html 1"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html"><img src="C:\Users\ETC5\Desktop\melani/images (2).jpg" alt="html 2"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html"><img src="C:\Users\ETC5\Desktop\melani/images (3).jpg" alt="html 3"/></a></p>
</body>
</html>
HTML 1
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="descripción de la página">
<meta charset"utf-8" />
<title>página con tildes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FF99CC">
<h1> BIENVENIDOS AL HTML 1 </h1>
<p><a href="C:\Users\ETC5\Desktop\melani/new 0.html" target="_blank" title="html 0">html 0</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html" target="_blank" title="html 2">html 2</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html" target="_blank" title="html 3">html 3</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 0.html"><img src="C:\Users\ETC5\Desktop\melani/images (0).jpg" alt="html 0"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html"><img src="C:\Users\ETC5\Desktop\melani/images (2).jpg" alt="html 2"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html"><img src="C:\Users\ETC5\Desktop\melani/images (3).jpg" alt="html 3"/></a></p>
</body>
</html>
HTML 2
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="descripción de la página">
<meta charset"utf-8" />
<title>página con tildes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#99CCFF">
<h1> BIENVENIDOS AL HTML 2 </h1>
<p><a href="C:\Users\ETC5\Desktop\melani/new 0.html" target="_blank" title="html 0">html 0</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html" target="_blank" title="html 1">html 1</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html" target="_blank" title="html 3">html 3</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 0.html"><img src="C:\Users\ETC5\Desktop\melani/images (0).jpg" alt="html 0"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html"><img src="C:\Users\ETC5\Desktop\melani/images (1).jpg" alt="html 1"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html"><img src="C:\Users\ETC5\Desktop\melani/images (3).jpg" alt="html 3"/></a></p>
</body>
</html>
HTML 3
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="descripción de la página">
<meta charset"utf-8" />
<title>página con tildes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#CC6633">
<h1> BIENVENIDOS AL HTML 3</h1>
<p><a href="C:\Users\ETC5\Desktop\melani/new 0.html" target="_blank" title="html 0">html 0</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html" target="_blank" title="html 1">html 1</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html" target="_blank" title="html 2">html 2</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 0.html"><img src="C:\Users\ETC5\Desktop\melani/images (0).jpg" alt="html 0"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html"><img src="C:\Users\ETC5\Desktop\melani/images (1).jpg" alt="html 1"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html"><img src="C:\Users\ETC5\Desktop\melani/images (2).jpg" alt="html 2"/></a></p>
</body>
</html>
Explicación
Lo que acabo de subir aquí son 4 archivos diferentes de html, el principal y en el que más he trabajado ha sido el primero del cual empezaré a hablar y explicar sus diferentes partes.Tras los apuntes, voy a dar un poco por entendido algunas cosas como los tipos de títulos, si algo está en negrita o cursiva etc. La parte
<!DOCTYPE html>
<html lang="es">
como bien sabemos ya, especifica en su primera línea el tipo de documento que presentamos al navegador y, en la segunda, el idioma en el que va a estar.
<head>
<meta name= Description" content="descripción de la página">
<meta charset"utf-8" />
<title>página con tildes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
Ésta parte sería la de la cabecera, la cuál sirve para especificar más detalles que serán imprescindibles para el navegador, pero el visitante de la web no va a percibir en la mayoría de los casos, dado que la parte que realmente es visible es el body.
La primera línea sirve para introducir una descripción de la página, la segunda es una especificación del código de idioma, para que no aparezcan símbolos raros cuando escribamos tildes etc ya que este código es el necesario para el idioma castellano.
El title sí que va a ser visible en este caso, ya que será el nombre que aparezca en la ventana, o lo que es lo mismo, el nombre de la página. Yo escribí este para saber si funcionaba bien el código que acabo de explicar ahora.
<body bgcolor="#A901DB0">
<h1> BIENVENIDOS </h1>
<h2> aquí estoy probando </h2>
<h3> distintos tipos </h3>
<h4> de titulares </h4>
<h5> aunque creo que </h5>
<h6> esto va a quedar raro </h6>
<!-- <p>Bienvenidos1</p> -->
<p> Hola amigos,ésta es mi nueva página web </p>
<p> Este párrafo irá con algo <b> en negrita </b> </p>
<p> Este tendrá una <i> cursiva</i> </p>
<p> Esta tendrá un <u> trozo subrayado </u> muy bonito </p>
<p> Y aquí viene la <b> locura </b> y es que <u> queda muy bonito </u> de repente <i> poner cursiva </i> </p>
<p><img src="C:\Users\ETC5\Desktop\melani/imagesCAYE8O22.jpg" width="284px" height="177px" alt="mariposa chica anime"></p>
<p><a href="http://www.comocreartuweb.com" target="_blank" title="Crear páginas web">Crear Paginas Web</a></p>
<p><a href="https://www.google.es/search?q=imagen+mariposa&rlz=1C1OPRB_enES591ES591&es_sm=93&source=lnms&tbm=isch&sa=X&ei=bZ6RU9bpCYLV0QW264CwBA&ved=0CAgQ_AUoAQ&biw=1600&bih=756#imgdii=_" target="_blank" title="mariposas">mariposas</a></p>
<p><a href="https://www.google.es/search?q=imagen+mariposa&rlz=1C1OPRB_enES591ES591&es_sm=93&source=lnms&tbm=isch&sa=X&ei=bZ6RU9bpCYLV0QW264CwBA&ved=0CAgQ_AUoAQ&biw=1600&bih=756#imgdii=_"><img src="C:\Users\ETC5\Desktop\melani/images.jpg" alt="mariposas"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html" target="_blank" title="html 1">html 1</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html" target="_blank" title="html 2">html 2</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html" target="_blank" title="html 3">html 3</a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 1.html"><img src="C:\Users\ETC5\Desktop\melani/images (1).jpg" alt="html 1"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 2.html"><img src="C:\Users\ETC5\Desktop\melani/images (2).jpg" alt="html 2"/></a></p>
<p><a href="C:\Users\ETC5\Desktop\melani/new 3.html"><img src="C:\Users\ETC5\Desktop\melani/images (3).jpg" alt="html 3"/></a></p>
</body>
</html>
Aquí llega el meollo de la cuestión. Éste es el body, la parte visible de la página. En este caso, como puede parecer mucho, voy a dividirlo por colores para mejor visualización del contenido.
En la primera parte, en color amarillo, podemos ver una única línea, primero indicando que empieza el body y, posteriormente, explicando al navegador qué color debe colocar al fondo de la página. Si no especificamos nada aquí, quedaría blanco.
La parte azul que lo sigue, es únicamente de texto, con distintos tamaños de titular, negrita, cursiva y subrayado a modo de prueba de cada etiqueta.
La línea verde que continúa después de ésto, es lo equivalente a una imagen que se ha insertado, con sus diferentes especificaciones.
El siguiente color corresponde a un enlace o link a una página, idéntico a lo que le sigue en diferente color ahora, salvo que ahí he cambiado la palabra del vínculo en concreto.
La sección que continúa es una imagen clicable que lleva hasta el mismo enlace que el link anterior.
Ahora tomarán sentido los otros archivos html, ya que los elaboré con la intención de interconectarlos entre sí, primero solamente con vínculos y, posteriormente con imágenes (especificado en otro color) antes de cerrar el body y posteriormente html con sus etiquetas pertinentes.
Me gustaría dejar claro, además, que las líneas más largas se prolongan realmente, pero al subir el archivo al blog, no respeta esto. Algo más antes de terminar es que las imágenes y rutas que aquí aparecen sólo aparecerán desde el pc en el que estoy trabajando (si alguien intenta visualizarlo desde otro lado, no podrá) ya que el navegador está buscando (como he especificado que haga) una carpeta concreta dentro del mismo pc, al igual que las imágenes. Para que ésto fuese visible para los visitantes de la web, primero habría que subir la imagen correspondiente a un servidor de internet.
No hay comentarios:
Publicar un comentario