/
Hypertext Hypertext

Hypertext - PowerPoint Presentation

pasty-toler
pasty-toler . @pasty-toler
Follow
387 views
Uploaded On 2017-11-13

Hypertext - PPT Presentation

Markup Language HTML BAB 2 Intro HTML format standar untuk membuat dokumen web Spesifikasi HTML standar HTML 401 httpwwww3orgTRhtml4 HTML merupakan ID: 605051

tag font homepage saya font tag saya homepage ini html dalam masih untuk yang judul karena tahap color pengembangan tingkat size adalah

Share:

Link:

Embed:

Download Presentation from below link

Download Presentation The PPT/PDF document "Hypertext" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.


Presentation Transcript

Slide1

Hypertext Markup Language (HTML)

BAB 2Slide2

IntroHTML : format standar

untuk

membuat

dokumen

web

Spesifikasi

HTML

standar

(HTML 4.01 ) : http://www.w3.org/TR/html4

HTML

merupakan

bahasa

bertanda

,

menggunakan

rangkaian

teks

tertentu

(tag)

untuk

menandai

teks

yang

mempunyai

interpretasi

khusus

File HTML

berupa

file

teks

(

plain text file

),

bukan

binary file

,

sehingga

dapat

dibuat

menggunakan

editor

teks

biasaSlide3

Skema Dasar Dokumen HTML

<

HTML>

<HEAD>

<TITLE>

Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML>

HTML:

menandai

awal

dan

akhir

dokumen

HTML

HEAD:

menandai

bagian

header

dokumen

HTML

TITLE:

memberi

judul

pada

dokumen

HTML

BODY:

menandai

awal

dan

akhir

isi

dokumen

(yang

ditampilkan

)Slide4

Contoh Isi Dokumen HTML

<html>

<head>

<title>Homepage

saya

</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan

,

nama

saya ..... Ini adalah <i>homepage</i> <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b><i>homepage</i></b>. </p> </body></html> <!-- akhir dokumen HTML -->Slide5

Tag HTMLTag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam

suatu

dokumen

HTML

Tag

dalam HTML terdiri dari  tanda lebih kecil (<), tanda lebih besar (>), dan garis miring (/).Biasanya tag dituliskan secara berpasangan, misanya <h1> dan </h1> namun ada juga yang tidak.Tag yang tidak menggunakan garis miring (/) adalah tag pembuka atau awal elemen sedangkan yang tag yang mengandung garis miring ( / ) adalah penutup elemen atau akhir elemenSlide6

Jenis Tag HTMLContainers 

Standalone

tag

 Slide7

Tag HTML - ContainersCara

penulisannya dengan cara

berpasangan

mempunyai

tag

pembuka dan penutup tagContoh:<body> … </body><b … </b><i>

… </

i>Slide8

Tag HTML - Standalone tag

T

ag

yang bisa berdiri sendiri tanpa perlu mempunyai

tag penutup.Tag tersebut biasanya hanya berfungi menempatkan sebuah elemen pada halam websiteContoh:<img> untuk menampilkan gambar<br> untuk memberi jarak antar teks ( vertikal)<hr> untuk membuat garisSlide9

Jenis Tag HTML secara fungsional

Tag

Dasar

Tag

Pemformatan

Tag Computer OutputTag Cititation, Quotation, DefinitionTag LinkTag ImageSlide10

Tag DasarSlide11

Tag PemformatanSlide12

Tag Computer OutputSlide13

Tag Cititation, Quotation, DefinitionSlide14

Tag LinkSlide15

Tag ImageSlide16

Tag Judul (Heading)

<

h

n

>

Judul paragraf</hn>n = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu paragraf

<h1>

Judul Tingkat 1

</h1><h2>Judul Tingkat 2</h2><h3>Judul Tingkat 3</h3><h4>Judul Tingkat 4</h4><h5>Judul Tingkat 5</h5><h6>Judul Tingkat 6</h6>

Judul Tingkat 1

Judul Tingkat 2

Judul Tingkat 3

Judul Tingkat 4

Judul Tingkat 5

Judul Tingkat 6Slide17

Tag Paragraf (Paragraph)

<p>

paragraf

</p>

Untuk menandai suatu paragraf.

Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.<p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.</p>

<p>

Homepage ini masih dalam tahap pengembangan, oleh karena itu

tampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p>Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.Slide18

Tag Atribut 1 (Bold, Italic, Underline)

<b>

Kalimat yang dicetak tebal

</b>

<i>

Kalimat yang dicetak miring</i><u>Kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi.Kata dapat dicetak tebal, miring

,

garis bawah

, tebal miring, dan kombinasi di tengah huruf normal<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p>Slide19

Tag Atribut 2 (Superscript, Subscript)

<sup>

bagian yang dicetak tinggi

</sup>

<sub>

bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.<p>(x<sub>1</sub> + x<sub>

2

</sub>

)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p><p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O

(x

1

+ x

2

)

2

= x

1

2

+ x

2

2

+ 2x

1

x

2

2H

2

+ O

2

= 2 H

2

OSlide20

Tag Ganti Baris (Break line)

<br>

Untuk pindah ke baris berikutnya.

Bentuk penulisan lain yang dianjurkan (

XML style

) :<br />Perkenalkan,nama saya ..... Ini adalahhomepage pertama saya,karena saya baru belajar tentang caramembuat homepage.Homepage ini masih dalam tahap pengembangan,oleh karena itu tampilannya masih terlalu sederhana.

Paragraf

Paragraf

Ganti baris

<p>Perkenalkan,

<br />

nama saya ..... Ini adalah

<br />

homepage pertama saya,

<br />

karena saya baru belajar tentang cara

<br />

membuat homepage.</p>

<p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p>Slide21

Tag Font (size)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter :

size

, face, color

Ukuran satu, dua, tiga, empat, lima, enam, tujuh

Ukuran

<font size="1">

satu,</font><font size="2">dua,</font><font size="3">tiga,</font><font size="4">empat,</font><font size="5">lima,</font><font size="6">enam,</font><font size="7">tujuh</font>

<font

size="

n"

>

kalimat

</font>

<font

size="

m"

>

kalimat

</font>

n

= 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)

m

= -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)

UkuranSlide22

Tag Font (face)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size,

face

, color

Jenis huruf

<font

face="

nama font"> kalimat </font>nama font = Times New Roman, Arial, Courier New, Verdana, dll.Homepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembangan

<font face="Times New Roman">

Homepage ini masih dalam tahap pengembangan

</font>

<br />

<font face="Arial">

Homepage ini masih dalam tahap pengembangan

</font>

<br />

<font face="Courier New">

Homepage ini masih dalam tahap pengembangan

</font>

<br />

<font face="Verdana">

Homepage ini masih dalam tahap pengembangan

</font>Slide23

Tag Font (color)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face,

color

Warna

Red

Maroon

Lime

GreenBlueNavyYellowFuschiaAqua<b><font color="#FF0000">Red</font><br /><font color="#800000">Maroon</font><br /><font color="#00FF00">Lime</font><br /><font color="#008000">Green</font><br /><font color="#0000FF">Blue</font><br /><font color="#000080">Navy</font><br /><font color="#FFFF00">

Yellow

</font>

<br />

<font color="#FF00FF">

Fuchsia

</font>

<br />

<font color="#00FFFF">

Aqua

</font>

</b>

<font

color="#

RRGGBB"

>

kalimat

</font>

RR

= 00 .. FF (intensitas warna merah dalam heksadesimal)

GG

= 00 .. FF (intensitas warna hijau dalam heksadesimal)

BB

= 00 .. FF (intensitas warna biru dalam heksadesimal)Slide24

Tag Enumerasi (List, Unordered List, Ordered List

)

<li>

item

</li>

Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet) Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol>Ada beberapa sektor potensial:<li>Pariwisata</li><li>

Seni

</li>

<li>Budaya</li><br />Sektor tersebut merupakan ...<p>Fasilitas penginapan di Indonesia:<ol> <li>Losmen</li><br /> Losmen merupakan tempat penginapan yang berskala kecil <li>Hotel</li> <ul> <li>Hotel melati</li> <li>Hotel berbintang</li> </ul></ol>Perkembangan dalam ...

Ada beberapa sektor potensial:

Pariwisata

Seni

Budaya

Sektor tersebut merupakan …

Fasilitas penginapan di Indonesia:

1. Losmen

Losmen merupakan tempat penginapan

yang berskala kecil

2. Hotel

Hotel melati

Hotel berbintang

Perkembangan dalam ...Slide25

Tag Garis Mendatar (Horizontal Line)

<hr>

membentuk garis pemisah mendatar.

Bentuk penulisan lain yang dianjurkan (

XML style) : <hr />Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.<hr />Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.

Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.

Homepage ini masih dalam tahap pengembangan,

oleh karena itu tampilannya masih terlalu sederhana.Slide26

Tag Gambar (Image)

<img src

="

NamaFileGambar"

>

NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG. Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan (XML style) : <img src="NamaFileGambar" />

<img src="cover.jpg" align="left" />

Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.

Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu <img src="logo.gif" alt="Logo" /> sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.Slide27

Form dan Input Tag di

HTML

Text

Field

<input type="text" name="firstname">

Textarea<textarea rows="4" cols="50">Isi</textarea>Checkboxes<input type="checkbox" name="tampilan" value="Ganteng">Radio Button

<input type="radio" name="sex" value="Laki-laki

">

Laki-laki<br>Slide28

Latihan SoalCari dan pelajarilah contoh lain dari Form and Input Tag pada HTML!

Buatlah

sebuah

halaman html sederhana yang menampilkan informasi data diri / profil Anda.