Web Designer - Capítulo 1 - Site básico

Categoria:

Aqui no blog ensinarei melhor sobre a criação de websites através de códigos que podem ser usados até na simplicidade do bloco de notas. Nesse capítulo, aprenderemos melhor sobre o básico, como fontes ou colocar imagens, músicas, vídeos e cores no site, além de outros efeitos. Primeiramente abra o bloco de notas (iniciar-programas-acessórios-bloco de notas), crie também uma pasta específica para seu site.

Iniciando o website

Ao abrir o bloco de notas faça o seguinte código:


Conceito: você sempre deve iniciar o código com Html, as barras "<" e ">" também são indispensáveis, dentro delas haverá o código que não deve ser em maiúscula nem conter acentos. O código Head deve vir em seguida e para fechar cada cógido deverá usar a barra "/". Onde está escrito "Jogos" acima substitua pelo título do site que quiser.

Bgcolor: é o código usado dentro de body que sugere a cor de fundo da página, você pode ver que a cor escolhida foi "azure" assim você deve escrever o nome da cor que quer em inglês para decirdir a cor de fundo, veja aqui as cores e lembre-se de digitar o nome não o código "#".

Marquee: são efeitos de texto, caso deixe-o comum a palavra (s) irá se mover ao longo da tela em horizontal, porém tem outros modos. Você pode adicionar
"behavior=slide" assim o texto se move a margem esquerda e para.

Font: esse comando ajusta a letra usada, size seria o tamanho que pode variar de 1 até 7, a cor da fonte seria "color" e você pode olhar na tabela passada mais acima, e "style" seria o tipo de letra, podendo ser uma das seguintes: arial, verdana, impact, tahoma, arial black, comic sans ms, monotype corsiva.

O conteúdo do Site

Prossiga com o código:


Conceito: você pode utilizar efeitos durante o texto, sempre fechando como você pode observar. Por exemplo se eu coloco "u" eu ativei o sublinhado, colocando "/u" estarei desativando esse efeito. B seria negrito, I seria itálico e U seria sublinhado. No código Html não funciona a tecla "enter", para dar espaço você deve usar o código "BR" um para uma linha e dois para pular um espaço maior.

Acrescentando itens

Novamente use "br" caso queira e prossiga:


Conceito: para dar certo essa parte, você deve salvar uma imagem com o nome "jogos.jpg" ou qual você quiser (desde que tenha o .JPG) e colocar na pasta exclusiva do seu site, também salvará uma música que seja .MP3 e colocará na mesma pasta e ainda um vídeo .WMV e colocá-lo na pasta exclusiva (vídeos podem ser baixados com o Realplayer por exemplo).

Img Src: é o comando utilizado para se colocar imagens no site, height e Width ajustam a altura e largura da imagem.

Embed Src: para colocar vídeos ou músicas no site, com tela de vídeo, para músicas sem essa tela pode ser usado "bgsound".

Alinhando: em seus textos, imagens ou outros itens variados você pode utilizar o comando: center, justify, left ou right. Estes comandos ajustam a posição do parágrafo.

Finalizando o capítulo


Quando terminar tudo, você deverá salvar na pasta específica, nomeie o arquivo usando no final .html (por exemplo site.html) sem espaços ou letras maiúsculas. Em seguida abra a pasta e procure o seu site pelo nome, quando encontrar clique com botão direito sobre o mesmo e coloque a opção "Abrir com" e é bom utilizar "Internet Explorer". Abrirá então seu site, caso algo dê errado reveja os códigos e tente encontrar o problema.

É normal aparecer uma barra de bloqueio, nesse caso permita o conteúdo bloqueado de seu site. Ao visualizar o seu site não estará na internet, estará apenas salvo em seu computador, ao passar dos capítulos abrangeremos a publicação do site. Alguns comandos podem ser bem úteis, CTRL-S para salvar o site no bloco de notas após ter sido salvo uma vez pelo menos e F5 para atualizar o site no Internet Explorer, para ver assim se você concertou algum erro por exemplo.

Próximo capítulo: fazendo tabelas com o HTML.

0 comentários:

Postar um comentário

▲ Topo