ESSE SITE CHAMA-SE CÓDIGO-FONTE, DESCOBRI NO BLOG DO DIEGO.
ENSINA O COMEÇO, BASICÃO DO HTML.
PARA ENTRAR, CLIQUE AQUI
<HTML>
<HEAD>
<TITLE>A minha primeira página</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=2> <! Aqui começa a Tabela>
<tr><! Aqui Começa uma linha>
<td>Célula1</td>
<td>Célula2</td>
<td>Célula3</td>
</tr><! Aqui termina uma linha>
<tr><! Aqui Começa outra linha>
<td>Frase 1</td>
<td>Frase 2</td>
<td>Frase 3</td>
</tr><! Fim da outra linha>
</table><! Fim da Tabela>
</body>
</html>
Tags são comandos que serão interpretados pelo browser(navegador web).
A maioria das tags devem ter inicio e fim.
Exemplo:
Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáveis pela
chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de
comandos específicos da linguagem.
TÍTULO: É o texto que aparece na barra de título do browser.
Considerações sobre o título:
1. Você poderá ter apenas um título
2. texto deverá ser simples e não poderá ter outras tags
3. Escolha um texto curto e que descreva o conteúdo da página
OBS- Mecanismos de buscas, na Internet, utilizam os elementos <title> e </title> para um título na apresentação do resultado da procura. Se o diagramador não insere um título na sua página HTML, o mecanismo de busca define o título com o endereço da página, ou seja, a URL da página.
IMAGEM: São figuras, desenhos e fotos usados para ilustrar a página.
TEXTO: É a informação mais comum dentro da página. Pode ser formatado através de vários comandos.
LINK: É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar da Internet.
Uma figura também pode ser usada como um link, ou seja, clicando na figura saltamos para outro local.
CABEÇALHO: São linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabeçalho.
Existem programas como o Dreamweaver, FrontPage, WebEditor...entre outros.
Todos são editores de HTML
Porém, no ínicio do aprendizado sempre utilizamos o bloco de notas.
Basta salvar o arquivo como .htm ou .html
HTML – Hyper Text Markup Language ou Linguagem de Marcação com Hipertexto, é uma linguagem que possibilita a criação de páginas web.
Não podemos dizer então que HTML seja uma linguagem de programação.
FONTE: IMASTERS.COM
HOME PAGE
- c/ margem = 760 x 420
- s/ margem = 780 x 440
- Full screen = 800 x 600
A maioria das pessoas associam Design unicamente ao projeto gráfico de um WebSite, o que é um erro.
O conceito de Web Design envolve todos os aspectos da construção de um site, desde o desenho de sua estrutura
de navegação e forma de disponibilização da informação até o desenvolvimento do projeto gráfico.
A construção de um Website deve, antes de mais nada, ser entendida como um projeto, composto de fases e desenvolvido por pessoas de backgrounds diferentes.
TAMANHOS PRÉ-DEFINIDOS:
A disposição de imagens, textos, vídeos, etc. Tudo que você deseja colocar em sua página precisa ser colocado
de forma agradável ao leitor. Daí abordarmos, de forma geral, a diagramação. Esta palavra vêm do mundo dos
impressos. Trata-se da disposição de elementos que compõem uma página.
Deve ser observado o tamanho das fontes, disposição das imagens, forma como o texto será apresentado, etc.
Uma boa diagramação também garante o retorno do internauta.
1. Coloque cada tópico em uma página, mas se tiver um grande número de tópicos, a manutenção e
vinculação pode se tornar maçante.
2. Defina bem a forma de navegação entre as páginas. Se houver formas alternativas, torne a
navegação para os leitores a mais intuitiva possível.
3. Tome cuidado com o que será incluindo na home page, lembre-se, ela será a porta da sua
apresentação.
4. Tenha sempre em mente seus objetivos. Procure não se distanciar deles.
A próxima etapa do planejamento do seu site na Web consiste em determinar o conteúdo que será apresentado em cada uma das páginas e criar alguns vínculos simples que possibilitem a navegação por essas páginas. O StoryBoard de uma apresentação é um conceito emprestado do cinema, em que cada cena e tomada de câmera é esboçada na ordem em que ocorre no filme. O storyboard fornece uma estrutura e um plano global para o filme, que permitem que o diretor e sua equipe tenham uma idéia clara de onde cada tomada se encaixa no filme. O uso de storyboard, uma técnica cinematográfica, consiste no processo de criação de um resumo com sketh (rascunho) da aparência final do seu trabalho antes de você efetivamente pôr em prática suas idéias. O uso de storyboard ajuda-o a visualizar o site como um todo e a prever sua forma
final. Esta técnica fornece um esboço geral de como a página irá ficar quando estiver pronta, indicando os tópicos que serão incluídos em cada página, os vínculos básicos e talvez até mesmo uma idéia conceitual do tipo de imagens gráficas que você usará e onde elas serão apresentadas. No caso de grande documentação, o storyboard deverá ser dividido em áreas e cada equipe cuidará da parte que lhe cabe. Para estruturas muito pequenas talvez não seja necessário criar um storyboard.
final. Esta técnica fornece um esboço geral de como a página irá ficar quando estiver pronta, indicando os tópicos que serão incluídos em cada página, os vínculos básicos e talvez até mesmo uma idéia conceitual do tipo de imagens gráficas que você usará e onde elas serão apresentadas. No caso de grande documentação, o storyboard deverá ser dividido em áreas e cada equipe cuidará da parte que lhe cabe. Para estruturas muito pequenas talvez não seja necessário criar um storyboard.
Serve para especificar a localização de páginas e arquivos em diretórios de servidores da Web .
Uma URL é composta por duas partes principais . A primeira é o protocolo Internet do documento , a segunda parte é o endereço do servidor e da página.
A SINTAXE É :
PROTOCOLO: //SERVIDOR . INSTITUIÇÃO / ARQUIVO
ONDE:
Protocolo: É o tipo de servidor que está sendo acessado;
Servidor: É o computador que contém a página ;
Instituição é o tipo a qual esse computador pertence ( Comercial ,Internet Publica , Militar etc. ) ;
Arquivo: É o caminho do arquivo.
Esse endereço pode ser especificado diretamente na linha de URL do Browser , para acessar diretamente a página INDEX.HTM , ou então dentro de um link de um documento HTML , através do A HREF que cria uma ligação , um link para o URL :
TIMASTER
Protocolo de transferência de arquivos é o serviço básico de transferências de arquivos na rede . Com a devida permissão , é possível copiar um arquivo de um computador a distância para o seu computador ou transferir um arquivo do seu computador para um computador remoto , para tanto , você deve ter permissão de acesso ao computador remoto .
Antes as restrições para transferência de arquivos foi criado o "FTP Anônimo" para facilitar o acesso de usuários de todo mundo a determinadas máquinas que mantém enormes repositórios de informação. Não é necessário uma permissão de acesso . O usuário irá identificar-se como Anonymous quando o sistema requisitar o "log-in".
Antes as restrições para transferência de arquivos foi criado o "FTP Anônimo" para facilitar o acesso de usuários de todo mundo a determinadas máquinas que mantém enormes repositórios de informação. Não é necessário uma permissão de acesso . O usuário irá identificar-se como Anonymous quando o sistema requisitar o "log-in".
A World-Wide Web (também chamada Web ou WWW) é, termos gerais, a interface gráfica da Internet. Ela é um sistema de informações organizado de maneira a englobar todos os outros sistemas de informação disponíveis na Internet.
Sua idéia básica é criar um mundo de informações sem fronteiras, prevendo as seguintes características:
- Interface consistente;
- Incorporação de um vasto conjunto de tecnologias e tipos de documentos;
- Leitura Universal.
Para isso, implementa três ferramentas importantes:
- um protocolo de transmissão de dados - HTTP;
- um sistema de endereçamento próprio - URL;
- uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML.
Sua idéia básica é criar um mundo de informações sem fronteiras, prevendo as seguintes características:
- Interface consistente;
- Incorporação de um vasto conjunto de tecnologias e tipos de documentos;
- Leitura Universal.
Para isso, implementa três ferramentas importantes:
- um protocolo de transmissão de dados - HTTP;
- um sistema de endereçamento próprio - URL;
- uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML.
Para que o contéudo de um HTML possa ser formatado e exibido na internet, devemos usar um programa chamado navegador, ou browser. Ele lê o conteúdo do arquivo, interpreta os comandos e exibe sua página.
O browser funciona independente de se estar conectado à internet. A melhor forma de trabalhar desenvolvendo uma página HTML é off-line, desconectado.
Primeiro você cria as páginas em seu computador e as testa por meio do browser. Depois deve colocá-las em um servidor Web para que as outras pessoas também possam visualizá-las.
Cada equipamento de hardware tem seus programas próprios para seu funcionamento. Além do software associado ao hardware para conexão à Internet, é preciso ter pelo menos um browser (navegador) para se poder visitar os sites disponíveis.
Exemplos de browser (navegador): Netscape, Internet Explorer, Opera, Mozilla.
Internet é a "grande rede mundial de computadores". Entretanto, essa definição não é exata. Na realidade, Internet é "o conjunto de diversas redes de computadores que se comunicam através dos protocolos TCP/IP"
As redes de computadores existem há mais de vinte anos e são utilizadas por milhões de pessoas em todo o mundo. A primeira rede , ARPANET, que na sua origem conectava centros militares e de pesquisas, foi utilizada por alguns cientistas de computação para obter acesso a computadores, compartilhar arquivos e enviar mensagens eletrônicas. Hoje em dia ,cientistas, engenheiros professores, estudantes, bibliotecários, médicos, homens de negócios, políticos e até crianças, o utilizam para receber jornais eletrônicos, ter acesso a "Bulletins boards"(BBS – Visto mais adiante) , consultar bases de dados e utilizam, remotamente, vários equipamentos.
Atualmente, dentro da comunicação global, a informação disponível na INTERNET ultrapassa os limites físicos, políticos e as estruturas econômicas de todas as partes do planeta, transformando-se em um fórum universal que independente de raça ,profissão ou idade, disponibiliza informações das mais variadas para todos que se ligam a rede. A ARPANET "foi aposentada" em 1990 , a CSNET deixou de existir em 1991 e a INTERNET continua crescendo incontrolavelmente. Hoje, ela engloba mais de 5000 redes espalhadas em 145 países espalhados pelos 5 continentes. Estima-se um crescimento de 10% ao mês e um intercâmbio de mais de 15 milhões de mensagens entre a INTERNET e todas as demais redes conectadas.A INTERNET começou a ser utilizada no Brasil, em meados de 89/90, somente por Instituições de pesquisas e um pouco depois por Universidades, permanecendo , assim , até o final de 1995, quando a exploração comercial teve início.
Atualmente, dentro da comunicação global, a informação disponível na INTERNET ultrapassa os limites físicos, políticos e as estruturas econômicas de todas as partes do planeta, transformando-se em um fórum universal que independente de raça ,profissão ou idade, disponibiliza informações das mais variadas para todos que se ligam a rede. A ARPANET "foi aposentada" em 1990 , a CSNET deixou de existir em 1991 e a INTERNET continua crescendo incontrolavelmente. Hoje, ela engloba mais de 5000 redes espalhadas em 145 países espalhados pelos 5 continentes. Estima-se um crescimento de 10% ao mês e um intercâmbio de mais de 15 milhões de mensagens entre a INTERNET e todas as demais redes conectadas.A INTERNET começou a ser utilizada no Brasil, em meados de 89/90, somente por Instituições de pesquisas e um pouco depois por Universidades, permanecendo , assim , até o final de 1995, quando a exploração comercial teve início.
ESSE MATERIAL SERÁ USADO AO LONGO DO PERÍODO PARA ESTA MATÉRIA:
- tinta guache
- pincel
- canson
- crepon - A3
- lápis comum e 6B para desenho
- cartolina preta e branca
- recicláveis: jornal, revista, pets diversas, etc
Registro é o "nome" do meu site (seria o futuro endereço), para isso eu posso me cadastrar por exemplo na Registro BR.
- COM
- BR
EXEMPLOS DE DOMÍNIOS:
.com / .br / .org / .gov / .edu / .adv
www.globo.com
www.submarino.com.br
www.escolinhadefutebol.org.br
www.receitafederal.gov.br
www.escoladeletras.edu.br
www.lilianazevedo.adv.br
DICA: hostbarato.com.br - R$ 1,99 (esse é o nome e também o endereço do site)
http: protocolo de transferência de hipertexto (download);
FTP: protocolo de transferência de arquivo (upload).
1- O site é hospedado em um servidor web;
2- Eu tenho um provedor x
3- Eu quero buscar o site... http://www.lala.com
4-TEndo o endereço eu consigo buscar a página onde ela está hospedada.
1) Qual TAG inicia um código HTML a fim de fazer com que o navegador interprete que esta sendo desenvolvido uma página de hipertexto?
<html> </html>
2) Faça o código HTML que realiza a inserção de um texto na barra de título do navegador.
<html>
<head>
<title> </title>
</head>
3) Escreva o código HTML que será capaz de inserir uma barra, onde terá os seguintes atributos: tamanho 4 e largura 40% em relação a página.
<hr size="4" width="40%">
4) Escreva o código (TAG) que fará um link para a página index2.html
<a href="index2.html">clique aqui</a>
5) Escreva o código (TAG) que fará um link para o endereço www.uol.com.br
<a href="www.uol.com.br">UOL<a>
6) Escreva o código (TAG) que fará um link com imagem para o endereço www.uol.com.br
<a href="http://www.uol.com.br"><img src="imagem.jpg"></a>
7) Escreva o código (TAG) que terá o seguinte resultado:
Lista de Portais
- UOL
- TERRA
- IG
<LI>UOL
<LI>TERRA
<LI>IG
</Ol>
8) Escreva o código (TAG) que insere uma imagem.
<img src="imagem.jpg">
9) Escreva o código (TAG) que fará com que o texto fique com a seguinte formatação.
Negrito, Azul, Tamanho 2, Arial Narrow
<b><font color="blue" size "2" face "arial narrow">jardineira</font></b>10) Escreva o código (TAG) que coloca o plano de fundo com imagem.
<body background="imagem.jpg">
11) Escreva o código (TAG) que coloca o plano de fundo com cor.
<body bgcolor="blue">
- Conceitos Web
- HTML
- Dream Weaver
Anotações:
www - world wide web
hipertexto - contém links
PROFª JOELMA
