Struktur Dasar HTML

Seperti yang sudah kita ketahui HTML merupakan format tampilan untuk sebuah website. Kali ini kita akan membahas tentang struktur dasar HTML. Didalam struktur HTML memiliki elemen dan atribut yang cukup banyak dan elemen tersebut ditutup oleh tag. Apa sih tag dan elemen-elemen yang terdapat di HTML, mari kita bahas.
  1. Tag HTML
    2. Tag HTML adalah sebuah teks khusus berupa dua karakter "<" dan ">", sebagai contoh <font> adalah tag dengan nama font. Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"). Misalkan <font> ini adalah tag pembuka dan </font> ini disebut sebagai tag penutup.

    Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
    contoh penulisan tag HTML yang benar
    <p>
    <i>
     .....................
    </i>

    </p>

    contoh penulisan tag HTML yang salah
    <p>
    <i>
     .....................
    </p>

    </i>

  2. Element HTML
    3. Element HTML terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh element title berikut ini:
    <title>
         Judul Dokumen HTML #ini adalah judul dokumen html

    </title>

    Macam-macam element HTML
    a. Element HTML
        Element yang menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
        Sintaks:
        <html>
         .........................
        </html>

    b. Element Head
        Yaitu kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html dan tag </html>
        Sintaks:
        <html>
        <head>
                 ...............
        </head>
        </html>
    c. Element Title
        Yaitu judul dari dokumen HTML. Tag <title> dan tag </title> terletak di antara tag <head dan tag </head>
        Sintaks:
        <html>
        <head>
                    <title>
                         ...............
                    </title>
        </head>
        </html>

    d. Element Body
        Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.
         Sintaks:
        <html>
        <head>
                    <title>
                     
                    </title>
        </head>

        <body text="v" bgcolor="w" background="uri">
          .............................
        </body>

        </html>

    e. Element Paragraf

  3. Attribute
    4. Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. secara umum nilai attribute harus berada dalam tanda etik satu atau dua. sebagai contoh membuat teks menjadi warna hijau dan latar belakang halaman web menjadi kuning, penulisannya adalah sebagai berikut:

    <body bgcolor=”yellow” text=”green”> Text </body>

    penjelasan:
    - attribute bgcolor sebagai attribute warna latarbelakang atau background.
    - attribute text sebagai attribute warna pada text.







Comments

Post a Comment

Popular posts from this blog

Belajar UML (Unified Modeling Language)

Image
Bagi kawan-kawan yang baru dan sedang belajar mengenai model pengembangan perangkat lunak pasti mendengar istilah UML. Apa sih yang dimaksud UML itu ?. Berbeda dengan DFD ( Data Flow Diagram ) yang digunakan untuk memodelkan perangkat lunak yang menggunakan pemrograman prosedural atau struktural. UML ( Unified Modeling Language ) adalah model pengembangan perangkat lunak yang nantinya akan diimplementasikan menggunakan bahasa pemrograman berorientasi objek. UML digunakan untuk merancang, membangun, mendeskripsikan, menggambarkan dan merancang sistem perangkat lunak. Pada pemodelan UML terdiri dari 13 macam diagram yang dikelompokan menjadi tiga kategori. Untuk lebih jelasnya mengenai pembagian kategori diagram UML dapat dilihat pada Gambar 1. Gambar 1. Diagram UML Structure Diagrams, yaitu kumpulan-kumpulan diagram yang digunakan untuk memodelkan atau menggambarkan suatu struktur statis. Behavior Diagrams, yaitu kumpulan diagram yang digunakan untuk menggambarkan rangkaia
Read more

Cara Menambahkan Keterangan (Caption) Pada Gambar, Grafik, Tabel Di Microsoft Word

Image
Di Microsoft Word terdapat fungsi caption yang berfungsi untuk menambahkan sebuah keterangan pada gambar. Tidak hanya gambar fungsi caption juga dapat menambahkan keterangan pada tabel, grafik yang ditampilkan oleh penulis sehingga para pembaca yang melihat gambar dapat mengerti dan memahami informasi yang ada pada gambar tersebut. Biasanya sebagian dari kita pernah menambahkan keterangan pada gambar secara manual yaitu dengan menulisnya langsung dibawah gambar, tabel, maupun grafik. Dengan cara manual tersebut memiliki banyak kekurangan yaitu kita nantinya akan kesulitan membuat daftar gambar, tabel ataupun grafik. Karena dalam pembuatan daftar gambar otomatis perlu membutuhkan fungsi caption. Untuk lebih jelasnya tentang menambahkan caption dapat mengikuti langkah-langkah berikut. Yang pertama tambahkan file gambar, grafik, maupun tabel yang ingin ditambahkan caption atau keterangan dibawahnya. Lalu klik pada gambar sehingga gambar tersebut ter-blok seperti Gambar 1 berik
Read more

Cara Membuat Kop Surat Dengan Benar

Image
Surat resmi pasti menggunakan yang namanya kop surat atau bisa juga disebut kepala surat. Kop surat adalah identitas dari sebuah organisasi, instansi, ataupun perusahaan yang mengirim surat. Kop surat ini terletak pada bagian atas dari sebuah surat biasa disebut kepala surat. Kop surat biasanya  tentang identitas yang terdiri dari nama organisasi, alamat lengkap, email, dan situs web.  Bagaimana cara membuat kop surat dengan benar ? Mari ikuti cara membuat kop surat berikut: Buka dokumen baru pada microsoft word Pada  menu tab view pastikan mode views dalam bentuk Print Layout. Gambar Menu Layout Setelah itu kita Double Click atau klik ganda pada header bagian atas dokumen. Gambar Header Selanjutnya geser margin kiri anda sedikit ke tengah atau sesuaikan perkiraan ukuran logo kop surat. Saya menggesernya ke angka 3. Gambar Margin Header Ketik isi kepala surat seperti nama, alamat, email lembaga, instansi anda pada header tersebut. Gam
Read more