7

Click here to load reader

Aula 06 e 07 elementos inline parte01 e 02

Embed Size (px)

Citation preview

Page 1: Aula 06 e 07 elementos inline parte01 e 02

Elementos Inline(X)HTML

Professor Jolvani

Aula 06 e 07

Page 2: Aula 06 e 07 elementos inline parte01 e 02

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.

Page 3: Aula 06 e 07 elementos inline parte01 e 02

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

Page 4: Aula 06 e 07 elementos inline parte01 e 02

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>

Page 5: Aula 06 e 07 elementos inline parte01 e 02

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>

Page 6: Aula 06 e 07 elementos inline parte01 e 02

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

Page 7: Aula 06 e 07 elementos inline parte01 e 02

Próxima Aula: Cores