Maktub TI... Em busca do código?: 2015

domingo, 14 de junho de 2015

C/C++: Use rotulos, vá para onde quiser. Aula 18

Pense bem antes de usar rótulos na linguagem C, como vemos no terceiro exemplo, rótulos mal inseridos fazem o programa sair de todos os SWITCHs e repetições e voltar para o meu do meu programa. Mas bem utilizado você pode sair de vários loops ou voltar para o inicio do programa.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main() {
    int digite, caso;

    printf("Digite 1 ou 3: ");
    scanf("%d", &caso);

    switch (caso) {
        case 1:

    while(digite != 2 ) {
        printf("\nDigite 1 ou 2: ");
        scanf("%d", &digite);
    if ((digite > 2)||(digite < 1)) {
        printf("numero invalido.");
        goto rotulo1;
    }
    switch (digite) {
        case 1:
        printf("continue.");
        continue;
        case 2:
        rotulo2: printf("break");
        break;
    }
    printf("\n\n fim do switch.");
    }
    case 3:
    printf("Fim do primeiro switch.");
    goto rotulo2;
    break;
}
rotulo1:
    printf("\n\n fim do while.");

getch();
return(0);
}

Vídeo:

sábado, 13 de junho de 2015

Propriedade border-radius no CSS3. HTML5 CSS3, Aula 48

Propriedade border-radius no CSS3. HTML5 CSS3, Aula 48

Nesse vídeo vemos como configurar bordas no HTML utilizando CSS3.
Sendo utilizado quatro formas de configurar o valor das bordas.

Facebook: http://migre.me/oTHD8
Qualquer dúvida é só comentar.

Código fonte HTML:

<section class="paragrafos bordas">
<h1>Bordas no CSS3</h1>
<p>...{    border-radius: Um valor igual a todas bordas. Dois valores, o primeiro vale para a superior direita e inferior esquerda e o segundo superior esquerda e inferior direita. Três valores, Primeiro vale para superior esquerda, segundo vale para superior direita e inferior equerda e a terceira vale para inferior direita. E quatro valores, superior esquerda, superior direita, inferior direita e inferior esquerda.</p>
<ul class="todositens">
<li class="bordasa">A</li>
<li class="bordasb">B</li>
<li class="bordasc">C</li>
<li class="bordasd">D</li>
</ul>
</section>

Código fonte CSS:

.bordasa {
    border-radius: 5px;
    width: 100px;
    height: 100px;
    background-color: red;
}
.bordasb {
    border-radius: 5px 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.bordasc {
    border-radius: 5px 10px 20px;
    width: 100px;
    height: 100px;
    background-color: green;
}
.bordasd {
    border-radius: 5px 10px 20px 30px;
    width: 100px;
    height: 100px;
    background-color: pink;
}
.bordas li {
    display: inline-block;
}
.todositens {
    text-align: center;
}

Vídeo:

sexta-feira, 12 de junho de 2015

C/C++: Utilizando o break e o continue. Aula 17

Nesse vídeo vemos o que realmente faz o break e o continue na linguagem C, em apenas um programa de 28 linhas nós utilizamos um while, um if e um switch, para podermos entender o que faz o continue e o break.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main() {
    int digite;

    while(digite != 2 ) {
        printf("\nDigite 1 ou 2: ");
        scanf("%d", &digite);
    if ((digite > 2)||(digite < 1)) {
        printf("numero invalido.");
        continue;
    }
    switch (digite) {
        case 1:
        printf("continue.");
        continue;
        case 2:
        printf("break");
        break;
    }
    printf("\n\n fim do switch.");
    }
    printf("\n\n fim do while.");

getch();
return(0);
}

Vídeo:

quinta-feira, 11 de junho de 2015

C/C++: Vetor (parte 2) de caracteres. Aula 16

Nesse vídeo realizamos três exemplos de vetores de caracteres, desde somente criar o vetor até utiliza-lo dentro de um laço (for) para seus valores.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main () {
    char vetor_com_letras[7];
    int i;

    printf("Digite: ");
    gets(vetor_com_letras);

    for (i=0; i<=7; i++) {
    printf("%c\n", vetor_com_letras[i]);
    }

getch();
return(0);
}

Vídeo:

C/C++: Vetores [parte 01]. Aula 15

Nesse vídeo vemos detalhadamente como criar um vetor, como chama-lo para o usuário digitar, algumas peculiaridades quando se programa na linguagem C.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <conio.h>
#include <stdio.h>

int main (void) {

    int vetor[3];

    printf ("Digite um numero: ");
    scanf("%d", &vetor[0]);
    printf ("Digite um numero: ");
    scanf("%d", &vetor[1]);
    printf ("Digite um numero: ");
    scanf("%d", &vetor[2]);

    printf ("Primeiro vetor: %d. \n", vetor[0]);
    printf ("Segundo vetor: %d. \n", vetor[1]);
    printf ("Terceiro vetor: %d.\n", vetor[2]);

getch();
return(0);
}

Vídeo:

C/C++: [do while] estrutura de repetição. Aula 14

Nesse vídeo fazemos um programa que verifica se o número é par ou ímpar utilizando a estrutura de repetição do while em C/C++ (linguagem C).

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main (void) {
    int a;
    do {
printf("Digite um numero (0(zero) para sair): ");
    scanf("%d", &a);
    if (a%2==0) {
        printf("PAR \n");
    }else{
        printf("IMPAR \n");
    }
    }while (a!=0);


getch ();
return (0);
}

Vídeo:

C/C++: [WHILE] estrutura de repetição. Aula 13

Nesse vídeo criamos um programa que faz a média das notas dos alunos utilizando um while (repetição), que é utilizada "enquanto" algo acontece .

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main (void) {
    int contador,a,b,c,d;
    char aluno[10];
    c = 0;

    contador = 1;
    printf("Digitar o numero de alunos: ");
    scanf("%d", &a);
    while (contador <= a) {
        printf("Nome do aluno: ");
        scanf("%s", &aluno);
        printf("Nota: ");
        scanf("%d", &b);
        contador++;
    c = c + b;

    }
    d = c / a;
    printf("Media dos alunos: %d", d);


getch();
return (0);
}

Vídeo:

C/C++: [for] estrutura de repetição. Aula 12

Programando C/C++: Aula 12, estrutura de repetição com variável controladora [for].

Nesse vídeo vemos três exemplos do uso de repetição em C/C++ utilizando "for" para isso, ou uma variável controlando a repetição. Feito um programa que soma os valores da repetição, por exemplo, soma os valores de 1 a 100 (presentes na repetição).

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main () {
    int i, x, k;
    k = 0;

    printf("Digite um valor de 1 a 100: ");
    scanf("%d", &x);

    for (i=x; i<=100; i++) {
        printf ("%d \n", i);
        k = k + i;
    }
    printf ("Soma: %d", k);

getch();
return (0);
}

Vídeo:

C/C++: Descomplicando o SWITCH. Aula 11

Programando C/C++: 11, descomplicando o SWITCH.

Nesse vídeo vemos um exemplo do uso do switch inserindo dois "casos" para o usuário digitar e uma terceira opção quando o usuário digitar algo "errado".

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main (void) { /*void server para a função
    poder retornar algo nulo*/
    char variavel[] = "alam";
    int a;

    printf ("Digite 8 ou 80: ");
    scanf("%d", &a);

switch (a) {
    case 8: /*8 é o que o usuario deve digitar*/
    printf ("%s", variavel);
    break;
    case 80:
    printf ("Quantos cases quiser");
    break;
    default:
    printf("Eu disse 8 ou 80");
    break;
}

getch();
return(0);
}

Vídeo:

C/C++: [if e else] Operadores de comparação. Aula 10

Neste vídeo vemos o uso de if e else em C/C++ e também e principalmente operadores de comparação, como por exemplo, comparar se uma variável é igual a um número, ou diferente, ou maior, menor, maior ou igual, menor ou igual.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main () {
    int x;
    printf("Digite um numero: ");
    scanf ("%d", &x);

    if (x <= 2) {/*if igual se*/
        printf("menor ou igual a");
    }else{
        printf("maior maior");
    }

getch();
return(0);
}

== - igual;
<= - menor igual;
>= - maior igual;
!= - diferente;
> - maior que;
< - menor que.

Vídeo:

C/C++: Exemplo de uso do \f [codigo especial]. Aula 09

Nesse vídeo vemos um exemplo de uso do \f, mesmo porque são poucos os lugares onde demonstram um exemplo do mesmo.
A única coisa que ele faz é pular página, isso mesmo, quando estiver manipulando um arquivo em C/C++ uso o \f para escrever o texto seguinte já na outra página.
Vale a pena enfatizar de utilizar um arquivo .doc por exemplo, que utiliza paginas.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main () {
    FILE *arquivo;
    char escreva[230];
    arquivo = fopen ("arquivo.doc","a");
    printf ("Arquivo criado. Escreva algo: ");
    scanf("%s", &escreva);
    fprintf (arquivo, "%s \f algo.", escreva);

getch();
return(0);
}

Vídeo:

C/C++: Códigos especiais. Aula 08

Nesse vídeo vemos valor nulo, como retroceder cursor para o inicio da linha (paragrafo), como fazer barra invertida no executável (\), quebrar linha (novo paragrafo), colocar aspas, e tabular.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main () {
    int a;
    printf("Valor nulo eh \\0: \0.");
    printf("Escreve antes \r");
    scanf("%d", &a);
    printf("Nova linha eh com \\n. \n.");
    printf("Aspas eh com \\ na frente das \"");
    printf("\t \\t eh tabulado.");

getch();
return(0);
}

Vídeo:

C/C++: Manipulação de arquivos [inserir dados]. Aula 07

Nesse vídeo vemos como inserir dados em arquivo de texto utilizando C/C++.
Tabela de modos de abrir arquivos com C/C++: http://maktubti.blogspot.com.br/2015/05/manipulacao-de-arquivos-em-cc-abrindo.html

Facebook: http://facebook.com/embuscadocodigo Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main () {
    FILE *arquivo;
    char escreva[200];
    arquivo = fopen ("arquivo2.txt","a");
    /*O a cria um arquivo ou abre um existente*/
    printf ("Arquivo criado. Escreva algo: ");
    scanf("%s", &escreva);
    fprintf (arquivo, "%s ", escreva);

getch();
return(0);
}

Vídeo:

C/C++: Manipulação de arquivo [criando arquivo]. Aula 06

Nesse vídeo criamos um arquivo .txt utilizando C/C++.
Tabela de modos de abrir arquivo em C/C++: http://maktubti.blogspot.com.br/2015/05/manipulacao-de-arquivos-em-cc-abrindo.html

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main () {
    FILE *arquivo;

    arquivo = fopen ("arquivo.txt","w");
    /*O w cria um arquivo*/
    /*se o arquivo já existir ele é destruido*/

    printf("Arquivo criado.");

getch();
return(0);
}

Vídeo:

C/C++: Multiplicação e Divisão. Aula 05

Programando C/C++: Aula 05, Multiplicação e Divisão

Nesse vídeo fazemos dois executáveis, um realizando uma multiplicação e outro uma divisão que retorna seu resultado e sua sobre.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte (1):
#include <stdio.h>
#include <conio.h>

int main () {
    float a,b,c;

    printf ("Digite um valor: ");
    scanf ("%f", &a);
    printf ("Digite um valor: ");
    scanf ("%f", &b);
    c = a * b;
    printf ("O resultado eh %.2f", c);

getch ();
return (0);
}

Código fonte (2):
#include <stdio.h>
#include <conio.h>

int main () {
    int a,b,c,d;
    b = 2;
    printf ("Digite um valor: ");
    scanf("%d", &a);
    c = a / b;
    d = a % b;
    printf ("O resultado eh %d ", c);
    printf ("e a sobra da divisao eh %d.", d);

getch ();
return (0);
}

Vídeo:

C/C++: Soma e subtração. Aula 04

Programação C/C++: Aula 04, soma e subtração

Nessa vídeo aula vemos como realizar somas e subtração em C/C++. Dentro de um mesmo executável, se tiver alguma dúvida aqui é só perguntar, porque a "dificuldade" aumentará e muito nas próximas vídeo aulas comparado com essa parte inicial.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
#include <stdio.h>
#include <conio.h>

int main (){
    int a, b, c, d, e;

    printf ("Digite um valor: ");
    scanf ("%d", &a);
    printf ("Digite um valor: ");
    scanf ("%d", &b);
    c = a + b;
    printf ("A soma eh %d", c);
    printf ("\n\nDigite um valor: ");
    scanf ("%d", &d);
    e = c - d;
    printf ("A subtracao eh %d", e);

getch ();
return (0);
}

Vídeo:

C/C++: (char e string) Dado informado pelo usuário. Aula 03

Programação C/C++: Aula 03, dado informado pelo usuário (caractere e string).

Nesse vídeo vemos como programar algo para que o usuário insira um caractere apenas, ou uma string (palavra ou frase).

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:

#include <stdio.h>
#include <conio.h>

int main () {
    char byte; /*apenas um caractere*/
    char palavra[10]; /* 10 caracteres eh string*/

    printf ("Digite uma tecla: ");
    scanf ("%c", &byte);
    printf ("Digite uma string: ");
    scanf ("%s", &palavra);

    printf ("\n\nA tecla digitada eh %c ", byte);
    printf ("e a string eh %s.", palavra);

getch ();
return (0);
}

Vídeo:

C/C++: (números) Dado informado pelo usuário. Aula 02

Programação C/C++: Aula 02, dado informado pelo usuário (números).

Nesse vídeo fazemos um programa cujo o usuário insere dois número, o primeiro inteiro e o segundo aceitando casas decimais.
Explicando o que faz o scanf, \n (quebra de linha) e outras peculiaridades sobre quando o usuário digitar a variável.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:
/*Dado informado pelo usuário (número)*/
#include <stdio.h>
#include <conio.h>

int main (){

    int inteiro; /*int, variavel do tipo inteiro*/
    float flutuante; /*float, casas decimais*/
    printf ("Digite um número inteiro: ");
    scanf ("%d", &inteiro);
    /*le o dado fornecido pelo usuário*/
    printf ("Digite um numero: ");
    scanf ("%f", &flutuante);

    printf ("\n\n\nO inteiro eh %d ", inteiro);
    printf ("e o decimal eh %f.", flutuante);

getch ();
return (0);

}

Vídeo:

C/C++: Ola Mundo comentado. Aula 01

C/C++: Ola Mundo comentado. Aula 01

Link para download direto: http://www.bloodshed.net/dev/devcpp.html

Programação C/C++: Aula 01, Ola Mundo comentado.

Nessa vídeo aula vemos o que faz o stdio.h, conio.h, int, main, prontf, return(0), entre outros.
Visto que a frase escrita é dentro de um printf é um argumento (string), e printf uma função.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte:

#include <stdio.h> /*inclui uma biblioteca
de entradas e saidas padronizadas*/
#include <conio.h> /*relacionada a aperto de teclas*/

int main () { /*o main define uma função
essa função será chamada quando o programa for compilado*/
/*o int indica que a função vai retornar um inteiro*/

    printf ("Ola Mundo!!!");
    /*printf é uma função que passa uma string
    entre aspas ("") é o argumento
    nesse caso é a frase: Ola Mundo!!!*/

getch();
return(0);
}

Vídeo:

Pseudo elementos e conteúdo semântico. Vídeo 47 HTML5 CSS3

Nesse vídeo configuro uma das abas do meu projeto adicionando apenas pseudo elementos e conteúdo semântico.
Assim como editar apenas a primeira palavra, ou/e a primeira linha, e transformar os links dessa aba do meu site em conteúdo semântico, conteúdo lido por motores de busca.

não é essencial.

Blog: http://migre.me/oTHEn
Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte (CSS):

.paragrafos p:first-letter {
    font-size: 120%;
}
.paragrafos p:first-line {
    font-style: italic;
}
.paragrafos a:before {
    content: '[';
}
.paragrafos a:after {
    content: ']';
}

vídeo:

terça-feira, 9 de junho de 2015

Pseudo-classes. HTML5 CSS3 aula 46

Pseudo-classes. HTML5 CSS3 aula 46

Nesse vídeo vemos um exemplo de como utilizar pseudo-classes em CSS3 quando queremos configurar apenas o primeiro item de uma lista ou o ultimo.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte (HTML):


<section class="paragrafos">
      <ul>
            <li>No CSS3</li>
            <li>li:first-child {...</li>
            <li>Configura o primeiro item</li>
            <li>li:last-child {..</li>
            <li>configura o ultimo item</li>
            <li>Sem precisar criar uma classe</li>
      </ul>
</section>

Código fonte (CSS):

.paragrafos li:first-child {
    color: blue;
}
.paragrafos li:last-child {
    color: red;
}
Vídeo:

sexta-feira, 5 de junho de 2015

HTML5 CSS3: Aula 45, seletor de negação

HTML5 CSS3: Aula 45, seletor de negação.

Nesse vídeo vemos um exemplo do uso de seletores de negação do CSS3, um exemplo simples porém eficaz, três minúsculos parágrafos para sendo um deles negado na configuração dada a tag em questão.

Código fonte (HTML):

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="negue.css">
</head>
<body>
<p>Qualquer</p>
<p class="negue">texto</p>
<p>qualquer texto</p>
</body>
</html>

Código fonte (CSS):

p:not(.negue) {
color: red;
}

Vídeo:

sábado, 30 de maio de 2015

sexta-feira, 29 de maio de 2015

HTML5 CSS3: Aula 13, header, section e footer (rodapé)

HTML5 CSS3: Aula 13, header, section e footer (rodapé)

Nesse vídeo criamos um documento CSS somente para o rodapé e o cabeçalho, e fazemos o rodapé.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte HTML (em todos documentos HTML):
<head>
...
<link rel="stylesheet" href="pasta/arquivo.css">
</head>
<body>
<header>Olá mundo futuro cabeçalho</header>
<section>Olá mundo futuro dono da página.</section>
<footer id="rodape">
<img src="caminho/pasta/nomedaimagem.seuformatoPNGouJPG">
&copy: Todos direitos reservados Alam Maia.
</footer>
</body>
...

Código fonte (CSS):
#rodape {
color: #777;
margin: 20px 0;
text-align: center;
}
#rodape img {
vertical-align: middle;
width: 40px;
}

Vídeo:

HTML5 CSS3: Aula 11, iniciando um projeto html

HTML5 CSS3: Aula 11, iniciando um projeto html.

Depois de vermos o básico do básico do HTML, estamos mais que preparados para iniciarmos um projeto, seja ele um site de noticias, uma loja online, um imageboard ou um blog, totalmente customizável por você mesmo.

Link: http://www.devmedia.com.br/unicode-conceitos-basicos/25169

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.


<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta encoding="utf-8">
<head>
<body>
<p>Mais informações em breve</p>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<title>Ajuda</title>
<meta encoding="utf-8">
<head>
<body>
<p>Mais informações em breve</p>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<title>Sobre</title>
<meta encoding="utf-8">
<head>
<body>
<p>Mais informações em breve</p>
</body>
</html>

Vídeo:

Aula 10, espaçamento (padding)

HTML5 CSS3: Aula 10, espaçamento (padding).

Nessa aula vemos como utilizar a propriedade padding.
Padding-top espaçamento acima.
A padding-right espaçamento à direita.
A padding-left à esquerda.
A padding-bottom abaixo.
Se você inserir apenas um valor, ele será utilizado em todos os espaçamentos. Se passar dois valores, o primeiro é acima e abaixo e o segundo direita e esquerda. Se passarmos três valores, o primeiro é acima, o segundo é valido para esquerda e direita e o terceiro abaixo. Se passarmos quatro valores seguimos em sentido horário, o primeiro é acima, o segundo direita, o terceiro abaixo e o quarto a esquerda.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar.

Código fonte (HTML):

<!DOCTYPE html>

<html>
<head>
<title>Espaçamento</title>
</head>
<body>
<p>O espaçamento em HTML é feito pela propriedade padding. padding-top "arruma" o espaçamento acima. A padding-right "edita" o espaçamento a direita. A padding-left edita o espaçamento a esquerda. A padding-bottom abaixo. Se você passar apenas um valor, valerá para os quatro lados, se passar dois valores, o primeiro é acima e abaixo, e o segundo, direita ou esqueda. Se passar três valores, o primeiro é acima, o segundo vale a direita e esquerda e o terceiro é abaixo. Se passarmos 4 valores, a gente segue sentido horário, primeiro acima, segundo direita, terceiro abaixo, quarto a esquerda.</p>
</body>
</html>

Código fonte (CSS):
p {
5px 5px 5px 5px;
}

Vídeo:

Aula 09, alinhamento de texto

HTML5 e CSS3: Aula 09, alinhamento de texto.

Nessa aula utilizamos novamente tags de título, só que agora para aprendermos a alinhar nossos textos no HTML via CSS.

Facebook: http://migre.me/oTHD8
Qualquer dúvida, é só comentar .

Código fonte (HTML):

<!DOCTYPE html>

<html>
<head>
<title>Alinhamento de texto</title>
<link rel="stylesheet" href="pasta/arquivo.css">
</head>
<body>
<h1>Texto alinhado a esquerda</h1>
<h2>Texto alinhado a direita</h2>
<h3>Texto centralizado</h3>
<h4>Texto de mais de três linhas para poder reparar no justificado</h4>
</body>
</html>

Código fonte (CSS):

h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
h4 {
text-align: justify;
}

quarta-feira, 13 de maio de 2015

Manipulação de arquivos em C/C++, abrindo um arquivo [tabela]

Tabela de modos de abrir arquivo em C/C++

Fonte: Profº Jairo Francisco de Souza, não tenho mais o link de onde tirei esse material, faz um tempinho que o tenho.

quarta-feira, 1 de abril de 2015

HTML5 CSS3: Aula 27, configuração de uma aba para todas

HTML5 CSS3: Aula 27, configuração de uma aba para todas.

Nessa vídeo aula passamos a configuração do menu (layout) da minha loja, para a aba sobre. Revendo assim a importância do de criar um documento padrão para configurações feitas em mais de uma aba ao mesmo tempo, nesse caso, todas as abas ao mesmo tempo.

Código fonte (sobre.html):
<!DOCTYPE html>

<html>
    <head>
        <title>Sobre</title>
        <meta encoding="utf-8">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/roca.css">
        <link rel="stylesheet" href="css/padrao.css">
        <link rel="stylesheet" href="css/sobre.css">
    </head>
    <body>
        <header>
            <nav class="cabecalho">
                <ul>
                    <li><a href="index.html">home</a></li>
                    <li>/</li>
                    <li><a href="ajuda.html">ajuda</a></li>
                    <li>/</li>
                    <li><a href="sobre.html">Sobre</a></li>
                </ul>
            </nav>
        </header>
        <section>
            <div class="transform">
                <ul>
                    <h3></h3>
                    <li class="uppercase">uppercase</li>
                    <h3></h3>
                    <li class="lowercase">LOWERCASE</li>
                    <h3></h3>
                    <li class="capitalize">capitalize</li>
                    <h3></h3>
                </ul>
            </div>
        </section>
        <section>
            <div class="decoration">
                <ul>
                    <h3></h3>
                    <li class="overline">overline</li>
                    <h3></h3>
                    <li class="underline">underline</li>
                    <h3></h3>
                    <li class="line-through">line-through</li>
                    <h3></h3>
                </ul>
            </div>
        </section>
<section class="paragrafos">
    <p>Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.</p>
    <p>O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visivel do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemnto pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.</p>
</section>
        <footer id="rodape">
            <img src="css/img/001.png">
            © Todos direitos reservados Alam Maia
        </footer>
    </body>
</html>

Código fonte (index.html):
<!DOCTYPE html>

<html>
    <head>
        <title>Home</title>
        <meta encoding="utf-8">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/roca.css">
        <link rel="stylesheet" href="css/padrao.css">
        <link rel="stylesheet" href="css/loja.css">
    </head>
    <body>
        <header>
            <nav class="cabecalho">
                <ul>
                    <li><a href="index.html">home</a></li>
                    <li>/</li>
                    <li><a href="ajuda.html">ajuda</a></li>
                    <li>/</li>
                    <li><a href="sobre.html">Sobre</a></li>
                </ul>
            </nav>
        </header>
        <section>
            <h1>Menu loja</h1>
            <nav class="loja">
                <ul>
                    <h3></h3>
                    <li><a href="#">Canecas</a></li>
                    <h3></h3>
                    <li><a href="#">Camisas</a></li>
                    <h3></h3>
                    <li><a href="#">Bermudas</a></li>
                    <h3></h3>
                </ul>
            </nav>
        </section>
        <footer id="rodape">
            <img src="css/img/001.png">
            © Todos direitos reservados Alam Maia
        </footer>
    </body>
</html>

Código fonte (padrao.css):
body {
    margin-left: 30px;
    margin-right: 30px;
}
body {
    background-color: #363636;
    font-family: Trebuchet, Verdana, sans-serif;
}
header, section, footer, a, li {
    color: #f0ffff;
}
section {
    margin: 10px;
    letter-spacing: 2px; /*espaço entre letras*/
    line-height: 20px; /*altura da linha*/
    word-spacing: 2px; /*espaço entre palavras*/
    text-indent:10px; /*margem da 1ª palavra*/
}
.loja, .transform, .decoration {
    text-transform: uppercase;
    width: 160px;
    font-size: 15px;
}
.loja li, .transform li, .decoration li {
    background-color: #363036;
    padding: 1px 5px;
}
.loja h3, .transform h3, .decoration h3 {
    border-bottom: 5px solid #363636;
}

Código fonte (sobre.css):

.uppercase {
   text-transform: uppercase;
}
.lowercase {
   text-transform: lowercase;
}
.capitalize {
   text-transform: capitalize;
}
.overline {
   text-decoration: overline;
}
.underline {
   text-decoration: underline;
}
.line-through {
   text-decoration: line-through;
}
.paragrafos {
   text-align: justify;
   font-size: 10px;
   font-weight: bold;
}
.transform {
   float: right;
   margin-bottom: 10px;
}
.decoration {
   float: right;
   clear: right;
}

Código fonte (loja.css):
.loja a {
    text-decoration: none;
}
.loja {
    float: left;
    clear: left;
}

sábado, 28 de março de 2015

HTML5 CSS3: Aula 24, posicionando elementos utilizando clear e float

HTML5 CSS3: Aula 24, posicionando elementos utilizando clear e float.

Dando sequencia a vídeo aula anterior, estamos posicionando os elementos da aba sobre do nosso projeto (site). Agora utilizando as propriedades float e clear.

Com a propriedade float você indica onde deve se posicionar o elemento em em questão, como por exemplo, a direita da página ou a esquerda (right ou left respectivamente).

Já a propriedade clear, serve para dizer que nenhum elemento estará "flutuando" ao lado do elemento em questão. Por exemplo, no exemplo abaixo eu estou dizendo que nenhum outro elemento estará ao lado direito da classe "exemplo".

.exemplo {

float: right;

clear: right;

}

Posicionando assim o elemento em questão, utilizando as propriedades float e clear juntas (igual no exemplo acima) é certeza que o elemento em questão, que pode ser o menu lateral de um blog, sempre estará a direita. Já no exemplo abaixo, eu digo que o elemento estará posicionado no lado esquerdo e, a sua esquerda, não poderá flutuar nenhum elemento a esquerda, assim como o menu de algumas lojas.

.exemplo {

float: left;

clear: left;

}

Código fonte CSS (dessa aula) sobre.css:

.paragrafos {

text-align: justify;

font-size: 10px;

font-weight: bold;

}

.transform {

float: right;

}

.decoration {

float: right;

clear: right;

}

Código fonte CSS (dessa aula) roca.css:

#rodape {

[...]

clear: both;

}

A propriedade clear, quando acompanhada do valor both, impede que elementos flutuem de ambos os lados.

quinta-feira, 26 de março de 2015

HTML5 CSS3: Aula 23, position (relative, absolute, fixed e static)

Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.

O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visível do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemento pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.

Código fonte HTML (dessa vídeo aula):

<section class="paragrafos">
<p>Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.</p>
<p>O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visivel do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemnto pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.</p>
</section>

Código fonte CSS (sobre.css):

.paragrafos {
    text-align: justify;
    font-size: 10px;
    width: 1000px;
    font-weight: bold;
}
.transform {
    position: absolute;
    top: 50px;
    right: 30px;
}
.decoration {
    position: absolute;
    top: 130px;
    right: 30px;
}

<! Código fonte exclusivo do documento padrao.css>

[...]

word-spacing: 2px; /*espaço entre palavras*/

[...]

terça-feira, 24 de março de 2015

HTML5 CSS3: Aula 22, div, classes (class) width height na pratica

HTML5 CSS3: Aula 22, div, classes (class,) width e height na pratica.

Como dito a alguns vídeos antes, agora coloco em pratica no projeto o conhecimento adquirido fora dele.
Como já vimos temos duas section em nossa aba sobre, cada uma recebeu uma div com uma classe e assim podemos começar a padronizar nossa aba sobre.

Código fonte HTML (dessa aula).

        <section>
            <div class="transform">
                [...]
            </div>
        </section>
        <section>
            <div class="decoration">
                [...]
            </div>
        </section>

Código fonte CSS (dessa aula):
div, .transform, .decoration {
    width : 150px;
    height: 60px;
    border: 1px double #777;
    text-align: center;
}

segunda-feira, 23 de março de 2015

Elementos em cascata (div e inherit). HTML5 e CSS3 aula 21

HTML5 CSS3: Aula 21, cascata (div e inherit)

Nesse vídeo vemos exemplos de tags que recebem o valor da tags pai e de tags que não recebem o valor da tag pai. E o exemplo de quando a tag não recebe o valor da tag pai é feito por uma imagem, para podermos ver a diferença.
E fica uma pergunta no meio do vídeo.

Código fonte HTML:

<!DOCTYPE html>

<html>
    <head>
        <title>cascata</title>
        <link rel="stylesheet" href="css/cascatacss.css">
    </head>
    <body>
        <dl>
        <dt>cascata</dt>
            <dd>h1, p1, h2...</dd>
        <dt>Não são em cascata</dt>
            <dd>width, height, margin, padding, img</dd>
        </dl>

        <div>
            <img src="css/imgcss/0389.png">
        </div>
    </body>
</html>

Código fonte CSS:

div {
    border: 1px double blue;
    width: 50px;
    height: 50px;
}
div img {
    widht: inherit;
    height: inherit;
}

domingo, 22 de março de 2015

HTML5 CSS3: Aula 20, espaçamento de texto

HTML5 CSS3: Aula 20, configurando o espaçamento de texto.

Nesse caso eu configurei a section, mas é indicado você criar uma configuração para todo o body (corpo do seu site).

Código fonte CSS:
section {
    margin: 10px;
    letter-spacing: 2px; /*espaço entre letras*/
    line-height: 20px; /*altura da linha*/
    word-spacing: 5px; /*espaço entre palavras*/
    text-indent:10px; /*margem da 1ª palavra*/
}

sexta-feira, 13 de março de 2015

Aula 08, negrito, itálico e sublinhado (no HTML e no CSS)

HTML5 e CSS3: Aula 08, negrito, itálico e sublinhado (no HTML e no CSS).

Nesse vídeo vemos como inserir sublinhado, itálico ou/e negrito via HTML e via CSS.

Código fonte HTML:

<!DOCTYPE html>

<html>
   <head>
       <title>Aula 8</title>
       <link rel="stylesheet" href="css/nis.css">
</head>
<body>

<p>Texto em negrito: <b>Texto em negrito</b></p>
    <p>Texto em italico: <i>Texto em italico</i></p>
    <p>Texto sublinhado: <u>Texto sublinhado</u> </p>
<p id="negrito">Texto em negrito</p>
    <p id="italico">Texto em italico</p>
<p id="sublinhado">Texto sublinhado</p>

</body>
</html>

Código fonte CSS:

#negrito {
    font-weight: bold;
}
#italico {
    font-style: italic;
}
#sublinhado {
    text-decoration: underline;
}

segunda-feira, 9 de março de 2015

HTML5 e CSS3: Aula 12, resetando a configuração padrão de navegadores

A seguir temos o documento do Eric Meyer que reseta as configurações dos navegadores, assim sua página realmente terá o mesmo padrão.
A partir da linha de baixo, copie tudo e salve em um documento .css (inclusive os comentários).

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*http://meyerweb.com/eric/tools/css/reset/*/

sexta-feira, 6 de março de 2015

HTML5 e CSS3: Aula 05, editando imagens

HTML5 e CSS3: Aula 05, editando imagens.
Nesse vídeo demonstro adicionar legenda, deixar ela em itálico, mudar a cor do fundo, adicionar borda, tirar a imagem do centro, corrigir o espaçamento entre a imagem e a borda da página, adicionar tamanho fixo entre a legenda e a imagem.

Tags utilizadas: figure, figcaption, img e utilizado ID no html.

Código fonte html:

<!DOCTYPE html>

<html>
<head>
<link rel ="stylesheet" href="css/bordas.css">
</head>
<body>
<figure id="qualquerid">
<img src="css/imgcss/0218.jpg">
<figcaption>Legenda</figcaption>
</figure>
</body>
</html>

Código fonte CSS:
figure{
background-coloR: #F2EDED;
border: 1px solid #111111;
text-align: center;
}
figcaption {
font-style: italic;
}
figure {
padding: 5px;
}
#qualquerid {
float: left;
margin: 10px;
}
figcaption {
margin-top: 10px;
}

HTML5 e CSS3: Aula 02. Título, imagem e tags filhos

Neste Vídeo vemos o uso da tag h1, como inserir imagens, breve explicação de tag pai e filho.
Tag p abre um paragrafo.
Durante essa vídeo aula você vê o uso de legenda para imagens, motores de busca como o Google e Bing leem essa legenda.
Identando (endentando ou indentando) o código.

<!DOCTYPE html>

<html>
   <head>
      <title>Olá Mundo</title>
   </head>
   <body>
      <p>Olá Mundo</p>

      <img src= "img/imagem.jpg" alt= "Legenda da imagem para quando ela não puder abrir">
   </body>

</html>

(Código fonte) HTML5 e CSS3. Aula 01. Triplo Olá Mundo com !DOCTYPE html

<!DOCTYPE html>

<h1>Olá Mundo.</h1>
<p>Olá Mundo</p>

Olá Mundo.
Olá Mundo.

Qual é a senha salva?

Mini tutorial mostra como ver uma senha salva em algum navegador, como por exemplo, senhas salvas do facebook, google+, tumblr, dentre outros lugares que também salvam senhas em seu navegador. Ou nesse caso, no navegador do seu "amigo".

1º Passo: Selecione o campo senha;

2º Passo: Clique com o botão direito do mouse sobre a senha selecionada;

3º Passo: Selecione a opção "Inspecionar elemento";

4º Passo: Abriu uma janela com um código fonte;

5º Passo: Se a senha não está selecionada, selecione-a novamente;

6º Passo: Na javela do código estará selecionada a linha que corresponde a senha;

7º Passo: Mude type="password" para type="txt";

8º Passo: Clique em qualquer lugar e olhe a senha;

Qualquer dúvida é só perguntar.

Link do vídeo: https://www.youtube.com/watch?v=ffugup1AciE

Download, instalando e utilizando torrent.

Download, instalando e utilizando torrent.

1º Passo: Baixe uma ferramenta de torrent:
Link: http://www.utorrent.com/
2º Passo: Instale;
3º Passo: Se você já tem uma ferramenta .torrent vá em abrir documento torrent (ou algo similar) no menu suspenso para iniciar o download;
4º Passo: Existem sites para baixar documentos via torrent, aqui vai um dos mais populares:
Link: http://thepiratebay.se

Link do vídeo: https://www.youtube.com/watch?v=zukqAteTNLY

Como utilizar a rede TOR (deep web) no Firefox ou Chrome.

Como utilizar a rede TOR (deep web) no Firefox ou Chrome.
Configurando seu navegador (Firefox ou Chrome) para utilizar a rede TOR (deep web).

1º Passo: Baixe o TOR;
https://www.torproject.org/download/download-easy.html.en

2º Passo: Depois de pronto, vá para a pasta Tor Browser e depois na pasta TOR;
3º Passo: De um duplo clique no aplicativo Tor;
4º Passo: Botão esquerdo do mouse no complemento FoxyProxy Standart;
5º Passo: Clique em adicionar novo proxy;
6º Passo: Insira o IP: 127.0.0.1 e a porta: 9050;
7º Passo: Na aba geral insira um nome e se quiser edite a cor;
8º Passo: Na aba Detalhes do Proxy habilite a opção Proxy SOCKSem Socks 5;
9º Passo: Feche as duas janelas do FoxyProxy Standart;
10º Passo: Botão direito do mouse no FoxyProxy Standart;
11º Passo: Clique na rede que acabou de configurar;
12º Passo: Utilize o link a seguir para ver onde se localiza o proxy que você utiliza:
http://ip.proxy.lc/
13º Passo: Caso queira utilizar a deep web aqui vai um link criptografado de um motor de busca:
http://xmh57jrzrnw6insl.onion/

Qualquer dúvida é só perguntar.

Link do vídeo: https://www.youtube.com/watch?v=JFEYsn6xvXU

quinta-feira, 5 de março de 2015

Como utilizar proxy no Firefox ou Chrome

Lista de proxy: http://www.samair.ru/proxy/
Link para ver de onde é seu proxy: http://ip.proxy.lc/
Neste caso foi utilizado o FoxyProxy Standart, para instalar este complemento em seu navegador vá a loja do navegador que você usa.

1º Passo: Com o botão esquerdo do mouse você clica no ícone do complemento;
2º Passo: Adicionar novo proxy;
3º Passo: Insere o número do IP escolhido e a porta (a porta são os quatro números depois dos ":");
4º Passo: Mude de aba e vá para a aba chamada Geral, lá insira um nome (pode ser o nome do país onde está o proxy por exemplo);
5º Passo: Feche as duas janelas do FoxyProxy;
6º Passo: Clique com o botão Direito do mouse no ícone do complemento;
7º Passo: Escolha o proxy que acabou de criar;

Quando quiser parar de usar o proxy clique no botão direito do mouse no ícone do complemento e selecione a opção "Desabilitar FoxyProxy completamente".

Link do vídeo: http://youtu.be/HPOFrPVJflo.

Baixar vídeos do Facebook (Grupos secretos e fechados).

Baixar vídeos do Facebook (Grupos secretos e fechados).

Links:
Vídeo Publico: http://www.fbdown.net/index.php?error=1

Vídeo Privado:http://www.fbdown.net/private-downloader.php

Em vídeos de grupos privados digite ctrl+U copie o código fonte e cole no espaço identificado do segundo link.

Link do Vídeo: http://youtu.be/9fUMZpB8Zrs

Baixar vídeos do YouTube Mp3 ou Mp4 sem programas.

Baixar vídeos do YouTube Mp3 ou Mp4 sem programas.
Links:
http://youtubeinmp3.com/

http://youtubeinmp4.com

Link do vídeo demonstrativo: http://youtu.be/uH2X0e4u0RE

quarta-feira, 18 de fevereiro de 2015

HTML e CSS: Aula 03. Cores e imagens no background

Tabela de cores HTML.

Fonte: http://www.linhadecodigo.com.br/artigo/3574/codigo-cor-infografico-dos-codigos-das-cores-em-html.aspx

Tabela de símbolos HTML.

denominação	código	resultado
letra grega alfa (alpha)	α	α
letra grega beta (beta)	β	β
letra grega gama (gamma)	γ	γ
letra grega gama maiúscula	&Gamma	Γ
letra grega delta (delta)	δ	δ
letra grega delta maiúscula	Δ	Δ
letra grega epsilon (epsilon)	ε	ε
letra grega teta (theta)	θ	θ
letra grega teta maiúscula	Θ	Θ
letra grega lambda (lambda)	λ	λ
letra grega lambda maiúscula	Λ	Λ
letra grega mi (mu)	μ	μ
letra grega ni (nu)	ν	ν
letra grega qui (xi)	ξ	ξ
letra grega pi (pi)	π	π
letra grega sigma (sigma)	σ	σ
letra grega sigma maiúscula	Σ	Σ
letra grega tau (tau)	τ	τ
letra grega fi (phi)	φ	φ
letra grega fi maiúscula	Φ	Φ
letra grega psi (psi)	ψ	ψ
letra grega psi maiúscula	Ψ	Ψ
letra grega ômega (omega)	ω	ω
letra grega ômega maiúscula	Ω	Ω
flecha para a esquerda (leftwards arrow)	←	←
flecha para cima (upwards arrow)	↑	↑
flecha para a direita (rightwards arrow)	→	→
flecha para baixo (downwards arrow)	↓	↓
implica que	⇒	⇒
equivale a	⇔	⇔
qualquer que seja (for all)	∀	∀
operador de derivada parcial (partial diferential)	∂	∂
existe (exist)	∃	∃
operador nabla	∇	∇
pertence a (is in)	∈	∈
contém (in invertido)	&ni;	∋
soma (sum)	∑	∑
sinal de raiz (radical sign)	√	√
proporcional a	&prop;	∝
infinito	∞	∞
ângulo	&ang;	∠
e lógico ou cunha (logical e or wedge)	&and;	∧
ou lógico (or)	&or;	∨
intersecção	∩	∩
união	∪	∪
integral	∫	∫
portanto (therefore)	&there4;	∴
diferente (not equal)	≠	≠
por definição (identical or equivalent)	&equiv;	≡
menor que	<	<
maior que	>	>
et = & (ampersand)	&	&
subconjunto de	⊂	⊂
superconjunto de	⊃	⊃
subconjunto (com igual)	&sube;	⊆
superconjunto (com igua)	&supe;	⊇
perpendicular a	&perp;	⊥
aspa simples esquerda (left simple quotation)	‘	‘
aspa simples direita (right simple quotation)	’	’
aspas duplas esquerdas	“	“
aspas duplas direitas	”	”
adaga (dagger)	&dagger;	†
adaga dupla	&Dagger;	‡
por milhar	&permil;	‰
aspa angular esquerda	&lsaquo;	‹
aspa angular direita	&rsaquo;	›
não lógico	¬	¬
libra (pound)	£	£
yen	¥	¥
sinal de seção (section)	§	§
copyright	©	©
marca registrada (trade mark)	®	®
grau (degree)	°	°
mais ou menos (plus-minus sign)	±	±
ao quadrado	²	²
ao cubo	³	³
micro	µ	µ
sinal de parágrafo	¶	¶
um quarto	¼	¼
um meio	½	½
três quartos	¾	¾
símbolo de vezes (times)	×	×
símbolo de dividir	÷	÷
conjunto vazio ou o cortado (o slash)	Ø	Ø
conjunto vazio minúsculo	ø	ø

Fonte: http://www.ime.unicamp.br/~marcio/hpteia/html/sbolos.html.

HTML5 e CSS3: Aula 03, cores e imagens no background.
Nessa vídeo aula utilizamos as tags h1, h2 e p. Inserida uma cor diferente em cada tag e também inserida uma imagem de fundo na página inteira repetidas vezes.
O intuito dessa aula é ver como funciona essa inserção.

Código fonte do documento HTML:

<!DOCTYPE html>

<html>
<head>
<title>Página</title>
<link rel="stylesheet" href="css/cssaula3.css">
</head>
<body>
<h1>Primeiro título</h1>
<p>Qualquer frase com mais de 5 palavras.</p>
<h2>Segundo Título</h2>
<p>Qualquer frase com mais de 5 palavras que seja diferente da tag <p> anterior.</p>
</body>
</html>

Código fonte do documento CSS:
h1 {
background-color: yellow;
}
h2 {
background-color: red;
}
p {
background-color: gold;
}

body {
background: url(pastadaimagem/imagem.png);
}