Scribd
Cargar
63 vistas41 páginas

2 Bitacora Digital

Este documento explica los conceptos básicos de HTML, incluyendo elementos como párrafos (<p>), encabezados (<h1>-<h6>), listas (<ul>, <ol>), imágenes (<img>), y enlaces (<a>). También describe la estructura básica de un documento HTML y cómo se pueden anidar y agregar atributos a los elementos.

Cargado por

Jesús Lucero
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
63 vistas41 páginas

2 Bitacora Digital

Este documento explica los conceptos básicos de HTML, incluyendo elementos como párrafos (<p>), encabezados (<h1>-<h6>), listas (<ul>, <ol>), imágenes (<img>), y enlaces (<a>). También describe la estructura básica de un documento HTML y cómo se pueden anidar y agregar atributos a los elementos.

Cargado por

Jesús Lucero
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/ 41

Bitácora digital

Interfaces y lenguajes de
programación para diseño
web (HTML, JS, CSS)
Es un lenguaje de marcado que
define la estructura de tu contenido.

¿Qué es
HTLM? HTML consiste en una serie de
elementos que usarás para encerrar
diferentes partes del contenido para
que se vean o comporten de una
determinada manera
<p>
Si quieres especificar que se trata de un párrafo, podrías
encerrar el texto con la etiqueta de párrafo
Ejemplo:
• La etiqueta de apertura: consiste en el nombre del elemento (en
este caso, p), encerrado por paréntesis angulares (< >) de
apertura y cierre. Establece dónde comienza o empieza a tener
efecto el elemento en este caso, dónde es el comienzo del
párrafo.

• El contenido: este es el contenido del elemento, que en este caso


es sólo texto.

• El texto blanco es el que se muestra en tu página web.


• La etiqueta de cierre: es igual que la etiqueta de apertura,
excepto que incluye una barra de cierre (/) antes del nombre de
la etiqueta. Establece dónde termina el elemento en este caso
dónde termina el párrafo.

• El elemento: la etiqueta de apertura, más la etiqueta de cierre,


más el contenido equivale al elemento.
Los atributos contienen información adicional acerca
Los elementos del elemento, la cual no quieres que aparezca en el
pueden también contenido real del elemento. Aquí class es el nombre
del atributo y editor-note el valor del atributo. En
tener atributos, este caso, el atributo class permite darle al elemento
un nombre identificativo, que se puede utilizar luego
que se ven así: para apuntarle al elemento información de estilo y
demás cosas.
Un atributo debe tener siempre:

• Un espacio entre este y el nombre del elemento (o del atributo


previo, si el elemento ya posee uno o más atributos).

• El nombre del atributo, seguido por un signo de igual (=).

• Comillas de apertura y de cierre, encerrando el valor del atributo.


Añadir elementos

Puedes también colocar elementos dentro de otros elementos esto se llama


anidamiento. Si, por ejemplo, quieres resaltar una palabra del texto (en el
ejemplo la palabra «muy»), podemos encerrarla en un elemento <strong>, que
significa que dicha palabra se debe enfatizar:
Debes asegurarte que los elementos estén correctamente anidados: en el
ejemplo de abajo, creaste la etiqueta de apertura del elemento <p> primero,
luego la del elemento <strong>, por lo tanto, debes cerrar esta etiqueta
primero, y luego la de <p>.
ELEMENTOS VACÍOS
Algunos elementos no poseen contenido, y son llamados elementos vacíos.
Toma, por ejemplo, el elemento <img> de nuestro HTML:

Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido


encerrado. Esto es porque un elemento de imagen no encierra
contenido al cual afectar. Su propósito es desplegar una imagen en la
página HTML, en el lugar en que aparece.
Estructura de un documento HTML
<!DOCTYPE html>
<!DOCTYPE html> el tipo de documento. Es un preámbulo requerido.
Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de
documento actuaban como vínculos a un conjunto de reglas que el código
HTML de la página debía seguir para ser considerado bueno.

Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le


importa, pero que debe ser incluido para que todo funcione correctamente
<html></html>
El elemento <html>. Este elemento encierra todo el contenido de la
página entera y, a veces, se le conoce como el elemento raíz (root
element).
<head></head>
El elemento <head>. Actua como un contenedor de todo aquello
que quieres incluir en la página HTML que no es contenido visible
por los visitantes de la página. Incluye cosas como palabras clave
(keywords), una descripción de la página que quieres que
aparezca en resultados de búsquedas, código CSS para dar estilo
al contenido, declaraciones del juego de caracteres, etc.
<title></title>
El elemento <title> establece el título de tu página, que es el
título que aparece en la pestaña o en la barra de título del
navegador cuando la página es cargada, y se usa para
describir la página cuando es añadida a los marcadores o
como favorita.
<body></body>

El elemento <body>. Encierra todo el contenido que


deseas mostrar a los usuarios web que visiten tu página,
ya sea texto, imágenes, videos, juegos, pistas de audio
reproducibles, y demás.
IMAGENES

Como ya se dijo antes, incrusta una imagen en la página, en la posición


en que aparece. Lo logra a través del atributo src (source), el cual

contiene el path (ruta o ubicación) de tu archivo de imagen.


ENCABEZADOS
Los elementos de encabezado permiten especificar que ciertas partes del contenido
son encabezados, o subencabezados del contenido. De la misma forma que un libro
tiene un título principal, y que a su vez puede tener títulos por cada capítulo
individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también.
HTML posee seis niveles de encabezados, <h1>–<h6>, aunque probablemente solo
llegues a usar 3-4 como mucho:
LISTAS
• Las listas desordenadas son aquellas
en las que el orden de los items no es
relevante, como en una lista de
compras. Estas son encerradas en un
elemento <ul> (unordered list).

• Las listas ordenadas son aquellas en


las que el orden sí es relevante, como
en una receta. Estas son encerradas en
un elemento <ol> (ordered list).
VÍNCULOS

Los vínculos o enlaces son muy importantes —son los que


hacen de la web, la web—. Para implementar un vínculo,
necesitas usar un vínculo simple — <a> — la a es la
abreviatura de la palabra inglesa «anchor» («ancla»).
Para convertir algún texto dentro de un párrafo en un
vínculo, sigue estos pasos:
VÍNCULOS
1.Elige algún texto. “a desarrollar”
2.Encierra el texto en un elemento <a>
3.Proporciónale al elemento <a> un atributo href, así:
4.Completa el valor de este atributo con la dirección web con la
que quieras conectar al vínculo:
Empecemos!
https://visualstudio.microsoft.com/downloads/
Buscamos template
• https://templated.co/
Elegimos template
https://templated.co/2
Crear un carpeta

• Primero creamos una


carpeta que diga
laboratorio 2

• Segundo colocamos
nuestro template
descargado.

• Tercero extraer aquí y lo


guardamos en una
carpeta, en mi caso la
carpeta se llama sil.
Abrir el
index.html
Empezamos
• Recuerda que todo el texto que este en blanco es texto editable del temple, este
texto es el que se muestra en la página.
• Colocar Ctrl+s para guardar lo
modificado
RECUERDA • Actualiza la pagina del template y ves
el cambio.
Cambio de imagen
Guardamos la imagen en nuestra carpeta
Cambiar mi fondo

También podría gustarte