Senin, 19 Maret 2018

Algoritma,Flowchart dan Program HTML Sederhana


Apa itu Algoritma.?
Secara ilmu komputeralgoritme adalah prosedur langkah-demi-langkah untuk penghitungan. Algoritme digunakan untuk penghitunganpemrosesan data, dan penalaran otomatis.
contoh algoritma
·         Start
·         Menampilkan Tampilan Utama
·         if pilih = Home then
·         kembali ke Tampilan Utama
·         else if pilih = Biodata then
·         Menuju ke Tampilan Biodata
·         else if pilih = R.P(Riwayat Pendidikan) then
·         Menuju ke Tampilan Riwayat Pendidikan
·          else
·         End
·         end if

Flowchart.?
Program flowchart adalah suatu bagan dengan simbol-simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses (instruksi) dengan proses lainya dalam suatu program(Widia,1983:4).
Contoh flowchart

Source code.?
Dalam ilmu komputer source code (source) adalah kumpulan pernyataan atau deklarasi bahasa pemprograman komputer yang di tulis dan dapat di baca manusia source code memungkinkan programmer untuk berkomunikasi dengan komputer menggunakan  beberapa perintah yang telah di definisi
Contoh source code HTML
<!DOCTYPE html>
<html>
                <head>
                                <title>TUGAS PERTAMA</title>
                                <style type="text/css">
                                                header, section, footer, aside, nav, article, figure, figcaption {
                                                                display: block;}
                                                body {
                                                                color: green;
                                                                background-color: black;
                                                                background-position: center;
                                                                font-family: Georgia, Times, serif;
                                                                line-height: 1.4em;
                                                                margin: 0px;}
                                                .wrapper {
                                                                width: 870px;
                                                                margin: 20px auto 20px auto;
                                                                border: 10px solid grey;
                                                                background-color: white;}
                                                header {
                                                                height: 150px;
                                                                background-image: url("images/header.png");}
                                                h1 {
                                                                text-indent: -9999px;
                                                                width: 100px;
                                                                height: 130px;
                                                                margin: 0px;
                                                                text-align: center;}
                                                nav, footer {
                                                                clear: both;
                                                                color: #ffffff;
                                                                background-color: #aeaca8;
                                                                height: 20px;}
                                                nav ul {
                                                                margin: 0px;
                                                                padding: 5px 0px 5px 30px;}
                                                nav li {
                                                                display: inline;
                                                                margin-right: 40px;}
                                                nav li a {
                                                                color: #ffffff;}
                                                nav li a:hover, nav li a.current {
                                                                color: #000000;
                                                                text-align: center;}
                                                section.courses {
                                                                float: left;
                                                                width: 300px;
                                                                border-right: 15px solid #eeeeee;}
                                                article {
                                                                clear: both;
                                                                overflow: auto;
                                                                width: 100%;
                                                                text-align: center;}
                                                hgroup {
                                                                margin-top: 0px;
                                                                text-align: center;}
                                                figure {
                                                                float: center;
                                                                width: 229px;
                                                                height: 242px;
                                                                padding: 2px;
                                                                margin: 40px;
                                                                border: 1px solid #eeeeee;}
                                                figcaption {
                                                                font-size: 50%;
                                                                text-align: center;}
                                </style>
                                <!--[if lt IE 9]>
                                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                                <![endif]-->
                </head>
                <body>
                                <div class="wrapper">
                                                <header>
                                                                <h1>BIODATA</h1>
                                                                <nav>
                                                                                <ul>
                                                                                                <li><a href="" class="current">Beranda</a></li>
                                                                                                <li><a href="">Profil</a></li>
                                                                                </ul>
                                                                </nav>
                                                </header>
                                                <section class="courses">
                                                                                <figure>
                                                                                                <img src="images/y.png" alt="ady" />
                                                                                                <figcaption>adi inraguna</figcaption>
                                                                                </figure>
                                                                <article>
                                                                                <hgroup>
                                                                                                <h2>PROFIL DIRI</h2>
                                                                                </hgroup>
                                                                                <p>NAMA                            : ADI INDRAGUNA</p>
                                                                                <P>TTG                 : JAKARTA,16 FEBRUARI 1998</P>
                                                                                <P>AGAMA         : ISLAM</P>
                                                                                <p>WARGA NEGARA      : INDONESIA</p>
                                                                                <p>                         </p>
                                                                                <p>                         </p>
                                                                                <hgroup>
                                                                                <h2>KONTAK</h2>
                                                                                </hgroup>
                                                                                <p>RUMAH   : BEKASI BARAT</P>
                                                                                <p>EMAIL           : adindraguna16@gmail.com</p>
                                                                                <p>telpon              :089504502362</p>
                                                                                <p>instagram       :@indragunadi</p>
                                                                </article>   
                                                </section>
                                                <aside>
                                                <hgroup>
                                                                                <h2>RIWAYAT BELAJAR</h2>
                                                </hgroup>
                                                                                <p>1.  SDN 01 Malangbong (2010)</P>
                                                                                <p>2.  SMPN 01 Malangbong (2013)</p>
                                                                                <p>3.  SMAN 09 Garut (2016)</p>
                                                                                <p>4.  UNIVERSITAS GUNADARMA</p>
                                                <hgroup>
                                                                                <h2>PENGALAMAN BEKERJA</h2>
                                                </hgroup>
                                                                                <p>Kantor 1 : notaris CV. NATIONAL ELETRONIK SERVICE</P>
                                                                                <p>Kantor 2 : notaris CV. IWUNG LIGAR</p>
                                                <hgroup>
                                                                                <h2>HOBI</h2>
                                                </hgroup>
                                                                                <p>Futsal</P>
                                                                                <p>Renang</p>
                                                                                <p>Olahraga</p>
                                                </aside>
                                                <footer>
                                                                &copy; ADI INDRAGUNA
                                                </footer>
                                </div><!-- .wrapper -->
                </body>
</html>

Berikut adalah hasil dari source code tersebut adalah
·         Untuk hasil dari header nya adalah


·         Dan penyimpanan artikel





Referensi :
http://umardanny.com/contoh-flowchart-program-sistem-pakar/
https://id.wikipedia.org/wiki/Algoritme/
https://id.wikipedia.org/wiki/source code/

1 komentar: