laporan makalah css

Upload: setiawan-sudrajat

Post on 15-Oct-2015

102 views

Category:

Documents


0 download

DESCRIPTION

Makalah Ini Berisi Tentang Laporan CSS.

TRANSCRIPT

  • 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 ke

    selanjutnya.

    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_Amnesia
  • 5/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_Online
  • 5/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 !!!!!!.