Construção de sites Aula 1 Programa Instrutor Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 31 de Julho de 2010
Indice Estrutura da Internet 1 Estrutura da Internet 2
Estrutura da Internet A internet está organizada num sistema de cliente/servidor que é o seguinte:
Estrutura da Internet Interface de comunicação Protocolo é a forma do computador do usuário comunicar-se com o servidor. E dentro dos principais protocolos temos : http - acesso de sites; ftp - acesso a servidor para transferência de arquivo; ip - endereço de máquinas ou sites na rede. dns - traduz um nome para um endereço de ip, por exemplo : Ao digitar www.google.com no navegador o dnstraduz no nome do site para o endereço ip 173.194.33.104.
Estrutura da Internet Interface entre usuário e servidor Navegador é o programa responsável por fazer interface entre o usuário e a aplicação web do servidor. Interface com as aplicações web do servidor Servidor de aplicação são softwares que disponibilizam um ambiente para funcionar certas aplicações, como por exemplo : j2ee,.net e outras;
Plugins Estrutura da Internet Pacotes para execução de tarefas específicas; Visualização de figuras; Visualização de vídeos; Criptografia de email s;
O que é HTML? HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto). Considerada a base de todas as outras linguagens de desenvolvimento de projetos para WEB. Permite compartilhar fotos, vídeos, músicas, textos e muitas outras coisas. * Primeira linguagem no setor. Usada amplamente até os dias atuais.
Conhecendo a Linguagem de Marção HTML Uma página básica em HTML é um arquivo de texto simples contendo o texto da página e os comandos HTML que definem a formatação dela. Os comandos são indicados entre os marcadores chamados TAG que vem entre os símbolos de < e >. A maioria das TAGs é usada em pares, ou seja, você abre e fecha uma TAG.
O que são TAGs TAGs são praticamente marcadores, são eles que determinam o local e o que vai ser colocado na pagina. Quando você abre alguma TAG como, por exemplo, a TAG <BODY> você precisará fechá-la, repetindo a TAG assim: </BODY>. A TAG com barra (/) significa que se está fechando a que está sem barra.
Código inicial Programa Figura: Instrutorcodigo Construção html de sitesaula 1
TAG <HTML > e <HEAD> HTML : indica que voce iniciou o arquivo HTML que vai ser interpretado pelo browser. HEAD (cabeça): Como pelo propio nome, significa que voce iniciou o cabeçalho.
TAG <TITLE> e <BODY> e <p> TITLE (titulo): deve ser usada dentro do cabeçalho < HEAD >, serve para colocar título na página. É aquela frase que aparece na barrinha do navegador quando a página está aberta. BODY (corpo): indica que se iniciou o corpo da página. É dentro desta TAGs que vai boa parte das TAG utilizadas para fazer uma página. p: indica o inicio de um parágrafo.
Estrutura básica HTML Temos que um documento html é dividido em duas partes principais que são o cabeçalho(head) e o corpo(body). Elementos do HEAD No cabeçalho de um documento HTML traz informações sobre a página e temos os seguintes elementos: <title> define o título da página. <style> define formatação em CSS. <script> usado para linkar scripts, como o javascript. <link> usado para se referir a arquivos externos. <meta> define propriedades da página como codificação, autor, palavras chave e outros.
Exemplos dos elementos do HEAD
Exemplos dos elementos do HEAD Exemplo do meta <html> <head> <title>página de Exemplo</title> </head> <body> <h1>construção de sites</h1> <br> Exemplo de decodificação da página do site. </body> </html>
Exemplos dos elementos do HEAD Exemplo do meta <html> <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 > <title>página de Exemplo</title> </head> <body> <h1>construção de sites</h1> <br> Exemplo de decodificação da página do site. </body> </html>
Exemplos dos elementos do HEAD
Exemplos dos elementos do HEAD A tag meta ainda pode ser usada para : Palavras Chave < meta name = keywords content = Aula, HTML /> Descrição da Página < meta name = description content = Curso de HTML, CSS e Javascript /> Apesar de essas informações não serem visíveis ao usuário, elas são usadas para buscar páginas nas internet.
Estrutura básica HTML Elementos do Body É aonde usamos tags para moldarmos a página e abaixo segue um exemplos de tag para isso: <h1>,..., <h6> usados para títulos, h1 o maior e h6 o menor; <div> determina uma divisão na página, usado para formatação; <font> altera a formatação da fonte, cor e tamanho; <img> coloca uma imagem na página; <a> cria um hiperlink;
Exemplo dos elementos do Body A tag h1 até h6 serve para definir cabeçalho apenas, e são usadas pelos sistemas de busca. Criando Cabeçalhos <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
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 vai aqui</font> E além disso temos outras tags de formatação como: <b> texto em negrito. <i> texto em itálico. <u> texto sublinhado. <small> texto pegueno. <big> texto grande.
Exemplos dos elementos do Body 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>
Exemplos dos elementos do Body
Exemplos dos elementos do Body Para colocarmos links na nossa página usamos a tag <a>. E para criarmos um link para um novo documento é utilizado o atributo href. Sintaxe da tag <a> <a href = http://www.inf.ufpr.br/instrutores >Bolsistas Instrutores</a>
Exemplos dos elementos do Body Criando links <html> <body> <a href = http://www.inf.ufpr.br/instrutores >Bolsistas Instrutores</a> </body> </html>
Exemplos dos elementos do Body
Exemplos dos elementos do Body Agora vamos criar um link com tag <a> para criarmos um hiperlink. 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 da página</a>
Exemplos dos elementos do Body Para esse exemplo será necessário ver o funcionamento no navegador. Criando links <html> <body> <a name = destino >Destino do hiperlink</a> <hr space = 1000> <a href = #destino >Ir para a hiperlink dentro da página</a> </body> </html>
Exemplos dos elementos do Body Podemos criar listas usando as tags <ul> e <ol> da seguinte forma : 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>
Exemplos dos elementos do Body Criando listas <html> <body> <ul> <li>item A</li> <li>item B</li> </ul> <ol> <li>primeiro</li> <li>segundo</li> </ol> </body> </html>
Exemplos dos elementos do Body