MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: <?xml?>, <!DOCTYPE>, <html>, <head>, <body>, <body bgcolor>.

Tamanho: px

Começar a partir da página:

Download "MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: <?xml?>, <!DOCTYPE>, <html>, <head>, <body>, <body bgcolor>."

Carlos Eduardo Porto Fragoso
5 Há anos
Visualizações:

1 MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: <?xml?>, <!DOCTYPE>, <html>, <head>, <body>, <body bgcolor>. Conceitos básicos do funcionamento da Internet Internet = International Net (Rede Mundial) Funcionamento = as informações são colocadas em computadores centrais chamados servidores web e a partir deles, as informações são acessíveis a partir de qualquer computador que contenha software e o hardware adequados. Possui três elementos, três tecnologias: HTML ( HyperText Markup Language ) é a linguagem usada na autoria de páginas destinadas à Internet. HTTP ( HyperText Transfer Protocol ) é o protocolo de transferência de arquivos hipertexto e o mais comumente usado na Internet. Ex.: o FTP ( File Transfer Protocol ) é o protocolo para transferência de arquivos. Browser ou navegador web ou navegador é um programa que habilita seus usuários a interagirem com documentos HTML hospedados em um servidor web. Ex.: Internet Explorer (IE ou MSIE), Mozilla, Firefox, Opera, Netscape Navigator e Safari (para Mac OS). 1

2 URL URL Uniform Resource Locator Localizador Uniforme de Recursos; DNS Domain Name Service Serviço de Nome de Domínio; o Traduz a URL para o número IP da máquina; protocolo serviço domínio atividade pais www. bb. com. br www. gomeshp. com www. unb. br www. bbc. co. uk HTML HTML - HyperText Markup Language - Linguagem de Marcação de Hipertexto 1 ; Baseada em tags; Desenvolvido por Tim Berners-Lee; É um simples arquivo texto com a extensão.htm 2 ou.html; Desenvolvimento simples = editor de texto + browser; Editores que auxiliam no trabalho: DreamWeaver; Última versão é a 4.01 => evolução para o XHTML; Problemas da HTML: o Exibição em outras plataformas: usar marcação somente para descrever o conteúdo, e não para orientar exibição; o Código desnecessário: ; o Elementos incluídos por fabricantes de browser: Cada empresa (IE, NS) incluiu seus próprios elementos à HTML dificultou a criação de um documento que seja exibido corretamente em diferentes browsers. XML XML - Extensible Markup Language; Permite a criação de marcação padronizada, fazendo a separação entre marcação e exibição; Descrever o conteúdo de um documento, e não como ele deve ser exibido. 1 Hipertexto é um sistema para a visualização de informação cujos documentos contêm referências internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links), e para a fácil publicação, atualização e pesquisa de informação. 2 A extensão.htm ainda é usada, por causa da herança dos tempos (pré-históricos no que diz respeito à Internet) do MS DOS e do Windows de 16 bits, em que os nomes dos ficheiros tinham no máximo 8 caracteres e as suas extensões não podiam ter mais de 3 caracteres. Deve-se utilizar, então, a extensão.html. 2

3 XHTML EXtensible HyperText Markup Language é o HTML em formato XML; Não é tão tolerante como a HTML; CORRETO: Não incluir elementos para formatação dos dados usar as folhas de estilo para este fim; Versão 1.0 representa uma transição da HTML para o conjunto de vocabulários da XML, e ainda inclui os mesmos elementos de formatação da HTML 4.01; Na versão 1.1 os elementos de formatação tornam-se ultrapassados e as folhas de estilo passam a ser responsáveis pelo controle da exibição. Relação básica entre as três linguagens A XHTML utiliza o conjunto de elementos da HTML em combinação com o conjunto de regras da XML, o que torna a XHTML um vocabulário da XML. DTD DTD ( Document Type Definition ) Definição de Tipo de Documento para identificar as regras que se aplicam a linguagem de marcação usada no documento bem como o conjunto de elementos e entidades válidas naquela linguagem; uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML; Esquema é o conjunto de regras definidas na DTD; Para facilitar a transição ela apresenta três classificações: o XHTML-1.0-Transitional - permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso ("deprecated"), regras de apresentação embutidas em tags e também para documentos destinados a exibição em browsers sem suporte para CSS 3. Não admite qualquer tipo de marcação para frames; o XHTML-1.0-Strict - é a mais rígida das declarações. Os documentos XHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso "deprecated" segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação; o XHTML-1.0-Frameset - permite tudo da declaração transitional e mais os elementos específicos para frames. 3 CSS ( Cascading Style Sheets ) = folhas de estilo em cascata é uma linguagem de estilo, utilizada para descrever a apresentação de um documento escrito em uma linguagem de marcação, como HTML, XHTML ou XML. 3

4 Tags São as palavras usadas para representar os elementos em HTML; As etiquetas de markup dão instruções ao browser sobre a estrutura do documento e sobre forma como a página deve ser apresentada graficamente; Devem ser escritas em letras minúsculas; (XHTML é case-sensitive); Todas devem ser fechadas; A última tag aberta deve ser a primeira a ser fechada; o errado o correto Tipos de tag: o Elementos que descrevem dados: formados por um par de tags; negrito <a href=" aqui</a> o Elementos vazios: formados por apenas uma tag; <img src="figura.gif" /> Atributos ou cláusulas de uma tag: o Pares: nome = "valor"; o Para fornecer mais informações 4 sobre o elemento; o Todos os valores de atributo devem ser declarados entre aspas, mesmo aqueles valores com caracteres numéricos; o Existem atributos obrigatórios e opcionais em um elemento; o Os atributos só podem aparecer nas etiquetas de início. É proibido colocar atributos nas etiquetas de fim. As diferenças entre XHTML e HTML As principais diferenças são: todas as tags devem ser escritas em letras minúsculas; os elementos (tags) devem estar convenientemente aninhados; o uso de tags de fechamento é obrigatório; elementos vazios devem ser fechados; ex: ; diferenças para os atributos. W3C World Wide Web Consortium ( ); Tim Berners-Lee (diretor e fundador); Responsável pelo desenvolvimento, implantação e regulamentação (padronização) das linguagens pertinentes à Internet; Código nos padrões exigidos pela W3C => compatível com a maioria dos browser disponíveis no mercado. 4 Geralmente chamado de metadados, pois são usadas para referenciar os dados contidos no documento. 4

5 Estrutura de um documento <?xml?> - (opcional, mas recomendada) indica ao processador que ele está tratando um documento XML e opcionalmente sobre o tipo de codificação utilizada; se for utilizada, deve estar antes da tag <DOCTYPE>; o <?xml version="1.0"?> <!DOCTYPE> - (obrigatório) para inclusão de uma DTD; deve aparecer na primeira linha de cada documento; o <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " o <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " o <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html></html> - (obrigatório) - informar ao browser o tipo de documento que ele deve exibir; usadas no início e no fim do documento respectivamente; possui um atributo obrigatório, o xmlns, que tem por função referenciar um namespace 5 XML; o <html xmlns=" <head></head> - (obrigatório) delimita a seção de cabeçalho do documento; carrega informações sobre o documento, tais como: título da página, as palavraschaves que serão usadas pelos sistemas de busca, informações sobre o autor da página, etc; o <title></title> - (obrigatório) - título da página; que aparece na barra de títulos da janela do browser; <body></body> - (obrigatório) - representam o corpo do documento, ou seja, o que é visível na janela do browser. o <body bgcolor="yellow"> - São cores básicas: black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqua, white. o <body bgcolor="#ffff00"> - # FF FF FF B Blue ( Azul ) G Green ( Verde ) R Red ( Vermelho ) 5 Namespace é o conjunto de nomes de elementos, seus atributos e a forma como devem ser utilizados em uma linguagem de marcação. É possível o uso de mais de um namespace no mesmo documento. Ex: XHTML e MathML. 5

6 Hexadecimal Cor Hexadecimal Cor #FFFFFF Branco #0000FF Azul # Preto #FFFF00 Amarelo # Cinza #FF00FF Magenta #FF0000 Vermelho #00FFFF Ciano #00FF00 Verde Exemplo de um documento XHTML <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>minha primeira página web</title> </head> <body bgcolor="#ffaaff"> Esta é uma página web. </body> </html> 1ª Lista de Exercícios 1. Digitar o exemplo acima no bloco de notas; salva-lo e visualiza-lo pelo browser Internet Explorer. 2. Acessar o site e realizar o simulado de XHTML. (Conteúdo Didático >> HTML, XHTML, CSS). 6

Documentos relacionados

Introdução à Tecnologia Web

Introdução à Tecnologia Web IntroduçãoàTecnologiaWeb XHTML extensiblehypertextmarkuplanguage Revisão ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger XHTMLRevisão Índice 1 extensible HTML (XHTML)... 2 1.1 Diferenças entre