Please enable JavaScript.

Coggle requires JavaScript to display documents.

HTML - Coggle Diagram

- - - - Concordância de Documento.
        
        A especificação da HTML 4, por exemplo, previa três tipos de DocTypes: Strict, Transitional e Frameset.
        
        TRANSITIONAL
        
        mais maleável em relação aos atributos de apresentação, além de possibilitar a utilização de tags obsoletas.
        
        FRAMESET
        
        Tag obsoleta da HTML4 usada para combinar múltiplos frames e exibi-los como numa única página.
        
        STRICT
        
        determinava uma série de restrições e exigências: obrigatoriedade de separação entre a estrutura e a apresentação; limitação nos elementos de apresentação disponíveis - como tags de fonte e atributos de alinhamento −; ausência de suporte a tags obsoletas etc.
        
        DOCTYPE
        
        É uma declaração que serve para informar ao navegador qual a versão da HTML usada em um arquivo HTML.
        
        Não é uma tag HTML, mas sim uma instrução.
    - - <!DOCTYPE html>
        
        não se baseia na SGML e, portanto, não requer referência a um DTD.
  - - - Corpo
        
        <body>estruturação do documento, sobretudo de seu conteúdo e também apresentação – embora recomendado que a apresentação do documento seja feita por meio de folhas de estilo (CSS).
      - Cabeçalho
        
        <head> é chamada de cabeçalho do documento
        
        <title>
        
        É o título do documento, sendo visualizada na barra de título do navegador.
        
        <meta>
        
        Engloba uma série de informações – comumente chamadas de metainformações – como a descrição da página, palavras-chave etc.
        
        <script>
        
        É responsável pela inclusão e/ou definição de scripts relacionados ao documento.
        
        <link>
        
        É responsável pela inclusão de folhas de estilo (externas) relacionadas ao documento. Também possibilita a inclusão de favicons (pequenos ícones que aparecem na barra de endereços do navegador).
        
        <style>
        
        Assim como a anterior, é responsável pelo vínculo de folhas de estilo ao documento − quando elas são declaradas diretamente no documento.
      - Raiz
        
        LANG
        
        atributo global (por ser declarado na tag raiz) deve ser utilizado para definir o idioma da página
        
        <html lang=”en-US” >
        
        <html lang=”en-GB” >
        
        <html lang=”pt” >
        
        a <html> é a raiz da árvore do documento.
  - - - O conteúdo principal da página, que pode ser dividido em subseções.
    - - Pode conter tanto links de navegação quanto informações adicionais que forneçam complemento ao conteúdo principal.
    - - Esta área pode ser tanto horizontal quanto vertical – e, em alguns casos, os dois. Contém os links para navegação pelas seções/páginas do site.
    - - A área final da página, onde normalmente são dispostos links, avisos de direitos autorais, informações complementares sobre o proprietário do site etc.
    - - Uma área inicial, logo na parte superior da página. Normalmente vemos um título, uma logomarca ou algo do tipo.
  - - - W3C candidata a Recomendação HTML 5.1
      - W3C publica a Recomendação HTML 5.1 2ª edição
  - - - SGML (Standard Generalized Markup Language) padrão ISO que especifica as regras para a criação de linguagens de marcação que sejam independentes de plataforma.
      - HyTime é um padrão desenvolvido pela ISO com o objetivo de possibilitar que hiperdocumentos hipermídia pudessem ser descritos em função de sua estrutura e conteúdo e, consequentemente, utilizados por quaisquer sistemas conformantes
- - - - required
        
        Determinar se um campo é obrigatório.
      - autofocus
        
        Fixar o foco no campo.
      - placeholder
      - pattern
        
        Validar o valor de um campo com base em uma expressão regular.
    - - tel
        
        Inserir números de telefone.
        
        Para uma melhor usabilidade, deve ser usado em conjunto com o atributo pattern.
      - datetime
        
        Inserir datas com o fuso horário em UTC a partir de um calendário.
      - date
      - number
  - - - era necessário fazer uso de Javascript. Entretanto, na HTML5 é possível fazê-lo de forma nativa, sem o uso de linguagens de programação.
      - tipos
        
        Verifica se o dado inserido em um campo é consistente com o seu tipo e/ou padrão (pattern).
        
        Verifica se um campo obrigatório foi preenchido.
        
        required
    - - comportamento padrão da HTML5 é validar os dados quando ocorre o envio do formulário. Entretanto, é possível desativar essa funcionalidade. Para isso, deve ser atribuído o atributo “novalidate” à tag <form>.
  - - - Mascara o texto com asteriscos.
    - - Esconde o campo para não ser exibido no navegador.
    - - Usado para seleção de valor através de click/check.
    - - Usado para seleção exclusiva de valor – quando é apresentada mais de uma opção, apenas uma poderá ser selecionada
    - - Associada à tag <button>, dispara o evento que envia/submete o formulário.
    - - Associada à tag <button>, dispara o evento que limpa os valores do formulário.
    - - Uma tag <input> pode ser do tipo “button” – exercendo, assim, a mesma função da tag <button>.
  - - - atributos
        
        action - Define a URL (endereço) para a qual os dados do formulário serão enviados.
        
        method - Define o método HTTP (POST ou GET) para envio dos dados.
    - - atributos
        
        minlength, maxlength - Definem a quantidade de caracteres mínima e máxima, respectivamente, permitida em um campo.
        
        type - Define o tipo do campo e, sobretudo, como ele se comporta.
    - - atributos
        
        type - Define o tipo do campo e, sobretudo, como ele se comporta.
    - - atributos
        
        for - Vincula a tag <label> ao campo ao qual ela se refere. Faz com que seja possível clicar na label para ativar o campo relacionado.
    - - atributos
        
        value - Este atributo também pode ser utilizado na tag <input>. Ele define o valor do campo. No caso da <option>, os seus valores possíveis são previamente definidos quando a página é codificada. Já na <input>, embora também possa ser previamente definido, normalmente é o usuário quem define o seu valor.
- - - - deixar maior as linhas e colunas
  - - - não há necessidade de listar ordenadamente.
        
        Tag Container
        
        <ul>
        
        Tag Item
        
        <li>
    - - listar itens e atribuirmos uma descrição a eles.
        
        Tag Cointainer
        
        <dl>
        
        Tag Item
        
        <dt>
        
        Tag Descrição
        
        <dd>
    - - listar dados com a necessidade de representar a sua ordenação de forma numérica ou alfabética
        
        Tag Item
        
        <li>
        
        Tag Container
        
        <ol>
- - - - servem para que algumas características sejam adicionadas a um elemento, a uma tag. São compostos por um nome e por um valor.
        
        exemplo: <img src=”imagem.jpg” alt=”minha imagem” />
        
        “src” define o endereço e o nome da imagem
        
        “alt” define um texto alternativo a ser exibido no navegador caso a imagem não seja carregada.
      - ID
      - CLASS
    - - semânticas
        
        organizar a estrutura de conteúdo de uma página
        
        Em muitos casos é indiferente, ao visualizarmos uma página no navegador, as tags utilizadas para guardar determinado conteúdo. Entretanto, é fortemente recomendado usá-las de acordo com sua função.
        
        Tags
        
        <article>
        
        bloco de conteúdo usado quando se deseja inserir um artigo, como um post de um blog
        
        <section>
        
        Define uma seção no documento. É normalmente utilizado para agrupar seções. Por exemplo: uma <section> poderia conter vários <article>.
        
        <h1> <h2> <h3> <h4> <h5> <h6>
        
        títulos. É uma boa prática que cada seção ou cada bloco de texto seja precedido por um título. tag hierárquica, logo, no título mais importante deve ser usada a tag <h1>, no subtítulo seguinte, <h2>, e assim por diante. Além disso, uma página poderá conter várias <h1>, <h2>... <h6>. A exceção aqui fica por conta da tag <h1>, uma vez que é recomendado utilizar apenas uma numa mesma página.
        
        <p>
        
        parágrafos de texto.
        
        <pre>
        
        texto pré-formatado.
        
        <div>
        
        Embora não seja considerada semântica, essa tag poderá ser usada para agrupar algum tipo de conteúdo que não tenha nenhuma semântica específica ou que não se encaixe bem dentro de uma tag semântica.
        
        <span>
        
        É semelhante à <div>. Entretanto, enquanto a <div> é um elemento não semântico no bloco (quando usada, quebra o conteúdo em uma seção), a <span> é embutida (não quebra o conteúdo, apenas o agrupa).
        
        <a>
        
        links
        
        <br />
        
        quebra de linha.
        
        <hr>
        
        linha horizontal no documento. Normalmente é utilizada quando se pretende alterar a temática de um texto.
      - textuais
        
        organizar o conteúdo da página, ou seja, textos, mídias e links, por exemplo
    - - <strong>: aplica o efeito de negrito em um texto e o marca como importante;
      - <i>: aplica o efeito de itálico em um texto;
      - <b> negrito em um texto;
      - <em>: aplica o efeito de itálico e dá ênfase a um texto.
        
        dispositivos de leitura de tela, normalmente utilizados por pessoas com deficiência visual. Esses dispositivos, ao encontrarem as tags “strong” e “em” dão ênfase ao conteúdo nelas contido, modulando sua voz de forma incisiva, no caso de “strong”, ou enfática, no caso de “em”.
    - - devem ser evitadas.
        
        <applet>
        
        Identifica a inclusão de um applet Java.
        
        <center>
        
        Centraliza horizontalmente o conteúdo de um bloco.
        
        <dir>
        
        Container para lista de diretórios ou arquivos.
        
        <font>
        
        Determina características relacionadas a fontes de um determinado elemento.
        
        <image>
        
        Ancestral da tag <img>, era usada nas primeiras versões HTML para a inserção de imagens.
  - - - exceção a regra
        
        quebra de linha: <br />
        
        tornou-se obsoleta a partir da HTML5.