A. PENDAHULUAN

• Pengertian

Kalian pasti pernah mengunjungi Website yang bergambar kan? Nahh cara Menambahkannya yaitu menggunakan tag <img> dan di tambah dengan atribut atribut yang di butuhkan yaitu src, alt, title, width, height.

src adalah atribut untuk menarik gambar dari internal resource ataupun internal resource.

• Latar Belakang Masalah

Di karenakan jika ingin mempelajari HTML lebih lanjut dibutuhkan dasar HTML yang kuat terlebih dadulu.

B. MAKSUD DAN TUJUAN

Bisa menambahkan Gambar pada HTML dan tujuannya adalah menguasai HTML Basic

C. RUANG DAN LINGKUP PEKERJAAN

- Image pada HTML

- Internal Resource

- Eksternal Resource

- Atribut atribut pada tag img

D. HASIL YANG DIHARAPKAN

Dapat memasang gambar pada penulisan HTML

E. ALAT DAN BAHAN

Laptop

Vs code

Koneksi internet

F. METODE PELAKSANAAN

- Brifing

- Menonton Referensi

- Coding

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

- Brifing

- Menonton Referensi

Saya menonton Referensi Di Youtube Web Programmin Unpas

- Coding

Hasilnya :

- Penjelasan

 Jadi saat kalian ingin memasang sebuah Image(Gambar) pada HTML, maka tag yang di gunakan adalah tag <img> di ikuti dengan atribut atribut yang mencangkup tentang image.

- Internal Resource yaitu menaruh gambar yang ada di dalam satu folder, jadi anda harus menaruh gambar dalam satu folder terlebih dahulu.

jika sudah kalian menaruh gambar pada satu folder maka gambar tersebut dapat kalian tampilkan.

contoh penulisannya :

<img src="adelwingans.jpg">

- Eksternal Resource - Menaruh gambar dari link luar/website orang lain

Contoh penulisannya :

<img src="https://i.top4top.io/p_2252rdnf31.jpg">

Atribut-Atributnya adalah :

src  adalah atribut untuk menarik gambar dari internal resource ataupun internal resource 

Alt berfungsi Memberikan teks alternatif pada gambar

Title  berfungsi Mencantumkan tooltips pada gambar

border  berfungsi memberikan garis tepi pada gambar

Property Float berfungsi untuk mengatur gambar dan menyesuakan posisi teks di sekitar gambar

I. TEMUAN PERMASALAHAN DAN PENYELESAINNYA

-

J. KESIMPULAN YANG DI DAPAT

Memasang sebuah gambar Pada Website sangatlah penting untuk memberitahu kepada orang lain keaadaan ataupun informasi yang ada.

K. REFERENSI

- Web Programming Unpas

- niagahoster.co.id

A. PENDAHULUAN

• Pengertian

List yang di kenal dengan daftar adalah untuk menampilkan data secara berurutan ke bawah. Di dalam HTML list ini di tulis dengan tag <li>.

• Latar Belakang Masalah

Di karenakan jika ingin mempelajari HTML lebih lanjut perlu memiliki dasar HTML kuat terlebih dahulu.

B. MAKSUD DAN TUJUAN

Dapat mengerti dan mengimplementasikan List pada penulisan HTML. Dan tujuannya adalah menguasai HTML basic

C. RUANG DAN LINGKUP PEKERJAAN

- List pada Html

- Ordered list

- Unordered list

D. METODE PELAKSANAAN

- Briffing

- Membaca referensi

- Coding

- Berdiskusi

E. TARGET DAN HASIL YANG DIHARAPKAN

Dapat mengimplementasikan List pada HTML

F. ALAT DAN BAHAN

Laptop

Vs code

Koneksi Internet

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

- Briffing

- Membaca referensi

- Coding

Codingan :

Hasilnya  :

- Berdiskusi

-- List pada HTML

Dalam HTML list di tulis dengan tag <li>. Dalam membuat list pada HTML ini terdapat 2 jenis tampilan list yang bisa di gunakan yaitu Ordered list dan Unordered list

- Ordered List

Berfungsi untuk menampilakan daftar list dalam bentuk huruf atau angka tag yang di gunakan untuk ordered list yaitu <ol>

- Unordered List

Berfungsi untuk menampilkan daftar list yang tidak berurutan atau dalam bentuk bulatan atau kotak di awalnya.Tag yang di gunakan untuk Unordered list yaitu <ul>

I.  TEMUAN PERMASALAHAN DAN PENYELESAINNYA

-

J. KESIMPULAN YANG DI DAPAT

Dengan list Kita bisa membuat Daftar Apapun yang bisa kita buat, contohnya seperti list makanan, list harga dan lain lain.

K. REFERENSI

malasngoding.com

Web Programming Unpas

A. PENDAHULUAN

• Pengertian

Hyperlink yaitu menghubungkan antaran dokumen satu dengan dokumen lain pada HTML. Tujuan dari Hyperlink ini adalah ketika suatu text atau gambar di klik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan hyperlink tersebut.

Hyperlink dalam html menggunakan tag <a>

atau yang kita kenal dengan anchor (jangkar), <a> di ikuti oleh atribut href berarti (hypertext reference) inilah yang akan diisikan alamat yang di tuju ketika text atau gambar di klik.

• Latar belakang masalah

Dikarenakan jika ingin mempelajari HTML lebih lanjut perlu memiliki dasar html kuat terlebih dahulu.

B. MAKSUD DAN TUJUAN

Dapat mengerti dan mengimplementasikan Hyperlink di HTML. Dan tujuannya adalah menguasai HTML Basic

C. RUANG DAN LINGKUP PEKERJAAN

Hyperlink pada HTML

D. TARGET DAN HASIL YANG DI HARAPKAN

Dapat Mengetahui Hyperlink dan dapat mengimplementasikannya

E. METODE PELAKSANAAN

- Brieffering

- Mencari referensi

- Menonton referensi

- Berdiskusi

F. ALAT DAN BAHAN

Laptop

Vs code

Koneksi internet

G. TARGET WAKTU

08.00 - 16.00 

H. TAHAPAN PELAKSANAAN

- Brieffering

- Menonton referensi

Saya nonton referensi di Web Programming Unpas (Shandika galih)

- Coding

ini foto codingannya

Dan yang di bawah ini adalah codingan halaman ke 2

Hasilnya :

Saat saya mengeklik My portofolio  maka akan di alihkan ke website portofolio saya, begitu juga yang blogger dan instagram ( Hyperlink Eksternal ). 

Ketika saya klik teks berwana biru ( disini ) maka akan di alihkan ke halaman 2 yang sudah di buat sebelumnnya (Hyperlink internal)

Nahh ini adalah hasik ketika sudah di klik teks berwana biru tadi ( disini ).

- Penjelasan 

<Eksternal>

jika saya klik yang my portofolio maka akan menuju ke portofolio yang saya.

dan jika saya klik yang my blogger maka akan menuju ke blogger saya

Dan ketika saya klik My instagram makan akan menuju ke dalam instagram saya di karenakan saya sudah menaruh link instagram saya dalam atribut href nya

< Internal >

 Jika saya klik disini maka akan menuju kedalam file halaman2 yang saya sudah buat sebelummnya...

- Berdiskusi

Penjelasan dari Hyperlink

Hyperlink dalam html menggunakan tag <a>

atau yang kita kenal dengan anchor (jangkar), <a> di ikuti oleh atribut href berarti (hypertext reference) inilah yang akan diisikan alamat yang di tuju ketika text atau gambar di klik.

penjelasan hyperlink eksternal

Jika eksternal kalian bisa menambahkan link/website kalian suka

contoh : <a href="https://adelwingans.github.io/Website.html"> My Portofolio </a>

jika kalian ingin mengalihkan ke tab baru kalian bisa menambahkan seperti ini : target="_blank">

contoh : <a href="https://adelwingans.github.io/Website.html" target="_blank"> My Portofolio </a>

jadi kalian kalau ingin memindahkan atau mengalihkan ke dalam internal sendiri kalian cukup dengan mengetikkan file yang kalian sudah buat sebelummnya

di sini saya tadi sudah membuat file halaman2.html ,,,, jadi saya tinggal memasukkan dalam href nya 

contoh : <p>Klik <a href="halaman2.html"> disini</a> Untuk menuju ke halaman2 </p>

tapi kalau semisalnnya file tersebut dalam folder maka kalian harus menambahkan nama folder tersebut

contoh : <p>Klik <a href="(nama folder)/halaman2.html"> disini</a> Untuk menuju ke halaman2 </p>

I. TEMUAN PERMASALAHAN DAN SOLUSINYA

-

J. KESIMPULAN YANG DI DAPAT

Dengan adanya Hyperlink ini maka kita akan bisa membuat sebuah teks atau gambar untuk mengalihkan ke website yang di tuju. 

K. REFERENSI

- Web Programming Unpas

- malasngoding.com

A. PENDAHULUAN

• Pengertian

Paragraf adalah kumpulan dari beberapa kalimat. Pada web paragraf biasanya digunakan untuk menampilan teks atau artikel. paragraf dalam HTML di buat dengan menggunakan tag <p>.

selain itu parafgraf dalam HTML ini mencangkup dengan tag <div> , <hr>, <br>, <prive>

• Latar belakang masalah

Di karenakan belum mengetahui dasar dasar HTML, termasuk paragraf ini

B. MAKSUD DAN TUJUAN

Mengimplementasikan Paragraf pada html. Tujuannya menguasai HTML basic

C. RUANG DAN LINGKUP PEKERJAAN

- Membaca basmallah bersama sebelum melakukan pekerjaan

- Brieffering

- Mencari referensi

- Menonton Refensi

- Memulai untuk Coding

- Berdiskusi dengan teman

D. HASIL YANG DI HARAPKAN

Dapat menguasai HTML basic

E. METODE PELAKSANAAN

Membaca referensi

Coding 

Cek hasil

F. ALAT DAN BAHAN

Laptop

Text Editor/Notepad++

Koneksi internet

G.  TARGET WAKTU

08.00 - 14.00 ( 6 jam )

H. TAHAPAN PELAKSANAAN

- Membaca basmallah bersama sebelum mulai pekerjaan

- Brieffering

- Memulai untuk mencari referensi

saya mencari referensi di Youtube Web Programming Unpas

- Menonton referensi

- Coding

Dan dibawah ini adalah hasil :

- Berdiskusi

> Penjelasan <

<p> adalah tag yang di gunakan untuk membuat paragraf

<b> adalah tag yang di gunakan untuk mempertebal text Contoh : Tes

<i> adalah tag yang di gunakan untuk memiringkan text Contoh : Tes

<u> adalah tag yang di gunakan untuk menggaris bawahi text Contoh : Tes

I. TEMUAN PERMASALAHAN

-

J. KESISMPULAN YANG DI DAPAT

Jadi pentingnya paragraf dalam HTML adalah untuk menampilkan text atau artikel

K. REFERENSI

Youtube Web Programming Unpas