141 lines
4.9 KiB
Markdown
141 lines
4.9 KiB
Markdown
---
|
|
id: 587d78aa367417b2b2512aec
|
|
title: Define el encabezado y el cuerpo de un Documento HTML
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
|
forumTopicId: 301096
|
|
dashedName: define-the-head-and-body-of-an-html-document
|
|
---
|
|
|
|
# --description--
|
|
|
|
Puedes agregar otro nivel de organización en tu documento HTML dentro de las etiquetas `html` con los elementos `head` y `body`. Cualquier código con información sobre tu página iría dentro de la etiqueta `head`. Entonces, cualquier código con el contenido de la página (lo que se muestra para un usuario) iría dentro de la etiqueta `body`.
|
|
|
|
Elementos de metadatos, tales como `link`, `meta`, `title`, y `style`, típicamente van dentro del elemento `head`.
|
|
|
|
Aquí hay un ejemplo de la disposición de una página:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta />
|
|
</head>
|
|
<body>
|
|
<div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
# --instructions--
|
|
|
|
Edita el código para que haya un `head` y un `body`. El elemento `head` solo debe incluir `title`, y el elemento `body` solo debe incluir `h1` y `p`.
|
|
|
|
# --hints--
|
|
|
|
Solo debe haber un elemento `head` en la página.
|
|
|
|
```js
|
|
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
|
assert(headElems && headElems.length === 1);
|
|
```
|
|
|
|
Solo debe haber un elemento `body` en la página.
|
|
|
|
```js
|
|
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
|
assert(bodyElems && bodyElems.length === 1);
|
|
```
|
|
|
|
El elemento `head` debe ser hijo del elemento `html`.
|
|
|
|
```js
|
|
const htmlChildren = code
|
|
.replace(/\n/g, '')
|
|
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
|
let foundHead;
|
|
if (htmlChildren) {
|
|
const { children } = htmlChildren.groups;
|
|
|
|
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
|
}
|
|
assert(foundHead);
|
|
```
|
|
|
|
El elemento `body` debe ser hijo del elemento `html`.
|
|
|
|
```js
|
|
const htmlChildren = code
|
|
.replace(/\n/g, '')
|
|
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
|
let foundBody;
|
|
if (htmlChildren) {
|
|
const { children } = htmlChildren.groups;
|
|
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
|
}
|
|
assert(foundBody);
|
|
```
|
|
|
|
El elemento `head` debe envolver alrededor un elemento `title`.
|
|
|
|
```js
|
|
const headChildren = code
|
|
.replace(/\n/g, '')
|
|
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
|
let foundTitle;
|
|
if (headChildren) {
|
|
const { children } = headChildren.groups;
|
|
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
|
}
|
|
assert(foundTitle);
|
|
```
|
|
|
|
El elemento `body` debe envolver ambos elementos `h1` y `p`.
|
|
|
|
```js
|
|
const bodyChildren = code
|
|
.replace(/\n/g, '')
|
|
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
|
let foundElems;
|
|
if (bodyChildren) {
|
|
const { children } = bodyChildren.groups;
|
|
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
|
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
|
const numH1s = h1s ? h1s.length : 0;
|
|
const numPs = ps ? ps.length : 0;
|
|
foundElems = numH1s === 1 && numPs === 1;
|
|
}
|
|
assert(foundElems);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<title>The best page ever</title>
|
|
|
|
<h1>The best page ever</h1>
|
|
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 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>
|
|
|
|
</html>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>The best page ever</title>
|
|
</head>
|
|
<body>
|
|
<h1>The best page ever</h1>
|
|
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 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>
|
|
</body>
|
|
</html>
|
|
```
|