Scribd
Cargar
25 vistas

Módulo Programación Teoría

El documento explica los conceptos básicos de HTML, incluyendo su estructura, etiquetas y elementos semánticos comunes. HTML define la estructura y significado de una página web, utilizando etiquetas como <body>, <header>, <nav>, <article>, <aside>, <footer> y otras para organizar el contenido. También cubre temas como listas, enlaces, y CSS para dar estilo a las páginas web.

Cargado por

MagalíD'Allegri
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
25 vistas

Módulo Programación Teoría

El documento explica los conceptos básicos de HTML, incluyendo su estructura, etiquetas y elementos semánticos comunes. HTML define la estructura y significado de una página web, utilizando etiquetas como <body>, <header>, <nav>, <article>, <aside>, <footer> y otras para organizar el contenido. También cubre temas como listas, enlaces, y CSS para dar estilo a las páginas web.

Cargado por

MagalíD'Allegri
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Fuente: Funciones - JavaScript | MDN (mozilla.

org)
<body> de HTML representa el
contenido de un documento HTML.
Introducción al HTML
Solo puede haber un elemento
HTML significa lenguaje de marcado <body> en un documento.
de hipertexto, marcado se refiere a
que debemos utilizar determinadas
etiquetas para indicarle al navegador Etiquetas
lo que queremos mostrar e hipertexto
HTML clasifica a todos los elementos
porque esas mismas etiquetas
o etiquetas en dos grupos: inline y
contienen metadatos.
block.
De forma predeterminada, los
Es el lenguaje utilizado para definir la elementos en bloque comienzan en
estructura y semántica de una página una nueva línea ocupando el 100%
web. de ancho de su contenedor.
Estructura básica Mientras que los elementos en línea
pueden comenzar en cualquier parte
<!DOCTYPE> informa al navegador
de una línea abarcando únicamente
que versión de HTML se usó para
el ancho de su contenido.
escribir el documento.
<html> (o elemento HTML raíz)
representa la raíz de un documento ¿A qué llamamos HTML
HTML. El resto de elementos semántico?
descienden de este elemento.
Llamamos HTML semántico a un
<head> provee información general documento que usa correctamente
(metadatos) acerca del documento, las etiquetas para que la estructura
incluyendo su título y enlaces a resultante, quitando la capa de
scripts y hojas de estilos. diseño, tenga sentido por sí sola.
<meta charset="utf-8“/> indica al De este modo, logramos que tanto
navegador la codificación de motores de búsqueda como otros
caracteres de nuestro sitio. En este desarrolladores comprendan la
caso utf-8 contiene caracteres como estructura de nuestro sitio.
la ñ o las tildes de nuestro idioma.
<title> HTML define el título del
documento que se muestra en un
browser la barra de título o la pestaña
de una página. Solo contiene texto;
las etiquetas dentro del elemento se
ignoran.

Fuente: Funciones - JavaScript | MDN (mozilla.org)


<p>: representa un párrafo.
Etiquetas semánticas <!-- comentario -->: se utiliza para
añadir comentarios dentro del código
<header> encabezado de un
que el usuario no podrá ver.
documento o sección.
<a>: define un hipervínculo, con el
<nav> define un conjunto de enlaces
atributo href le indicamos el link
de navegación.
<img />: define una imagen y con el
<main> representa al contenido
atributo src le indicamos al navegador
principal dentro del body.
dónde buscarla.
<section> define secciones de un
<div>: se utiliza para dividir
documento.
estructuras de contenido en bloque.
<article> marca contenido
<span>: se utiliza para dividir
independiente ej: un mensaje en un
estructuras de contenido en línea.
foro, comentarios, etc.
<aside> se suele usar para colocar
información adicional ej: publicidad. Listas
<footer> pie de página, suele Las listas en HTML nos permiten
contener información de contacto, definir semánticamente un conjunto
mapa del sitio. de elementos que tienen mejor
sentido juntos que separados. Un
ejemplo de esto puede ser una serie
Encabezados de pasos para realizar algo o la
descripción de propiedades de un
Los encabezados HTML o “headings” objeto.
son las etiquetas que conocemos
como <h1>, <h2>, <h3>, <h4>, <h5> Actualmente existen 3 tipos de listas:
y <h6>. ordenadas, no ordenadas y
descriptivas.
Un encabezado HTML, es una
etiqueta de título que utilizamos
dentro de una página web para
Tipos de lista:
resaltar la temática y sub-temáticas
del contenido. <ol> lista ordenada.

La jerarquía con la que se usan es de Define un conjunto de elementos con


suma importancia para el jerarquía.
entendimiento de nuestra web por
<ul> lista no ordenada.
parte de los buscadores.
Define un conjunto de elementos
relacionados, pero sin jerarquía.
Etiquetas comunes
<dl> lista descriptiva.

Fuente: Funciones - JavaScript | MDN (mozilla.org)


Encierra un conjunto de términos y Tipos de relación:
descripciones.
Interna

Son enlaces a las páginas o


Etiquetas de ítem: documentos dentro de un mismo
sitio web.
<li> elemento de lista.
Externa.
Se usa en listas ordenadas y no
ordenadas para definir un elemento Son enlaces que nos redirigen a
de lista. otros sitios web.

<dt> término descriptivo. De referencia

Especifica un término en una lista Estos enlaces se usan para vincular a


descriptiva. un elemento con una sección dentro
de la misma página a través de un ID,
<dd> descripción de definición. por ejemplo, cuando queremos
Provee detalles acerca de o la scrollear el sitio hasta una parte
definición de un <dt> precedente. específica de contenido.

Enlaces
Los enlaces o hipervínculos son los Tipos de enlaces:
que permiten que la web se conozca Absolutos
como tal, ya que nos permiten
vincular distintos tipos de contenido Estos enlaces hacen referencia a un
en nuestro sitio web. Estos vínculos elemento indicando una ruta que
pueden ser internos, externos o de podrá ser accesible desde cualquier
referencia. lugar donde se la llame, es decir, una
ruta con valor absoluto.
Los enlaces se pueden relacionar a
un recurso de manera absoluta o Relativos
relativa definido por el acceso que le
Estos enlaces son relativos a la
queramos dar a ese recurso.
ubicación de ambos elementos a
Prácticamente cualquier contenido
vincular, es decir, debo tener en
puede convertirse en un enlace a un
cuenta la posición del archivo que
otro recurso o documento.
enlaza y la posición del archivo
*La etiqueta utilizada para definir un enlazado.
enlace es <a></a> que deriva de anchor
o ancla en inglés.

Fuente: Funciones - JavaScript | MDN (mozilla.org)


CSS Selectores de CSS:
CSS es utilizado para diseñar y dar Universal
estilo a las páginas web, por ejemplo,
Selecciona todos los elementos de
alterando la fuente, color, tamaño y
HTML.
espaciado del contenido, dividirlo en
múltiples columnas o agregar Etiqueta
animaciones y otras características
decorativas. Se utiliza para seleccionar una
etiqueta específica.
Hojas de Estilo en Cascada (del
inglés “Cascading Style Sheets”), es clase
decir, CSS hace referencia al Selecciona todos los elementos html
comportamiento que tiene este que contengan ese atributo class.
lenguaje cuando nuestros estilos
entran en conflicto. id

¿Cómo vincular CSS a nuestro Selecciona todos los elementos html


proyecto? que contengan ese atributo id.

Existen tres maneras de vincular: Es muy importante en CSS ya que de


esta depende la jerarquía con la que
Interno se aplicarán los estilos a nuestros
Colocamos nuestro código CSS elementos HTML, por ende, decidirá
dentro de la etiqueta <style></style> qué estilo prevalece sobre los demás
en el head de nuestro archivo HTML. cuando para un elemento apliquen 2
o más estilos.
Externo
Junto con el, también entra en juego
Usamos la etiqueta <link /> donde el el término de estilos en cascada que
attr rel indica la relación con el como vimos anteriormente, está
recurso y el attr href la ruta a nuestro presente en el nombre de CSS.
archivo css.
Además de la especificidad existe la
jerarquía por cascada que es la
responsable de decidir qué estilos
En línea
prevalecen cuando dos o más
Se coloca en el attr style del selectores de un mismo elemento
elemento/etiqueta HTML a modificar. tienen la misma especificidad.
Siempre se tomará el último valor
vigente.

Fuente: Funciones - JavaScript | MDN (mozilla.org)


Fuentes

En CSS podemos utilizar infinidad de


fuentes o familias tipográficas.
Por defecto, solo podremos acceder a
las que ofrecen los navegadores de
forma nativa, pero por fortuna
siempre podemos agregar nuevas
opciones.
Tipos de fuentes:
Serif
Poseen terminaciones con serifa o
acabado elegante.
Sans Serif
Tipografías de palo seco con
terminaciones rectas o ligeramente
redonde0

Fuente: Funciones - JavaScript | MDN (mozilla.org)

También podría gustarte