Scribd
Cargar
19 vistas

ejercicio1

El documento proporciona una guía para crear una página web básica llamada index.html, utilizando elementos esenciales de HTML como <html>, <head>, <title>, y <body>. Se incluyen ejemplos de uso de títulos, párrafos, imágenes, hipervínculos, listas e índices, así como la aplicación de estilos. La estructura y el contenido están diseñados para un reportaje de periódico, fomentando la creatividad en el diseño.

Cargado por

Santos Isidro Rivera Cartagena
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 PDF, TXT o lee en línea desde Scribd
19 vistas

ejercicio1

El documento proporciona una guía para crear una página web básica llamada index.html, utilizando elementos esenciales de HTML como <html>, <head>, <title>, y <body>. Se incluyen ejemplos de uso de títulos, párrafos, imágenes, hipervínculos, listas e índices, así como la aplicación de estilos. La estructura y el contenido están diseñados para un reportaje de periódico, fomentando la creatividad en el diseño.

Cargado por

Santos Isidro Rivera Cartagena
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 PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

ELABORE UN EJEMPLO DE PAGINA WEB LLAMADO INDEX.

html que contenga todos los


elementos siguientes sea creativo, únicamente puede usar los elementos dados, más los
básicos de la estructura de la página. Será un reportaje de un periódico.

Estructura básica HTML


1. HTML

<html> está al inicio de un documento HTML e indica a los navegadores que la página
tiene código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del
lenguaje, la etiqueta de cierre </html> será el último elemento del documento.

2. Encabezado

<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal


función es contener toda la información del funcionamiento de la web. Debido a esto, es
un código encriptado que las personas que entran a la página no pueden ver.

3. Título de la página

<title> es la etiqueta que da a tu página un nombre para que los usuarios puedan
identificarla. Es el título que puedes ver en las pestañas del navegador.

4. Cuerpo

<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho
de otra forma, comprende todo el contenido visible del sitio. Aquí podrás insertar
texto, imágenes, vídeos o cualquier otra funcionalidad que quieras mostrar.

Ejemplo de las cuatro etiquetas esenciales:

<html>
<head>
<title>Mi página de ejemplo</title>
</head>
<body>
Aquí va el contenido
</body>
</html>

Si creas un documento .html con este código y lo abres en tu navegador, verás algo
como esto:
Con las cuatro etiquetas anteriores ya tienes el “esqueleto” de tu página web. La
siguiente tarea sería introducir texto (entre los tags <body> y </body>) y controlar sus
etiquetas. Veamos las más elementales.

5. Títulos y subtítulos

<h1> <h2>... <h6> son etiquetas que funcionan para agregar títulos y subtítulos en el
cuerpo del texto. Esto ayuda a jerarquizar la información. Por cierto, te recomendamos
utilizar la etiqueta H1 sólo una vez dentro del contenido para mejorar la optimización
SEO de tu página.

Ejemplo:

<h1>Esta es una etiqueta H1. Utilízala en el título.</h1>


<h2>Esta es una etiqueta H2. Utilízala en los encabezados de
secciones.</h2>
<h3>Esta es una etiqueta H3. Utilízala en sub-secciones.</h3>
<h4>Esta es una etiqueta H4. No se usan muy a menudo.</h4>
<h5>Esta es una etiqueta H5.</h5>
<h6>Esta es una etiqueta H6.</h6>

Resultado:

6. Párrafos

Las etiquetas <p> y <br> te ayudarán a organizar el texto en párrafos y saltos de línea.

Ejemplo:

<p>Tu primer párrafo.</p>


<p>Tu segundo párrafo.</p>
<p>Un enunciado.<br>
Un segundo enunciado (pegado al primero).</p>

Resultado:
7. Imágenes

<img> con esta etiqueta podrás agregar imágenes al cuerpo de texto de tu página.
Combinarlo con el atributo src te permitirá especificar la ubicación en la que se
encuentra la imagen, y el atributo alt te ayudará a darle un título a esa imagen para que
lo lean buscadores como Google.

La estructura de los atributos es la siguiente: primero viene la palabra o


abreviatura que lo define (en este caso src es abreviatura de “source” o fuente), luego
el signo igual (=) y al último el modificador del atributo entre comillas dobles ("_") o
simples ('_').

Ejemplo:

<img src="https://images.unsplash.com/photo-1535378917042-
10a22c95931a">

Resultado:

8. Hipervínculos

La etiqueta <a> te permite insertar un hipervínculo a la página. Por ejemplo, el link a


tus redes sociales, hacia otro sitio web con el que desees conectar tu página u otro
contenido dentro de tu propia web.

Ejemplo:

<a href="https://es.godaddy.com/blog">Visita el blog de GoDaddy</a>


Resultado:

Visita el blog de GoDaddy

Como te habrás dado cuenta, el atributo que se utilizó aquí fue href.

9. Listas e índices

<ol> sirve para agregar listas numeradas y <ul> para agregar bullets, los cuales
mejoran la legibilidad de tus textos.

Ejemplo:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>

Resultado:

10. Estilo

Aunque usualmente se ubica dentro de la etiqueta <head>, con el


atributo <style> puedes definir el estilo de tu contenido en términos de:

• Color
• Tamaño de fuente
• Tipografía, etc.

Ejemplo:

<p style="color:red; font-size:100px">Hola Mundo</p>

Resultado:

También podría gustarte