Scribd Logo
Unggah

Selamat datang di Scribd!

  • OPTIMASI HTML

    Diunggah oleh

    Zaenal Arifin
    12 tayangan18 halaman
    Dokumen tersebut membahas tentang dasar-dasar pembuatan kerangka web (website) menggunakan bahasa markup Hypertext Markup Language (HTML). HTML digunakan untuk menampilkan informasi dengan menggunakan elemen-elemen yang disebut tag. Terdapat tiga bagian utama pada struktur HTML yaitu tag pembuka dan penutup <html>, tag header <head> dan tag badan <body>.

    Deskripsi Asli:

    Judul Asli

    32_Zaenal arifin_Tugas Laporan

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen tersebut membahas tentang dasar-dasar pembuatan kerangka web (website) menggunakan bahasa markup Hypertext Markup Language (HTML). HTML digunakan untuk menampilkan informasi dengan menggunakan elemen-elemen yang disebut tag. Terdapat tiga bagian utama pada struktur HTML yaitu tag pembuka dan penutup <html>, tag header <head> dan tag badan <body>.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    12 tayangan18 halaman

    OPTIMASI HTML

    Diunggah oleh

    Zaenal Arifin
    Dokumen tersebut membahas tentang dasar-dasar pembuatan kerangka web (website) menggunakan bahasa markup Hypertext Markup Language (HTML). HTML digunakan untuk menampilkan informasi dengan menggunakan elemen-elemen yang disebut tag. Terdapat tiga bagian utama pada struktur HTML yaitu tag pembuka dan penutup <html>, tag header <head> dan tag badan <body>.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 18

    PEMBUATAN KERANGKA WEB DENGAN HTML

    A. DASAR TEORI

    1. Hypertext Markup Language


    (HTML)
    HyperText Markup Language (HTML) pada dasarnya adalah teks, akan tetapi dengan
    penambahan “tanda”-link, teks yang tertulis akan nampak dengan bentuk yang
    berbeda. Kemampuan ini menyebabkan teks jenis ini termasuk HyperText.

    Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan


    informasi. Informasi yang akan ditampilkan dibungkus dengan elemen bernama tag.
    Ciri khas tag adalah penggunaan tanda „ <> „.

    Mark up adalah informasi tambahan yang ditempatkan pada teks untuk menjelaskan
    bagaimana teks tersebut diinterpretasi . Mark up ditambahkan bukan untuk tampilan
    tetapi untuk memberikan struktur interpretasi/pemberian arti. HTML (HyperText
    Markup Language) merupakan subset dari SGML (Standard Generalized Markup
    Language) Contoh subset lain dari SGML :

    XML (eXtensible Markup Language)

    SMIL (Synchronized Multimedia Integration Language)

    MathML (Mathematical Markup


    Language) CML (Chemical Markup
    Language)

    2. Struktur HTML
    Baris perintah dalam HTML disebut TAG(<>). Semua baris perintah HTML
    menggunakan TAG untuk membuat tampilan.

    Terdapat 3 tipe tag

    Tag buka tutup

    Tag tunggal

    Tag mengandung
    propertis Bagian HTML, terdapat tiga
    bagian utama:

    <HTML> ... </HTML>


    <HEAD> …. </HEAD>

    <BODY> ... </BODY>

    a. HTML
    Sintak pertama biasanya adalah

    <!DOCTYPE HTML>,

    Setiap document HTML harus di awali dan di tutup dengan tag HTML, untuk

    menunjukkan sebuah dokumen HTML


    <HTML></HTML>

    b. HEAD
    Sintak HEAD berisi informasi tentang dokumen di page tersebut.

    Menggunakan tag <HEAD></HEAD>. HEAD=Header. Komponen dalam HEAD: •


    <BASE> - base address dari document • contoh :

    • <BASE HREF="http://www.smkn2solo.online/"> , artinya


    www.smkn2solo.online adalah path/ jalur navigasi dari webpage ini.
    • <BASE HREF="http://www.smkn2solo.online/"> , artinya
    www.smkn2solo.online adalah path dari webpage ini.
    • <BASE HREF="http://www.smkn2solo.online/"> , artinya
    www.smkn2solo.online adalah path dari webpage ini.
    • <BASEFONT> - mendefinisikan font tunggal standart dari webpage
    • memiliki properties color(warna font), face(jenis font), size(ukuran font)
    • <LINK>- membuat hubungan antar webpage
    • <META> - mendefinisikan informasi webpage yang digunakan oleh
    server/clients
    • Element META:
    • HTTP-EQUIV, untuk spesifikasi pembacaan header oleh server
    • NAME, nama informasi meta. Jika tidak disefinisikan dianggap sama dengan
    HTTP-EQUIV. Beberapa properties NAME yang sering digunakan:content-
    type, description, expires, keywords.
    • CONTENT, untuk mendefinisikan isi sesuai NAME dari META
    • <NEXTID>- membuat identifikasi dari webpage
    • <STYLE> - Document tambahan yang berisi style dari document
    • <TITLE>- menampilkan judul webpage

    c. BODY
    Dinyatakan dengan <body> </body>. Untuk meletakkan informasi atau berbagai
    komponen webpage yang akan ditampilkan di browser. Semua yang ingin ditampilkan
    dalam webpage, harus berada di dalam tag ini.

    Atribut dalam BODY:

    ALINK, BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, LEFTMARGIN,

    RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN, SCROLL, BGPROPERTIES

    e. <P>, PARAGRAPH
    Atribut paragraph:

    • ALIGN, mengatur perataan paragraph


    • BREAK, mengganti baris baru
    • BLOCKQUOTE, membuat baris paragraph menjorok
    B. LATIHAN : Ketik ulang, dan perbaiki apabila ditemukan kesalahan!
    Buat satu folder di drive data PC Anda untuk menyimpan data latihan dan
    namai dengan NAMA dan No Absen Anda. Buka Notepad / Sublime Text 3
    (recommended), sebagai editor awal HTML Anda

    1. Latihan1
    a. Ketik script HTML berikut

    artinya page ini akan expired pada 17 September 2022, dan tidak akan dicache.

    TIP : Untuk jalan pintas penulisan format html di text editor sublime text 3 adalah
    dengan cara mengetik teks “html” kemudian tekan TAB pada keyboard.

    b. Simpan dalam folder anda dengan nama latihan1a.html


    c. Buka di browser, perhatikan hasil tampilannya
    *) Tampilan setelah dizoom 150%

    d. Tambahkan script pada head yang memuat nama deskripsi = “Latihan


    membuat

    Website” dan keywords = “html, tkj, smkn2, desain, web” .

    e. Simpan dengan nama latihan1b.html lalu browse, perhatikan apakah hasilnya


    sama dengan sebelumnya. Apakah fungsi sebenarnya dari kedua tag
    tersebut? Tulis jawabannya di bawah paragraph di dalam Latihan1b.html.
    2. Latihan 2
    a. Ketikkan script berikut di enclosed tag BODY
    Body mengandung attribute yang mendefinisikan warna background dan warna text default page ini

    Bantuan Untuk Dicopy : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dictum odio,
    id dictum urna. Proin scelerisque ultricies congue. Duis erat felis, fermentum at placerat vitae,
    mattis non dui. Donec vehicula sed purus eget congue. Maecenas elit tortor, ultrices non turpis
    vitae, varius fringilla augue. Curabitur lacus odio, ultricies non vulputate ac, lacinia vitae lorem. 

    b. Simpan dengan Latihan2a.html. Browse, berikut tampilannya

    c. Ganti attribute pada BODY sehingga dapat menampilkan gambar (bebas)


    dan tulisan berwarna kuning

    d. Simpan dengan nama Latihan2b.html. Browse (contoh),


    *) Tampilan Setelah dizoom 150%
    1. Latihan 3
    a. Modifikasi script Latihan3:
    Perhatikan jumlah headingnya ! Apakah sudah benar?

    b. Simpan Latihan3.html, browse

    c. Ubahlah heading di atas menjadi warna yang berbeda untuk setiap


    headingnya!
    Latihan 4
    a. Ketik kode berikut
    b. Simpan dengan Latihan4.html.
    c. Browse, berikut tampilannya

    d. “Hloh, kok gk sama?”, temukanlah apa yang membuatnya berbeda.


    Analisis dan perbaikilah!

    Anda mungkin juga menyukai