Mostrando postagens com marcador Web-Aula. Mostrar todas as postagens
Mostrando postagens com marcador Web-Aula. Mostrar todas as postagens
quarta-feira, 19 de janeiro de 2011
HTML - Referências e HTML5
Passei o basicão do html nos primeiros posts, neste, neste e neste aqui.
Antes de prosseguir gostaria de passar algumas referências na web para desenvolvimento de sites. Serve para mim também claro =D
W3Schools - Tutorial HTML (em inglês)
HTML.net
Apostilando - HTML
Guanabara.info - Curso HTML ou no Youtube
About.com - 8 Cheap and Easy Ways to Learn HTML (em inglês)
Ou digite na busca do google: curso, tutorial, aprender, html, gratuito, gratis, de graça, sem pagar nada, for free.
HTML5
Nesta semana saiu o logo do html5, veja >aqui no site do W3C. Para saber mais sobre, acesse o site W3C.br, aqui veja a documentação do html5 e neste link do W3C Schools, para aprender sobre o html5.
Algumas tags que caíram em desuso, ou que eram mal utilizadas, foram retiradas da estrutura e outras novas foram colocadas. Nem todos os navegadores suportam algumas das novas tags, então por isso fica difícil dizer qual é o momento exato de fazer o seu site usando o html5. Mas uma coisa é fato, aprender o quanto antes é melhor, daí só esperar o mercado se atualizar e você estará preparado o/
Aqui da para saber o que alguns navegadores suportam do html5.
Este artigo (de 2009) do site Infowester fala sobre o html5.
[]s.
Postado por
Ricardo Filho
às
17:17
0
comentários
Enviar por e-mailPostar no blog!Compartilhar no XCompartilhar no FacebookCompartilhar com o Pinterest


terça-feira, 4 de janeiro de 2011
HTML III - Atributos e Valores
Atributos
Os atributos servem para adicionar mais conteúdo as tags HTML.
Os atributos são especificados na tag inicial, e os valores são seguidos de = (igual) e ficam entre " " (aspas duplas).
No exemplo 1 criamos um link para o meu blog. A tag é a letra 'a', o atributo é o 'href' e o valor é o link do blog.
No exemplo 2, a tag 'a' tem dois atributos: href e target. O 'target' diz aonde este link será aberto e seu valor 'blank' faz com que ele seja aberto em uma nova janela ou aba do navegador.
Para saber quais atributos podem ser atribuídos a uma tag e quais valores estas tags podem assumir, só olhar aqui no W3Schools, que há uma lista com todas as tags, e dentro de cada uma as listas de atributos.
Antes que eu esqueça, é bom saber inglês OU usar o Google Chrome OU senão quiser largar do seu Firefox, pode usar este add-on.
Neste exemplo acima, eu sem criatividade nenhuma fiz uma tabela <table> com uma linha <tr> e uma coluna <td>, mais três traços <hr />, usei uma palavra em negrito <b>, e a palavra google usei com link <a>.
Valores
. Repare que a tabela tem 20% de comprimento (width) em relação ao documento. Já o traço vermelho e azul tem 50% em relação a tabela. Se o traço estivesse fora da tabela, seria 50% do comprimento do documento;
Pode-se colocar os valores sem ser em porcentagem. Algumas formas aceitas são: polegadas (in), pixels (px), milimetros (mm), centímetros (cm).
. Usei cores nas linhas, mas esqueça o que viu. Esta não é a forma aconselhada de inserir cores em um documento HTML _ quando souber o que é CSS vai entender a razão;
Mas já que falei de cores, este link tem todos os códigos da tabela de cores;
A forma usada de inserir cores é esta: #RRGGBB, onde Red, Green e Blue. Estes número são hexadecimais (base 16) e vão de 0 até F (0,1,2...9, A, B, C... F);
Este é o branco: #FFFFFF; este é o vermelho #FF0000; este é o verde #00FF00; este é o azul #0000FF e este é o preto #000000. As outras cores é só ir combinando.
. Cada atributo tem seus próprios valores e isso também tem que ser pesquisado. No Dreamweaver, ele sugere quais atributos podem ser adicionados na tag e quais os valores podem assumir os atributos.
Fuçar no link W3Schools é algo que aconselho muito. Eu só estou pincelando o assunto, tem muito mais coisas para se ver.
That's all folks o/
Os atributos servem para adicionar mais conteúdo as tags HTML.
Os atributos são especificados na tag inicial, e os valores são seguidos de = (igual) e ficam entre " " (aspas duplas).
Estrutura:Exemplo1: Link do Blog Exemplo2: Link do Blog
No exemplo 1 criamos um link para o meu blog. A tag é a letra 'a', o atributo é o 'href' e o valor é o link do blog.
No exemplo 2, a tag 'a' tem dois atributos: href e target. O 'target' diz aonde este link será aberto e seu valor 'blank' faz com que ele seja aberto em uma nova janela ou aba do navegador.
Para saber quais atributos podem ser atribuídos a uma tag e quais valores estas tags podem assumir, só olhar aqui no W3Schools, que há uma lista com todas as tags, e dentro de cada uma as listas de atributos.
Antes que eu esqueça, é bom saber inglês OU usar o Google Chrome OU senão quiser largar do seu Firefox, pode usar este add-on.
Neste exemplo acima, eu sem criatividade nenhuma fiz uma tabela <table> com uma linha <tr> e uma coluna <td>, mais três traços <hr />, usei uma palavra em negrito <b>, e a palavra google usei com link <a>.
Valores
. Repare que a tabela tem 20% de comprimento (width) em relação ao documento. Já o traço vermelho e azul tem 50% em relação a tabela. Se o traço estivesse fora da tabela, seria 50% do comprimento do documento;
Pode-se colocar os valores sem ser em porcentagem. Algumas formas aceitas são: polegadas (in), pixels (px), milimetros (mm), centímetros (cm).
. Usei cores nas linhas, mas esqueça o que viu. Esta não é a forma aconselhada de inserir cores em um documento HTML _ quando souber o que é CSS vai entender a razão;
Mas já que falei de cores, este link tem todos os códigos da tabela de cores;
A forma usada de inserir cores é esta: #RRGGBB, onde Red, Green e Blue. Estes número são hexadecimais (base 16) e vão de 0 até F (0,1,2...9, A, B, C... F);
Este é o branco: #FFFFFF; este é o vermelho #FF0000; este é o verde #00FF00; este é o azul #0000FF e este é o preto #000000. As outras cores é só ir combinando.
. Cada atributo tem seus próprios valores e isso também tem que ser pesquisado. No Dreamweaver, ele sugere quais atributos podem ser adicionados na tag e quais os valores podem assumir os atributos.
Fuçar no link W3Schools é algo que aconselho muito. Eu só estou pincelando o assunto, tem muito mais coisas para se ver.
That's all folks o/
Postado por
Ricardo Filho
às
17:57
0
comentários
Enviar por e-mailPostar no blog!Compartilhar no XCompartilhar no FacebookCompartilhar com o Pinterest


terça-feira, 28 de dezembro de 2010
HTML II - Mostrando na tela
No primeiro post passei rapidão pelo html, agora vou detalhar um pouco mais.
Mostrando na tela
Para o navegador saber que se trata de um documento html deve-se começar com a tag <html> e não esquecer de fechar no final do documento com </html>
No cabeçalho <head> ficam as instruções especiais, elas não são mostradas na página. Dentre elas o <title> que é o texto que fica na barra de título (em vermelho na imagem abaixo)

Existem mais tags que podem ser colocadas no cabeçalho, mas não falarei delas agora.
Tudo que é mostrado na página deve ficar entre as tags <body> e </body>. Só não será mostrado ao menos que esteja dentro das tags de comentário <!-- comentário qualquer --> que servem para fazer um comentário =D
As tags de comentário são úteis para descrever o que uma parte específica do código está fazendo _ se assim o programador desejar. O que vai na tag não é mostrado na tela, perceba que no dreamweaver ele fica até cinza claro na parte do código, e na parte de design nada é mostrado.
Segue exemplo de um documento html feito no dreamweaver:

Importante
* A última tag a ser aberta é a primeira a ser fechada: <html> <head> </head> <body> </body> </html>
* Não esquecer de fechar as tags para não gerar erros no documento. Algumas não precisam ser fechadas, mas evite deixá-las abertas, pois a versão 5 do HTML não irá permitir tags sem fechamento;
* Existem as chamadas tags vazias, como o <br> que não possui uma tag de fechamento. Nestes casos a tag é fechada dentro da própria tag de abertura, desta forma: <br /> ;
* O HTML não é caso sensitivo (não diferencia letras minúsculas das maiúsculas nas tags), porém o w3c recomenda que as tags sejam feitas todas em letra minúscula _ vai que eles mudam de idéia.
Se a estrutura e as dicas foram entendidas, daqui para frente é só moleza (mentira uhahauha).
Crie as estruturas básicas acima (pode ser em um bloco de notas) coloque um texto qualquer, salve como aulas.html e depois abra em um navegador para ver como ficou.
Bis Bald,
[]s
Mostrando na tela
Para o navegador saber que se trata de um documento html deve-se começar com a tag <html> e não esquecer de fechar no final do documento com </html>
No cabeçalho <head> ficam as instruções especiais, elas não são mostradas na página. Dentre elas o <title> que é o texto que fica na barra de título (em vermelho na imagem abaixo)
Existem mais tags que podem ser colocadas no cabeçalho, mas não falarei delas agora.
Tudo que é mostrado na página deve ficar entre as tags <body> e </body>. Só não será mostrado ao menos que esteja dentro das tags de comentário <!-- comentário qualquer --> que servem para fazer um comentário =D
As tags de comentário são úteis para descrever o que uma parte específica do código está fazendo _ se assim o programador desejar. O que vai na tag não é mostrado na tela, perceba que no dreamweaver ele fica até cinza claro na parte do código, e na parte de design nada é mostrado.
Segue exemplo de um documento html feito no dreamweaver:
Importante
* A última tag a ser aberta é a primeira a ser fechada: <html> <head> </head> <body> </body> </html>
* Não esquecer de fechar as tags para não gerar erros no documento. Algumas não precisam ser fechadas, mas evite deixá-las abertas, pois a versão 5 do HTML não irá permitir tags sem fechamento;
* Existem as chamadas tags vazias, como o <br> que não possui uma tag de fechamento. Nestes casos a tag é fechada dentro da própria tag de abertura, desta forma: <br /> ;
* O HTML não é caso sensitivo (não diferencia letras minúsculas das maiúsculas nas tags), porém o w3c recomenda que as tags sejam feitas todas em letra minúscula _ vai que eles mudam de idéia.
Se a estrutura e as dicas foram entendidas, daqui para frente é só moleza (mentira uhahauha).
Crie as estruturas básicas acima (pode ser em um bloco de notas) coloque um texto qualquer, salve como aulas.html e depois abra em um navegador para ver como ficou.
Bis Bald,
[]s
Postado por
Ricardo Filho
às
01:06
0
comentários
Enviar por e-mailPostar no blog!Compartilhar no XCompartilhar no FacebookCompartilhar com o Pinterest


terça-feira, 21 de dezembro de 2010
HTML I - Introdução
Como parte do meu plano de estudo para as férias, vou tentar melhorar em web design e quem sabe mais para frente conseguir ser um webmaster =D
A caminhada é longa, árdua e exige várias horas na frente do Dreamweaver e outras ferramentas de edição. São vários obstáculos: jogar video game, ver seriado, sair para tomar uma breja, sair para conversar com os amigos (e tomar uma breja), namorar (e tomar uma breja), ir para um show de rock ou metal (e tomar uma breja) trabalhar (e tomar uma breja ... é ... nesse caso não pode hehe).
Enfim, segue um resumão das coisas que estudei estes tempos atrás e vou adicionar com coisas novas =D
Eu segui o w3schools para desenvolver este tutorial, então se algo estiver errado a culpa não é minha _ ao menos que eu tenha entendido algo errado, e isso é mais provável =D
HTML, was ist HTML ??
HyperText Markup Language é o que significa HTML. Isso não nos diz muita coisa, não é mesmo ? Então nos importa apenas saber que HTML é uma linguagem de marcação utilizada para produzir páginas na Web, e que podem ser interpretadas por navegadores de internet, tais como: Firefox, Chrome, Opera, Safari, o antigo Netscape e até o Internet Explorer (sim, ele é um web browser).
Existem alguns termos utilizados neste mundo web, eu poderia descrever um por um aqui, mas não vou fazer isso porque simplesmente estou com preguiça, sendo assim, este link aí é do DicWeb, só buscar o que você quer saber por ordem alfabética.
Palavras que eu indico a serem pesquisadas: Web page, home page, site, URL, webdesigner, webmaster, web 2.0, www (world wide web), intranet, IP, DNS, acesso remoto, cookies, servidor.
Tags (etiquetas)
O HTML não é uma linguagem de programação, é uma linguagem de marcação. Ela é interpretada pelos navegadores através da tags (etiquetas).
Tags são palavras-chave cercadas pelos símbolos maior que e menor que (parênteses angulares, chevron) que normalmente vem em pares onde uma inicia e a outra finaliza a tag.
Texto qualquer
Eu sou muito bonito e mentiroso
O texto acima, em html é escrito dessa forma:
Eu sou muito bonito e mentiroso
Neste caso usei as tags <b> e <i> onde a primeira deixou a palavra bonito em negrito e a segunda deixou a palavra mentiroso em itálico.
Uma tag é formada de atributos e valores que modificam a formatação padrão do comando.
textop -> tag parágrafo; align -> atributo para alinhar o texto no parágrafo; center, right, left ou justify -> valores para o alinhamento (centro, direita, esquerda, justificado).
Basicamente o HTML é isso, um documento cheio de etiquetas de formatação onde podem também ser inseridas imagens, videos, sons e diversas formatações de texto além do posicionamento destes elementos no documento (que é o que mais se gasta tempo nas linguagens web).
Estrutura Básica do HTML
<html > </html>
Delimita início e fim do código HTML.
<head> </head>
Delimita cabeçalho de programação de uma página HTML.
<title> </title>
Texto na barra de título do navegador. Tem que ficar dentro do cabeçalho <head>
<body> </body>
Corpo do documento, onde vão todos os elementos a serem exibidos na página.
Delimita início e fim do código HTML.
<head> </head>
Delimita cabeçalho de programação de uma página HTML.
<title> </title>
Texto na barra de título do navegador. Tem que ficar dentro do cabeçalho <head>
<body> </body>
Corpo do documento, onde vão todos os elementos a serem exibidos na página.
Começando ...
Como eu crio um documento HTML ??
Simples.
Abra um bloco de notas (notepad) e salve como extensão .html (Primeiro.html por exemplo) e depois só abrir em um navegador.
Se quiser um notepad mais incrementado, pode usar o Notepad++, só BaixarAki.
Tem também o Adobe DreamWeaver ou o Microsoft FrontPage que são ferramentas profissionais para criação de sites. Estas duas não são Free, então ... vai ter que se virar um pouco para conseguir.
Eu uso o dreamweaver CS3 e o CS4 e não posso reclamar o/
Próximos posts de HTML vou ver o que faço ainda hehe, tem muita coisa para passar, é difícil resumir tanta coisa em poucos posts.
See ya next post
[]s
Postado por
Ricardo Filho
às
14:18
0
comentários
Enviar por e-mailPostar no blog!Compartilhar no XCompartilhar no FacebookCompartilhar com o Pinterest


Assinar:
Postagens (Atom)