Resumen
Veremos un poco los distintos tags y atributos que se suelen usar en HTML, y algunas propiedades de CSS para dar algo de estilo. Lo básico para poder continuar con JavaScript.
No explicaré en detalle! Al final de la publicación dejo unos enlaces de donde pueden ver bien cada tema.
Podrás ver la lista de los 100 días en este enlace.
HTML
Si trabajamos desde Visual Studio Code (VS Code), podemos usar las abreviaturas emmet para obtener fácilmente partes de código. En todos nuestros scripts, usaremos el esqueleto base de HTML que conseguiremos con ! en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Siendo breve, explico cada tag:
-
<!DOCTYPE html>indica al navegador que estaremos utilizando HTML5. -
<html lang="en">contiene todos los elementos HTML e indica en que idioma trabajamos (en este caso, inglés). -
<head> ... </head>es una de las etiquetas más importantes, en donde pondremos las etiquetas meta, estilos y título de nuestra web. Los elementos que contenga, no necesariamente se ven en nuestra página. -
<body> ... </body>es otra etiqueta importantísima. Acá pondremos lo que queramos que se vea en nuestra página, ya sean: divs, tags semánticos, scripts, etc. -
<meta charset="UTF-8">define los caracteres usados en HTML -
<meta name="viewport" content="width=device-width, initial-scale=1.0">indica el área visible del usuario en nuestra página.
Por lo general, estaremos usando tags como div, a, p, h1 h2 ... h6 y img (entre otros) para armar nuestra web; aunque también está bueno usar los tags semánticos que fueron incluidos en HTML5. Una estructura de ejemplo de su uso sería algo así:
<!-- En HTML4 -->
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
<!-- En HTML5 -->
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Estos son todos los tags:
-
<article>para articulos -
<aside>para columnas -
<details>para abrir o cerrar una parte de algún artículo (por ejemplo), se usa con summary dentro -
<figcaption>pie de imagen -
<figure>un tag que contiene una imagen y un pie de imagen -
<footer>pie de página -
<header>cabezera -
<main>cuerpo principal de la página -
<mark>resaltar texto -
<nav>navegación de página -
<section>sección de página -
<summary>se usa como cabecera/título de details -
<time>para especificardatetimeotime
CSS
Para JS, deberíamos saber al menos algunas propiedades:
- Enlazar nuestra hoja de estilo con el HTML.
<!-- Dentro de head de HTML-->
<link rel="stylesheet" type="text/css" href="style.css" />
// En nuestro CSS, le damos propiedades a los tags
body{
margin: 0;
padding: 0;
}
- id: Esencial para identificar solo a un elemento de HTML.
<!-- En nuestro HTML -->
<section id="productos">
...
</section>
// Los id se los "invoca" con numeral
#productos{
background-color: #323232;
}
- class: Una forma de identificar varios elementos de HTML para ahorrar código en CSS.
<!-- En nuestro HTML -->
<div class="container">
...
</div>
// Las clases se los "invoca" con punto
.container{
width: 80%;
border: 1rem solid rgb(0, 255, 255);
}
- width y height: Damos el ancho y la altura de los elementos.
- color: Color a texto.
- background-color: Color al fondo del elemento HTML.
- margin: Definimos el espacio exterior que hay alrededor del elemento HTML.
- padding: Definimos el espacio interior que hay alrededor del elemento HTML.
-
font: Podemos definir
family,size,weight,styleyalign.
main{
width: 80%;
height: 70vh;
background-color: #ccc;
margin: 10px 5px;
padding: 5px 2px 10px 2px;
}
main h1{
color: #555;
font-family: sans-serif;
font-size: 10rem;
font-weight: bold;
font-style: italic;
font-align: center;
}
-
display: Comportamiento de los elementos HTML en
block,inlineoinline-block - border: Bordes para darle más facha a nuestro elemento.
-
position: Determinamos el posicionamiento del elemento en nuestra página. Por defecto, los elementos están como
static. Podemos darle el atributorelativey posicionarlo con respecto al inicial, conservando su espacio en el DOM. Usamosabsolutepara posicionar los elementos con respecto a un "padre" (que tienerelative), perdiendo su espacio en el DOM.
Y eso es un poco de muchas cosas que deberíamos saber para que podamos manipular desde JS. Cada tema es extenso y no es el objetivo de este reto abarcar todo. En otra ocación voy a hablar con mayor detalle sobre CSS.
Ejemplo de página con HTML y CSS
Acá es donde me voy a vender un poco (?): Mi portfolio actualmente (hasta la fecha de publicación de este post al menos), está hecho con solo HTML5 y CSS3. No está hecho como explico en esta publicación porque fue una de mis primera páginas sin saber a fondo todos los temas. Aún sigo aprendiendo!
Pero, si dejan de lado estos detalles, les presento mi portfolio y el código en un repositorio de GitHub.
Recursos:
Una serie de fuentes que usé para escribir este post (muy) introductorio antes de pasar a JavaScript:
Día 1/100
Top comments (0)