HTML y CSS Básicos

... cómo entenderle a la web...

El participante al finalizar la sesión identificará, manipulará y tendrá consciencia de los componentes principales de los lenguajes HTML y CSS.

Elementos Estructurales

Tags

<html></html>
<html atributo='valor'></html>
<div id='valor-unico' class='estilo1 estilo2'></div>
<div id='valor-unico' class='estilo1 estilo2' />
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Selectores y propiedades

<p>Anita lava la tina</p>

p {
    font-size: 16px;
    color: black;
    font-weight: bold;
    font-style: italics;
}
<section>
    <p>Anita lava la tina</p>
</section>

section p {
    font-size: 16px;
    color: black;
    font-weight: bold;
    font-style: italics;
}
<section>
    <p class='main'>Anita lava la tina</p>
</section>

p.main {
    font-size: 16px;
    color: black;
    font-weight: bold;
    font-style: italics;
}
<section id="quote">
    <p class='main'>Anita <span>lava</span> la tina</p>
</section>

#quote {
    border-size: 1px;
    border-style: solid;
    border-color: black;
}

p.main {
    font-size: 16px;
    color: black;
    font-weight: bold;
    font-style: italics;
}

p.main span{
    color: red;
}

Tags y Propiedades

Herramientas

Ejemplo Práctico

Debate

Conclusiones

HTML y CSS Básicos

By Daniel Alejandro Gaytán Valencia