Curso de HTML - Aula 4

Halt

Halt

Administrador

Mensagens : 1662
AP's

AP's : 2147483645

Respeito : 61
Idade : 24
Localização : Rio de Janeiro

[Autor: Gleison]

Curso de HTML - Aula 4 – Inserindo e Formatando Texto Aulcj0

Agora que já aprendemos os tags de inicio vamos aprender como inserir texto e formatar, para isso inicie um novo documento e salve-o com o nome ex2.html, depois o deixe como mostrado abaixo.
<HTML>
<head>
<title>Exercício 2</title>
</head>
<body>Curso de HTML
Este é o meu Segundo exercício de HTML,
E nele irei aprender a formatar o texto.
</body>
</HTML>Salve seu arquivo e abra-o no navegador, veja que temos um texto simples sem formatação.

O QUE PRECISO SABER SOBRE FONTES

Antes de formatar a fonte da página você deve ter em mente que qualquer documento de texto, para ser bem visualizado necessita que no computador do usuário tenha a respectiva fonte instalada, por isso não adianta criar sua página usando uma fonte linda que não será bem visualizada pelo usuário porque ele não tem a fonte instalada em seu computador. Para resolver esta questão devem-se usar fontes mais comuns e configurar fontes alternativas.

MUDANDO A FONTE, A COR, E O TAMANHO PADRÃO DO TEXTO DA PÁGINA.

Se você tem acompanhado a aula desde o inicio deve estar lembrado de que eu havia dito que não iria ensinar css porque isso poderia ser definido dentro da própria página, pois bem agora iremos aprender algo que pode ser feito em CSS.
Nós iremos usar o tag e seus atributos face, size e color.
Eles serão usados da seguinte forma , lembrando que não é obrigatório usar os três, você pode usar cada um em separado, porem se usado assim eles devem ter o tag . O tag font deve ser fechado do contrário todo o texto que estiver após ficará com a mesma formatação.
Para definir fontes alternativas, acrescente uma virgula depois da fonte escolhida e coloque o nome da fonte alternativa.
Para definir o tamanho digite um valor de 0 a 6 que são pré definidos ou digite o valor em px.
Para definir a cor utilize os códigos hexadecimais respectivos ou os nomes das cores pré definidas.

Vamos utilizar o código visto anteriormente, ainda no ex2.html acrescente ao código de forma que fique como o abaixo.

<HTML>
<head>
<title>Exercício 2</title>
</head>
<body> Curso de HTML
Este é o meu Segundo exercício de HTML,
E nele irei aprender a formatar o texto.
</body>
</HTML>

Salve seu arquivo e abra-o no navegador, veja que temos um texto simples com fonte arial.

MUDANDO A COR[/]

Ainda no ex2.html acrescente ao código de forma que fique como o abaixo.

<HTML>
<head>
<title>Exercício 2</title>
</head>
<body> Curso de HTML
Este é o meu Segundo exercício de HTML,
E nele irei aprender a formatar o texto.
</body>
</HTML>

Salve seu arquivo e abra-o no navegador, veja que temos um texto simples com fonte arial e cor vermelha.

MUDANDO O TAMANHO

Ainda no ex2.html acrescente ao código de forma que fique como o abaixo.

<HTML>
<head>
<title>Exercício 2</title>
</head>
<body> 
Curso de HTML
Este é o meu Segundo exercício de HTML,
E nele irei aprender a formatar o texto.
</body>
</HTML>
Salve seu arquivo e abra-o no navegador, veja que temos um texto simples com fonte arial, tamanho 3 e cor vermelha.

APLICANDO NEGRITO E ITALICO

Para aplicar negrito usamos o tag e para aplica itálico usamos , lembrando que o texto deve estar entre os tag de abertura e fechamento. Vamos utilizar.
Volte ao ex2.html e adcione os seguintes tag para que fiquem como o abaixo.

<HTML>
<head>
<title>Exercício 2</title>
</head>
<body> 
Curso de HTML
Este é o meu Segundo exercício de HTML,
E nele irei aprender a formatar o texto.
</body>
</HTML>
Salve seu arquivo e abra-o no navegador, veja que o texto aparece em negrito e italico.

ALINHANDO CARACTERES

Para alinhar usamos o tag <div></div> com o atributo align. O atributo align pode assumir os seguintes valores: Left(esquerdo), Center(centralizado), right(direita) e justify(justificado).

Volte ao ex2.html e adicione os seguintes tag para que fiquem como o abaixo.

<HTML>
<head>
<title>Exercício 2</title>
</head>
<body>
<div align=”Center”>
Curso de HTML</div>
Este é o meu Segundo exercício de HTML,
E nele irei aprender a formatar o texto.
</body>
</HTML>

Salve seu arquivo e abra-o no navegador, veja que o texto aparece em negrito, itálico na cor vermelha, tamanho 10 e fonte Arial.

PULANDO LINHA E PASSANDO PARA A PRÓXIMA

Como você já deve ter percebido o texto que foi digitado não tem quebra de linha e nem pula de linha, a única linha pulada foi por causa do tag de alinhamento, como já foi dito antes o HTML precisa ser programado em tudo inclusive na quebra de linha e pulo. Para isso usamos o tag para ir para a próxima linha e o tag para pular uma linha, esses tag não necessitam ser fechados e são usados após a ultima palavra.

Volte ao ex2.html e adcione os seguintes tag para que fiquem como o abaixo.

<HTML>
<head>
<title>Exercício 2</title>
</head>
<body>
<div align=”Center”>
Curso de HTML</div>
Este é o meu Segundo exercício de HTML, 
E nele irei aprender a formatar o texto.
</body>
</HTML>

Salve seu arquivo e abra-o no navegador, veja que o texto agora tem um fim e após o titulo há uma linha pulada.

TAG H1 A H6

Esses são tags pouco usado, nada mais são do que títulos pré formatos onde um valor de H menor indica um texto maior e um valor de H maior um texto menor.

DIVISÓRIAS

Esses são tags pouco usado, o tag de divisória é o hr que pode ter como atributo Align(pode ser Left - esquerdo, Center - centralizado, Right - direito),Width(Largura), Color(cor) e size(espessura).

LISTAS ORDENADAS E INORDENADAS

Um recurso interessante é a criação de lista para isso deveram usar o tag <UL></UL> para listas sem ordem e <OL></OL> para listas ordenadas, para iniciar a lista usa-se o tag <LI></LI> após o tag de lista.
Crie um novo arquivo e salve com o nome ex3.html.

<HTML>
<head>
<title>Exercício 3</title>
</head>
<body>
<ul>
<li>Lista inordenada</li>
<li>lista inordenada2 </li>
</ul>
<ol>
<li>Lista Ordenada</li>
<li> Lista Ordenada</li>
</ol>
</body>
</HTML>

ATRIBUTO <UL></UL>

Lista inordenada podem usar o atributo TYPE com propriedade CIRCLE(CIRCULO COM CONTORNO PRETO E FUNDO BRANCO), DISK(CIRCULO TODO PRETO), SQUARE(QUADRADO PRETO).

ATRIBUTO <OL></OL>

Lista ordenada pode usar o atributo TYPE com propriedade 1(numérica), A(alfabética), I(Romana). Pode-se usar o atributo START, indicando qual será o valor inicial da lista.

Exercício

Crie uma pagina:
Nome:exepratico1.html
Titulo:Exercicio Pratico
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto restante na cor: #FFFF00
Texto Restante: Esse é o meu primeiro exercicio prático,
e nele pretendo praticar o que foi aprendido ate agora.
Crie como foi citado inclusive respeitando as quebra de linha

Legenda:

Texto azul = Códigos e atributos do HTML
Texto Azul em negrito = Codigos a serem adcionados ao codigo já existente.
Texto preto = Conteúdo da pagina.
Texto verde = Observações e considerações importantes.

Perdeu alguma aula?, Quer saber qual é a proxima? Visite o Indice
Clique aqui Clique aqui para visitar o site oficial

1 Curso de HTML - Aula 4 – Inserindo e Formatando Texto Qui 20 Dez 2012, 20:01

Halt