HTML es un formato destinado a estructurar documentos a través de su sintaxis consistente en etiquetas que contienen el contenido a desplegar. Todo documento HTML se compone de 2 secciones principales, el encabezado (<head>) y el cuerpo (<body>). El elemento raíz es Además, siempre se debe declarar la especificación de HTML a utilizar.
Para HTML 4 se debe indicar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Para HTML 5 se debe indicar:
<!DOCTYPE html>
Un documento mínimo en HTML es el siguiente
<!DOCTYPE html>
<html>
<head>
<title>Este es el título de la página.</title>
</head>
<body>
Aquí van los elementos de la página.
</body>
</html>
<head>La etiqueta del encabezado consiste en información no visible para el usuario,
pero que es importante para el correcto despliegue del contenido HTML.
Aqui se puede definir el título de la página con el tag <title> (que aparecerá en las pestañas del navegador
y cuando se guarda en los bookmarks). También en esta sección es donde se suelen importar o implementar las hojas de estilo
y el código JavaScript. Finalmente también es posible definir meta-tags, algunos son de utilidad para el navegador,
como el que define el encoding o algunos que pueden ser de utilidad para los buscadores.
<body>La etiqueta del cuerpo contiene normalmente todos los elementos visibles de la página. Aquí van elementos como los
contenedores <div>, párrafos <p>, listas <ul> <ol>, tablas <table>, imágenes <img> o links <a>, entre otros.
Todo elemento HTML puede ser identificado de manera única al utilizar el atributo id o se pueden identificar familias a través de class. Esto permite controlar mejor los elementos a los que se aplican estilos con CSS o cuando se modifica o accede a la estructura del documento HTML con JavaScript.
Ejemplo de elemento con identificador parrafo_principal y de clase parrafos_importantes:
<p class="parrafos_importantes" id="parrafo_principal">Este es un párrafo principal y
que pertenece además a la clase de párrafos importantes</p>
Las hojas de estilo o Cascading Style Sheets (CSS) permiten separar del HTML las declaraciones que manipulan el diseño de la página desplegada: imágenes, colores, transiciones, etc. De esta forma HTML sólo se preocupa de la estructura documento mientras que las hojas de estilo se preocupan de cómo se desplegará.
Es posible incrustar CSS en un documento HTML o se puede incluir desde un archivo separado que los contiene. Ambas estrategias tienen pros y contras. En general es mejor mantener todas las declaraciones en un archivo con extensión .css separado.
Para incrustar declaraciones CSS en el documento HTML se agrega lo siguiente:
<style type="text/css">
a{
font-weight: bold;
color: red;
}
</style>
Para importar una hoja de estilo se debe usar:
<link rel="stylesheet" href="estilos.css" type="text/css">
Una directriz de CSS puede apuntar a una etiqueta, una clase o a un elemento en particular.
Es posible aplicar un estilo a todas las etiquetas de un tipo. Por ejemplo, para cambiar el diseño de todas las etiquetas para los enlaces, se puede utilizar:
a{
font-weight: bold;
color: red;
}
Es posible definir una familia de elementos a través del atributo class. Por ejemplo para definir una clase que modifique el estilo de ciertos párrafos utilizaremos la clase parrafo_principal:
<p class="parrafo_principal">Este es un párrafo principal</p>
Luego, en el código CSS se identifican las reglas para las clases al anteponer un punto (.) antes del nombre de la clase:
.parrafo_principal{
border: 1px black solid;
padding: 10px;
width: 70%;
}
Si se desea definir una regla para un elemento identificado por su id, se debe anteponer el símbolo #
antes del nombre del id. Por ejemplo para el elemento
<p id="parrafo_especial">Este es un párrafo especial</p>
Se define su regla como
#parrafo_especial{
border: 10px black solid;
padding: 15px;
width: 60%;
}
head, agregamos el siguiente código:
<!-- Último CSS compilado y minimizado, para el frontend-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- librería jQuery para backend-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Restricciónes del JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Ultimo JavaScript compilado para pequeñas funcionalidades del frontend -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Los formularios permiten generar un espacio donde el usuario puede ingresar información para interactuar con el servicio web que estemos implementando. HTML ofrece un conjunto de etiquetas para desplegar distintos tipos de entradas y elementos para permitir el ingreso eficiente y rápido de información. Una lista de los elementos disponibles para implementar formularios se encuentra en la W3C.
Un formulario básico se compone de la etiqueta form la cual tiene en sus atributos el tipo de método HTTP a ejecutar al enviarse (POST, GET, etc), la acción a ejecutarse (a.k.a dirección de destino de los datos) y en su cuerpo se encuentran los elementos que componen el formulario. Generalmente se recomienda tener el botón con la acción 'submit' para poder ejecutar el envío de los datos:
<form method="POST" action="procesar.php"<
<input type="text" name="campoTexto"></input>
<button type="submit">Enviar</button>
</form>