HTML Tutorial

Vimos algumas tags HTML e seu uso como tags de cabeçalho <h1>, <h2>, tag de parágrafo <p> e outras tags. Nós os usamos até agora em sua forma mais simples, mas a maioria das tags HTML também pode ter atributos, que são bits extras de informação.

Um atributo é usado para definir as características de um elemento HTML e é colocado dentro da tag de abertura do elemento. Todos os atributos são compostos de duas partes – um nome e um valor

O nome é a propriedade que você deseja definir. Por exemplo, o elemento parágrafo <p> no exemplo carrega um atributo cujo nome é align, que você pode usar para indicar o alinhamento do parágrafo na página.

O valor é o que você deseja que o valor da propriedade seja definido e sempre colocado entre aspas. O exemplo abaixo mostra três valores possíveis do atributo de alinhamento: esquerda, centro e direita.

Nomes de atributos e valores de atributos não diferenciam maiúsculas de minúsculas. No entanto, o World Wide Web Consortium (W3C) recomenda atributos / valores de atributos em letras minúsculas em sua recomendação HTML 4.

See the Pen
HTML – Exemplo para alinhamento de atributo by John Pires (@johnpiresBR)
on CodePen.

Atributos principais:



Os quatro atributos principais que podem ser usados na maioria dos elementos HTML (embora não todos) são –

• Id
• Title
• Class
• Style

O Atributo Id
O atributo id de uma tag HTML pode ser usado para identificar exclusivamente qualquer elemento em uma página HTML. Existem duas razões principais pelas quais você pode querer usar um atributo id em um elemento –

• Se um elemento carrega um atributo id como um identificador único, é possível identificar apenas esse elemento e seu conteúdo.
• Se você tiver dois elementos com o mesmo nome em uma página da Web (ou folha de estilo), poderá usar o atributo id para distinguir entre os elementos que têm o mesmo nome.

Discutiremos a folha de estilo em um tutorial separado. Por enquanto, vamos usar o atributo id para distinguir entre dois elementos de parágrafo, conforme mostrado abaixo.

    <p id="html">Este parágrafo explica o que é HTML</p>
    <p id="css">Este parágrafo explica o que é folha de estilo em cascata</p>

O título Atributo



O atributo title fornece um título sugerido para o elemento. A sintaxe para o atributo title é semelhante à explicada para o atributo id.
O comportamento desse atributo dependerá do elemento que o carrega, embora seja freqüentemente exibido como uma dica de ferramenta quando o cursor passa sobre o elemento ou enquanto o elemento está carregando.

See the Pen
HTML – Título do Atributo by John Pires (@johnpiresBR)
on CodePen.

Agora tente colocar o cursor sobre “Exemplo de tag de título com título” e você verá que qualquer título usado em seu código está saindo como uma dica de ferramenta do cursor.

O atributo de classe



O atributo class é usado para associar um elemento a uma folha de estilo e especifica a classe do elemento. Você aprenderá mais sobre o uso do atributo class quando aprender a Cascading Style Sheet (CSS). Então, por enquanto, você pode evitá-lo.

O valor do atributo também pode ser uma lista separada por espaços de nomes de classes. Por exemplo:

class="className3 className4 className5"

O atributo de estilo:
O atributo style permite que você especifique regras de Cascading Style Sheet (CSS) dentro do elemento.

See the Pen
HTML – Atributo de Estilo by John Pires (@johnpiresBR)
on CodePen.

No momento, não estamos aprendendo CSS, então vamos prosseguir sem nos preocupar muito com CSS. Aqui, você precisa entender o que são atributos HTML e como eles podem ser usados durante a formatação de conteúdo.

Atributos de internacionalização:



Existem três atributos de internacionalização, que estão disponíveis para a maioria (embora não todos) dos elementos XHTML.

• dir
• lang
• xml:lang

O atributo dir:
O atributo dir permite que você indique ao navegador a direção em que o texto deve fluir. O atributo dir pode assumir um de dois valores, como você pode ver na tabela a seguir:

• ltr – Da esquerda para a direita (o valor padrão).
• rtl – Da direita para a esquerda (para idiomas como hebraico ou árabe que são lidos da direita para a esquerda).

See the Pen
HTML – Atributo dir by John Pires (@johnpiresBR)
on CodePen.

Quando o atributo dir é usado na tag <html>, ele determina como o texto será apresentado em todo o documento. Quando usado em outra tag, ele controla a direção do texto apenas para o conteúdo dessa tag.

Atributo lang



O atributo lang permite que você indique o idioma principal usado em um documento, mas esse atributo foi mantido em HTML apenas para compatibilidade com versões anteriores de HTML. Este atributo foi substituído pelo atributo xml: lang em novos documentos XHTML.

Os valores do atributo lang são códigos de idioma de dois caracteres do padrão ISO-639. Verifique os códigos de idioma HTML: ISO 639 para obter uma lista completa dos códigos de idioma.

See the Pen
HTML – Atributo lang by John Pires (@johnpiresBR)
on CodePen.

Atributo xml: lang



O atributo xml: lang é o substituto do XHTML para o atributo lang. O valor do atributo xml: lang deve ser um código de país ISO-639, conforme mencionado na seção anterior.

Atributos Genéricos
Aqui está uma tabela de alguns outros atributos que são prontamente utilizáveis com muitas das tags HTML.

• align  – (right, left, center) -Alinha as tags horizontalmente.
• valign – (top, middle, button) – Alinha verticalmente as tags em um elemento HTML.
• bgcolor – (numéricos, hexidecimal, valores RGB) – Coloca uma cor de fundo atrás de um elemento.
• background – (URL) – Coloca uma imagem de fundo atrás de um elemento.
• id – (Defenido pelo usuario) – Nomeia um elemento para uso com folhas de estilo em cascata.
• class – (Defenido pelo usuario) – Classifica um elemento para uso com folhas de estilo em cascata.
• width – (Valores numéricos) – Especifica a largura das tabelas, imagens ou células da tabela.
• height – (Valores numéricos) – Especifica a altura das tabelas, imagens ou células da tabela.
• title – (Defenido pelo usuario) – Título “Pop-up” dos elementos.