Jumat, 24 Februari 2017

Tugas DSA Pak Umam

ADVISER : PAK UMAM
DEVELOPER : Lailatul Qomariyah


1.      Menggunakan Style Sheet

  •         Inline

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Style</title>
</head>
<body>
<!-- menerapkan embedded style pada paragraf -->
<p style="color:red; font-style:italic">
  Ini paragraf pertama
<!-- menerapkan embedded style pada paragraf -->
<p style="color:blue; font-weight:bold">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
  Ini paragraf ketiga
</body>
</html>

  •         Embedded

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded Style</title>
<style type="text/css">
<!--
  p {
    color: red;
    font-style: italic;
  }
  -->
</style>
</head>
<body>
<p>
  Ini paragraf pertama
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
<p>
  Ini paragraf ketiga
</body>
</html>

  •         Embedded Style

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded Style</title>
<style type="text/css">
<!--
  .style1 {
    color: red;
    font-style: italic;
  }
  #style2 {
    color: blue;
    font-weight: bold;
  }
    -->
</style>
</head>
<body>
<p class="style1">
  Ini paragraf pertama
<p id="style2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
<p class="style1">
  Ini paragraf ketiga
</body>
</html>
2.     Tipografi

  •         Style font

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Font</title>
<style type="text/css">
<!--
  .style_font {
    font-family: Georgia;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
    color: red;
  }
  -->
</style>
</head>
<body>
<p class="style_font">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>

  •         Mengatur Spasi

Script :
<style type="text/css">
<!--  .style_font {  line-height: 36px;  } -->
</style>

  •         Initial Cap

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Font</title>
<style type="text/css">
<!--
    p:first-letter {
   font-size: 3em;
   background-color: black;
   color: white;
  }
  -->
</style>
</head>
<body>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
</body>
</html>
3.     Elemen Elemen Halaman

  •         Border

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Sheet</title>
<style type="text/css">
<!--
  .border1 {
    border: 1px solid red;
  }
  .border2 {
    border: 1px dashed red;
  }
  .border3 {
    border: 1px dotted red;
  }
  -->
</style>
</head>
<body>
<p class="border1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
<p class="border2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
<p class="border3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
</body>
</html>

  •         Padding

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Sheet</title>
<style type="text/css">
<!--
  .border1 {
    border: 1px solid red;
    padding: 10px;
  }
  .border2 {
    border: 1px solid red;
    padding: 20px 10px 5px 40px;
  }
  -->
</style>
</head>
<body>
<p class="border1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
<p class="border2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
</body>
</html>
4.     Link
  •         Link

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>style Link</title>
<style type="text/css">
<!--.link_none {text-decoration: none;}-->
</style>
</head>
<body>
<a href="link2.html">Link Normal</a><br />
<a href="link2.html" class="link_none">link tanpa garis bawah</a>
</body>
</html>

  •         Link 2

Hasil :
Script :
<!DOCTYPE html>
<html lang"en">
<head>
<title>style link</title>
<style type="text/cs">
<!--
.link a:hover {
   text-decoration: none;
 }
 .link2 a: hover {
   font-style: talic;
   font-weight: bold;
 }
 .link3 a:hover  {
   cursor: wait;
 }
 -->
</style>
</head>
<body>
<a href="link2.html">link nrmal</a><br />
<p class="link1">
<a href="lnk2.html">link tanpa garis bawah</a>
</p>
<p class="link2">
<a href="link2.html">ubah style font</a>
</p>
<p class="link3">
<a href="link2.html">ubah kursor</a>
</p>
</body>
</html>
5.     List

  •         List

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style List</title>
<style type="text/css">
<!-- #leftmenu ul { width: 200px; list-style-type:none;padding:0; margin:0; } #leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px;text-decoration: none; } #leftmenu a { padding: 5px 0px 5px 15px;display: block; background: #6cae15 no-repeat left center; margin: 0px 0px 1px; color: #ffffff; } #leftmenu a:hover { background: #5e9711 no-repeat left center; color: #ffffff } -->
</style>
</head>
<body>
List Normal
<ul>
<li>Satu</li>
<li>Dua</li>
</ul>
<hr/>
Style List
<div id="leftmenu">
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
</li><a href="#">Menu Tiga</a></li>
</ul>
</div>
</body>
</html>
6.      Menggunakan Division

  •         Menggunakan Devision

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
            <title>Demo Posisi Diviion</title>
            <style type="text/css">
            <!--
            .box1 {
               float: left;
               width: 200px;
               height: 50px;
               background: grey;
               border: 1px solid red;
            }
           
            .box2 {
               float: right;
               padding: 10px;
               width: 300px;
               height: 100px;
               border: 1px solid red;
            }
           
            .box3 {
              /* me-reet pengaturan float left maupun right */
              clear: both;
              float: left;
              width: 200px;
              height: 50px;
              background: grey;
              border: 1px solid red;
            }
            -->
            </style>
</head>
<body>
            <div class="box1">
            paragraf ini di dalam tag &lt;div&gt;
            </div>
           
            <div class="box2">
            Muhammad Ibnu Fanani
            </div>
           
            <div class="box3">
            Muhammad Ibnu Fanani
            </div>
           
</body>
</html>
7.     Membuat Border

  •         Membuat border

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title> demo rounded border</title>
<style type="text/css">
<!--
   .round  {
     background-color: #ddccb5;
             -moz-border-radius: 5px;
             -webkit-border-radius: 5px;
             border: 2px solid #897048;
             padding: 10px;
             width: 310px;
   }
   -->
</style>
</head>
<body>
<div class="round">
    gampang sekali loh bikin rounded border :)
            </div>
            <br />
           
            <div class="round">
              pembuatan rounder border menggunakan css3 memang sangat mudah tidak perlu file gambar sama sekali, seperti pada css sebelumnya
            </div>
            <br />
           
</body.
</html>
8.     Study Kasus
  •         Study kasus

Hasil :
Script :
<!DOCTYPE html>
<html lang="en">
<head>
<title> demo rounded border</title>
<style type="text/css">
<!--
   .circle {
background: yellow;;
               border-radius: 200px 200px200px200px;
               border-radius: 160px;
               border: 2px solid #897048;
               padding: 50px;
               width: 100px;
               height: 100px;
   }
   -->
<!--
   .rcorners6 {
border-radius: 15px 0px 15px 0px;
background: red;
     -moz-border-radius-topleft: 15px;
     -moz-border-radius-bottomright: 15px;
padding: 15px;
width: 150px;
height: 80px;
border: 2px solid #897048; }
   -->
<!--
   .button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
background: grey;
               border-radius: 15px 0px 0px0px;
                -moz-border-radius-topleft: 15px;
                -moz-box-shadow: 10px 7px 5px;
                -webkit-border-radius: 40px;
               border: 2px solid #897048;
               padding: 15px;
               width: 150px;
               height: 75; }
   -->
</style>
</head>
<body>
<div class=" circle" align="center">
MUHAMMAD IBNU FANANI
</div>
<br />
<div class= "rcorners6" align="center">
TULUNAGUNG 09 DESEMBER 2000
</div>
<br />
<div class= "button1" align="center">
SMK INDUSTRI ALKAAFFAH
</div>
<br />
</body>
</html>
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)