Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Atividade Final do curso de HTML e CSS I. Fiz desta maneira, está bom? Dúvida sobre Alt.

Não consegui colocar alt dentro das img class, ele aparece na tela escrito, e no caso das caixas ele faz a imagem desaparecer, como faço?


body {

line-height: 1.5;
font-family:"Crimson Text","Times New Roman", serif;
background-color: #F2FFFC;
font-size: 120%;
}

main div {
    padding: 30px 0;
    width: 720px;
    margin:auto ;
}


h1, h2 {
    font-size: 30px;
    font-family: "Open Sans Condensed" ,"Arial", sans-serif;
}

.titulo-principal{
    font-size: 60px;
    border-bottom: 10px black solid;
    padding: 25px;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    text-transform: uppercase;
}


p {
    margin: 20px 20px;
    text-align:justify;
    }

aside{
background-color: #3C1D3D;
    color: #F2FFFC;
}


footer{
color: #F2FFFC;
}



nav a {    
    color: #F2FFFC;
    text-transform: lowercase;
}

main a{
    color: #851944;
}

aside a{    
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}

aside, footer {
    padding: 20px;
}

aside {
    text-align: center;
}

aside h1{

    font-size: 30px;
    margin-bottom: 25px;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}


.icones-sociais li {
    display:inline-block;  
}

.icones-sociais a {
    width:40px;
    height:40px;
    text-indent:-9999px;
    display: block;
}


#rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
}


.rodape-inicial{
    border:2px solid #ccc;
}


.leia-mais {
    margin: 15px;
    font-size: 20px;
    padding: 5px;
    display: inline-block;
    text-align: center;
    background-color: #E6E7E8;
}

.github{
background-image:url(../img/github.png);
}

.twitter{
background-image:url(../img/twitter.png);
}

.linkedin{
background-image:url(../img/linkedin.png);
}


h2{
    clear:both;
}

.foto-eu, aside {
    float: right;
    box-sizing: border-box;
    border-bottom: 12px solid black;
    border-left: 12px solid black;
}


footer {
    clear: both;
    position: fixed;
    bottom: 0;
    width: 100%

}

main{
    float: left;
    width: 85%;
    padding-bottom: 100px;
}

.foto-eu{
    background-image: url(../img/eu.jpg);
    position: absolute;
    top: 0;
    right: 0;
    height: 310px;
    width: 310px;
}

aside{
    width: 15%;
    position: relative;
    top: 310px;
}

blockquote{
    border: 8px solid black;
    background-color: #FAFFFC;
    padding: 16px;
    margin: 16px;
    width: 320px;
    height: 280px;
    float: left;
}

.quadro-2{
float: left;
width: 320px;
height: 280px;
padding: 16px;
margin: 16px;
}

.quadro-3{
float: left;
width: 320px;
height: 280px;
padding: 16px;
margin: 16px;
}

.quadro-4{
float:left;
width: 320px;
height: 280px;
padding: 16px;
margin: 16px;
}

.foto-bmw{
background-image: url(../img/bmw.png);
height: 150px;
width: 260px;
}

.foto-uol{
background-image: url(../img/uol.png);
height: 150px;
width: 260px; 
}

.foto-ibm{
background-image: url(../img/ibm.png);
height: 150px;
width: 260px; 
}

.foto-g1{
background-image: url(../img/g1.png);
height: 150px;
width: 260px;
}
8 respostas
<!DOCTYPE html>

<html>
    <head>
        <title>Portfolio - João da Silva</title>
        <meta charset="UTF-8">
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/portfolio.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>

        <main>
        <h1 class="titulo-principal">Portfolio</h1>
        <div>

            <p><strong>Veja abaixo a lista dos meus projetos mais relevantes</strong></p>

            <blockquote>
                <figure>
                    <img class="foto-bmw">
                        <figcaption>
                            <a href="http://www.bmw.com">BMW.com:reformulação de design e implementação de HTML, CSS e JavaScript</a>
                        </figcaption>
                    </figure>    
            </blockquote>




            <blockquote class="quadro-2">
                <figure>
                    <img class="foto-uol">
                        <figcaption>
                            <a href="http://www.uol.com.br">UOL.com.br:reformulação de design e implementação de HTML, CSS e JavaScript</a>
                        </figcaption>
                </figure>
            </blockquote>

            <blockquote class="quadro-3">
                <figure>
                    <img class="foto-ibm">
                        <figcaption>
                            <a href="http://www.ibm.com">IBM.com:aplicação de progressive enhancement em conjunto com aplicação back-end</a>
                    </figcaption>
                </figure>
            </blockquote>

            <blockquote class="quadro-4">
                <figure>
                    <img class="foto-g1">
                    <figcaption>
                        <a href="http://www.g1.com.br">G1.com.br:reformulação de desin e implementação de HTML, CSS e JavaScript</a>
                    </figcaption>
                </figure>
            </blockquote>

        </div>
        </main>
        <img class="foto-eu">
        <aside>
            <h1>João da Silva</h1>
            <nav>
                <ul class="icone-redes-sociais">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>    
            <ul class="icones-sociais">
                <li><a class="github"href="https://github.com/joaodasilva">
                Github</a></li>
            <li><a class="twitter"href="https://twitter.com/joaodasilva">
                Twitter</a></li>
            <li><a class="linkedin"href="https://br.linkedin.com/pub/joao-da-silva/32/4/508">
                Linkedin</a></li>            
            </ul>        
        </aside>
        <footer id="rodape-pagina">
            © João da Silva 2014
        </footer>
    </body>    
</html>

Fala aí Vitor, tudo bem? Desculpa, mas, não consegui entender o problema. Consegue me passar mais detalhes? Ficaria mais fácil tentar lhe ajudar.

Fico no aguardo.

Oi, Vitor, tudo bem?

Você tem GitHub? É facinho de fazer. Seria legal pra eu poder baixar todo o seu projeto e dá uma olhada nele, aqui, quando eu abro ele, não consigo ver tudo, por que faltam alguns arquivos css, imagens...

Nessa resolução aqui (https://cursos.alura.com.br/forum/topico-o-background-nao-aparece-81454), o moderador André ensina como fazer uma conta no GitHub, caso você não tenha.

Aí, você sobre todo o projeto e vamos poder avaliar e ver esses errinhos. :}

Oi, eu tenho github sim, porém estou tendo dificuldades em linkar os arquivos css para o html em que eu dei upload no site. Quando eu abro o site, ele sai todo falhado, parece que não está carregando o arquivo css.

Consegui rsrsrs...

https://vkindrat.github.io/

Minha dúvida é sobre o alt, por exemplo quando eu coloco alt logo após img class="foto-bmw", ele aparece no lugar da imagem da BMW em escrito, e no caso do alt após o img class="foto-eu" ele aparece em escrito em cima da foto

Oi, Vitor, que ótimo que consegiu postar no GitHub.io! Já é um forma de divulgar o seu trabalho.

Mas bem, dei uma olhada no teu HTML. Porém, mas antes de resolvermos, vamos entender um pouco para que serve o atributo alt da tag img.

O alt ele especifica um texto de forma alternativa à imagem, ou seja, se por algum motivo, a imagem não carregar, por exemplo, o que está dentro do alt, lá no teu HTML, é para aparecer no página. Ou seja, é uma orientação ao usuário (até de forma acessível a determinados usuários), portanto, o conteúdo do alt precisa ser algo explicativo, como:

<img src = "img/bola.png" alt="imagem-bola-branca">

A priori a sua ideia está correta, porém, está acontecendo um problema: quando você coloca o alt mas sem um caminho de imagem na sua tag img ele substitu, justo por que, a sua função é esta. A sua tag img está assim:

<img class="foto-bmw" alt="logo">

O caminho da sua imagem está direto nos links, certo? Logo, o atributo alt não está conseguindo capturar a imagem e dá um texto a ela. A forma mais correta de fazer é como o instrutor fez:

<a href="http://bmw.com">
    <figure>
        <img src="img/bmw.png" alt="Site da BMW">
            <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
        </figure>

Veja que ele dá o caminho da imagem pela pasta img dentro da tag img e, em sequência, o atributo alt. Aí, sim, ele captura e coloca o texto.

Ah, o atributo alt não é somente exclusivo da tag img ele é usado também no input e area.

Testa e me fala se deu certo :}

Entendi. Deu certo, porém, se eu fizer desta maneira, não preciso das classes para as imagens dentro dos quadrados né? Então isso significa que como o alt só funciona se você declarar o src(caminho) da imagem, não vale a pena criar classes para imagens?

solução!

É interessante a classe para caso você queira modificar ela com CSS, JS... Mas caso não precise estiliza-la, então, não precisa. Se você quiser estilizar ela, chamando no seu arquivo CSS, por exemplo, é importante ter uma classe.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software