contoh web desain html

Contoh Web Desain Html- File HTML diakhiri dengan ekstensi. contoh web desain html ataupun. htm. Ekstensi file ini dapat dilihat dengan mengunakan website browser apa juga( semacam Google Chrome, Safari, ataupun Mozila Firefox). Browser tersebut membaca file HTML serta merender kontennya sehingga user internet dapat memandang serta membacanya.

Umumnya, rata- rata web website menyertakan beberapa contoh web desain htmltaman HTML yang berbeda- beda. Contohnya, taman beranda,‘ Tentang Kami’, taman kontak mempunyai dokumennya sendiri- sendiri.

Tiap- tiap taman tersebut terdiri atas serangkaian tags( dapat diucap pula elements), yang tersusun buat membentuk suatu taman web. Tag tersebut membuat hierarki yang menyusun konten sampai jadi bagian, paragraf, heading, serta block konten yang lain.

Sebagian besar elemen bahasa markup ini mempunyai tag pembuka serta penutup yang memakai syntax<tag
</ tag
.

Berikut contoh kode dari lapisan ataupun struktur HTML

 

<div

<h1
TheMain Heading</ h1

<h2
Acatchy subheading</ h2

<p
Paragraphone</ p

<img src=”/” alt=” Image”

<p
Paragraphtwo with a<a href=” https:// example. com”
hyperlink</ a
</ p

</ div

Elemen paling atas serta terbawah merupakan division simpel(<div
</ div
) yang dapat Kamu pakai buat mark up bagian konten yang lebih besar.

Lapisan di atas terdiri atas heading(<h1
</ h1
), subheading(<h2
</ h2), 2 paragraf(<p
</ p
), serta satu foto(<img
).

Paragraf kedua meliputi suatu link(<a
</ a
) dengan attribute href yang terdiri atas URL tujuan.

Tag foto mempunyai 2 attribute, src buat path foto serta alt buat deskripsi foto.

Penafsiran Tag HTML serta Fungsinya

Tag HTML mempunyai 2 jenis utama: block- level serta inline tags.

Elemen block- level mengenakan seluruh ruang yang ada serta senantiasa membuat line baru di dalam dokumen. Contoh dari tag block merupakan heading serta paragraf.

Elemen inline cuma mengenakan ruang cocok dengan kebutuhannya serta tidak membuat line baru di taman. Umumnya elemen ini hendak memformat isi konten dari elemen block- level. Contoh dari tag inline merupakan link serta emphasized strings.

Tag Block- Level

3 tag block- level yang wajib dipunyai oleh tiap dokumen HTML merupakan<html
,<head
, serta<body
.

Tag<html
</ html
merupakan elemen tingkat paling tinggi yang menyertakan tiap taman HTML.

Tag<head
</ head
menaruh data meta, semacam judul serta charset taman.

Tag<body
</ body
melampirkan seluruh konten yang timbul pada sesuatu taman.

<html

<head

<!– META INFORMATION–

</ head

<body

<!– PAGE CONTENT–

</ body

</ html

Heading mempunyai 6 tingkat. Tingkat tersebut bermacam- macam, mulai dari<h1
</ h1
hingga<h6
</ h6
, di mana h1 ialah tingkat heading paling tinggi serta h6 merupakan tingkat terendah. Paragraf dibuka serta ditutup dengan tag<p
</ p
, sebaliknya blockquote memakai tag<blockquote
</ blockquote
.

Division ialah bagian konten yang lebih besar serta umumnya terdiri atas sebagian paragraf, foto, kadang- kadang blockquote, serta elemen lebih kecil yang lain. Kita dapat membuat mark up dengan memakai tag<div
</ div
. Di dalam elemen div pula ada tag div yang lain.

Kamu pula dapat memakai tag<ol
</ ol
buat list yang berentetan serta<ul
</ ul
buat list yang tidak berentetan. Tiap- tiap list item wajib dibuka serta ditutup dengan tag<li
</ li
. Selaku contoh, di dasar ini

merupakan tampilan bawah catatan tidak berentetan dalam HTML:

<ul

<li
Listitem 1</ li

<li
Listitem 2</ li

<li
Listitem 3</ li

</ ul

Tag Inline

Sebagian besar tag inline digunakan buat memformat bacaan. Selaku contoh, tag<strong
</ strong
hendak render elemen ke format bold, sebaliknya tag<em
</ em
hendak ditampilkan dalam format italic.

Hyperlink merupakan elemen inline yang mengharuskan terdapatnya tag<a
</ a
serta attribute href buat mengindikasi tujuan link:

<a href=” https:// example. com/”
Clickme!</ a

Foto( image) pula ialah elemen inline. Kamu bisa meningkatkan satu foto dengan memakai<img
tanpa wajib membubuhkan tag penutup. Cuma saja, Kamu dianjurkan memakai attribute src buat memastikan path foto, misalnya:

<img src=”/ images/ example. jpg” alt=” Example image”

Bila mau menekuni lebih dalam tentang penafsiran tag HTML dan tag HTML serta funsginya, silakan baca postingan cheat sheet kami, lengkap dengan link unduhan dokumen PDF buat menolong Kamu mempelajarinya.

Apa yang Membedakan contoh web desain html dengan HTML5?

Semenjak awal diperkenalkan, bahasa ini sudah melewati pertumbuhan yang lumayan signifikan. W3C terus merilis tipe serta pembaharuan terkini sambil mencetak sejarah serta mengukuhkan keberadaannya.

HTML4( diketahui selaku“ HTML”) dirilis pada tahun 1999 serta tipe terbarunya diperkenalkan pada publik pada tahun 2014, ialah HTML5, tipe terkini ini meningkatkan lebih banyak fitur baru ke bahasa mark up ini.

Salah satu fitur mutahir di HTML5 merupakan sokongan buat embed audio serta video. Jadi, alih- alih memakai Flash player, kita dapat menyematkan file video serta audio ke taman web dengan menggunakan tag<audio
</ audio
serta<video
</ video
. Fitur tersebut pula mempunyai sokongan bawaan buat SVG serta MathML buat rumus

matematika serta ilmiah.

HTML5 pula memperkenalkan sebagian revisi pada semantic. Tag semantic baru mengirimkan data pada browser tentang makna konten, yang

tidak cuma berguna untuk pembaca, tetapi pula mesin pencari.

Tag semantic yang sangat banyak digunakan merupakan<article
</ article
,<section
</ section
,<aside
</ aside
,<header
</ header
, serta<footer
</ footer
. Bila mau menekuni lebih lanjut, silakan baca postingan kami tentang perbandingan HTML serta HTML5.

Kelebihan serta Kekurangan contoh web desain HTML

Sama semacam perihal teknis yang lain dalam dunia website, bahasa markup ini pula memiliki kelebihan serta kekurangannya.

Berikut kelebihan HTML:

  • Digunakan secara luas serta mempunyai banyak sumber dan komunitas yang besar.
  • Dijalankan secara natural di tiap website browser.
  • Gampang dipelajari.
  • Open- source serta seluruhnya free.
  • Apik serta tidak berubah- ubah.
  • Jadi standar formal website, dikelola oleh( W3C).
  • Integrasi gampang dengan bahasa backend, semacam PHP serta Node. js.

Setelah itu, berikut merupakan kekurangan HTML:

Biasanya digunakan buat taman website statis. Buat fitur dinamis, Kamu dapat memakai JavaScript ataupun bahasa backend, semacam PHP.

Tidak dapat melaksanakan logic. Walhasil, seluruh taman website wajib terbuat terpisah walaupun memakai elemen yang sama, semacam header serta footer.

Fitur baru tidak dapat digunakan dengan kilat di sebagian browser.

Sikap browser terkadang susah diprediksi. Misalnya, browser lama tidak senantiasa dapat merender tag yang lebih baru.

Ikatan HTML, CSS, serta JavaScript

Walaupun dinyatakan selaku bahasa markup yang mutahir serta gampang, HTML tidak seluruhnya dapat membuat web yang handal serta responsif. Bahasa ini cuma dapat digunakan buat menaikkan elemen serta membuat struktur konten.

Tetapi di satu sisi, bahasa ini dapat bekerja secara optimal dengan 2 bahasa frontend: CSS( Cascading Gaya Sheets) serta JavaScript. Bila digabungkan, kedua bahasa frontend ini dapat tingkatkan pengalaman user serta membagikan guna yang lebih mutahir.

CSS erat kaitannya dengan styling, semacam latar belakang, warna, layout, spacing, serta animiasi.

JavaScript membolehkan Kamu meningkatkan fungsionalitas yang dinamis, semacam slider, pop- up, serta galeri gambar.

Bila ditafsirkan, berikut perbandingan HTML serta CSS serta JavaScript: HTML merupakan orang yang tidak menggunakan busana apa juga, setelah itu CSS merupakan bajunya, setelah itu JavaScript merupakan kegiatan serta perilaku orang tersebut.

Kesimpulan

Hingga di mari, Kamu telah menekuni apa itu HTML, pengertiannya, serta metode kerjanya.

HTML tidaklah bahasa pemrograman, serta tidak mempunyai keahlian buat membuat fungsionalitas yang dinamis. Dengan bahasa markup ini, user dapat mengelola serta memformat dokumen secara statis, sama semacam Microsoft Word.

Bersumber pada metode kerja HTML, Kamu dapat memakainya buat membuat struktur konten pada web serta aplikasi website( memakai coding simpel). HTML ialah tingkat terbawah dari teknologi frontend serta berperan selaku bawah styling yang dapat Kamu tambahkan dengan CSS serta fungsionalitas yang bisa dijalakan memakai JavaScript.