Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Sunday, December 20, 2020

Contoh Script Form dan Hyperlink HTML


 

Hai Sobat Internet

    Apa kabar kalian para calon programer ? Sudah pernah dengar Form HTML dan Hyperlink HTML belum ? kalau belum yuk ikuti terus karena Sobat Internet kali ini akan membahas sebuah materi yang mungkin bisa membantu teman-teman yag ingin belajar tentang HTML. 


Jadi apasih Form HTML ? 

    HTML Form atau Form HTML digunakan untuk memberikan data ke sebuah server. Sebuah. HTML Form dapat memiliki input – input element antara lain text field, checkbox, radiobutton, submit button dan lain-lain. Sebuah form juga dapat mengandung select lists, textarea, fieldset, legend, dan element label. HTML menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Sintaks dari penghubungan dalam HTML dengan menggunakan tag <a>, atribut href digunakan untuk mendefinisikan lokasi link. Ada beberapa jenis link, diantaranya :

- link absolut : link yang terhubung dengan jaringan internet online

- link relatif : link ke ke page lain pada komputer yang sama

- link dalam dokumen yang sama

- link ke alamat email


Ada beberapa Atribut Target ;

- target="_blank" yang berguna untuk memuat dokumen baru ke dalam window baru yang kosong

- target="_self" yang berguna untuk memuat dokumen baru ke dalam window yang sama dengan anchor(default)

- target="_top" berguna untuk memuat dokumen baru ke dalam keseluruhan window browser merupakan cara yang umu untuk keluar dari frame.

- target="_parent" yang berguna untuk memuat dokumen baru ke dalam parent frame bila menggunakan frame.


1. Contoh Script HTML membuat form dengan checkbox : 

    <!DOCTYPE html>

    <HTML>

        <HEAD> <TITLE>Checked</TITLE> </HEAD>

        <BODY>

            <FORM>

                Buah yang Anda sukai: <BR>

            <INPUT TYPE = "CHECKBOX" NAME = "anggur">Anggur<BR>

            <INPUT TYPE = "CHECKBOX" NAME = "jeruk">Jeruk<BR>

            <INPUT TYPE = "CHECKBOX" NAME = "melon" CHECKED >Melon<BR>

            </FORM>

        </BODY>

</HTML>

Simpanlah script diatas dengan nama formcheckbox.html lalu buka menggunakan web browser. 


2. Contoh Script HTML membuat form radio button flexible :

    <!DOCTYPE html>

    <HTML>

        <HEAD> <TITLE>Radio</TITLE> </HEAD>

            <BODY> <fieldset> <legend> Jenis Kelamin </legend>

                <FORM>

                    <INPUT TYPE = "RADIO" NAME = "jk" CHECKED>Pria<BR>

                    <INPUT TYPE = "RADIO" NAME = "jk">Wanita<BR>

                </FORM>

            </fieldset>

           </BODY>

</HTML>

Simpah Script diatas dengan nama formradio.html lalu jalankan menggunakan web browser. 


3, Contoh script membuat form hyperlink abslout :

    <!DOCTYPE html>

    <Html>

        <Head> <Title>Link Absolute </Title> </Head>

            <Body>

            <p> Apabila Anda ingin melihat apakah Operating System

                Windows terregistrasi atau tidak,

                   Anda dapat mengakses

            <a href="http://www.microsoft.com">Situsnya Microsoft</a>.

            </Body>

</Html>

Simpan dengan nama formabsolut.html dan jalankan menggunakan web browser. 


4. Contoh Script HTML Hyperlink ke alamat email :

    <!DOCTYPE html>

    <html>

        <body>

            <form action="mailto:setiyanugroho@gmail.com?                            subject=Web%20Programming

             %20kelas..." method="post" enctype="text/plain">

        <h2>Form ini mengirim sebuah e-mail ke W3C.</h3>

        Nama<br>

        <input type="text" name="Nama" value="Setiya Nugroho"

        size="20"> <br>

        NPM:<br>

        <input type="text" name="NIM" value="0123456789"

            size="20"> <br>

            Tugas:<br>

        <input type="text" name="Tugas" value="Tugas Modul 4"

        size="40"> <br><br>

        <input type="submit" value="Send">

        <input type="reset" value="Reset">

        </form>

    </body>

</html>

Lalu simpan dengan nama hyperlinkemail.html dan silahkan coba jalankan menggunakan web browser.



    Jadi itu beberapa contoh tentang hyperlink HTML dan form HTML yang bisa kalian coba . Jangan malah ngoding ya teman-teman hehehe . Ayo semangatttttt calon proggramer !



#contohscriptHTML #scripthtml #scripthyperlinkHTML #contohscript #pengertianformHTML #pengertianhyperlinkhtml #contohscriptproggramhtml 

Friday, December 18, 2020

WEB Programming dengan HTML

 


Hai SOBAT INTERNET , kali ini kami akan memberi sedikit materi tentang Pemograman menggunakan HTML , untuk kalian yang masih kuliah di Teknik Informatika pasti ada materi tentang HTML . Yuk kenali lebih dekat dengan HTML 

Mari Mengenal lebih dekat dengan HTML 

1. Pengertian web

Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai

komputer yang terhubung ke internet, yang dapat memudahkan pengguna

komputer untuk berinteraksi dengan pengguna internet lainnya dan mencari

informasi yang diperlukan.

2. Web browser

Browser web merupakan software yang digunakan untuk menampilkan informasi

dari server web. Contoh dari web browser : Opera, Mozzila, Netscape Navigator,

Internet Explorer, Lynx, Konqueror.

3. Server Web

Server web adalah komputer yang digunakan untuk menyimpan dokumendokumen

web, komputer ini akan melayani permintaan dokumen web dari

kliennya.Contoh dari web server : IIS, PWS, Apache, Xitami.

4. HTML

HTML adalah salah satu yang memerintahkan bahasa pemrograman web desain

juga biasa disebut script untuk menyusun dokumen-dokumen web.

Dalam pemrograman web, diperlukan suatu file teks yang bernama atau

berekstensi HTML (Hypertext Markup Language). Ada dua cara untuk membuat

sebuah web page:

-  dengan menggunakan editor teks biasa (notepad, editplus)

-  dengan HTML Editor.


Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table, paragraf

dan list. Untuk menandai berbgai elemen dalam suatu dokumen HTML, kita

menggunakan tag.


Tag HTML terdiri atas sebuah kurung sudut kiri (<, lebih kecil), sebuah nama tag,

dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya

berpasangan, misalkan tag awal <H1> berpasangan dengan tag akhir </H1>. 

Struktur Dokumen HTML :


Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan

dengan tag <html>, <head>, dan <body> berikut tag-tag pasangannya. Setiap

dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang

dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun

dari link, grafis, paragraf dan elemen lainnya.

Berikut ini adalah pola dasar sebuah dokumen HTML :

    <html>

    <head>

    …. Informasi tentang dokumen HTML.

    </head>

    <body>

    …. Informasi tentang yang akan ditampilkan dalam browser web.

    </body>

    </html>

-  Tag

Adalah teks khusus (markup) yang berupa suatu pasangan yang terdiri 2

bagian yang disebut dengan tag awal dan tag akhir.

Tag awal dinyatakan dalam bentuk <nama tag> dan tag akhir dinyatakan

dalam bentuk </nama tag> sebagai penutup isi dokumen html.

-  Element

Adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.

Elemen tidak hanya berisi text, namun juga bisa tag lain.

-  Atribut

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini

bisa berupa instruksi untuk warna dari text, besar huruf dari text.

Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan

name=”value”. Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua

(“).

-  Komentar

Seperti dalam bahasa pemrograman yang lainnya, HTML juga memiliki

komentar yang dapat digunakan untuk menjelaskan bagian-bagian dari isi

web dokumen. Penulisan komentar dalam HTML sebagai berikut:

<!- –

Isi komentar

–>


Contoh pemograman dengan HTML yang simpel

Buka aplikasi editor (notepad++ atau sublime text)

- Ketikkan script berikut :

        <!DOCTYPE html>

        <html>

        <head>

        <title> Dokumen HTML </title>

        </head>

        <BODY bgcolor="skyblue"> 

        ini adalah sebuah dokumen HTML dengan judul

        "Dokumen HTML" dan warna background biru langit.

        </body>

        </html>

-  Simpan dengan nama dokumen.html

-  Buka file yang disimpan menggunakan browser dan lihatlah hasilnya 


Selamat Mencoba :)




#programHTML #programsimpel #pemogramanC++ #HTML #pengertianHTML #IntiHTML #internet #TagpadaHTML #pengertianElemenHTML #belajarpemograman #bahasapemograman