Você está na página 1de 13

NOTEPAD++ HTML

TAGS, HEAD, BODY


O que é o HTML?
Existem 3 linguagens básicas que utilizamos para
O HTML sem dúvida é a mais importante de todas,
criar websites: HTML, CSS e JavaScript.
por que como dissemos no começo, é ela que exibe a
O HTML é a linguagem que irá exibir a informação.
informação. Além de exibir a informação, ela dá
O CSS é a linguagem que vai deixar essa informação
significado. Isso é importante por que alguns sistemas
bonitona. O JavaScript é a linguagem que vai fazer
como o Google, que irão ler sua página, precisam
essa informação receber alguns comportamentos,
entender o que é cada elemento nela e o que cada um
como por exemplo ao criar um submenu ou controlar
desses elementos significam.
algo que aparece e desaparece na tela.

O acrônico HTML significa em inglês: HyperText Se você tiver que guardar alguma coisa sobre o que é
Markup Language. Para gente aqui fica: Linguagem HTML, guarde isso: HTML serve para dar
de Marcação de Hipertexto. Bonito, né? significado e organizar a informação dos websites.
◦ Já que o HTML serve para dar significado para a informação, como ele faz isso?
Simples: ele marca a informação com as tags.
◦ Por exemplo, para falarmos que um título é um título colocamos um pedaço de texto
entre uma tag chamada H1. Veja o código abaixo:
◦ <h1>Aqui vai o texto que é um título</h1>
◦ E dessa forma vamos fazendo todos os outros elementos. Um parágrafo, por
exemplo:
◦ <p>Aqui vai muito texto, um parágrafo</p>

MARCAÇÃO ◦ O resultado fica assim:


Qual é o programa a ser
utilizado???
◦ NOTEPAD!! Sim isso mesmo, basta abrir o Notepad em seu computador [padrão
em todos os computadores].
◦ Em alguns casos pode estar escrito BLOCO DE NOTAS. Esta Foto de Autor desconhecido está licenciada sob CC BY-SA.

◦ Se, por ventura, alguém possuir o Notepad++, ele é uam versão mais atualizada
do Notepad indicação de linhas de comando. Ele pode ser utilizado também.

Esta Foto de Autor desconhecido está licenciada sob CC BY-SA.


O que são Tags?
◦ Tags são o conjunto de caracteres que formam um elemento, ou seja, quando nos referenciamos à Tag "p" estamos falando
disso: <p>
◦ Existem dois tipos de Tags, as que necessitam de fechamento e as que não necessitam de fechamento.
◦ Para as que necessitam de fechamento, utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior
( > ) para abertura. Para fechamento, utilizamos o sinal de menor ( < ), seguido de barra ( / ), nome do elemento e o sinal de
maior ( > ).
Tags sem fechamento
◦ Os elementos que não necessitam de fechamento, também conhecidos como elementos vazios, somente utilizamos o sinal de
menor ( < ), seguido do nome do elemento e o sinal de maior ( > ).
TAGS HTML de título
◦ As tags de título possuem valor semântico, variando entre seis níveis
hierárquicos. Para fins de otimização é importante entender como funcionam, e
fazer uma utilização adequada. Para definir títulos, utilizamos as tags:
TAGS de texto
◦ As tags de texto definem textos, estilos de fonte, parágrafos, spans, quebras de linhas, etc. Vamos conhecê-las:

◦ <p></p> – Principal tag de texto, compõe um parágrafo;


◦ <b></b> – Transforma o conteúdo em negrito;
◦ <i></i> – Transforma o conteúdo em itálico;
◦ <br/> – Essa tag não necessita de fechamento,
◦ <hr/> – Essa tag não necessita de fechamento, ela forma uma linha horizontal.
◦ <title></title> Essa tag muda o nome que vem escrito na aba do navedador da internet.
TAGS de fonte, cor e tamanho
◦ A tag <font> é usada para modificar o tipo do texto, o tamanho e a cor. Use os atributos "size", "color" e "face" para
personalizar o texto e a tag <basefont> para colocar cor, tamanho e estilo em todo o texto.
◦ <font size="..."> texto aqui </font> é o tamanho da fonte do texto

◦ <font color="red">texto aqui</font> é a cor da fonte


◦ <font face="Arial"> Texto aqui </font> é o estilo da letra. Só olhar no Word para saber o nome das
fontes. 
TAG <DIV ALIGN="..."> COM
FECHAMENTO </DIV>
◦ Há vários tipos de TAG que usam div, mas para essa aula só iremos utilizar a tag <div align="..."> para alinhar nosso texto, ou
seja, deixá-lo centralizado [center], na esquerda [left] ou na direita [right]. Align significa alinhamento!

◦ CÓDIGOS
◦ Esquerda: <div align="left"> Texto </div>
◦ Direita: <div align="right"> Texto </div>
◦ Centralizado: <div align="center"> Texto </div>
ESTRUTURA DO HTML
◦ Será dividido em 2 partes. O título e o corpo [onde irá ser escrito o texto].

◦ Exemplo:

A Lebre e a Tartaruga
Christiane Araújo Angelotti adaptação da obra de Esopo

_____________________________________________________________________________________________________________________
     Era uma vez... uma lebre e uma tartaruga.
A lebre vivia caçoando da lerdeza da tartaruga.
Certa vez, a tartaruga já muito cansada por ser alvo de gozações, desafiou a lebre para uma corrida.
A lebre muito segura de si, aceitou prontamente.
Não perdendo tempo, a tartaruga pois-se a caminhar, com seus passinhos lentos, porém, firmes.
Logo a lebre ultrapassou a adversária, e vendo que ganharia fácil, parou e resolveu cochilar.
Quando acordou, não viu a tartaruga e começou a correr.
Já na reta final, viu finalmente a sua adversária cruzando a linha de chegada,, toda sorridente.
ESTRUTURA DO HTML
◦ No HTML, seria necessário criar uma estrutura com as TAGS a seguir para escrever o conto A Lebre e a Tartaruga

<html>
<head>
       "Título de texto aqui [título a lebre e a tartaruga]"
</head>

<body>
            "O conto aqui na tag do corpo do site"
</body>

</html>
EXERCÍCIO
◦ 1. Criar um conto em um site HTML contendo:
◦ - Um título com fonte 40 e em vermelho, o nome do
autor do conto em qualquer cor e com fonte 12 e uma
linha dividindo o título do corpo
◦ - Uma conto de 4 versos utilizando quebra de linha
para cada um dos versos

Você também pode gostar