Upload
setiawan-sudrajat
View
77
Download
0
Embed Size (px)
DESCRIPTION
Makalah Ini Berisi Tentang Laporan CSS.
Citation preview
5/25/2018 Laporan Makalah Css
1/14
REVIEW WEBSITE...
INI ADALAH HALAMAN UTAMA WEBSITE KAMI
Halaman utama adalah website kami yang terdiri dari Profil anime. Dalam profil anime menjelaskan
dua gambar yang jika kita diklik, muncul penjelasan salah satu gambar dengan sumber wikipedia
berbahasa gambar, juga ada link wallpaper yang bisa anda buka. Selain itu, ada satu link yang
bernama Profilku yang berisi biodata kami. Website ini bisa dibuka google chrome & modzilla firefox
karena jika dibuka di internet explorer maka ada salah satu gambar yang tidak muncul. Disini website
kami dilengkapi dua gambar yang berisi background berlatar gurun pasir dan garis lurus berwarna
merah. Selain itu gambar web juga berwarna hitam.
Ketika kita arahkan tombol mouse ke gambar ini maka akan muncul link penjelasan bersumber
wikipedia dengan menggunakan bahasa Inggris.
5/25/2018 Laporan Makalah Css
2/14
Ini adalah penjelasan dari gambar di atas
Dibawah gambar pertama terdapat sebuah link yang bernama wallpaper :
Jika kita klik ke wallpaper maka akan muncul gambar-gambar dari gambar pertama tadi.
5/25/2018 Laporan Makalah Css
3/14
Ini adalah gambar dari link wallpaper tadi. Jika kita ingin balik lagi ke halaman awal maka cukup
tinggal arahkan tombolnya ke back to menu. Nanti kita keluar dari link tersebut.
Begitu juga gambar yang kedua
ketika kita klik gambar kedua. Maka keluar penjelasan gambar dalam bentuk wikipedia berbahasa
Inggris.
5/25/2018 Laporan Makalah Css
4/14
Ini adalah pembahasan dari gambar kedua
Dibawah gambar kedua juga terdapat sebuah link yang bernama wallpaper.
Jika kita klik tersebut maka akan keluar gambar kedua seperti halnya didalam gambar satu.
Di atas adalah gambar dari sebuah link wallpaper. Jika kita ingin kembali lagi ke halaman awal.
Cukup kita klik aja back to menu.
5/25/2018 Laporan Makalah Css
5/14
Website ini juga ada profil tentang saya untuk melihat profil saya cukup klik profilku yang berada di
paling bawah web tersebut.
Ketika kita klik profilku maka muncul :
REVIEW CSS/HTML Website kami
Setelah mereview website kami. Kami akan membahas CSS/HTML untuk membuat website
sederhana di atas tadi. (inilah Adalah CSS.HTML)
5/25/2018 Laporan Makalah Css
6/14
Website kami terdiri dari 4 HTML. Pertama-tama kami akan menjelaskan HTML utama yang berisi
Cascading Style Sheet. (ini adalah Css.Html)
Di atas ada html yang berfungsi untuk membuat salah satu html. Ada head yang berfungsi
memberikan sebuah judul dalam html. Juga title Atribut Style yang berguna untuk memberikan
sebuah judul dalam web. Disini juga dijelaskan style Css. Marilah kita membahas tentang CSS.HTML
(Website Utama).
CSS adalah merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan
lebih terstruktur dan seragam.
Css diatas ada dua dengan menggunakan ID class (tanda titik) yakni ID class Body & Div(gambar.img). ID
Body bertujuan untuk memberikan ID-nya pada sebuah teks huruf. sedangkan Div.img berfungsi untuk
memberikan gambar background salah satu gambar agar terlihat keren.
1. Class CSS .Body Berisi : Font-Family (adalah font yang berfungsi untuk memberikan nilai generic font seperti times, verdana, arial,
dll) Font-Family Yang kami gunakan adalah times new roman.
Font size (untuk memberikan ukuran pada sebuah text). Font-Size yang kami gunakan adalah ukuran 18Point.
Color (untuk memberikan warna kepada text) color yang kami gunakan adalah color red (berwarna merah). Font-Style (untuk meluruskan / memiringkan sebuah text) Font-style yang kami gunakan adalah font-style
italic (miring).
Atribut Style
5/25/2018 Laporan Makalah Css
7/14
Padding (memberikan jarak komponen/ukuran jarak bagian dalam). Padding yang kami gunakan adalahpadding-top berukuran jarak sekitar 25 pixel untuk memberikan jarak komponen pada bagian atas.
Text-align (meratakan teks) : teks yang kami gunakan adalah text-align center (meratakan susunan/tekstengah).
Font-weight (untuk menentukan ketebalan text). Font-weight yang kami gunakan adalah Font-Weight :Bold (tebal).
inilah style/css yang akan muncul jika melakukan pemanggilan css tersebut
dengan menuliskan (p = Body)
2. Class CSS div.img berisi : Background (untuk menampilkan latar belakang / gambar belakang) background yang kami gunakan adalah
backgroundURL:(desert.jpg)(bergambar latar belakang gurun pasir dengan menggunakan URL).
Padding (memperbesar gambar background/latar belakang). Padding yang kami gunakan adalah paddingbiasa dengan berukuran 10pixels.
Border Style (memberikan garis pada sebuah background gambar). Border yang kami gunakan adalahborder-solid (border yang lurus dan tidak sepotong-potong).
Border-Width (untuk memberikan ketebalan garis pada background gambar) Border-Width kami gunakanberukuran 2pixels.
Border-color (untuk memberikan warna pada garis background) Border-color berwarna merah. Height (Tinggi Background) & Width (Lebar Sebuah Background). Height & width gambar background
berukuran 500 x 700.
inilah style /css div images yang akan
muncul jika melakukan pemanggilan class
div tersebut dengan menuliskan(div
=img).
Setelah itu tutup style & head dengan tulis(/style) (/head) itu dilakukan supaya style
css kebaca.
http://e/(desert.jpg)http://e/(desert.jpg)http://e/(desert.jpg)http://e/(desert.jpg)5/25/2018 Laporan Makalah Css
8/14
HTML
Setelah kita membahas CSS. Kini saatnya kita membahas html.
Disini ada (body background =Black) yang bertujuanmemberikan warna latar belakang dengan berwarna hitam pada
sebuah web/html.
Disini kita melakukan pemanggilan Style Class bernama Body untuk menghiasi sebuah teks PROFIL ANIME.
Selain itu, kita menggunakan marquee supaya teks PROFIL
ANIME tersebut bergerak dari samping ke kanan kiri. & jangan
lupa
sebagai penutup agar efek ini tidak menyebar keselanjutnya.
Untuk supaya terlihat keren, maka kami gunakan untuk
memberikan garis dibawah profil anime dengan berwarna merah, berukuran 100% memanjang full dari kiri
hingga ke kanan & memiliki ketebalan sekitar 4. Seperti dibawah ini.
IMAGE & A HREF (PART I)
Setelah membahas html. Kini kami akan
membahas tentang gambar & linknya. Mari
kita bahas satu-satu.
Disitu ada lagi pemanggilan Style Class untuk
memperbagus teks judul tersebut.
Tasogare
.untuk pemanggilan
background gurun pasir agar terlihat keren. Setelah itu buatlah html (img src = tasogore1.jpg) untuk
memasukkan gambar dengan background/latar gambar gurun pasir. sehingga hasilnya seperti ini :
Sebelum (div class =img) tetapi belum
ditulis (img src = "tasogore1.jpg" width= "700" height = "500".
(div class =img) Sesudah diisi
(img src = "tasogore1.jpg" width ="700" height = "500").
Agar anda mengetahui mengenai gambar itu maka
kami tampilkan dengan demikian kalian akan pindah link dari
PROFIL ANIME
Tasogare
Wallpaper
http://en.wikipedia.org/wiki/Dusk_Maiden_of_Amnesiahttp://en.wikipedia.org/wiki/Dusk_Maiden_of_Amnesiahttp://en.wikipedia.org/wiki/Dusk_Maiden_of_Amnesiahttp://en.wikipedia.org/wiki/Dusk_Maiden_of_Amnesia5/25/2018 Laporan Makalah Css
9/14
link kami ke link Wikipedia. Disanalah muncul penjelasan tentang gambar diatas yang berbahasa Inggris. (untuk
bisa itu kalian harus hubungi koneksinya ke Internet).
Cara penulisannya pun harus berurutan dimulai dari Class (DIV = img) (a href) dan terakhir (img src) ini
dilakukan agar gambar itu terlihat teratur & tidak berantakan. Selain jangan lupa diakhiri dengan (/a href) (/div)
supaya Efek linknya tetap digambar & tidak tersebarkan.
Wallpaper
Di atas juga melakukan pemanggilan ID Class Body untuk
memberikan teks wallpaper di situ terdapat salah satu link.
Kemudian tutup dengan tulis (/a) (/p). Disini kita akan
Menu Wallpaper. Seperti yang dijelaskan review html
ketika kita klik menu wallpaper akan muncul link yang
berisi beberapa gambar seperti disamping ini.
Untuk menjelaskannya, maka saya kasih konten/html baru
yang bernama Tasogare.Html.
Di konten ini, dijelaskan ada html & head. Juga
ada body background = black artinya berlatar
warna hitam.
berguna agar
gambar tersebut merata ketengah. Disana ada 3
gambar yaitu: yang
berisi gambar dengan ukuran masing-masing 200
x 300.
Disitu juga ada teks back to menu dengan konten
teks align center (teks merata ketengah). Disana
ada sebuah (A href = Css.Html) yang berfungsi
untuk kembali ke awal website awal dari
(Tasogare.html ke Css.Html).
Sesudah itu ada 3 gambar lagi dengan gambar
merata ke tengah . Yangberisi gambar dengan ukuran masing-masing 200
x 300.
back to menu
5/25/2018 Laporan Makalah Css
10/14
IMAGE & A HREF (PART II)
Setelah kita membahas Gambar Kesatu & Link
wallpaper bagian pertama, mari kita lanjut ke
gambar kedua. Disana ada yang berisi garis lurus
memanjang dari kanan hingga ke kanan. Seperti
dibawah ini :
Sesudah itu, lalu kita bahas gambar kedua. Disana kita sebuah teks dengan memanggil Class CSS bernama
Body. Dengan Class CSS maka Teks akan muncul seperti yang kita tulis di CSS.HTML sebelumnya.
Diatas tersebut ada div class = img yang bertujuan untuk memanggil latar gambar background (sama seperti
yang dijelaskan di Image & A Href II).
ini adalah konten Div.img sebelum diisi dengan gambar (img
src).
Ketika
sudah dibuat sudah dimasukkan. Maka gambar akan seperti
ini:
Digambar itu adalah gambar dengan ukuran
tinggi 500pt dan lebar 700pt.
Selain itu ada juga sebuah link jika kita klik
gambar tersebut, maka keluarlah link
Wikipedia yang berbahasa Inggris membahasgambar tersebut. (inipun hanya bisa diakses jika sudah bisa berkoneksi dengan
internet).
Diatas ada tulisan wallpaper dengan menggunakan CSS Class Body. Sama hanya di bagian (A image & href
part I) jika kita klik wallpaper maka akan muncul gambar seperti dibawahini :
Sword Art Online
Wallpaper
http://en.wikipedia.org/wiki/Sword_Art_Onlinehttp://en.wikipedia.org/wiki/Sword_Art_Onlinehttp://en.wikipedia.org/wiki/Sword_Art_Online5/25/2018 Laporan Makalah Css
11/14
Untuk menjelaskan ada gambar itu. Maka kita buka konten dengan nama Sword.Html
Di konten ini, dijelaskan ada html & head. Juga
ada body background = black artinya berlatar
warna hitam.
berguna agar
gambar tersebut merata ketengah. Disana ada 3
gambar yaitu: yang berisi gambar dengan ukuran
masing-masing 200 x 300.
Disitu juga ada teks back to menu dengan konten
teks align center (teks merata ketengah). Disana
ada sebuah (A href = Css.Html) yang berfungsi
untuk kembali ke awal website awal dari(Sword.html ke Css.Html).
Sesudah itu ada 3 gambar lagi dengan gambar
merata ke tengah . Yang berisi gambar dengan
ukuran masing-masing 200 x 300.
back to menu
5/25/2018 Laporan Makalah Css
12/14
PROFILKU & A HREF
Setelah membahas dua gambar beserta
wallpaper & isinya. Kini kita membahas
segmen terakhir. Yakni membahas tentang teks
profilku (yaitu menu / link yang paling bawah).
Disana ada gambar kedua & link wallpaper yang sudah
dibahas tadi. Disana ada sebuah garis yang memunculkan garis merah lurus
memanjang dari kanan hingga kekiri full dengan ketebalan
sekitar 5pt.
Konten selanjutnya ada paragraph yang menggunakan Class
Body seperti sebelumnya dengan, berefek marquee (bergerak
dari kiri ke kanan). Selain itu, ada sebuah link (a href = Profilku.html) yang ketika klik muncul biodata seperti
dibawah ini.
untuk menjelaskan kita buka konten baru dengan nama
Profilku.html
Profilku
Profilku
BIODATA KU
Nama : Setiawan Sudrajat
Kelas : IF-16
NIM : 10112704
Kuliah : UNIKOM (Teknik Informatika)
Hobby : Nonton Anime & Main Games
Motto : "GANBATTE KUDASAI"
5/25/2018 Laporan Makalah Css
13/14
Konten Profilku.html menjelaskan html, head, juga tentang title dengan nama Profilku. Dikonten ini
menjelaskan style css dengan style class (diawali dengan titik). Disana style ada .P (Class = P) yang
berisikan :
Font-Family (adalah font yang berfungsi untuk memberikan nilai generic font seperti times, verdana, arial,dll) Font-Family Yang kami untuk ini adalah Arial.
Font size (untuk memberikan ukuran pada sebuah text). Font-Size yang gunakan untuk konten ini adalahukuran 22 Point.
Font-Style (untuk meluruskan / memiringkan sebuah text) Font-style yang kami gunakan untuk ini adalahfont-style italic (miring).
Text-align (meratakan teks) : teks yang kami gunakan adalah text-align center (meratakan susunan/tekstengah).
Setelah membahas style css di atas tadi. Kini kita kembali membahas konten ini, disini juga ada konten bodybgcolor (warna latar belakang) dengan corak berwarna merah (red).
Disana juga ada pemanggilan css class paragraph dengan menggunakan (P Cla ss = P) per paragrafmulai dari
Biodataku, Nama : Setiawan Sudrajat, Kelas IF-16, NIM : 10112704, Kuliah UNIKOM (TEKNIK
INFORMATIKA), Hobby : Nonton: Anime & Games, & Motto : Ganbatte Kudasai.
Disana juga terdapat sebuah gambar yang berisi foto saya dengan pola align center (meratakan gambar ke
tengah).
5/25/2018 Laporan Makalah Css
14/14
PEMBATASAN MASALAH
Berdasarkan hasil review website & css menyimpulkan bahwa situs ini hanya bisa dibuka di google chrome &modzilla firefox karena jika buka di Internet Explorer maka salah satu gambar tidak muncul. Selain itu, url yang
kami gunakan adalah Relative Path & url untuk menyambungkan linknya ke Internet secara langsung. CSS yang
kami gunakan adalah CSS Titik (ID Class).
Demikianlah laporan makalah ini, mohon maaf jika ada kesalahan / lupa ada salah satu yang tidak dibahas
didalam web ini karena saya sebagai manusia tidak pernah sempurna dari namanya kesalahan.
TERIMA KASIH !!!!!!.