INFORMATICA
CPEM 7

Logo del CPEM 7 de Junín de los Andes para el curso de informática

Introducción a HTML

HTML (HyperText Markup Language) es el lenguaje estándar utilizado para crear páginas web. Se basa en una serie de etiquetas que estructuran el contenido en un documento que puede ser interpretado por los navegadores.

Estructura Básica de un Documento HTML

Para comenzar a escribir un documento HTML, necesitas establecer una estructura básica que indica al navegador cómo interpretar el contenido. Aquí tienes un ejemplo de cómo se ve esa estructura: 

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la Página</title>
</head>
<body>
<!-- Contenido va aquí -->
</body>
<footer>
<!-- Contenido va aquí -->
</footer>
</html>
<!DOCTYPE html> Esta declaración indica al navegador que se está utilizando HTML5.
<html lang="es"> La etiqueta html es el contenedor principal de todo el documento. El atributo lang indica que el contenido está en español.
<head> Esta sección incluye metadatos sobre la página, como el conjunto de caracteres y el título que aparecerá en la pestaña del navegador.
<body> Aquí es donde se coloca el contenido visible de la página.

Crear la Estructura Básica con Atajos

Para crear rápidamente la estructura básica de un documento HTML5, puedes utilizar atajos en editores de código como Visual Studio Code o Sublime Text

Escribe html:5 y presiona Tab. Esto generará automáticamente la estructura básica de un documento HTML5.
En Visual con el atajo ! para lograr el mismo resultado de manera rápida.

Comentarios en HTML

Los comentarios son útiles para dejar notas o explicaciones dentro del código. Estos comentarios no se mostrarán en el navegador y son ideales para documentar tu código. 

<!-- Este es un comentario en HTML -->
<p>Este es un párrafo.</p>
<!--
Este es un comentario
que abarca múltiples
líneas.
-->

Etiquetas Básicas de HTML

Encabezados

Las etiquetas <h1> a <h6> se utilizan para definir encabezados de diferentes niveles. <h1> es el más importante, mientras que <h6> es el menos importante. 

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>

Párrafos

La etiqueta <p> se utiliza para definir un párrafo de texto. 

<p>Este es un párrafo.</p>

Enlaces

La etiqueta <a> se usa para crear hipervínculos. El atributo href especifica la URL a la que apunta el enlace. 

<a href="https://www.ejemplo.com">Visita Ejemplo</a>

Imágenes

La etiqueta <img> se utiliza para insertar imágenes en la página. Debes incluir el atributo src para indicar la ruta de la imagen y el atributo alt para proporcionar un texto alternativo que describe la imagen. 

<img src="ruta/a/imagen.jpg" alt="Descripción de la imagen">

Listas

Puedes crear listas de dos tipos:

  • Lista no ordenada: Se utiliza la etiqueta <ul>. 
                    <ul>
                    <li>Elemento 1</li>
                    <li>Elemento 2</li>
                </ul>
  • Lista ordenada: Se utiliza la etiqueta <ol>. 
                    <ol>
                    <li>Elemento 1</li>
                    <li>Elemento 2</li>
                </ol>

Divisiones y Span

  • La etiqueta <div> se usa para definir una sección o división en un documento.
  • La etiqueta <span> se usa para definir una sección en línea, que es útil para aplicar estilos a partes específicas de un texto. 

<div>
<h2>Encabezado dentro de un div</h2>
<p>Párrafo dentro de un div</p>
</div>
<p>Texto con <span style="color:red;">span rojo</span> incluido.</p>

Formularios

Los formularios se crean con la etiqueta: <form> puede incluir diversos tipos de campos de entrada 

<form action="/enviar" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <input type="submit" value="Enviar">
</form>

Tablas

Las tablas se definen utilizando varias etiquetas:

  • <table>table: crea la tabla.
  • <tr>tr: define una fila de tabla.
  • <td>td: define una celda de tabla.
  • <th>th: define una celda de encabezado de tabla. 
        <table>
            <tr>
                <th>Encabezado 1</th>
                <th>Encabezado 2</th>
            </tr>
            <tr>
                <td>Celda 1</td>
                <td>Celda 2</td>
            </tr>
        </table>
tablas html5

Atributos

Los atributos son información adicional que puedes agregar a las etiquetas HTML para definir su comportamiento o estilo.

Atributos Globales

  • idid: define un identificador único para un elemento.
  • classclass: permite asignar una o varias clases a un elemento.
  • stylestyle: utilizado para aplicar estilos CSS en línea.
  • titletitle: proporciona información adicional (tooltip) sobre el elemento. 

        Ejemplos:
        <p id="parrafo1">Texto aquí</p>
        <p class="texto-importante">Texto aquí</p>
        <p style="color: blue;">Texto aquí</p>
        <p title="Texto adicional">Texto aquí</p>

Resumen

HTML proporciona la estructura básica para crear páginas web, utilizando etiquetas para definir elementos como encabezados, párrafos, imágenes, enlaces, listas y tablas. También puedes usar atributos para personalizar la apariencia o el comportamiento de estos elementos.