Rabu, 27 Februari 2019

HTML dan CSS

   Februari 27, 2019      

Membuat Tata Letak atau Layout dengan HTML dan CSS 

 Script :


<!DOCTYPE html>
<html>
<body>
<head>
<style>

.flex-container {
  display: -webkit-flex;
  display: flex; 
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.flex-container > * {
  padding: 10px;
  flex: 1 100%;
}

.main {
  text-align: left;
  background: cornflowerblue;
}

.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}

@media all and (min-width: 768px) {
  .aside { flex: 1 auto; }
  .main    { flex: 3 0px; }
  .aside1 { order: 1; }
  .main    { order: 2; }
  .aside2 { order: 3; }
  .footer  { order: 4; }

//untuk memodifikasi design, atau style untuk form html

}
</style>
</head>
<body>

<div class="flex-container">
  <header class="header">Header</header>
  <aside class="aside aside1">Aside 1</aside>
  <article class="main">

//menampilkan masing2 class didalam body
   
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>
<form action="/action_page.php">
  <fieldset>
    <legend>fValidator:</legend>
    ID:<br>
    <input type="text" name="firstname" value="">
    <br>
    Password:<br>
    <input type="text" name="password" value="">
    <br>
    Confirm Password:<br>
    <input type="text" name="password2" value="">
    <br>
    Name:<br>
    <input type="text" name="name" value="">
    <br>
    Sex:<br>
    <input type="checkbox" name="" value="Male" placeholder="Male">male
    <input type="checkbox" name="" value="Male" placeholder="female">female
    <br>
    Birthday:<br>
    <input type="date" name="bd" value="">
    <br>
    Phone:<br>
    <input type="text" name="phone" value="">
    <br>
    Email:<br>
    <input type="text" name="email" value="">
    <br>
    URL:<br>
    <input type="text" name="url" value="">
    <br>
    State:<br>
    <select name="state">
    <option value="">Select one</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
    <br><br>
    Real (float):<br>
    <input type="text" name="real" value="">
    <br>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </fieldset>
</form>
 <p>ini bagian content</p>
  </article>
  <aside class="aside aside2">Aside 2</aside>
  <footer class="footer">Footer</footer>

// membuat form data di dalam body :

</div>
</body>
</html>



Hasil :



   No Comments

di Februari 27, 2019 0 komentar

Tugas 1 : HTML

   Februari 27, 2019      

Script Tittle :
<html>
<head>
<title>Welcome to eepis-its</title>
</head>
</html>

Hasil :




Script Body :

<html>
<head>
<title>Welcome to eepis-its</title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>

Hasil :



Script Body H :

<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>

Hasil :




Script Body dengan P :

<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan telekom PENS ITS.
Siapa ya yang mo kenalan dengan saya.
</p>
<body>

Hasil :



Script <li> :

<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>

Hasil :



Script <li> dan <ol> :

<body>
<P>Daftar Jurusan PENS ITS</P>
<ol start="1" type=“1">
<li>Telkom</li>
<li>IT</li>
<li>Elka</li>
<li>Elektro Industri</li>
</ol>
<body>

Hasil :



Script Body dengan Align :

<html>
<head>
<title>Welcome to eepis-its</title>
</head>
<body>
<B><P align="center">Lab di Jur. Telkom</P></B>
Jurusan Telkom mempunyai 7 lab, diantaranya <br>
<font color="#9966FF" size="3" face="arial">
1. Lab. Multimedia </font> <br>
2. Lab. Microwave <br>
3. Lab. Komunikasi Digital <br>
</body>
</html>

Hasil :



Script <td> :

<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>


Hasil :



Script  table dengan HTML:

<body>
<table border="1">
<caption>Creating Table</caption>
<tr>  <td>cell 1a</td>
          <td>cell 1b</td>
</tr>
<tr>  <td>cell 2a</td>
          <td>cell 2b</td>
</tr>
</table>
</body>

Hasil : 



Script table dengan warna style :

<body>
<table border=1 cellspacing=5 cellpading=10>
<tr align="left" valign="top">
<td width="25%" bgcolor=red>cell 1a</td>
<td width="25%" bgcolor=yellow>cell 1b</td>
</tr>
<tr align="center" valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>

Hasil :


   No Comments

di Februari 27, 2019 0 komentar

Selasa, 26 Februari 2019

Javascript : Objek

   Februari 26, 2019      

Objek










Script Objek Array:






<HTML>
<HEAD>
<TITLE>Properti prototype</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
   function tampilkanElemenArray() {
      for (var i = 0; i < this.length; i++) {
         document.write("[" + i + "] = " +
                        this[i] + "<BR>");
      }
   }   
   Array.prototype.cetak = tampilkanElemenArray;
   var musik = new Array("Jazz", "Rock",
                         "keroncong", "Dangdut");
   var tanaman = new Array("Aglaonema", "Begonia",
                           "Bromelia");
   document.write("Isi array musik: <BR>");
   musik.cetak();
   document.write("Isi array tanaman: <BR>");
   tanaman.cetak();
//-->
</SCRIPT>
</BODY>
</HTML>



Hasil :



Script Objek Radio :



<HTML>
<HEAD>
<TITLE>Mengakses Objek radio</TITLE>
</HEAD>
<BODY>
Klik pada musik yang paling Anda sukai<BR>
<FORM NAME = "formTes"
      METHOD  = "GET">
<INPUT TYPE = "RADIO"
       NAME = "radioMusik"
       VALUE = "Jazz"
       onClick = "info()">Jazz<BR>
<INPUT TYPE = "RADIO"
       NAME = "radioMusik"
       VALUE = "Keroncong"
       onClick = "info()">Keroncong<BR>
<INPUT TYPE = "RADIO"
       NAME = "radioMusik"
       VALUE = "Dangdut"
       onClick = "info()">Dangdut<BR>
<INPUT TYPE = "RADIO"
       NAME = "radioMusik"
       VALUE = "Lainnya"
       onClick = "info()">Lainnya<BR>
<HR>
Info:
<INPUT TYPE = "TEXT"
       NAME = "fieldMusik"
       SIZE = "40">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
   function info() {
      for (var i = 0; i < 4; i++)
         if (document.formTes.radioMusik[i].checked)
            document.formTes.fieldMusik.value =
               document.formTes.radioMusik[i].value;
   }
//-->
</SCRIPT>
</BODY>
</HTML>

Hasil :



Script Objek Password :


<HTML>
<HEAD>
<TITLE>Mengakses Objek password</TITLE>
</HEAD>
<BODY>
<FORM NAME = "formTes"
      ACTION = "tesform.htm"
      METHOD  = "POST">
<PRE>
Password Pengganti  : <INPUT TYPE = "PASSWORD"
       NAME = "password_1">
Password Sekali Lagi: <INPUT TYPE = "PASSWORD"
       NAME = "password_2">
</PRE>
<INPUT TYPE = "BUTTON"
       NAME = "tombolProses"
       VALUE = "Proses"
       onClick = "cekPassword()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
   function cekPassword() {
      if (document.formTes.password_1.value !=
          document.formTes.password_2.value)
         alert("Dua password yang Anda masukkan tidak sama");
      else
         window.location.href = "tesform.htm";
   }
//-->
</SCRIPT>
</BODY>
</HTML>


Hasil :


   No Comments

di Februari 26, 2019 0 komentar
Langganan: Postingan ( Atom )