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

313 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
313
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. Cabeçalhos e Parágrafos (X)HTML Professor Jolvani Aula 04 e 05
  2. 2. 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...
  3. 3. 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.
  4. 4. 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ó...
  5. 5. 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...
  6. 6. 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.
  7. 7. 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...
  8. 8. 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>...
  9. 9. 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....
  10. 10. 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...
  11. 11. Cabeçalhos e Parágrafos (X)HTML  Vejamos o resultado....
  12. 12. Próxima Aula: Elementos in-line

×