Apa yang dimaksud HTML dan HTTP?

HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

Table of Contents Show

(*) Important Note:
Apa itu HTML dan HTTP?
Apakah yang dimaksud dengan HTTP?
Apa yang dimaksud dengan HTML dan berikan contohnya?
Apa itu HTTP dan fungsinya?

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

Membuat halaman web.
Menampilkan berbagai informasi di dalam sebuah browser Internet.
Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

Pengaturan Division Tag:

<div> … </div>	Division (or Section) of Page Content
<p> … </p>	Paragraph of Text
<br>	Line Break
<hr>	Basic Horizontal Line
<hr> Tag Attributes:
size=”?”	Line Thickness in pixels
width=”?”	Line Width in pixels
width=”??%”	Line Width as a percentage
color=”#??????”	Line Colour
align=”?”
Horizontal Alignment: `left, center, right`
noshade	No 3D cut-out
…	Line Break

Contoh:

<div style="text-align: center; color: black;">
<span style="font-size:18px;">Bendera</span><br />
<span style="color: red;">merah</span>
<hr style="color:blue; width:50%;" /> 
<span style="color: white; background-color: red; font-size:24px;">putih</span>
</div>

Hasilnya

Pengaturan Image Tag:

<img src=”url” alt=”text“>	Basic Image
<img> Tag Attributes:
src=”url“	URL or filename of image (required!)
alt=”text“	Alternate Text (required!)
align=”?”	Image alignment within surrounding text
width=”??”	Image width (in pixels or %)
height=”??”	Image height (in pixels or %)
border=”??”	Border thickness (in pixels)
vspace=”??”	Space above and below image (in pixels)
hspace=”??”	Space on either side of image (in pixels)

Contoh:

<div align="center">
<img style="width: 105px; height: 105px; border-width: 1px; 
border-style: solid; margin: 10px;" 
src="https://us02images.zoom.us/p/EijUUiRfQsWh3ryzOuz3HA/2d7acef0-6ce1-4ab0-a21c-6936df3bc819-4080?type=small" alt="Logo UNIKAMA" />
</div>

Hasilnya:

Pengaturan Link Tag:

<a href=”url“> link text </a>	Basic Link
<a> Tag Attributes:
href=”url“	Location (url) of page to link to.
name=”??”	Name of link (name of anchor, or name of bookmark)
target=”?”	Link target location: `_self, _blank, _top, _parent`.
href=”url#bookmark“	Link to a bookmark (defined with `name` attribute).
href=”mailto:email“	Link which initiates an email (dependant on user’s email client).

Contoh:

<p>
Link ke <a href="https://unikama.ac.id" target="_blank" title="Masuk ke Website UNIKAMA">Website UNIKAMA</a>
</p>

Hasilnya:
Link ke Website UNIKAMA

Variasi 1 memberi warna tertentu pada link:

<p>Link ke <a href="http://unikama.ac.id" target="_blank" title="Masuk ke website UNIKAMA"><span style="color:#FF0000;">UNIKAMA</span></a></p>

Hasilnya:

Link ke UNIKAMA

Variasi 2, memberi warna link yang akan berubah jika mouse lewat di atas link:

<div align="left">Link ke <a title="Masuk ke website UNIKAMA" href="http://unikama.ac.id" target="_blank"><font style="color: 'red';" onmouseover="color:'blue';" onmouseout="color:'red';">UNIKAMA</font></a></div>

Link ke UNIKAMA

Variasi 3, mengganti link teks dengan gambar:

<div align="center"><a href="http://UNIKAMA.com" target="_blank" title="Masuk ke website UNIKAMA"><img src="http://UNIKAMA.com/gb/logo.png" style="width: 105px; height: 105px; border-width: 0px; 
border-style: solid; margin: 10px;" /></a></div>

Hasilnya:

Variasi 4 mengganti link gambar jika mouse di atas link gambar :

<div align="center"><a title="Masuk ke website UNIKAMA" href="http://UNIKAMA.com" target="_blank"><img style="width: 105px; height: 105px; border-width: 0px; border-style: solid; margin: 10px;" src="http://UNIKAMA.com/gb/logo.png" onmouseover=" src='http://UNIKAMA.com/gb/logo2.png';" onmouseout="src='http://UNIKAMA.com/gb/logo.png';" alt="Logo UNIKAMA" /></a></div>

Hasilnya:

Pengaturan List Tag:

<ol> … </ol>	Ordered List
<ul> … </ul>	Un-ordered List
<li> … </li>	List Item (within ordered or unordered)
<ol type=”?“>	Ordered list type: `A, a, I, i, 1`
<ol start=”??”>	Ordered list starting value
<ul type=”?“>	Unordered list bullet type: `disc, circle, square`
<li value=”??”>	List Item Value (changes current and subsequent items)
<li type=”??”>	List Item Type (changes only current item)
<dl> … </dl>	Definition List
<dt> … </dt>	Term or phrase being defined
<dd> … </dd>	Detailed Definition of term

Contoh:

<ol type="A">
    <li>Judul</li>
    <li>Sub Judul</li>
    <li>Sub Sub Judul</li>
</ol>

<ol type="1">
    <li>Judul</li>
    <li>Sub Judul</li>
    <li>Sub Sub Judul</li>
</ol>

<ul type="circle">
    <li>Judul</li>
    <li>Sub Judul</li>
    <li>Sub Sub Judul</li>
</ul>

<ul type="square">
    <li>Judul</li>
    <li>Sub Judul</li>
    <li>Sub Sub Judul</li>
</ul>

Hasilnya

Judul
Sub Judul
Sub Sub Judul

Judul
Sub Judul
Sub Sub Judul

Judul
Sub Judul
Sub Sub Judul

Judul
Sub Judul
Sub Sub Judul

Pengaturan Table Tag:

<table> … </table>	Define a Table
<table> Tag Attributes:
border=”?”	Thickness of outside border
bordercolor=”#??????”	Border Colour
cellspacing=”?”	Space between cells (pixels)
cellpadding=”?”	Space between cell wall and content
align=”??”	Horizontal Alignment: `left, center, right`
bgcolor=”#??????”	Background Colour
width=”??”	Table Width (pixels or %)
height=”??”	Table Height (pixels or %)
<tr> … </tr>	Table Row within table
<th> … </th>	Header Cell within table row
<td> … </td>	Table Cell within table row
<td> Tag Attributes:
colspan=”?”	Number of columns the cell spans across (cell merge)
rowspan=”?”	Number of row a cell spans across (cell merge)
width=”??”	Cell Width (pixels or %)
height=”??”	Cell Height (pixels or %)
bgcolor=”#??????”	Background Colour
align=”??”	Horizontal Alignment: `left, center, right`
valign=”??”	Vertical Alignment: `top, middle, bottom`
nowrap	Force no line breaks in a particular cell

Contoh:

<table align="center" bgcolor="lightyellow" border="1" cellpadding="5" cellspacing="0" height="300" width="466">
        <tr>
            <td style="text-align: center;"><span style="color:#FF0000;"><strong>No.</strong></span></td>
            <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 2</strong></span></td>
            <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 3</strong></span></td>
            <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 4</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: center;">1.</td>
            <td><span style="color:#0000FF;">Isi sel kolom 2 baris 1</span></td>
            <td><span style="color:#0000FF;">Isi sel kolom 3 baris 1</span></td>
            <td><span style="color:#0000FF;">Isi sel kolom 4 baris 1</span></td>
        </tr>
        <tr>
            <td style="text-align: center;">2.</td>
            <td style="text-align: right;">Isi sel kolom 2 baris 2</td>
            <td style="text-align: right;">Isi sel kolom 3 baris 2</td>
            <td style="text-align: right;">Isi sel kolom 4 baris 2</td>
        </tr>
        <tr>
            <td style="text-align: center;">3.</td>
            <td style="text-align: center;"><a href="http://UNIKAMA.com" target="_blank"><img alt="Logo UNIKAMA" src="http://UNIKAMA.com/gb/logo.png" style="width: 50px; height: 50px; margin: 1px;" /></a></td>
            <td bgcolor="#dddddd" style="text-align: center;"><span style="color:#800080;">Warna background lain</span></td>
            <td style="text-align: center;">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: center;">Jumlah</td>
            <td>Rp. 1234</td>
        </tr>
</table>

Hasilnya:

No.	Kolom 2	Kolom 3	Kolom 4
1.	Isi sel kolom 2 baris 1	Isi sel kolom 3 baris 1	Isi sel kolom 4 baris 1
2.	Isi sel kolom 2 baris 2	Isi sel kolom 3 baris 2	Isi sel kolom 4 baris 2
3.		Warna background lain
Jumlah	Rp. 1234

—

Embed Iframe, memasang halaman web lain di web kita:

<div align=”center”>
<iframe src=”http://UNIKAMA.com/shalat/” width=”100%” height=”700px” border=”0″ frameborder=”0″ ></iframe>
</div>

Hasilnya:

Embed Youtube:

<div align=”center”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/n5vjCqnVb6s” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</div>

HASILNYA:

Pengaturan Frame Tag:

<frameset> … </frameset>	Define the set of Frames
<frameset> Tag Attributes:
rows=”??,??, …”	Define row sizes & number of rows (size in pixels or %)
cols=”??,??, …”	Define column sizes & number of columns (size in pixels or %)
noresize=”noresize”	User cannot resize any frames in frameset
<frame> … </frame>	Define a frame within the frameset
<frame> Tag Attributes:
src=”url”	Location of HTML File for a frame
name=”***”	Unique name of frame window
marginwidth=”?”	Horizontal margin spacing inside frame (pixels)
marginheight=”?”	Vertical margin spacing inside frame (pixels)
noresize=”noresize”	Declare all frameset sizes as fixed
scrolling=”***”	Can the user scroll inside the frame: `yes, no, auto`
frameborder=”?”	Frame Border: (`1`=yes, `2`=no)
bordercolor=”#??????”	Border Colour
<noframes> … </noframes>	Unframed content (for browsers not supporting frames)

Contoh:

<frameset cols="25%,*,35%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

Hasilnya:

(*) Important Note:

Tags marked with (*) should still work, but have been superseeded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.

Apa itu HTML dan HTTP?

HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web.

Apakah yang dimaksud dengan HTTP?

Hypertext Transfer Protocol (HTTP) merupakan sebuah protokol jaringan aplikasi yang digunakan untuk mendistribusikan informasi antara server dengan client. Server disini yang dimaksud adalah jenis web server dengan bentuk fisik jaringan komputer yang memiliki kapasitas penyimpanan data berskala besar.

Apa yang dimaksud dengan HTML dan berikan contohnya?

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser).HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya ...

Apa itu HTTP dan fungsinya?

Hypertext Transfer Protocol atau disingkat HTTP adalah sebuah protokol jaringan lapisan aplikasi yang digunakan untuk membantu proses pertukaran data dalam internet antar komputer satu dengan lainnya. Data tersebut bisa berupa file, gambar, maupun video.