Minggu, 27 Februari 2011

Tugas Praktikum MODUL 4



Ini dia Script dari tampilan diatas :
check this out :

 



Ini code css nya... Namanya gambar.css
body{
margin: 10px auto;
width : 1000px;
}

header, logo, nama, nav, search, box, section, gambar, article, event, footer{
display : block;
}

header{
height: 130px;
width: auto;

}

logo{
float : left;
padding-top: 5px;
margin-top: 5px;
margin-left : 25px;
height : 90px;
width : 100px;
background-image : url(um.jpg)
}

nama{
background-color : #8EB4E6;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}

info{
float: left;
font-family : Comic Sans MS ;
font-size : 15px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 20px;
background-color : blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

nav{
width: 1000px;
height: 30px;
background-color : #44B4D5 ;
color : black;
font-family: Times New Roman;
}

search{
float : left;
margin-top: 5px;
margin-left : 20px;
width : 50px;
height: 20px;
}

box{
margin-top: 5px;
float: left;
width: 165px;
height: 20px;
}

home, news, tutorial, tips, download{
display: block;
float: left;
background-color: blue;
margin-top: 10px;
float: left;
text-align : center;
color : white;
font-size: 14px;
font-family: calibri;
font-weight: bold;
}

home{
float: left;
margin-left: 372px;
width: 75px;
height: 23px;
}

news{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

tutorial{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

tips{
float: left;
margin-left: 2px;
width: 85px;
height: 23px;
}

download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

section{
width : 1000px;
height : 415px;
background-color : #B8E2EF;
}

gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(bareng.jpg);

}

article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : white;
font-size : 15px;
font-family : Comic Sans MS;
}

event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : black;
margin-top: 5px;
margin-left: 5px;
width: 705px;
height: 100px;
background-color : #44B4D5 ;
}

footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #8EB4E6;
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}

linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}

linkmenu a{
padding: 2px 0px 2px 5px; display: block;

margin: 0px 0px 1px; color: white;
}

linkmenu a:hover {
background: 376aeb no-repeat left center; color:black;
}

list{
list-style-position: inside;
}

Sedangkan Ini Kode HTMLnya :

<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>


<body>


<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>WELCOME to PTI OFF B</MARQUEE></info>
</header>


<nav><search>Search</search><box>
<input type="text" size="20">
</box>
<linkmenu>
<home><a href="#" target="_blank" title="About TE UM">Home</a></home>
<news><a href="#" target="_blank" title="Kabar Berita">News</a></news>
<tutorial><a href="#" target="_blank" title="Materi Kuliah">Tutorial</a></tutorial>
<tips><a href="#" target="_blank" title="Aneka Tips dan Trik">Tips & Trik</a></tips>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>


<section>
<gambar></gambar>

<article>
PTI OFF B adalah salah satu kelas atau offering yang ada di Prodi S1 Pendidikan Teknik Informatika Jurusan Teknik Elektro Fakultas Teknik<br>
Kami Warga PTI B cukup bersahabat, suka jalan-jalan bersama-sama untuk mengakrabkan dan merefreshingkan diri<br>
Sekarang kami telah memasuki semester 4, semester yang cukup menguras energi<br>
Mungkin saat ini yang dibutuhkan adalah sedikit refreshing diantaranya:
<ul>
<li>Mengadakan Makan-makan bersama satu kelas</li>
<li>Jalan-jalan ke tempat wisata</li>
<li>Kunjungan Industri yang menyenangkan</li>
</ul>
Semoga masih ada waktu untuk melakukan semua itu, aminn....
</article>


<event><a href="#" target="_blank" title="The Learning University"></a>
<b> &nbsp EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Kuliah yuk Kuliah">Kuliah</a></li>
<li><a href="#" target="_blank" title="Kunjungan Industri">Kunjungan Industri</a></li>
<li><a href="#" target="_blank" title="Praktek Industri">Praktek Industri</a></li>
<li><a href="#" target="_blank" title="Wisuda Tepat Waktu">WISUDA</a></li>
</ul>
</event>
</section>
<footer>
Home | News & Media | Tutorial | Tips & Trik | Download
<br>&copy CopyRight Intan Nur Varida
</footer>
</body>
</html>

Studi Kasus Modul4


This is it source code nya...
silahkan mencoba

ini file cssnya dengan nama desain.css

body{
margin : 10px auto;
width : 900px;
border : 1px solid green ;
}

header, nav, section, article, aside, footer{
display : block;
}

header{
padding-top: 30px;
height: 50px;
border : 1px solid green;
}

nav{
padding-top: 7px;
width: 900px;
height: 30px;
border : 1px solid blue;
}

section{
width : 900px;
height : 450px;
border : 1px solid red;
}

article{
padding-top: 5px;
float: left;
margin : 20px;
width: 700px;
height: 385px;
border: 1px dashed red;
}

aside{
padding-top: 5px;
margin : 20px;
margin-left: 725px;
width: 150px;
height: 385px;
border: 1px dashed black;
}

button{
font-family : calibri;
color : blue;
height :30px;
}
footer{
clear : both;
height : 30px;
}

Sedangkan ini file htmlnya :


<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="desain.css" type="text/css" />
</head>

<body>

<header>
header
</header>

<nav>
nav
<button>Home</button>
<button>Article</button>
<button>Download</button>
<button>About Us</button>

</nav>

<section>
<article>article...
</article>
<aside>
<button >L O G I N</button>
<br>
aside...
</aside>
section

</section>

<footer>
footer
</footer>

</body>
</html>

Kamis, 24 Februari 2011

Ayo Berkreasi Membuat Desain Layout

Bikin Tampilan Kayak facebook juga Bisa kok.. kayak gini nie..


nie Scriptnya kalo mau nyoba...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Face-Mu</title>
<style type="text/css">

.header, .footer{
background-color : rgb(200,20,175);
}

.header{
height : 70px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
}

#lebar{
width : 1000px;
}

.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Comic;
font-size : small;
font-weight : bold;
}

.bg-color{
height : 450px;
background-color : #FE67EB;
background-repeat : repeat-x;
}

.login{
float : right;
color : white;
font-family : comic;
font-size : small;
}

#logo{
margin-top : 20px;
float : left;
height : 35px;
}

#kanan{
float: left;
padding: 5px;
width:370px;
height: 380px;
}

#tengah {
float: left;
}

#kiri {
float: left;
width: 780px;
height: 380px;
}

#gambar{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 400px;
height: 200px;
font-family : comic;
font-size : small;
font-weight : bold;
color: purple;
}

#huruf{
font-family : comic;
font-size : small;
font-weight : bold;
line-height : 30px;
color: purple;
}

#button_masuk{
background-color : purple;
color : white;
}

#button_daftar{
background-color : purple;
color : white;
}

</style>
<link type="image/x-icon" rel="icon" href="icon.png">
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="facemu.png">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Masuk" id="button_masuk"></td>
</tr>
<tr>
<td height="25"><input type="checkbox" checked>Ingat saya</td>
<td height="25">Lupa kata sandi?</td>
<td height="25">&nbsp;</td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">

<form action="my_action.jsp">
<div id="tengah">
<div id="kiri">
<div id="gambar">
<font size="5">Face-mu Untuk menghubungkan Anda Yang Bingung Mencari Wajah Baru </font>
</br>
<img src="love.jpg" width=350 height=300>
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Registrasi Gopek Dulu </h2>
<hr style="color: purple">
<form action="my_action.jsp">
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Email Anda :</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Kata Sandi Baru:</td>
<td><input type="password" size="30"></td>
</tr>
<tr>
<td>Ulangi Kata Sandi:</td>
<td><input type="password" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option value="pria" selected>Laki-laki
<option value="wanita">Perempuan
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Daftarkan Sekarang" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
Powered by Intan Nur Varida - S1 PTI 2009 / Off - B - Inspired by SNSD
</div>
</body>
</html>

Membuat Bentuk Bentuk Menggunakan CSS

Mau Buat Yang Seperti ini???


this is it...

<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Studi Kasus</title>
<style type="text/css">
<!--
.round {
background-color:#FFCCCC;
-moz-border-radius:80px;
-webkit-border-radius:0px;
border:2px solid #000000;
padding:15px;
width:130px;
height:130px;
}

.ketupat{
background-color:#66FFCC;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
border:2px solid #000000;
padding:10px;
width:260px;
height:25px;
}

.bayangan{background-color:#CCCCFF;
border:2px solid #000000;
padding:20px;
width:260px;
height:25px;
-moz-box-shadow: 5px -10px 10px #221;
}
-->
</style>
</head>

<body>
<div class ="round" align="center">

Yang ini border lingkaran.Pendekatan yang digunakan masih sama lho. Mari Berkreasi!!!!!!!!!
</div><br>
<div class="ketupat">
Bisa gak bikin kreasi border kayak ini...
</div><br>
<div class="bayangan" align="center">
kalau ini efek shadowwwwww atau bayangan.......
</div>
</body>
</html>

Selasa, 15 Februari 2011

STUDY KASUS - MODUL 1


Script :
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Ini baris komentar, tidak diproses -->
<title>The Story</title>
</head>
<link rel="shortcut icon" href="images/icon.gif">




<body background="BB.jpg">


<ol>
<hr />
<h2 align="left" bgcolor="white">FT ISLAND</h2>
<hr />
<h4>


</br>
<p>
</br>
<p align="Left"><b>1.Picture</b></font>
<p>
<img src="images/12.jpg" alt="idola"/ width = "200" >


<p align="Left"><b>2.Name</b></font>
<p align="Left">Lee Hong ki</font>


<p align ="Left"> Dia merupakan salah satu personil dari Grup band yang cukup terkenal di korea yaitu FT ISLAND</font>
<hr width ="500" align ="Left">
</hr>
</h4>
</ol>


</body>
</html>

STUDY KASUS - MODUL 2

a. Download Film

Script :

<!DOCTYPE HTML>
<html lang="en">
<link rel="icon" href="icon.gif">
<head>
<title>Download Film</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=10>
<h3 align="center">DOWNLOAD MANIA</h3>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#47f20b"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>

<li><a href="Twilight.flv" target="_blank" title="Download Now">Twilight</a></li>
<li><a href=="Alangkah Lucunya Negeri Ini.flv" target="_blank" title="Download Now">Alangkah Lucunya Negeri Ini</a></li>
<li><a href="Harry Potter 7.flv "target="_blank" title="Download Now">Harry Potter 7</a></li>
<li><a href="Love Story.flv" target="_blank" title="Download Now">Love Story</a></li>
<li><a href="Sponge bob The Movie.flv" target="_blank" title="Download Now">Sponge bob The Movie</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> &copy; Intan </p></td>
</tr>
</table>
</body>
</html>


b. Download Dokumen


Ini Scriptnya :
<!DOCTYPE HTML>
<html lang="en">
<link rel="icon" href="icon.gif">
<head>
<title>Download Dokumen</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=10>
<h3 align="center">DOWNLOAD MANIA</h3>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#0d5d12"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#47f20b"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="www.4shared.com" title="Download Now">Foto Keluarga</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto Teman-Teman</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto Liburan</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto Presiden</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto Adek Kecil</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> &copy; Intan </p></td>
</tr>
</table>
</body>
</html>


c. Download Music 


Ini Scriptnya :

<!DOCTYPE HTML>
<html lang="en">
<link rel="icon" href="icon.gif">
<head>
<title>Download Musik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=10>
<h3 align="center">DOWNLOAD MANIA</h3>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#0d5d12"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#47f20b"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="ungu.mp3" target="_blank" title="Download Now">Ungu – Dirimu Satu</a></li>
<li><a href="I hope.mp3" target="_blank" title="Download Now">FT Island - I hope</a></li>
<li><a href="Flanella.mp3" target="_blank" title="Download Now">Flanella - saat terakhir</a></li>
<li><a href="pray.mp3" target="_blank" title="Download Now">Justin Beiber - Pray</a></li>
<li><a href="Rama.mp3" title="Download Now">Rama - Bidadari</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> &copy; Intan</p></td>
</tr>
</table>
</body>
</html>

Kalau Seandainya Salah satu file music dklik akan langsung memutarkan lagu yang dipilih
 

Senin, 14 Februari 2011

TUGAS MODUL 2 PRAKTIKUM 2

Script Program


<!DOCTYPE HTML>
<html lang="en">
<head>
<title> PERBANDINGAN SIKAP </title>
</head>
<body>
<h3 align="center"><b>PERBANDINGAN SIKAP</b></h3>
<table border="5" cellspacing=1 frame="hsides" rules="groups">

<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">

<!--baris 1-->
<tr>
<th width="40">No.</th>
<th width="260">Spesifikasi Sikap</th>
<th width="60">Poin</th>
<th width="200"> Nona</th>
<th width="200"> Sutan</th>
<th width="200"> Reza</th>
<th width="200"> Hendrik</th>
</tr>

<tbody>
<tr>
<td align="center">1</td>
<td>Kerja Keras</td>
<td align="center">8</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">2</td>
<td>Tekun</td>
<td align="center">9</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>

<tr>
<td align="center">3</td>
<td>Tidak Sombong</td>
<td align="center">6</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">4</td>
<td>Sabar</td>
<td align="center">7</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">5</td>
<td>Pemaaf</td>
<td align="center">10</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">X</td>
</tr>

<tbody>
<tr>
<td align="center">6</td>
<td>Pemalas</td>
<td align="center">-5</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>

<tr>
<td align="center">7</td>
<td>Ceroboh</td>
<td align="center">-3</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">8</td>
<td>Tinggi Hati</td>
<td align="center">-7</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>

<tr>
<td align="center">9</td>
<td>Pendendam</td>
<td align="center">-10</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>

<tr>
<td align="center">10</td>
<td>Kurang Vitamin</td>
<td align="center">-11</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>

<tbody>
<tr>
<td colspan=3 align="center"><b>Jumlah Poin</b></td>
<td align="center">27</td>
<td align="center">17</td>
<td align="center">-25</td>
<td align="center">28</td>
</tr>
</table>
<br>
<i>Source: Forbes Magazine - February. 2011 </i></br>
<br>&copy; intan </br>

</body>
</html>

>

Printscreen

TUGAS MODUL 2 PRAKTIKUM 1

Script Program

<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Grafik Penjualan </title>
</head>
<body>
<h1 align="center"> Tabel Penjualan </h1>
<table border="0" cellspacing="0">
<!--baris pertama-->
<tr>
<th >100%</th>
<th width="10" height="220" rowspan=11 bgcolor="black"></th>
<th width="20" height="20" colspan=12></th>
</tr>

<!--baris2-->
<tr>
<td>90%</td>
<td width="20" rowspan=9></td>
<td width="20" height="20"></td>
<td width="20" height="180" rowspan=9 bgcolor="green"></td>
<td width="20" rowspan=3></td>
<td width="20" rowspan=9></td>
<td width="20" rowspan=3></td>
<td width="20" rowspan=4></td>
<td width="20" rowspan=2></td>
<td width="20" rowspan=9></td>
<td width="20" rowspan=1></td>
<td width="20" rowspan=2></td>
<td width="20" rowspan=3></td>
<td width="20" rowspan=9></td>
</tr>

<!--baris ketiga-->
<tr>
<td>80%</td>
<td width="20" height="160" rowspan=8 bgcolor="red"></td>
</tr>

<!--baris 4-->
<tr>
<td>70%</td>
<td width="20" height="140" rowspan=7 bgcolor="blue"></td>
<td width="20" height="140" rowspan=7 bgcolor="red"></td>
<td width="20" height="140" rowspan=7 bgcolor="green"></td>
</tr>

<!--baris ke lima-->
<tr>
<td>60%</td>
<td width="20" height="120" rowspan=6 bgcolor="blue"></td>
<td width="20" height="120" rowspan=6 bgcolor="red"></td>
<td width="20" height="120" rowspan=6 bgcolor="blue"></td>
</tr>

<!--baris6-->
<tr>
<td> 50%</td>
<td width="20" height="100" rowspan=5 bgcolor="green"></td>
</tr>

<!--baris 7-->
<tr>
<td>40%</td>
</tr>

<!--baris 8-->
<tr>
<td>30%</td>
</tr>

<!--baris 9-->
<tr>
<td>20%</td>
</tr>

<!--baris 10-->
<tr>
<td>10%</td>
</tr>

<!--baris 11-->
<tr>
<td height="5">0</td>
<td colspan=14 bgcolor="black"></td>
</tr>


<!--baris 12-->
<tr>
<td colspan=3></td>
<td colspan=3 align="center"><b>2009</b></td>
<td></td>
<td colspan=3 align="center"><b>2010</b></td>
<td></td>
<td colspan=3 align="center"><b>2011</b></td>
</tr>
</table>

<br>
<br>

<table border="0">
<tr>
<th>Keterangan</th>
</tr>
<tr>
<td width="30" bgcolor="red"></td>
<td> : </td>
<td>Sepatu kets</td>
</tr>
<tr>
<td bgcolor="yellow"></td>
<td> : </td>
<td> Sandal <td>
</tr>

<tr>
<td bgcolor="blue"></td>
<td> : </td>
<td> Sepatu hak tinggi </td>
</tr>
</table>
</body>
</html>



 Printscreen