CursosEmpresasBlogLiveConfPrecios
Curso Básico de Programación

HTML, CSS, JavaScript de verdad

Curso Básico de Programación

Contenido del curso

Tomar examen

HTML, CSS, JavaScript de verdad

Resumen

Los archivos HTML funcionan con etiquetas, por ejemplo

Hola mamá **ya casi aprendo**

Todos los contenidos en HTML deberían estar dentro de una etiqueta, y todos los archivos HTML tienen esta estructura, cómo

<title>Título de la página</title>

Contenido de la página

La etiqueta que te permite escribir CSS dentro de HTML es <style>, se coloca dentro de head. La etiqueta para escribir JS dentro de HTML es <script>, se coloca antes de terminar el body.

Recuerda:

Los nombres de las variables tienen algunas reglas, cómo, no pueden tener espacio, debe empezar siempre con una letra, las minúsculas y las mayúsculas importan. Indentación, tienes bloques de código, estos deben ir un poco a la derecha. Los programadores pasan 80% de su tiempo leyendo código y 20% escribiendo código, por esto es importante seguir buenas prácticas. Es importante ver las extensiones de los archivos.

Ejemplo de etiquetas HTML

HTML: <!-- Asi se escriben comentarios en HTML -->
CSS: /* Asi se escriben comentarios en CSS */
JS: // Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */

<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc... -->
  <meta charset="utf-8"/>
  <!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que
  se coloca para que las tildes sean reconocidas por el navegador, pero es una
  buena practica cerrarla, otros ejemplos: <br>"pasaria a esto"<br/>, etc... -->
  <title>Mi primer archivo HTML</title>
  <!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
   ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
  <style type="text/css"> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head */
  /* type="text/css" Esto es un atributo de la etiqueta */
  body
  {
    background-color: #AAAAFF;
    /* background-color es el atributo que cambia el color de fondo de tu pagina */
    color: white;
    /* Color es el atributo que cambia el color del texto de tu pagina */
    font-family: Helvetica;
    /* font-family es el atributo que cambia la fuente de tu pagina */
  }
  strong
  {
    background-color: #FFAAAA;
    /* Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff */
  }
  </style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <!-- <strong/> sirve para poner negrita -->
  <p>Esto es un parrafo</p>
  <!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
  por etiquetas, la mas sencilla es <p/> -->
  <script type="text/javascript"> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
    var $x = 1;
    // var declara una variable, como let o const //
    var _y = 2;
    // Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como ñ o tildes) ni espacios.
    var Freddy_Vega1 = $x + _y;
    document.write("El valor de Z es " + Freddy_Vega1);
    // document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
  </script>
</body>
</html>

Aporte creado por: Josan Guerra