Menu
CoddyTech
Começar a aprender

Foto de Perfil

Parte da seção Fundamentos do Journey de HTML da Coddy. Lição 32 de 60.

challenge icon

Desafio

Fácil

Certo, é hora de adicionar a foto do perfil! Você pode usar qualquer imagem que quiser. Fique à vontade para usar o link do exemplo abaixo.

  1. Depois do primeiro div (a seção do cabeçalho), crie outro <div>. Dentro dele, adicione uma tag <img>.
  2. Defina src para apontar para sua imagem e use os atributos width e height para controlar o tamanho dela.

Por exemplo:

  • src - https://storage.googleapis.com/coddy-15505.appspot.com/public/avatars/avatar25.png
  • width - 200
  • height - 200"

Experimente você mesmo

<!DOCTYPE html>
<html>
    <body>
        <!-- Header Section -->
        <div>
            <h1>John Doe</h1>
            <p>Web Developer | Creative Thinker</p>
        </div>
    </body>
</html>

Todas as lições de Fundamentos

1Fundamentos do HTML

O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML

4Cartão de Receita

Visão Geral do ProjetoTítulo e Descrição da ReceitaLição de projetoIngredientesLição de projetoPassosLição de projeto

7Página de Perfil Pessoal

Visão Geral do ProjetoSeção de CabeçalhoLição de projetoFoto de PerfilLição de projetoSeção Sobre MimLição de projetoLinks SociaisLição de projeto

10Tabelas

Fundamentos de TabelasAdicionando LegendasMesclando Linhas e ColunasRecapitulação - Tabelas

2Texto e Formatação

TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação

5Adicionando Conteúdo

Atributos HTMLLinksLinks para Novas PáginasImagensAtributos de Imagem

8Formulários e Inputs Parte 1

Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico

11Página de Inscrição de Evento

Visão Geral do ProjetoSeção de CabeçalhoLição de projetoSeção de Detalhes do EventoLição de projetoFormulário de InscriçãoLição de projetoSeção de RodapéLição de projeto

3Trabalhando com Listas

Lista não ordenadaLista ordenadaListas aninhadasRecapitulação - Listas

6Layout da Página

DivisõesSpans InlineTags SemânticasSeções e ArtigosRecapitulação - Layout

9Formulários e Inputs Parte 2

Radio ButtonsCheckboxesDropdownsBotõesBotões em FormuláriosRecapitulação - Formulários #1Recapitulação - Formulários #2

12Desafios Finais

Cartão de Perfil SimplesCartão de Convite de EventoPágina de Artigo SimplesLista de Livros Favoritos

Pratique por conta própria: Playground de Web