Aprende lo que necesitas para empezar con HTML directamente al grano sin irse por las ramas y te ahorras +500 hojas de lectura si quieres avanzar rápido...
Luego si quieres profundizar mas dependerá de ti.
Estos son mis apuntes personales lo explico como lo entendí no lo copie y pegue de otro lugar y agradecería si añadieran algo que consideran que me falto en los comentarios.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nombre de la pagina</title>
</head>
<body>
<!-- ############# APRENDE LAS ETIQUETAS ############# -->
<div>
<center>cuando algo no lo puedes centrar, con estas etiquetas obligas a
cualquier contenido dentro de ellas a ser centrado en la pagina.</center>
<iframe>Especifica un marco en línea. Un marco en línea se utiliza
para incrustar otro documento dentro del documento HTML actual.
<iframe src="#" width="" height="" title="description"></iframe>
<br><br>
<header>la etiqueta header es una caja que nos permite poner encabezados de
texto, imagen, video, o gif entre otros...
<br><br>
1 NO SE PERMITE PONER UNA ETIQUETA HEADER ADENTRO
DE OTRA ETIQUETA HEADER
<br>
2 NO SE PUEDE PONER UNA ETIQUETA HEADER
ADENTRO DE UNA ETIQUETA FOOTER
<br>
</header>
<br><br>
<section>con section podemos añadir cuantos bloques de contenidos queramos
para nuestra pagina
<article>
<h2>TITULO</h2>
<p>article nos sirve para manejar cajas independientes como un post,
para un blog, o como los elementos de twiter</p>
</article>
</section>
<br><br>
<div>
<p>el div señala una caja donde puedes integrar contenido multiple</p>
<div>
<p>la etiqueta div y la etiqueta section cumplen la misma funcion</p>
</div>
</div>
<br><br>
<footer>aqui añadimos un pie de pagina</footer>
<br><br>
<h1>LAS ETIQUETAS</h1>
<h1 id="redirigir">TITULO 1</h1>
<h2>TITULO 2</h2>
<h3>TITULO 3</h3>
<h4>TITULO 4</h4>
<h5>TITULO 5</h5>
<h6>TITULO 6</h6>
<p>ESTO ES UN PARRAFO EN MAYUSCULAS</p>
<p>esto es un parrafo en minusculas</p>
<br>
<p>la etiqueta br nos indica un salto de linea 2 br, 2 saltos de linea</p>
<br>
<nav>el nav es una caja para crear menu</nav>
<footer>el footer se utiliza para añadir contenido al pie de pagina</footer>
<hr>
Esta etiqueta HR nos sirve para trasar una linea para dividir alguna seccion
<!-- DE ESTA FORMA SE ESCRIBE UN COMENTARIO QUE NO APARECERA EN LA PAGINA
SOLO EN EL CODIGO PARA ALGUN COMENTARIO O APUNTE QUE QUIERAS DEJAR -->
<p>eto es un texto de parrafo <span style="color:blueviolet;">y con las
etiquetas de span añadiendo algo de css podemos referenciar
un texto</span> de esta manera que se vea el texto de otro color
resaltandolo asi...</p>
<a href="#">con esta etiqueta podemos añadir enlaces a donde quieres
llevar al lector o usuario en href="#" se añade el enlase a donde quieres
redirigir se cambia el # por el enlace</a>
<a target="_blank" href=""> si se añade target="_blank" a la etiqueta a
la pagina a donde se redirige se abrira aparte la pagina de la actual</a>
<br><br><br><br><br><br><br><br>
<a href="#redirigir">de esta forma puedes redirigir a una parte especifica
dentro de la pagina sin tener que abrir otra pagina añadiendo el nombre
del ide de la etiqueta a donde te quieres mover se pono #redirigir de
esta manera y subitemos a donde esta el h1</a>
<br><br><br><br>
<p>con la etiqueta img podemos añadir una imagen un enlase de donde esta
ubicada o uno de la web, y su tamaño se puede medir con ancho que seria
width="200" y un alto que seria height="200"</p>
<br>
<img src="https://i.ytimg.com/vi/nEogWG-qVc4/maxresdefault.jpg" width="200"
height="200">
<form action="" method="">la estiqueta form nos sirve para la creacion de
formularios para realizarfunciones del tipo GET que nos permite pasar
los valores ingresados de una pagina a otra o dentro de la misma que
es de forma publica o POST es para mandar los datos a una pagina
diferente, dentro de la misma o para base de datos de forma privada y
en action integramos la direccion a donde se realizara la validacion
de dicha funcion.
</form>
</div>
<!-- ######## APRENDE DE LOS FORMULARIOS ######## -->
<div>
<h1>CONTENIDO PARA FORMULARIOS <br> PARA REALIZAR PROSESOS</h1>
<label for="identificador">se suele usar asi para añadir nombre a la
seccion y con for="identificador" identificamos el ide del campo</label>
<input type="text" id="identificador">
<br><br><br>
<label for="x">es importane saber que el atributo name en las etiquetas es
muy importante para cuando se requiere llamar desde otro archivo para
realizar la funcion el llamado de datos</label>
<input type="text" id="x" name="nombre">
<br><br><br>
<label for="a">placeholder="" es otra opcion para ingresar el nombre de
la etiqueta menos codigo y mas rapides</label>
<input type="text" id="a" name="" placeholder="">
<br><br><br>
<label for="">required="" nos sirve para obligar al usuario a que llene
est campo y se mostrara un mensaje de que el campo exige ser llenado
o no se enviara ningun dato asta que este este lleno</label>
<input type="text" id="identificador" name="nombre" placeholder="ingrese
su nombre aqui" required="">
<br><br><br>
<p>en el atributo tipe nos sirve para hacer que nuestros input se conporten
de manera diferente una de otra por ejemplo:</p>
<br><br>
<input type="text" placeholder="tipo texto">
<br><br>
<input type="password" placeholder="tipo contraseña">
<br><br>
<input type="email" placeholder="tipo correo">
<br><br>
<p>tipo seleccionar una opcion</p>
<input type="radio">
<br><br>
<p>para seleccionar una opcionmultiple</p>
<input type="checkbox">
<br><br>
<p>tipo de seleccion de arcivos unitario solo un archivo</p>
<input type="file">
<br><br>
<p>tipo se seleccion de arcivos unitario solo un archivo</p>
<input type="file" multiple="">
<br><br>
<p>tipo calendario</p>
<input type="date">
<br><br>
<p>tipo hora</p>
<input type="time">
<br><br>
<p>lo que se ingrese en value sesera el valor seleccionado ingresado por
lo que debe ser lo mismo que el usuario vea como se muestra en el
ejemplo, sirve para seleccionar una opcion</p>
<select name="opcion" id="">
<option value="Opsion 1">Opsion 1</option>
<option value="Opsion 2">Opsion 2</option>
<option value="Opsion 3">Opsion 3</option>
<option value="Opsion 4">Opsion 4</option>
</select><br><br>
<textarea name="" id="" cols="70" rows="15"
placeholder="de esta manera se puede ingresar texto multilinea a
diferencia de los input que solo es texto con rextriccion de datos
o caracteres en pocas palabras esto se usa para ingrsar contenido
de texto mas grandes que el tipo text que es solo una cadena de texto
permitida y con cols='70' rows='15' podemos indicar en que tamaño
tendra cols es columnas y rows son filas pero su tamaño es
estatico "></textarea>
<br><br>
<p>1 TIPO DE BOTON</p>
<input type="submit">
<br><br>
<p>2 TIPO DE BOTON 'siempre usar este para enviar datos'</p>
<button type="submit">envia los datos</button>
<br><br>
<p>3 TIPO DE BOTON</p>
<button type="button">no hace nada</button>
<br><br>
<p>4 TIPO DE BOTON</p>
<button type="reset">refresca el formulario por defecto</button>
<br><br>
<p>5 TIPO DE BOTON</p>
<button onclick="btn_1">con onclik para usar JavaScript</button>
<br><br>
</div>
<!-- ############## APRENDE DE COMO CREAR UN MENU O UN LISTADO ###### -->
<div>
<h1>PARA EL MENU </h1>
<p>todo esto deberia ir adentro de la caja nav</p>
<br>
<p> ul quiere decir lista no ordenada</p>
<P>li es para indicar un item dentro de la lista y se pueden poner muchos
li adentro de ul</P>
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
<p>Para generar una lista ordenada seria asi, y se veria enumerada</p>
<ol>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ol>
<p>si añado al primer elemento un value="4" entonces comensara a clistar a
partir del numero 4 de esta manera</p>
<ol>
<li value="4">ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ol>
<p>de esta manera se le llama anidar listas una liste adentro de otra lista,
y añadiendo style="list-style-type:lower-alpha" a una de las listas
podemos cambiar por letas en orden de la a - z y si cambian el atributo
lower-alpha por lower-roman entonses tendran resultados con los numeros
romanos si asi prefieren su orden</p>
<ul>
<li>ITEM 1</li>
<ol>
<li value="4">ITEM 1</li>
<li>ITEM 2</li>
<ul>
<li style="list-style-type:lower-alpha">ITEM 1</li>
<li style="list-style-type:lower-alpha">ITEM 2</li>
<li style="list-style-type:lower-alpha">ITEM 3</li>
<li style="list-style-type:lower-alpha">ITEM 4</li>
<li style="list-style-type:lower-alpha">ITEM 5</li>
</ul>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ol>
<li>ITEM 2</li>
<ol>
<li style="list-style-type:lower-roman">ITEM 1</li>
<li style="list-style-type:lower-roman">ITEM 2</li>
<li style="list-style-type:lower-roman">ITEM 3</li>
<li style="list-style-type:lower-roman">ITEM 4</li>
<li style="list-style-type:lower-roman">ITEM 5</li>
</ol>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
<P>PARA AÑADIR AL MENU UN REDIRECCIONAMIENTO RECUERDA LA ETIQUETA
<br>
a href="#" seria asi con cada elemento listas y listas adentro de listas</P>
<ol>
<li style="list-style-type:lower-roman"><a href="#">ITEM 1</a></li>
<li style="list-style-type:lower-roman"><a href="#">ITEM 2</a></li>
<li style="list-style-type:lower-roman"><a href="#">ITEM 3</a></li>
<li style="list-style-type:lower-roman"><a href="#">ITEM 4</a></li>
<li style="list-style-type:lower-roman"><a href="#">ITEM 5</a></li>
</ol>
</div>
<!-- ####### APRENDE A CREAR TABLAS DE CONTENIDO ####### -->
<div>
<h1>PARA ORDENAR TABLAS CAJAS DE BABECERA Y CONTENIDO</h1>
<p>con table agrupamos el contenido</p>
<p>tr quiere decir una fila</p>
<p>adentro de tr ingresamos th para indicar encabezados</p>
<p>podemos añadir otro tr aparte adentro de table para indicar el contenido
correspondiente a cada encabezado con td</p>
<p>añadiendo style="border: 1px solid black;" se puede remarcar cada seccion
de la tabla, con esto indicamos que queremos una linea del ancho de un
pixel solido de color negro</p>
<p>con header y con tbodyagrupamos los contenidos por cabecera y cuerpo
esto nos ayuda a identificar el texto donde esta y añadir un escrol
en el caso de que fuese mas texto y requiera de mas espacio adentro
de la tabla</p>
<table style="border: 1px solid black;">
<header>
<tr style="border: 1px solid black;">
<th style="border: 1px solid black;"> ENCABEZADO 1 </th>
<th style="border: 1px solid black;"> ENCABEZADO 2 </th>
<th style="border: 1px solid black;"> ENCABEZADO 3 </th>
<th style="border: 1px solid black;"> ENCABEZADO 4 </th>
</tr>
</header>
<tbody>
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;"> contenido 1 </td>
<td style="border: 1px solid black;"> contenido 2 </td>
<td style="border: 1px solid black;"> contenido 3 </td>
<td style="border: 1px solid black;"> contenido 4 </td>
</tr>
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;"> contenido 1 </td>
<td style="border: 1px solid black;"> contenido 2 </td>
<td style="border: 1px solid black;"> contenido 3 </td>
<td style="border: 1px solid black;"> contenido 4 </td>
</tr>
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;"> contenido 1 </td>
<td style="border: 1px solid black;"> contenido 2 </td>
<td style="border: 1px solid black;"> contenido 3 </td>
<td style="border: 1px solid black;"> contenido 4 </td>
</tr>
<tfoot style="border: 1px solid black;">
<td>pie de la tabla</td>
</tfoot>
</tbody>
</table>
</div>
<!-- ####### COMO LLAMAR OTROS LENGUAJES A ESTA HOJA ##### -->
<div>
<style>
/*ASI INGRESAMOS CSS DIRECTO EN NUESTRA HOJA ACTUAL LO UVICAMOS ENTRE
EL HEAD Y BODY*/
</style>
<script>
/*ASI INGRESAMOS JS DIRECTO EN NUESTRA HOJA ACTUAL L LO UVICAMOS
ENTRE EL HEAD Y BODY*/
</script>
<?php
//asi ponemos php directamente claremente no se toma encuenta en este
momento por que el archivo deve estar primero en .php Y no en .html
?>
<p>de esta manera enlasamos otro archivo de lenguaje css a el archivo actual
.html y añadimos el enlace href="#" recuerda cambiar # por tu enlace,
en el head</p>
<link rel="stylesheet" href="#">
</div>
<!-- ############# identificadores ########### -->
<div>
<p>
no puedes tener repetidos el mismo
<br>
id, class, namegeneraria mas de un error.
<br>
class se utiliza para especificar una clase para un elemento HTML
id se usa para especificar una identificación única para un elemento HTML
</p>
</div>
<br><br><br><br>
</body>
</html>
Comentarios
Publicar un comentario