Desenvolvimento em Ambiente Web. HTML - Introdução

Transcrição

1 Desenvolvimento em Ambiente Web HTML - Introdução

2 O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas, listas, imagens, etc; Recuperar informações online via links de hipertexto, com um clique de botão; Projetar formulários para conduzir transações de serviços remotos, uso em busca de informações, fazer reservas, encomendas de produtos, etc; Incluir planilhas de informações, vídeos, sons e outras aplicações diretamente em seu documento.

3 O que é HTML? HTML significa Hyper Text Markup Language; Uma linguagem de marcação é um conjunto de etiquetas (tags) de marcação; Os documentos HTML são descritos usando as tags HTML; Cada tag HTML descreve um conteúdo diferente do documento. Assim, o HTML nos permite descrever a estrutura das páginas usando "marcações". Os elementos da linguagem que indicam um "parágrafo", "lista", "tabela", entre outros.

4 Um pouco de história A primeira versão do HTML foi descrita por Tim Berners-Lee no final de Sem seus 5 primeiros anos ( ), o HTML teve várias revisões e extensões, organizado inicialmente pelo CERN (European Organization for Nuclear Research) e porteriormente pelo IETF (Internet Engineering Task Force).

5 Um pouco de história Com a criação da W3C, o desenvolvimento mudou novamente. Sendo lançado as versões 3.2, 4.01 e 5. Versão Ano HTML 1991 HTML HTML HTML HTML

6 O que é XHTML? XHTML é uma variação do HTML que usa a sintaxe XML (Extensible Markup Language). XHTML tem os mesmos elementos do HTML (como parágrafos, tabelas, etc), mas a forma de escrever as marcações é ligeiramente diferente.

7 O que é CSS? CSS é uma linguagem para descrever a apresentação de páginas WEB, incluindo cores, leiaute e fontes. Ela permite que a apresentação de uma página WEB se adapte para diferentes tipos de dispositivos, como telas grandes e pequenas. O CSS é independente do HTML. A separação do CSS do HTML torna mais fácil a tarefa de alterar sites, compartilhar aparências entre diferentes páginas e criar páginas sob medida para diferentes ambientes. Este mecanismo é conhecido como separação do conteúdo da apresentação.

8 Sintaxe das tags HTML Uma tag é composta dos caracteres especiais <, > e /. Os elementos HTML normalmente são descritos em pares. Abertura de uma tag: 1. O caractere inicial < 2. Nome da tag (tagname) 3. O caractere final > Fechamento de uma tag: 1. Os caracteres iniciais </ 2. Nome da tag (tagname) 3. O caractere final >

9 Sintaxe das tags HTML Exemplo: <p>este é um parágrafo.</p> <p> Início da tag </p> Fim da tag Alguns elementos podem não ter um fechamento de tag. Exemplo: <br/>

10 Sintaxe das tags HTML Uma tag pode ter atributos para refinar seu significado. Os atributos são especificados no início da tag. Eles consistem de um nome e um valor, separador pelo caractere "=". Exemplo: <a href="page.html">link</a>

11 WEB Browsers O propósito de um navegador WEB (WEB Browser) é ler um documento HTML e mostrá-lo. O navegador não mostra as tags HTML, mas ele as usa para determinar como o documento é apresentado. São exemplos de navegadores: Chrome, FireFox, Internet Explorer e Safari.

12 Ferramentas para edição de HTML Não é necessário uma ferramenta especial para criar uma página HTML. Pode-se escrever HTML "na mão", usando um editor de texto como o Notepad. Apesar das marcações HTML poderem ser escritas em qualquer editor de texto, editores HTML especializados podem oferecer facilidades.

13 Criando uma página Tente isso: 1. Abra o bloco de notas (notepad); 2. Digite o texto do exemplo 1; 3. Salve o documento com o nome exemplo1. html e na opção Codificação selecione UFT- 8 ; 4. Dê dois cliques no arquivo salvo para abrir a página no navegador padrão do computador.

14 Página no Notepad

15 Condificação UTF-8

16 Declaração <!DOCTYPE> Declaração ajuda o navegador a mostrar o documento corretamente. Como há outros tipos de documentos na WEB, o navegador precisa saber o tipo e a versão destes documentos. Esta declaração não é case sensitive, portanto qualquer combinação de letras maiúsculas e minúsculas são aceitáveis.

17 Elemento html O elemento html representa a raiz de um documento HTML. O <html>... </html> contém um elemento head seguido de um elemento body.

18 Elemento head O elemento head representa uma coleção de metadados para o documento. O <head>... </head> contem o título e informações sobre folhas de estilo e scripts. O conteúdo no elemento head não é mostrado pelo navegador.

19 Elemento body O elemento body representa o conteúdo principal do documento. O <body>... </body> contem as marcações visíveis do documento.

20 Cabeçalhos HTML Cabeçalhos são definidos com as tags <h1> até <h6>. <h1> define o cabeçalho mais importante. <h6> define o cabeçalho menos importante. Observações Não use cabeçalhos para fazer textos maiores ou negrito, eles devem ser usados para identificar os "títulos" das páginas; Ferramentas de busca usam estes cabeçalhos para indexar a estrutura e o conteúdo das páginas; h1 deveria ser o cabeçalho principal, seguido do h2, depois h3 e assim por diante.

21 Parágrafo HTML Documentos HTML são divididos em parágrafos. A tag <p> define um parágrafo. Quebras de linha A tag <br> define uma quebra de linha, sem iniciar um novo parágrafo. Divisões horizontais A tag <hr> cria uma linha horizontal na página HTML. Pode-se usar para separar conteúdos.

22 Comentários HTML As tags de comentário <!-- e --> são usadas para inserir comentários em uma página HTML. Pode-se adicionar comentários com a seguinte sintaxe: <!-- Isso é um comentário --> Comentários não são mostrados pelo navegador, mas podem ajudar a documentar o HTML.

23 Prática Criação de páginas em laboratório para aplicação dos conceitos discutidos.