Mari kita langsung memulai proyek HTML pertama Anda!

Anda akan menulis code Anda di Editor, yang ada di tengah layar.

Apa pun yang Anda tuliskan di Editor akan muncul di Jawaban Anda, yang terletak di sudut kanan atas.

index.html

Apit teks Hello World dengan

・tag pembuka,

<h1>

・tag penutup,

</h1>

2. Judul dan Paragraf

Instruksi

Letakkan teks tertentu di tag untuk membuat judul (heading) dan paragraf.

index.html

Apit teks

Selamat Datang di Progate

dengan tag <h1>.

index.html

Apit teks

Tentang HTML

dengan tag <h2>.

 index.html

Apit teks

HTML adalah singkatan dari HyperText Markup Language

dengan tag <p>.

3. Tautan

index.html

Ubah atribut href untuk membuat tautan ke URL berikut:

https://progate.com

Selesai! Anda baru saja membuat tautan pertama Anda.

Mari kita buat tautan lainnya dari awal.

index.html

Gunakan tag <a> untuk membuat tautan ke URL berikut:

https://google.com

Teks untuk tautan tersebut harus

Ke Google

Coba klik tautan di jendela yang menampilkan Jawaban Anda.

Tautan akan mengarahkan Anda ke situs web yang sesuai.

4.gambar

Kami telah mempersiapkan tag <img> untuk Anda di Editor, namun sumbernya belum ditentukan.

index.html

Ubah atribut src untuk menampilkan gambar berikut:

https://progate.com/images/html/beginner/wanko.jpg
 Coba tampilkan gambar lain dari awal.

index.html

Gunakan tag <img> untuk menampilkan gambar berikut:

https://progate.com/images/html/beginner/school.jpg

5.Daftar

Mari kita membuat daftar!

index.html

Tambahkan tag <ul>.

index.html

Dalam tag <ul>, tambahkan tiga tag <li>.

Kemudian, sisipkan teks berikut ke setiap tag <li>.

HTML

PHP

Ruby

Pastikan untuk menyarangkan dan membuat indentasi pada tag supaya code Anda rapi!

6. warna

Instruksi

Klik tab berkedip yang bernama stylesheet.css.

Disinilah tempat untuk menulis CSS Anda.

stylesheet.css
 Tetapkan warna teks element <h1> ke

#ff0000

stylesheet.css

Tetapkan warna teks element <p> ke

#0000ff

7. Ukuran font dan jenis font

Pada latihan ini, kita akan menetapkan ukuran dan font element HTML.

Mari kita lanjutkan ke penulisan CSS di stylesheet.css.

stylesheet.css

Tentukan style element <h1> sebagai berikut:

・ font-size: 40px

・ font-family:

Serif

stylesheet.css

Tentukan style element <p> sebagai berikut:

・ font-size: 20px

・ font-family:

"Lucida Grande"

8. Lebar, Tinggi, dan Warna Latar Belakang

stylesheet.css

Tentukan style element <h1> sebagai berikut:

・ background-color:

#f3f372
 ・ height: 80px

・ width: 200px

stylesheet.css

Tentukan style element <img> sebagai berikut:

・ height: 50px

・ width: 70px

9. Class

index.html

Berikan tag <li> pertama sebuah class dengan nama selected.

Lihat Slide

stylesheet.css

Tambahkan selector class untuk selected dan tetapkan warna teksnya ke

#ff0000