constru o de sites aula 1 - departamento de informática · estrutura da internet html a linguagem...

Estrutura da InternetHTML a Linguagem de Marcao

Construcao de sites

Aula 1

Programa Instrutor

Universidade Federal do Parana

Pro-reitoria de Assuntos Estudantis

Departamento de Informatica

31 de Julho de 2010

Programa Instrutor Construcao de sitesAula 1


Indice

1 Estrutura da Internet

2 HTML a Linguagem de Marcao



Estrutura da Internet

A internet esta organizada num sistema de cliente/servidorque e o seguinte:




Interface de comunicacao

Protocolo e a forma do computador do usuariocomunicar-se com o servidor.

E dentro dos principais protocolos temos :

http - acesso de sites;

ftp - acesso a servidor para transferencia de arquivo;

ip - endereco de maquinas ou sites na rede.

dns - traduz um nome para um endereco de ip, porexemplo :Ao digitar www.google.com no navegador o dnstraduz nonome do site para o endereco ip 173.194.33.104.




Interface entre usuario e servidor

Navegador e o programa responsavel por fazer interface entreo usuario e a aplicacao web do servidor.

Interface com as aplicacoes web do servidor

Servidor de aplicacao sao softwares que disponibilizam umambiente para funcionar certas aplicacoes, comopor exemplo : j2ee, .net e outras;



Plugins

Pacotes para execucao de tarefas especıficas;

Visualizacao de figuras;

Visualizacao de vıdeos;

Criptografia de email’s;



O que e HTML?

HTML (HyperText Markup Language - Linguagem deMarcacao de Hipertexto).

Considerada a base de todas as outras linguagens dedesenvolvimento de projetos para WEB.

Permite compartilhar fotos, vıdeos, musicas, textos emuitas outras coisas.* Primeira linguagem no setor. Usada amplamente ate osdias atuais.



Conhecendo a Linguagem de Marcao HTML

Uma pagina basica em HTML e um arquivo de textosimples contendo o texto da pagina e os comandosHTML que definem a formatacao dela.

Os comandos sao indicados entre os marcadoreschamados TAG que vem entre os sımbolos de < e >.

A maioria das TAGs e usada em pares, ou seja, voce abree fecha uma TAG.



O que sao TAGs

TAGs sao praticamente marcadores, sao eles que determinamo local e o que vai ser colocado na pagina.

Quando voce abre alguma TAG como, por exemplo, aTAG <BODY> voce precisara fecha-la, repetindo a TAGassim: </BODY>.

A TAG com barra (/) significa que se esta fechando a queesta sem barra.



Codigo inicial

Figura: codigo htmlPrograma Instrutor Construcao de sitesAula 1


TAG <HTML > e <HEAD>

HTML : indica que voce iniciou o arquivo HTML que vaiser interpretado pelo browser.

HEAD (cabeca): Como pelo propio nome, significa quevoce iniciou o cabecalho.



TAG <TITLE> e <BODY> e <p>

TITLE (titulo): deve ser usada dentro do cabecalho< HEAD >, serve para colocar tıtulo na pagina. E aquelafrase que aparece na barrinha do navegador quando apagina esta aberta.

BODY (corpo): indica que se iniciou o corpo da pagina.E dentro desta TAGs que vai boa parte das TAGutilizadas para fazer uma pagina.

p: indica o inicio de um paragrafo.



Estrutura basica HTML

Temos que um documento html e dividido em duas partesprincipais que sao o cabecalho(HEAD) e o corpo(BODY).

Elementos do HEAD

No cabecalho de um documento HTML traz informacoes sobrea pagina e temos os seguintes elementos:

<title> define o tıtulo da pagina.

<style> define formatacao em CSS.

<script> usado para linkar scripts, como o javascript.

<link> usado para se referir a arquivos externos.

<meta> define propriedades da pagina como codificacao,autor, palavras chave e outros.



Exemplos dos elementos do HEAD




Exemplo do meta

<html><head>

<title>Pagina de Exemplo</title></head>

<body><h1>Construcao de sites</h1> <br>Exemplo de decodificacao da pagina do site.

</body></html>




Exemplo do meta

<html><head>

<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8”>

<title>Pagina de Exemplo</title></head>

<body><h1>Construcao de sites</h1> <br>Exemplo de decodificacao da pagina do site.

</body></html>




A tag meta ainda pode ser usada para :

Palavras Chave

< meta name = ”keywords”content = ”Aula, HTML”/>

Descricao da Pagina

< meta name = ”description”content = ”Curso de HTML,CSS e Javascript”/>

Apesar de essas informacoes nao serem visıveis ao usuario, elassao usadas para buscar paginas nas internet.



Estrutura basica HTML

Elementos do Body

E aonde usamos tags para moldarmos a pagina e abaixo segueum exemplos de tag para isso:

<h1>, . . ., <h6> usados para tıtulos, h1 o maior e h6 omenor;

<div> determina uma divisao na pagina, usado paraformatacao;

<font> altera a formatacao da fonte, cor e tamanho;

<img> coloca uma imagem na pagina;

<a> cria um hiperlink;



Exemplo dos elementos do Body

A tag h1 ate h6 serve para definir cabecalho apenas, e saousadas pelos sistemas de busca.

Criando Cabecalhos

<html><body>

<h1>Aula 1</h1> <br><h2>Aula 1</h2> <br><h3>Aula 1</h3> <br><h4>Aula 1</h4> <br><h5>Aula 1</h5> <br><h6>Aula 1</h6> <br>

</body></html>



Exemplos dos elementos do Body




Podemos usar a tag <font> para formatar texto em html.

Sintaxe da tag <font>

<font face = ”verdana”size = ”3”color = ”red”>texto vaiaqui</font>

E alem disso temos outras tags de formatacao como:

<b> texto em negrito.

<i> texto em italico.

<u> texto sublinhado.<small> texto pegueno.

<big> texto grande.




Formtando texto<html>

<body><font size = ”8”face = ”arial”color = ”red”>Texo

Vermelho</font><font size = ”8”color = ”blue”><u><b> Texo Azul

</b></u></font><br><small>texto pequeno</small><big>texto grande</big>

</body></html>




Para colocarmos links na nossa pagina usamos a tag <a>.E para criarmos um link para um novo documento e utilizadoo atributo href.

Sintaxe da tag <a>

<a href = ”http://www.inf.ufpr.br/instrutores”>BolsistasInstrutores</a>




Criando links

<html><body>

<a href =”http://www.inf.ufpr.br/instrutores”>BolsistasInstrutores</a>

</body></html>




Agora vamos criar um link com tag <a> para criarmos umhiperlink.E para isso vamos usar o atributo name.

Sintaxe da tag <a>

<a name = ”destino”>Destino do hiperlink</a><a href = ”#destino”>Ir para a hiperlink dentro dapagina</a>




Para esse exemplo sera necessario ver o funcionamento nonavegador.

Criando links

<html><body>

<a name = ”destino”>Destino do hiperlink</a><hr space = 1000><a href = ”#destino”>Ir para a hiperlink dentro

da pagina</a></body>

</html>




Podemos criar listas usando as tags <ul> e <ol> da seguinteforma :

Sintaxe da tag <ul>

<ul><li>Item A</li><li>Item B</li></ul>

Sintaxe da tag <ol>

<ol><li>Primeiro</li><li>Segundo</li></ol>




Criando listas

<html><body>

<ul><li>Item A</li><li>Item B</li>

</ul><ol>

<li>Primeiro</li><li>Segundo</li>

</ol></body>

</html>


constru o de sites aula 1 - departamento de informática · estrutura da internet html a linguagem...

Documents