. .

WEB DESIGN : HTML Tags, Simpan Dan Melihat Web Pages

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Sabtu, Desember 24, 2016 No comments

Sebelum lanjutkan pembelajaran ini, perlu diketahui bacalah dulu artikel pembelajaran sebelumnya dan kuasai pengenalan pengetahuan dasar di :
WEB PROGRAMMING
  1. PEMROGRAMAN WEB
  2. WEB DESIGN
  3. MEMULAI BELAJAR WEB PROGRAMMING
  4. Memulai Membangun WEBSITE Dengan HTML - Panduan Bagi Pemula
HTML Tags
HTML ditulis dalam sesuatu yang disebut tag. Tags datang berpasangan, pembukaan dan penutupan. Pasangan pertama tags kita akan ditulis adalah tag HTML sendiri. Kita menempatkan satu tag HTML di atas (pembuka), dan satu di bagian bawah (penutup):
<HTML>     atau   <html>        //Tag pembuka
|
|
|
|
|
|
|
</HTML>    atau   </html>       //Tag penutup
Kode ini memberitahu browser seperti Internet Explorer atau Firefox bahwa kode adalah HyperText Markup Language. Dua hal untuk bisa dilihat di sini. Satu, bahwa HTML kata dikelilingi oleh sudut kurung dan dua bahwa Tag dan Tag kedua memiliki garis miring sebelum HTML. Semua tag harus dikelilingi oleh kurung sudut <>. Ini memberitahu browser bahwa ada beberapa kode HTML yang perlu di eksekusi, dan bahwa tidak akan ditampilkan di halaman web. Melewatkan braket sudut satu saja benar-benar dapat mengacaukan halaman web //ERROR. Jadi menambahkan dua tag ke editor teks dan itu akan terlihat seperti ini :
Tag pertama memberitahu browser untuk mulai melakukan sesuatu; tag kedua memberitahu browser untuk berhenti melakukannya. Sebagai simbol STOP adalah bahwa tanda garis miring diawal Tag penutup.

Pasangan tag berikutnya adalah tag HEAD: Mereka berada diantara dua tag HTML:
<HTML>     atau   <html>        //Tag pembuka
    <HEAD>
|
|
|
|
|
    </HEAD>
</HTML>    atau   </html>       //Tag penutup
Sekali lagi, perhatikan bahwa kedua tag <HEAD> dikelilingi oleh kurung sudut, dan ada garis miring sebelum yang terakhir </ HEAD>.

Bagian HEAD dalam halaman HTML adalah tempat kita meletakkan petunjuk khusus untuk browser. Browser kita tidak akan mencetak langsung ke halaman web ketika hal-hal dimasukkan ke dalam bagian HEAD. Misalnya, jika kita ingin menampilkan kata-kata 'Hello World' pada halaman kita, dan kita mengetik mereka di antara dua tag HEAD, maka Browser akan hanya mengabaikan mereka. Itu karena 'Hello World' adalah teks langsung, dan bukan instruksi khusus yang browser dapat memahami.
Sebuah instruksi khusus browser kita dapat dipahami adalah tag TITLE:
<HTML>     atau   <html>        //Tag pembuka
    <HEAD>
                  <TITLE>MyFamily</TITLE>
|
|
|
|
    </HEAD>
</HTML>    atau   </html>       //Tag penutup

TITLE tag selalu berada di bagian HEAD dari kerangka HTML. Tag TITLE disini belum berbuat banyak. Dan itu pasti membingungkan nama halaman web kita. Jika kita menyimpan halaman web kita sebagai MyFamily.html maka yang akan memiliki bantalan pada atau hubungan dengan tag TITLE. Apa pun yang kita ketik antara dua tag TITLE adalah apa yang muncul di bagian paling atas jendela browser kita. 

DOCTYPE
Salah satu tag khusus DOCTYPE. Ini bukan tag HTML, tetapi instruksi untuk browser tentang versi HTML diperbolehkan. Dalam versi HTML sebelum HTML 5 penulisan DOCTYPE bisa sangat berantakan. Tetapi di HTML 5, cukup seperti ini saja:
<!DOCTYPE HTML>
<HTML>     atau   <html>        //Tag pembuka
    <HEAD>
                  <TITLE>My First Page</TITLE>
   </HEAD>
<BODY>
|
|
|
|
|
</BODY>
    </HEAD>
</HTML>    atau   </html>       //Tag penutup

Dan yang paling penting bagian, dari kerangka HTML adalah bagian BODY.
<HTML>     atau   <html>        //Tag pembuka
    <HEAD>
                  <TITLE>My First Page</TITLE>
   </HEAD>
<BODY>
|
|
|
|
|
</BODY>
    </HEAD>
</HTML>    atau   </html>       //Tag penutup

Di antara kedua tag BODY adalah di mana kita akan menulis sebagian besar kode HTML. Pikirkan BODY sebagai halaman putih di Word Processing. Ketika kita mengetik sesuatu di software pengolah kata, itu segera ditampilkan. Demikian pula, ketika kita mengetik sesuatu di antara kedua tag BODY dan kemudian melihat hasil dalam browser, apapun yang kita ketik akan ditampilkan. Selama itu bukan tag, browser kita akan mencoba untuk menampilkannya untuk kita. Jadi ingat: jika kita ingin orang melihat apa yang kita ketik, meletakkannya di antara tag BODY.

Perhatikan bahwa kita telah menambahkan beberapa teks antara dua tag TITLE: My First Page. Kita juga telah menggunakan Indentasi, tapi ini hanya untuk dibaca: Indentasi tidak memiliki efek pada hasil.
Jadi ingat: jika kita ingin orang melihat apa yang kita ketik, meletakkannya di antara tag BODY.
Coba tulis beberapa kalimat artikel pada editor text seperti ini :
<!DOCTYPE HTML>
<HTML>            
    <HEAD>
                  <TITLE>My First Page</TITLE>
   </HEAD>
<BODY>
         <Article>
<p>Apakah Lorem Ipsum itu?</p>
<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</p>
         <p>Dari mana asalnya?</p>
         <p>Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun. Richard McClintock, seorang professor Bahasa Latin dari Hampden-Sidney College di Virginia, mencoba mencari makna salah satu kata latin yang dianggap paling tidak jelas, yakni consectetur, yang diambil dari salah satu bagian Lorem Ipsum. Setelah ia mencari maknanya di di literatur klasik, ia mendapatkan sebuah sumber yang tidak bisa diragukan. Lorem Ipsum berasal dari bagian 1.10.32 dan 1.10.33 dari naskah "de Finibus Bonorum et Malorum" (Sisi Ekstrim dari Kebaikan dan Kejahatan) karya Cicero, yang ditulis pada tahun 45 sebelum masehi. BUku ini adalah risalah dari teori etika yang sangat terkenal pada masa Renaissance. Baris pertama dari Lorem Ipsum, "Lorem ipsum dolor sit amet..", berasal dari sebuah baris di bagian 1.10.32. Bagian standar dari teks Lorem Ipsum yang digunakan sejak tahun 1500an kini di reproduksi kembali di bawah ini untuk mereka yang tertarik. Bagian 1.10.32 dan 1.10.33 dari "de Finibus Bonorum et Malorum" karya Cicero juga di reproduksi persis seperti bentuk aslinya, diikuti oleh versi bahasa Inggris yang berasal dari terjemahan tahun 1914 oleh H. Rackham.</p>
<p>Mengapa kita menggunakannya?</p>
<p>Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti "Bagian isi disini, bagian isi disini", sehingga ia seolah menjadi naskah Inggris yang bisa dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum sebagai contoh teks. Karenanya pencarian terhadap kalimat "Lorem Ipsum" akan berujung pada banyak situs web yang masih dalam tahap pengembangan. Berbagai versi juga telah berubah dari tahun ke tahun, kadang karena tidak sengaja, kadang karena disengaja (misalnya karena dimasukkan unsur humor atau semacamnya)</p>
<p>Dari mana saya bisa mendapatkannya?</p>
<p>Ada banyak variasi tulisan Lorem Ipsum yang tersedia, tapi kebanyakan sudah mengalami perubahan bentuk, entah karena unsur humor atau kalimat yang diacak hingga nampak sangat tidak masuk akal. Jika anda ingin menggunakan tulisan Lorem Ipsum, anda harus yakin tidak ada bagian yang memalukan yang tersembunyi di tengah naskah tersebut. Semua generator Lorem Ipsum di internet cenderung untuk mengulang bagian-bagian tertentu. Karena itu inilah generator pertama yang sebenarnya di internet. Ia menggunakan kamus perbendaharaan yang terdiri dari 200 kata Latin, yang digabung dengan banyak contoh struktur kalimat untuk menghasilkan Lorem Ipsun yang nampak masuk akal. Karena itu Lorem Ipsun yang dihasilkan akan selalu bebas dari pengulangan, unsur humor yang sengaja dimasukkan, kata yang tidak sesuai dengan karakteristiknya dan lain sebagainya.</p>
</Article>

</BODY>
    </HEAD>
</HTML>    
Dan Run pada jendela browser kita (perlu di ingat saya menggunakan editor text Notepad++ dan Browser Google Chrome, berbeda text editor dan browser bukan masalah yang serius) :
Hasilnya pada jendela Browser :

Menyimpan Web Pages,
Untuk menyimpan kode Anda sebagai halaman web, klik menu File di bagian atas Notepad++ (atau Teks apapun Editor kita gunakan.) Dari menu File, pilih Save As. Simpan di kotak dialog yang muncul, kita menciptakan folder baru untuk menyimpan semua halaman web kita dan disebut folder HTML, karena file apapun (image, css, javascript, html, htm dan xml) nantinya akan kita simpan dalam folder ini, dan usahakan jangan mencampur file-file lain diluar file project web design kita ke dalam folder HTML ini.
" Simpan di kotak dialog yang muncul, kita menciptakan folder baru untuk menyimpan semua halaman web kita dan disebut folder HTML, karena file apapun (image, css, javascript, html, htm dan xml) nantinya akan kita simpan dalam folder ini, dan usahakan jangan mencampur file-file lain diluar file project web design kita ke dalam folder HTML ini. "
Catatan ekstensi standar di bagian bawah, di bawah 'Save as type' mengatakan, Text Documents (*.txt). Jika kita menyimpannya pada ekstensi .txt maka kita tidak akan memiliki halaman web, kita hanya akan memiliki file teks. Klik pada daftar drop-down dan mengubahnya ke 'All files'. Tetappi jika kita menggunakan TextEdit pada Mac. Cukup ketik Myfirstpage.html di kotak Save As. Jadi selanjutnya kita simpan file kita dengan nama firstwebpage.html.

Perhatikan bahwa kita telah menggunakan semua huruf kecil. Hal ini tidak benar-benar diperlukan, tetapi dianjurkan. Juga, cobalah untuk tidak menambahkan spasi untuk nama halaman web karena hal ini dapat menyebabkan masalah. kita dapat menggunakan garis bawah atau tanda hubung, Click Save dan kita sudah memiliki halaman HTML yang sudah bisa kita tampilkan pada jendela browser seperti yang sudah kita lakukan diatas.

Melihat web pages pada jendela browser
Untuk melihat hasil, membuka jendela explorer. Pada Windows, hal ini dilakukan dengan menekan tombol Windows dan kemudian menekan huruf E pada keyboard. Atau klik menu Start di bagian kiri bawah, dan kemudian klik pada Komputer. Pada Mac, klik ikon Finder di Dock.
Arahkan ke tempat kita menyimpan halaman HTML. Dalam kasus kami, ini adalah folder yang kita buat bernama HTML.
Pada web pages yang kita memiliki file bernama firstwebpage.html.  klik ganda file HTML dan akan diluncurkan pada browser default.

Latihan
Ubahlah tag TITLE menjadi sesuatu yang lain, selain 'My First Page'. Klik File > Save pada editor teks. Beralih kembali ke browser dan tekan F5 untuk me-refresh halaman. TITLE baru kita akan muncul di bagian atas layar dan di bagian atas tab browser.

Tags HTML secara abjad
Tag
Description
Mendefinisikan komentar
Mendefinisikan jenis dokumen
Mendefinisikan hyperlink
Mendefinisikan sebuah singkatan atau akronim
Tidak didukung di HTML5. Gunakan <abbr> gantinya.
Mendefinisikan akronim
Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
Tidak didukung di HTML5. Gunakan <embed> atau <object> gantinya.
Mendefinisikan sebuah applet tertanam
Mendefinisikan sebuah area inside sebuah image-map
Mendefinisikan sebuah artikel
Mendefinisikan konten aside dari konten halaman
Mendefinisikan konten suara
Mendefinisikan teks tebal
Menentukan basis URL / target untuk semua URL relatif dalam dokumen
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya.
Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen

Isolat bagian dari teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu
Menimpa arah teks saat ini
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya.
Mendefinisikan teks besar

Mendefinisikan bagian yang dikutip dari sumber lain
Mendefinisikan dokumen body
Mendefinisikan satu baris tunggal
Mendefinisikan sebuah tombol diklik
Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)
Mendefinisikan sebuah caption tabel
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya.
Mendefinisikan teks ditengah

Mendefinisikan judul karya
Mendefinisikan sepotong kode komputer
Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen
Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
Menentukan daftar pilihan yang telah ditentukan untuk kontrol input
Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi
Mendefinisikan teks yang telah dihapus dari dokumen
Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
Merupakan contoh mendefinisikan istilah
Mendefinisikan sebuah kotak dialog atau jendela
Tidak didukung di HTML5. Gunakan <ul> sebagai gantinya.
Mendefinisikan daftar direktori

Mendefinisikan sebuah bagian dalam sebuah dokumen
Mendefinisikan daftar deskripsi
Mendefinisikan istilah / nama dalam daftar deskripsi
Mendefinisikan teks menekankan
Mendefinisikan sebuah wadah untuk eksternal (non-HTML) aplikasi
Grup terkait unsur-unsur dalam bentuk
Mendefinisikan sebuah caption untuk <figure> elemen
Menentukan konten mandiri
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya.
Mendefinisikan font, warna, dan ukuran untuk teks

Mendefinisikan footer untuk dokumen atau bagian
Mendefinisikan sebuah form HTML untuk input pengguna
Tidak didukung di HTML5.
Mendefinisikan sebuah jendela (frame) dalam sebuah frameset

Tidak didukung di HTML5.
Mendefinisikan satu set frame

Mendefinisikan judul HTML
Mendefinisikan informasi tentang dokumen
Mendefinisikan sebuah header untuk dokumen atau bagian
Mendefinisikan perubahan tematik dalam konten
Mendefinisikan root dari suatu dokumen HTML
Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau keinginan sendiri
Mendefinisikan sebuah frame inline
Mendefinisikan gambar
Mendefinisikan kontrol input
Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
Mendefinisikan input keyboard
Mendefinisikan bidang kunci-pasangan Generator (untuk bentuk)
Mendefinisikan label untuk sebuah <input> elemen
mendefinisikan keterangan untuk <fieldset> elemen
Mendefinisikan sebuah item daftar
Mendefinisikan hubungan antara dokumen dan sumber daya eksternal (paling digunakan untuk link ke style sheet)
Menentukan isi utama dokumen
Mendefinisikan client-side image-map
Mendefinisikan ditandai / teks yang disorot
Mendefinisikan printah daftar / menu 
Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil dari menu popup
Mendefinisikan metadata tentang dokumen HTML
Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)
Mendefinisikan link navigasi
Tidak didukung di HTML5. Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame

Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi klien
Mendefinisikan sebuah objek tertanam
Mendefinisikan daftar ordered
Mendefinisikan kelompok pilihan yang terkait dalam daftar drop-down
Mendefinisikan pilihan dalam daftar drop-down
Mendefinisikan hasil perhitungan
Mendefinisikan sebuah paragraf
Mendefinisikan sebuah parameter untuk objek
Mendefinisikan teks terformat
Merupakan kemajuan tugas
Mendefinisikan sebuah kutipan singkat
Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
Mendefinisikan teks yang tidak lagi benar
Mendefinisikan contoh output dari program komputer
Mendefinisikan sebuah script sisi klien
Mendefinisikan sebuah bagian dalam sebuah dokumen
Mendefinisikan sebuah daftar drop-down
Mendefinisikan teks kecil
Mendefinisikan sumber beberapa media untuk elemen media (<video> dan <audio>)
Mendefinisikan sebuah bagian dalam sebuah dokumen
Tidak didukung di HTML5. Gunakan <del> atau <s> gantinya.
Mendefinisikan teks strikethrough

Mendefinisikan teks penting
Mendefinisikan informasi style untuk dokumen
Mendefinisikan teks subscript
Mendefinisikan judul terlihat untuk <rincian> elemen
Mendefinisikan teks superscripted
Mendefinisikan Tabel
Grup isi tubuh dalam sebuah tabel
Mendefinisikan sel di tabel
Mendefinisikan kontrol masukan multiline (area teks)
Grup isi footer dalam sebuah tabel
Mendefinisikan sebuah header cell dalam sebuah tabel
Grup isi header dalam sebuah tabel
Mendefinisikan tanggal / waktu
Mendefinisikan judul untuk dokumen
Mendefinisikan baris dalam tabel
Mendefinisikan trek teks untuk elemen media  (<video> dan <audio yang>)
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya.
Mendefinisikan teletype text

Mendefinisikan teks yang harus Gaya yang berbeda dari teks biasa
Mendefinisikan daftar unordered
Mendefinisikan variabel
Mendefinisikan sebuah video atau film
Mendefinisikan kemungkinan line-break

Pada bagian berikutnya, kita akan belajar bagaimana untuk membuat template HTML. The basic HTML template

Terimakasih pada sumber pembelajaran ini :
HTML Tags
Saving Web Pages
Viewing your web pages in a browser

0 komentar:

Posting Komentar