kode html

Apa itu halaman html sederhana?

Selamat datang di Belajar HTML, cara termudah belajar HTML & CSS online, interaktif

Mempelajari HTML & CSS sangat penting untuk pengembang web mana pun, dan tidak perlu mengetahui cara memprogram menggunakan JavaScript

Sebelum Anda mulai, saya sarankan Anda memulai dengan mengunduh IDE HTML & CSS. Preferensi pribadi saya adalah menggunakan IDE oleh JetBrains. Anda dapat mengunduh Edisi Komunitas PyCharm secara gratis, yang memiliki dukungan pengembangan HTML, CSS, dan JavaScript yang sangat bagus, bersama dengan semua barang yang disediakan oleh IDE yang bagus - integrasi kode sumber, pemfaktoran ulang kode, indentasi otomatis, penyorotan sintaks, perbandingan

Berikut adalah daftar editor HTML, CSS, dan JavaScript yang dapat Anda pilih

Dalam tutorial ini Anda sebenarnya tidak memerlukan IDE, karena semua pengkodean dilakukan secara online

pengantar

HTML [HyperText Markup Language] adalah standar yang dikembangkan selama bertahun-tahun untuk menyampaikan informasi melalui internet dengan menggunakan "hyperlink" - atau hanya tautan seperti yang kita kenal sekarang. Berbeda dengan PDF, halaman HTML jauh lebih dinamis, memungkinkan Anda menjelajahi web dengan mengeklik tautan dan berinteraksi dengan halaman tersebut. Tautan dapat membawa Anda ke lokasi lain dalam halaman saat ini, atau ke halaman lain melalui internet

Versi terakhir dari HTML adalah HTML 5. 0, yang memiliki BANYAK kemampuan lebih dari apa yang awalnya ada dalam pikiran web. HTML 5 adalah platform yang sangat komprehensif yang memungkinkan pembuatan antarmuka pengguna kelas atas bersama dengan kekuatan CSS dan JavaScript. HTML 5 sangat kuat sehingga berhasil menghilangkan Adobe Flash, Microsoft Silverlight, dan hampir semua plugin HTML seperti pemutar video, applet Java, dan lainnya

Jadi apa perbedaan antara HTML, CSS, dan JavaScript?

Halaman HTML adalah dokumen HTML yang mendefinisikan konten halaman dengan menggunakan markup khusus yang mirip dengan XML
Lembar gaya CSS menentukan gaya elemen HTML di halaman. Itu disematkan di dalam halaman HTML atau dimuat menggunakan tag
JavaScript adalah bahasa pemrograman yang digunakan untuk berinteraksi dengan halaman HTML melalui API yang disebut DOM [Document Object Model] Bindings. Dengan kata lain, DOM Bindings adalah perekat antara bahasa pemrograman dan halaman HTML yang awalnya dimuat ke dalam browser.

Dasar-dasar tutorial ini mencakup HTML dan CSS. Bagian lanjutan juga mengasumsikan pengetahuan dalam pemrograman dan JavaScript. Untuk mempelajari JavaScript, buka https. // www. belajar-js. org

Kami akan menggunakan kerangka kerja CSS yang disebut Bootstrap oleh Twitter, pustaka CSS paling umum saat ini. Prinsip dasar perpustakaan CSS hampir sama - semuanya didasarkan pada "sistem kisi", yang merupakan cara mudah untuk menentukan tata letak halaman HTML - metodologi yang dikembangkan selama bertahun-tahun dalam pengembangan web

Halaman HTML pertama Anda

Mari kita mulai dengan membuat halaman HTML sederhana. Halaman HTML memiliki tata letak dasar berikut

Mari kita mulai dengan membuat halaman sederhana yang berisi kalimat "Halo, Dunia. " di dalam tubuh. Halaman tersebut juga akan memiliki judul - hal yang muncul di judul tab di browser Anda. element defines the title of the HTML page.

The tag defines the document type that the browser is going to render. This is used for legacy reasons. If you want to get to the latest version of HTML [HTML5] then it's recommended to use this tag.

The

element defines a "paragraph", a block of text that has a small amount of spacing in between its top and bottom.

Notice how the tags have a start tag and an end tag denoted with a slash [

]. Everything in between is the content of the tag. The content of a tag can usually have additional HTML tags within them.

Example

This is an example of a simple HTML page with one paragraph.

Anda juga dapat menyalin dan menempelkan kode ini ke file baru di editor teks atau IDE Anda, dan menyimpan file sebagai "index. html". Indeks. html" adalah file default yang akan dicari oleh server web saat mengakses situs web. Setelah menyimpan file, Anda dapat mengklik dua kali untuk membukanya dengan browser Anda

HTML [HyperText Markup Language] adalah kode yang digunakan untuk menyusun halaman web dan kontennya. Misalnya, konten dapat disusun dalam kumpulan paragraf, daftar poin berpoin, atau menggunakan gambar dan tabel data. Seperti judulnya, artikel ini akan memberi Anda pemahaman dasar tentang HTML dan fungsinya

HTML adalah bahasa markup yang menentukan struktur konten Anda. HTML terdiri dari serangkaian elemen, yang Anda gunakan untuk menyertakan, atau membungkus, bagian konten yang berbeda untuk membuatnya tampil dengan cara tertentu, atau bertindak dengan cara tertentu. Tag penutup dapat membuat hyperlink kata atau gambar ke tempat lain, dapat memiringkan kata, dapat membuat font lebih besar atau lebih kecil, dan sebagainya. Misalnya, ambil baris konten berikut

My cat is very grumpy

Jika kita ingin baris tersebut berdiri sendiri, kita dapat menentukan bahwa itu adalah sebuah paragraf dengan melampirkannya dalam tag paragraf

My cat is very grumpy

Mari jelajahi elemen paragraf ini sedikit lebih jauh

Bagian utama dari elemen kami adalah sebagai berikut

Tag pembuka. Ini terdiri dari nama elemen [dalam hal ini, p], dibungkus dengan tanda kurung sudut buka dan tutup. Ini menyatakan di mana elemen dimulai atau mulai berlaku — dalam hal ini di mana paragraf dimulai
Tag penutup. Ini sama dengan tag pembuka, kecuali ada garis miring sebelum nama elemen. Ini menyatakan di mana elemen berakhir — dalam hal ini di mana paragraf berakhir. Gagal menambahkan tag penutup adalah salah satu kesalahan pemula standar dan dapat menyebabkan hasil yang aneh
Konten. Ini adalah konten elemen, yang dalam hal ini hanyalah teks
Elemen. Tag pembuka, tag penutup, dan konten bersama-sama membentuk elemen

Elemen juga dapat memiliki atribut yang terlihat seperti berikut

Atribut berisi informasi tambahan tentang elemen yang tidak ingin Anda tampilkan di konten sebenarnya. Di sini,

My cat is very grumpy

_4 adalah nama atribut dan

My cat is very grumpy

5 adalah nilai atribut. Atribut

My cat is very grumpy

_4 memungkinkan Anda memberi elemen pengidentifikasi non-unik yang dapat digunakan untuk menargetkannya [dan elemen lainnya dengan nilai

My cat is very grumpy

4 yang sama] dengan informasi gaya dan hal lainnya. Beberapa atribut tidak memiliki nilai, seperti

My cat is very grumpy

Atribut yang menetapkan nilai selalu memiliki

Spasi antara itu dan nama elemen [atau atribut sebelumnya, jika elemen sudah memiliki satu atau lebih atribut]
Nama atribut diikuti dengan tanda sama dengan
Nilai atribut dibungkus dengan tanda petik pembuka dan penutup

Catatan. Nilai atribut sederhana yang tidak berisi spasi putih ASCII [atau salah satu karakter

My cat is very grumpy

My cat is very grumpy.

My cat is very grumpy.

My cat is very grumpy.

My cat is very grumpy.

My cat is very grumpy.

4] dapat tetap tidak dikutip, tetapi disarankan agar Anda mengutip semua nilai atribut, karena membuat kode lebih konsisten dan mudah dipahami

Anda juga dapat meletakkan elemen di dalam elemen lain — ini disebut bersarang. Jika kita ingin menyatakan bahwa kucing kita sangat pemarah, kita dapat membungkus kata "sangat" dalam elemen

My cat is very grumpy.

5, yang artinya kata tersebut harus ditekankan dengan kuat

My cat is very grumpy.

Namun Anda perlu memastikan bahwa elemen Anda bersarang dengan benar. Pada contoh di atas, kita membuka elemen

My cat is very grumpy.

_6 terlebih dahulu, lalu elemen

My cat is very grumpy.

5; . Berikut ini adalah salah

My cat is very grumpy.

Elemen harus membuka dan menutup dengan benar sehingga jelas berada di dalam atau di luar satu sama lain. Jika tumpang tindih seperti yang ditunjukkan di atas, browser web Anda akan mencoba membuat tebakan terbaik pada apa yang ingin Anda katakan, yang dapat menyebabkan hasil yang tidak terduga. Jadi jangan lakukan itu

Beberapa elemen tidak memiliki konten dan disebut elemen kosong. Ambil elemen

My cat is very grumpy.

_0 yang sudah kita miliki di halaman HTML kita

Ini berisi dua atribut, tetapi tidak ada penutup

My cat is very grumpy.

1 tag dan tidak ada konten dalam. Ini karena elemen gambar tidak membungkus konten untuk memengaruhinya. Tujuannya adalah untuk menyematkan gambar di halaman HTML di tempat tampilannya

Itu meringkas dasar-dasar elemen HTML individu, tetapi mereka tidak berguna dengan sendirinya. Sekarang kita akan melihat bagaimana elemen individual digabungkan untuk membentuk seluruh halaman HTML. Mari tinjau kembali kode yang kita masukkan ke dalam contoh

My cat is very grumpy.

2 kita [yang pertama kali kita jumpai di artikel Berurusan dengan file]

DOCTYPE html>

  
    
    
    My test page

Di sini, kami memiliki yang berikut ini

```
My cat is very grumpy.
```
3 — doctype. Ini adalah pembukaan yang diperlukan. Dalam kabut waktu, ketika HTML masih muda [sekitar 1991/92], doctypes dimaksudkan untuk bertindak sebagai tautan ke seperangkat aturan yang harus diikuti oleh halaman HTML untuk dianggap sebagai HTML yang baik, yang bisa berarti pemeriksaan kesalahan otomatis dan lainnya. . Namun, saat ini, mereka tidak melakukan banyak hal dan pada dasarnya hanya diperlukan untuk memastikan dokumen Anda berfungsi dengan benar. Hanya itu yang perlu Anda ketahui untuk saat ini
```
My cat is very grumpy.
```
4 — elemen
```
My cat is very grumpy.
```
5. Elemen ini membungkus semua konten di seluruh halaman dan terkadang dikenal sebagai elemen root. Ini juga mencakup atribut
```
My cat is very grumpy.
```
_6, mengatur bahasa utama dokumen
```
My cat is very grumpy.
```
7 — elemen
```
My cat is very grumpy.
```
8. Elemen ini berfungsi sebagai penampung untuk semua hal yang ingin Anda sertakan di halaman HTML yang bukan merupakan konten yang Anda tampilkan ke pemirsa halaman Anda. Ini termasuk hal-hal seperti kata kunci dan deskripsi halaman yang ingin Anda tampilkan di hasil pencarian, CSS untuk mengatur gaya konten kami, deklarasi kumpulan karakter, dan banyak lagi
```
My cat is very grumpy.
```
9 — Elemen ini menetapkan kumpulan karakter yang harus digunakan dokumen Anda untuk UTF-8 yang menyertakan sebagian besar karakter dari sebagian besar bahasa tertulis. Pada dasarnya, sekarang dapat menangani teks apa pun yang mungkin Anda masukkan ke dalamnya. Tidak ada alasan untuk tidak menyetel ini, dan ini dapat membantu menghindari beberapa masalah di kemudian hari
0 — Hal ini memastikan halaman dirender pada lebar viewport, mencegah browser seluler merender halaman lebih lebar dari viewport lalu mengecilkannya
1 — elemen
2. Ini menetapkan judul halaman Anda, yang merupakan judul yang muncul di tab browser tempat halaman dimuat. Ini juga digunakan untuk mendeskripsikan halaman saat Anda menandai/memfavoritkannya
_3 — elemen
4. Ini berisi semua konten yang ingin Anda tampilkan kepada pengguna web saat mereka mengunjungi halaman Anda, baik itu teks, gambar, video, game, trek audio yang dapat diputar, atau apa pun.

Mari alihkan perhatian kita ke elemen

My cat is very grumpy.

0 lagi

Seperti yang kami katakan sebelumnya, itu menyematkan gambar ke halaman kami di posisi yang muncul. Ini dilakukan melalui atribut

_6 [sumber], yang berisi jalur ke file gambar kita

Kami juga menyertakan atribut

_7 [alternatif]. Di , Anda menentukan teks deskriptif untuk pengguna yang tidak dapat melihat gambar, kemungkinan karena alasan berikut

Mereka tunanetra. Pengguna dengan gangguan penglihatan yang signifikan sering kali menggunakan alat yang disebut pembaca layar untuk membacakan teks alternatif kepada mereka
Terjadi kesalahan yang menyebabkan gambar tidak ditampilkan. Misalnya, coba dengan sengaja mengubah jalur di dalam atribut
6 Anda untuk membuatnya salah. Jika Anda menyimpan dan memuat ulang halaman, Anda akan melihat sesuatu seperti ini di tempat gambar

Kata kunci untuk teks alternatif adalah "teks deskriptif". Teks alt yang Anda tulis harus memberikan informasi yang cukup kepada pembaca untuk mendapatkan ide bagus tentang apa yang disampaikan gambar tersebut. Dalam contoh ini, teks "My test image" kita saat ini tidak bagus sama sekali. Alternatif yang jauh lebih baik untuk logo Firefox kami adalah "Logo Firefox. rubah menyala yang mengelilingi Bumi. "

Coba buat beberapa teks alt yang lebih baik untuk gambar Anda sekarang

Catatan. Cari tahu lebih lanjut tentang aksesibilitas dalam modul pembelajaran aksesibilitas kami

Bagian ini akan membahas beberapa elemen HTML penting yang akan Anda gunakan untuk menandai teks

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels,

- , although you'll commonly only use 3 to 4 at most:


My main title
My top level heading
My subheading
My sub-subheading

Catatan. Apa pun dalam HTML antara

DOCTYPE html>

  
    
    
    My test page

_0 dan

DOCTYPE html>

  
    
    
    My test page

1 adalah komentar HTML. Browser mengabaikan komentar saat merender kode. Dengan kata lain, mereka tidak terlihat di halaman - hanya di kode. Komentar HTML adalah cara bagi Anda untuk menulis catatan bermanfaat tentang kode atau logika Anda

Sekarang coba tambahkan judul yang sesuai ke halaman HTML Anda tepat di atas elemen

My cat is very grumpy.

0 Anda

Catatan. Anda akan melihat bahwa tajuk tingkat 1 Anda memiliki gaya implisit. Jangan gunakan elemen judul untuk membuat teks lebih besar atau tebal, karena digunakan untuk dan. Cobalah untuk membuat urutan heading yang berarti di halaman Anda, tanpa melewatkan level

Seperti dijelaskan di atas,

My cat is very grumpy.

6 elemen adalah untuk memuat paragraf teks;

This is a single paragraph

Tambahkan teks sampel Anda [Anda harus memilikinya dari Seperti apa tampilan situs web Anda?] ke dalam satu atau beberapa paragraf, ditempatkan tepat di bawah elemen

My cat is very grumpy.

0 Anda

Banyak konten web adalah daftar dan HTML memiliki elemen khusus untuk ini. Menandai daftar selalu terdiri dari setidaknya 2 elemen. Jenis daftar yang paling umum adalah daftar terurut dan tidak terurut

Daftar yang tidak diurutkan adalah untuk daftar yang urutan itemnya tidak penting, seperti daftar belanja. Ini dibungkus dalam elemen
```
DOCTYPE html>

  
    
    
    My test page
  
  
    
  
```
5
Daftar yang dipesan adalah untuk daftar yang urutan itemnya penting, seperti resep. Ini dibungkus dalam elemen
```
DOCTYPE html>

  
    
    
    My test page
  
  
    
  
```
_6

Setiap item di dalam daftar diletakkan di dalam elemen

DOCTYPE html>

  
    
    
    My test page

7 [item daftar].

Misalnya, jika kita ingin mengubah bagian fragmen paragraf berikut menjadi daftar


  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together…

Kami dapat memodifikasi markup untuk ini

My cat is very grumpy

Coba tambahkan daftar terurut atau tidak terurut ke halaman contoh Anda

Tautan sangat penting — itulah yang membuat web menjadi web. Untuk menambahkan tautan, kita perlu menggunakan elemen sederhana —

DOCTYPE html>

  
    
    
    My test page

8 — "a" adalah kependekan dari "anchor". Untuk membuat teks dalam paragraf Anda menjadi tautan, ikuti langkah-langkah berikut

Pilih beberapa teks. Kami memilih teks "Mozilla Manifesto"

Bungkus teks dalam elemen

DOCTYPE html>

  
    
    
    My test page

_8, seperti yang ditunjukkan di bawah ini

My cat is very grumpy

Berikan elemen

DOCTYPE html>

  
    
    
    My test page

_8 atribut

1, seperti yang ditunjukkan di bawah ini

My cat is very grumpy

Isi nilai atribut ini dengan alamat web yang ingin Anda link
```
My cat is very grumpy
```
_3

Anda mungkin mendapatkan hasil yang tidak diharapkan jika Anda menghilangkan bagian

2 atau

3, yang disebut protokol, di awal alamat web. Setelah membuat tautan, klik untuk memastikannya mengirim Anda ke tempat yang Anda inginkan

Catatan.

1 mungkin tampak seperti pilihan yang agak kabur untuk nama atribut pada awalnya. Jika Anda kesulitan mengingatnya, ingatlah bahwa itu singkatan dari hypertext reference

Tambahkan link ke halaman Anda sekarang, jika Anda belum melakukannya

Jika Anda telah mengikuti semua petunjuk dalam artikel ini, Anda akan berakhir dengan halaman yang terlihat seperti di bawah ini [Anda juga dapat melihatnya di sini]

Jika Anda buntu, Anda selalu dapat membandingkan pekerjaan Anda dengan kode contoh kami yang telah selesai di GitHub

Di sini, kami hanya benar-benar menggores permukaan HTML. Untuk mengetahui lebih lanjut, buka topik Belajar HTML kami

Apa halaman HTML paling sederhana yang dijelaskan?

Contoh 1. Contoh ini membuat halaman sederhana tanpa konten apa pun, yang membantu dalam memahami cara menggunakan tag Html, Head, dan Body di halaman HTML . Pada contoh berikut, kita tidak menentukan judul halaman web pada tag Head, sehingga akan menampilkan nama file Html sebagai judulnya.

Bagaimana Anda menulis halaman HTML paling sederhana?

Kebanyakan tag perlu dibuka < tag > dan ditutup . Untuk membuat halaman web sederhana, Anda hanya perlu mengetahui empat tag. < HTML > memberi tahu browser bahwa halaman Anda ditulis dalam format HTML . < HEAD > ini adalah semacam kata pengantar dari informasi penting yang tidak muncul di layar.

Apa struktur halaman HTML sederhana?

Dokumen HTML terutama dibagi menjadi dua bagian. KEPALA. Ini berisi informasi tentang dokumen HTML. Misalnya, Judul halaman, versi HTML, Meta Data, dll. TUBUH. Ini berisi semua yang ingin Anda tampilkan di Halaman Web