HTML: apakah itu, betapa pentingnya ia untuk web.

Apabila anda memasuki tapak berita, rangkaian sosial, sistem perbankan, antara lain, kami mempunyai beberapa elemen yang tersedia pada skrin yang membolehkan interaksi pengguna.

Tetapi adakah anda pernah berhenti untuk memikirkan bagaimana semua ini dibina?

Salah seorang profesional yang bertanggungjawab membina tapak web ialah pembangun bahagian hadapan, yang mengubah reka letak yang dibuat oleh pasukan reka bentuk UX/UI kepada kod menggunakan figma.

Secara teknikal, membina tapak web dilakukan melalui beberapa teknologi, dan salah satunya ialah HTML.

Dalam artikel ini, anda akan mempelajari apa itu HTML dan untuk kegunaannya serta cara ia boleh digunakan.

Apakah HTML?

Memandangkan ia adalah teknologi yang digunakan untuk membangunkan tapak web, adalah perkara biasa untuk berfikir bahawa kami memprogram dalam HTML. Nota penting ialah HTML bukan bahasa pengaturcaraan, tetapi bahasa penanda.

Bahasa pengaturcaraan digunakan untuk mencipta algoritma, memanipulasi pembolehubah dan struktur data. HTML, akronim Bahasa Inggeris untuk Hypertext Markup Language, menstruktur dan memformat kandungan halaman web.

Untuk dapat membina projek dengan teknologi ini, anda memerlukan fail dengan format ".html", supaya anda boleh membukanya dalam penyemak imbas, yang akan mentafsir kod sumber untuk menunjukkan elemen pada skrin.

Anatomi fail HTML

Anatomi fail HTML boleh ditafsirkan sebagai pokok.

Kami mempunyai akar, iaitu elemen, dan dari situ kita boleh mengisytiharkan elemen baru (yang seperti cabang) yang boleh ditafsirkan sebagai kanak-kanak dan akibatnya, ia juga mungkin untuk mencipta elemen induk. Tambahan pula, elemen yang berkongsi baris asal yang sama boleh dipanggil adik beradik.

Anatomi elemen HTML

Anatomi elemen HTML dibina dengan membuka teg yang dikelilingi oleh kurungan sudut.

Contohnya, teg perenggan

diikuti dengan kandungan yang akan ditunjukkan dan akhirnya, ia ditutup dengan teg yang sama dengan teg pembukaan, tetapi dengan garis miring sebelum nama elemen:

.

Keputusan akhir ialah ini:

Cth.

e388a4556c0f65e1904146cc1a846bee O nome do meu cão é Retovem. 94b3e26ee717c64999d7867364b1b4a3

Apa yang boleh kita buat dengan HTML?

Dengan HTML kami boleh mencipta pelbagai elemen untuk membina halaman web dengan tema pilihan anda: Blog, kedai dalam talian, halaman berita, dll.

Beberapa elemen utama yang boleh kami cipta ialah:

• Tajuk dan perenggan
• Pautan dan butang
• Imej
• Senarai dan jadual
• Borang
• Video dan audio

Bahasa penanda ini menawarkan kami pelbagai sumber, hanya beberapa daripadanya telah disebut, yang boleh digunakan mengikut keperluan projek.

Evolusi HTML

Tim Berners-Lee membangunkan HTML di CERN (Pertubuhan Penyelidikan Nuklear Eropah) menggunakan persekitaran pembangunan NeXTSTEP. Pada asalnya, ia adalah satu set alat untuk mengurus carian dan komunikasi antaranya.

Dengan evolusi internet, penyelesaian itu mendapat perhatian seluruh dunia. Versi pertama adalah fleksibel, dan ini membantu pemula dalam bidang ini.

Lama kelamaan, strukturnya menjadi lebih tegar, tetapi hari ini penyemak imbas boleh mentafsir halaman web yang dicipta dengan cara lama melalui keserasian ke belakang.

Spesifikasi telah ditakrifkan pada tahun 1990-an Kemudian evolusi HTML bermula, dengan kumpulan kerja HTML dicipta yang, pada tahun 1995, menerbitkan versi HTML 2.0.

.

Pada penghujung tahun 1997, versi HTML 3.5 telah dikeluarkan dan dengan itu, kumpulan kerja W3C mula memberi tumpuan kepada pembangunan XHTML pada tahun 2000, dan kami akhirnya tiba pada tahun 2014, apabila HTML dikeluarkan, yang digunakan sehingga hari ini.

Kami melihat bahawa beberapa versi HTML telah dikeluarkan sehingga kami mencapai versi yang kami gunakan hari ini, tetapi apakah perbezaan antara HTML dan HTML5?

Perbezaan antara HTML dan HTML5

Dalam versi lama, penstrukturan kandungan dilakukan terutamanya oleh elemen generik, seperti

dan .

Dalam HTML5 kami mempunyai teg semantik yang merujuk kepada tujuan elemen dengan pengepala, pengaki, bahagian yang memisahkan, antara lain.

Selain itu, hari ini dengan HTML5 kami mempunyai sokongan asli untuk audio, kami boleh membenamkannya terus pada halaman.

Borang juga boleh merangkumi lebih banyak jenis medan dalam versi: kami kini mempunyai e-mel, nombor, tarikh dan medan spesifikasi yang tersedia yang menjana pengesahan asli pada elemen.

Walau bagaimanapun, adalah penting untuk mengetahui bahawa HTML ialah versi statik. Ia masih dibangunkan dan dipertingkatkan hari ini, dengan ciri dan ciri ditambah dari semasa ke semasa.

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 8b05045a5be5764f313ed5b9168a17e6, 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:

<span class="cp"><!DOCTYPE html>
<html>
  <head>
    <title>Aprendendo HTML</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>   
    <p>Este é o meu primeiro projeto HTML</p>
  </body>
</html>

A estrutura do DOM seria a seguinte:

• : É 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.

Masih mengenai teks dalam konteks semantik, adalah penting untuk menggunakan pautan deskriptif dan bukannya pautan generik. Sebagai contoh, bukannya membina pautan "klik di sini", tulis teks yang menjadikan destinasi pautan itu jelas.

Dengan menggunakan amalan ini, anda membuat halaman yang mesra enjin carian, seperti Google dan boleh diakses oleh semua pengguna. ini menghasilkan:

• Pengalaman pengguna yang lebih baik
• Jangkauan khalayak yang lebih besar
• Lebih banyak web disertakan.

Apakah hubungan antara HTML, CSS dan JavaScript?

Pembangun hadapan menggunakan pelbagai teknologi semasa membangunkan tapak web, tetapi sama ada menggunakan rangka kerja dan perpustakaan, asasnya sentiasa sama: HTML, CSS dan JavaScript.

HTML, seperti yang kita lihat dalam artikel ini, ialah bahasa penanda yang digunakan untuk menstruktur dan menyusun kandungan halaman. tetapi dengan HTML sahaja tidak mungkin untuk menggayakan elemen atau membina interaksi yang kompleks.

Ia seperti struktur bangunan, menyediakan dinding, pintu dan tingkap. Tetapi apakah perbezaan antara bahasa HTML dan bahasa CSS?

Perbezaan antara HTML dan CSS

Berbeza daripada HTML, CSS (Cascading Style Sheets) ialah bahasa gaya yang mentakrifkan rupa dan reka letak elemen HTML pada halaman web.

Dengannya, kami boleh meletakkan warna, fon, jidar, saiz, kedudukan dan atribut lain pada elemen.

Ia seperti melukis, menghias dan mereka bentuk dalaman bangunan, menjadikannya menarik dan menggembirakan dari segi estetika.

Dalam bidang apakah HTML digunakan?

Walaupun HTML biasanya digunakan dalam bidang pembangunan web, ia juga boleh digunakan dalam bidang pengaturcaraan lain, seperti:

• Dalam pembangunan pemasaran e-mel
• Dalam pembangunan mudah alih
• Dalam pembangunan permainan
• Dalam pembangunan aplikasi desktop

Adalah penting untuk ambil perhatian bahawa HTML sering digabungkan dengan teknologi lain, seperti CSS dan JavaScript, untuk mencipta pengalaman ini dan pengalaman lain.

Kesimpulan

Dalam artikel ini anda mempelajari tentang HTML, sejarahnya, cara ia berfungsi dan cara menggunakannya melalui teg dan elemen. Selain mengetahui tempat HTML boleh digunakan dan hubungan antara HTML, CSS dan JavaScript.

HTML ialah bahasa penanda, bukan bahasa pengaturcaraan. Ia digunakan untuk mencipta elemen dan struktur halaman web. Ia ialah teknologi yang digunakan oleh pembangun bahagian hadapan, biasanya bersama-sama dengan CSS dan JavaScript.

Jika anda menyukai kandungan ini, tinggalkan pendapat anda dalam komen, kongsikannya supaya lebih ramai orang dapat melihatnya dan menyukainya juga.

Jumpa nanti!

Atas ialah kandungan terperinci HTML: apakah itu, betapa pentingnya ia untuk web.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!