Cara Membuat Web Dengan HTML dan CSS

Dalam kesempatan ini saya akan berbagi kepada Anda bagaimana Cara Membuat Halaman website Sederhana dengan menggunakan HTML dan CSS.Sebenarnya tidak sulit untuk pembuatan sebuah halaman web / Blog, hanya memerlukan pemahaman dan cara peletakannya saja.

Sebelum kita mulai pembuatan, kita belajar bagaimana membuat website dengan HTML dan CSS, alangkah baiknya untuk memahami perbedaan HTML dan CSS, dan beberapa terminologi umum.

Apakah HTML & CSS?

HTML,( HyperText Markup Language ), memberikan struktur isi dan makna dengan mendefinisikan bahwa konten seperti, misalnya, judul, paragraf, atau gambar. CSS { Cascading Style Sheets ), adalah bahasa presentasi yang dibuat untuk penggunaan gaya penampilan konten, misalnya, font atau warna.

Dua bahasa-HTML dan CSS-berhubungan satu sama lain dan harus tetap seperti itu. CSS tidak harus ditulis dalam dokumen HTML dan sebaliknya. Sebagai aturan, HTML akan selalu mewakili konten, dan CSS akan selalu mewakili penampilan konten tersebut. Dengan pemahaman perbedaan antara HTML dan CSS, mari kita memahami HTML secara lebih rinci.

Memahami HTML Secara Umum

HTML terbentuk dari beberapa unsur-unsur, tag, dan atribut, diantaranya adalah :

elemen

Elemen adalah yang menentukan struktur dan isi dari objek dalam suatu halaman. Beberapa elemen yang lebih sering digunakan termasuk beberapa tingkat heading (diidentifikasi sebagai elemen <h1> sampai <h6> ) dan paragrap (diidentifikasi sebagai elemen <p>); berikut termasuk elemen <a>, <div>, <span>, <strong>, dan <em>, dan banyak lagi.

Elemen diidentifikasi dengan menggunakan kurung sudut kurang dan lebih besar daripada, <>, seputar nama elemen. Dengan demikian, unsur akan terlihat seperti berikut ini:

<a> ini adalah tag

Penggunaan unsur ( < ) dan ( > ) ini adalah yang disebut tag. Tag terjadi pada pasangan tag.pembuka dan penutup seperti contoh <div>

Sebuah tag penutup menandai akhir dari suatu elemen. Ini terdiri dari kurang tanda diikuti dengan garis miring dan nama elemen, dan kemudian berakhir dengan lebih besar daripada tanda; misalnya, </ div>.

anchor

Konten yang terletak antara pembuka dan penutup tag adalah isi dari elemen tersebut. Anchor link, misalnya, dengan tag pembukaan dari <a> dan tag penutup </a>. Apa yang ada di antara dua tag ini akan menjadi isi dari link anchor.

Jadi, tag anchor akan terlihat seperti ini:

<a>..konten..</a> ini adalah link anchor.

attributes

Atribut adalah properti yang digunakan untuk memberikan informasi tambahan tentang elemen. Atribut yang biasa digunakan adalah atribut id, yang mengidentifikasi elemen; atribut class, yang mengklasifikasikan unsur; atribut src, yang menentukan sumber untuk konten embeddable; dan atribut href, yang menyediakan referensi hyperlink ke sumber daya terkait.

Atribut didefinisikan dalam tag pembuka, setelah nama elemen ini. Umumnya atribut termasuk nama dan nilai. Format untuk atribut ini terdiri dari nama atribut diikuti dengan tanda sama dengan dan kemudian nilai atribut dikutip. Sebagai contoh, sebuah elemen <a> termasuk atribut href akan terlihat seperti berikut:

<a href="http://shayhowe.com/">Shay Howe</a>

Demo HTML Secara Umum

Kode sebelumnya akan menampilkan teks "Shay Howe" pada halaman web dan akan membawa pengguna ke http://shayhowe.com/~~V setelah mengklik "Shay Howe" teks. Jangkar unsur dinyatakan dengan pembukaan <a> dan menutup tag </a> meliputi teks, dan atribut referensi hyperlink dan nilai dinyatakan dengan href = "http://shayhowe.com" di tag pembuka.

sintaks garis HTML termasuk elemen, atribut, dan tag

Sekarang Anda tahu apa yang elemen HTML, tag, dan atribut, mari kita lihat menyusun halaman web pertama kami. Apakah ada yang baru di sini, tidak ada kekhawatiran-kita memahaminya seperti yang kita pergi.

Menyiapkan Struktur Dokumen HTML

Dokumen HTML adalah dokumen teks biasa disimpan dengan ekstensi file html daripada ekstensi file .txt.

Penulisan HTML

Untuk memulai menulis HTML, Anda harus terlebih dahulu edit teks biasa bahwa Anda merasa nyaman menggunakan. Sayangnya ini tidak termasuk Microsoft Word atau Pages, karena mereka adalah editor teks kaya. Dua dari editor teks biasa lebih populer untuk menulis HTML dan CSS yang Dreamweaver dan Teks Sublime. alternatif gratis juga mencakup Notepad ++ untuk Windows dan TextWrangler untuk Mac.

Semua dokumen HTML memiliki struktur yang diperlukan yang meliputi deklarasi dan unsur-unsur berikut: <! DOCTYPE html>, <html>, <head>, dan <body>.

Dokumen Deklarasi

Yang dimaksud dokumen deklarasi adalah: dokumen yang menginformasikan web browser versi HTML yang digunakan dan ditempatkan pada awal dokumen HTML. / <! DOCTYPE html>. Dan ini adalah versi terbaru dari HTML, Berikut jenis dokumen deklarasi, <html> elemen menandakan awal dokumen.

Dalam elemen <html> , elemen <head> mengidentifikasi pada dokumen, termasuk metadata (menyertai informasi tentang halaman). Isi di dalam elemen <head> tidak ditampilkan pada halaman web itu sendiri.

Dan sebaliknya, termasuk juga judul dokumen (yang ditampilkan pada title bar di jendela browser), link ke file eksternal, atau penggunaan metadata lainnya.

Semua konten yang terlihat dalam halaman web akan berada dalam elemen.<body> Rincian dari struktur dokumen HTML terlihat seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
</body>
</html>

Struktur Dokumen Demo HTML

Kode sebelumnya menunjukkan dokumen yang dimulai dengan deklarasi tipe dokumen, <! DOCTYPE html>, diikuti oleh elemen <html>. Dalam elemen <html>selajutnya elemen.<head> dan <body> . Elemen <head> termasuk pengkodean karakter dari halaman melalui <charset = "utf-8" meta> tag dan judul dokumen melalui elemen <title>. Elemen. <body> termasuk pos melalui elemen <h1> dan melalui elemen <p> . Karena kedua pos dan paragaf yang berada di dalam elemen <body>, ini adalah halaman web.

Pada contoh sebelumnya, <meta> elemen hanya memiliki satu tag dan tidak termasuk tag penutup. Jangan takut, ini memang disengaja. Tidak semua elemen terdiri dari tag pembuka dan penutup.

elemen selfclosing

Beberapa elemen hanya menerima konten atau semua atribut dalam satu tag. The <meta> elemen merupakan salah satu dari unsur-unsur. Isi dari sebelumnya elemen <meta> ditugaskan dengan penggunaan atribut charset dan nilai. elemen selfclosing umum lainnya termasuk

<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>

Struktur diuraikan di sini, memanfaatkan <! DOCTYPE html> jenis dokumen dan <html>, <head>, dan unsur <body>, adalah sangat umum. Kami akan ingin menjaga struktur dokumen ini berguna, karena kami akan menggunakannya sesering kita membuat dokumen HTML baru.

kode Validasi

Tidak peduli bagaimana hati kita saat menulis kode kita, kita pasti akan membuat kesalahan. Untungnya, saat menulis HTML dan CSS kita harus validasi melalui. W3C untuk membangun HTML dan CSS validator yang akan memindai kode untuk kesalahan.

Memvalidasi kode kita tidak hanya membantu itu membuat benar di semua browser, tetapi juga membantu mengajarkan kita praktik terbaik untuk menulis kode.

Dalam praktek

Untuk membuat sebuah websitek onferensi sendiri, Styles Conference, ikuti cara cara sibawah ini :

Buat sebuah file baru bernama index.html, dan simpan . Kemudian buat folder dan bernama agar tidak susah mencarinya.

Dalam file index.html, mari kita tambahkan struktur dokumen, termasuk <! DOCTYPE html> tipe dokumen dan <html>, <head>, dan <body> elemen.

<!DOCTYPE html><html lang="en">
<head>
</head>
<body>
</body>
</html>

Di dalam <head> elemen, mari kita tambahkan <meta> dan <title> elemen. The <meta> elemen harus menyertakan atribut charset yang tepat dan nilai, sedangkan <title> elemen harus berisi judul halaman-katakanlah "Styles Conference."

<head>
<meta charset="utf-8">
<title>Styles Conference</title>
</head>

Di dalam <body> elemen, mari kita tambahkan <h1> dan <p> elemen. <H1> elemen harus mencakup judul kita ingin menyertakan-mari kita gunakan "Styles Conference" lagi-dan <p> elemen harus mencakup paragraf sederhana

<body>
<h1> judul </h1>
<p> konten </p>
</body>

ADS HERE !!!