/ / LAPORAN PRAKTIKUM PENGENALAN WEB Modul 9 CSS vs HTML

LAPORAN PRAKTIKUM PENGENALAN WEB Modul 9 CSS vs HTML

Add Comment 1100 Views heriipurnama
11
                LAPORAN PRAKTIKUM
PENGENALAN WEB
Modul 9
CSS vs HTML





Disusun Oleh :

HERI PURNAMA
125410101
TI 03


UPT LABORATORIUM
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM
Yogyakarta
2014



CSS vs HTML

1).PEMBAHASAN
LISTING
            A. HTML
<o:p></o:p></p> <p class="MsoNormal" style="text-align:justify"> Login<o:p></o:p></p> <p class="MsoNormal" style="text-align:justify">
                   

Ø  Tag diatas digunakan untuk membuat sebuah halaman Web yang mana pada tag digunakan untuk menunjukkan bahwa halaman ini adalah sebuah halaman html murni.
Ø  Tag diatas digunakan untuk menunjukkan sebuah judul html yakni dengan judul “Login”<o:p></o:p></span></p> <p class="MsoListParagraphCxSpLast" align="left" style="margin-left: 42pt; text-indent: -18pt;"> <!--[if !supportLists]Ø  = digunakan untuk memanggil halaman css yang ada dalam html tersebut , supaya dapat ditampilkan pada halaman Web atau ini adalah pemanggilanya.
                       
""
Ø  Tag
digunakan untuk membuat suatu Group dari tag-tag HTML yang telah dibuat dalam suatu halaman Web.Dan pada tag
ini diberi ID yakni “header” yang mana dalam tag
ini dimasukkan sebuah gambar yang bernama “image/logo.png” dan untuk memasukkanya digunakan untuk tag ,
 
Main Menu
Ø  Tag
digunakan untuk membuat suatu Group dari tag-tag HTML yang telah dibuat dalam suatu halaman Web.Dan pada tag
ini diberi ID yakni “main-menu” yang mana dalam ID ini diberi kata-kata yakni Main Menu
Ø  Ini adalah tag penutup bagi div ID yakni “Main Menu”
Ø  Ini adalah tag penutup bagi div ID yakni “header”
                       
""
Ø  Tag
digunakan untuk membuat suatu Group dari tag-tag HTML yang telah dibuat dalam suatu halaman Web. Dan pada tag
ini diberi ID yakni “
gambar-tengah” yang mana dalam tag
ini dimasukkan sebuah gambar yang bernama “
image/img.png” dan untuk memasukkanya digunakan untuk tag ,
Ø  Ini adalah tag penutup bagi div ID yakni “gambar-tengah”
 
Sig in
Tulis account
Ø  Tag
digunakan untuk membuat suatu Group dari tag-tag HTML yang telah dibuat dalam suatu halaman Web.Dan ID yang dibuat adalah bernama “sigin” yang mana pada tag
ini diberi tambahan nilai yakni kata-kata pada tag yakni Sign In , dan dalam  Id ini juga diberi nilai yakni class dengan nama class yakni “tulis-akun” yang mana dalam tampilanya diberi nilai bawaan yakni “Tulis account”.
                                                                                   
Ø  Ini adalah sebuah tag yakni tag
yang digunakan untuk membuat sebuah form.
Ø  Tag digunakan untuk membuat  tipe inputan yakni text dengan Placeholder atau value Nya adalah “username” dengan class yakni “input”.
 


Ø  Tag ini digunakan untuk membuat sebuah baris berganti ke baris selanjutnya atau dalam fungsi keyboard bisa disamakan dengan fungsi enter.
 
Ø  Ini adalah sebuah tag yakni tag
yang digunakan untuk membuat sebuah form.
Ø  Tag digunakan untuk membuat  tipe inputan yakni text dengan Placeholder atau value Nya adalah “password” dengan class yakni “input”.
 


Ø  Tag ini digunakan untuk membuat sebuah baris berganti ke baris selanjutnya atau dalam fungsi keyboard bisa disamakan dengan fungsi enter.
 
Ø  Ini adalah tipe inputan yakni dengan menggunakan tipe tombol “submit” yang menggunakan nilai value yakni “signin” dengan in”button”
</form>
Ø  Ini tag penutup dari tag
yang mana bisa disebut sebagai end tag.
                                               
Ø  Ini adalah tag penutup dari tag
yakni tag div dengan ID “signin”.
 

Ø  Ini adalah tag
tag yang digunakan untuk membuat ganti baris ke baris selanjutnya ,atau bisa disebut Ng sebai Center dalam halaman Web.
 
Ø  Tag ini digunakan untuk membuat garis pada halaman Web.
 
 
Ø  Tag
digunakan untuk membuat suatu Group dari tag-tag HTML yang telah dibuat dalam suatu halaman Web. Dan pada tag
ini diberi ID yakni “
footer”.
 
  copy right.All reserved
Ø  Ini adalah kalimat yang ada dalam div footer yang mana menggunakan tag didalamnya.
 
Ø  Ini adalah akhir  dari tag atau bisa disebut juga sebagai end tag
Ø  Ini adalah tag yang mana digunakan untuk menuliskan apa yang ada dalam halaman Web disini.
Ø  Ini adalah end tag dari tag
Ø  Ini adalah end tag dari tag
 
 
          B.CSS
body {
            padding: 0;
            margin: 0;
         }
Ø  Ini adalah tag yang digunakan untuk menggatur Body dengan aturan sebagai berikut:
1.       Dengan panjang spasi dalam halaman Web dengan atribut padding dengan ukuran 0.
2.       Ukuran halaman Web dengan menggunakan atribut margin dengan ukurannya 0.
 
#header {
            width: 100%;
            height: 40px;
            background: black;
            margin-top : 2px;
}
Ø  Ini adalah sebuah pengaturan pada halaman Web dengan menggunakan Id yakni  header dengan atribut yakni :
1.       Width digunakan untuk mengatur lebar header pada halaman Web.
2.       Height digunakan untuk mengatur tinggi header pada halaman Web.
3.       Background digunakan untuk mengatur background header pada halaman Web.
4.       Margin-top  digunakan tata letak header terhadap kertas kertas atas.
 
#header img{
            margin-left: 10pc;
}
Ø  Ini adalah sebuah pengaturan pada halaman Web dengan menggunakan di header img ,dengan atribut:
1.       Margin-left yakni atribut yang digunakan untuk mengatur supaya kertas bagian kiri mempunyai ukuran  yakni 10pc.
#main-menu {
            font-size: 18px;
            color: white;
            text-align: right;
            margin-top: -30px;
            margin-right: 7pc;
           
}
Ø  Ini adalah pemanggilan pada halaman Web yakni dengan menggunakan id yakni “main-menu” pada Id ini digunakan pengaturan dengan atribut yakni :
1)      Font-size digunakan untuk menggatur ukuran font pada id main menu
2)      Colo digunakan untuk menggatur warna pada id main menu
3)      Text-align digunakan untuk menggatur tata letak text
4)      Margin-top digunakan untuk mengatur ukuran kertas atas
5)      Margin-right digunakan untuk mengatur ukuran kertas kanan
 
 
#gambar-tegah {
           
}
Ø  Ini adalah pemanggilan pada halaman Web yakni dengan menggunakan id yakni “gambar-tenggah”
 
#gambar-tengah img {
            margin-left: 10pc;
}
Ø  Ini adalah pemanggilan pada halaman Web yakni dengan menggunakan id yakni “gambar-tenggah img” dengan pengaturan dengan menggunakan atribut yakni :
1)      Margin-left digunakan untuk mengatur ukuran kertas kiri. . . ..
 
hr {
            width: 800;
}
Ø  Ini adalah digunakan untuk pengaturan tag hr yang mana pengaturanya menggunakan atribut yakni:
1.width adalah digunakan untuk pengaturan lebar pada tag
 
#sigin {
            width: 300px;
            height: 200px;
            background: #fff;
            margin-left: 40pc;
            margin-top: -14.5pc
}
Ø  Ini adalah pemanggilan pada halaman Web yakni dengan menggunakan id yakni “sigin” pada Id ini digunakan pengaturan dengan atribut yakni :
1.width digunakan untuk pengaturan lebar pada id sign
2.height digunakan untuk pengaturan tinggi pada id Ibn
3.backgroud digunakan untuk pengaturan background atau latar belakang pada id Ibn
4.margin-left digunakan untuk pengaturan ukuran kertas kiri
5.margin-top digunakan untuk pengaturan ukuran pada kertas atas
 
p {
            font-size: 18px;
            font-weight: blod;
}
Ø  Ini adalah pengaturan pada tag yang mana menggunakan atribut dalam penagaturanya adalah :
              1.font-size yang mana digunakan untuk mengatur ukuran lebar font
              2.font-weight yang mana digunakan untuk mengatur ukuran tinggi font
 
.tulis-akun {
            margin-top: -15px;
            font-size: 12px;
}
Ø  Ini adalah pengaturan pada class yakni class tulis-akun yang mana dalam pengaturanya menggunakan atribut:
          1.margin-top : digunakan untuk menggatur ukuran kertas pada bagian atas dalam class tulis-akun
          2.font-size : digunakan untuk menggatur ukuran font dalam class tulis-akun
 
.input {
            width:200px;
            height: 30px;
            border: solid;
            color: blue;
}
Ø  Ini adalah pengaturan pada class yakni class input yang mana dalam pengaturanya menggunakan atribut:
   1.width pengaturan lebar pada class input
   2.height pengaturan tinggi pada class input
   3.border pengaturan border pada class input
   4.color pengaturan warna pada class input
 
#button{
            width:90px;
            height:35px;
            color: green;
}
Ø  Ini adalah pemanggilan pada halaman Web yakni dengan menggunakan id yakni “button” pada Id ini digunakan pengaturan dengan atribut yakni :
                     1.width pengaturan lebar pada id Button
                     2.height pengaturan tinggi pada id Buton
                     3.color pengatura warna pada id button
#footer{
  text-align:left;
}
Ø  Ini adalah pemanggilan pada halaman Web yakni dengan menggunakan id yakni “footer” pada Id ini digunakan pengaturan dengan atribut yakni :
1.text-align yakni pengaturan tata letak text pada id footer.
 
           Running file pada browser
 
 
 
2).KESIMPULAN
a.       Dengan menggunakan css dapat membuat halaman Web lebih menarik dan bila menggunakan css dapat mengatur halaman Web yang ada berulang kali demam menggatur halaman Web memanggil file cssnya.
b.        Didalam css pun juga dapat digunakan untuk menggatur jenis font sehingga fungsi tag dalam html pun jadi jarang diggunakan.
 
3).LISTING TERLAMPIR

 
-->
    Blogger Comment
    Facebook Comment

0 komentar:

Post a Comment

Thanks For Your Feedback.

Subscribe to: Post Comments ( Atom )