PARTE - 1
HTML Página 1 Índice HTML A HISTÓRIA... 2 O COMEÇO E A INTEROPERABILIADE... 3 Primeira Página... 4 Entendendo seu código... 5 Abrindo o código fonte da sua página... 6 Comentários na página... 7 Comandos de formatação parte I... 8 Marcações para Título e Subtítulo... 8
HTML Página 2 HTML A HISTÓRIA Conforme acordo com a W3C 1, a Web é baseada em 3 pilares: 1. Um esquema de nomes para localização de fontes de informação na Web 2, esse esquema chama-se URI 3. 2. Um Protocolo de acesso para acessar estas fontes, hoje o HTTP 4. 3. Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML. Vamos entender o terceiro pilar, o HTML. HTML é uma abreviação de HyperText Markup Language - Linguagem de Marcação de Hipertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc.) na Web. O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos ou nós ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas. Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem. Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções. 1 wc3 - é consórcio com mais de 300 membros entre países, empresas e organizações independentes em nivel internacional que visa desenvolver padrões para a criação e a interpretação de conteúdos para a Web. 2 Web - sistema de documentos em hipertextos e ou hipermídias que são interligados por links e executados na rede mundial de computadores, a Internet. 3 URL - (de Uniform Resource Locator), ou Localizador-Padrão de Recursos, é o endereço de um recurso (arquivo, impressora, etc.), disponível em uma rede (Internet ou Intranet). Tem a seguinte estrutura: protocolo://máquina/caminho/recurso. 4 http traduzindo, Protocolo de Transferência de Hipertexto) é um protocolo de comunicação em uma das camadas de aplicação do modelo OSI de redes.
HTML Página 3 O COMEÇO E A INTEROPERABILIADE Entre 1993 e 1995 - O HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até aqui não era reconhecido como padrão. Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática comum. Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código HTML e este código pode ser lido por diversos meios, ao invés de versões diferentes para diversos dispositivos. Dessa forma, evitouse que a Web fosse desenvolvida em uma base proprietária, com formatos incompatíveis e limitada. Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a informação publicada por meio deste código fosse acessível por dispositivos e outros meios com características diferentes, não importando o tamanho da tela, resolução, variação de cor. Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O HTML deve ser entendido universalmente, dando a possibilidade para a reutilização dessa informação de acordo com as limitações de cada meio de acesso. Apesar de existirem várias ferramentas no mercado com muitas facilidades para você montar a sua página web, o programador ou designer ainda necessita ter o mínimo de conhecimento sobre Internet e a linguagem HTML, que é o formato final de qualquer página, independente de qual editor de páginas esteja utilizando. O conhecimento de HTML é necessário para entre outras coisas: efetuar manutenção nas suas páginas, corrigindo bugs gerados pela ferramenta de criação de páginas ou para colocar efeitos mais avançados nas suas páginas. Uma coisa é certa: cedo ou tarde você precisará editar sua página diretamente no código HTML. Neste tutorial iremos abordar o HTML na sua forma mais pura, utilizando apenas o programa bloco de notas (ou notepad) do Windows. Lembramos que a maioria dos programas de criação de páginas possui um editor HTML, que pode ser usado, alem de qualquer outro editor de texto que gere o formato TXT (Texto padrão). Para podermos visualizar nossos resultados, utilizaremos o browser Intenet Explorer.
HTML Página 4 Primeira Página Uma página Web consiste basicamente de um arquivo contendo comandos em linguagem HTML (Hiper Text Mark-up Language). Para iniciar iremos utilizar um exemplo muito simples, onde criaremos uma página com um pequeno texto (utilize o bloco de notas do Windows). Abra o editor de textos, e em um novo documento, digite o seguinte código: Antes de salvar o seu trabalho, recomendamos que fosse criada uma pasta no seu computador e salve ali todas as páginas do seu site. Isso facilita muito a sua organização. Salve o documento no seu computador com o nome pagina.htm, observe a figura ao lado. Botão para criar uma nova pasta Nome do arquivo com a extensão.htm Veja a diferença entre salvar o arquivo com a extensão.txt e.htm. Arquivo gravado com a extensão.htm. Normalmente apresenta o ícone do navegador. Arquivo gravado com a extensão.txt.
HTML Página 5 Para ver a página no seu browser, abra a pasta que você criou e de um duplo clique no ícone do arquivo pagina.htm. Resultado. Entendendo seu código Os identificadores que estão entre os sinais < e > são chamados de tags. Cada uma é responsável por uma determinada área ou componente da página. Vimos neste primeiro exemplo o uso de quatro tags, que são: Inicia Finaliza Uso <HTML> </HTML> Marca o início e o fim de um documento HTML. <HEAD> </HEAD> Marca o início e o fim da área onde será descrito os cabeçalhos e o titulo da página <TITLE> </TITLE> O título da página que aparecerá na barra superior de seu browser <BODY </BODY> É o corpo da página, onde o código principal deverá estar presente. Uma página HTML é estruturada da seguinte forma: <HTML> <HEAD> (Aqui se colocam as tags da área de cabeçalho) </HEAD> <BODY> (Aqui é o corpo da sua página, onde você colocará as tags de conteúdo) </BODY> </HTML>
HTML Página 6 Abrindo o código fonte da sua página Caso você tenha fechado o bloco de notas com o código HTML da sua página, observe os comandos abaixo para abrir novamente o bloco de notas com o seu código. A partir do navegador. Clique no corpo da página com o botão direito do mouse e em seguida clique em exibir código fonte. Ainda pelo navegador. Clique no comando de menu exibir / código fonte. Anotações:
HTML Página 7 Comentários na página Podemos inserir comentários para que possamos entender melhor o código. Volte ao código fonte e acrescente as linhas indicadas abaixo. Observe que o comentário não é apresentado na página. Para colocarmos os comentários utilizamos uma tag, composta pelos sinais < e > com o sinal de exclamação! antes do texto de comentário. Anotações:
HTML Página 8 Comandos de formatação parte I Marcações para Título e Subtítulo Agora aperfeiçoaremos nossa página mais um pouquinho, colocando mais algumas tags com alguns efeitos bastante interessantes. Código fonte Resultado Inicia Finaliza Uso <Hn> </Hn> Marca o tamanho da fonte para um título, n pode ter um valor de 1 (um) a 6 (seis), sendo 6 (seis) o menor tamanho.