1 Introdução ao HTML e formatação de texto Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1
Sumário Desenvolvimento Web Introdução...3 Uma visão geral do HTML...3 Estrutura do documento...3 Tags para formatação de texto...4 Títulos...4 Parágrafos...5 Negrito, itálico e sublinhado...5 Tags coringas BR e HR...6 Sobrescrito e subscrito...7 Formatação de fonte...7 Tabelas de cores e caracteres...8 Marcadores e numeração...9 A tag DIV...10 Exercicios...11 São José dos Campos, 2011. 2
Introdução A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto. Ao terminar a página, sempre salve-a com a extensão.html. Para visualizar as páginas criadas, não é necessária uma conexão com a internet. Entretanto, se quiser deixar suas páginas (site) disponível publicamente, é necessário contratar um serviço de hospedagem. Mas, a critério de teste, você também pode criar uma conta em um serviço gratuito, como o FreeWebHostingArea.com. Atividade 1: Crie uma conta no FreeWebHosting. O link para o serviço é http://www.freewebhostingarea.com. Atenção: Por ser um serviço gratuito, apresenta muitas quedas enquanto estiver logado. Porém, asseguro que seu site estará sempre disponível. O que será visto e o que não será visto neste curso: Veremos os tópicos principais sobre HTML, formulários, e uma breve introdução ao CSS. Não serão vistos aspectos de design, usabilidade, navegabilidade, etc. (apenas indicarei textos para serem lidos). Uma visão geral do HTML Ao escrevermos uma página em HTML, temos que ter em mente três características importantes: 1. Os navegadores ignoram espaços em branco 2. Os navegadores não fazem distinção quanto à caixa alta no recohecimento de tags, ou seja, tanto faz se você escrever <html> quanto 3. Procure sempre formar tags aos pares, por exemplo <html> </html> Outro conceito fundamental ao trabalharmos com HTLM é o conceito de tag: marcação especial que produz alguma modificação (formatação) no texto. Por exemplo, para colocar um texto em negrito, faríamos: Estrutura do documento <B> Texto em negrito </B> Todo documento HTML inicia-se por uma tag e encerra-se por uma tag. Um documento HTML consiste em duas partes um cabeçalho (head) e um corpo (body). O cabeçalho contém informações a respeito do documento como, por exemplo, o título. O corpo contém o documento propriamente dito. O cabeçalho e o corpo se distinguem pelo uso das tags <HEAD> e. São José dos Campos, 2011. 3
Atividade 2: Crie sua primeira página web, utilizando o código abaixo como exemplo: <HEAD> <TITLE> Desenvolvimento Web</TITLE> Minha primeira página HTML. Ops, o acento vai sair errado!! Observação: O cabeçalho de um documento tem apenas um elemento de uso praticamente obrigatório: <TITLE>Título da página</title>. Existem outros elementos adicionais de importância grande, mas abordaremos tais elementos mais à frente. Mecanismos de buscas, na Internet, utilizam os elementos <TITLE> e </TITLE> para definir um título na apresentação do resultado da procura. Se o diagramador não insere um título na sua página HTML, o mecanismo de busca define o título com o endereço da página, ou seja, a URL da página. Tags para formatação de texto Títulos A HTML aceita seis estilos de títulos, que são usados para fazer o texto se destacar em diversos níveis. Esses títulos são numerados de 1 a 6, sendo <H1> o maior deles e, obviamente, <H6> o menor. Veja o exemplo abaixo: <HEAD> <TITLE> Desenvolvimento Web</TITLE> <H1>Teste</H1> <H2>Teste</H2> <H3>Teste</H3> <H4>Teste</H4> <H5>Teste</H5> <H6>Teste</H6> São José dos Campos, 2011. 4
Parágrafos A inserção de uma tag <P>, diz ao navegador que o texto a seguir inicia um parágrafo. Dessa forma, o navegador apresenta o texto com uma linha abaixo dos elementos anteriores. <P>Curso de desenvolvimento web. Aula 1 HTML</P> Para modificar a posição do texto, utilize o atributo ALIGN dentro da tag <P>. Por exemplo: <P align="justify">curso de desenvolvimento web.</p> <P align="center">curso de desenvolvimento web.</p> <P align="right">curso de desenvolvimento web.</p> <P align="left">curso de desenvolvimento web.</p> Negrito, itálico e sublinhado Os estilos aceitos pela HTML são o negrito, o itálico, o sublinhado e o de máquina de escrever (fonte monoespaçada), vamos inserí-los no documento: São José dos Campos, 2011. 5
<B>Texto em Negrito.</B> <I>Texto em Italico.</I> <U>Texto Sublinhado.</U> <TT>Texto monoespacado.</tt> Atividade 3: Como ficaria um texto em HTML caso quisesse aplicar negrito e itálico ao mesmo tempo em um texto? Tags coringas BR e HR As tags BR e HR servem, respectivamente, para pular de linha e para criar uma divisão entre textos. <B>Texto em Negrito.</B> <BR></BR> <I>Texto em Italico.</I> <BR></BR> <HR></HR> <U>Texto Sublinhado.</U> <BR></BR> <TT>Texto monoespacado.</tt> Obs.: Você pode alterar a linha usando os atributos SIZE (espessura) e WIDTH (comprimento em relação à janela do browser), COLOR (cor) e ALIGN (alinhamento). Exemplo: <HR SIZE=8 WIDTH=80% COLOR= blue ALIGN="left"> São José dos Campos, 2011. 6
Sobrescrito e subscrito Estas tags podem ser necessárias caso queiramos produzir índices ou fórmulas matemáticas, por exemplo. Para colocar um texto sobrescrito ou subscrito a outro, utilize as tags <SUP> e SUB>. Exemplo: <H2>Dado um triangulo retangulo, temos que:</h2> <FONT size=6>a<sup>2</sup> = b<sup>2</sup> + c<sup>2</sup></font> <BR></BR> <H2>A soma da serie aritmetica eh dada por:</h2> <FONT size=6> X<SUB>1</SUB> + X<SUB>2</SUB> +... + X<SUB>n</SUB></FONT> Formatação de fonte Vamos agora formatar as fontes da nossa página. Para isso vamos usar o tag <FONT> com seus atributos FACE, COLOR e SIZE. A tag <FONT face = "FONTE"> irá definir que tipo de fonte que seu texto irá utilizar. É importante sempre lembrar que quem irá visualizar o site pode ou não ter instalado em seu computador a fonte utilizada, por isso, opte por fontes conhecidas. Você também pode colocar uma lista de fontes, assim, caso o computador não possua tal fonte, o navegador interpreta a próxima fonte da lista, e assimpor diante. A tag <FONT size = "TAMANHO DA FONTE "> irá definir qual o tamanho da fonte utilizada, lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 6. Podemos usar tamanhos como 78 e 64, mas lembre se que pode não funcionar em alguns micros. Por isso, se você quer aumentar o tamanho de uma fonte, use o sinal de + antes do número que irá definir o tamanho da fonte e, para diminuir use o sinal de (a conta é com base no tamanho padrão 3). A tag <FONT color = "COR "> irá colocar uma cor na fonte escolhida e seguirá o padrão de cores RGB. Você poderá colocar o nome da cor em inglês ou utilizar o código hexadecimal. São José dos Campos, 2011. 7
fonte padrao <BR></BR> <FONT face= Times >Texto em fonte Times.</FONT> <BR></BR> <FONT color= blue >Texto em azul.</font> <BR></BR> <FONT size=+3>texto aumentado, tamanho 6.</FONT> Atividade 4: Como seria o código HTML caso quiséssemos formatar um texto com a fonte Times, tamanho 4 e cor vermelha simultaneamente? Tabelas de cores e caracteres Em muitos casos desejamos selecionar uma cor específica para formatar determinado texto, por exemplo. Vimos anteriormente que podemos especificar a cor pelo seu nome em inglês. Entretanto, é possível sermos mais específicos e indicarmos, ao invés do nome, seu código hexadecimal. Outro problema que pode ocorrer à com relação à acentuação. Vimos também no primeiro exemplo passado, que o browser não consegue interpretar acentos. Então, teremos que usar uma formatação especial para acentuação. Veja o exemplo abaixo: São José dos Campos acentuação errada!<br></br> São José dos Campos acentuação correta!!<br></br> <FONT color= blue >Texto em azul.</font> <BR></BR> <FONT color= #87CEFA >Texto em outro azul</font><br></br> <FONT color= #00BFFF >Texto em outro azul</font> Obs.: Verifique outros códigos de cores, caracteres especiais e acentuações nos links indicados na página da disciplina na internet. São José dos Campos, 2011. 8
Marcadores e numeração A criação de listas pode ser útil para organizar o texto em tópicos, para enumerar itens, fazer um sumário ou outras atividades onde há a necessidade de se estruturar o texto. Esse tipo de tag apresenta uma estrutura básica, onde se inicia a lista com uma tag principal <UL>, no caos de listas de marcadores ou <OL>, no caso de lista numerada, e coloca-se os itens através de tags <LI>. <UL> <LI>Tópico 1 </LI> <LI>Tópico 2 </LI> <LI>Tópico 3 </LI> </UL> <OL> <LI>tópico 1</LI> <LI>tópico 2</LI> <LI>tópico 3</LI> </OL> Atividade 5: Construa em HTML uma lista como indicado abaixo: Tópico 1 Tópico 2 Sub-tópico 2.1 Sub-tópico 2.2 Tópico 3 Como principais atributos das listas, podemos citar: Type: especifica o tipo de marcador a ser usado. Pode ser disc (disco), circle (círculo) e square (quadrado) na lista não ordenada. No caso da lista ordenada, os numerais podem ser configurados da seguinte forma: 1 para números comuns (padrão, não precisa ser especificado), A para ordem alfabética maiúscula, a para ordem alfabética minúscula, I para algarismos romanos maiúsculos e i para algarismos romanos minúsculos; Start: válido apenas para listas ordenadas, especifica o padrão inicial de contagem. São José dos Campos, 2011. 9
No caso dos marcadores <LI>, os principais atributos são: Type: permite que se mude o tipo de marcador em qualquer ponto da lista. Note que todos os marcadores seguintes seguirão essa modificação. Os tipos que podem ser alterados dependem do tipo de lista; Value: válido somente no caso de listas ordenadas, permite que se salte de um valor para outro (ex.: de 5 para 10 e depois para 7 e assim por diante). Note que os valores seguintes serão continuação dessa alteração. Exemplo: <UL type= square > <LI>Tópico 1 </LI> <LI type= circle >Tópico 2 </LI> <LI>Tópico 3 </LI> </UL> <OL type= I start=10> <LI>tópico 1</LI> <LI value=7>tópico 2</LI> <LI>tópico 3</LI> </OL> A tag DIV A utilização desta tag é uma forma prática e rápida de alinhar bloco de texto. A abreviatura DIV significa divisão. Ao usar esta tag num bloco de texto você estará atingindo todas as tags dentro daquele bloco. Suas vantagens sobre o atributo ALIGN é que: É necessário ser utilizada apenas uma vez, ao contrário do atributo Align, que tem de ser incluído em diversas tags. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabeçalho, parágrafos, citações, imagens, tabelas, etc.), enquanto que o atributo Align encontra-se disponível apenas em um número limitado de tags. São José dos Campos, 2011. 10
Para utililizá-la, você deverá colocar a tag <DIV> e acrescentar o atributo align na tag de abertura. Lembrando que o atributo align poderá ter os valores left, right e center. Veja o exemplo: <P align= center > Neste primeiro parágrafo, o texto está centralizado. Entretanto, veja o parágrafo de baixo (que não está com o atributo align): </P> <P>Este texto não está centralizado.</p> <DIV align= center > </DIV> <P>Tudo o que for colocado dentro do DIV será centralizado.</p> <P>Inclusive este texto</p> Exercicios 1. Qual a extensão de um arquivo de um programa em HTML? 2. A primeira página de um site geralmente recebe que nome? 3. Escreva a estrutura básica de um programa HTML. 4. Qual as função das tags abaixo: 1. 2. <HEAD> 3. <TITLE> </TITLE> 4. <H2> </H2> 5. 6. <B> </B> 7. <I> </I> 8. <P></P> 9. <BR> </BR> São José dos Campos, 2011. 11
5. Utilize o que você já aprendeu nesta aula e crie seu primeira página HTML. Use a linguagem HTML e faça uma página falando das suas experiências profissionais, acadêmicas, etc. Procure usar o maior número de tags e atributos possíveis. Faça o upload desta página para o servidor. 6. Crie uma página HTML na qual é apresentado um tutorial sobre a própria HTML. Demonstre as tags vistas hoje e crie exemplos de utilização. São José dos Campos, 2011. 12