aula 04 e 05 cabeçalhos e parágrafos parte01 e 02
TRANSCRIPT
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...
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.
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ó...
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...
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.
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...
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>...
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....
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...
Cabeçalhos e Parágrafos (X)HTML Vejamos o resultado....
Próxima Aula: Elementos in-line