SchoolBlog: Pertemuan kesembilan

Assalamualaikum
Seperti biasa sepertinya saya akan memposting seminggu dua postingan, di postingan kali ini saya akan membahas tentang css pada html. Cukup aja basa basinya ya, langsung liat aja materinya cekidot..

Untuk yang pertama ini saya membuat css nya langsung di dalam kodingan ato bersama dengan kodingan htmlnya gtu, jadi langsung bersatu dengan kodingan htmlnya gtu.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Embedded css</title>
  <style type="text/css">
    #BhsIndo{
      background-color: ghost;
      border: solid;
      padding: 5px;
      font-family: Raleway;
    }
    .kotak{
      text-shadow: 5px 5px 5px yellow;
    }
    #BasaSunda{
      background-color: salmon;
      border: dashed;
      padding: 5px;
      font-family: consolas;
    }
    #English{
      background-color: goldenrod;
      border: double;
      padding: 3px;
      font-family: Impact;
    }
  </style>
  </head>
  <body>
      <div id="BhsIndo" class="kotak">
        Selamat Datang!
      </div>
<div id="BasaSunda">
        Wilujeng Sumping!
      </div>
<div id="English" class="kotak">
        Welcome!
      </div>
</body>
</html>

ini hasilnya

Yang ini kodingan nya hampir sama kaya yang sebelumnya yaitu pengkodingan css di dalam kodingan html, yang membedakan dgn kodingan sebelimnya cma isi bodynya aja.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Embedded css2</title>
  <style type="text/css">
    input#tombol{
      color: Aqua;
      background: salmon;
      border: 2px outset #bbd16d;
      font-size: 14px;
      font: bold;
    }
    .username{
      color: blue;
      background: aqua;
      size: 12px;
    }
  </style>
  </head>
  <body>
      <p>
<form name="Login">
        <label for="username" class="username">username</label>
        <input type="text" name="" value=""></input>
      </p>
<p>
<label for="password">Password</label>
        <input type="password" name="" value=""></input>
      </p>
<p>
<input id="tombol" type="submit" name="" value="Login"></input>
      </p>
</form>
</body>
</html>

ini hasilnya, kaya yang buat masuk platfrom gtu kan?

Nah kalo yang satu ini baru, jadi saya bikin dulu kodingan htmlnya trs buat kodingan css nya untuk menyeting tampilan htmlnya, kalo udah bikin cssnya masuken deh si name file css ke kodingan html di tag <link>. Biar lebih jelas langsung liat aja oke

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 External css</title>
    <link href="external.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <div id="BhsIndo" class="kotak">
      Selamat siang!
    </div>
<div id="Japanese" class="kotak">
      Konnichiwa
    </div>
<div id="English">
      Good Afternoon
    </div>
</body>
</html>

ini kodingan css nya, jdi intnya ini tuh css external ya

.kotak{
  border: solid;
  padding: 5px;
}
#BhsIndo{
  width: 400px;
  height: 100px;
  float: left;
  background-color: papayaWhip;
  font-family: consolas;
}
#Japanese{
  width: 400px;
  height: 100px;
  float: left;
  background-color: Thistle;
  font-family: Impact;
}
#English{
  width: 400px;
  height: 100px;
  float: left;
  background-color: Lightcyan;
  font-family: Arial;
}

ini hasilnya

Kalo ini sama kaya yang tdi, yaitu embeded ato kita sepakatin aja dgn sebutan internal css oke. mangga langsung diliat aja.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Emb macam" heading</title>
    <style type="text/css">
      body,p{
        color:fuchsia:
      }
      h1{
        color:coral;
      }
      p.ex{
        color:rgb(0,0,255);
      }
    </style>
  </head>
  <body>
    <h1>
this one heading</h1>
<p>
this paragph create by fuchsia color.
    default text-color didefinisikan pada body selector.</p>
<p class="ex">
this is paragph with class="ex". and blue text color</p>
</body>
</html>

ini hasilnya

yang ini merupakan tambahan terbaru ini cssnya external nii

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 ext css</title>
    <link href="extformatkarakter.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <p>
Setting space for abjad</p>
<h4>
this is header 4</h4>
</body>
</html>

ini kodingan external cssnya

p{
  letter-spacing: 0.5cm;
  color: DarkSeaGreen;
}
h4{
  letter-spacing: -2px;
  color: coral;
}

ini hasilnya

Ini kodingan tentang dekorasi menggunakana css, dengan menggunakan tag css "text-decoration:"

sok biar lebih jelas liat kodingannya

ini kodingan htmlnya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 decoration for css</title>
    <link href="exttextdecoandspace.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <em>overline</em>
    <h2>
h2 Line-through</h2>
<h3>
h3 underline</h3>
<p>
<a href="http://instagram.com">
    Klik here, now not blue underline</a></p>
<p class="duasenti">
besar nilai space bisa ditentukan dlm satuan cm dan px.
      yang ini hasil cm(centi meter)</p>
<p class="limapiksel">
ini hasil yang px(pixel)</p>
</body>
</html>

ini kodingan cssnya:

em{
  text-decoration: overline;
  color: salmon;
}
h2{
  text-decoration: line-through;
}
h3{
  text-decoration: underline;
}
a{
  text-decoration: none;
  color: LawnGreen;
}
p.duasenti{
  word-spacing: 2cm
}
p.limapiksel{
  word-spacing: 5px;
}

ini hasilnya

Ini kodingan css internal dengan tag css text indent, align, dan text transform yang fungsinya bisa kalianliat sendiri di screen shotan hasilnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Format Text</title>
    <style type="text/css">
      p{ text-indent: 2cm;
         text-align: justify;
           }
      p#kanan {text-align: right; color: chartreuse;}
      p.besar {text-transform: uppercase;}
      p.kecil {text-transform: lowercase;}
      p.kapital {text-transform: capitalize;}
    </style>
  </head>
  <body>
    <p>
With Text Indent
    Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan
  dari pengguna, untuk selanjutnya diolah menggunakan bahasa pemrograman web.</p>
<p id="kanan">
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan
  dari pengguna, untuk selanjutnya diolah menggunakan bahasa pemrograman web.</p>
<p class="besar">
pengubahan jadi huruf besar (kapital)</p>
<p class="kecil">
PENGUbahan JAdi HURUF KECil</p>
<p class="kapital">
huruf kapital di detiap awal kata</p>
</body>
</html>

ini hasil ssan nya

Ini kodingan yang terakhir, sekaligus tugas yang diberikan oleh guru pwpb yaitu ibu hana. jdi di tugas ini saya disuruh membuat biografi seseorang dengan desain htmlnya oleh css gtu. saya mengguna kan css external
ini kodingan html nya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Biografi</title>
    <link href="fortaksnine.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <h1>
biografi singkat emma watson</h1>
<br></br>
    <p>
Ia terkenal dalam perannya sebagai Hermoine Granger dalam film Harry Potter.
      Bernama lengkap Emma Charlotte Duerre Watson atau biasa di panggil Emma Watson
      lahir di Paris, Perancis, 15 April 1990 adalah anak dari pasangan pengacara
      Chris dan Jacqueline Watson yang sekarang telah bercerai. Ia mempunyai adik
      laki-laki bernama Alex. Dia menghabiskan tahun-tahun awalnya di Paris, Perancis,
      dan Oxford, Inggris. Semasa sekolahnya, Watson mengikuti Dragon School, sebuah
      sekolah persiapan swasta, hingga Juni 2003. Pengalaman beraktingnya sangat sedikit,
      sebelum membintangi Film Harry Potter, Selain sekolah, aktivitasnya antara lain
      menulis sebuah puisi, ia pernah mengikuti sebuah kompetisi puisi.</p>
<img src="emma watson.jpg" height="150" width="250" alt="">
  </body>
</html>

ini kodingan cssnya;

body{
  background-color: brown;
}
h1{
  text-align: center;
  text-transform: capitalize;
  font-family:cursive;
  color: gold;
}
p{
  text-align: left;
  font-family:cursive;
  color: silver;
}

dan inilah hasilnya

Note: file dokumen css external harus satu folder dgn file dokumen htmlnya ya

Terima kasih sudah mau melihat blog saya yang banyak kekurangan ini, semoga bermanfaat bagi kalian.
Wassalamualaikum Wr. Wb.

SchoolBlog

inlinecss

Minggu, 25 Agustus 2019

Pertemuan kesembilan

Tidak ada komentar:

Posting Komentar