」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > HTML:它是什麼,它對網路有多重要。

HTML:它是什麼,它對網路有多重要。

發佈於2024-09-01
瀏覽:794

Quando você entrar em sites de notícias, redes sociais, sistemas de bancos, entre outros, temos vários elementos que são disponibilizados na tela que possibilitam a interação do usuário.

Mais você já parou para pensar em como tudo isto foi construído?

Um dos profissionais responsáveis por construir um site é o desenvolvedor front-end, que transforma em código um layout feito pela equipe de UX/UI design utilizando o figma.

Tecnicamente, a construção de um website é feita através de várias tecnologias, e uma delas é o HTML.

Neste artigo, você vai conhecer o que é o HTML e para que ele serve e como pode ser utilizado.

O que é HTML?

Por ser uma tecnologia utilizada para desenvolver sites, é comum pensarmos que programamos em HTML. Uma observação importante é que o HTML não é uma linguagem de programação, e sim de marcação.

As linguagens de programação são usadas para criar algoritmos, manipular variáveis e estruturas de dados. Já o HTML, sigla em inglês para Linguagem de Marcação de Hipertexto, estrutura e formata o conteúdo de páginas web.

Para você poder construir um projeto com essa tecnologia, precisa de um arquivo com formado “.html”, sendo assim é possível abri-lo em um navegador, que interpretará o código-fonte para mostrar o elementos na tela.

Anatomia de um arquivo HTML

A anatomia de um arquivo HTML pode ser interpretada como uma árvore.

Temos a raiz, que é o elemento , e a partir dela podemos declarar novos elementos (que são como ramos) que podem ser interpretados como filhos e consequentemente, também é possível a criação de elementos pais. Além disso elementos que compartilham do mesmo remo de origem podem ser chamados de irmãos.

A anatomia de um elemento HTML

Já a anatomia de um elemento HTML é construída através da abertura da tag que é cercada de colchetes angulares.

Por exemplo, a tag de parágrafo

é seguida pelo conteúdo que será mostrado e por fim, é fechada por uma tag que é igual a de abertura, mas com uma barra antes do nome do elemento:

.

O resultado final é este:

Ex.

O nome do meu cão é Retovem.

O que podemos criar com HTML?

Com o HTML podemos criar vários elementos para construir uma página web com tema da sua preferência: Blogs, lojas virtuais, páginas de notícias etc.

Alguns dos principais elementos que podemos criar são:

  • Títulos e parágrafos
  • Links e botões
  • Imagens
  • Listas e tabelas
  • Formulários
  • Vídeos e áudios

Essa linguagem de marcação nos oferecem uma ampla gama de recursos, tendo sido citados somente alguns dele, que podem ser utilizado de acordo com a necessidade do projeto.

A evolução do HTML

Tim Berners-Lee desenvolveu o HTML no CERN (Organização Europeia para a Pesquisa Nuclear) usando o ambiente de desenvolvimento NeXTSTEP. Originalmente, era um conjunto de ferramentas para gerenciar pesquisas e comunicação entre ele.

Com a evolução da internet, a solução foi ganhando atenção mundial. As primeiras versões eram flexíveis, e isso ajudava iniciantes na área.

Com o tempo, a estrutura foi ficando mais rígida, mas até hoje os navegadores conseguem interpretar as páginas web feitas da maneira antiga através da retrocompatibilidade.

As especificações foram definidas na década de 1990. Em seguida, começou a evolução do HTML, sendo criado um grupo de trabalho para o HTML que, em 1995, publicou a versão HTML 2.0.

No final de 1997 foi lançado a versão HTML 3.5 e com ela, o grupo de trabalho da W3C começou a focar no desenvolvimento do XHTML em 2000, e finalmente chegamos em 2014, momento em que é lançado o HTML, que é utilizado até os dias de hoje.

Vimos que foram lançadas várias versões do HTML até chegarmos àquela que utilizamos hoje, mas qual a diferença entre o HTML e HTML5?

Diferenças entre o HTML e HTML5

Nas versões mais antigas a estruturação de conteúdo era feita principalmente por elementos genéricos, como

e .

No HTML5 temos tags semânticas que se referem ao objetivo do elemento com para cabeçalho, para o rodapé, para separar seções, entre outras.

Além disso, hoje com HTML5 temos suporte nativo para áudio, podemos incorporá-los diretamente na página.

Formulários também conseguem abranger mais tipos de campos na versão: agora temos disponíveis campos de e-mail, número, data e especificações que geram validações nativas nos elementos.

Entretanto, é importante saber que o HTML é uma versão estática. Ainda hoje ele é desenvolvido e aprimorado, com funcionalidades e recursos sendo adicionados de tempos em tempos.

HTML vs XML: Quais são suas diferenças?

Tanto o XML (Extensible Markup Language) quanto o HTML são linguagens de marcação utilizadas na web, mas apesar disso, possuem propósitos e estrutura diferentes.

O XML é projetado para representar informações hierárquicas e legíveis para humanos e máquinas. Não se preocupa com a apresentação visual e não possui estrutura pré-definida. Em vez disso, descreve a estrutura dos dados de forma consistente e portátil.

No Brasil, é o formato mais utilizado na emissão de notas fiscais.

O HTML, é usado para criar e exibir conteúdo em páginas web, é limitado devido à sua estrutura e elementos pré-definidos, focando na apresentação visual e exibição dos elementos no navegador. Ele é comumente utilizado na construção de sites.

Podemos considerar que as principais diferenças são: enquanto o XML é usado para armazenar e transportar dados, o HTML é utilizado para criar páginas web com conteúdo formatado e que possibilita a interação.

Como funciona o HTML?

Como falamos anteriormente, o HTML é utilizado para estruturar e formatar o conteúdo de páginas web através de tags, que são interpretadas pelo navegador.

Para que seja possível essa interpretação, é importante declarar qual a versão do HTML será usada.

Essa declaração é feita através do , garantindo que o navegador interprete corretamente o código.

É importante observar que isso não é uma tag HTML, e sim uma instrução para o navegador que deve ser colocada no início do documento sem espaços entre ela.

Dom

A representação estruturada do conteúdo HTML de uma página web é feita através do DOM (Document Object Modal), que é uma interface de programação que permite o acesso e manipulação dos elementos.

É o DOM que faz a estruturação em forma de árvore dos elementos, em que cada um deles é representado por um nó organizado hierarquicamente de acordo com a estrutura do documento.

Podemos analisar um exemplo de código em HTML para a exibição de uma frase na tela:



  
    Aprendendo HTML
  
  
    

Olá, mundo!

Este é o meu primeiro projeto HTML

A estrutura do DOM seria a seguinte:

HTML: o que é, Qual a sua importância para a web.

  • : É o elemento raiz da página, de maneira hierárquica, está acima de todos.
  • : Se refere à “cabeça” da página, onde é possível inserir configurações que auxiliam na renderização, assim como o título da página. Ele está dentro do elemento , portanto ele é um elemento filho dele.
  • : Define o título da página, aquele que ficará visível na aba do navegador. É uma ramificação do , sendo um elemento filho.
  • : É o “corpo” da página, onde serão inseridos os elementos visuais que deverão aparecer, como os textos. Ele também está hierarquicamente inserido dentro do , portanto, é filho dele.
  • : Refere-se ao título principal que ficará visível no corpo da página. Como está dentro do , consequentemente pode ser considerado como filho.

  • : Constrói um parágrafo de texto de acordo com o conteúdo inserido dentro dele. Também está dentro do body, portanto é filho dele e irmão do

Assim, podemos visualizar que o DOM é uma representação em forma de árvore do conteúdo inserido no HTML e que, ao criar um nó para cada elemento, permite que eles sejam acessados por meio do JavaScript.

HTML semântico

O HTML semântico é uma abordagem no desenvolvimento web que enfatiza o uso correto e significativo dos elementos, escolhendo aqueles que melhor descrevem o conteúdo que está sendo apresentado.

Em vez de usar uma

genérico para todo o conteúdo, podemos usar elementos mais específicos, como , , , , , , entre outros, de acordo com a estrutura e a natureza do conteúdo. isso é utilizado para melhorar o SEO ( Search Engine Optimization).

Uma das principais características dessas abordagem é a importância dos cabeçalhos, que são representados pelos elementos

a

, sendo essenciais para indicar a hierarquia do conteúdo.

Os sites de pesquisas dão importância aos cabeçalhos, por isso é um ponto de foco.

O texto alternativo em imagens é crucial tanto para a acessibilidade quanto para o SEO. Tendo o cuidado de inserir o atributo “alt” nas tags de imagem, fornecendo um texto descritivo, isso permite que leitores de tela leiam o texto e que sites de pesquisas considerem esse texto ao classificar as páginas.

Ainda sobre textos no contexto de semânticas, é importante usar links descritivos em vez de genéricos. Por exemplo, em vez de construir um link com “clique aqui”, escreva um texto que deixe claro o destino desse link.

Ao aplicar essas práticas, você cria páginas amigáveis para sites de busca, como o Google, e acessíveis para todos os usuários. isso resulta em:

  • Melhor experiência dos usuário
  • Maior alcance do público
  • Uma web mias inclusa.

Qual a relação entre HTML, CSS e JavaScript?

Devs front-end utilizam várias tecnologias no desenvolvimento de um site, mas seja usando frameworks e bibliotecas, a base é sempre a mesma: HTML, CSS e JavaScript.

O HTML, como vimos neste artigo, é uma linguagem de marcação utilizada para estruturar e organizar o conteúdo da página. mas somente com o HTML não é possível estilizar os elementos ou construir interações complexas.

É como a estrutura de um prédio, fornecendo paredes, portas e janelas. Mas qual é a diferença entre a linguagem HTML e a linguagem CSS?

A diferença entre HTML e CSS

Diferente do HTML, o CSS (Cascading Style Sheets, em português, folha de estilos em cascata) é uma linguagem de estilo que define a aparência e o layout dos elementos HTML em uma página web.

Com ele, conseguimos colocar cores, fontes, margens, tamanhos, posicionamentos e outros atributos nos elementos.

É como a pintura, a decoração e o design interior de um prédio, tornando-o esteticamente atraente e agradável.

Em quais áreas o HTML é usado?

Embora o HTML seja geralmente utilizado na área de desenvolvimento web, também é possível utiliza-lo em outras áreas da programação, como:

  • No desenvolvimento de e-mail marketing
  • No desenvolvimento mobile
  • No desenvolvimento de jogos
  • No desenvolvimento de aplicativos desktop

É importante observar que o HTML é frequentemente combinado com outras tecnologias, como CSS e JavaScript, para poder criar estas e outras experiências.

Conclusão

Neste artigo você conheceu o HTML, suas história, como funciona e como utilizá-lo através de tags e elementos. Além de conhecer onde o HTML pode ser aplicado e a relação entre HTML, CSS e JavaScript.

HTML é uma linguagem de marcação, não de programação. É usado para criar elementos e estruturar páginas web. É uma tecnologia empregada por desenvolvedores front-end, geralmente em conjunto com CSS e JavaScript.

Se você gostou desse conteúdo, deixa ai nos comentários a sua opinião, compartilha para que mais pessoas possam ver e curti também.

Até mais!

版本聲明 本文轉載於:https://dev.to/albericojr/html-o-que-e-qual-a-sua-importancia-para-a-web-35lb?1如有侵犯,請洽[email protected]刪除
最新教學 更多>
  • 在PHP中如何高效檢測空數組?
    在PHP中如何高效檢測空數組?
    在PHP 中檢查一個空數組可以通過各種方法在PHP中確定一個空數組。如果需要驗證任何數組元素的存在,則PHP的鬆散鍵入允許對數組本身進行直接評估:一種更嚴格的方法涉及使用count()函數: if(count(count($ playerList)=== 0){ //列表為空。 } 對...
    程式設計 發佈於2025-05-12
  • 如何有效地轉換PHP中的時區?
    如何有效地轉換PHP中的時區?
    在PHP 利用dateTime對象和functions DateTime對象及其相應的功能別名為時區轉換提供方便的方法。例如: //定義用戶的時區 date_default_timezone_set('歐洲/倫敦'); //創建DateTime對象 $ dateTime = ne...
    程式設計 發佈於2025-05-12
  • PHP陣列鍵值異常:了解07和08的好奇情況
    PHP陣列鍵值異常:了解07和08的好奇情況
    PHP數組鍵值問題,使用07&08 在給定數月的數組中,鍵值07和08呈現令人困惑的行為時,就會出現一個不尋常的問題。運行print_r($月份)返回意外結果:鍵“ 07”丟失,而鍵“ 08”分配給了9月的值。 此問題源於PHP對領先零的解釋。當一個數字帶有0(例如07或08)的前綴時,PHP...
    程式設計 發佈於2025-05-12
  • 如何使用“ JSON”軟件包解析JSON陣列?
    如何使用“ JSON”軟件包解析JSON陣列?
    parsing JSON與JSON軟件包 QUALDALS:考慮以下go代碼:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    程式設計 發佈於2025-05-12
  • C++成員函數指針正確傳遞方法
    C++成員函數指針正確傳遞方法
    如何將成員函數置於c [&& && && && && && && && && && &&&&&&&&&&&&&&&&&&&&&&&華儀的函數時,在接受成員函數指針的函數時,要在函數上既要提供指針又可以提供指針和指針到函數的函數。需要具有一定簽名的功能指針。要通過成員函數,您需要同時提供對象指針(此...
    程式設計 發佈於2025-05-12
  • 找到最大計數時,如何解決mySQL中的“組函數\”錯誤的“無效使用”?
    找到最大計數時,如何解決mySQL中的“組函數\”錯誤的“無效使用”?
    如何在mySQL中使用mySql 檢索最大計數,您可能會遇到一個問題,您可能會在嘗試使用以下命令:理解錯誤正確找到由名稱列分組的值的最大計數,請使用以下修改後的查詢: 計數(*)為c 來自EMP1 按名稱組 c desc訂購 限制1 查詢說明 select語句提取名稱列和每個名稱...
    程式設計 發佈於2025-05-12
  • 如何在Java的全屏獨家模式下處理用戶輸入?
    如何在Java的全屏獨家模式下處理用戶輸入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    程式設計 發佈於2025-05-12
  • 如何檢查對像是否具有Python中的特定屬性?
    如何檢查對像是否具有Python中的特定屬性?
    方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例,其中嘗試訪問不確定屬性會引起錯誤: >>> a = someClass() >>> A.property Trackback(最近的最新電話): 文件“ ”,第1行, attributeError:SomeClass實...
    程式設計 發佈於2025-05-12
  • 如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...
    程式設計 發佈於2025-05-12
  • 如何高效地在一個事務中插入數據到多個MySQL表?
    如何高效地在一個事務中插入數據到多個MySQL表?
    mySQL插入到多個表中,該數據可能會產生意外的結果。雖然似乎有多個查詢可以解決問題,但將從用戶表的自動信息ID與配置文件表的手動用戶ID相關聯提出了挑戰。 使用Transactions和last_insert_id() 插入用戶(用戶名,密碼)值('test','tes...
    程式設計 發佈於2025-05-12
  • 在Java中如何為PNG文件添加坐標軸和標籤?
    在Java中如何為PNG文件添加坐標軸和標籤?
    如何用java 在現有png映像中添加軸和標籤的axes和labels如何註釋png文件可能具有挑戰性。與其嘗試可能導致錯誤和不一致的修改,不如建議在圖表創建過程中集成註釋。 使用JFReechArt import java.awt.color; 導入java.awt.eventqueue; 導...
    程式設計 發佈於2025-05-12
  • 解決Spring Security 4.1及以上版本CORS問題指南
    解決Spring Security 4.1及以上版本CORS問題指南
    彈簧安全性cors filter:故障排除常見問題 在將Spring Security集成到現有項目中時,您可能會遇到與CORS相關的錯誤,如果像“訪問Control-allo-allow-Origin”之類的標頭,則無法設置在響應中。為了解決此問題,您可以實現自定義過濾器,例如代碼段中的MyFi...
    程式設計 發佈於2025-05-12
  • 如何處理PHP文件系統功能中的UTF-8文件名?
    如何處理PHP文件系統功能中的UTF-8文件名?
    在PHP的Filesystem functions中處理UTF-8 FileNames 在使用PHP的MKDIR函數中含有UTF-8字符的文件很多flusf-8字符時,您可能會在Windows Explorer中遇到comploreer grounder grounder grounder gro...
    程式設計 發佈於2025-05-12
  • Go web應用何時關閉數據庫連接?
    Go web應用何時關閉數據庫連接?
    在GO Web Applications中管理數據庫連接很少,考慮以下簡化的web應用程序代碼:出現的問題:何時應在DB連接上調用Close()方法? ,該特定方案將自動關閉程序時,該程序將在EXITS EXITS EXITS出現時自動關閉。但是,其他考慮因素可能保證手動處理。 選項1:隱式關閉終...
    程式設計 發佈於2025-05-12
  • 如何在GO編譯器中自定義編譯優化?
    如何在GO編譯器中自定義編譯優化?
    在GO編譯器中自定義編譯優化 GO中的默認編譯過程遵循特定的優化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    程式設計 發佈於2025-05-12

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3