Arena RPG Maker
Olá, visitante!
Seja bem-vindo ao fórum Arena RPG Maker, caso queira aprender sobre criação de jogos, está no fórum certo. Esperamos que possa aprender tanto quanto possa nos ensinar aqui.

Atenciosamente,
Equipe Arena RPG Maker.
Arena RPG Maker

Estamos de volta o/ ... Ou não.Eu amo a -Dark
Doações para o fórum abertas, clique aqui e saiba mais.
Últimos assuntos
» Pokémon Genesis Online! (PGO)
Qua 05 Jul 2017, 17:08 por Lexar

» Tileset Converter to MV
Sex 12 Maio 2017, 13:07 por Douggi

» [Dúvida] Como tirar a porcentagem de esquiva
Ter 09 Maio 2017, 22:15 por Neil Flame Runner

» Pack Resources, Sprites e etc
Qua 23 Dez 2015, 09:30 por raydengv

» Download RPG Maker 2003 + RTP em português
Ter 22 Dez 2015, 08:14 por ::KimMax::

» Fantasy Art Online
Dom 18 Out 2015, 16:42 por daviih123

» Você vai ter medo do Nerve gear?
Sab 25 Jul 2015, 16:02 por Kirito-kun

» O Barato é louco
Sab 27 Jun 2015, 15:26 por Halt

» Download RPG Maker 2000 + RTP em português
Qui 21 Maio 2015, 19:28 por Wismael

» Divulgando meu grupo e página do Facebook
Ter 19 Maio 2015, 13:06 por Halt


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Halt

avatar
Administrador
Administrador
[Autor: Gleison]




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 <font></font> e seus atributos face, size e color.
Eles serão usados da seguinte forma <font face=”nome da fonte” size=”tamanho da fonte” color=”cor da fonte”</font>, 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 <font></font> . 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> <font face="Arial”>
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> <font face="Arial” color=”#FF0000”>
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> <font face=”Arial” color=”#FF0000” size=”3”>

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 <b></b> e para aplica itálico usamos <i></i>, 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> <font face="Arial” color=”#FF0000” size=”3”>
<b><i>
Curso de HTML</i></b>
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”><font face="Arial” color=”#FF0000” size=”10”>
<b><i>
Curso de HTML</i></b></font></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 <BR> para ir para a próxima linha e o tag <p> 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”><font face="Arial” color=”#FF0000” size=”10”>
<b><i>
Curso de HTML</i></b></font></div><p>
Este é o meu Segundo exercício de HTML,<BR>
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
[Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]


__________________________________________
[Você precisa estar registrado e conectado para ver este link.]
Ei Convidado, sim você mesmo! Ajude o fórum à crescer postando coisas úteis, dê sugestões para melhorar-mos e divulgue o fórum.

Step inside, see the devil in I.

Gifts-
[Você precisa estar registrado e conectado para ver este link.] - [Você precisa estar registrado e conectado para ver este link.] - [Você precisa estar registrado e conectado para ver este link.] - [Você precisa estar registrado e conectado para ver este link.] - [Você precisa estar registrado e conectado para ver este link.]

Zerei a internet
Ver perfil do usuário http://arenarpgmaker.eclipserpg.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum