Tuesday, July 19, 2016

struktur dasar web dengan HTML



Di dalam sebuah pemograman web ada yang di sebut dengan

HTML atau tag command setiap dokumen di awali dengan <HTML> dan di akhiri dengan </HTML>

HEAD (HEADER) merupakan tanda pengenal di dalam bagian ini biasanya di muat tag TITLE yang menampilkan judul pada halaman browser.

 TITLE seperti yang sudah di jelaskan di atas TITLE adalah judul contoh <HTML> olahraga</HTML>

 BODY merupakan tag yang menampilkan body contoh : menampilkan text, image,color, background dan semua yang di tampilkan di dalam web.



Catatan : semua elemen tag di awali dengan <....> dan di akhiri </....> 




Contoh praktikum dengan menggunkan notepad++ : 
Body 
Document body digunakan untuk menampilkan text,image link dan semua yang akan di tampilkan pada web page.
<html>
<head>
<title>welcome to html</title>
<body bgcolor="pink">
</head>
<p>document html yang pertama</p>
</body>
</html>


 <TITLE > welcome to html</HTML> adalah sebuah judul yang di tampilkan pada browser.    

 kata <P> nya itu sendiri itu merupakan sebuah paragraf.



Seperti yang kita lihat :
<P> document html yang pertama</p> .

Heading
HEADING adalah block level elemen yang berfungsi untuk membuat judul dan heading itu ada beberapa ukuran dari H1 sampai H6.
<html>
<head>
<title>heading element</title>
<h1>heading one</h1>
<h2>heading two</h2>
<h3>heading three</h3>
<h4>heading four</h5>
<h5>heading five</h5>
<h6>heading six</6>
</body>
</html>



Contoh hasil : H1 H2 H3 H4 H5 H6


Breakline



BREAKLINE berfungsi sebagai paragraf baru atau memulai baris baru di dalam sebuah dokumen .
<html>
<head>
<title>break line</title>
</head>
<body>
<h3>buliding dynamic web aplication</h3>
<P></html>

if you're building a dynamic web aplication ,<br>
start by setting up an application server and <br>
</p>
</body>

Contoh hasil:
if you're building a dynamic web aplication
start by setting up an application server and 

Karakter
<html>
<head><title>latihan karakter khusus</title>
</head>
<body>
&quot;
<BR>
&amp;
<BR>
&lt;
<BR>
&gt;
<BR>
&copy;
<BR>
&reg;
<BR>
&plismn;
<BR>
&AElig;
<BR>
&aelig;
<BR>
&Eacute;
<BR>
&eacute;
<BR>
</body>
</html>


Screenshot di atas adalah latihan untuk menampilkan karakter khusus di seperti simbol-simbol tag . 
Contoh hasil: 



<
>
©
®
& plismn;
Æ
æ
É
Tag formatting text





<html>
<head><title>latihan tag untuk memformat text</TITLE>
</head>
<body>
text normal<BR>
<SMALL>tag small</SMALL>
<br>
<i>text miring</i>
<br>
<big>tag big</big>
<br>
<b>text tebal</b>
<br>
<u>text bergaris bawah</u>
<br>
contoh superscript : x<sup>2</sup>
<br>
contoh subscript : h<sub>2</sub>o
<br>
<strike> ini tex yang tercoret</strike>
<br>
<font size=5 face=verdana>
contoh menggunakan tag font
</font>
</body>
</html>

Screenshot di atas adalah latihan untuk mempormat text seperti yang kita lihat :  ada text yang tercetak normal, besar ,miring dan lain sebagainya.



















Contoh hasil : normal  besar miring 




























Unordered list








UNORDERED LIST  (bullet) berfungsi untuk mengurutkan daftar menggunakan simbol-simbol atau karakter tertentu .


<html>
<head>
<title>unordered list</title>
</head>
<body>
<p>shedule for html course</p>
<ul>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
</ul>
</body>
</html>

contoh hasil:

















nama mahasiwa


























  • ridwan
  • nina sulasih
  • arga
  • ridwan fahreja
tabel unordered list:
tag

atribute
value
descriftion
<UL>
TYPE
SQUARE
DISC
CIRCLE
Bullet kotak
Bullet titik
Bullet lingkaran


Ordered list
  ORDERED LIST  merupakan daftar yang memliki kalimat/item yang terurut atau karakter yang berurutan  yang menggunakan no  atau huruf angka romawi
<html>
<head>
<title>ordered list</title>
</head>
<body>
<p>shedule for html course</p>
<ol start="1" type="l">
<li>sunday</li>
<ol type="a">
<li>introduction to html</li>
<li>creating list</li>
</ol>
<li>monday</li>
<ol type="A">
<li>creating table</li>
<li>preparing image</li>
</ol>
<li>tuesday</li>
<ol type="l">
<li>creating list</li>
<li>preparing website</li>
</ol>
<li>wednesday</li>
</ol>
</body>
</html>
contoh hasil :
shedule for html course
  1. sunday
    1. introduction to html
    2. creating list
  2. monday
    1. creating table
    2. preparing image
  3. tuesday
    1. creating list
    2. preparing website
  4. wednesday

Tabel type ordered list:
Tag
Attribut
Value
Description
<OL>
TYPE
I
i
A
A
Upper roman
Lower roman
Upercase
LOwercase
<OL>
START
N
Begin number



Font

FONT (huruf) berfungsi untuk menentukan format sebuah tampilan font document seperti : ukuran ,color,text maupun paragraf.


<html>
<head>
<title>formating font</title>
</head>
<font color="#9966ff" size="5">
setting up web server
</font>
</p>
<font face ="courier new courier ,mono">
to run web application,you need a web server .
a web server is sofware that servers file in reponse
to requests from web browsers.
a web server is sometimes called an http server .
common web servers include iis,netcape enterprise sever, iplanet web server, and apache http server.
</font>
<body>
</body>
</html>



Seperti contoh di atas : 




<font color="yellow" size="5"> yang artinya font pada baris kelima adalah berwarna yellow /kuning 
tabel attribut font:
Attribut
Desscription
Color
Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal(#000000-#ffffff)
Size
Untuk menentukan ukuran font 1-7
Face
Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dana akan di baca mulai dari yang paling kiri.

color 
merupakan attribut yang bisa anda tambahkan pada beberapa element seperti body,font,link, dan yang lainnya .color di bagi dalam tiga kategori warna primer yaitu red,greenh dan blue .masing-masing color di definsikan dalam dua digit hexadecimal number .
tabel color:


hexadecimal
color
#FF0000
Red
#00FF00
Green
#0000FF
Blue
#000000
Black
#FFFFFF
White

Alignment
Align attribute di gunakan untuk menentukan perataan obejct dalam dokument HTML baik berupa text,object,image,paragraph,division dan lain-lain.
tabel value Alignment:
Value
Description
left
Rata kiri
right
Rata kanan
center
Rata tengah
justify
Rata kanan kiri


Format text
Physical formatting
tabel physical formatting:
Tag
Descriftion
<B>...</B>
Bold text
<I>...</I>
Italic text
<U...</U>
Undeline text
<BIG>...</BIG>
Untik ukuran yang lebih besar dari normal
<SMALL>...
</SMALL>
Untuk ukuran yang lebih kecil dari normal
<STRIKE>...
</STRIKE>
Untuk memberi garis di tengah text
<SUP>...</SUP>
Superscript text
<SUB>...</SUB>
Subscript text
<CENTER>...
</CENTER>
Center document


Logical formatting
tabel logical formatting:
Tag
Description
<EM>...</EM>
Text miring /<I>
<STRONG>...
</STRONG>
Text tebal/ <B>
<DEL>...</DEL
Mencoret text / <STRIKE>
<INS>...</INS>
Underline text / <U>



Definition list

DEFINITION LIST adalah tag istilah yang nantinya akan di definisikan





<dl>
<dt>html
<dd>hypertext markup langguage is not langguage programming</dd>
</dt>
<dt>http
<dd>hypertext transfer protocol is tpc/ip protocol</dd>
</dt>
<dt>internet
<dd>a network of network</dd>
</dt>
<dt>tpc/ip
<dd>internet protocol</dd>
</dt>
</dl>
</body>
</html>

contoh :





































Definition list <DL> istilah yang akan di definisikan dan diakhiri </DL>

<DD>definisi istilah yang ada di atas dan di akhiri dengan</DD>



Horizontal list
horizontal rule tag di gunakan untuk menggambarkan garis horizontal dalam dokumen HTML






Attribut
descriftion
position
Menentukan posisi dari HR ,dengan value : canter,right,,left.
width
Untuk menetukan panjang HR default 100%
size
Untuk menentukan tebal dari HR dalam pixel
noshad
Efek bayangan


Inline atau text level element
  • EM,I,B dan font (format font)
  • A (hyperlink)
  • BR(break line)
  • Applet (java applet)
  • Img (image)