Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Projeto] [Projeto] aula 03 - exercício 02.

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

por Joao Lucas Albuquerque Silva
| 26.2k xp | 2 posts

Olá, primeira vez utilizando o fórum e apresentando um projeto que já tinha começado há um bom tempo atrás antes de ter a oportunidade de ingressar na Alura. Segue mini projeto na época. Ainda tentando me adaptar como usar o fórum, aceito muitas dicas!

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Praticando o HTML</title>
    <style>
    </style>
</head>
<body>
    <header>
        <h1>Introdução ao HTML</h1>
    </header>
    <main>
        <br>
        <h1>Colocando em prática o que eu aprendi sore HTML</h1>
    <p>Olá, me chamo Johnny e hoje irei mostrar para vocês o que eu venho estudando sobre a linguagem HTML.</p>
    <p>Primeiramente, vamos saber o que é o HTML. A sigla <abbr title="Hyper Text Markup Language">HTML</abbr> quer dizer "Linguagem de Marcação de Hyper texto" isso numa tradução literária da coisa.</p>
    <p>E vocês me perguntam, 'o que isso faz? e qual sua funcionalidade?' - Bom, sua funcionalidade se da por ser uma linguagem padrão para se criar web sites, sim, como este mesmo que você esta acessando e olhando agora. Tem o objetivo de descrever assim, toda  a estrutura de uma página na Web, mostrando uma série de elementos como um todo, e dizendo para o navegador web como deve ser apresentado tal conteúdo ali descrito.</p>
    <p>Como por exemplo, você pode observar que é possível identificar o nome da página Web atual, consegue visualizar também o título da página, seu corpo de texto e tudo o que compõem este estudo sobre HTML; e por fim dizer que tudo isso que esta lendo agora é um parágrafo e por aí vai...</p>
    <p>Mas lembre-se: Isso é apenas a base e o começo de como criar um site e como visualizar seu contéudo. Tem muita coisa a se aprofundar ainda mais.</p>
    <p><ul><li class="paragrafo-especifico">Caso queira saber a fonte de estudos que utilizei, basta <a href="http://www.w3schools.com/html/default.asp">clicar aqui</a> e você será direcionado ao site que usei como base para ensiná-los.</li></ul></p>
    <hr>
    <h2>Abaixo terá alguns exemplos dos elementos que contém dentro de um HTML.</h2>
        <div class="exemplos">
            <h3>Exemplo</h3>
           <div class="code notranslate htmlHigh">
            <div class="w3-code notranslate htmlHigh">
                <span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>!DOCTYPE<span class="attributecolor" style="color:#00AD79"> html</span><span class="tagcolor" style="color:mediumblue">></span></span><br>
                <span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>html<span class="tagcolor" style="color:mediumblue">></span></span><br><span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>head<span class="tagcolor" style="color:mediumblue">></span></span><br><span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>title<span class="tagcolor" style="color:mediumblue">></span></span>Título da página<span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>/title<span class="tagcolor" style="color:mediumblue">></span></span><br>
                <span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>/head<span class="tagcolor" style="color:mediumblue">></span></span><br><span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>body<span class="tagcolor" style="color:mediumblue">></span></span><br><br><span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>h1<span class="tagcolor" style="color:mediumblue">></span></span>Isso é um cabeçalho<span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>/h1<span class="tagcolor" style="color:mediumblue">></span></span><br><span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>p<span class="tagcolor" style="color:mediumblue">></span></span>Este é um parágrafo.<span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>/p<span class="tagcolor" style="color:mediumblue">></span></span><br><br>
                <span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>/body<span class="tagcolor" style="color:mediumblue">></span></span><br><span class="tagnamecolor" style="color:cadetblue"><span class="tagcolor" style="color:mediumblue"><</span>/html<span class="tagcolor" style="color:mediumblue">></span></span>
                 </div>
            </div>
  </main>
</body>
</html>
2 respostas
por Joao Lucas Albuquerque Silva
| 26.2k xp | 2 posts

style.CSS

body{
    background-color:#E8E6E6;
}
header{
    text-align: center;
    color: black;
}
main{
    text-align: justify;
    text-align: left;
}

#texto-inicial{
    font-size: 20px;
    font-family:'Times New Roman', Times, serif;
}


.paragrafo-especifico{
    font-size: 12px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}



.exemplos{
    background-color: #B2B2B2;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 10px;
    margin: 20px 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    height: auto;
    width: 50%;
}
.code{
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    width: auto;
    background-color: white;
    color: black;
    padding: 8px 12px;
    border-left: 5px solid #AD5C00;
    
}

hr{
    color: white;
    background-color: black;
}
solução!
por Victor Costa Santos
| 1919k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Olá João!

Primeiramente, bem-vindo ao fórum! Fico feliz que você esteja compartilhando seu projeto e buscando se adaptar ao uso do fórum, aqui é um espaço, para dúvidas, sugestões, aberto para toda a comunidade, então fique a vontade para criar seu tópicos, mas uma boa prática é levar em consideração a sugestões do guia de como fazer uma boa pergunta no fórum, esse tópico aqui atende bem essas sugestões, para esse caso.

Seu código está muito bom! Adorei o campo de código adicionado e a recomendação da documentação da w3scool, que é uma excelente fonte. Continue assim, praticando, explorando e compartilhando o seu conhecimento.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!