Scribd
Cargar
4 vistas5 páginas

Codigo HTML

El documento presenta tres ejemplos de código HTML. El primero muestra una tabla con datos personales, el segundo crea una página con anclas y enlaces, y el tercero muestra imágenes como hipervínculos. Cada sección incluye detalles sobre el formato y la funcionalidad de los elementos HTML utilizados.

Cargado por

aaac.2702
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
4 vistas5 páginas

Codigo HTML

El documento presenta tres ejemplos de código HTML. El primero muestra una tabla con datos personales, el segundo crea una página con anclas y enlaces, y el tercero muestra imágenes como hipervínculos. Cada sección incluye detalles sobre el formato y la funcionalidad de los elementos HTML utilizados.

Cargado por

aaac.2702
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/ 5

1.

Escribe un código en HTML que permita mostrar una tabla con tus datos personales: Nombre,
apellido, dirección, cedula y correo. La tabla debe presentar un formato resaltante en cuanto al
borde, fuente y títulos. El sitio debe tener título.

<!DOCTYPE html>

<html>

<head>

<title>Datos Personales</title>

<style>

table {

border-collapse: collapse;

width: 100%;

border: 2px solid black;

th, td {

border: 1px solid black;

padding: 8px;

text-align: left;

font-weight: bold;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h1>Datos Personales</h1>

<table>
<tr>

<th>Nombre</th>

<th>Apellido</th>

<th>Dirección</th>

<th>Cédula</th>

<th>Correo</th>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>123 Calle Principal</td>

<td>123456789</td>

<td>[email protected]</td>

</tr>

</table>

</body>

</html>

Este código crea una tabla con los títulos "Nombre", "Apellido", "Dirección", "Cédula" y "Correo". Los
datos personales se pueden modificar o ampliar según tus necesidades. El estilo CSS define el formato
de la tabla, incluyendo el borde, el color de fondo de los encabezados y la alineación del texto.

2. Confeccionar una página que contenga cuatro anclas, luego definir cuatro hipervínculos que se
enlacen con dichas anclas. El sitio debe tener título.

<!DOCTYPE html>

<html>

<head>

<title>Página con Anclas</title>

<style>

ul {

list-style-type: none;
}

li {

margin-bottom: 10px;

</style>

</head>

<body>

<h1>Página con Anclas</h1>

<ul>

<li><a href="#ancla1">Ancla 1</a></li>

<li><a href="#ancla2">Ancla 2</a></li>

<li><a href="#ancla3">Ancla 3</a></li>

<li><a href="#ancla4">Ancla 4</a></li>

</ul>

<h2 id="ancla1">Contenido del Ancla 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<h2 id="ancla2">Contenido del Ancla 2</h2>

<p>Nulla vel metus et risus commodo scelerisque at eu ipsum.</p>

<h2 id="ancla3">Contenido del Ancla 3</h2>

<p>Etiam a nulla vel ex placerat tincidunt vitae a massa.</p>

<h2 id="ancla4">Contenido del Ancla 4</h2>

<p>Vivamus nec mi eu est volutpat facilisis non a lorem.</p>

</body>

</html>
*A ese código le falta colocar nombre del sitio, buscalo

En este código, se crea una página con un título "Página con Anclas". Se utiliza una lista no ordenada (ul)
para mostrar los cuatro hipervínculos. Cada hipervínculo (<a>) tiene un atributo href que se enlaza con el
identificador (id) correspondiente de cada ancla.

Luego, se definen cuatro secciones (<h2>) con sus respectivos contenidos de texto (<p>). Cada sección
tiene un identificador único (id) que coincide con los enlaces de ancla.

Al hacer clic en los hipervínculos, el navegador se desplazará automáticamente hacia la sección


correspondiente del contenido de ancla.

3. Confeccionar una página que muestre dos imágenes (foto1.jpg y foto2.jpg) como hipervínculos.
Al ser presionados llamar a otra página. Las imágenes se encuentran en una carpeta llamada
imágenes que depende directamente de la raíz del sitio. Incluir las imágenes en la entrega.

<!DOCTYPE html>

<html>

<head>

<title>Página con Hipervínculos de Imágenes</title>

</head>

<body>

<h1>Página con Hipervínculos de Imágenes</h1>

<a href="otra_pagina.html"><img src="imagenes/foto1.jpg" alt="Foto 1"></a>

<a href="otra_pagina.html"><img src="imagenes/foto2.jpg" alt="Foto 2"></a>

</body>

</html>

En este ejemplo, asumimos que tienes una carpeta llamada "imagenes" directamente en la raíz del sitio
web, donde se encuentran las imágenes "foto1.jpg" y "foto2.jpg". Asegúrate de colocar las imágenes en
esa ubicación antes de usar el código.
Las etiquetas <a> se utilizan para crear los hipervínculos. El atributo href especifica la página a la que se
dirigirá el enlace cuando se hace clic en la imagen. En este caso, ambas imágenes están enlazadas a
"otra_pagina.html", pero puedes reemplazar ese valor con la página a la que deseas dirigir los enlaces.

Las etiquetas <img> se usan para mostrar las imágenes. El atributo src especifica la ruta de la imagen. En
este ejemplo, hemos utilizado la ruta relativa "imagenes/foto1.jpg" y "imagenes/foto2.jpg" para
referenciar las imágenes dentro de la carpeta "imagenes". Asegúrate de ajustar la ruta de las imágenes
según la estructura de tu sitio. El atributo alt proporciona un texto alternativo para la imagen, que se
mostrará si la imagen no se puede cargar correctamente.

Recuerda que debes tener las imágenes "foto1.jpg" y "foto2.jpg" en la carpeta "imagenes" para que se
muestren correctamente en la página.

También podría gustarte