Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02

Cabeçalhos e Parágrafos
(X)HTML
Professor Jolvani
Aula 04 e 05

Cabeçalhos e Parágrafos (X)HTML
 Nesta aula, aprenderemos um pouco sobre Cabeçalhos e parágrafos. Uma
breve revisão, na aula anterior criamos o nosso primeiro arquivo html,
criamos primeiro um diretório, e nesse diretório criamos um arquivo com a
extensão .html.
 Dica, os browser também entendem outras extensões, xhtml, htm, irá
funcionar da mesma forma.
 Então vamos, abrir nosso navegador e nosso editor de arquivo html, lembra?
Notppad++;
 Nele podemos criar um novo arquivo html, bom podemos cria-lo diretamente
no diretório veja o exemplo...

 Se eu quiser visualizar esse arquivo no browser, clique duplo no mesmo.
 Verifique que o arquivo abriu usando o Firefox, pois neste caso ele esta
associado a este navegador.
 Iniciando a codificação. Tags obrigatórias... (html, head, title, body)
 Colocando titulo, procure usar um titulo não muito pequeno, e que possa
representar aquilo que iremos trabalhar, por exemplo...
 Xhtml 03 # 03 – vago == horário # Viação Planeta – Horários de ônibus
 O titulo retrata o assunto que iremos abordar no documento
 Não Usar: --xx-- / Titulo / Tabelas de horários... Não aconselhável.

 Onde vai <p> conteúdo. Entre as tags Body, então teste...
 Nos queremos colocar um texto nesse conteúdo... Selecione um texto,
qualquer e coloque no corpo do documento html.
 Ai esta o nosso html...
 A seguir o resultado...
 Observem que o resultado
ficou tudo na mesma linha...
Numa linha só...

 O texto não ficou bem estruturado, apesar de ter colocado quebras de linhas,
espaços entre linhas, parágrafos no arquivo html ele não reproduziu o mesmo
formato (resultado)...
 Mas eu quero que esse seja um
parágrafo principal
 Nos temos algumas tag que são
usadas para títulos ou cabeçalhos
que vai de h1 até h6..
 <h1></h1> se refere ao principal
título do documento, então imagine
que eu possuo um titulo, um
subtítulo e assim por diante....
 Então título principal seria h1
 Um subtítulo usaria h2 e assim por
diante, verifique como fica o
html...

 Quando nos abrimos esse arquivo, no browser note que ele recebe uma
formatação diferente, mas essa formatação é padrão do browser. Formatação
se aprende quando estivermos estudando CSS.
 Essa formatação básica já mostra
uma grande mudança no texto...
 Crie um outro título h3 e veja a
diferença... h1 + relevante, h2 –
relevante, h3 -, h4 ...
 Isso serve para estilizar nossa
pagina dar um visual diferente,
chama-se marcação semântica.
 Conceito fundamental na
construção de sites padrões web.
 Padrões web seguem normas W3C.

 A semântica é a parte da linguística que estudo o significado das palavras,
então ela é a marcação semântica que usa os elementos da linguagem html
em conformidade o significado de seus elementos. Por exemplo:
 Então se isso é um título uso tag h1
 Se isso é um subtítulo uso h2 ...
 Se encontrar um parágrafo uso <p>
lembrando sempre de fechar a tag
</p>.
 Observem que deu uma quebra de
linha no parágrafo deixando um
espaço sobre o segundo bloco de
texto...

 Faça isso para os outros parágrafos e veja o resultado... Observem que eu
alterei um pouco o texto e inseri as tags <p> e cabeçalho <h3>...
 Não se preocupem por enquanto com as
palavras que não estão acentuadas
 Caso queira resolver usa a tag <meta
charset="utf-8” /> abaixo de <head>...

 Agora eu quero adicionar uma lista no meu texto, vamos ao exemplo... Eu
poderia colocar em parágrafo, mas veja o resultado...
 Ficou uma linha, um atrás do outro, então como posso quebrar a linha desse
texto? Usando a tag <br/> segundo as regrar do xhtml deve-se usar <br /> (br
espaço barra)
 Esta ai o resultado, a tag <br> quebrou a linha de cada um dos itens, formando
uma lista...
 E vamos finalizar nosso texto colocando um endereço....

 Poderíamos usar outras tags, mas por enquanto vamos trabalhar com
paragrafo <p>, cabeçalho <h> e quebra de linha <br>..
 Agora, vamos ver mais uma característica das tags,
até esse momento nos usamos tags sem o uso de
atributos, então as tags possuem atributos...
 Os atributos sempre vão nas tags de abertura.
 Vamos então usar um atributo para o paragrafo <h1
align=“center”>
 Um atributo é sempre declarado da
seguinte maneira, o nome do
atributo + o sinal de igual e o valor
sempre entre aspas duplas.
 O atributo também é sempre em
letras minúsculas.
 Poderiam
centralizar
os outros
cabeçalhos e
até os
parágrafos
façam isso...

 Vejamos o resultado....

Próxima Aula: Elementos in-line

Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Destaque

Destaque (20)

Semelhante a Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02

Semelhante a Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02 (20)

Mais de Jolvani Morgan

Mais de Jolvani Morgan (15)

Aula 04 e 05 cabeçalhos e parágrafos parte01 e 02