Anatomia de uma Tag HTML

Curso de HTML e CSS

Fundamentos de Desenvolvimento Web

Boas vindas ao curso

FrontEnd, BackEnd e Fullstack, o que são?

Ferramentas de Desenvolvimento

O que é HTML e qual sua estrutra

HTML: Anatomia de uma página Web

Index e sua estrutura básica: head

Index e sua estrutura básica: body

Anatomia de uma Tag HTML

Tags HTML de multimídia

Tag img

Tag video

Tag audio

Formulários em HTML

Tag form e Input

Mais tipos de input

Autocomplete e Required

Select

Input type submit vs. Button tag

O que é CSS e qual sua estrutura

O que é CSS?

Como utilizamos CSS? Seletores por tag, classe e ID

Pseudo classes e pseudo elementos

Anatomia de uma regra css

Modelo de caixa

Herança

!important

Conhecendo as medidas CSS

Medidas

Medidas EM/REM

Max/Min, vh e vw

Criando um Layout com CSS

Position

Display

Flexbox

Responsividade e Media Queries

Desafio de layout

Aulas complementares para ir além!

Semântica

Acessibilidade

Próximos passos como Dev Web

Você não tem acesso a esta aula

Continue aprendendo! Junte-se e comece a impulsionar sua carreira

Se você já tem uma conta,

Recursos

Contribuições 4

Perguntas 1

Ordenar por:

Quer ver mais contribuições, perguntas e respostas da comunidade?

Robson Sandro

<!DOCTYPE html>
<html lang=“pt-br”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta name=“robots” content=“Index, Follow”>
<title>Receita</title>
</head>

<body>

<header> 
    <h1>Receita macarrao para matar a fome rapido</h1>
</header>

<main>
    <article> 
        <h3>Receita para matar a fome bem rapido by:me</h3>
        <section>
            <h4>Tempo de preparo: ate ficar bom</h4>
            <p> Digitando uma gororoba em html</p>
            <p>Lembre-se, o importante eh ficar gostoso entao fique a vontade para mudar os ingredientes a sua maneira</p>

        </section>

        <section>
            <h3>ingredientes</h3>
            <ul>
              <li>500g de macarrao</li>
              <li>1 ou 2 caixa de creme de leite </li>
              <li>300g de parmesao ralado(pode ser os de saquinho) ou qualquer queijo de sua preferencia </li>
              <li>300g de presunto </li>
              <li>qualquer coisa que o seu coracao mandar</li>  
            </ul>

        </section>

        <section>
            <h3>modo de preparo</h3>
            <ol>
                <li>ferva a agua com sal</li>
                <li>fatie o presunto</li>
                <li>ponha o macarrao na agua fervendo ate ficar pronto (tempo do macarrao ditado pelo fabricante)</li>
                <li>reserve o macarrao na propria panela</li>
                <li>em outra panela esquente o creme de leite sempre misturando ele</li>
                <li>ponha o parmesao no creme de leite quente aos poucos para o molho ficar na textura que voce preferir</li>
                <li>ponha o presunto fatiado no molho e misture bem</li>
                <li>ponha o macarrao dentro do molho e misture</li>
                <li>coma</li>

            </ol>
        </section>

    </article>

</main>
<footer>
    <h5>Receita da boa</h5>
</footer>

</body>
</html>

saul enrique larez rosillo

<code>
<!DOCTYPE html>
<html lag="es">
    <head>

    </head>
    <body>
        <meta charset="UTF-8">
        <meta name="description" content="Aqui se prepara la mejor ensalada césar del mundo">
        <meta name="robots" content="index, follow">
        <title>césar.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="" href="style.css">
    </body>
    <header>
        <h1>Ensalada César, la receta auténtica de la ensalada más famosa del mundo</h1>
        <p>Muchos son los aficionados a disfrutar de esta ensalada clásica, la ensalada César, 
            pero no todos conocen la receta auténtica de esta ensalada de origen mexicano. 
            Al igual que ocurre con la auténtica salsa carbonara hecha con huevos y queso pecorino,
            que no lleva nata entre sus ingredientes<a href="#">Ver mas..</a>
        </p>

    </header>
    <main>
        <article>
            <h3>Ingredientes</h3>
            <ul>
                <li>100 g. de pechuga de pollo</li>
                <li>Picatostes de pan frito</li>
                <li>1/2 lechuga (mejor romana)</li>
                <li>50 g. de aceitunas negras</li>
                <li>1 cucharada de limón o 1 cucharada de vinagre</li>
                <li>6 anchoas</li>
                <li>1 diente de ajo</li>
                <li>125 ml. de aceite de oliva virgen extra</li>
                <li>2 yemas de huevo</li>
                <li>1/2 cucharada de mostaza</li>
                <li>50 g. de queso parmesano</li>
                <li>Sal y pimienta blanca o negra recién molida (al gusto)</li>
            </ul>

            <h3>Preparación de la salsa Cesar</h3>
            <ol>
                <li>
                    Para preparar la famosa salsa Cesar. Tenemos que introducir en un vaso de
                     batidora las anchoas, la yema del huevo, la cuchara del zumo del limón, el diente de ajo 
                    (este se puede quitar de la salsa tal como os comento más adelante), un poco de
                     pimienta blanca o negra, media cuchara de mostaza y el aceite de oliva virgen extra.
                </li>
                <li>
                    Cuando este emulsionada añadimos el queso parmesano rallado. Removemos con la cuchara hasta que quede bien
                    ligada y ya está la famosa salsa César. Dejamos la salsa en la nevera para
                    que enfríe y seguimos con la preparación de la ensalada.
                </li>
                <li>
                    Cuando este emulsionada añadimos el queso parmesano rallado. Removemos con la cuchara hasta que
                     quede bien ligada y ya está la famosa salsa César. Dejamos la salsa en la nevera para que 
                     enfríe y seguimos con la preparación de la ensalada.
                </li>
            </ol>

            <h3></h3>
        </article>
    </main>
</html>

André Misael Figueroa Acevedo

file:///C:/Users/Andr%C3%A9/Desktop/Andr%C3%A9/index1.html

Fiz meu site baseado no torneio futebol fronteira dos Super Once

Janaina Cicari

<!DOCTYPE html>

<html lang="pt-BR">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Aprender HTML e CSS não é uma receita de bolo, mas existem ingredientes fundamentais e algumas instruções de preparo que podem garantir um bom resultado."/>
        <meta name="title" content="Receita para Aprender HTML e CSS da melhor forma!"/>
        <meta name="robots" content="index, follow"/>
        <title>Receita para aprender HTML e CSS da melhor forma possível!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <header> <H1>Receita para aprender HTML e CSS da melhor forma possível!</H1></header>
        <main>
            <section>
                <article>
                    <p>Não é como se aprender tecnologia pudesse realmente ser como preparar uma receita, mas existem ingredientes fundamentais e algumas instruções de preparo que podem garantir um bom resultado! Olha só:</p>
                    <h2>Ingredientes</h2>
                    <ul>
                        <li>Vontade de aprender</li>
                        <li>Dedicação</li>
                        <li>Curiosidade</li>
                        <li>Constância</li>
                        <li>O elemento X*</li>
                    </ul>
                    <h2>Modo de preparo</h2>
                    <ol>
                        <li>Siga um plano de estudos, como a sequência de aulas desse curso, sem deixar nada para trás, por mais "fácil" ou bobo que pareça;</li>
                        <li>Estude uma coisa de cada vez e só comece as aulas de CSS depois que realmente fizer sua receita;</li>
                        <li>Vá além de apenas assistir as aulas, faça os exercícios, recrie os exemplos e compartilhe seus aprendizados aqui nos comentários;</li>
                        <li>Não decore todas as tags HTML que existem, use o Google como referência sempre que necessário e foque em aprender a lógica e os conceitos por trás do HTML e do CSS;</li>
                        <li>Crie projetos (como esse aqui) para colocar em prática o que aprendeu!</li>
                    </ol>
                </article>
            </section>
        </main>
        <footer><h6>*Alguns alegam que o elemento X é um tanto de maluquice, mas não existe comprovação científica.</h6></footer>
    </body>
</html>