sobre o html

Sobre o HTMLdiegOCuruma

Iniciando no desenvolvimento underground

HTML

Introdução:

HTML (HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.

Wikipédia

HTML

O pai da webTim Berners-Lee criou o HTML original, na época a linguagem não era uma

especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornaria-se a Internet) ganhou atenção mundial.

Wikipédia

HTMLQuem mandaW3C é um consórcio internacional que agrega empresas, órgãos governamentais e organizações

independentes, e que visa desenvolver padrões para a criação e a interpretação de conteúdos para a Web. Fundado pelo Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.

Sites desenvolvidos segundo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente dos hardware ou software utilizados, como celulares e compatível com os novos padrões e tecnologias que surgen com a evolução da internet.

Padrões seus como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são usados de forma errônea devido ao desconhecimento da especificação.

É um dever de todo o desenvolvedor web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.

Wikipédia

HTML

Semântica

O uso da TAG ao conteúdo com o significado real.

Acessibilidade e inclusãoAcessibilidade significa permitir que pessoas com deficiências ou mobilidade reduzida

participem de atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população.

Na internet o termo acessibilidade refere-se também as recomendações do w3c, que visam permitir que todos possam ter acesso ao websites independente de terem alguma deficiência ou não.

Wikipédia

HTML

Usabilidade deixando Fácil de usarUsabilidade é um termo usado para definir a facilidade com que as pessoas podem usar uma

ferramenta ou objeto para realizar uma tarefa específica.

A usabilidade pode também se referir aos métodos de mensuração da usabilidade e ao estudo dos princípios por trás da eficiência percebida de um objeto.

Wikipédia

HTML

Elementos Usando o htmlUma declarção DTD usualmente é chamada de "Doctype".

Por que especificar um doctype?

Porque ele define qual é a versão do (X)HTML que o documento está usando e é uma informação importante para que os navegadores processem corretamente o documento.

HTML

Elementos Usando o htmlTipos:

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

O Strict é o rígido, você estará dizendo ao browser como renderizar ele, você está dizendo que seguirá os padrões.

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Com esse você está dizendoao Browser que seu código está em transição, ele não seguirá rigorozamente os padrões.

HTML

http://www.w3.org/TR/html4/loose.dtd

Elementos Usando htmlTags

Lista de alguns elementos que podemos utilizar no nosso dia-a-dia para trazer significado para a informação dos sites:

HTML

Elementos usando tagsA - Define a ancora de um elemento.

Abbr - Define uma abreviação.

Acronym - Indica um acrônimo.

Address - A tag address é utilizada para conter informações de endereço e contatos.

Blockquote - Blockquote define longos blocos de citação.

Cite - Define uma citação ou referência a outra fonte

Code - Define que aquele texto é um código.

Tirados de um artigo do Tableless: http://tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web/

HTML

HTMLElementos usando tagsDfn - Define que certo texto é a definição de um termo.

div, span - Div e Span definem a estrutura dos elementos. Div é um elemento de bloco e Span um elemento de linha.

dl, dd, dt - Listas de definição são feitas para criar um grupo de termos e definições. Muito usada para fazer glossários, dicionários ou entrevistas textuais.

del, ins - INS é utilizado para mostrar que certo texto foi inserido e DEL define o texto que foi deletado da redação. Isso é bastante utilizado para corrigir artigos, textos e etc.

Em - Como o strong, indica uma ênfase no texto.


Elementos usando tagsh1 .. h6 - Grupo de títulos definidos por importância, onde o H1 é o mais importante e o H6 o menos

importante.

ul, ol, li - Listas ordenadas (OL) e listas não ordenadas (UL) são utilizadas para definir e criar listas de itens.

P - Define um parágrafo.

Q - Define uma citação ou reposta que não necessita de quebra de linha ou marcação de um parágrafo.

Strong - Define uma ênfase, como o EM.

Var - Indica uma instância de uma variavel ou argumento de programa.

Tambem podemos trabalhar com a semântica com atributos. Alt, Title, classe, cite, id, lang, longdesc, rev, rel.


HTML

Valores, família e hierarquiaTodo documento HTML possui tags, tags são comandos de formatação da linguagem. Um elemento é formado por um nome de tag, atributos, valores e filhos. Os atributos mudam os resultados padrões dos elementos e os valores caracterizam essa mudança.

<ul>

<li>

<a href=”#” title=”Valores”>Exemplo</a>

</li>

</ul>

HTML

ResponsabilidadesO reconhecimento do front está maior que no passado, antigamente nenhuma empresa dava atenção

pra esse setor infelizmente, mais muita coisa mudou desde então, muitos desenvolvedores aqui no brasil e fora estão lutando pelos padrões e pela qualidade

O crescimento do mercado fez as responsabilidades do desenvolvedor front-end mudar. As responsabilidades e tambem a estrutura da equipe que ele está. Ficando se parecendo com uma linha de montagem.

O dev de client-side tem as seguintes responsabilidades na minha opinião do Diego Eis, criador do Tableless para disseminar os padrões web no Brasil.

Tirados de um artigo do Tableless: http://tableless.com.br/responsabilidade-de-um-dev-client-side/comment-page-1/#comment-138488

ELEMENTOS

Responsabilidades1 - Planejamento do HTML

Mapeamento dos elementos do layout

Estudo de SEO e semântica dos elementos

Estrutura do HTML padrão

Otimização do código


HTML

Responsabilidades2 - Planejamento do CSS

Estudo de escalabilidade do CSS

Modularização dos arquivos

Nomenclatura de classes e ids

Nomenclatura e padronização código

Otimização do código


HTML

Responsabilidades3 - Comportamento dos elementos

Definição do comportamento (junto ao designer)

Criação e padrão de funções e aplicação

Modularização dos arquivos

Tirados de um artigo do Tableless: http://tableless.com.br/responsabilidade-de-um-dev-client-side/comment-page-1/#comment-138488=

HTML

ResponsabilidadesTambém podem haver processos posteriores: testes de funcionalidades, usabilidade, SEO,

otimização de banco e código, migrações etc.

Veja que dividimos basicamente alguns pontos relacionados às camadas de desenvolvimento: informação, formatação e comportamento. Lembrando que na camada de comportamento o dev client-side só precisa saber a manipulação de elementos. Não precisa aprender a programar profundamente em Javascript. Basta saber um pouco de JQuery ou outra biblioteca da linguagem.


HTML

FinalmenteNinguém pode chegar a lugar algum sem antes passar por aqui:

http://www.maujor.com/w3ctuto/firstcss.html

http://tableless.com.br/categoria/artigos/

http://www.w3schools.com/

HTML

Sobre o htmldiegOCuruma

Você esta preparado pro underground?

Se não puder se destacar pelo talento, vença pelo esforço. Dave Eeinbaum

FIM

sobre o html

Education