Aula 06 e 07 elementos inline parte01 e 02

154 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
154
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 06 e 07 elementos inline parte01 e 02

  1. 1. Elementos Inline (X)HTML Professor Jolvani Aula 06 e 07
  2. 2. Elementos Inline(X)HTML  Nesta aula, vamos aprender o que são elementos Inline, o que são boxes inline  Na aula passada trabalhamos com as tags “hs” h1, h2 ... h6, parágrafos <p> e quebra de linha <br />. Lembre-se quando abrir uma tag trate de fechá-la.  Novos elementos do html, vamos copiar pois queremos aproveitar e colar o arquivo da última aula, alterando para aula04.html.  Revisão documento html + head + title + body – tags obrigatórias, lembre-se também que nos aprendemos a usar o primeiro atributo, o align...  Tanto as tags quanto os atributos são declarados em minúsculo. O atributo vem seguido do sinal de igual e o seu valor entre aspas duplas. E não simples, isso faz diferença para um documento xhtml.  Na aula passada falamos sobre marcação semântica ela diz que quando usamos uma tag exemplo h1 é de alta relevância quando usamos h3 sabe-se pela marcação semântica que esse título é de menor relevância que h1.
  3. 3. Elementos Inline(X)HTML  Apesar do browser estilizar (criar um estilo) de maneira tradicional dele, o html não é uma linguagem de estilização. A linguagem de estilização usada nesse curso será o CSS, lá na frente.  O html é uma linguagem de marcação de texto. Lembre-se do significado dela, Hyper Text Markup Language, então Markup Language é linguagem de marcação, o que significa isso, marcação semântica onde a gente vai usar os elementos da linguagem (h1, h3, p, br) em conformidade com seu significado.  Exemplo isso é um titulo então eu marco com esse elemento (h1)...  Isso é um sub-tíutlo então eu marco com esse elemento (h2)...  Isso é um parágrafo então eu marco com esse elemento ( )...  Partindo para aula de boxs inline, ou elementos inline....
  4. 4. Elementos Inline(X)HTML  Os elemento usados até agora são elementos em bloco (h1,h2... p), pois eles se separam, fazem uma divisão no texto...  Observe que quando foi usado h1 ele deu uma quebra de linha deixando o outro elemento mais distante dele.  As tags inline, são elementos que podem ser aplicadas dento da linha, inline pq eles permanecem na mesma linha, e tanto esses elementos em bloco como os elementos inline eles são considerados containers ou boxes ou blocos de conteúdos. Ou seja, contém um bloco retangular que pode conter outros boxes + conteúdo.  Então boxs inline são elementos da marcação xhtml que não formam blocos separados de conteúdo, eles ficam em linha.  Elemento Bold, Negrito. <b>  Elemento Itálico, <i>
  5. 5. Elementos Inline(X)HTML  Algumas dessas tags estão depreciadas, ou seja, estão caindo em desuso. Quer dizer que elas estão sendo descontinuadas pela linguagem ex: <u>  Tag <u> = sublinhado, funciona mas esta sendo descontinuada... Ai passa-se a usar o CSS para sublinhar o texto.  Outras tags, <del> </del> marca que o texto vai ser excluído.  Texto com fonte mono espaçadas (tele tipo)... <tt> </tt> meramente para apresentação (Titulo de conhecimento)  Tegs mais interessantes:  Sub Escrito e sobre escrito  <sup> </sup> e <sub> </sub>
  6. 6. Elementos Inline(X)HTML  O html é uma forma de marcar o texto, então eu quero dar ênfase em uma determinada área. Uso a tag <em> apesar de ele colocar o texto em itálico o importante é entender que quando eu marco com <em> eu “aviso” o browser que é pra ele dar ênfase no texto que eu marquei...  Posso dar + ênfase ainda: uso <strong> </strong>  Citação usa-se <q> </q>;  Texto um pouco maior que o restante <big> </big>  Texto um pouco menor que o restante <small> </small>  Esses são elementos inline, eles não excutam nenhuma quebra de linha.  Teste o <blink>, essa tag nem existe mais... Vcs como profissionais não usarão essa tag, podem conseguir esse efeito com CSS  Também depreciada <marquee> </marquee> não usar titulo de curiosidade.  Últimas referência em www.w3c.org... W3schools.com
  7. 7. Próxima Aula: Cores

×