HTML y CSS

Clase 2 : HTML y CSS. Teoría y ejemplos.

Etiquetas anidadas

<div> <div>
<p> <p>
Texto del párrafo Texto del párrafo
</p> </div>
</div> </p>

Correcto Incorrecto
Etiquetas mas usadas

<p> <h1><h2><h3><h4><h5><h6>

<br> <b>

<div> <input>

<span> <table><tr><td>

<a> <form>

<img> <ul><il>
Etiqueta <p> : parrafo

La etiqueta <p> define un párrafo.

Para indicarle al navegador que queremos poner ese texto en un párrafo, debemos
escribirlo entre las etiquetas <p> y su cierre </p>.
Ejemplo: <p>Un párrafo de texto</p>
Etiquetas <h1><h2><h..> : encabezados

Las etiquetas <h1> <h2> ... <h6> crean texto para encabezados. Se suelen utilizar para títulos, subtítulos,
rótulos, etc.
Etiqueta <b> : destacar texto

La etiqueta <b> se utiliza para destacar un texto corto, sin que ello signifique que es importante. Los
navegadores ponen el texto en negrita.

<p>Esto es un ejemplo de <b>texto destacado</b></p>

Esto es un ejemplo de texto descatado

Etiqueta <a>: enlace

Un enlace se escribe con la etiqueta <a> y permite ir (navegar) a un recurso. El recurso

puede ser una URL, archivo de imagen, vídeo, dirección email, etc.

<a href="https://www.generalpico.gov.ar/">Municipalidad de General Pico</a>

<a href="https://www.generalpico.gov.ar/"><img src="comunes/logo_ac1_50.gif"/></a>

Etiqueta <a>: enlace. Atributo Target

El atributo target indica dónde se abre el enlace. Puede tener los siguientes valores:

_self se abre en la misma ventana en la que se encuentra el documento que contiene el enlace.
Es el valor por defecto.

_blank se abre en una nueva ventana o pestaña.

<a href="https://www.generalpico.gov.ar/" target=”_blank”>Municipalidad de General Pico</a>
Etiqueta <ul><li>: listas

Utilizamos listas para mostrar una sucesión de elementos que guardan relación entre ellos.
La etiqueta <ul> define una lista desordenada. Entre la etiqueta de apertura y la de cierre se
incluyen los elementos de la lista con la etiqueta <li>.
<ul> <li>Bananas</li> <li>Naranjas</li> <li>Manzanas</li> </ul>
● Bananas
● Naranjas
● Manzanas
Etiqueta <img>: imagen

Con la etiqueta <img> representamos imágenes en una página web. Esta etiqueta no tiene
etiqueta de cierre, se cierra con el carácter >, aunque también se puede cerrar con />. Para
indicar el origen de la imagen se utiliza el atributo src="ruta_imagen". Por ejemplo:

<img src="graficos/prueba.jpg"/ alt=”Texto alternativo”

title=”Texto descriptivo”>
 Etiqueta <table>: tablas

Las tablas nos permiten organizar la información en filas y columnas. Cada fila se divide en celdas. La
información se introduce en las celdas.

Nombre Apellido

Marysol Gatti

Maria Perez
Etiqueta <form>: formulario

Aunque un formulario utiliza la etiqueta form como parte central, necesita de otras etiquetas
para poder funcionar, normalmente incluye las etiquetas input y label, y opcionalmente otras
más.

Un formulario es un componente de una página web que está formado por varios elementos,
como campos de texto, casillas de verificación, opciones desplegables, botones y otras
etiquetas para darle formato.

Todos los elementos del formulario están dentro de las etiquetas <form> y </form>.
Etiqueta <form>: formulario

<form action="#" method="post" >

<p>Escribe aquí tu petición <input type="text" name="mensaje"></p>

<p><input type="submit" value="Enviar"></p>

</form>
Etiqueta <form>: formulario

● El atributo action indica una URL (dirección) a la que enviar los datos del formulario. Esta URL
debe ser un elemento capaz de recibir los datos del formulario y procesarlos. Si no se especifica
el atributo action, o se escribe action="#" los datos los recibe la misma página que contiene el
formulario.
● El atributo method indica el método mediante el que se transfieren las variables del formulario.
Su valor puede ser GET o POST. El método es una característica del protocolo HTTP y afecta a
la forma de comunicación, no al contenido de los datos.
Etiqueta <input>: entrada de formulario

● La etiqueta input es la encargada de crear los campos de entrada del formulario. Aunque
la etiqueta input también se puede utilizar sin estar ligada a un formulario.

● Existen bastantes tipos de datos para el elemento input, por ejemplo, texto, casilla de
verificación, área de texto, fecha, etc., para cada uno de ellos el navegador web crea un
campo con el formato adecuado de forma automática. El atributo type define el tipo del
elemento input.
Etiqueta <input>: ejemplos
Etiqueta <input>: casilla de verificación

Define una casilla de verificación que puede tomar dos valores: marcada o desmarcada. Por esto se
utiliza para datos que pueden tomar dos valores, si/no, de acuerdo/en desacuerdo, activado/desactivado.

<input type="checkbox" value"acepta" name="condiciones" checked="checked">

Acepto condiciones</p>
Etiqueta <input>: radio

Con este tipo de entrada se define una opción a elegir. Normalmente se presentan varias opciones sobre
una cuestión para que el usuario elija sólo una de ellas.

<p>Sexo:

Hombre<input type="radio" name="sexo" value="h">

Mujer<input type="radio" name="sexo" value="m">

</p>
Etiqueta <input>: password

Sirve para introducir claves y contraseñas, la diferencia principal respecto a un campo de texto es que
cuando el usuario está escribiendo no se ven los caracteres para evitar que alguien pueda copiarlos.

<p>Contraseña: <input type="password" name="clave" ></p>

Etiqueta <input>: email

Sirve para introducir direcciones de correo electrónico. Este tipo de entrada de forma
automática realiza una validación del formato del email. Por defecto, la validación sólo
consiste en verificar que hay un carácter @ dentro de unos caracteres, es decir que el texto
"a@b" lo considera válido.

<p>email: <input type="email" name="correo" multiple ></p>

Etiqueta <input>: submit

Este tipo crea un botón con el texto del atributo value, al hacer click sobre el botón se envía el formulario.

<input type="submit" value="Enviar" />

Etiqueta <input>: date

Este tipo de input sirve para introducir fechas (año, mes y día) bien escribiéndolas en el campo o bien
mediante una pequeña ventana emergente donde se puede hacer clic en una fecha.

<input type="date" name="fecha" value="2018-08-23" />

Etiquetas <select><option>: listas desplegables

Esta etiqueta sirve para crear listas desplegables. Entre la etiqueta de apertura <select> y la de cierre
</select> podemos utilizar la etiqueta <option>, </option> para crear las opciones de la lista desplegable.
Etiqueta <label>: título

La etiqueta label permite dar un título o descripción a cada campo del formulario, además al usar esta
etiqueta hacemos que el formulario sea más fácil de usar, como veremos seguidamente.

Entre la etiqueta de inicio <label> y la de cierre </label> se escribe el título del campo y la etiqueta del
campo input.

<label>Nombre:<input type="text" name="nombre2" /></label>

Etiquetas <div> y <span>

Las etiquetas <div> y <span>, no tienen ningún tipo de significado especial, solo que la primera
se define como un elemento de bloque y por tanto el navegador mostrara un salto de línea
antes y después de la misma. Mientras que la segunda es un elemento de línea.

Cuando se utilizan actualmente en un documento web, se pueden utilizar para establecer

opciones de formato mediante hojas de estilo a bloques completos o elementos individuales
del documento.
HTML 5

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje
básico de la World Wide Web, HTML.

Establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web
modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero
tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web)
y <footer>.
CSS: Hojas de estilos en cascada

Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento HTML.

Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario
escritas en HTML.

CSS está diseñado principalmente para marcar la separación del contenido del documento y la
forma de presentación.
CSS: Como se usa

Puede existir en una hoja de estilos aparte, normalmente en la sección del head,

es decir en un archivo aparte separado del código html.

index.html (código html) y style.css (estilos css).

CSS: en línea (no recomendado)

Dentro del propio documento html, situado en cualquier lugar

Aunque es recomendable que se ubique siempre en el head.

A esto se le denomina estilos en linea (css inline).

Cabe aclarar que la mejor práctica es separado, html por un y css por otro.
CSS: Hojas de estilo en cascada

La forma de escribirse es, indicando la etiqueta, clase o nombre del componente que va recibir el formato,
y entre llaves las propiedades que queres cambiar.
CSS

Hay 3 formas básicas, de dar

estilos a un componente:
1 - por etiqueta h1
2 - por nombre o id #mititulo
3 - por clase .titulos
Propiedades básicas CSS

width: establece la anchura del elemento. Pueden ser valores absolutos o relativos al contenedor del
elemento.

height: similar a height para la altura del elemento.

margin: espacio exterior al borde del elemento que mantiene con los elementos vecinos.

padding: espacio entre el borde del elemento y su contenido.

Link para ver las propiedades y toda la información css

https://developer.mozilla.org/es/docs/Web/CSS

https://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
CSS

Algunos link de apoyo para poder entender y ver todas las propiedades css existentes:

https://developer.mozilla.org/es/docs/Web/CSS/Reference

https://www.eniun.com/resumen-tabla-propiedades-css-valores/

http://w3.unpocodetodo.info/css3/chuletacss3.php
CSS: !important

La palabra clave !important se utiliza para dar mayor prioridad a una instrucciones, de manera que las
instrucciones siguientes no puedan sobrescribirla.

Se le da prioridad frente a todas las demás especificaciones sin importar la jerarquía.