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

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

Upload: jolvani-morgan

Post on 21-Jun-2015

131 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 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

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

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...

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

Cabeçalhos e Parágrafos (X)HTML 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.

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

Cabeçalhos e Parágrafos (X)HTML 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ó...

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

Cabeçalhos e Parágrafos (X)HTML 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...

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

Cabeçalhos e Parágrafos (X)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.

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

Cabeçalhos e Parágrafos (X)HTML 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...

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

Cabeçalhos e Parágrafos (X)HTML 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>...

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

Cabeçalhos e Parágrafos (X)HTML 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....

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

Cabeçalhos e Parágrafos (X)HTML 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...

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

Cabeçalhos e Parágrafos (X)HTML Vejamos o resultado....

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

Próxima Aula: Elementos in-line