HTML_HTML5_LoBasico.html

<!-- eqitqueta h2 es un titulo -->
<h2>CatPhotoApp</h2>
<!-- Contenedores (div)(main)(header)(footer)(section)(article) -->
<main>
  <!--tambien se puede hacer las etiquetas de anclaje anidadas <a> </a> por ejemplo 
  <a href="#" (ese hashtag es un link muerto)  ><img src="www.google.com" alt="foto"</a> en este
  caso la imagen sera una opcion para saltar a un link y siempre
  tenemos que tratar de cerrar o si no se tomara como texto restante depues de la etiqueta como 
  texto del link -->
  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
  <!-- href ="footer" estamos creando un referencia interna donde al apretar jump to bottom podem
  podemos saltar a la seccion de footer de la parte de abajo como se puede ver  -->
  <!-- el <br> es un salto de linea y no tiene etiqueta de cierre -->
  <br>  
  <a href="#footer">Jump to Bottom</a>
  <!-- atributos de href = atributo contenedor del URL
  y taget = especifica donde abrir la pagina -->
  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <!-- eqiqueta p es un parrafo -->
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
  <p><a href="https://www.google.com"target="_blank">....</a>es un ejemplo de cuando no se cierran las etiquetas</p>        
  <!-- Crear listas no ordenadas -->
  <p>listas no ordenadas</p>
  <ul>
    <li>Leche</li>
    <li>agua</li>
    <li>cosas</li>
  </ul>
  <!-- Crear listas ordenadas -->
  <p>listas ordenadas</p>
  <ol>
    <li>raton</li>
    <li>otras cosas</li>
    <li>li</li>
  </ol>
  <!-- crear un campo de texto -->
  <p>campo de texto</p>
  <input type="text">
  <!-- agregar texto provisional en un campo de texto -->
  <p>campo de texto con texto provisional</p>
  <input type="text" placeholder="this is placeholder text">
  <!-- enviar datos a un servidor -->
  <!-- la etiqueta form es para hacer un formulario, debe de haber los campos de texto y 
  los botones como minimo el de envio -->
  <form action = "https://www.freecatphotoapp.com/submit-cat-photo">
    <!-- hacer requerido un campo con la palabra "required" en input text -->
    <input type="text" placeholder="texto" required>
    <!-- forma de agregar un boton de envion en un formulario -->
    <button type="submit">Submit</button>
  </form>
  <!-- Los botones de radio o botones de seleccion multiple tienen que ir en un input del 
  tipo radio y el atributo name tiene que ser del "mismo nombre" en todas los botones de radio
  para que la seleccion de una opcion desaparezca cuando haya otra opcion -->
  <p>Ejemplo 1</p>
  <label>
    <input type="radio" name="indoor-outdoor">Indoor    
  </label>
  <!-- Para una buena practia se es necesarion establecer un atributo for en el elmento label 
  con un valor que coincida con el valor del atributo id del elemento input. ejemplos: -->
  <p>Ejemplo 2</p>   
  <input id="indoor" type="radio" name="indoor-outdoor">
  <label for="indoor">Ejem3</label>
  <!-- Tambien podemos anidar el elemento input dentro de las etiquetas label -->
  <!-- Importante el id relaciona la etiqueta label con la etiqueta input y el "name" es lo que
  relaciona las etiquetas input -->
  <p>Ejemplo 3</p>
  <label for="idejem3">
    <input id="idejem3" type="radio" name="indoor-outdoor">anidado1  
  </label>
  <!-- conjunto de casillas de verificacion -->
  <br>
  <label for="ejem1"> <input id="ejem1" type="checkbox" name="casillaejem">casilla1</label>
  <label for="ejem2"> <input id="ejem2" type="checkbox" name="casillaejem">casilla2</label>
  <label for="ejem3"> <input id="ejem3" type="checkbox" name="casiilaejem">casilla3</label>
  <!-- al momento de que el usuarion llene el formulario el valor de tipo (un ejemplo)
   name="casiilla1" se pondra en "on" en los servidores entonces para que no pase eso se 
  pone el atributo value="casilla1" por ejemplo  -->
  <p>ejemplo value</p>
  <label for="outdoor">
    <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
  </label>
  <!-- Para tener un valor por defecto en el tipo radio o checkbox se debe poner la palabra checked -->
  <label for="outdoor">
    <input id="outdoor" value="outdoor" type="radio" name="ejemplo" checked >Outdoor
  </label>
  <!-- el elemento div tambien conocido como elemento de division es un contenedor de proposito 
  general para otros elementos -->
  
</main>

<footer id="footer">Copyright Cat Photo App</footer>