CSS: Folha de Estilos Em Cascata

Olá, hoje vamos entender o uso de arquivos css, se você cria uma site html, e nele tem texto e divs que se repetem, acaba sendo árduo o trabalho de ir pagina por pagina, item por item para deixar tudo com o mesmo padrão, com o estilo css tudo se torna mais fácil, pois com uma simples classe se cria uma regra geral para o que for padrão. Veja mais no vídeo, qualquer dúvida deixar nos comentários, inscreva-se no nosso canal e até uma próxima.

Método ‘linkado’ para vincular o CSS ao HTML

Este vídeo faz parte de uma série de vídeos de CSS básico que gravei para explicar como utilizar a linguagem CSS em conjunto com o HTML. Hoje vamos aprender a vincular um arquivo de estilos CSS ao HTML, para deixar o código mais limpo e claro. O objetivo é criar uma regra em CSS para deixar um frase dentro de um div, que está no HTML, na cor vermelha. O código base para acompanhar o tutorial é o seguinte:
<html>
    <head>
        <title>Curso CSS</title>
        <style type="text/css">
            .classeTexto {color:blue;}
        </style>
        
    </head>
    <body>
        <div style="color:green;">Texto com CSS inline</div>
        <div class="classeTexto">Texto com CSS incorporado</div>
    </body>
</html>
Para darmos início devemos ter na mesma pasta que o arquivo .html um arquivo .css que nesse caso vou chamar de estilos.css, nele definiremos classes nas quais serão as regras de estilo para o html. Primeiramente, escreva o código que vai efetuar o link entre o HTML e o CSS dentro da tag <head> do seu arquivo HTML.
 <link rel="stylesheet" type="text/css" href="estilos.css" />
Em seguida, inclua no HTML a seguinte linha de código, que será o <div> que receberá a classe para a qual iremos criar uma regra no CSS (os desenvolvedores chamam essa regra de 'seletor'):
<div>Texto com CSS linkado.</div>
Com esse link feito e arquivo criado devemos abrir o .css e definir seus atributos, nesse caso criaremos a classe "classeTextoVermelho" :
.classeTextoVermelho {
	color:red;
}
Para finalizar, devemos ir no nosso html e dizer em que local esse atributo será usado. Nesse caso vamos aplicar a classe no <div> que criamos anteriomente.
<div class="classeTextoVermelho">Texto com CSS linkado.</div>
Pronto. Aprendemos a linkar o CSS ao HTML. Qualquer dúvida, pode deixar nos comentários e não se esqueça de inscrever-se no nosso canal. Até a próxima!

Tamanho de imagem no Photoshop

Nesse pequeno vídeo vamos aprender a ver qual o tamanho de uma imagem ou camada selecionada no photoshop, veja os paços abaixo: Primeiramente precisamos selecionar a camada que deseja, para isso selecione ela no menu lateral direito ou com CRTL pressionado clique na camada: 01 Em seguida abra o menu janela>informações ou clique f8: 2 logo em seguida parecerá uma caixa no lado direito mostrando a altura e a largura da camada, caso precise ela em pixel, centimentros ou demais opções procure o icone no canto superior direito - como mostrado no vídeo- e ir em opções do painel, uma caixa de dialogo ira aparecer com opções para o mudar a maneira que largura e altura são apresentadas: 4 Qualquer dúvida deixar nos comentários, não se esqueça de se inscrever no canal e até uma próxima.

HTML – colspan e rowspan

Olá, nesse pequeno tutorial vamos entender o uso de tabelas HTML, mais os atributos colspan e rowspan. Para iniciarmos precisamos de uma base html como essa aqui embaixo:

<!DOCTYPE html>
    <html>
        <head>
            <title> Edutoria </title>
        </head>
    <body>
    </body>
 
   </html>

Em seguida devemos trabalhar a tag table dentro do BODY, declarando assim a criação de uma tabela, devemos entender que tabelas são feitas de linhas e colunas e que para declarar cada uma devemos usar as tags TD para linhas e TR para colunas como exemplo abaixo:

 
<tr>
     <td> Linha 1 Céclula 1</td>
     <td> Linha 1 Céclula 2</td>
     <td> Linha 1 Céclula 3</td>
 </tr>
 <tr>
     <td> Linha 2 Céclula 1</td>
     <td> Linha 2 Céclula 2</td>
     <td> Linha 2 Céclula 3</td>
 </tr>

Continuando no html o devemos encontrar a seguinte código:

<!DOCTYPE>
    <html>
         <head>
             <title> Edutoria</title>
          </head>
 
 <body>
 
     <table>
          <tr>
               <td> Linha 1 Céclula 1</td>
               <td> Linha 1 Céclula 2</td>
               <td> Linha 1 Céclula 3</td>
          </tr>
          <tr>
               <td> Linha 2 Céclula 1</td>
               <td> Linha 2 Céclula 2</td>
               <td> Linha 2 Céclula 3</td> 
         </tr>
         <tr>
               <td> Linha 3 Céclula 1</td>
               <td> Linha 3 Céclula 2</td>
               <td> Linha 3 Céclula 3</td>
         </tr>
      </table>
 
 </body>
 
</html>

Caso você tenha a necessidade de uma borda visível em sua tabela é só acrescentar o atributo border na linha que declara a tabela:

<table border="1">

... Até agora alcançamos uma tabla simples, 3x3 porém necessidades pedem que algumas linhas ou colunas sejam mescladas para chegar em um resultado especifico. com por exemplo criar uma tabela apresentado no vídeo, onde a coluna 1 e 2 na linha 1 se tornam uma só, e na coluna 3 as linhas 1 e 2 mesclam para chegar ao resultado esperado:

capturar

Para mesclarmos duas colunas em uma linha devemos usar a tag Colspan, colocamos ela na linha e coluna inicial e declaramos o número de colunas que ela irá expandir .Para mesclarmos duas linhas em uma coluna devemos usar a tag Rowspan, colocamos ela na linha da coluna que deseja expandir e declaramos o número de linhas que ela irá ocupar como no exemplo abaixo:

 <tr>
       <td colspan="2"> Linha 1 Céclula 1</td>
       <!--<td> Linha 1 Céclula 2</td> -->
       <td rowspan="2"> Linha 1 Céclula 3</td>
 </tr>
 <tr>
       <td> Linha 2 Céclula 1</td>
       <td> Linha 2 Céclula 2</td>
       <!-- <td> Linha 2 Céclula 3</td> -->
 </tr>

O código resultante para a tabela anterior deverá ficar assim:

<!DOCTYPE>
<html>
      <head>
         <title> Edutoria - Tabela HTML </title>
      </head>
 
 <body>
 
     <table border="1">
     <tr>
         <td colspan="2"> Linha 1 Céclula 1</td>
         <!--<td> Linha 1 Céclula 2</td> -->
         <td rowspan="2"> Linha 1 Céclula 3</td>
     </tr>
     <tr>
         <td> Linha 2 Céclula 1</td>
         <td> Linha 2 Céclula 2</td>
         <!-- <td> Linha 2 Céclula 3</td> -->
     </tr>
     <tr>
         <td> Linha 3 Céclula 1</td>
         <td> Linha 3 Céclula 2</td>
         <td> Linha 3 Céclula 3</td>
     </tr>
    </table>
 
 </body>
 
</html>

Simples não? qualquer dúvida deixe nos comentários, não se esqueça de se inscrever no canal Edutoria do YouTube e até uma próxima.

Photoshop: Efeito Meio Tom em Cores (Halftone Color)

Olá, hoje vamos entender o funcionamento da ferramenta de filtro de efeito meio tom. Você pode escolher entre assistir o vídeo ou acompanhar os prints abaixo: 1° Passo Com o arquivo aberto crie uma camada e use a ferramenta degrade: 2 2° Passo Clique no menu filtros> pixelização> meio tom:3 3° Passo Abrirá um menu, nele o primeiro campo decide o tamanho das bolhas, os demais definiram as cores, use a criatividade: 4 4° Passo Finalizado seu efeito Half Tone:5   Simples não? qualquer dúvida só deixar nos comentários, não esqueça de se increver no canal do youtube e até uma próxima.

Como criar site com Bootstrap

Você já se encantou com sites responsivos, com animações fluidas, pensou em uma ferramenta onde o limite fosse sua criatividade, pois bem hoje vamos compreender o uso do BootStrap, simples e leve se destaca pela sua confiança e popularidade no mercado. O tutorial de seu uso foi dividido em 4 partes, para facilitar o entendimento e dar em foque a pontos necessários, não esqueça de se inscrever no canal, e espero ter ajudado , qualquer dúvida só deixar nos comentários.     Introdução: Instalação: Grids: Grids Responsivas: