/ / O que é HTML, recursos de estrutura

O que é HTML, recursos de estrutura

HTML é, sem dúvida, a principal linguagem da Internet,originou-se com ele. De uma forma ou de outra, ele está envolvido na criação e operação de todas as páginas da rede mundial de computadores. Sem entender o que é HTML e como funciona, é impossível transformar um fluxo contínuo de texto, que é originalmente qualquer documento, em um site estruturado, bonito e amigável.

HTML e a World Wide Web

A abreviatura é derivada do inglêsFrases da linguagem de marcação de hipertexto. A tradução explica totalmente o que é HTML - é uma linguagem de marcação de hipertexto. Surgiu nos primórdios do desenvolvimento da Internet e destinava-se à concepção de páginas web contendo documentação científica e técnica, a qual, sobretudo, necessita de uma formatação correta.

Tim Berners-Lee, o criador da linguagem, sugeriu quecom a sua ajuda, será possível criar facilmente documentos simples, mas compreensíveis, para intercâmbio entre cientistas de diferentes cidades e países. Ele desenvolveu um conjunto de descritores - elementos que formatam o texto. Agora os conhecemos como "tags".

Para que o texto HTML seja exibido corretamente, você precisaprocessá-lo. Isso é feito por programas especiais - navegadores. Eles recebem a página de marcação, interpretam os descritores de tag e exibem o texto como o usuário deve vê-lo.

Uma parte muito importante da linguagem, que é compreensível até mesmo deseu nome é suporte de hipertexto. Isso significa que algumas páginas HTML podem conter links para outras. O sistema de referência cruzada foi de particular importância para artigos científicos, permitindo não se aprofundar na explicação de um termo complexo, mas simplesmente encaminhar o leitor ao capítulo correspondente, se necessário.

Desenvolvimento da linguagem

Com o passar do tempo, um simples conjunto de tags que era HTMLno início de sua existência, ela cresceu e se fortaleceu. Agora é possível inserir conteúdo multimídia em uma página, criar tabelas e controlar a organização das imagens.

A expansão espontânea da língua tinha que ser contida e controlada, certos padrões eram necessários.

Variedade de navegadores

1995 - época de adoção da terceira versãoespecificações e um ponto de viragem no destino dos designers de layout. Os navegadores modernos da época não podiam mais garantir a implementação de padrões aceitos, a improvisação e a disposição em camadas começaram. Cada navegador da Internet tinha sua própria opinião sobre o que é HTML e como os descritores específicos deveriam ser interpretados.

Felizmente, no momento presente, as principais contradições entre os navegadores foram resolvidas, poupando aos desenvolvedores de front-end muito esforço e nervos.

HTML5

O quinto padrão é relevante para 2018HTML, cujo rascunho apareceu no final de 2007. Ele introduziu muitos novos elementos e atributos, com ênfase particular na semântica das páginas da web e sua acessibilidade para usuários com deficiência.

A linguagem continua a se desenvolver e melhorar ativamente.

Quinto padrão HTML

HTML básico

As principais estruturas HTML são descritores, ou tags, e entidades. O texto simples processado com a ajuda deles se transforma em um documento da web.

Entidades de marcação de hipertexto são códigos mnemônicos para caracteres Unicode especiais que não estão disponíveis em teclados convencionais.

Exemplos de entidades:

< colchete angular aberto
> colchete angular de fechamento
& larr; seta fina apontando para a esquerda
uarr; seta fina apontando para cima

Entidades HTML começam com um E comercial,termina com um ponto e vírgula e contém um código fácil de lembrar para o caractere. Eles são importantes porque permitem que você exiba caracteres que não podem ser escritos diretamente no código HTML.

Esses sinais incluem, por exemplo, colchetes angulares. Na linguagem de marcação de hipertexto, eles servem como identificadores de tag, envolvendo o nome do descritor em ambos os lados.

Tags HTML

Tags são os principais componentes estruturais de um documento da web. Eles são recipientes das partes de abertura e fechamento e do conteúdo intermediário.

Tag de exemplo:

<i> texto dentro da tag </i>

Este é o descritor HTML eque define o tipo de letra em itálico. A letra i é a primeira letra da palavra itálico. Ele tem:

  • parte de abertura <i>;
  • parte da capa </i>caracterizado pela presença de uma barra;
  • conteúdo que será renderizado em itálico após ser analisado pelo navegador.
Estrutura da tag HTML

A maioria dos descritores tem a mesma estrutura, mas há um pequeno grupo de tags vazias.

Texto longo que deve ser <br> dividido em várias linhas <br> para melhorar a legibilidade.

Marcação <br> após a análise, ele será substituído por uma quebra de linha. Não tem conteúdo, portanto, nenhuma parte de cobertura é necessária.

As seguintes tags também estão vazias:

  • <hr>denotando uma linha cinza fina separando blocos de texto uns dos outros;
  • <input>representando uma família inteira de elementos de formulário interativos;
  • <img>conectar o arquivo de imagem;
  • uma série de etiquetas de serviço - <meta>, <link>.

Os descritores podem ser aninhados uns nos outros em qualquer número de níveis. As únicas exceções são tags vazias, que não podem conter conteúdo.

Atributos de tag

De grande importância ao criar documentos da web são os atributos que são colocados no elemento de tag de abertura. Um descritor pode ter uma ou mais propriedades ou nenhuma.

Na maioria dos casos, usando atributosalguns aspectos do comportamento do elemento são esclarecidos e, às vezes, podem mudar radicalmente a apresentação visual. Várias propriedades são usadas para fins de serviço, permitindo que você manipule tags HTML de CSS ou JavaScript.

Configuração de atributo:

Selecione a cor:  <input type = "checkbox" name = "red"> Vermelho  <input type = "checkbox" name = "yellow" verificado> Amarelo  <input type = "checkbox" name = "green"> Verde

Aqui está um grupo de três elementos <input> interativos. Atributo tipo define sua exibição como caixas de seleção, nome contém o nome de um campo específico e a propriedade verificado, sem importância, torna a segunda entrada o padrão.

Tag de entrada com atributos

Existem atributos genéricos que podem ser definidos para qualquer descritor e atributos específicos que são específicos para tags específicas.

As propriedades universais incluem: id, class, title.

Específico - o tipo mencionado acima, verificado, bem como src, href e vários outros.

Recursos de sintaxe

Ao receber uma página HTML, o navegador a analisa e joga fora todos os itens desnecessários. Portanto, na maioria dos casos, vários espaços e quebras de linha serão ignorados.

Os dois trechos de código a seguir são completamente idênticos para o navegador, embora um deles contenha muitos espaços consecutivos e seja dividido em linhas, e o segundo não.

<!- primeiro trecho -> p Lorem ipsum <i> dolor sit </i> amet. </p> p <b> doloribus sunt, </b> ad provident. </p>  <! - segundo snippet -> <p> Lorem ipsum <i> dolor sit </i> amet. </p> <p> <b> doloribus sunt, </b> ad provident. </p>

Hífens e guias podem ser usados ​​paraestruturação visual do código, mas não tem significado para o navegador. Para alguns casos, quando é necessário preservar o formato do texto original juntamente com espaços e recuos, existem tags que exibem seu conteúdo sem processamento preliminar pelo navegador, por exemplo, <pre>.

HTML não diferencia maiúsculas de minúsculas.Isso significa que tags, nomes e valores de atributos podem ser escritos em letras maiúsculas ou minúsculas, e ambas as opções serão processadas igualmente corretamente pelo navegador. Se desejar, você pode até usar combinações de letras maiúsculas e minúsculas, mas isso interfere na percepção normal do código.

Depois de se familiarizar com as tags, suas propriedades e sintaxe, você pode passar do básico da linguagem HTML para a estrutura de um documento HTML como um todo.

Construindo um documento HTML

Qualquer página da web deve ter algum tipo de esqueleto para que o navegador seja exibido corretamente.

A estrutura necessária de um documento HTML inclui:

  • uma declaração doctype para garantir a renderização adequada do navegador;
  • wrapper html para a página inteira;
  • parte de serviço dedicada cabeça.
<! DOCTYPE html> <html> <head> <! - informações de serviço para o navegador e robôs de pesquisa -> </head> <body>   </body> </html>

HTML5 não requer uma tag corpo em um documento, entretanto, é recomendável que você ainda o use para denotar uma área de conteúdo.

Estrutura necessária de um documento HTML

Os descritores de serviço importantes, mas opcionais são:

  • título contendo o título da página;
  • meta tags que definem codificação, informações de seo, cabeçalhos http e outras configurações importantes.
<head> <title> Título da página </title> <meta charset = "utf-8"> <meta name = "descrição" content = "Descrição da página para robôs de pesquisa"> </head>

Caso contrário, a estrutura da página HTML pode ser qualquer coisa. Suas características dependem do projeto específico.

A principal regra que deve ser observada naqualquer documento da web é o aninhamento correto de tags. Primeiro, o descritor localizado no nível de aninhamento mais profundo é fechado e, em seguida, todos os externos um por um.

<body> <main> <artigo> p Texto do parágrafo </p> <! - o parágrafo é fechado primeiro -> </article> <! - então artigo -> </main> <! - então a tag principal -> </body> <! - e finalmente o corpo do documento ->

Estrutura semântica

Conforme a especificação eo surgimento de novos descritores mudou a tecnologia de criação de documentos da web. Inicialmente, os textos seguiam em fluxo contínuo, dividindo-se apenas em parágrafos. Em seguida, veio a era do layout de tabela, que tornou possível colocar blocos em uma página em qualquer configuração, por exemplo, em colunas.

Com o desenvolvimento do CSS, o uso de tabelas foi gradativamente abandonado, pois os estilos possibilitaram desenhar um documento conforme desejado.

Linguagem de marcação de hipertexto para páginas da web

O novo padrão HTML incentiva a semântica na estrutura dos documentos HTML. Isso é conseguido usando tags semânticas, como cabeçalho, rodapé, a Principal, artigo, nav, seção e outros.

A linguagem principal da Internet é muito simples. Qualquer pessoa pode descobrir o que é HTML e aplicar esse conhecimento com êxito, criando suas próprias páginas da web.

Gostei:
0
Posts populares
Desenvolvimento Espiritual
Alimento
sim