Aspectos basicos en html:
Un documento html esta compuesto por etiquetas y atributos.
Etiquetas en html:
Para abrir <hl> ..para cerrar..</hl>
Tambien hay etiquetas que no cierran como <input> todo lo que va en medio es contenido de la
pagina.
Para comenzar a crear un archivo html se comienza con las etiquetas :
<html>
<head>
</head>
<body>
</body>
</html>
En head va informacion para el navegador, la etiqueta <p> se usa para párrafos.
Etiquetas para títulos <h1>..</h1> van desde h1 hasta h6 (la mas pequeña)
// no usar la etiqueta h1 mas de 1 vez a google no le gusta.
Etiqueta para dar espacio, <br>
Etiquetas con estilos en html:
Palabra en negritas <b>…</b>
Letra corrida <i>…</i>
Subrayado <u>…</u>
Tachado <s>…</s>
Trucos para google:
Etiqueta <strong>…….</strong> (negrita)
Etiqueta <em>….</em> (hace lo mismo que la etiqueta i)
Estas etiquetas resaltan la información que hay en ellas, solo no hay que abusar de ellas.
Etiqueta <article class=””> … </article>
A google le gusta y se puede usar varias veces.
Etiqueta <hr> no tiene parte que cierra, agrega después del titulo una barra de lado a lado.
Los comentarios en html son <!-- --> todo lo que este dentro de el no se vera en la pagina.
Atributos: sirven para cambiar etiquetas, editarlas, para identificar.
<input name=”” class=”” id=”” > ( name, class e id son atributos).
Class: para identificar etiqueta cuando se trabaja con css.
Name, id: para cuando tabajemos con javascript.
Atributos para cambiar etiquetas:
Type=”” type=”text” agrega un texto dentro de la etiqueta.
Type=”password” contraseña.
Type= “email” correo.
Links:
Para gregar links se usa <a href=”se coloca el link”> se coloca el nombre u otra cosa que diga el
link</a>
Inputs:
Esta el <input type= “checbox”> agrega un botón de chequeo.
<input type=”radio” name=”genero” value=”hombre”>
<input type=”button” name=nombre del boton”>
<input type=”submit” name=”enviar”> para enviar la informacion.
Para gregar un elemento de campo de texto:
<Texarea placeholder=”escribir aquí”>
Tambien
<select>….</select>
<option value=”hombre”> hombre</option> dentro de select.
Etiqueta label:
<label for=””> </label>
En el input agrega el atributo id y el atributo y el for del input y el label tienen que tener el mismo
nombre u orden.
Formularios:
En html son importantes ya sea para dar información, registrarte o para entrar a tu sesión.
Los formularios son la parte mas compleja porque requieren usar html, css, php y mysql, javascript
es opcional.
Se comienza con la estructura básica de html, dentro de la etiqueta body agrega,
<form>….</form> es para formularios, la etiqueta form tiene atributos, <form class=”” action=””
method=””> se le puede agregar <form class=”” id=”” name=”” >
Atributos clave, hacen:
Class=”” para identificar formularios con css.
Id=”” con javascript
Name=”” con php
Action=”” se deja vacio
Method=”” para especificar la ruta donde será enviada para esta, son post y get, son mas para
php.
En medio de las etiquetas form.
Va <input type=”” name=”” value””> son cuadros de texto, se les puede agregar el atributo
placeholder=””(para dar nombres a los cuadros de texto).
Tambien <input type=”file”> (para seleccionar un archivo y agregar un archivo).
Imágenes y videos:
Para agregar una imagen se usa la eriqueta <div>……</div> después en medio se usa la etiqueta
<img src=”nombre de la carpeta/nombre de la imagen.formato” alt=””> nombre de la imagen en
la web.
Atributo
width=”para el ancho”
Height=”para el alto”
Para los videos se hace lo mismo:
Dentro de un <div>…</div> se usa la etiqueta <video>…</video> dentro de la etiquetas <video
src=http:// type=”video”> se recomienda que el video sea mp4 ya que todos los navegadores
aceptan este formato.
Para que el video se reproduzca de manera automática, dentro de la etiqueta <video poner
autoplay> <video autoplay> para que salgan los controles, agregar controls, <video autoplay
controls>.
Para agregar un video de youtube, van al video donde dice compartir, después en insertar y
aparecerá un código html (lo copian) en atom se abre otro div y se coloca el código.
Menú de navegación:
La manera más sencilla de hacerlo.
Estructura html:
<body>
<header>
<nav>
<ul>
<li><a href=”a”> </a></li>
<li><a href=”a”> </a></li>
<li><a href=”a”> </a></li>
<li><a href=”a”> </a></li>
</ul>
</nav>
</header>
</body>
Css3:
*{ margin:0;
Padding:0;
Box-sizing:border-box;
Header{
Width:75%
Margin:auto;
En responsive designe se usa porcentaje:
Ej: width:50%;
Para subdmenus:
Se usaría para los li directos de nav( .nav>li{float:left;})
Para esconder los submenús:
.nav li a: hover{background…}
.nav li ul{ display: none;
Position: adsolute;
Min-wisth:140px;
Hover>ul{ display:block;}
Ul li{ position: relative;}
Ul li ul{right:140px;
Top:0px;}
Hacer una table en html5:
Tabla simple:
Se empieza declarando la etiqueta:
<table> </table> después
<tr> </tr> indica las filas de la tabla
<td> </td> define el contenido de una celda
Se le puede agregar un borde con css.
Border: 1px solid black;
Con border-collapse:collapse;
Los bordes de la table se apegaran.
La etiqueta en html: <th> </th> sirve para dar encabezado a las filas.
Antes del encabezado de la tabla para darle un titulo se usa <caption> </caption>
Antes del encabezado.
Para determinar su posición en css: se usaría caption-side:top o bottom
Top: se situara encima de la tabla.
Bottom: se situara por debajo.
Tabla estructurada:
Se dividen en encabezado, cuerpo de tabla y pie de tabla.
Encabezado: <thead> </thead>
Cuerpo: <tbody> </tbody>
Pie: <tfoot> </tfoot>
Orden en el codigo:
1. <thead>
2. <tfoot>
3. <tbody>
Combinar:
Hay veces en que sera necesario combiner.
Se hace con un atributo a la etiqueta <td> para las columnas: las celdas se combinan
horizontalmente.
Se usa [colspan] atributo.
Combinar filas: se combinan verticalmente las filas.
Se utiliza [rowspan]
Se tiene que especificar el numero de celdas que se quiera combinar <td colspan=”z”>
Para forzar espacio en html se usa   ya que el navegador interpreta dos espacios como 1.
Unidades de medida:
Rem:
Es muy parecido a em solo que no es escalable , no depende de un elemento padre, si no del
elemento raíz del documento.
Esto significa que si el html tiene un tamaño de fuente de 16px , 1 rem seria igual a 16px, y si
queremos aplicar un tamaño basado en rem a cualquier elemento de la pagina, no importa el
tamaño de fuente asociado, será de 16px.
Son interesantes para definir mediaqueres de css.
Ej: container{
Margin:0 auto;
Width:90%;
Max-width: 75rem;}
Para convertir una medida en px a rem, hay que multiplicar el tamaño que quieres obtener por el
numero 0.0625, te dara el tamaño que quieres usar en rem, ej: de como 75 rem es igual a 1200px,
75 rem= 1200px por 0.0625.
