SlideShare a Scribd company logo
1 of 3
PERTEMUAN 2
FORMAT TAMPILAN SEDERHANA
TAG UNTUK HEADLINE
Untuk membuat teks Headline (judul) kita harus melingkupi teks tersebut dengan tag pembuka dan
tag penutup headline. Tag Headline ditulis dengan aturan sebagai berikut :
tag pembuka <Hx> dan tag penutup </Hx>, perhatian x diganti dengan angka
contoh : <H1> atau <H2> atau H3> ….. dst
Angka tersebut menentukan besar kecilnya huruf teks judul yang berada diantara tag <Hx> dan
</Hx>.
Semakin besar angka tersebut semakin kecil huruf teks judul.
Contoh penulisan tag <Hx> simpan dengan nama latihan3.htm :
<HTML>
<HEAD>
<TITLE>Format Tampilan Sederhana</TITLE>
</HEAD>
<BODY>
<H1>Headline level 1</H1>
<H2>Headline level 2</H2>
<H3>Headline level 3</H3>
<H4>Headline level 4</H4>
</BODY>
</HTML>
Cobalah contoh di atas dan perhatikan bahwa huruf pada tulisan semakin kebawah semakin
kecil. Coba simpulkan berarti ……… (simpulkan sendiri).
TAG STYLE SEDERHANA
Disini akan dibahas beberapa tag style, tag - tag ini digunakan untuk mengatur format teks baik itu
untuk membuat teks tebal, miring atau tulisan seperti bentuk kode program (teks seperti bentuk
listing program atau kalau dalam font yaitu courier new)
Perhatikan tabel tag berikut :
FUNGSI
TAG LOGIKAL TAG FISIKAL
Untuk membuat teks tebal <STRONG> <B>
Untuk membuat teks miring <EM> <I>
Untuk huruf fixed (font jenis
fixed)
<CODE> <TT>
Buka dan edit file latihan3.htm yang tadi kita buat. Ubahlah atau tambahkanlah pada dokumen
tersebut sehinggan menjadi seperti berikut ini :
Simpan file tersebut dan cobalah, perhatikan bahwa huruf pada tulisan semakin kebawah semakin
kecil.
<HTML>
<HEAD>
<TITLE>Format Tampilan Sederhana</TITLE>
</HEAD>
<BODY>
<H1>Headline level 1</H1>
<H2>Headline level 2</H2>
<H3>Headline level 3</H3>
<H4>Headline level 4</H4>
Tulisan ini ditulis dengan <STRONG>”Tag Strong, agar tebal”</STRONG>
Tulisan ini ditulis dengan <EM>”Tag EM, agar miring”</EM>
Tulisan ini ditulis dengan <CODE>”Tag Code, agar seperti kode program”</CODE>
</BODY>
</HTML>
• Tag Fisikal tampilan akan disesuaikan dengan kemampuan resolusi cetak dari printer pada komputer yang sedang
melakukan browsing dokumen kita.
• Tag Logikal tampilan akan dibuat sebaik mungkin tanpa kemampuan resolusi cetak dari printer pada komputer yang
sedang melakukan browsing dokumen kita.
• Penulis menyarankan untuk menggunakan tag logikal.
Latihan 2

More Related Content

What's hot

Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
Nie Andini
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xi
Wyitry Jyanth
 

What's hot (15)

Pertemuan1
Pertemuan1Pertemuan1
Pertemuan1
 
Web dasar i
Web dasar iWeb dasar i
Web dasar i
 
DASAR HTML
DASAR HTMLDASAR HTML
DASAR HTML
 
Web diktat html
Web diktat htmlWeb diktat html
Web diktat html
 
Belajar dasar html
Belajar dasar htmlBelajar dasar html
Belajar dasar html
 
Laporan pbw css
Laporan pbw cssLaporan pbw css
Laporan pbw css
 
Dasar pemrograman web HTML
Dasar pemrograman web HTMLDasar pemrograman web HTML
Dasar pemrograman web HTML
 
Belajar html
Belajar htmlBelajar html
Belajar html
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
BAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBBAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEB
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xi
 
Materi CSS Dasar
Materi CSS DasarMateri CSS Dasar
Materi CSS Dasar
 
Modul css
Modul cssModul css
Modul css
 

Viewers also liked

Drupal course - batch API
Drupal course - batch APIDrupal course - batch API
Drupal course - batch API
Dániel Kalmár
 
Women in detective literature
Women in detective literatureWomen in detective literature
Women in detective literature
philipca
 
Workshop web hacking 9 februari 2014
Workshop web hacking 9 februari 2014Workshop web hacking 9 februari 2014
Workshop web hacking 9 februari 2014
Muhammad Romadhon
 
Geoportal.lt-inspired by inspire
Geoportal.lt-inspired by inspireGeoportal.lt-inspired by inspire
Geoportal.lt-inspired by inspire
geoportal.lt
 

Viewers also liked (20)

Pertemuan3
Pertemuan3Pertemuan3
Pertemuan3
 
Pertemuan4
Pertemuan4Pertemuan4
Pertemuan4
 
Pertemuan6
Pertemuan6Pertemuan6
Pertemuan6
 
Pertemuan8
Pertemuan8Pertemuan8
Pertemuan8
 
Pertemuan9
Pertemuan9Pertemuan9
Pertemuan9
 
Pertemuan5
Pertemuan5Pertemuan5
Pertemuan5
 
Pertemuan7
Pertemuan7Pertemuan7
Pertemuan7
 
Pertemuan10
Pertemuan10Pertemuan10
Pertemuan10
 
The Essential Step-by-Step Guide to Internet Marketing
The Essential Step-by-Step Guide to Internet MarketingThe Essential Step-by-Step Guide to Internet Marketing
The Essential Step-by-Step Guide to Internet Marketing
 
Drupal course - batch API
Drupal course - batch APIDrupal course - batch API
Drupal course - batch API
 
Edmodo
EdmodoEdmodo
Edmodo
 
Storia del turismo: viaggiare nel medioevo
Storia del turismo: viaggiare nel medioevoStoria del turismo: viaggiare nel medioevo
Storia del turismo: viaggiare nel medioevo
 
Undang Undang Nomor 8 Tahun 2015 tentang Perubahan Atas Undang-Undang Nomor ...
Undang Undang Nomor 8 Tahun 2015  tentang Perubahan Atas Undang-Undang Nomor ...Undang Undang Nomor 8 Tahun 2015  tentang Perubahan Atas Undang-Undang Nomor ...
Undang Undang Nomor 8 Tahun 2015 tentang Perubahan Atas Undang-Undang Nomor ...
 
Women in detective literature
Women in detective literatureWomen in detective literature
Women in detective literature
 
Workshop web hacking 9 februari 2014
Workshop web hacking 9 februari 2014Workshop web hacking 9 februari 2014
Workshop web hacking 9 februari 2014
 
How To Make A Dope Ass Presentation
How To Make A Dope Ass PresentationHow To Make A Dope Ass Presentation
How To Make A Dope Ass Presentation
 
Geoportal.lt-inspired by inspire
Geoportal.lt-inspired by inspireGeoportal.lt-inspired by inspire
Geoportal.lt-inspired by inspire
 
O gostar é uma tirania
O gostar é uma tiraniaO gostar é uma tirania
O gostar é uma tirania
 
04 10 2015- Javier Duarte hizo Entrega de Certificados
04 10 2015- Javier Duarte hizo Entrega de Certificados04 10 2015- Javier Duarte hizo Entrega de Certificados
04 10 2015- Javier Duarte hizo Entrega de Certificados
 
American Law 77EGXH5KTMDT
American Law 77EGXH5KTMDTAmerican Law 77EGXH5KTMDT
American Law 77EGXH5KTMDT
 

Similar to Pertemuan2 (20)

Belajar html!!
Belajar html!!Belajar html!!
Belajar html!!
 
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Pengantar html
Pengantar htmlPengantar html
Pengantar html
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
 
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web Programming
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
 
Html dasar
Html dasarHtml dasar
Html dasar
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot com
 
Modul 1 - HTML
Modul 1 - HTMLModul 1 - HTML
Modul 1 - HTML
 
Buku ajar desain web
Buku ajar desain webBuku ajar desain web
Buku ajar desain web
 
Web html
Web htmlWeb html
Web html
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Membuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepad
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
Modul html
Modul htmlModul html
Modul html
 
Modul html
Modul htmlModul html
Modul html
 

Pertemuan2

  • 1. PERTEMUAN 2 FORMAT TAMPILAN SEDERHANA TAG UNTUK HEADLINE Untuk membuat teks Headline (judul) kita harus melingkupi teks tersebut dengan tag pembuka dan tag penutup headline. Tag Headline ditulis dengan aturan sebagai berikut : tag pembuka <Hx> dan tag penutup </Hx>, perhatian x diganti dengan angka contoh : <H1> atau <H2> atau H3> ….. dst Angka tersebut menentukan besar kecilnya huruf teks judul yang berada diantara tag <Hx> dan </Hx>. Semakin besar angka tersebut semakin kecil huruf teks judul. Contoh penulisan tag <Hx> simpan dengan nama latihan3.htm : <HTML> <HEAD> <TITLE>Format Tampilan Sederhana</TITLE> </HEAD> <BODY> <H1>Headline level 1</H1> <H2>Headline level 2</H2> <H3>Headline level 3</H3> <H4>Headline level 4</H4> </BODY> </HTML> Cobalah contoh di atas dan perhatikan bahwa huruf pada tulisan semakin kebawah semakin kecil. Coba simpulkan berarti ……… (simpulkan sendiri).
  • 2. TAG STYLE SEDERHANA Disini akan dibahas beberapa tag style, tag - tag ini digunakan untuk mengatur format teks baik itu untuk membuat teks tebal, miring atau tulisan seperti bentuk kode program (teks seperti bentuk listing program atau kalau dalam font yaitu courier new) Perhatikan tabel tag berikut : FUNGSI TAG LOGIKAL TAG FISIKAL Untuk membuat teks tebal <STRONG> <B> Untuk membuat teks miring <EM> <I> Untuk huruf fixed (font jenis fixed) <CODE> <TT> Buka dan edit file latihan3.htm yang tadi kita buat. Ubahlah atau tambahkanlah pada dokumen tersebut sehinggan menjadi seperti berikut ini : Simpan file tersebut dan cobalah, perhatikan bahwa huruf pada tulisan semakin kebawah semakin kecil. <HTML> <HEAD> <TITLE>Format Tampilan Sederhana</TITLE> </HEAD> <BODY> <H1>Headline level 1</H1> <H2>Headline level 2</H2> <H3>Headline level 3</H3> <H4>Headline level 4</H4> Tulisan ini ditulis dengan <STRONG>”Tag Strong, agar tebal”</STRONG> Tulisan ini ditulis dengan <EM>”Tag EM, agar miring”</EM> Tulisan ini ditulis dengan <CODE>”Tag Code, agar seperti kode program”</CODE> </BODY> </HTML> • Tag Fisikal tampilan akan disesuaikan dengan kemampuan resolusi cetak dari printer pada komputer yang sedang melakukan browsing dokumen kita. • Tag Logikal tampilan akan dibuat sebaik mungkin tanpa kemampuan resolusi cetak dari printer pada komputer yang sedang melakukan browsing dokumen kita. • Penulis menyarankan untuk menggunakan tag logikal.