Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
aula_01
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
AULA 2 ENTENDENDO HTML Para vender alguma coisa, criar uma loja temos que nos ligar na web. Para fazer páginas Web, você cria arquivos escritos em HTML (Hyper Text Markup Language) e os coloca em um servidor Web. O HTML, em sua página Web, diz ao browser tuo o que ele precisa saber para exibir sua página. E, se você fez seu trabalho , suas páginas serão exibidas sem problemas em PDAs e dispositivos móveis, e funcionarão com browsers com facilidade de fala e lente de aumento para as pessoas com problemas de visão. Todos os arquivos HTML são arquivos de texto. Para criar um arquivo de texto, você precisa de uma aplicação que permita a criação de texto simples sem enchê-lo de um monte de formatação. Primeiro passo: Abra o menu Iniciar e navegue até o bloco de notas Você o encontrará em “Acessórios”. Segundo passo: Abra o bloco de notas Como criar uma página em HTML Como criar uma página em HTML Para salvar no bloco de notas escolha “Todos os arquivos” como seu tipo, caso contrário o Bloco de notas adiciona um “.txt” ao nome de seu arquivo. Abra sua página Web em um browser. “Menu Arquivo/abrir/procurar” e navegue até seu arquivo. Conhecendo algumas Tags em HTML Para criar uma página em HTML é necessário conhecer e trabalhar com TAGS. O HTML é uma linguagem de marcação e não gera executável. TAGS COM CONTEÚDO <html>...</html> --------------------- Limite da página (onde começa e termina a página; <head>...</head> -------------------- Área de cabeçalho da página; <title>...</title> ------------------------ Título da barra de título; <body>...</body> -------------------- Corpo da página (onde são digitados os dados) <p>...</p> ------------------------------ Parágrafo <h1>...</h1> -------------------------- Cabeçalho de Nível (pode ir de <h1> até <h6>, sendo <h1> o cabeçalho de fonte maior e <h6> o de fonte menor; Conhecendo algumas Tags em HTML TAGS SEM CONTEÚDO <img src = “” /> ------------------------ Inserir uma imagem; <br /> ------------------------------------ Quebra de linha; <hr /> ------------------------------------ Cria uma linha horizontal Digite no bloco de notas e salve com o nome ex01.html <html> <head> <title>Primeiro Exemplo</title> </head> <body> <h1>CURSO DE HTML PROF. JORGE FERREIRA</h1> <h2>HTML e XHTML</h2> <p> Devido a não padronização exercida pelas empresas em relação aos seus navegadores, o criador do HTML resolveu padronizar. Ele notou que quando uma página era criada, rodava em um navegador (browser) e não rodava direito em outro (ficava diferente). Então ele uniu a linguagem XML com o HTML criando assim o XHTML. </p> </body> </html> Salvando a página Crie uma pasta exemplos e salve o arquivo: veja o modelo. Abrindo a página Clique duas vezes sobre o ícone da página que você criou e veja o resultado. Abrindo a página Validação da página VALIDAÇÃO DE XHTML DO W3C A programação de aplicativos baseados na Web pode ser complexa, e os documentos XHTML devem ser escritos corretamente para assegurar que os navegadores os processem adequadamente. Para criar documentos escritos corretamente, o World Wide Web Consortium (W3C) fornece um serviço de validação (http://validator.w3.org) para verificar a sintaxe de um documento. O documento pode ser validado a partir de um URL que especifica a ocalização do arquivo ou fazendo-se o upload de um arquivo para o site http://validator.w3.org. Validação da página Clique no botão procurar, selecione sua página e clique em Check. Validação da página Clicando em procurar..., os usuários podem selecionar arquivos em seus próprios computadores para fazer upload. Depois de selecionar um arquivo, clicar no botão VALIDAR. Validação da página Quando a página não está no padrão aparece a mensagem acima. Validação da página <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> </html> Para que uma página seja válida é necessário escrever no topo da página o cabeçalho acima. Veja que é uma página normal apenas inserimos um cabeçalho XTHML. Validação da página VAMOS REFAZER NOSSA PÁGINA usando o DREAMWEAVER, que é um editor HTML melhor que o bloco de notas e fornece o cabeçalho, que é necessário para validação da página. Você também pode digitar o cabeçalho, usando o bloco de notas fique a vontade. Se quiser baixar o DREAMWEAVER, apesar de ser pago você pode usar por 30 dias grátis. Para isso entre no site abaixo e faça download: http://www.baixaki.com.br/download/adobe-dreamweaver.htm Usando o DREAMWEAVER – ex02.html Validação da página Agora a página pode ser validada. Validação da página Copie os parágrafos para sua página e o selo de validação aparecerá. Validação da página Para evitar ter que digitar o cabeçalho você pode fazer os exemplos sem validação. Apenas os exemplos ou usar o DREAMWEAVER que pode ser baixado do site: ORGANIZAÇÃO DE PASTAS Crie uma pasta com o nome: projetoCafe Crie uma subpasta com o nome: bebidas Crie uma subpasta com o nome: imagens – para guardar todas as imagens. Crie uma subpasta com o nome: sobre ORGANIZAÇÃO DE PASTAS <html> <head> <title>Bar Esperan a</title> </head> <body> <h1>Bem-Vindos ao Bar Esperan a</h1> <img src="imagens/drinks.jpg" alt="Drinques" /> ORGANIZAÇÃO DE PASTAS <p> Junte-se a nós qualquer noite dessas para beber <a href="bebidas/elixir.html"> elixires</a> refrescantes, ter um bom papo e talvez algumas partidas de <em> Dance Dance Revolution</em> O acesso wireless est sempre disponível; TSPSW(Traga seu pr prio Servidor Web). </p> <h2>Como chegar</h2> ORGANIZAÇÃO DE PASTAS <p> Você nos encontrará bem no centro da cidade de Weblândia. Se precisar de ajuda para nos localizar, verifique nossa <a href=”instrucoes.html”>instruções detalhadas</a> Junte-se a nós! </p> </body> </html> EXERCÍCIO 01 Salve essa página na pasta PROJETOCAFÉ com o nome de index.html. Usando o cabeçalho do ex02.html, valide essa página no site, copie os selos de validação para sua página. http://validator.w3.org This document was created with Win2PDF available at http://www.win2pdf.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only. This page will not be added after purchasing Win2PDF.
Materiais relacionados
Perguntas relacionadas
Compartilhar