HTML - Parte 1, Notas de estudo de Matemática

Baixe HTML - Parte 1 e outras Notas de estudo em PDF para Matemática, somente na Docsity!

1 – Introdução ao HTML e formatação de texto

Vinicius A. de Souza [email protected]

Sumário

• Introdução.............................................................................................................................................
• Uma visão geral do HTML
  • Estrutura do documento...................................................................................................................
• Tags para formatação de texto..............................................................................................................
  • Títulos..............................................................................................................................................
  • Parágrafos
  • Negrito, itálico e sublinhado............................................................................................................
  • Tags “coringas” BR e HR................................................................................................................
  • Sobrescrito e subscrito.....................................................................................................................
  • Formatação de fonte.........................................................................................................................
  • Tabelas de cores e caracteres...........................................................................................................
  • Marcadores e numeração.................................................................................................................
• A tag DIV...........................................................................................................................................
• Exercicios...........................................................................................................................................

Atividade 2: Crie sua primeira página web, utilizando o código abaixo como exemplo:

Desenvolvimento Web

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: Título da página. Existem outros elementos adicionais de importância grande, mas abordaremos tais elementos mais à frente. Mecanismos de buscas, na Internet, utilizam os elementos e 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 o maior deles e, obviamente, o menor. Veja o exemplo abaixo:

Desenvolvimento Web

Teste Teste Teste Teste Teste Teste

Parágrafos

A inserção de uma tag

, 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.

Desenvolvimento web

Curso de desenvolvimento web. Aula 1 HTML

Para modificar a posição do texto, utilize o atributo ALIGN dentro da tag

. Por exemplo:

Desenvolvimento web

Curso de desenvolvimento web.

Curso de desenvolvimento web.

Curso de desenvolvimento web.

Curso de desenvolvimento web.

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:

## 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 e SUB>. Exemplo:

Desenvolvimento web

Dado um triangulo retangulo, temos que: a2 = b2 + c2

A soma da serie aritmetica eh dada por: X1 + X2 +... + Xn

Formatação de fonte

Vamos agora formatar as fontes da nossa página. Para isso vamos usar o tag com seus atributos FACE , COLOR e SIZE. A tag 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 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 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.

Desenvolvimento web

fonte padrao

Texto em fonte Times.

Texto em azul.

Texto aumentado, tamanho 6.

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:

Desenvolvimento web

São José dos Campos – acentuação errada !

São José dos Campos – acentuação correta !!

Texto em azul.

Texto em outro azul

Texto em outro azul

Obs.: Verifique outros códigos de cores, caracteres especiais e acentuações nos links indicados na página da disciplina na internet.

No caso dos marcadores , 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:

Desenvolvimento web

Tópico 1 Tópico 2 Tópico 3

tópico 1 tópico 2 tópico 3

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 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.

Para utililizá-la, você deverá colocar a tag 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:

Desenvolvimento web

Neste primeiro parágrafo, o texto está centralizado. Entretanto, veja o parágrafo de baixo (que não está com o atributo align):

Este texto não está centralizado.

Tudo o que for colocado dentro do DIV será centralizado.

Inclusive este texto

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:
   9.