Bagaimana Anda menulis kode html untuk situs web?

Question

Langkah pertama untuk membangun situs web adalah mempelajari HTML. HTML sangat penting karena merupakan kerangka dari semua halaman web. HTML menyediakan struktur konten di situs web, termasuk teks, gambar, tombol, video, dan tautan. HTML adalah tempat yang bagus untuk memulai perjalanan belajar Anda saat pertama kali belajar kode. Dimungkinkan untuk membangun situs web dasar setelah mempelajari beberapa HTML dasar, dengan teks, gambar, dan video. HTML adalah singkatan dari hypertext markup language. Tutorial ini akan melihat lebih dekat bagaimana memulai menulis HTML

Markup HTML Dasar

Kita bisa mulai dengan contoh sederhana markup HTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Tujuan HTML

HTML menyediakan kerangka untuk situs web dan merupakan tempat yang bagus untuk memulai saat belajar kode



<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" width="100" height="100">

_

HTML digunakan oleh

Pengembang web
Pemasar
Pembuat konten
Pengusaha
dan masih banyak lagi

Kode di atas kira-kira akan menghasilkan keluaran berikut di browser web

Markup HTML

HTML is a language for web development. It is the glue that holds all aspects of web development together. HTML is not a coding language but a markup language. Markup refers to a way of describing text that is separate from the text itself. Like a teacher might “markup” a student book report by underlining key sentences and circling summary points, HTML annotates the content within a web page. HTML separates content and annotation using HTML tags, denoted by angle brackets that look like less-than and greater-than signs ().

Cara Kerja Tag HTML

Tag HTML adalah alat yang dapat kita gunakan untuk menandai teks untuk HTML. Mereka adalah mekanisme yang memberikan informasi tentang jenis konten yang dikandungnya. Contoh sintaks bagaimana tag HTML mengelilingi konten untuk membuat elemen HTML

The diagram above is an HTML paragraph element. The paragraph element is made up of an opening tag (

), the content (“Hello World!” text), and a closing tag (

).

Berikut adalah definisi lebih lanjut dari masing-masing

Elemen HTML — satu konten dalam dokumen HTML yang dibuat oleh tag HTML dan teks atau media yang dikandungnya
Tag Pembuka — nama elemen yang digunakan untuk memulai elemen HTML yang dikelilingi oleh tanda kurung sudut buka dan tutup
Konten — Teks atau media yang terdapat di antara tag pembuka dan penutup elemen HTML
Tag penutup — tag HTML kedua yang digunakan untuk mengakhiri elemen HTML. Tag penutup memiliki garis miring (/) di dalamnya, langsung setelah braket sudut kiri

Mempraktikkan Elemen HTML

Untuk merasakan bagaimana markup HTML memengaruhi konten, kita perlu berlatih. Pertama, kita akan melihat beberapa teks mentah untuk memahami bagaimana tampilannya di browser, lalu kita dapat menambahkan beberapa markup ke dalamnya untuk melihat bagaimana hal itu membuat tampilannya berubah.

Sebelum Markah

Willy's Web Design. With over 10 years of experience in HTML, JavaScript, and CSS, we'll provide 
you with the highest quality website. Every design is unique, custom, and tailored 
to your tastes. Click here!

Setelah Markup

Willy’s Web Design

Dengan pengalaman lebih dari 10 tahun dalam HTML, JavaScript, dan CSS, kami akan memberi Anda situs web dengan kualitas terbaik. Setiap desain unik, khusus, dan disesuaikan dengan selera Anda


<button>Click here!</button>

Dengan hanya menerapkan tiga tag HTML yang berbeda (h1, p, dan button), kita dapat melihat perbedaan drastis dalam cara media disajikan di halaman.

Apa itu Hiperteks?

Hypertext adalah teks yang dihubungkan dengan teks lain. Diagram ini menunjukkan berbagai situs web yang terhubung satu sama lain melalui tautan, yang diwakili oleh panah

Kata hyper dalam hypertext memberi petunjuk bahwa teks melampaui batasan tradisional dari kata tertulis. Alih-alih membaca dokumen dari awal hingga akhir, seperti Anda membaca buku, seseorang yang membaca melalui hypertext dapat menjelajah. Di sinilah kami datang dengan "Browsing the Web". Saat mengeklik tautan dari satu dokumen ke dokumen lainnya, pengguna dapat melompat ke halaman apa pun yang menurut mereka paling menarik dan membentuk jalur unik mereka sendiri melalui web terbuka

Menemukan pengalaman pengguna yang kaya di web modern adalah hal yang umum, dengan fitur seperti video tersemat, animasi, dan interaktivitas, jadi terkadang Anda tidak merasa seperti hanya bernavigasi dari satu halaman HTML ke halaman berikutnya. Namun pada kenyataannya dan terlepas dari semua kemajuan yang telah dilihat web, pada intinya web masih merupakan kumpulan dokumen hyperlink

Memperkenalkan Hyperlink

Tautan dibuat dalam HTML dengan atribut href, yang merupakan singkatan dari referensi hyperlink. Atribut href memungkinkan kami untuk menentukan URL yang harus dituju oleh sebuah tautan. Lihat di bawah untuk contoh atribut href dalam tindakan

<a href="https://vegibit.com/how-to-write-html-code/">Write HTML Code!</a>

_

When we set the href property on an anchor tag (abbreviated to ) we can specify both the text that should be rendered for the user (the text within the anchor tag) and the URL that the browser should navigate to.

Dengan kode ini, kami menetapkan nilai https. // sayuran. com/how-to-write-html-code ke atribut href. Ketika pengguna mengklik teks tautan ini (Tulis Kode HTML. ), mereka akan diarahkan untuk Menulis Kode HTML

Elemen

Hanya konten di dalam tag badan pembuka dan penutup yang dapat ditampilkan di layar. Seperti inilah tampilan body tag pembuka dan penutup

Elemen

The

HTML element stands for paragraph. Paragraphs represent blocks of text separated from nearby blocks by blank lines or first-line indentation. In HTML, paragraphs can be any structural grouping of related content, such as images or form fields and they are block level in nature.

Ini adalah sebuah paragraf

Ini adalah paragraf lain



<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" width="100" height="100">

0

Element

adalah elemen heading tingkat bagian tertinggi. Gunakan hanya satu

per halaman atau tampilan. Itu harus secara singkat menggambarkan tujuan keseluruhan dari konten

Halo H1 Tag

Ini adalah sebuah paragraf

Ini adalah paragraf lain



<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" width="100" height="100">

0

Element

The

HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS.

Halo H1 Tag

Ini adalah sebuah paragraf

Ini adalah paragraf lain

Paragraf ini adalah anak dari elemen div dan cucu dari elemen body



<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" width="100" height="100">

0

Catatan Tentang Struktur HTML

HTML markup is organized as a collection of relationships similar to a family tree. As you saw earlier, we placed

tags within tags. and this is what is known as a child element. The

tag is a child of the tag. It also means the child element is nested inside of the parent element.

Paragraf ini adalah anak dari tubuh



<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" width="100" height="100">

_0

In the example above, the

element is nested inside the element. The

element is considered a child of the element, and the element is considered the parent. There can be multiple levels of nesting so this analogy can be extended to grandchildren, great-grandchildren, and so on. The relationship between elements and their ancestor and descendent elements is known as a hierarchy. It is important to understand HTML hierarchy because child elements can inherit behavior and styling from their parent element.

hingga Elemen

Kita sudah melihat elemen h1, dan secara umum, seharusnya hanya ada satu dari itu per halaman HTML. Ada juga 5 elemen heading lainnya yang terdiri dari h2 hingga h6

Informasi judul dapat digunakan oleh agen pengguna untuk membuat daftar isi dokumen secara otomatis
Hindari menggunakan elemen tajuk untuk mengubah ukuran teks. Sebagai gantinya, gunakan properti font-size CSS
Avoid skipping heading levels: always start from
, followed by
and so on.Use only one per page or view. It should concisely describe the overall purpose of the content.Halo H1 TagTajuk 2
Tajuk 3
Tajuk 4
Tajuk 5
Heading 6
```
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" width="100" height="100">
```
0
Atribut HTML
Atribut adalah aspek yang sangat penting dari HTML. Pikirkan atribut seperti konten yang ditambahkan ke tag pembuka elemen yang dapat digunakan dengan berbagai cara, mulai dari memberikan informasi hingga mengubah gaya. Atribut terdiri dari dua bagian
- Nama atribut
- Nilai atribut
Id adalah tempat yang bagus untuk mulai belajar tentang atribut. Ini cukup sering digunakan dan digunakan untuk mengidentifikasi bagian-bagian pada halaman HTML secara unik. Atribut id dapat digunakan dalam banyak cara, tetapi untuk saat ini, kami akan melihat bagaimana atribut ini dapat membantu kami mengidentifikasi konten di halaman
Cabai
Tentang Paprika
Jenis
Karakteristik
Menanam Paprika
Nutrisi tanah untuk menanam cabai
Suhu yang dibutuhkan untuk paprika
Resep untuk Paprika
_3
Markup di atas memiliki tiga bagian berbeda dengan masing-masing dibungkus oleh elemen divnya sendiri. Ini adalah pendekatan umum untuk mengatur data pada halaman. Juga, perhatikan bahwa kami menambahkan id ke setiap elemen div untuk mengidentifikasinya secara unik. Saat Anda menggunakan id pada halaman, nama id tersebut hanya boleh digunakan satu kali
Displaying Text with or
Cabai
Tentang Paprika
Jenis
Paprika adalah buah dan sayuran, jadi pastikan untuk makan banyak
Karakteristik
Paprika adalah sumber vitamin C yang baik, dan juga sumber potasium yang baik, yang penting bagi kemampuan tubuh untuk menyerap dan menyimpan energi.
Menanam Paprika
Nutrisi tanah untuk menanam cabai
Paprika membutuhkan tanah organik yang kaya untuk tumbuh dengan baik
Suhu yang dibutuhkan untuk paprika
Paprika harus disimpan pada suhu antara 70 dan 90 derajat Fahrenheit untuk hasil terbaik
Resep untuk Paprika
Stuffed Pepper Soup adalah resep yang fantastis
_3
dan Elemen
It is possible to style text directly in the HTML markup without any CSS. For example, you can use the tag for emphasis of text, or the tag to highlight important text.
Tag ini dapat dikustomisasi dalam cara mereka menampilkan konten dalam HTML oleh CSS tetapi browser memiliki style sheet bawaan yang umumnya akan memberi gaya pada tag ini dengan cara berikut
- The tag will generally render as italic emphasis.
- umumnya akan ditampilkan sebagai penekanan tebal
Cabai
Tentang Paprika
Jenis
Paprika adalah buah dan sayuran, jadi pastikan untuk makan banyak
Karakteristik
Paprika adalah sumber vitamin C yang baik, dan juga sumber potasium yang baik, yang penting bagi kemampuan tubuh untuk menyerap dan menyimpan energi.
3

Tag
Whitespace contained in an HTML file doesn’t actually affect the location of elements in a web browser. When entering a new line inside of HTML, the Browser simply will continue parsing the text from left to right. In order to introduce a new line in the rendered output, you can use HTML’s line break element:
.
Elemen ganti baris unik karena tidak memiliki tag penutup. Anda dapat menggunakannya di mana saja dalam kode HTML Anda dan jeda baris akan ditampilkan di browser
Ini di baris 1
dan ini di baris 2
baris 3 di sini
Daftar Tanpa Urutan
Unordered lists are a staple in web development. The unordered list tag (
) is used to create a list of items in no particular order. An unordered list displays each list item with a bullet point.
The
element is not where the actual text is inserted into the HTML. Each list item must be added to the unordered list using the
tag. The
or list item tag is used to describe an item in a list.

Steak

Kacang Hitam

Sayuran

Salsa

Lettuce

Cheese

Guacamole

Ordered Lists
An ordered list in HTML works much like an unordered list with the difference being that each element is numbered. Ordered lists are great for when you need to list different steps in a procedure or rank items from first to last. You can create an ordered list with the
tag and nested
tags. Here we simply change the unordered list above into an ordered list here.
daging panggang
Kacang hitam
Sayuran
salsa
Selada
Keju
guacamole
Atribut alt, singkatan dari teks alternatif, digunakan untuk memberikan makna pada gambar di situs web. Atribut ini dapat ditambahkan ke tag gambar seperti halnya atribut src. Ini digunakan untuk menentukan deskripsi gambar yang akurat. Ini penting untuk pertimbangan inklusif seperti saat pembaca layar digunakan sebagai teknologi pendukung saat mengakses world wide web.
_7
The modern web is becoming more and more dynamic every day. Users are now looking for moving images, aka video, to enhance the web experience even more. HTML supports displaying videos with the
8
Cara Menulis Ringkasan Kode HTML
Tutorial ini mencakup banyak dasar yang Anda perlukan untuk mulai menulis kode HTML untuk web. Mari kita tinjau apa yang sekarang kita ketahui

Bagaimana kode HTML ditulis?

Tag HTML ditulis di dalam kurung sudut, dan cenderung berpasangan —jadi, keduanya terdiri dari tag pembuka dan penutup. Misalnya, tag

Bagaimana cara memulai pengkodean dalam HTML?

Semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen. . Dokumen HTML itu sendiri diawali dengan . Bagian yang terlihat dari dokumen HTML adalah antara . . Bagian yang terlihat dari dokumen HTML adalah antara .

Bagaimana cara memulai pengkodean situs web?

Untuk meluncurkan situs web terbaik sesuai kebutuhan Anda, pertimbangkan untuk mengikuti proses melalui sembilan langkah ini. .

Tentukan Situs Anda. .

Pilih Server dan Nama Domain. .

Pelajari Bahasa Pengembangan Web. .

Gunakan Bootstrap. .

Pilih Desain Anda. .

Buat Peta Situs. .

Tambahkan Konten dan Gambar. .

Optimalkan untuk SEO