HTML
Empecemos por lo básico, el HTML se "desarrolla" en el body de la página, se puede decir que es la estructura de la página.
Seré breve, al final el Html funciona con una serie de etiquetas que combinadas con CSS darán vida a nuestra página, explicada una etiqueta "explicada" todas, os diré unos ejemplos de las más utilizada os diré para que y como se suelen usar cada una y poco más, empecemos.
Diferencias entre id="" y class=""
Empezaremos explicando la diferencia entre id="" y class=""
- id Se usa para "capturar" un contenedor para luego mediante CSS poder cambiar sus características los id son o deberían de ser únicos para cada contenedor.
- class Al igual que el id sirven para "capturar" el contenedor, pero la diferencia es que se pueden colocar en diferentes contenedores para aplicar los mismos estilos.
Párrafos <p>
La primera etiqueta, toda esta chapa que os estoy dando está contenida en etiquetas <p> </p>
Visualmente no hay diferencias entre colocar una etiqueta <p> la diferencia radica en que si la pongo puedo jugar con los estilos de los párrafos, de lo contario estamos más limitados
Esto está escrito con <p>
Y ahora jugando con los stilos
Esto está escrito con <p>
Títulos: h1 h2 h3
Las <h1></h1>, <h2></h2> y <h3></h3> se usan para hacer títulos de diferentes tamaños
<h1> Un h1 </h1>
<h2> Un h2 </h2>
<h3> Un h3 </h3>
Listados
Hay varios tipos de listados
- El típico
- Cuadrado
- Circulo vacío
- Números
- Números romanos
- Letras
Esto es muy sencillo lo único que tenemos que colocar son <ul></ul> para las "figuras" y <ol></ol>para los números luego dentro de cada uno de ellos colocaremos tantos <li> </li> como queramos.
Código:
<ul><li> Aquí escribimos lo que queramos </li>
</ul>
Si queremos que sea de un tipo o de otro tan sencillo como introducir Type="" en el li si queremos que sea solo en un único punto de la lista o de lo contrario en el ul si queremos que sean todos iguales
Código:
<ul><li type="square"> Éste es tipo cuadrado </li>
</ul>
Resultado:
- Éste es tipo cuadrado
Contenedor div
Empecemos con cosas serias, quiero pensar que no soy el único que usa la etiqueta <div> como un loco, la más usada sin ninguna duda por mí por lo menos, esta etiqueta es un contenedor donde iremos colocando las diferentes propiedades de nuestra página.
Pensemos en el div y en el resto de elementos de HTML como cajas donde metemos cosas dentro, la estructura seria algo así
Código:
<div id="unico">
<p> Esto es un div que contiene un p donde le estoy dando una serie de estilos para diferenciarlo
del resto de la página </p>
</div>
Resultado:
Uno de los resultados puedes ser todos esto recuadros que estáis viendo, estos recuadros que no deja de ser un div están dentro de otro div cada uno con sus respectivos estilos y etiquetas HTML
Teneis que tener claro que los div son egoistas les gusta coger todo el ancho de la pantalla para ellos asi que mediante CSS tendriamos que corregir eso
Colocar fotos / src
Empecemos a colocar imágenes en pantalla, para ello nada más fácil que colocar la etiqueta <img src="Aqui dentro iría el nombre del archivo" y de esta manera ponemos tener la imagen que queramos.
Una cosa que tenis que saber es que a la hora de poder incluir la foto, la tenéis que tener subido al VS (Visula Estudio), lo más fácil es tenerla en la misma carpeta en la que la que estáis usando el html si no lo hacéis así tenéis que ir colocando el nombre de la carpeta antes.
Igual os preguntareis cual es el cometido del alt que sale al lado, es que en caso de que hubiera algún tipo de problema y la foto no cargase correctamente ahí podemos poner una explicación de la foto.
Luego hay un montón de pequeños detalles que veréis que son un auténtico dolor de cabeza, el poder centrar será de lo más complicado que se os hará sobre todo al principio.
Para poder centrar una imagen de una, manera rápida la forma más sencilla ahora para empezar es meter la imagen dentro de un div y luego alinearla usando CSS.
Código:
<div class="centrarfoto"><img src="programadores.jpg" alt="" title="" >
</div>
Resultado:
Redirigir a otra página / a href
Para poder redirigir tanto a otra página como a un punto de nuestra propia página usaremos la etiqueta <a href=" aquí iría la url del lugar a donde queremos redirigir">Aquí podemos colocar un texto de donde al pinchar serán redirigidos <a>
Código:
<a href="https://www.disneyplus.com/">Serás redirigido a Mordor<a>Resultado:
Serás redirigido a MordorSi dentro del a href colocamos un target_blank podemos hacer que se abra en una pestaña nueva.
Código:
<a href="https://www.disneyplus.com/" target="_blank"> Serás redirigido a Mordor<a>Resultado:
Serás redirigido a MordorComo veis al hacer un enlace se colocan automáticamente ciertos estilos como el color azul y el subrayado por supuesto eso se puede cambar mediante CSS.
Como hacer tablas / table
Aunque puede que hoy en día este un poco obsoleto ya que igual hay etiquetas más recientes que hacen prácticamente lo mismo la etiqueta table para mi gusto es muy útil.
Puede que un principio sea un tanto complicada de entender o de usar pero en cuanto la entendáis veréis que es muy potente.
Tiene varios atributos que iremos viendo uno por uno.
Para empezar escribiremos <table> para iniciar la tabla y después colocaremos <tr> para hacer las filas, a su vez dentro de eso tr colocaremos las filas con <td>.
Como podéis comprobar, FACILISIMO, vamos a poner unos ejemplos que así lo entenderéis mucho mejor
Código:
<table><tr>
<td>Esto es un td dentro de un tr</td>
<td>Esto es un td dentro de un tr</td>
<td>Esto es un td dentro de un tr</td>
</tr>
<tr>
<td>Esto es un td dentro de otro tr</td>
<td>Esto es un td dentro de otro tr</td>
<td>Esto es un td dentro de otro tr</td>
</tr>
</table>
Resultado:
| Esto es un td dentro de un tr | Esto es un td dentro de un tr | Esto es un td dentro de un tr |
| Esto es un td dentro de otro tr | Esto es un td dentro de otro tr | Esto es un td dentro de otro tr |
Es difícil de ver ahora mismo las tablas, ya que falta los estilos de css para poder apreciar, que sea una tabla
| Esto es un td dentro de un tr | Esto es un td dentro de un tr | Esto es un td dentro de un tr |
| Esto es un td dentro de otro tr | Esto es un td dentro de otro tr | Esto es un td dentro de otro tr |
Ahora ya se empieza a ver que es una tabla, pero aun así no está del todo bien hay una pequeña separación entre las columnas, (esas separaciones ya sean en tablas o en cualquier punto del html son una p****a muchas veces el poder quitarlas) por suerte en esta ocasión solo con poner dentro de table cellspacing="0" es suficiente
Código:
<table cellspacing="0"><tr>
<td>Esto es un td dentro de un tr</td>
<td>Esto es un td dentro de un tr</td>
<td>Esto es un td dentro de un tr</td>
</tr>
<tr>
<td>Esto es un td dentro de otro tr</td>
<td>Esto es un td dentro de otro tr</td>
<td>Esto es un td dentro de otro tr</td>
</tr>
</table>
Resultado:
| Esto es un td dentro de un tr | Esto es un td dentro de un tr | Esto es un td dentro de un tr |
| Esto es un td dentro de otro tr | Esto es un td dentro de otro tr | Esto es un td dentro de otro tr |
Ahora toca el combinar las filas y columnas, pero al igual que quitar la separación es muy fácil para juntar varias celdas de una misma fila colocaremos en el td colspan=" aquí dentro las filas que queremos juntar" y para juntar columnas lo mismo, pero escribiendo rowspan=" aquí dentro las columnas que queremos juntar">.
Lo único que tenéis que tener claro que al juntar tantas filas o columnas tenéis que quitar del código las filas o columnas que sobren.
<tr>
<td colspan="2">Esto es un td dentro de un tr</td>
<td rowspan="2">Esto es un td dentro de un tr</td>
</tr>
<tr>
<td>Esto es un td dentro de otro tr</td>
<td>Esto es un td dentro de otro tr</td>
</tr>
</table>
Resultado:
| Esto es un td dentro de un tr | Esto es un td dentro de un tr | |
| Esto es un td dentro de otro tr | Esto es un td dentro de otro tr | |
Formularios / form
Una de las cosas más importantes en una página web es el poder hacer fomrularios, esto nos dará una gran libertad también a la hora de programar en JS.
Hay una muchos tipos de formularios veremos los más normales, pero realmente casi todos se usan igual o muy parecido.
Empecemos con los tipos de formularios que hay más o menos todos son iguales.
Explicare primero como seria la estructura y luego explicare los tipos de formularios que hay.
Lo ideal aunque no necesario seria escribir primero un <label> dentro del label podemos escribir cual sería el campo.
<label for=" nombre"> Aquí la descripción. </label>Esta sería la estructura en el for podemos escribir la característica de ese formulario pero debe de coincidir luego con el name del input
<input type="text" name="El mismo que el for del labernombre" id="nombre">Esa serai la estructura básica de in input recordad escribir el for del label y el name del input que sea el mismo.
Código:
<label for=" nombre"> Escriba su nombre: </label><input type="text" name="El mismo que el for del labernombre" id="nombre">
Resultado:
Ahora veamos los input más importantes
-
<input type="text" name="" id=""> Imput para recoger nombre apellido....
-
<input type="password" name="" id=""> Para recoger contraseñas, veréis que al escribir no se ve
-
<input type="date" name="" id=""> Para escoger una fecha.
-
<input type="radio" name="dolor" id=""> Este input es para poder elegir una opción entre varias, lo único que tenis que tener en cuenta es en poner en el name de todos los radios el mismo nombre.
Esta página
Java Script -
<input type="checkbox" name="eleccion" id=""> En caso de los checbox al igual que los radios hay que colocar el mismo name, la diferencia es que en este caso se pueden elegir más de uno.
CSSHTMLJS
Hay otras dos opciones importantes para los formularios, aunque no son imput, se usan muy parecido
Por un lado tenemos los select, estos se usan para abrir un panel tipo sándwich para elegir una opción. Se le pueden poden tantos option como queramos y en el value se empezaría desde el 0, pero eso ya será para una lección de JS.
<select name="consola" id="">
<option value="0">Switch
<option value="1">PS
<option value="2">Xbox
<option value="3">PC Master Race
</select>
Por otro lado tenemos los text area, estos vienen bien para que la gente pueda escribir sus opiniones o cosas por el estilo.
<textarea name="" id="textPrueba"></textarea>
Lo unció que he puesto en este text area es en CSS un resize = none para que no se pueda manipular el tamaño.
Una vez vistos las opciones más usadas, aunque no descarto añadir en algun futuro alguna más veremos cómo hacer un formulario.
Básicamente lo único que tenemos que hacer es escribir la etiqueta form y dentro de esa etiqueta escribir los campos que queramos.
Código:
<form action="">
<label for="nombre" class="pruebaLabel">Escriba su nombre:
<input type="text" name="nombre" id="">
<label for="pass" class="pruebaLabel">Escriba su contraseña:
<input type="password" name="pass" id="">
<button type="submit">Enviar
<button type="reset">Borrar
Lo único que hay nuevo aquí son los botones, uno es el de enviar el formulario (type=""submit) que lo veremos más adelante y el otro de borrar todo el formulario(type="reset")
Resultado: