Exemplo 1 - Aninhamento de tags HTML

Exemplo 1 - Aninhamento de tags HTML

Pensando na Web

<!doctype html>
<html lang="pt-br">
 <head>
 <meta charset="utf-8">
 <title>Pensando na Web</title>
 </head>
 <body>
 |
 </body>
</html>
@@@
# 1 
type: Esta é a estrutura básica de um documento HTML!
wait: 1000
select: 7:8
wait: 1000

# 2
type: Agora vou explicar sobre o aninhamento de tags, vamos lá?
wait: 1000
select: 7:8
wait: 1000

# 3
type: Criaremos uma lista não-ordenada...
wait: 1000
select: 7:8
wait: 1000

# 4
type: <ul>
wait: 1000
tooltip: {text: "Criamos a tag ul para a lista não-ordenada...", wait: 2000}
run: {command: "newlineAndIndent", times: 1}

# 5
type: <li>
wait: 1000
tooltip: {text: "Agora criamos a tag li para o item da lista...", wait: 2000}
run: {command: "newlineAndIndent", times: 1}

# 6
type: São Paulo
wait: 1000
tooltip: {text: "E agora, qual tag deveremos fechar primeiro?", wait: 3000}
tooltip: {text: "A tag ul ou a tag li?", wait: 2500}
tooltip: {text: "Devemos fechar as tags mais internas primeiro, lembra?", wait: 3000}
tooltip: {text: "Fecharemos a tag li então...", wait: 3000}

# 7
run: {command: "newlineAndIndent", times: 1}
run: {command: "indentLess", times: 1}
type: </li>
wait: 1000

# 8
tooltip: {text: "E agora fecharemos a tag ul...", wait: 2500}
run: {command: "newlineAndIndent", times: 1}
run: {command: "indentLess", times: 1}
type: </ul>
wait: 1000

# 9
tooltip: {text: "Fácil, não?", wait: 2000}
wait: 500
tooltip: {text: "Criarei mais um item na lista para ver como é fácil...", wait: 3000}

# 10
moveTo: 10:10
run: {command: "newlineAndIndent", times: 1}

# 11
type: <li>
run: {command: "newlineAndIndent", times: 1}
type: Rio de Janeiro
run: {command: "newlineAndIndent", times: 1}
run: {command: "indentLess", times: 1}
type: </li>

# 12
wait: 500
tooltip: {text: "Pronto! ;)", wait: 2000}
@@@