Criando um documento HTML básico

•

IFCE

0

Jandeildo Alves

20.03.2017

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 3 páginas

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação Web

1.742 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

www.tiexpert.net – O ponto de encontro do estudante de TI
Editando o primeiro documento
Para criarmos nosso primeiro documento html, iremos iniciar do modo mais básico, que é inserir um simples 
texto.
Qualquer texto ou outro elemento html que será exibido no browser deve ser colocado dentro da tag BODY. 
Veja um pequeno exemplo:
<HTML>
 <HEAD>
 <TITLE>Exemplo</TITLE>
 </HEAD>
 <BODY>
 Minha primeira página HTML
 </BODY>
</HTML>
Isso é o suficiente para mostrar uma página com a barra título da janela escrita Exemplo e no documento 
escrito Minha primeira página HTML.
Mas, e se por acaso quiséssemos fazer um documento com duas linhas separadas usando o método acima, 
jamais conseguiríamos. Isso ocorre porque o código HTML não reconhece espaços em branco. Portanto, 
não importa o espaço que deixarmos entre uma palava e outra ou entre uma linha e outra, pois o máximo 
que irá acontecer será uma palavra ficar separada da outra. Veja o exemplo:
<HTML>
 <HEAD>
 <TITLE>Exemplo</TITLE>
 </HEAD>
 <BODY>
 Linha
 HTML.
 Outra
 linha
 HTML.
 </BODY>
</HTML>
Seria exibido no browser da seguinte maneira:
Então, se quisermos criar várias linhas, uma separada da outra, devemos criar parágrafos.
Criação de Parágrafos
A criação de parágrafos é definida pela tag P. Cada tag P deve conter abertura e fechamento para indicar 
onde termina o parágrafo.
Então para modificar a visualização acima faríamos:
<HTML>
 <HEAD>
 <TITLE>Exemplo com parágrafo</TITLE>
 </HEAD>
 <BODY>
 <P>Linha HTML.</P>
http://www.tiexpert.net/ver.php?page=90 Página 1
www.tiexpert.net – O ponto de encontro do estudante de TI
 <P>Outra linha HTML.</P>
 </BODY>
</HTML>
Modificar o alinhamento
O alinhamento do parágrafo é definido pela propriedade align que pode receber quatro valores diferentes:
valor efeito
left alinhar à esquerda
right alinhar à direita
center alinhar ao centro
justify justificar
Então, para criar um parágrafo alinhado diferentemente do outro faríamos.
<P ALIGN="left">Parágrafo à esquerda</P>
<P ALIGN="right">Parágrafo à direita</P>
<P ALIGN="center">Parágrafo ao centro</P>
<P ALIGN="justify">Parágrafo justificado</P>
Quebra de linha
A quebra de linha é usada apenas para mudar um determinado ponto do parágrafo de linha. Isso acarreta 
uma diferença na visualização.
Se prestarmos atenção, há um grande espaço deixado entre uma linha e outra do parágrafo, porque são 
dois parágrafos diferentes. Mas se quisermos criar um parágrafo com duas linhas, obrigatoriamente, 
usaremos a quebra de linha que é identificado pela tag BR.
Existe duas formas de usar a tag BR, se estivermos utilizando um código XHTML seremos obrigados a 
enclausurar a tag (fechá-la dentro dela mesma), mas não o fazemos se estivermos utilizando HTML. Em 
tese seria:
HTML -> <BR>
XHTML -> <BR />
Então, para finalizar, vejamos o código:
<HTML>
 <HEAD>
 <TITLE>Quebra de linha</TITLE>
 </HEAD>
 <BODY>
 <P>TI Expert <BR> www.tiexpert.net</P>
 </BODY>
</HTML>
http://www.tiexpert.net/ver.php?page=90 Página 2
www.tiexpert.net – O ponto de encontro do estudante de TI
Visualmente, conseguiríamos esta forma:
Vale ressaltar que as recomendações para o novo HTML versão 5 diz que a tag P, preferencialmente, não 
deve ser usada para trechos de texto mais significativos. Por exemplo, se usarmos no rodapé da página um 
endereço de e-mail, ao invés de escrevermos esse endereço na tag P, deveríamos escrevê-lo dentro da tag 
ADDRESS própria para endereços
Características - tag P (texto - parágrafo)
uso
HTML 4.01 <P> ... </P>
XHTML <P> ... </P>
HTML 5 <P> ... </P>
Formatação 
Padrão
fonte Serif, 16px
cor #000000 (preto)
alinhamento esquerdo
margem superior 16px
margem inferior 16px
visualização bloco
Atributos Aceitos align, title, lang, id, class e style
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Fonte: w3.org
Características - tag BR (texto - quebra de linha)
uso
HTML 4.01 <BR>
XHTML <BR />
HTML 5 <BR>
Formatação Padrão visualização inline
Atributos Aceitos id, class, title, style, clear 
Eventos Possíveis nenhum
Fonte: w3.org
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons
Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-nc-sa/2.5/br/
ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
http://www.tiexpert.net/ver.php?page=90 Página 3