I. A LINGUAGEM HTML II. TAGS ESTRUTURA BÁSICA DE UM DOCUMENTO HTML

Transcrição

1 I. A LINGUAGEM HTML A linguagem HTML (Hyper Text Markup Language Linguagem de Marcação de Hipertexto) é uma linguagem utilizada para produzir páginas na Web (WWW World Wide Web), criada por Tim Berners-Lee em Por meio dessa linguagem o desenvolvedor pode especificar atributos para um texto (como tipo de fonte, cor, etc) ou criar marcações que definem um vínculo com outro documento, que será apresentado quando o usuário clicar na referida marcação (hyperlink). O HTML não é uma linguagem de programação propriamente dita, ela seria melhor classificada como uma linguagem de formatação de textos ou definição da estrutura de um documento. Assim, ela não gera um programa executável, como ocorre com as linguagens de programação. Em vez disso o desenvolvedor terá apenas um arquivo em formato texto, geralmente com a extensão.htm ou.html, que será lido e interpretado por um navegador/browser (Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera) sendo exibido o layout correspondente. Pode-se criar um documento HTML, utilizando um editor de texto simples, como o Bloco de Notas do Windows (Botão Iniciar Acessórios Bloco de Notas), ou outro editor que permita salvar o texto de forma pura, sem formatação, bastando colocar no final do nome do arquivo a extensão.htm. Quando for salvar um documento em HTML, é recomendado não utilizar símbolos para o nome dos arquivos, como acentos, vírgulas, hifens, cedilhas, sobrescritos, espaços em branco e inclusive letras maiúsculas. A linguagem HTML é o conhecimento básico para o desenvolvimento de páginas e sistemas on-line. Tudo o que está na Internet envolve HTML. Alguns programas, entre eles o Adobe Dreamweaver,criam o HTML automaticamente, pois possuem o chamado WYSIWYG (what you see is what you get) - o que você vê é o que você faz. Algumas vezes, apesar das melhorias, o código gerado, por esses programas pode conter muita sujeira, incluindo comandos desnecessários, e até mesmo problemas de exibição de página. É nessas horas que é necessário o conhecimento do HTML, pois conhecendo a linguagem, os problemas poderão ser resolvidos. II. TAGS Os comandos em HTML são chamados de tags (rótulos) e eles irão dizer ao navegador como o texto, a informação e as imagens serão formatadas e exibidas. As tags HTML são identificadas pelos símbolos matemáticos menor e maior <...> (em uma tag de abertura - liga) e </...> (em uma tag de fechamento - desliga). Normalmente ocorrem em pares, delimitando o início e o fim de determinado tipo de conteúdo. O texto entre as duas marcas é o conteúdo da tag. As tags podem ser escritas em letras minúsculas ou maiúsculas. Exemplo: <HTML> ou <html>. ESTRUTURA BÁSICA DE UM DOCUMENTO HTML <HTML> Primeira tag, que dá o início ao documento, informando ao browser que este é um documento no formato HTML (abertura 1) <HEAD> Informações de cabeçalho (abertura 2) <TITLE> Título exibido na parte superior do navegador (abertura 3) </TITLE> Fechamento do título (fechamento 3) </HEAD> Fechamento do cabeçalho (fechamento 2) <BODY> Corpo do documento. Entre esta tag pode-se inserir textos, imagens, animações, sons, vídeos, etc; que serão exibidos pelo browser (abertura 4) </BODY> Finalização do corpo do documento (fechamento 4) </HTML> Finalização do documento (fechamento 1) Exemplo: <HTML> <HEAD> <TITLE> Exercício - Professor Leandro </TITLE> </HEAD> <BODY> Primeira linha de texto da página em HTML </BODY> </HTML> SITES EM HTML - DISCIPLINA: INFORMÁTICA - PROFESSOR LEANDRO V. ZAGATTI 1

2 TAG DE PARÁGRAFOS É utilizada para definir o início e o fim de um novo parágrafo, deixando um espaço em branco entre cada parágrafo. TAG DE QUEBRA DE LINHA Faz uma quebra de linha, onde for colocada, sem acrescentar espaço extra entre as linhas. Tag Fixa não necessita ser fechada. TAG DE ESPAÇAMENTO ENTRE LETRAS &nbsp Muitas vezes é necessário usar um espaço em branco no código HTML para colocar objetos ou texto no local apropriado; já que isso não acontece se der apenas os espaços em branco no texto, será necessário utilizar o código &nbsp em qualquer lugar do texto. O código &nbsp deverá estar sempre em letras com caixa baixa (minúsculas) - Tag Fixa não necessita ser fechada, nem ter os sinais de menor < e maior >.. TAGS DE ALINHAMENTO DE TEXTO COM A PÁGINA <ALIGN> As tags de alinhamento podem ser utilizadas junto com as tags ou <H?> Deve ser feito o fechamento da tag ou </H?> no final da formatação do parágrafo. Texto alinhado à direita Exemplo de texto Texto alinhado à esquerda (padrão) Exemplo de texto Texto centralizado Exemplo de texto Texto justificado. E x e m p l o d e t e x t o TAGS DE ESTILOS DE CARACTERES DE TEXTO Texto em negrito (BOLD) Exemplo de texto Texto em itálico Exemplo de texto Texto sublinhado (UNDERLINE) Exemplo de texto Texto subscrito Exemplo de texto (H 2 O) Texto sobrescrito Exemplo de texto ( x 2 +2y=0) <STRIKE> Texto riscado Exemplo de texto <MARQUEE> Texto passando ou correndo na tela Exemplo de texto Os estilos de formatação podem ser utilizados várias vezes no mesmo parágrafo, bastando abrir a tag antes do início do texto e fechar no final. TAG DE LINHA HORIZONTAL <HR> Cria uma linha horizontal na posição em que for solicitado, separando uma informação da outra na página. Modelo: <HR ALIGN= WIDTH= SIZE= COLOR=? > Define a posição de alinhamento para a linha se a largura for menor do que a página. Os valores do atributo podem ser LEFT (esquerda), CENTER (centralizado) ou RIGHT (direita). Define o comprimento da linha. Pode ser a largura exata em pixels (por exemplo, width= 150 ) ou em porcentagem da largura da tela (por exemplo, width= 50% ). Define a espessura da linha medida em pixels (por exemplo, size= 8 ).? Define a cor em hexadecimal. De o atributo NOSHADE estiver na TAG, a linha se apresentará com uma linha sólida, caso contrário, se esse atributo for omitido, a linha aparecerá sombreada. Exemplo: <HR ALIGN= center WIDTH= 50% SIZE= 4 COLOR= #FF0000 > Tag Fixa não necessita ser fechada. SITES EM HTML - DISCIPLINA: INFORMÁTICA - PROFESSOR LEANDRO V. ZAGATTI 2

3 TAGS DE ATRIBUTOS DO FUNDO DA PÁGINA EM <BODY> <BODY BGCOLOR=? > Define a cor de fundo da página, definida por números hexadecimais. <BODY BGCOLOR=? TEXT=? > Define a cor de fundo da página e a cor de todo o texto do documento, exceto os links. #FFFFFF White # Purple # Black #FF00FF Magenta #CCCCCC Gray #EE82EE Violet #D3D3D3 LightGray #FFC0CB Pink #FFFF00 Yellow #4B0082 Indigo #EEDD82 LightGoldenrod #0000FF Blue #F5F5DC Beige #00BFFF DeepSkyBlue #FF6600 Goldenrod #ADD8E6 LightBlue #8B4513 SaddleBrown #00FFFF Cyan #CD5C5C IndianRed # Green #FF0000 Red #90EE90 LightGreen #FF4500 OrangeRed #ADFF2F GreenYellow São mais de 16 milhões de cores que podem ser inseridas em uma página HTML, bastando ter seu código hexadecimal. Existem muitos sites com a relação das cores mais utilizada, busque no Google por Tabela de cores HTML. <BODY BACKGROUND=""> Define uma imagem para preencher o fundo da página. Define o local exato da imagem na raiz do site (unidade ou pasta) ou url (endereço de internet) Exemplos: - Imagens localizadas na Pasta Raiz <BODY BACKGROUND=" T:\03_Ensino_Medio\3o_EM\Atividades\1o_trimestre\1a_pagina_htm\ceu.jpg"> Para saber qual o endereço exato, clique com o botão direito do mouse sobre a imagem no Windows Explorer e dê a opção Propriedades. Na Guia Geral item Local selecione todo o endereço e copie (CTRL+C). Cole (CTRL+V dentro da TAG. Logo em seguida digite \ o nome da imagem, do jeito que aparece nas propriedades do arquivo no Windows Explorer + sua extensão que pode ser.jpg ou.gif ou.png em tipo de arquivo. - Imagens localizadas em Sites <BODY BACKGROUND=" Copie (CTRL+C) exatamente o endereço da URL (endereço) da imagem na internet. Existe uma desvantagem destas imagens, pois a imagem sumirá quando o site de onde foi tirada ficar off line. SITES EM HTML - DISCIPLINA: INFORMÁTICA - PROFESSOR LEANDRO V. ZAGATTI 3

4 TAG DE FORMATAÇÃO DE TEXTOS Permite formatar o texto com cores, tamanhos e tipos de fontes diferentes. Modelo: ? Define a cor em hexadecimal. Define o tamanho a ser definido de 1 a 7. Onde 1 é o menor tamanho e 7 o maior. Define o tipo de fonte a ser utilizada (nome da fonte) Fontes padrão: Arial, Courier New, Georgia, Verdana, Times New Roman Exemplo: TEXTO Deve ser feito o fechamento da tag com no final da formatação do parágrafo, quando não quiser a mesma formatação no próximo parágrafo. TAG DE INSERÇÃO DE IMAGEM <IMG SRC> Permite inserir imagens na página com largura e altura definida. Modelo: <IMG SRC= WIDTH= HEIGHT= > Define o local exato da imagem na raiz do site (unidade ou pasta) ou url (endereço de internet) Define o tamanho da largura da imagem em pixels Define o tamanho da altura da imagem em pixels Exemplo: <IMG SRC="c:\site\imagens\paisagem.jpg WIDTH:"400 HEIGHT= 300 > - As imagens inseridas em um documento HTML devem ter, de preferência, as extensões:.gif,.jpg ou.png, pois esses formatos são aceitos em todos os browsers; - Para saber qual a extensão do arquivo da imagem, é só clicar com o botão direito do mouse sobre o arquivo e dar a opção propriedades; - Para que os arquivos das imagens fiquem bem organizados é essencial guardá-los em uma pasta diferente dos arquivos.htm (pasta imagens). TAGS DE ALINHAMENTO DAS IMAGENS EM RELAÇÃO AO TEXTO ALIGN Para alinhar uma imagem ao texto, basta usar o atributo ALIGN= dentro do tag <IMG SRC>. O alinhamento padrão será sempre à esquerda. (O alinhamento tanto tem a ver com a disposição da imagem na tela, como também, com os textos que estão ao redor). ALIGN="TOP" ALIGN="BOTTOM" ALIGN="MIDDLE" ALIGN="RIGHT" ALIGN="LEFT" Este atributo alinha a parte superior da imagem com o topo da linha. Este atributo alinha o interior da imagem com a parte inferior do texto. Este atributo alinha o meio da imagem com a parte inferior do texto. Este atributo alinha a imagem à direita, e tudo que houver ao redor. Este atributo alinha a imagem à esquerda, e tudo que houver ao redor. Exemplo: <IMG ALIGN="LEFT" SRC="c:\site\imagens\paisagem.jpg"> TAG DE INSERÇÃO DE BORDAS NAS IMAGENS BORDER Para inserir bordas em uma imagem, basta usar o atributo BORDER. Pode-se alterar a cor e o estilo da borda, utilizando um código mais aprimorado em CSS (STYLE). Modelo: <IMG SRC="" STYLE="BORDER: px?"> Define o local exato da imagem na raiz do site (unidade ou pasta) ou url (endereço de internet) px Define a espessura da borda em pixels Define o tipo de borda (solid sólida ou dashed pontilhada ou double dupla)? Define a cor em hexadecimal. Exemplo: <IMG SRC="c:\site\imagens\paisagem.jpg" STYLE="BORDER: 8px dashed #0000FF"> SITES EM HTML - DISCIPLINA: INFORMÁTICA - PROFESSOR LEANDRO V. ZAGATTI 4

5 ATIVIDADE 1 OBJETIVO: Utilizando os códigos HTML já abordados, construa a página conforme instruções abaixo: 1º) Abra o Bloco de Notas do Windows em Botão Iniciar Todos os Programas Acessórios Bloco de Notas; 2º) Digite a estrutura básica de documentos HTML; 3º) No cabeçalho digite: A Parábola do Lápis Nome e Número do integrante 3º EM A 4º) Salve o documento na PASTA RAIZ indicada pelo professor com o nome: Lapis_nome_do_integrante_3o_EM.htm (utilizar as regras para salvar nomes de arquivos em HTML); 5º) Altere no corpo do documento, a cor de fundo da página para amarelo claro (#FFFFCC); 6º) Abra o arquivo com o texto do trabalho (na pasta raiz) através do bloco de notas, copie o conteúdo e cole dentro da TAG do corpo do documento na estrutura HTML: "A PARÁBOLA DO LÁPIS" O fabricante de lápis falou com cada um de seus lápis dizendo: - Existem cinco coisas que você precisa saber antes que eu te envie para o mundo; será necessário sempre lembrar delas, para que você se torne o melhor lápis que possa ser: - Primeira: Você poderá fazer grandes coisas, somente se permitir estar seguro na mão de alguém; - Segunda: Você experimentará um doloroso processo de ser afiado de vez em quando, mas isto será exigido se você quiser se tornar um lápis melhor; - Terceira: Você terá a habilidade de corrigir qualquer mal-entendido que você possa ocasionar; - Quarta: A sua parte mais importante, sempre estará do seu lado de dentro; - Quinta: Em qualquer condição, sempre continue escrevendo e deixando uma marca clara e legível, mesmo que a situação seja difícil. Todos os lápis entenderam e prometeram lembrar sempre das coisas que o fabricante tinha lhes dito; entraram na caixa compreendendo completamente o propósito dele. NOME E Nº DO INTEGRANTE 3º EM A DATA 7º) Formate a primeira linha do texto para que seja um cabeçalho de nível 1 (título) com alinhamento centralizado; 8º) Insira 4 linhas horizontais centralizadas, na cor azul (#0000FF) conforme atributos abaixo: Comprimento: 50% - cor azul - Espessura:4 Comprimento: 30% - cor azul - Espessura:3 Comprimento: 10% - cor azul - Espessura:2 Comprimento de largura exata 60 pixels- cor: azul - Espessura:1 9º) No próximo parágrafo do texto (O fabricante de lápis falou com cada um de seus lápis dizendo:), aplique a formatação de texto: cor roxo (#660066), tamanho 3, fonte Georgia, em estilo negrito com alinhamento justificado; 10º) No próximo parágrafo do texto (- Existem cinco coisas que você precisa saber antes que eu te envie para o mundo; será necessário sempre se lembrar delas, para que você se torne o melhor lápis que possa ser:), aplique a formatação de texto: cor marrom (#993300), tamanho 2, fonte Verdana e em estilo negrito com alinhamento justificado; 11º) Insira a imagem lapis.jpg da pasta raiz, alinhada à esquerda EM RELAÇÃO AO TEXTO, com largura W=200 e altura H=180. A imagem deve ter estilo de borda com espessura 4, tipo pontilhada, com cor azul (#0000FF); 12º) Da linha do texto (- Primeira: Você poderá fazer grandes coisas, somente se permitir estar seguro na mão de alguém;) até a linha (- Quinta: Em qualquer condição, sempre continue escrevendo e deixando uma marca clara e legível, mesmo que a situação seja difícil) (itens das cinco coisas), aplique em todas as linhas, DE UMA SÓ VEZ, a formatação de texto: cor azul (#0000FF), tamanho 2, fonte Verdana, com a palavra (Primeira) em estilo negrito com alinhamento justificado; 13º) Após cada item das cinco coisas, dê uma quebra de linha; 14º) Após o último item das cinco coisas (quinta) insira uma quebra de linha; 15º) Aplique no parágrafo (Todos os lápis entenderam e prometeram lembrar sempre das coisas que o fabricante tinha lhes dito; entraram na caixa compreendendo completamente o propósito dele.) a formatação de texto: cor verde (#006600), tamanho 3, fonte Georgia e em estilo negrito com alinhamento justificado; 16º) Insira uma quebra de linha; 17º) Nas duas últimas linhas do texto, aplique a formatação de texto: cor vermelho (#FF0000), tamanho 4, fonte Courier New, em estilo negrito e alinhamento centralizado; 18º) Dê uma quebra de linha entre as duas informações (Nome - Número /Turma e data); 19º) Salve e visualize no navegador INTERNET EXPLORER o resultado final da página HTML. - Para poder visualizar a página no navegador, abra o Computador ou o Windows Explorer e localize onde foi salvo o arquivo HTM Clique com o botão direito do mouse sobre ele Abrir com Escolha o navegador que deseja abrir. - Deixe o arquivo do bloco de notas sempre aberto e salve (CTRL+S) quando houver alterações que devem ser visualizadas no navegar No navegador, dê atualizar (F5) para visualizar as alterações. SITES EM HTML - DISCIPLINA: INFORMÁTICA - PROFESSOR LEANDRO V. ZAGATTI 5

6 Página em HTML (Resolução) SITES EM HTML - DISCIPLINA: INFORMÁTICA - PROFESSOR LEANDRO V. ZAGATTI 6