Aula 5 - Estilos

Olá! Tudo Bem?

Hoje galera GW, iremos aprender sobre estilos, que é a forma de deixar "bonitinho" o nosso código Html.

Para tanto temos que ter em mente que o HTML5, tem a característica Semântica como princípio norteador, ou seja, ele só se preocupa com o significado das informações e não mais com a decoração. ficando a cargo desse ponto o CSS.

Portanto, no HTML5 veremos apenas as características semânticas das informações da página, a decoração("ficar bonitinho") ficando a cargo do CSS.

Antigamente utilizaríamos o CSS dentro das TAGS ou mesmo dentro do Head, para decorar nossa página, hoje, devemos, obrigatoriamente, utilizar uma folha de estilo(stylesheet), linkada à página, para decorarmos.

como faremos isso?

TAG <Link>

A TAG LINK é utilizada para definirmos relacionamentos entre páginas e objetos, por exemplo: Folha de Estilos(CSS), Bibliotecas(JQERY) e Funções(JS).

Como utilizamos:

e a Tag Link tem os seguintes Métodos Obrigatórios:

Onde o html tem que definir cada um para o relacionamento interpáginas ser realizado.

observação:

no Método Media, que defini a plataforma, a plataforma em questão será onde o site estar sendo carregado, se é em um computador de mesa, ou um dispositivo móvel(celular e tablet) ou uma TV e etc.. e isso será definido por você programador web, ou seja, nós iremos definir como o site irá abrir em diferentes plataformas.

Agora clique no link abaixo para iniciar o seu aprendizado sobre CSS

Curso de CSS

Boa Sorte!

Mais informações »

Aula 4 - Ancora e Divisão

Olá! Tudo bem?

Agora iremos aprender a colocar âncoras em nosso site, opa o que será Âncora. pois bem:

Âncoras para o HTML são pontos fixo em um site, são locais específicos que destinamos.

Ancoragem Interna:

Destinada a locais específicos em uma página

por exemplo

"Voltar ao Topo", "Ir para o Rodapé" e etc..

Ancoragem Externa

Locais específicos fora da página, que nós chamamos de Navegação

Exemplo:

"Menu de um site"

Na linguagem HTML utilizamos a TAG "<a></a>" para definir uma âncora. e ela deve conter os seguintes métodos:

href é o endereço que estamos buscando

target é a forma como irá abrir 

pode ser:

  _blank abrirá em uma nova janela em branco

  _top abrirá na mesma janela que estar aberta

  _self abrira na mesma janela, só que em uma guia nova

alt é o texto alternativo que aparecerá em alguns browseres

 agora faça no menu do seu site, siga o modelo abaixo:

o menu deverá ficar assim:

Agora iremos trabalhar com divisões

Divisões

O nosso site estar quase pronto, para finalizá-lo temos que informar para o browser as divisões que nele tem, para tanto temos que pensar como será disposto o nosso site, o desenho de como ele ficará, para o nosso modelo iremos fazer o seguinte:

Cada parte do site deverá, obrigatoriamente estar inserida em uma divisão, somente assim poderemos, através do CSS, deixar o site desta forma.

Para tanto iremos utilizar a TAG <div></div>, e ela deverá conter o método id para podermos identificar sua localização.

Para começarmos, temos que fazer o seguinte modelo:

Agora iremos adicionar os conteúdos que já criamos

No HEARDER,  uma imagem que ficara no topo, como se fosse a capa no facebook

deverá ficar assim:

agora o menu:

deverá ficar assim:

agora o lado esquerdo(LEFT):

Deverá ficar assim:

Agora o CONTAINER2, é nele que estar contido duas divisões, a CENTRAL e A RIGHT, então vejamos:
CONTAINER2>CENTRAL

Ficará assim:

Agora a parte direita(Right)

ficará assim:

Agora o Footer-link, este também será um container, só que terá 3 coluna, veja:

Ficará assim:
  

e por fim, o Footer(rodapé), vejamos:

ficará assim:

Agora é só repetir o passo a passo com as informações do seu site.

Boa Sorte!

Mais informações »

Aula 3 - Menu e Conteúdo

Olá! Tudo bem?

Hoje iremos aprender como trabalhar com Menu, o que mudou e como podemos trabalhar com essa nova TAG "<nav>"

No html5 existe a característica semântica, ou seja, temos que dá significado a todas as informações, e não vai ser diferente no Menu do nosso site, temos que informar ao browser que aquela é um menu e que tipo ele é.

A TAG responsável por isso é <nav></nav>, faça o exemplo a seguir:

e dentro desse <nav> que colocamos as informações do Menu, como por exemplo:

um título para dar a característica semântica

agora iremos colocar as informações

Listas

que podem ser:

• Listas Ordenadas(Order List)
• <OL></OL>

• Listas Não Ordenadas(Unorder List)
• <ul></ul>

Então, no caso iremos utilizar uma lista não ordenada<ul>, faça o exemplo abaixo, veja:

pronto o nosso Menu já tem a característica semântica e já tem a lista de páginas que iremos criar para o nosso site.

Obs: não se importe com a aparência que o menu ficou, pois para deixa-lo bonitinho, iremos utilizar o CSS, mais isso é uma outra história.

Conteúdo para o Site

Continuando nossa aula, agora iremos adicionar conteúdo ao nosso site, lembre-se sempre tem que haver a característica semântica, para tanto, sempre começamos com os Títulos(headeres) 

Então vamos padronizar nossas postagens, vamos sempre colocar da seguinte forma:

Um Título Principal<h1>

Um Título Secundário<h2>

Uma imagem

e Um Parágrafo para exemplificar

Padronizando o seu Site fica com características profissionais e melhor de se navegar.

Vamos Trabalhar?

Agora seguindo o exemplo acima faça 8 postagens com assuntos relevantes para o seu site, lembre de seguir a padronização, neste momento não é necessário colocar imagens, pois isso será objeto da nossa próxima aula

Boa Sorte!

Mais informações »

Aula 2 - Titulação Semântica

Olá! Tudo Bem?

A nova linguagem HTML5, traz uma característica diferenciada das anteriores, ela traz a SEMÂNTICA à programação, ou seja, agora as TAG's tem característica semânticas importante para o desempenho da linguagem, exemplo:

Agora os Sites de Pesquisa(Google) para localizarem algum conteúdo, é necessário o entendimento semântico para tal.

Se eu quiser procurar o conteúdo ANDROID, os Browser's irão procurar apenas nas características semânticas dos sites, por exemplo: dentro dos Títulos(Heading's); Imagens(Img) e etc..

Feito isso, iniciaremos o nosso Conteúdo agora:

Titulação(Headng's)

Usamos a tag "h" para dividir nosso conteúdo em graus de importância, e é o conteúdo que caracteriza o valor semântico para a pesquisa web.

Ela se divide em seis níveis hierárquicos de importância, veja:

e é estabelecido da seguinte maneira:

Conteúdo da Página

Agora precisamos aprender a postar conteúdo e a melhor TAG para tal é a "p" que define parágrafos em uma página, tal qual um documento, em  página devemos dividir o conteúdo em parágrafos para melhor leitura e visualização, além de facilitar a pesquisa semântica dos browser's.
Esta TAG funciona assim:
Primeiro faça a seguinte modificação:

Salve e visualize o resultado:

Isso ocorre porque o código HTML não reconhece espaços em branco. Portanto, não importa o espaço que deixarmos entre uma palava e outra ou entre uma linha e outra, pois o máximo que irá acontecer será uma palavra ficar separada da outra.

Parágrafo

Para a criação de parágrafos é definida pela tag P. Cada tag P deve conter abertura e fechamento para indicar onde termina o parágrafo. veja:

Salve e visualize:

Note que agora aparece a separação entre os parágrafos e já há um entendimento semântico.

a Tag P tem algumas característica chamadas de métodos, veja:

Faça o exemplo:

Veja o resultado:

Quebra de Linha

A quebra de linha é usada apenas para mudar um determinado ponto do parágrafo de linha. Isso acarreta uma diferença na visualização. Volte o exemplo anterior

Se prestarmos atenção, há um grande espaço deixado entre uma linha e outra do parágrafo, porque são dois parágrafos diferentes. Mas se quisermos criar um parágrafo com duas linhas, obrigatoriamente, usaremos a quebra de linha que é identificado pela tag BR.

agora aplique as quebras de linha:

veja o resultado:

Veja a diferença entre os espaçamentos

Tarefa:

Procure conteúdos para o seu site, como:

• Produtos
• Serviços
• Entrevistas
• Reportagens
• etc...

A idéia é que o nosso site fique tenha 9 conteúdos diferentes, veja:

Boa Sorte!

Mais informações »

Aula 1 - Primeiros passos

Olá! Tudo bem?

Iremos agora começar a parte Web do nosso curso, Iremos aprender a linguagem principal da internet HTML.

Para tanto assista o vídeo a seguir, que é de um professor bacana que explica direitinho como surgiu e evoluiu a internet:

Então, agora já sabemos como surgiu e evoluiu a Internet, e para começarmos a trabalhar, precisaremos do programa, clique no link abaixo para baixar e instalar-lo

Após baixar e instalar aparecerá uma interface assim:

Html 5 Como funciona?

A linguagem HTML (Linguagem de Marcação de Hiper Texto) é baseada em comandos lineares chamados de TAG's(significa Comando) e a exposição linear das mesmas formam as páginas, toda a Tag tem que estar entre os sinais de maior "<" e menor ">", igual ao exemplo abaixo:

Existe uma divisão de importância nas TAG's, ou seja, algumas são consideradas obrigatórias e outras não:

Tag's Obrigatórias

Neste caso temos as Tags de abertura da função e as Tag's de fechamento da função(contém uma "/")

Tag's importantíssimas, sem elas não podemos fazer uma página, veja o exemplo:

Vamos praticar!

Projeto Final - Feira de Exposição

Vocês, alunos GW, formarão equipes com no Máximo 3 alunos e no Mínimo 2.

Irão criar uma empresa, exemplo:

• Camisas Personalizadas
• Carros
• Celulares
• Jogos
• Hardware
• Moda
• etc..

Onde, utilizando o conteúdo ministrado em sala de aula até agora, deverá ser produzido os seguintes:

• Site da empresa
• Banner
• Camisa
• Folheto
• Cartão de visita

Para tanto, temos que ter em mente que o processo de criação de um Site passa pelo seguinte esquema:

Construção do Site:

Temos que criar uma pasta, na unidade C:, com o nome da empresa veja a imagem:

e dentro iremos criar as seguintes:

Agora abra o Notepad++ e Salve o arquivo criado com o nome de index.html, veja:

e começaremos com o básico de uma página:

Mais informações »