Embedded Files
En esta actividad aprenderemos a insertar hipervínculos, imágenes, y listas con viñetas como numeradas utilizando HTML.
Hipervínculos <a>
La etiqueta <a> se emplea para crear enlaces, lo que permite que un texto o una imagen sean clicables y nos conduzcan a otra página web. Por defecto, este tipo de enlace aparece en color azul y subrayado.
Estructura básica:
<a href="direción">Texto</a>
<a href="direción" style="Estilo">Texto</a>
<a href="direción" style="Estilo" [otros atributos]>Texto</a>
Ejemplos:
Imágenes <img>
La etiqueta <img> muestra imágenes en una página web. Utiliza el atributo src para la ruta de la imagen y el atributo alt para describir la imagen.
Estructura básica:
<img src="dirección de la imagen">
<img src="dirección de la imagen" width="ancho">
<img src="dirección de la imagen" height="alto">
<img src="dirección de la imagen" width="ancho" height="alto">
<img src="dirección de la imagen" alt="texto alternativo">
Viñetas <ul>
La etiqueta <ul> se utiliza para crear listas no ordenadas. Este tipo de lista muestra elementos en viñetas o puntos. Cada elemento de la lista se define mediante la etiqueta <li>. Dentro de la etiqueta <ul>, cada elemento se define con <li> y se muestra con viñetas o puntos.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Item 1
Item 2
Item 3
Listas ordenadas <ol>
La etiqueta <ol> se emplea para crear listas ordenadas en HTML. Este tipo de lista enumera los elementos en secuencia numérica o alfabética. Cada elemento de la lista se define mediante la etiqueta <li>.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Item 1
Item 2
Item 3
Para cambiar el tipo de enumeración en la etiqueta inicial <ol>, le adicionamos el atributo "type". De la siguiente manera:
<ol type="A"> Orden alfabético en mayúscula.
<ol type="a"> Orden alfabético en minúscula.
<ol type="I"> Orden en números romanos en mayúscula.
<ol type="i"> Orden en números romanos en minúscula.
Lista ordenada "Alfabeticamente"
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Lista ordenada "números romanos"
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Tablas <table>
<table border="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Estilo en línea
Estilo en línea
El estilo en línea se aplica directamente a un elemento HTML utilizando el atributo style. Este método es útil para aplicar estilos específicos a un solo elemento sin afectar a otros elementos en la página.
<etiqueta style="propiedad: valor; propiedad2: valor2; ...">Contenido</etiqueta>
Ejemplo
<p style="color: blue;background:red ;font-size: 18px;">Este texto es azul, fondo rojo y tiene un tamaño de 18 píxeles.</p>
A continuación, proporcionaré algunos pasos para crear una página web local en tu computadora, donde podrás aplicar todos los conceptos anteriores:
Paso 1: Primero, vamos a abrir la carpeta la cual lleva el nombre del estudiante. Recuerden que está ubicada en la carpeta de documentos.
Paso 2: Ahora, dentro de la carpeta que acabamos de abrir, vamos a crear un documento de texto. Haz clic derecho dentro de la carpeta, selecciona "Nuevo" y luego "Documento de texto" con nombre por "Pagina7".
Las imágenes que se visualizan en la página web deben estar ubicadas en la misma carpeta que la página.
Paso 3: Guardar la imagen, primero coloca el cursor sobre la imagen a la derecha y haz clic derecho. Luego selecciona 'Guardar imagen como'. Busca la carpeta de Documentos y ábrela, luego busca tu carpeta personal para guardarla allí. Nombra el archivo como 'galan' y presiona 'Guardar'.
Paso 4: Abre el documento "Pagina7" haciendo doble clic sobre él. Luego, copia y pega el texto de la fotocopia de la Actividad 1.6 que está ubicado a continuación.
<html>
<head>
<title>Actividad 1.6</title>
</head>
<body style="background-color:black;color: white;">
<a href="https://www.google.com">Enlace</a>
<a href="pagina1.html">Mi 1ra Página</a>
<a href="pagina2.html">Mi 2da Página</a><br>
<img src="galan.png" alt="Descripción de la img">
<ul>
<li>Elemento 1</li>
<li><b> Elemento 2</b></li>
<li><i style="color: red;">Elemento 3</i></li>
</ul>
<ol>
<li style="color: green;">Elemento 1</li>
<li style="color: gray;">Elemento 2</li>
<li style="color: yellow;">Elemento 3</li>
</ol>
<ul style="background-color:pink;color:black;">
<li>Elemento 1</li>
<li>Elemento 2
<ul>
<li>Elemento 2.1</li>
<li>Elemento 2.2</li>
<li>Elemento 2.3</li>
</ul>
</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3
<ol type="a">
<li>Subelemento A</li>
<li>Subelemento B</li>
<li>Subelemento C</li>
</ol>
</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ol>
</body>
</html>
Paso 5: Haz clic en "Archivo" en la parte superior izquierda del documento y elige "Guardar como". En la opción "Tipo", elige "Todos los archivos" y ponle como nombre "pagina7.html".
Paso 6: Para ver la página web que acabamos de crear, vuelve a la carpeta y abre el archivo "pagina7.html" para observar cómo quedó. Compara con el resultado del cuaderno.
Page updated
Report abuse