Introdução ao HTML

Sobre o HTML
diegOCuruma

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 web
Tim 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

HTML
Quem manda
W3C é 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.

HTML
Acessibilidade e inclusão
Acessibilidade 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 usar
Usabilidade é 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 html
Uma 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 html
Tipos:

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

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

HTML
Elementos usando tags
A - 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
Dfn - 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.

HTML
h1 .. 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 hierarquia
Todo 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>

ELEMENTOS
Responsabilidades
O 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

HTML
Responsabilidades
1 - 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
Responsabilidades
2 - 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
Responsabilidades
3 - 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

side/comment-page-1/#comment-138488=

HTML
Responsabilidades
També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
Finalmente
Ningué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/

Sobre o html
diegOCuruma

Você esta preparado pro underground?

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

FIM

Introdução ao HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Introdução ao HTML

Semelhante a Introdução ao HTML (20)

Último

Último (20)

Introdução ao HTML