auliyamanaf123.files.wordpress.com · web viewdalam membuat nya kita harus tau dasar elemen dari...
TRANSCRIPT
DASAR DASAR MEMBUAT WEB DENGANHTML (HyperText Markup Language)
( ini di buat untuk memenuhi tugas rumah produktif selama ramadan) XD.. Auliya triwulandari ( XII TKJ 1 )
1 . Langkah pertamaDalam membuat nya kita harus tau dasar elemen dari html
Langsung pada pembuatan pertama :a. Kita harus punya xampp . instal terlebih dahulu
Bentuk struktur dokumen HTML yang standar adalah sebagi berikut: <html> <head> <title>SMKN 2 Singosari</title> </head> <body>Namaku: </body> </html>
ini adalah dasarnya setelah selesai publikasikan hasil dengan cara :1. Simpan hasil di lokasi direktori web, misal C:\xampp\htdocs\xampp2. Setelah itu panggil web dengan menuliskan tempat file di simpan , contoh :
http://localhost/try/latihan.1.html3. Contoh gambar :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
2 . Langkah ke dua ( heading)Untuk memodifikasi tampilan web kita bisa dengen memgunakan heading heading yang ada
dengan cara menggunakan tag<hn> dan di akhiri </hn> dan n melambangkan tipe , kalau saya menggunakan seperti berikut . silahkan di coba :<html> <head> <title>Heading</title> </head> <body> <h1>Ini heading 1</h1> <h2>Ini heading 2</h2>
<h3>Ini heading 3</h3> <h4>Ini heading 4</h4> <h5>Ini heading 5</h5> <h6>Ini heading 6</h6> </body> </html>
Dan hasilnya sebagai berikut :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
Setelah itu heading juga menyediakan atribut seperti berikut untuk mengatur posisi di tampilan web :<html> <head> <title>Align</title> </head> <body> <h1 align=”left”>Ini heading 1 rata kiri</h1> <h2 align=”center”>Ini heading 2 rata tengah</h2> <h2 align=”right”>Ini heading 3 rata kanan</h3> </body> </html>
Dan hasilnya sebagai berikut :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
3 . Langkah ke tiga (Paragraf )Untuk memberi tampilan web kita paragraph bisa dengen memgunaka elemen <p> .Elemen <p>
digunakan secara berpasangan dengan </p>, kalau saya menggunakan seperti berikut . silahkan di coba :
Dan hasilnya sebagai berikut :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
4 . Langkah ke empat (Karakter khusus )kita dapat menampilkan karakter-karakter khusus dengan memanfaatkan nama entitas
Untuk mencoba silahkan mencoba seperti di bawah ini :
Dan hasil nya sebagai berikut :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
5 . Langkah ke lima ( Garis Horizontal )Untuk memberi garis horizontal direpresentasikan melalui elemen <hr /> (Horizontal
Rule). Untuk mencoba silahkan mencoba seperti di bawah ini :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
Dan hasilnya sebagai berikut :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
6 . Langkah ke enam ( pewarnaan )Untuk memberi warna background, menggunakan elemen <body>. Atribut ini dapat diisi
dengan nama warna , misalnya “red” atau kode heksadesimal, misalnya #FFFFFF. Untuk mencoba silahkan mencoba seperti di bawah ini :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
Dan hasilnya sebagai berikut :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
7 . Langkah ke tujuh ( Bekerja dengan Gambar )kita juga bisa menyisipkan gambar di dalam dokumen dengan menggunakan elemen
<img> yang didukung dengan sejumlah atribut . Dalam elemen <img> minimal harus ada atribut src dan alt
Bisa di coba seperti di bawah ini :
Dan hasilnya sebagai berikut :
( karena ini tugas sekolah jadi saya mencobanya dengan nama saya )
nah udah selesai sekarang tinggal tunjukkan kreasimu ..
STUDI KASUS
Dengan note :
Dan hasilnya :
SekianTerimakasih