Tugas Portofolio Web Browser

TUGAS PORTOFOLIO WEB BROWSER
“HTML”
Guru Pembimbing:
Nurdiyanto, S.Kom
Disusun Oleh:
Zahra Febi Amanda

BAB 1
PENDAHULUAN
A. Latar Belakang
Web merupakan media untuk menanpilkan halaman. Web terbagi menjadi dua yaitu web
statis dan web dinamis. Web statis adalah media untuk menampilkan halaman statis atau
tetap, tetapi yang mengatur nya adalah web browser. Contoh teknologi yang berkaitan dengan
web statis adalah Client Side seperti HTML, Java script.
Dibuat nya makalah ini adalah untuk mempermudah dalam pembelajaran, maksudnya
walaupun kita tidak begitu mrngerti terhadap pembahasan tetapi kita sudah mengenal dan
mngetahui nya. Hal ini telah memudahkan bagi pelajar yang mempelajari tentang bab ini
karena sudah dikelompokkan sesuai dengan bahasannya. Tetapi disamping itu kita harus rajin
berlatih terus mencoba membuat web, baik yang statis ataupun dinamis. Berdasarkan
kenyataan diatas penyusun tertarik untuk membuat makalah yang berjudul HTML dan Java
Script.
B. Rumusan Masalah
1) Apa saja yang mendasari HTML?
2) Bagaimana struktur HTML?
3) Atribut-atribut apa saja saat kita ingin membuat sebuah web?
C. Tujuan Makalah
Makalah ini disusun dengan tujuan untuk mengetahui dan mendeskripsikan tentang HTML.
D. Kegunaan Makalah
Makalah ini dapat digunakan sebagai contoh untuk pembelajaran dan pengenalan dasar dari
HTML dan Java Script.
E. Prosedur Makalah
Penyusunan Makalah ini menggunakan metode deskriptif yaitu teknik mengumpulkan data
dari berbagai sumber buku dan internet.
BAB II
PEMBAHASAN
2.1 Dasar-Dasar HTML
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah
sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah
terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya
memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser.
Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan
implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu
mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang
dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, Sublime

Text dan lain-lain.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam
dokumen HTML.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah
HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan
editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan
kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini
sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam
mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-
tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu
ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional
untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala
bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham
mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.
2.2 Struktur dasar HTML
1. Struktur dasar HTML
HTML merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser
yang telah terinstal pada computer client, Untuk pemahaman dan sejarah HTML silahkan
baca “Pengertian dan sejarah HTML”, Bahasa pemograman ini terdapat sebuah elemen, tag
dan attribute didalam perintahnya.
Secara umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head dan
body, kedua elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya dapat anda
lihat sebuah pola dasar HTML dibawah ini
<html>
<head>
“Informasi Tentang Dokumen HTML”
</head>
<body>
“Informasi yang akan ditampilkan dalam web Browser”
</body>
</html>
Dari pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka
<html> sampai tag penutup </html>, sedangkan isi dari dokumen html tersebut adalah dua
buah elemen atau section yaitu
• “HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head </head>,
Pada elemen ini biasanya berisikan
– Title, merupakan judul dokumen
– Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web
Dalam Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content, Name,
URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun beberapa value yang
dapat kita isikan antara lain abstract, author, copyright, description, distribution, expires,
keywords, revist, refresh maupun language
– Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi browser tanpa
ditampilkan oleh browser untuk sebagian besar, dengan kata lain pada elemen ini kebanyakan
hanya mengatur informasi dan visualisasi web tersebut, untuk elemen keduanya adalah
– “BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body> pada elemen ini
berisikan informasi dan pengaturannya yang akan ditampilkan dalam browser.
Di dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita pelajari,
adapun contoh atributh dan kegunaannya sebagai berikut,
• <DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table definisi
• <STRONG>, Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat,
paragraph ataupun dokumen
• <VAR>, untuk menampilkan nama variable
• <CITE>, Menandai kutipan
• <CODE>, Menampilakan sebuah kode pemrograman
• <EM>, Penekanan sebuah kalimat
• <SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen
• <KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user melalui
keyboard
• <B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat
• <I>, Italic membuat tampilan miring
• <U>, Underline membuat tampilan garis bawah
• <TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik
• <STRIKE>, membuat garis tengah pada sebuah kalimat
• <BIG>, memperbesar ukuran huruf

• <SMALL>, memperkecil ukuran huruf
• <SUP>, menampilkan superscript
• <SUB>, menampilkan subscript
• <FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di
mana dalam atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color.
Size, style dan lainnya
• <P>, Paragrah untuk membuat sebuah paragraph
• <BR>, Line break berfungsi untuk mengganti baris
• <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam

jenis tersebut mempunyai perbedaan ketebalan dan ukuran huruf
• <PRE> Preformatted Text berfungsi menampilkan text apa adanya
• <CENTER> membuat sebuah text berada di posisi tengah
• <LEFT> membuat sebuah text berada di posisi kiri
• <RIGHT> membuat sebuah text berada di posisi kanan
• <Basefont size=”pixel”>mengubah ukuran sebuah huruf
• <HR> Horizontal rule berfungsi untuk membuat garis bawah
• <OL>, membuat penomoran pada daftar
• <UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)
• <LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris
daftar yang akan di beri penomoron ataupun tanda bullet
• <TABLE>, membuat sebuah table
• <TR>, Membuat row atau baris didalam table <TH>, membuat judul kolom di table
<TD> membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table
• Rowspan, Colspan merupakan pengaturan merge cell pada atribut table

• <FORM> untuk membuat form
• <A HREF=”url link”>Hypertext</A> Hyper Link
• <IMG SRC=”url img”> insert image
Inilah beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut
diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus ditutup dengan
tag penutup atributh tersebut </…..>, untuk lebih jelasnya dilain waktu saya akan mencoba
bahas satu persatu atributh tersebut dan akan saya lengkapi dengan syntax dan contohnya
kompleksnya.
Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body.
Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar
penulisannya adalah:
<HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
Keterangan:
 Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda
lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web
Anda, maka judul inilah yang akan disimpan.
Untuk melihat hasilnya, silakan jalankan browser favorit Anda, seperti contoh di bawah ini
digunakan Microsoft Internet Explorer.
Referensi Tag HTML

1. Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen
HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web.
HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
</BODY>
</HTML>
2. Paragraf
Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf
dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi
paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan.
LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
<P ALIGN=”center”>
<P ALIGN=”left”>
</P>
</BODY>
</HTML>
3. Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini
browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan
teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu yang tidak perlu dicoba</H3>
<BLOCKQUOTE>
</BLOCKQUOTE>
</BODY>
</HTML>
4. Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda
ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font
monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks
(misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
<PRE>
</PRE>
</BODY>
</HTML>
5. Begin Row (BR)
Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru
tanpa memberi baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga
cara yang paling sering dilakukan ,yaitu:
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi DOS
</BODY>
</HTML>
6. Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE>
memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
</BODY>
</HTML>
7. Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus
diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE = “Arial”>Arial, contoh AC Milan <P>
<FONT FACE = “Verdana”>Verdana , contoh Persebaya <P>
<FONT FACE = “Times New Roman”>Times New Roman, contoh Indonesia P>
</BODY>
</HTML>
8. Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi
nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti
Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB
(Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan
0000FF untuk Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR = “red”>PSM Makassar<P>
<FONT COLOR = “#FF0000”>tetap PSM Makassar kan?<P>
<FONT COLOR = “#00FF00”>Ini baru Persebaya<P>
</BODY>
</HTML>
9. Link
Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke
dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada
browser</A>.
Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan
nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan
atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke
bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.
Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A>
<BLOCKQUOTE>
<P>Abbiati ,<A HREF=”#abbiati”>info lengkap</A>
<P>Ayala
<P>Ambrosini
<P>Albertini
<P>Boban
<P>
<A HREF=”linktujuan.html”>kalo mau tahu lagi klik disini</A>
</BLOCKQUOTE>
<P><A NAME=”abbiati”>Abbiati</A>
<BLOCKQUOTE>
<P>Kiper ketiga timnas Italia runner up Euro 2000
<BR>Kiper utama U-21 juara Piala Eropa U-21
<BR>Kiper utama AC Milan juara Seri-A 1998-1999
</BLOCKQUOTE>
<P><A HREF=”#lengkap”>kembali ke atas</A>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Link tujuan</TITLE>
</HEAD>
<BODY>
<P ALIGN=”center”> Maaf, hanya sedikit
<BR>Chamot
<BR>Dida
<BR>Shevchenko
<BR><A HREF=”contohlink.html”>kembali</A>
</BODY>
</HTML>
2.5 Membuat Kode Dasar HTML Table
Untuk Belajar HTML Table dan membuat website sendiri, maka kita harus membuat
persiapan lebih dulu. Pertama kita buka notepad. Kemudian ketik di notepad ini kode
html seperti dibawah ini:
<table>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Kemudian sisipkan kalimat Belajar HTML Table diantara <title> dan </title> sehingga kode
html nya sekarang menjadi:
<table>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
</body>
</html>
a. Menambah heading dan paragraf
Bila anda pernah menggunakan Microsoft Word, anda akan terbiasa dengan style yang ada
untuk heading dengan tingkat kepentingan yang berbeda. Pada HTML ada enam tingkatan
heading. H1 adalah yang paling penting, H2 lebih sedikit kurang penting, seterusnya hingga
H6, yang paling tidak penting.
Berikut adalah cara menambah sebuah heading yang penting:
<h1>Sebuah heading yang penting</h1>
<h2>Sebuah heading yang sedikit kurang penting</h2>
Setiap paragraf yang anda tulis harus diawali dengan tag <p>. Tag </p> merupakan opsi,
tidak seperti end tag untuk elemen seperti heading. Sebagai contoh:
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
b. Menambahkan perhatian pada halaman dengan gambar – gambar
<img
c. Menambahkan link ke halaman lain.
Apa yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu
halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah klik
dapat membawa anda langsung ke seberang dunia!
Link didefinisikan dengan tag <a>. Mari membuat sebuah link pada file “peter.html” di
folder/direktori yang sama dengan file HTML yang sedang anda edit::
Ini adalah link ke <a href=”peter.html”>halamannyater</a>.
Teks antara <a> dan </a> digunakan sebagai keterangan dari link. Adalah hal yang umum
bagi keterangan tersebut untuk diberi garis bawah berwarna biru.
Bila file yang anda link adalah direktori asal (parent directory), anda perlu menambahkan
“../” sebelumnya, sebagai contoh:
<a href=”../mary.html”>halamannya Mary</a>
Bila file yang dilink adalah sebuah sub direktori, anda perlu memberikan nama dari
subdirektori tersebut diikuti sebuah “/” setelahnya, sebagai contoh:
<a href=”friends/sue.html”>halamannya Sue</a>
Penggunaan relative path memungkinkan anda melink sebuah file dengan pergi naik atau
turun direktori sesuai kebutuhan, sebagai contoh”:
<a href=”../college/friends/john.html”>halamannya John</a>
Di mana pertama kali akan dicari pada direktori asal, dari sebuah direktori lain
bernama “college”, dan kemudian sebuah subdirektori dengan nama “friends” untuk sebuah
file dengan nama “john.html”.
Untuk melink ke sebuah halaman atau situs Web lain anda perlu memberikan alamat lengkap
Web (umumnya dinamakan URL), sebagai contoh untuk melink ke www.w3.org anda perlu
menuliskan:
Ini adalah sebuah link menuju<a href=”http://www.w3.org/”>W3C</a>.
Anda dapat mengubah sebuah gambar menjadi sebuah link hypertext, sebagai contoh, berikut
ini memungkinkan anda untuk mengklik pada logo perusahaan untuk pergi ke halaman utama
/ depan:
<a href=”/”><img src=”logo.gif” alt=”home page”></a>
Contoh ini menggunakan “/” untuk menghubungi direktori asal, yang mana adalah home
page.
d. Tiga jenis daftar
HTML mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet
(bulletted list), atau sering disebut unordered list. Yang menggunakan tag <ul> dan <li>,
sebagai contoh:
<ul>
<li>list item pertama</li>
<li>list item kedua</li>
<li>list item ketiga</li>
</ul>
Catatan bahwa anda perlu mengakhiri daftar dengan tag </ul>, tetapi tag </li> merupakan
opsi dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga
disebut ordered list. Hal tersebut menggunakan tag <ol> dan <li>. Sebagai contoh:
<ol>
<li>list item kedua</li>
</ol>
Seperti juga bulletted lists, anda perlu mengakhiri daftar dengan tag </ol>, tetapi tag penutup
</li> merupakan opsi dan dapat di hiraukan.
Yang ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan anda untuk
membuat daftar suatu hal dan penjelasannya. Daftar ini diawali dengan sebuah tag <dl> dan
diakhiri dengan </dl> Tiap hal diawali dengan sebuah tag <dt> dan tiap penjelasannya
diawali dengan sebuah tag <dd>. Sebagai contoh:
<dl>
<dt>hal pertama</dt>
<dd>penjelasannya</dd>
<dt>hal kedua</dt>
<dt>hal ketiga</dt>
</dl>
Tag penutup </dt> dan </dd> merupakan opsi dan dapat diabaikan. Perlu dicatat bahwa
daftar ini bisa saling disisipkan, satu diantari yang lain. Sebagai contoh:
<ol>
<li>
list item kedua
<ul>
<li>list pertama yang disisipkan</li>
<li>list kedua yang disisipkan</li>
</ul>
</li>
</ol>
Anda juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang lebih
panjang..
e. HTML memiliki sebuah head dan body
Bila anda menggunakan fitur view source dari web browser anda (lihat menu View atau File)
anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya dimulai dengan
sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian diawali dengan
sebuah tag <html> dikuti dengan tag <head> dan diakhiri dengan </html>. Tag <html> …
</html> berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> … </head>
mengandung judul, dan informasi style dan script, sementara <body> … </body>
mengandung markup dari isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy
dan paste ke text editor untuk menciptakan halaman anda sendiri:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> ganti dengan judul dokumen anda </title>
</head>
<body>
ganti dengan isi dokumen anda

</body>
</html>
BAB III
PENUTUP
A. Simpulan
Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML. Dimana
www merupakan suatu protokol standar dari internet, sedangkan HTML merupakan script
atau program standar yang dijalankan oleh www atau internet. Proyek HTML ini dibuat
dengan menggunakan media web editor notepad.
Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian tubuh
(body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini dimulai
dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk setiap baris dalam
proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita
buat.
B. Saran
1. Bagi para pemula, pembuatan web/HTML merupakan dasar yang penting sehingga
dapat membantu ketika kita memulai sebuah proyek web tanpa menggunakan cara yang
praktis.
DAFTAR PUSTAKA
https://sismartamelia.wordpress.com/2013/04/18/makalah-html/
http://ajizanuar.blogspot.com/2016/03/makalah-html.html
https://yagatama.wordpress.com/2010/01/13/tugas-makalah-mengenai-html/
http://rahma099c.blogspot.com/

Tugas Portofolio Web Browser

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tugas Portofolio Web Browser

Diunggah oleh

Hak Cipta:

Format Tersedia

TUGAS PORTOFOLIO WEB BROWSER

Zahra Febi Amanda

1) Apa saja yang mendasari HTML?

2) Bagaimana struktur HTML?

3) Atribut-atribut apa saja saat kita ingin membuat sebuah web?

2.1 Dasar-Dasar HTML

Mendesain HTML dapat dilakukan dengan dua cara:

1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, Sublime

Pada elemen ini biasanya berisikan

– Title, merupakan judul dokumen

• <VAR>, untuk menampilkan nama variable

• <CITE>, Menandai kutipan

• <CODE>, Menampilakan sebuah kode pemrograman

• <EM>, Penekanan sebuah kalimat

• <SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen

• <B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat

• <I>, Italic membuat tampilan miring

• <U>, Underline membuat tampilan garis bawah

• <TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik

• <STRIKE>, membuat garis tengah pada sebuah kalimat

• <BIG>, memperbesar ukuran huruf

• <SUP>, menampilkan superscript

• <SUB>, menampilkan subscript

• <P>, Paragrah untuk membuat sebuah paragraph

• <BR>, Line break berfungsi untuk mengganti baris

• <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam

• <PRE> Preformatted Text berfungsi menampilkan text apa adanya

• <CENTER> membuat sebuah text berada di posisi tengah

• <LEFT> membuat sebuah text berada di posisi kiri

• <RIGHT> membuat sebuah text berada di posisi kanan

• <Basefont size=”pixel”>mengubah ukuran sebuah huruf

• <HR> Horizontal rule berfungsi untuk membuat garis bawah

• <OL>, membuat penomoran pada daftar

• <UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)

• <TABLE>, membuat sebuah table

• Rowspan, Colspan merupakan pengaturan merge cell pada atribut table

• <A HREF=”url link”>Hypertext</A> Hyper Link

• <IMG SRC=”url img”> insert image

Referensi Tag HTML

<H1>Heading Level 1</H1>

<H3>Sesuatu yang tidak perlu dicoba</H3>

5. Begin Row (BR)

<BR>Instalasi melalui FTP

<BR>Instalasi melalui CDROM

<BR>Instalasi melalui partisi DOS

<FONT SIZE=1>Ukuran font 1</FONT>

<FONT SIZE=2>Ukuran font 2</FONT>

<FONT SIZE=3>Ukuran font 3</FONT>

<FONT SIZE=4>Ukuran font 4</FONT>

<FONT SIZE=5>Ukuran font 5</FONT>

<FONT SIZE=6>Ukuran font 6</FONT>

<FONT SIZE=7>Ukuran font 7</FONT>

<FONT FACE = “Arial”>Arial, contoh AC Milan <P>

<FONT FACE = “Verdana”>Verdana , contoh Persebaya <P>

<FONT COLOR = “red”>PSM Makassar<P>

<FONT COLOR = “#FF0000”>tetap PSM Makassar kan?<P>

<FONT COLOR = “#00FF00”>Ini baru Persebaya<P>

<A NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A>

<P>Abbiati ,<A HREF=”#abbiati”>info lengkap</A>

<A HREF=”linktujuan.html”>kalo mau tahu lagi klik disini</A>

<P>Kiper ketiga timnas Italia runner up Euro 2000

<BR>Kiper utama U-21 juara Piala Eropa U-21

<BR>Kiper utama AC Milan juara Seri-A 1998-1999