Fundamentos de HTML by Camila Forero

¿Qué es HTML?

camilaforero1007 — 2022-09-26 20:30:36 UTC

HTML es el lenguaje con el que se define el contenido de las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc.

¿Cómo funciona HTML?

camilaforero1007 — 2022-09-26 20:31:19 UTC

El lenguaje html opera en base a marcadores escritos (que aparecen entre comillas angulares: ), a partir de las cuales se cifra la apariencia y orden interno de una página web, así como los scripts o rutinas que operan dentro de ellas. Dicho código fuente hace de ADN de la página Web, diciéndole al navegador de dónde obtener los recursos para su representación y en qué orden, secuencia y modo establecerlos. Y siguiendo el código al pie de la letra, el navegador nos brinda la experiencia de la navegación Web.

HTML y HTML semántico

camilaforero1007 — 2022-09-26 20:31:33 UTC

El HTML semántico puede utilizarse en lugar de las etiquetas de presentación estándar y esto ayuda a mejorar la legibilidad y la usabilidad, al tiempo que reduce la necesidad de datos estructurados. Esta nueva forma de concebir la programación permite crear sitios web más accesibles y más significativos para los motores de búsqueda. El marcado semántico también es beneficioso porque permite hacer hojas de estilo CSS separadas para cada sección de su sitio web.

¿Para qué sirve la etiqueta DOCTYPE?

camilaforero1007 — 2022-09-26 20:31:45 UTC

DOCTYPE no es una etiqueta, es una instrucción para el navegador donde se declara la versión de html que se está usando.
Debemos ponerla al principio de la página, antes de cualquier etiqueta, incluso antes de la etiqueta <html> .

¿Cuál es la diferencia entre la etiqueta y ?

camilaforero1007 — 2022-09-26 21:16:23 UTC

engloba todo el documento.

<head> para información sobre el documento.
<body> para el contenido.

Etiquetas básicas para controlar el texto

camilaforero1007 — 2022-09-26 22:22:19 UTC

La mayor parte del texto estructurado está compuesto por encabezados y párrafos.
En HTML, cada párrafo tiene que estar delimitado por un elemento

Cada sección tiene que estar delimitada por un elemento de encabezado. Hay seis elementos de encabezado:

,

y

Cada elemento representa un nivel de contenido diferente en el documento;

representa el título principal,

representa el subtítulo,

representa el subtítulo del subtítulo, y así sucesivamente.

Listas en HTML

camilaforero1007 — 2022-09-26 22:34:13 UTC

Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número.
Listas ordenadas: Para representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido de un número o letra que establezca su orden.

Las listas en HTML ordenadas se representan mediante el elemento

Listas no ordenadas:Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado,etc.
Para definir una lista desordenada en HTML utilizamos el elemento

Agregar links en HTML

camilaforero1007 — 2022-09-26 22:34:54 UTC

Usamos la etiqueta para agregar links
El formato básico de un enlace en html es el siguiente:

anchor text

El atributo href señala a la url a donde lleva el enlace, y el anchor text o texto ancla es el texto dónde hay que hacer clic.
Para conseguir que un link se abra en una nueva pestaña hay que incluir el atributo: target=”_blank”

Lo idea es que en todos los enlaces especifiques donde quieres que se abra, y para ello se usa el atributo target.

Hay 5 posibles valores para target, son los siguientes:

_self: Abre en enlace en la misma pestaña. Es la opción por defecto, es decir, lo que ocurre si no usas el atributo target.
_blank: Abre el enlace en una nueva pestaña o ventana.
_parent: Abre el enlace en el marco padre
_top: Abre el enlace ocupando toda la pantalla
Framename: Abre el enlace en un frame determinado.

Etiquetas semanticas:

camilaforero1007 — 2022-09-26 22:37:24 UTC

Header
Nav
Article
Aside
Section
Footer

Tablas en HTML

camilaforero1007 — 2022-09-26 22:46:01 UTC

las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos.

table: El contenedor principal.
tr: Representando a las filas contenedoras de las celdas.
td: Representando a las celdas.

Formularios en HTML

camilaforero1007 — 2022-09-26 22:52:13 UTC

Para crear un formulario en HTML se utiliza la etiqueta

El atributo action define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
El atributo method define con qué método HTTP se envían los datos (generalmente get o post).

dentro se utilizaran diferentes etiquetas como:
representa una etiqueta que puede ser asociada a un control de formulario, y que se supone provee una descripción corta para éste. Los navegadores pueden enlazar ambos elementos permitiendo que los usuarios establezcan el enfoque sobre el control al hacer clic en su etiqueta.
representa un campo de datos tipado que normalmente se asocia con un control que permite a los usuarios editar su valor. Este elemento es capaz de proveer muchos tipos diferetes de campos, de acuerdo al valor que presente en el atributo type
 representa un control para la edición mutilínea de texto sin formato. y <button> epresenta un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar.</div> </article> <article> <h1>Input según el type</h1> camilaforero1007 — 2022-09-26 23:11:00 UTC <ul><li>input type=hidden representa cualquier cadena de texto arbitraria que no está pensada para ser vista o editada por el usuario.</li><li>input type=text representa a un campo de entrada de texto.</li><li>input type=search representa un campo de texto de una sola línea para propósitos de búsqueda.</li><li>input type=tel representa un campo para un número telefónico. </li><li>input type=url representa un campo para un solo URL absoluto.</li><li>input type=email representa un campo para un correo electronico.</li><li>input type=password Los campos de contraseñas son muy similares a los campos de texto, con la diferencia de que su valor es ocultado (generalmente, reemplazando sus caracteres con un símbolo carente de significado) y no se les permite a los usuarios copiarlo al portapapeles.</li><li>input type=date representa un campo para la entrada de una fecha. </li><li>input type=month representa un campo para la entrada de un mes.</li><li>input type=week representa un campo para la entrada de una semana.</li><li>input type=time epresenta un campo para la entrada de una hora.</li><li>input type=datetime-local representa un campo para una fecha y hora local sin información de zona horaria.</li><li>input type=number representa un campo para la entrada de un número.</li><li>input type=range representa una campo para la entrada de un número dentro de un rango, con la salvedad de que la elección de un valor exacto no es importante. </li><li>input type=color representa un campo para la entrada de un color. </li><li>input type=checkbox representa un control de dos estados que permite a los usuarios marcarlo como seleccionado o deseleccionado.</li><li>input type=radio epresenta una opción que pertenece a un grupo en el que no más de una opción puede ser seleccionada al mismo tiempo.</li><li>input type=file representa un control para seleccionar una lista de uno o más archivos para ser subidos al servidor. Cuando el formulario es enviado, los archivos seleccionados son subidos al servidor, junto con su nombre y tipo.</li><li>input type=submit representa un botón que, cuando es presionado, envía el formulario (form) al que pertenece.</li><li>input type=image representa un botón de envío gráfico, que es una imagen normal que al ser presionada, envía el formulario (form) al cual pertenece.</li><li>input type=reset representa un botón que, cuando es presionado, restaura todos los campos del formulario (form) al cual pertenece, a sus valores iniciales.</li><li>input type=button representa un botón sin una acción predefinida asociada, lo que significa que por defecto, el botón no producirá ningún efecto cuando sea presionado.</li></ul><div> </div> </article> </main></body></html>