HTML class

Registro en la plataforma:  https://www.freecodecamp.org/   Con su cuenta de Gmail.

LENGUAJE HTML: HyperText Markup Language, (lenguaje de marcado para creación de páginas web).

ESTRUCTURA PRINCIPAL:

<html>
   <body>
      <main>
<section>
         <h1> Texto </h1>
         ...
</section>
      </main>
   </body>
</html>

NIVELES DE ETIQUETAS: (de mayor a menor importancia representada con su tamaño de texto)

H1, H2, H3, H4, H5...H6

Etiqueta <p> Párrafo</p>

Etiqueta para Comentario (texto que no se ejecuta) <!-- TEXTO -->

Etiqueta <main> </main> Es para "Searchh Engine Optimization" va despues de etiqueta BODY

          ESPACIOS (sangria/indented) son para ordenar las lineas de codigo y verificar su cierre correcto.

SELF-CLOSING TAG- <img> esta etiqueta no se cierra.

ATRIBUTOS DE ETIQUETAS Van adentro de la etiqueta, definen características de estas.

Ejemplo: <img src="source link" alt="texto alterno">

Add links: (check the blank spaces, there is only 2)

<a href=´https://site.org´> Click here </a>

Atribute TARGET is to open another Windows _blank is How this will be open

<p>See more <a href="https://site.com" target="_blank">Text1 </a> Text2.</p>

IMAGE as LINK: (leccion 15)

<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 
alt="A cute orange cat lying on its back."> </a>

SECTION

<main>... <h1>... <section>... <h2>...</h2> <a>...</a>... </section>... </h1>... </main>

*Al usar diferente Hx es como comenzar una nueva seccion.

LISTAS DESORDENADAS:

<ul>

<li>.. </li>

<li>.. </li>

 </ul>

FIGURE (es para agregar imágenes a un artículo, donde las imágenes tienen por lo general una descripción justo por debajo)

<figure>

<figcaption> Descripcion </figcaption>

</figure>

ENFATIZAR TEXTO

<em>PALABRA</em>

LISTAS ORDENADAS:

<ol>

<li>.. </li>

<li>.. </li>

 </ol>

TEXTO NEGRITA/BOLD:

<strong>PALABRA</strong>

CREAR FORMAS:

<form action="URL">

<input type="text" name="catphotourl" placeholder="ejemplo" required>

</form>

AGREGAR BOTONES:

<button>Click Here</button>
<button type="submit"> Submit</button>

RADIO BUTTONS:
<input type="radio"> Indoor

LABEL: Asocian elementos INPUT
<label><input type="radio"> cat</label>

ID atributo identifica elementos HTML unicos
<label><input type="radio" id="indoor"> Indoor</label>

NAME atributo deselecciona ambos botones, dejando solo 1
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

VALUE atributo: (value=id)
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="indoor"> Outdoor</label>

fieldset elements are block-level elements (recuadro alrededor)
<fieldset> 
  <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
  <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
     </fieldset>

The legend element acts as a caption for the content
 <legend>Is your cat an indoor or outdoor cat? </legend>

CHECKBOX:
<legend>What's your cat's personality?</legend>
            <input type="checkbox"> Loving

LABEL Atribute FOR:
<label for="css">CSS</label><br>

CHECKBOX (make the 1st Item Selected by Default)
<input type="checkbox" name="field name" value="Initial value" checked="yes">   

FOOTER section
</main> <footer>   </footer>   </body>

LINK INTO PARAGRAPH
<p>No Copyright - <a href="https://www.freeCodeCamp.org">freeCodeCamp.org</a></p>

HEAD element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
<head> </head>

TITLE- Shows this in the browser title bar

LANG- Lenguaje <html lang="en">

All pages should begin with <!DOCTYPE html>. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications.

<meta charset="UTF-8">



REFERENCIA PARA CONSULTA DE ETIQUETAS: https://www.w3schools.com/html/default.asp




Ubicación: Puerto Vallarta, Jalisco, México

Comentarios

No se permiten comentarios nuevos.

Entradas más populares de este blog

APP INVENTOR

Imagen
 https://appinventor.mit.edu/ Hacer login con su cuenta de Gmail PASOS GENERALES EN CADA PROYECTO: Ir al menu PROYECTOS - Crear un proyecto nuevo Agregar elementos del panel izquierdo Modificar el nombre de cada elemento (para relacionarlos al programarlos) Modificar las propiedades de los elementos Ir al modo BLOQUES 6. Elegir los elementos y sus bloques de codigo 7. Elegir los bloques integrados si es necesario Cuando terminen de programar, ir al menu Generar App de Android (APK)  Esperar a que termine la barra de compilacion al 100% Descargar el archivo APK ó escanear el codigo QR PROYECTOS INICIALES: ACEPTAR TERMINOS Y CONDICIONES: -Crear nuevo proyecto -Interfaz, Casilla de verificacion ”Acepto terminos y condiciones” -Interfaz, Boton “Continuar” +Deshabilitarlo en MODO Diseñador -Ir a BLOQUES -En Screen1, Clic en Casilla deV y arrastrar el Dorado “cuando CASILLA1 .Cambiado, ejecutar” -En Screen1, Clic en Boton y arrastrar el Verde fuerte “poner Continuar .Habilitado...
Leer más

LEARN BASIC CSS - Building a Cafe Menu

*  HTML define la forma y estructura de una página web, mientras que el CSS es un lenguaje que funciona a través de hojas de diseño, que decide la apariencia visual a través de estilos . VIDEO INTRODUCTORIO A CSS:  Cascading Style Sheets https://www.youtube.com/watch?v=aNEOu7de_FQ CURSO CSS:  https://www.freecodecamp.org/learn/ ETIQUETAS DEL CURSO:  LANG atribute (etiqueta para Lenguaje) < p  lang ="fr" > Ceci est un paragraphe. < /p > SIMPLE HTML DOCUMENT: (html, head, title, body) < !DOCTYPE  html > < html  lang ="en" >   < head >   < title > Title of the document < /title > < style >  h1  { color : red ; }  p  { color : blue ; }  h1  {  text-align:   center ; } < /style >    < /head >   < body >       <main>           <section>   < h1 > This is...
Leer más