Disciplina: Tópicos Avançados de TI Unidade IV: Desenvolvimento para a WWW Prof.: Mario Filho E-mail: [email protected] Período: 7º. SIG - ADM Encontro 11 12. Linguagem HTML; 13. Hospedagem na WWW. 12. Linguagem HTML 12.1. O que é HTML? A sigla HTML deriva da expressão Hyper Text Markup Language (Linguagem de Marcação Hipertexto). Trata-se de uma linguagem de marcação utilizada para produzir páginas na Internet. Esses códigos podem ser interpretados pelos Navegadores (browsers) para exibir as páginas da World Wide Web. Prof. Mario Filho 12.2. Exemplo Prático 1 O Bloco de Notas do Windows serve para criar arquivos sem formatação e será muito útil para o nosso primeiro exemplo. Abram o bloco de notas do Windows e digite o conteúdo do próximo slide... Prof. Mario Filho <html> <head> <title>Primeira Aula de HTML</title> </head> <body> Olá, Mundo! </body> </html> Prof. Mario Filho 12.2. Exemplo Prático 1 Salve na Área de Trabalho o arquivo criado no Bloco de Notas como a extensão .html. Ex.: pg1.html Atenção: use sempre letras minúsculas para dar nome aos arquivos. Feche o Bloco de Notas e dê dois cliques sobre o arquivo salvo na Área de Trabalho e veja o que acontece. Prof. Mario Filho 12.2. Exemplo Prático 2 Abra um site qualquer na Web; Faça os comandos abaixo conforme o navegador que estiver usando: Internet Explorer: Exibir / Código-Fonte Firefox: Exibir / Código-fonte ou (Ctrl +U) Será aberta uma janela com a linguagem HTML da página. Prof. Mario Filho 12.3. Tag A base da linguagem HTML é a tag (etiqueta ou marca em português) e todo documento (arquivo) HTML apresenta etiquetas ou marcas. Tags, etiquetas ou marcas, são elementos entre parênteses angulares (chevron) “<” e “>”. Ex.: Prof. Mario Filho <etiqueta>...</etiqueta> 12.3. Tag A tag principal ou mais famosa de um documento HTML é a <html>, que serve para criar o documento. Toda tag possui abertura e fechamento: <html> tag de abertura (onde começa o documento) </html> tag de fechamento (onde termina o documento) Prof. Mario Filho 12.3. Tag Outras duas áreas muito importantes marcadas por tags e que estão localizadas dentro da tag <html> são: <html> <head> área da cabeçalho </head> <body> área do corpo </body> </html> Prof. Mario Filho 12.3. Tag A área <head></head>: possui informações sobre o cabeçalho da página ou documento, definindo configurações. Ex.: A área <body></body>: contém informações sobre o corpo da página. Ex.: <title>Primeira Aula de HTML</title> Olá, Mundo! Observem novamente a estrutura... Prof. Mario Filho <html> <head> <title>Primeira Aula de HTML</title> CABEÇALHO </head> <body> Olá, Mundo! CORPO </body> </html> DOCUMENTO HTML Prof. Mario Filho 13. Hospedagem na WWW 13.1. Hospedagem (hosting) Para que o mundo inteiro possa ver a página que você criou, é necessário que o arquivo HTML criado esteja hospedado (armazenado) em algum servidor (host) na Internet. Prof. Mario Filho 13.2. Servidor Escolhido: http://www.xpg.com.br/ Prof. Mario Filho Prof. Mario Filho Prof. Mario Filho Prof. Mario Filho Prof. Mario Filho Abra seu e-mail e ative a conta: Prof. Mario Filho Prof. Mario Filho Prof. Mario Filho 13.3. Acessando por FTP Usaremos o FTP para enviarmos nosso arquivo para o host (servidor). Abra o Windows Explorer; Coloque em “Endereço:”: ftp://ftp.xpg.com.br/ Aparecerá uma tela de login, use seu login e senha criados no XPG. Após entrar na pasta onde seus arquivos serão hospedados, é só copiar e colar um ou mais arquivos para o host. Prof. Mario Filho Prof. Mario Filho 13.4. Acessando por FTP Web Basta clicar na opção indicada no próximo slide... Prof. Mario Filho Prof. Mario Filho Observação: “index.html” é o nome padrão do primeira arquivo que deverá ser aberto quando um visitante digitar seu endereço em um navegador. É o arquivo com a HOME PAGE do site! Se quiser transformar a página pg1.html para a home page do site, renomeie o arquivo para index.html. Prof. Mario Filho 13.5. Visualizando a página Agora para visualizar sua página na WWW, basta digitar o endereço dela em um navegador. Ex.: Prof. Mario Filho www.mariozinhom.xpg.com.br Prof. Mario Filho Próxima Aula Editores HTML Prof. Mario Filho FIM
Download
