Oficina de T.I

Boas-vindas! Em nossos encontros, vamos aprender:

HTML

CSS

Javascript

Confira os projetos que construíremos juntos:

Alex Kidd
Megaman
Drumpad
Piano
Netflix
Beatbox
Tiles
Platformer

2 - HTML e CSS:

Tags e atributos

Navegação

Tags HTML CSS Background Estrutura básica

Tags HTML

Além das tags de parágrafo e cabeçalho que vimos na última aula, temos muitas outras que nos ajudam a estruturar nosso site.

Os cabeçalhos <h1> nos ajudam a dar importância para um artigo que desejamos escrever. Sendo h1 o maior, ele se extende até o h6, onde diminui gradualmente.

<h1> Header </h1>
<h2> Header </h2>
<h3> Header </h3>
<h4> Header </h4>
<h5> Header </h5>
<h6> Header </h6>

Resultado

Podemos usar o <h1> sempre como título e os demais como subtítulos

TAGS HTML

Informam ao navegador a estrutura e os elementos da página.

Podem receber um ou mais atributos.

Atributos

Utilizamos atributos para personalizar as tags, modificando sua funcionalidade.

Atributos

<p class="...">

Usamos para atribuir uma classe ao elemento.

<p id="...">

Usamos para atribuir uma identidade a um único elemento.

<p class="a" id="z">

Um elemento pode receber mais de um atributo.

Tags Estruturais

<!DOCTYPE html>
<html>
<head>

Não possui valor visível, mas é onde colocamos informações úteis sobre a página

</head>

<body>

É aqui onde trabalhamos com os elementos visuais (texto, imagens, etc.)

</body>

Comentários

Para facilitar nosso desenvolvimento, muitas vezes usamos comentários para organizar e/ou explicar o código.


<p> Olá mundo! </p>

Somente quem estiver escrevendo o código pode ver o comentário.

Formatação de texto

Podemos formatar nosso texto e deixá-lo mais interessante com formatações.

<b> Realce </b>
<i> Itálico </i>
<u> Sublinhado </u>

Realce

Itálico

Sublinhado

Confira a lista das tags de formatações

Outras TAGS Html

Com a tag UL e os itens LI, podemos destacar uma lista
de itens:

<ul>
<li> Maçã <li>
<li> Laranja <li>
<li> Limão <li>
</ul>

Link de Ligação

A tag de link HTML é responsável por fazer a ligação entre um documento e outro.

<a href="endereço">Clique aqui</a>

Exemplo:

<p>Para acessar o google, <a href="https://www.google.com">Clique aqui.</a></p>

Para acessar o Google, clique aqui.

Certo, mas eu gostaria de alterar esse fundo branco. Como eu faço?

É aí que a gente entra com o CSS!

CSS: Background

Para manipularmos o fundo, vamos chamar o body (corpo) no CSS

body{
background-color: brown;    
}

Reparem que, para chamar o body no css, não usamos . ou #, como utilizamos para chamar classes e ID

.classe{
    cor: red;  
    }

    #id{
    cor: blue;
    }

Imagens

Antes de nos aprofundarmos em background, vamos adicionar imagens para deixar nosso trabalho mais atraente.

Vamos usar o atributo <img>, que não precisa ser fechado, como na maioria das outras tags.

<img src="" alt="descrição">

No src (source) definimos a origem da imagem, que pode ser um arquivo que está na pasta de nosso projeto, ou uma fonte externa, tal como uma URL da web.

No alt, a gente vai descrever nossa imagem. Nós usamos isso por conta que, se por acaso a imagem não carregar (internet lenta ou o site sair do ar) vai aparecer uma descrição sobre ela.

Atenção! Não é recomendado usar imagens web. Apesar de ser raro, elas podem sair do ar. O ideal é baixar as imagens que você vai usar e colocar na pasta do seu projeto.

Estrutura básica

Vamos usar as tags que aprendemos até o momento para montar uma estrutura

Confira o código:

<h1>Tudo sobre pets</h1>
<img src="pets.png">
<h2>Alimentação</h2>
<p>É muito importante cuidarmos da alimentação de nossos animais de estimação.</p>

<h2>Cuidados</h2>
<p>Assim como a alimentação possui importância, devemos nos atentar
a higiene de nossos animais.</p>

<h2>Higiene</h2>
<p>Recomenda-se dar banho em nossos pets periodicamente para garantir conforto e saúde ao animal.</p>

Lembrando: precisamos ter o arquivo de imagem em nossa pasta e colocar seu nome certinho na <img src> respeitando sua extensão de arquivo.

Perfeito! Já temos uma estrutura básica. Agora, vamos adicionar o atributo alt na nossa img caso a imagem não carregue em dispositivos.

<img src = "pets.png" alt="animais de estimação">

Agora, caso a imagem não carregue, vai aparecer o texto "animais de estimação."

Ok, já temos a estrutura básica. É agora que vamos aplicar o estilo?

Acertou! Novamente, vamos usar a tag <style> para usar CSS dentro do HTML

    body{
      background: skyblue;
      }

Nesse código, estamos dizendo para o body ser colorido de skyblue (céu azul)

  img{
    display: block;
    margin: auto;
    }

Agora, vamos estilizar o img. Como não estamos trabalhando com classes ou id, vamos chamar o img direto sem . ou #

Isso vai afetar todas as imagens que usarmos.

Display e margin, junto com os atributos block e auto, nós usamos para centralizar o elemento.

    img{
      display: block;
      margin: auto;

      border-radius: 500px;
      border: solid black 5px;
      }

Border-radius é o atributo responsável por arredondar o elemento. No exemplo, vamos usar um valor alto (500 pixels) para formar um círculo perfeito.

O atributo border é utilizado para estilizar bordas;

    p{
        font-size: 20px;
        background: white;
        border: solid black 4px;
        border-radius: 50px;
    }

Vamos aumentar um pouco o tamanho do texto e aplicar um fundo branco a ele. Backgrounds também podem ser aplicados a textos!

Adicionamos, também, borda e arredondamos com border-radius.

Certo, mas ficou um pouco apertado para o nosso parágrafo. O que podemos fazer?

Vamos aplicar um recuo de 20 pixels. Para isso, usamos o padding:

      p{
        font-size: 20px;
        background: white;
        border: solid black 4px;
        border-radius: 50px;
        padding: 20px;
    }

Para finalizar, vamos aplicar um fundo para nosso subtítulo e deixar o texto em branco, para melhorar o contraste entre as cores.

Da mesma forma, também vamos estilizar nosso título principal, o <h1>

        h1{
            text-align: center;
            color: white;
            background: coral;
            
            width: 300px;
            margin: auto;
            margin-bottom: 30px;
            }
        h2{
            color: white;
            background-color: coral;
            width: 130px;
        }

Código completo


        <!DOCTYPE html>
        <html lang="en">
        <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">
        </head>
        
        <body>
        
        <h1>Tudo sobre pets</h1>

        <img src="pets.png" alt="animais de estimação">

        <h2>Alimentação</h2>
        <p>É muito importante cuidarmos da alimentação de nossos animais de estimação.</>


        <h2>Cuidados</h2>
        <p>Assim como a alimentação, devemos nos atentar a higiene de nossos animais.</>


        <h2>Higiene</h2>
        <p>Recomenda-se dar banho em nossos pets periodicamente para garantir conforto e saúde ao animal.</>
                    
        </body>

        <style>
        h1{
            text-align: center;
            color: white;
            background: coral;
            
            width: 300px;
            margin: auto;
            margin-bottom: 30px;
            }
            img{
            display: block;
            margin: auto;
            border-radius: 500px;
            border: solid black 5px;
            }
            body{
            background: skyblue;
            }
            p{
            font-size: 20px;
            background: white;
            border: solid black 4px;
            border-radius: 50px;
            padding: 20px;
            }
            h2{
            color: white;
            background-color: coral;
            width: 130px;
            }
        </style>

        </html>

Nosso código ficou muito grande com a inserção de CSS dentro do HTML. Como podemos deixar o CSS separado?

Vamos criar um arquivo chamado style.css e transferir todo o nosso código CSS

Para chamar nosso CSS, agora externo, colocamos essa tag dentro do <head>

    <link rel="stylesheet" href="style.css">

Agora nosso código ficou bem melhor e com menos informação visual


    <!DOCTYPE html>
    <html lang="en">
    <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">
    
    <!-- é aqui que conectamos o css externo -->

    <link rel="stylesheet" href="style.css">

    </head>
    <body>
    
    <h1>Tudo sobre pets</h1>

    <img src="pets.png" alt="animais de estimação">

    <h2>Alimentação</h2>
    <p>É muito importante cuidarmos da alimentação de nossos animais de estimação.</>


    <h2>Cuidados</h2>
    <p>Assim como a alimentação, devemos nos atentar a higiene de nossos animais.</>


    <h2>Higiene</h2>
    <p>Recomenda-se dar banho em nossos pets periodicamente para garantir conforto e saúde ao animal.</>
                
    </body>
    </html>

E o nosso style.css:

h1{
    text-align: center;
    color: white;
    background: coral;
    
    width: 300px;
    margin: auto;
    margin-bottom: 30px;
    }
    img{
    display: block;
    margin: auto;
    border-radius: 500px;
    border: solid black 5px;
    }
    body{
    background: skyblue;
    }
    p{
    font-size: 20px;
    background: white;
    border: solid black 4px;
    border-radius: 50px;
    padding: 20px;
    }
    h2{
    color: white;
    background-color: coral;
    width: 130px;
    }

Sensacional! Dessa forma, podemos focar no HTML e CSS de forma mais organizada

Confiram o resultado abaixo e nos vemos na próxima aula!

Oficina de T.I - Uma realização UBUNTUFF/IEAR

Desenvolvido com por: Pablo Quezado