Descomplica Web!: março 2013

segunda-feira, 18 de março de 2013

Template Layout

1- DOCUMENT FLOW:
O document flow(fluxo do documento), é a maneira como os elementos HTML são apresentados na tela do computador ou dispositivo mobile, ou melhor dizendo, como eles são RENDERIZADOS no navegador.
Antes de sabermos como isso funciona, devemos primeiro saber que a maioria dos elementos no HTML são classificados em dois grupos:
* Elementos Block-level.
* Elementos Inline.
Os elementos block-level são aqueles que, assim que colocados no documento, mandam para baixo os elementos posteriores a ele(calma, vou explicar melhor).

Abaixo segue a lista de todos os elementos block-level:

<aside>

<audio>

<dd>

<div>

<dl>

<form>

<hr>

<ol>

<p>

<pre>

<table>

<tfoot>

<ul>

<video>

Vou mostrar um exemplo usando a tag <div></div>:

Neste exemplo há dois elementos block-level: <h3> e <div>, observe que a <div> está abaixo do texto(<h3>), este é o código para gerar este documento:

<!DOCTYPE html>

<html>

<body>

<h3>Texto sendo apresentado tranquilamente =) </h3>

<div style="width:80px;height:80px;background-color:pink;">Div quietinha</div>

</body>

</html>

Veja agora o que acontece se colocarmos a <div> em cima do <h3>:

A <div> sendo um elemento block-level, empurra os demais elementos para baixo dela. Repare que embora caibam os dois elementos, o texto e a div, ela ainda assim, empurra-o para baixo.

Abaixo tem uma lista com alguns elementos inline:

<em>

<a>

<abbr>

<dfn>

<code>

<samp>

<kbd>

<var>

<b>

<i>

<u>

<small>

<s>

<span>

<br>(ele força uma quebra de linha, mas em si, é um elemento inline)

<bdo>

<cite>

<del>

<ins>

<q>

<sub>

<wbr>

<area>

<img>

<map>

<param>...

...E muitos outros (pesquisem aqui: http://en.wikipedia.org/wiki/HTML_element#Inline_elements).

Agora veja o que acontece quando a gente coloca um elemento inline após outro:

O código que gera esse resultado:

<!DOCTYPE html>

<html>

<body>

<em>Texto com ênfase!</em>

<span style="background-color:pink;">span simples</span>

</body>

</html>

Note que o elemento <em> é amiguinho do <span>, ele não empurra o <span> para baixo, mas sim, permite que ele fique ao seu lado. É exatamente essa a diferença entre os elementos do tipo block-level e os elementos inline: os block-level empurram o próximo elemento para baixo, enquanto os inline mantém o próximo elemento à direita.

2- PROPRIEDADE POSITION:

Para posisionar um elemento HTML de uma forma especial, usamos o position. Posicionar... position... sacou? Dexa prá lá.

O position é uma propriedade CSS muito útil caso você precise alterar o document flow (exemplo acima).

Existem 3 tipos de position:

*Position Fixed

*Position Relative

*Position Absolute

Position Fixed:

Fixa o elemento(jura?) ao documento nas coordenadas que você definir, com ele mesmo que a página role, o elemento fica parado onde sempre esteve.

Mas como usar essa propriedade? Abaixo temos um exemplo:

<!DOCTYPE html>

<html>

<body>

<div style=

"width:100px;height:100px;background-color:pink;

left:200px;

top:50px;

position:fixed;">Daqui não saio<br>daqui ninguém me tira!</div>

<p>

exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo

exemplo exemplo exemplo exemplo exemplo exemplo

</p>

</body>

</html>

Mesmo a <div> sendo um elemento block-level, ela não empurra o <p>, que também é um elemento block-level, ficando fixa na posição: left:200px; e top:50px;

Outra coisa: ao se usar o position, a posição(ou coordenada) é definida a partir da ponta esquerda de cima, no caso do position fixed: o navegador calcula as coordenadas partindo da ponta esquerda de cima, da tela.

Position Relative:

Posiciona o elemento em relação a si mesmo, o ponto zero(de onde começa o cálculo para as coordenadas), é o canto superior esquerdo, a partir daí o navegador acrescentará os píxels.

Position Absolute:

Trabalha quase da mesma maneira que o position relative, porém ele é utilizado para posicionar elementos dentro de outros elementos, ou seja, calcula as coordenadas em relação ao elemento pai.

Exemplo:

E o seu código:

<!DOCTYPE html>

<html>

<body>

<div style=

"width:100px;height:100px;background-color:pink;

left:50px;

top:50px;

position:absolut;">Absolute

</div>

</body>

</html>

3- PROPRIEDADE FLOAT:

A propriedade float do CSS, também permite alterar o document flow.

Existem dois atributos que podemos colocar em float:

*left

*right

Veja um exemplo usando o float:left;

e o código:

<!DOCTYPE html>

<html>

<body>

<div style="width:100px;height:100px;background-

color:pink;float:left;">esquerda</div>

</div>

</body>

</html>

No caso acima, a div rosa ficou à esquerda dentro da div cinza.

Agora veja se usarmos o float:right;

Viu só? A div agora foi para a direita, o que não é padrão(por padrão os elementos vão de cima para baixo, e da esquerda para a direita, como na leitura).

a) Clear:

A propriedade clear especifica quais os lados de um elemento onde outros elementos flutuantes não são permitidos. Por exemplo: se você não quer que os elementos flutuem para a direita dentro de um elemento <p> por exemplo, basta usar(no css):

p.clear{

clear:right;

}

Para limpar a esquerda:

p.clear{

clear:left;

}

E para limpar ambos os lados:

p.clear{

clear:both;

}

b) Problemas de Pushdown e possíveis soluções:

Pushdowns são problemas que ocorrem quando um ou mais elementos não cabem dentro de outro e, dessa forma, empurram todos os outros elementos para baixo deixando a maior confusão no layout da página.
Abaixo mostro um exemplo bem simples de pushdown:

Veja a bagunça.
Agora vamos estudar o código:

<!DOCTYPE html>
<html>
<body>

<div style="width:300px;height:300px;background-color:gray;">

<div style="width:150px;height:150px;background-color:pink;float:left;">div 1</div>
<div style="width:160px;height:160px;background-color:pink;float:left;">Não coube =(</div>

</div>

</body>
</html>

As duas divs rosas estão dentro de outra div, essa div(a maior), tem 300 píxels de width.
A div 1 tem 150 píxels de width, e a outra tem 160 píxels, ou seja não cabem as duas juntas, uma ao lado da outra, sendo assim a div que não coube foi para baixo, e se tivessem outros elementos depois dela eles seriam empurrados também.

Mas o que fazer então caso isso ocorra?
Simples: preste atenção aos tamanhos de largura, e nunca defina uma altura em um elemento pai(aquele que receberá outros elementos, esses sim podem ter altura). Outra coisa a se fazer é colocar a propriedade position absolute, mas lembre-se: o position absolute tira o elemento do fluxo do documento(document flow), portanto tenha cuidado.

I) Falso posicionamento absoluto:

Isto serve para trabalhar com colunas e linhas(e os elementos que estão dentro delas) de forma que se ajuste à tela sem que haja problemas como push-down etc.
Esse método é feito usando uma combinação de position: relative , à esquerda: 100% e um negativo da margin esquerda .

O CSS aplicados a estes elementos é o seguinte:
.Linha {
float: left;
width: 100%;
display: block;
position: relative;
}

.Item {
position: relative;
float: left;
left: 100%;
}

Para posicionar um determinado item, tudo o que precisamos de fazer é dar uma margem esquerda negativa e uma largura . Por exemplo:

#item1{

margin-left: -100%;

width: 30%;

}

c) PROBLEMAS CROSSBROWSER E POSSÍVEIS SOLUÇÕES:

Com a grande quantidade de navegadores existentes no mercado, acontecem alguns errinhos na renderização que causam um certo transtorno ao desenvolvedor, pois o que funciona em alguns navegadores pode não funcionar em outros, ou as vezes funciona em todos e deixa de funcionar em apenas um deles...(estou falando de vc, IE....brincadeira).

Mas há uma luz no fim do túnel!(tomara que não seja um trem vindo daquela direção).

Para sanar esses erros, ou pelo menos diminuí-los, basta prestar bastante atenção quanto aos itens abaixo:

1) Identifique a resolução do seu público-alvo
2) Trabalhe em cima das Web Standards(padrões web, ou seja, W3C)
3) Faça testes em diversos navegadores
4) Realize os testes primeiro em navegadores modernos

d)TEMPLATE LAYOUT:

A propriedade float é muito simples de se entender. O problema não é o funcionamento, mas os efeitos que a propriedade float causa nos elementos próximos. Se você pede para duas colunas ficarem flutuando à esquerda e outra coluna à direita, o rodapé sobe. Ou se você coloca um elemento envolvendo outros elementos com float, esse elemento perde a altura. Estes são problemas corriqueiros que já tem soluções inteligentes e que não apresentam chateações mais graves.
Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente ligado a ordem dos elementos no HTML. Existem técnicas que você consegue fazer quase que qualquer organização visual sem encostar no código HTML. Mas há outras necessidades que invariavelmente você precisará modificar a ordem dos elementos no meio do HTML para que a diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde programação server-side e até resultados de SEO e acessibilidade. Por isso é interessante que o HTML fique organizado de forma que ele supre as necessidades dessas bases. Sua organização visual deve ser independente desta organização.

I) TEMPLATE-BASED POSITIONING:

Tendo em vista estes e outros problemas o W3C criou um novo módulo. Na verdade ele não é o único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questão é chamado de Template Layout. Esse módulo consiste em uma forma de criarmos e organizarmos os elementos e informações do layout de forma menos espartana e mais flexível.
Podemos dividir a construção do layout em duas grandes partes: 1) Definição dos elementos mestres e grid a ser seguido. 2) Formatação de font, cores, background, bordas etc.
As propriedades nesta especificação trabalham associando uma política de layout de um elemento. Essa política é chamada de template-based positioning (não tem nada a ver com a propriedade position, pelo contrário é uma alternativa) que dá ao elemento uma grid invisível para alinhar seus elementos descendentes.
Porque o layout deve se adaptar em diferentes janelas e tamanhos de papéis, as colunas e linhas do grid deve ser fixas ou flexiveis dependendo do tamanho.
O W3C mostra alguns casos comuns:
· Páginas complexas com múltiplas barras de navegação em áreas com posições fixas como publicidade, submenus e etc.
· Formulários complexos, onde o alinhamento de labels e campos podem ser facilmente definidos com as propriedades deste módulo com a ajuda das propriedades de margin, padding e tables.
· GUIs, onde botões, toolbars, labels, ícones etc, tem alinhamentos complexos e precisam estar sempre alinhados caso o tamanho ou a resolução da tela mudam.
· Medias que são paginadas, como medias de impressão onde cada página são divididos em áreas fixas para conteúdos de gêneros diferentes.
Template-based positioning são uma alternativa para a propriedade position com o valor absolute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagramar layouts utilizando position. Não que seja errado, mas definitivamente não é a melhor forma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande, mas para pequenos detalhes. Usamos position para posicionarmos elementos que não tem relação direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o position:absolute; irá posicionar o elemento nas coordenadas que você quiser.
Sintaxe e funcionamento

O módulo Template Layout basicamente define slots de layout para que você encaixe e posicione seus elementos. O mapeamento dos slots é feito com duas propriedades que já conhecemos que este módulo adiciona mais alguns valores e funcionalidades, são as propriedades position e display.
A propriedade display define como será o Grid, ou seja, quantos espaços úteis terá o layout.
A propriedade position irá posicionar seus elementos nestes slots.

Veja o código HTML abaixo:

<div class=”geral”>
<nav class=”menu”>...</nav>
<aside class=”menulateral”>...</aside>
<aside class=”publicidade”>...</aside>
<article class=”post”>...</article>
<footer>...</footer>
</div>

Agora vamos definir a posição destes elementos.

O código CSS seria assim:

.geral {
display: “aaa”
“bcd”
“eee”;
}

nav.menu {position:a;}
aside.menulateral {position:b;}
aside.publicidade {position:d;}
article.post {position:c;}
footer {position:e;}

Puro gesso! (Lê-se puro gessó)
Logo menos traremos mais postagens aguardemmm...

terça-feira, 5 de março de 2013

Atividade 01 - PPSI II

Taquigrafia CSS

Olá, falarei agora sobre taquigrafia css. Como sabemos o CSS(Cascading Style Sheet) é um tipo de linguagem de formatação que é usada no HTML, ela facilita muito a vida do desenvolvedor pois fica mais fácil editar a formatação de elementos e também é possível fazer sites mais bonitinhos :) .

O que é taquigrafia css?

É uma maneira de simplificar a escrita das formatações no CSS. Como a escrita do CSS se torna menor, ela ajuda no carregamento da página como um todo diminuindo as requisições ao servidor, e aumentando a rapidez com que a página é mostrada.

Como reconhecer uma taquigrafia CSS:

A taquigrafia transforma as várias chamadas CSS de uma elemento em uma só, veja uma exemplo:

Suponhamos que temos uma div com id="xuxu", agora... "suponhamos que isso seja uma caveira..."-Seu Madruga Professor (http://www.youtube.com/watch?v=GWfsfGIm9r4 exatamente aos 28:27)- brincadeira (não resisti)- voltando ao post: Suponhamos que você precise adicionar uma borda a ela de 3 píxels, essa borda deve ser vermelha e pontilhada. Como você faria isso?

Exemplo sem taquigrafia: (dentro do arquivo .css)

#xuxu{

border:3px;

border-color:red;

border-style:dashed;

}

Apareceria dessa forma no navegador:

Agora vamos ver a forma taquigráfica de se escrever:

#xuxu{

border: 3px red dashed;

}

Assim reduzimos o conteúdo de três linhas em apenas uma! E o resultado é o mesmo, obviamente.

Alguns exemplos(como se estivéssemos trabalhando com um arquivo .css) abaixo mostram como é prático o uso da taquigrafia CSS.

Fundo

body{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}

Nesse exemplo o fundo será verde, conterá uma imagem de nome: "smiley.gif", ela não será repetida e ficará fixa no centro, como mostrado abaixo:

Propriedades de fronteira

Usaremos o exemplo do xuxu acima, as fronteiras no css são usadas através de "border" e "margin",

além podermos fazer como o exemplo do xuxu, podemos também colocar duas margens na div para que ela fique mais para direita e mais para baixo:

#xuxu{

border:3px;

border-color:red;

border-style:dashed;

margin:100px 50px;

}

O primeiro valor(100px) representa: "margin-top:100px;" e o segundo representa: "margin-right:50px;", poderiam ainda ser colocados outros 2 valores,seria o terceiro valor que representa "margin-bottom", e outro para "margin-left"(quarto valor).

O resultado está abaixo(note que a div foi deslocada para a direita e para baixo):

Cor:

a cor no CSS pode ser escrita na forma hexadecimal e na forma RGB(Red, Green, Blue), nas duas maneiras deve-se escrever três valores referentes às cores já ditas(Vermelho,Verde e Azul).
Exemplo para vermelho:

Hexadecimal: #FF0000
RGB: rgb(255,0,0)

No caso da cor preta seria:

Hexadecimal: #000000
RGB: rgb(0,0,0)
Neste caso podemos usar a taquigrafia, na maneira hexadecimal, pois os valores se repetem então pode-se escrever da seguinte forma:

Hexadecimal: #000

Fonte

A maneira taquigráfica em propriedades de fonte é muito utilizada pois agiliza o trabalho e economiza linhas de código, veja um exemplo:

font: italic small-caps bold 50px serif;

Margem

Vimos um exemplo de margem no caso do xuxu acima :)

Padding

O padding é muito parecido com o margin porém ele faz uma "margem" interna, e não externa. Portanto se você colocar um texto dentro de uma div ou qualquer outro elemento, é possível mover esse texto de maneira que fique alinhado de acordo com seu desejo. Veja um exemplo:

padding:25px 50px 75px 100px;(maneira taquigráfica)
Isso significa:
top padding recebe 25px
right padding recebe 50px
bottom padding recebe 75px
left padding recebe 100px
Abaixo vemos como o texto se comporta

Obrigado galera, semana que vez trago mais coisas para vocês ;)

segunda-feira, 4 de março de 2013

Atividade PPSI I

Iae galera, vou postar o primeiro tópico da matéria de Padrões em Projetos de Sítios de Internet I

1 - A história da internet

A internet surgiu de pesquisas militares na década de 60, período da guerra fria, onde Estados Unidos e Rússia estavam em uma corrida tecnológica. O projeto inicial, desenvolvido pela A.R.P.A (Advanced Research Projects Agency), era o de descentralizar as informações contidas nas bases militares dos E.U.A, bem como permitir que essas bases pudessem se comunicar sem que houvesse uma central de comunicação para esse fim.

Mapa lógico da ARPANET de 1977

A mensagem era enviada por pequenos pacotes de dados que continham o endereço do computador destinatário e informações que permitiam a remontagem da mensagem.
A guerra em si nunca aconteceu e os E.U.A haviam criado o maior meio de comunicação já criado.
Depois disso o governo dos Estados Unidos permitiu que universidades pudessem fazer parte da rede. Tendo problemas para administrar o crescente número de localidades que estavam entrando na rede, o governo então decidiu dividir a rede em duas: a MILNET, que estariam somente os locais militares, e a nova ARPANET, que comportaria as demais localidades. Com essa "liberdade" as universidades, entusiasmadas, somaram esforços para expandir e melhorar a rede.
Com o aumento exponencial de computadores que entravam na rede, e a criação de protocolos como o IP(internet protocol) o governo dos Estados Unidos se viu obrigado a investir em backbones( poderosos computadores conectados por linhas que tem a capacidade de dar vazão a grandes fluxos de dados, como
canais de fibra óptica, elos de satélite e elos de transmissão por rádio). Além desses, existem também os backbones de empresas particulares, que conectam a internet redes menores quase anárquicas, permitindo que a internet não tenha dono.

Em 1992, o cientista Físico Tim Berners-Lee, do CERN, criou a World Wide Web.

Tim Berners Lee

Como era muito complicado acessar os arquivos na internet, já que a pessoa precisava saber comandos específicos para isso, Tim Berners Lee teve a ideia de criar um meio de hipertexto, onde a pessoa podia acessar os arquivos apenas através de cliques.

2 - Linguagem de Marcação versus Linguagem de Programação

Com sua ideia, Tim Berners Lee teve que teve quer criar um tipo específico de programa que interpretasse os hipertextos e os exibisse de maneira adequada ao usuário, sendo assim ele criou o HTML, Hiper Text Markup Language, que rodava em um navegador.
Considera-se que a grande virada da WWW começou com a introdução do Mosaic em 1993, um navegador gráfico desenvolvido por um time de desenvolvedores universitários. Antes de seu lançamento, os gráficos não eram frequentemente misturados com texto em páginas web.

Screenshot do Mosaic

Diferentemente das linguagens de programação, o HTML não possui comandos de decisão, tais como IF, ELSE e também não possui estruturas de laço de repetição, como FOR, WHILE, etc.
Portanto não é possível criar um programa com o HTML, mas sim, criar páginas que contenham informações.
No início somente era possível inserir textos nessas páginas, mas com o passar do tempo foi possível inserir fotos, áudio e vídeo, e com essas novas implementações foi necessário a criação de uma linguagem que ajudasse a dispor todas as informações sem que tudo ficasse bagunçado, foi ai que surgiu o CSS - Cascading Style Sheets.

3 - HTML

HTML significa: HyperText Markup Language, ou, Linguagem de marcação de hipertexto. Essa linguagem surgiu nas décadas de 80/90, quando Tim Berners Lee precisava de uma ferramenta para compartilhar acessar de forma simples as pesquisas de seu grupo de estudos.

a) Características:

Como dito anteriormente, o HTML não é uma linguagem de programação, ou seja não é possível criar um programa com ela mas é possível criar páginas para sites. Houve 4 versões antes da atual e muitas mudanças foram feitas para melhor, com a ajuda do W3C concomitantemente com o próprio Tim Berners Lee, então mostrarei as tags e os exemplos em HTML 5. Para criar uma página deve-se seguir uma estrutura básica com os comandos do HTML, esses comandos são chamados de "Tag's" abaixo está um exemplo simples dessa estrutura.

b) Estrutura básica de uma página

Para fazer uma página em HTML você só precisa de um editor de texto, para digitar as tags - óbvio - e um navegador para ver o resultado - também óbvio.
Eis um exemplo simples de estrutura básica em HTML 5:

<!DOCTYPE HTML>

<html>

<head><title>uma pagina HTML</title></head>

<body>

Olá mundo! ( ¬¬' profissionais em TI não tem criatividade para inventar outra frase para ser usada em exemplos, ou talvez seja uma tradição, vai saber...)

</body>

</html>
As tags são dispostas entre < >, sinal de maior e menor, as usadas acima são básicas - mas nem por isso devem ser ignoradas.
A tag <html> marca o início da página, tudo o que irá aparecer deve obrigatoriamente estar dentro de <html>"seu conteudo aqui"</html>. Experimente fazer o exemplo acima no bloco de notas e salve como: xuxu.html (sim, o nome não importa e sim a extensão, exceto no Linux, mas isso é outra história)

c) Metadados: head, title, link, meta, style

A tag <head></head> é o cabeçalho onde você pode colocar tags específicas, tais como:

<title>,<style>,<base>,<link>,<meta>,<script> e <noscript>.

A tag <title></title> serve para você dar um título para sua página, esse título aparece na parte superior do navegador e é muito importante para os buscadores, pois através dela é possível identificar o conteúdo principal da página - quando você faz um título coerente sobre o assunto, claro.

<link>, essa tag serve para "puxar" outros arquivos a serem usados nessa página, um exemplo disso é quando precisamos importar um arquivo CSS (Cascading Style Sheets) para ser utilizado na formatação da página, como no exemplo abaixo:

<link rel="stylesheet" type="text/css" href="theme.css">

Tag <meta>, as informações que você colocar na tag <meta> não vão aparecer na página, mas os buscadores vão adorar, ela deixa seu site mais "encontrável". Alguns exemplos são mostrados abaixo:

<head>

<meta name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="Jefferson Kleber">

<meta charset="UTF-8">

</head>

até esse buscador encontrará sua página mais facilmente!

São muitas informações sobre sua página que irão aumentar a relevância dela nos motores de busca como o da google, sua página vai subir no ranking de pesquisa, pois é pois é pois é.

Tag <style>, essa serve para você colocar comandos em CSS nela, os comandos devem estar entre
<style> </style>. Com isso você pode formatar os elementos da sua página na própria página (prática não recomendada, o melhor mesmo é importar um arquivo css)

d) Seções (sim, com Ç, que significa divisão, repartição), body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address

<body>, nela deverá conter tudo o que aparecerá no navegador, ou seja, onde ficará a parte visível
<article>, nessa tag deve conter um artigo com sentido próprio, ou seja, deve fazer sentido sem que se precise ver outra coisa do site. Exemplos:

post de Fórum
blog
notícia
comentário

<section>, define seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.

<nav>, deve conter o menu de navegação do site. Não se deve colocar todos os links na tag nav, mas sim apenas o(s) menu(s) de navegação mais importante(s).

<aside>, define um conteúdo além do conteúdo em que ela é colocada, por exemplo: coloca-se um <aside> do lado de um <article> para conter informações adicionais.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>, definem tamanhos diferentes para fonte(usado em algo que se queira chamar atenção, como um título), onde <h1> é o maior e <h6> é o menor. A tag <hgroup> serve para agrupar diversos conteúdos que estiverem entre <h1>,<h2>... etc.

<header>, especifica um cabeçalho de um documento ou seção, nela deve conter um conteúdo introdutório às informações que a seguem, por exemplo um resumo de uma notícia antes da notícia em si. Pode-se ter vários <header> em um documento. A tag <header> não pode ser colocada dentro de um <rodapé>, <address> ou outro elemento <header>.

<footer>, é o rodapé do documento, nele geralmente se encontram informações sobre copyright, autor do documento, contato etc.

<address>, é usada para relacionar informações de contato do autor do documento ou de um artigo. Se a tag <address> for colocada dentro de um <article> ela serve somente para aquele <article>, mas se ela for usada dentro do <body> ela serve para o documento todo.

e) Comentário HTML

O comentário, tanto em html quanto em outras linguagens é importante para explicar o conteúdo a um outro desenvolvedor e para você mesmo, futuramente. Abaixo temos um exemplo de comentário:

<!DOCTYPE html>

<html>

<body>

<p>Isso é um parágrafo.</p>

</body>

</html>

f)Elementos de agrupamento: <p>,<hr>,<blockquote>,<ol>,<ul>,<li>,<dl>,<dt>,<dd>,<div>.

<p>, define um parágrafo em uma página, acrescenta uma margem entre o texto que está em <p> e os demais textos.

<hr>, mostra uma quebra temática no texto da página, geralmente mostra uma linha horizontal usada para separar os textos.

<blockquote>, deve ser usado toda vez que você usar um texto que venha de outra fonte, como um site. Ele deixa esse conteúdo separado do resto do texto com espaço entre eles.

<ol>, define uma lista ordenada, nela pode-se usar números ou letras, temos um exemplo abaixo:

<!DOCTYPE html>

<html>

<body>

<ol>

<li>Coffee</li>

</ol>

<li>Coffee</li>

</ol>

</body>

</html>

E aqui, como a lista aparecerá:

Coffee
Tea
Milk

Coffee
Tea
Milk

<ul> É usado como <ol>, porém esta será uma lista não ordenada, ou seja, em vez de números ou letras, aparecerão bolinhas, quadradinhos e etc. Para separar os elementos.

<li> Define cada elemento dentro de uma lista (<ol> ou <ul>).

<dl>, <dt> e <dd> definem uma lista de definições onde; <dl></dl> define onde começa e onde acaba essa lista, <dt></dt> define um elemento na lista e <dd></dd> mostra a definição do elemento. Abaixo temos um exemplo:

<!DOCTYPE html>

<html>

<body>

<dl>

<dd>Bebida preta e quente</dd>

<dt>Leite</dt>

<dd>Bebida branca e fria</dd>

</dl>

</body>

</html>

E abaixo como ela aparecerá no navegador:

Café

Bebida preta e quente

Leite

Bebida branca e fria

<div> define uma divisão em uma seção de uma página, para que seja estilizada por CSS. Essa tag é muito útil para separar e dispor qualquer elemento nas páginas HTML.

g) Elementos de texto semânticos: a, abbr, span, strong, em, br

<a>, define um hiperlink, a base do html abaixo temos um exemplo de como usá-lo:

<a href="http://www.w3schools.com">visite o W3Schools!</a>

E no navegador aparecerá assim:

visite o W3Schools!

<abbr>, define uma abreviatura e colocando se title="", definindo o significado da abreviatura entre as aspas, quem usa sintetizadores de voz conseguirão saber o que a sigla significa.

A tag <span> fornece uma maneira de adicionar um gancho para uma parte de um texto ou de uma parte de um documento. Essa tag não fornece um efeito visual, para isso deve-se utilizar CSS.

<strong> dá destaque ao texto e o define como importante, geralmente o texto entre <strong> fica em negrito.
<em> dá ênfase a um texto, geralmente o texto fica em itálico.

<br> pula de linha, simples assim.

<img> coloca uma imagem na página. É importante usar o atributo alt="", onde você deve colocar o que é essa imagem entre as aspas, para que pessoas com deficiência visual possam saber o que essa imagem é. Abaixo temos um exemplo de como usar essa tag:
<img src="smiley.gif" alt="Carinha feliz" height="42" width="42">

Ufa... A prof caprichou no conteúdo hein...