Skip to main content

Pemformatan Teks dan Paragraf Web pada HTML - P1-P3

Pemformatan Teks dan Paragraf Web
Sesi 3

Pada kesempatan ini saya akan menampilkan beberapa Program HTML:


1. Format Teks.html:


Dan ini hasilnya:


Ini Source Codenya:

        
<html>
      <head>
   <title>Format Teks</title>
   </head>
<center>
     <pre>
     ----------Muhamad Alfi Rizqi----------
     ----------     XI RPL 1     ----------
     </pre>
   <body>
      <p>
       <b>Tulisan ini ditebalkan</b>
   </p>
   <p>
          <strong>Tulisan ini ditebalkan(strong)</strong>
    </p>
    <p>
         <em>Tulisan ini miring (emphasize)</em>
    </p>

2.Format Teks bagian dua.html:



Hasilnya:


Source Code HTML:



<p>
    <big>Tulisan ini besar(big)</big>
</p>
<center>
     <pre>
     ----------Muhamad Alfi Rizqi----------
     ----------     XI RPL 1     ----------
     </pre>
<p>
    <i>Tulisan ini miring(italic)</i>
</p>
 <p>Tulisan ini<sub>subscript</sub>
  </p>
  <p>Tulisan ini<sup>supercript</sup>
   </p>
</body>
</html

3.PreFormat.html:


hasilnya:


Source Code HTML:


<html>
       <head>
    <title>Preformat</title>
    </head>
    <center>
     <pre>
     ----------Muhamad Alfi Rizqi----------
     ----------     XI RPL 1     ----------
     </pre>
<body>
      <H2>Daftar harga keladi:</h2>
         <pre>
   Red Flash...........35.000
   Red Fire............60.000
   Fannie Maunson......60.000
   </pre>
   Harga sewaktu waktu bisa berubah.
   </body>
</html>

4.PreFormat bagian 2:


Hasilnya:


Source Code:




<html>
     <head>
     <title>Tag Preformatted</title>
     </head>
<center>
     <pre>
     ----------Muhamad Alfi Rizqi----------
     ----------     XI RPL 1     ----------
     </pre>
<body>
     <pre>
     This section provides a brief overview of the menus in Dreamweaver.
     The File menu and Edit menu contain the standard menu items for File and Edit
     menus, such as New, Open, Save, Save All, Cut, Copy, Paste, 
     Undo,and Redo
     </pre>
     <pre>
     Ini adalah
     preformatted text.
     Menampilkan spasi
     Dan line break apa adanya.
     s e s u a i
     </pre>
     <p>Tag PRE cocok digunakan untuk menampilkan kode bahasa
     pemrograman komputer :</p>
     <pre>
     for i = 1 to 10
     print i
     next i
     </pre>
</body>
</html>

5.Quotation:


Hasilnya:


Source Code HTML:



<html>
     <head>
  <title>quotation</title>
  </head>
  <center>
     <pre>
     ----------Muhamad Alfi Rizqi----------
     ----------     XI RPL 1     ----------
     </pre>
<body>
     tulisan ini BUKAN quotation
  
  
  <blockquote>
  tulisan ini adalah quotation <br>
  tulisan ini adalah quotation <br>
  tulisan ini adalah quotation <br>
  </blockquote>
</body>
</html>

6.Raspberry Bakewell Cake:


Hasilnya:

Source Code HTML:



<html>
<head><title> Raspberry Bakewell cake </title>
</head>
<center>
     <pre>
     ----------Muhamad Alfi Rizqi----------
     ----------     XI RPL 1     ----------
     </pre>
<body bgcolor="BlanchedAlmond">
<center>
<font face="Lucida Handwriting" color="IndianRed"><h1>Raspberry Bakewell cake
</h1></font>
<h2>This simple almondy cake is a great way of using up pick-your-own raspberries
</h2></center>
<blockquote>
<p>
<b>Method</b><br><b>1</b><br>
Heat oven to 180C/160C fan/gas 4 and base-line and grease a deep 20cm loose-bottomed
cake tin. Blitz the ground almonds, butter, sugar, flour, eggs and vanilla extract
in a food processor until well combined.
</p>
<p><b>2</b><br>
Heat oven to 180C/160C fan/gas 4 and base-line and grease a deep 20cm loose-bottomed
cake tin. Blitz the ground almonds, butter, sugar, flour, eggs and vanilla extract
in a food processor until well combined.
</p></blockquote>
</body>
</html>

7.Crispy and Creamy Doughnut:


Hasilnya:


Source Code HTML:


<html>
      <head><title> Crispy and Creamy Doughnuts </title>
      </head>
           <center>
     <pre>
     ----------Muhamad Alfi Rizqi----------
     ----------     XI RPL 1     ----------
     </pre>
     <body bgcolor="PowderBlue">
            <center>
             <img width: "250px" src="gambarku/donat.jpg" />
              <font face="Corbel"><h1>Crispy and Creamy Doughnuts</h1></font>
           <p>
              <b>Method</b><br><b>1</b><br>
  <font color="SlateBlue" />
In a large bowl, mix together the yeast mixture, milk, sugar, salt, eggs, shortening,
and 2 cups of the flour. Mix for a few minutes at low speed, or stirring with a
wooden spoon. Beat in remaining flour 1/2 cup at a time, until the dough no longer
sticks to the bowl. Knead for about 5 minutes, or until smooth and elastic. Place the
dough into a greased bowl, and cover. Set in a warm place to rise until double. Dough
is ready if you touch it, and the indention remains.
          </p>
          </body>
</html>

Comments

Post a Comment

Popular posts from this blog

Membuat Anak Tangga menggunakan PHP - P24

Cara Membuat Anak Tangga menggunakan Array 2 Dimensi & Looping  Kali ini saya akan menunjukan kepada kalian cara membuat Anak Tangga di PHP menggunakan Array 2 dimensi & Looping dengan menyesuaikan Input dan pilihan warna dari User. Semoga bermanfaat~ <?php error_reporting ( 0 ); $jumlah = $_POST [ 'anakTangga' ]; $warna = $_POST [ 'warnaTangga' ]; for ( $i = 0 ; $i < $jumlah ; $i ++) { for ( $j = 0 ; $j < $i ; $j ++) { echo "<div class='kotak' style='background-color:$warna'></div>" ; } echo "<div class='kotak' style='background-color:$warna'></div><br>" ; } ?> Dan ini hasilnya Keterangan: Bahwa dalam menggunakan Array 2 Dimensi & Looping akan terus menerus mengulang sesuai dengan Input User <!DOCTYPE html> <html> <head> <title> Tangga Berwarna </title> </head> &
Post a Comment
Read more

Komponen Audio,Video & Flash - P7

Menyediakan komponen, Audio, Video & Flash Format Tampilan Video Kita dapat menampilkan format audio pada halaman web, untuk menampilkannya dapat digunakan format seperti ini  Hasilnya: Source Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> cek video </title> </head> <body> <video width= "999" height= "540" controls poster= "gambarku/cute-030.jpg" > <source src= "This Is Me.mkv" type= "video/mp4" > browser anda tidak mendukung format video ini </video> </body> </html> Format Tampilan Audio  Hasilnya: Format Tampilan Flash 1 2 3 4 5 6 7 8 <html> <head> <title> Animasi </title> </head> <body> <embed src= "media/Strong.swf" > </body> </html> Hasilnya: Aud
4 comments
Read more

List dan List Kombinasi - P4

Pemrograman Web-List Jenis List Ada 3 Macam Listing di HTML diantaranya: 1. Ordered List: Sebagai Penanda secara Terurut 2. Unordered List: Untuk membuat Penanda secara Tak Terurut 3. Definiton List: Sebagai Daftar Definisi Untuk Ordered List biasanya menggunakan angka 1,2,3 atau huruf Romawi I,II,III. Juga dengan Alfabet a,b,c,d atahupun dengan huruf "i"(i,ii,iii).Ordered List ini cocok sebagai urutan, Membuat Teks Prosedur untuk membuat sesuatu seperti langkah langkah,Komposisi makanan,Cara membuat,dan lain sebagainya. Ordered List: Ordered List perlu memakai Tag <ol>bdi bagian awal dan Tag</ol> di bagian akhir. Dan kita huga harus menambahkan Tag<ii> dan </ii> di bagian yang diberi Tanda. Contoh Penulisan Ordered List: <ol> <li> Urutan Pertama </li> <li> Urutan Kedua </li> </ol> Itu adalah contoh penulisan Ordered List.Ordered List bisa ditampilkan dengan huruf, angka, angka Romaw
Post a Comment
Read more