Showing posts with label html_css. Show all posts
Showing posts with label html_css. Show all posts
Pengertian URL

Pengertian URL

Html | Pengertian URL | Budayakan Berbagi

Memahami URL

URL atau Uniform Resource Locator menetapkan tempat dimana anda dapat menemukan resource padL sebagai alamat web. Ketika anda menjelajah situs web, anda akan melihat URL dari tiap halaman web pada address bar pada browser anda.

Ada 3 bagian kunci pada URL : skema, alamat host dan filepath.

SKEMA mengidentifikasi cara sebuah file ditransmisikan. Hampir semua web menggunakan apa yang dinamakan hypertext Transfer Protocol (HTTPS) untuk melewatkan informasi kepada anda, inilah mengapa hampir semua web diawali dengan http://, meskipun anda mungkin menemukan prefiks lain seperti https:// ketika melakukan layanan perbankan atau ftp:// ketika melakukan penunduhan file besar.

ALAMAT HOST biasanya merupakan nama domain untuk sebuah situs, seperti time.com. alamat host dapat pula berupa sebuah angka yang sering dikenal dengan nama alamat IP. Semua komputer yang terhubung ke internet dapat ditemukan menggunakan alamat IP. Alamat IP merupakan sebuah konstruksi 12 digit yang dipisahkan dengan simbol titik. Ketika anda memasukkan sebuah nama domain ke dalam browser, dibalik layar nama tersebut dikonversi menjadi alamat IP untuk komputer yang menyimpan situs web tersebut. Ini dilakukan dengan menjejak DNS (Domain name server), yang memuat nama-nama direktori dan alamat-alamat IP.

FILEPATH selalu diawali dengan karakter slash maju (/) dan dapat memuat satu atau lebih nama direktori (ingat bahwa sebuah direktori merupakan nama lain dari folder pada web server). Filepath diakhiri dengan nama file.

URL ABSOLUT DAN URL RELATIF URL

absolut memuat segala sesuatu yang anda butuhkan untuk mengidentifikasi secara unik file tertentu pada internet. Ini merupakan apa yang anda ketikkanke dalam address bar pada browser untuk mencari sebuah halaman. Sebagai contoh, untuk mendapatkan halaman tentang film fiksi pada situs berita sebelumnnya, anda dapat mengetikkan URL berikut :
http://www.ContohSitus.com/Hiburan/Film/indeks.html
Seperti yang anda lihat, URL absolut bisa menjadi panjang, dan setiap halaman pada sebuah situs web dapat memuat banyak link. Ketika melakukan link ke sebuah halaman pada situs anda, anda dapat menggunakan format pendek: URL relatif.

URL relatif mengidentifikasi tempat dimana resource yang berkaitan pada halaman berbeda. Beberapa contoh sebelumnya pada bab ini, yang menghubungkan ke halaman lain pada direktori yang sama, merupakan contoh-contoh dari URL relatif. Anda dapat pula menggunakan URL relatif untuk file-file pada direktori yang berbeda. Sebagai contoh bayangkan anda sedang melihat halaman beranda dari bagian hiburan pada situs berikut :
http://www.ContohSitus.com/Hiburan/indeks.html
anda ingin menambahkan sebuah link ke halaman-halaman indeks dari tiap subbagian: Film, TV, Artis dan Musik. Dari pada menggunakan URL penuh untuk setiap halaman, anda dapat menggunakan URL relatif. Sebagai contoh :
Film/indeks.html
TV/indeks.html
Artis/indeks.html
Musik/indeks.html
Anda tentu setuju, hal ini lebih cepat dari pada harus menuliskan berikut :
http://www.ContohSitus.com/Hiburan/Film/indeks.html
http://www.ContohSitus.com/Hiburan/TV/indeks.html
http://www.ContohSitus.com/Hiburan/Artis/indeks.html
http://www.ContohSitus.com/Hiburan/Musik/indeks.html

SUBDIREKTORI

direktori Film, TV, Artis, dan musik adalah semua sub direktori dari direktori Hiburan. Jika anda menuliskan sebuah halaman pada direktori Hiburan, anda dapat menciptakan link ke setiap halaman indeks dari sub-subdirektori tersebut.
Film/indeks.html
TV/indeks.html
Artis/indeks.html
Musik/indeks.html
Anda harus mencamtumkannama dari subdirektori, yang diikuti dengan karakter slash maju (/), dan nama dari halaman yang ingin dituju.

Untuk setiap subdirektori lainnya, anda hanya perlu menambahkan nama direktori yang diikuti dengan karakter slash maju. Jadi, jika nada menciptakan sebuah link dari halaman pada folder akar darisitus (halaman beranda dari situs), anda menggunakan URL relatif berikut :
Hiburan/Film/indeks.html
Hiburan/TV/indeks.html
Hiburan/Artis/indeks.html
Hiburan/Musik/indeks.html

DIREKTORI INDUK

Jika anda ingin menciptakan sebuah link dari satu direktori ke direktori induknya, anda menggunakan notasi ../, dua simbol titik yang diikuti dengan karakter slash maju. Sebagai contoh, dari sebuah halaman padadirektori Musik ke sebuah halaman pada direktori Hiburan, URL relatif yang anda gunakan menjadi seperti berikut :
../indeks.html
Jika anda ingin menambahkan link dari direktori Musik ke direktori akar, anda perlu mengulangi notasi berikut :
../../indeks.html
Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

Memahami Struktur Direktori pada situs Website

Html | Memahami Struktur Direktori pada situs Website | Budayakan Berbagi
Direktori merupakan nama lain dari folder pada sebuah situs web. Sama seperti sebuah hard disk anda yang membuat berbagai folder, situs web juga dapat memuat beberapa direktori. Biasanya, anda akan menemukan bahwasebuah situs web memuat beberapa direktori, dan bahwa setiap direktori memuat bagian-bagian yang berbeda dari situs tersebut. Misalnya, sebuah situs berukuran besar dengan beberapa subbagian akan memiliki suatu direktori terpisah untuk tiap bagian dari situs tersebut, dan juga beberapa direktori untuk tiap tipe file (citra ditempatkan disatu direktori dan style sheet di direktori lain).

Sama seperti kebutuhan anda dalam mengorganisir file-file pada hard disk, adalah sangat penting untuk mengorganisir file-file pada situs web anda ke dalam direktori-direktori sehingga anda dapat melakukan pencarian dengan lebih mudah dan dapat mengendalikan semua file yang ada. Seperti yang anda bayangkan, jika semua file yang digunakan pada sebuah situs web ditempatkan pada direktori yang sama, maka direktori tersebut akan menjadi kompleks dan berukuran sangat besar.
Gambar berikut menjukkan sebuah struktur direktoricontoh untuk sebuah situs berita, dengan folder-folder terpisahuntuk setiap bagian. Perhatikan pula bagaimana bagian musik memiliki beberapa folder untuk subbagian Fitur, MP3 dan Review. Di samping itu, folder utama memiliki 3 folder yang dipakai untuk menampung tipe file citra, script dan stylesheet.

Ketika anda mulai membangun sembarang situs web, anda sebaiknya menciptakan sebuah struktur direktori yang baik untuk mengantisipasi perkembangan ukuran situs web tersebut.

Seperti yang anda pelajari tentang link, adalah berguna untuk mempelajari beberapa istilah yang dipakai untuk menjelaskan struktur direktori dan relasi antar direktori sebagai berikut :
  • Direktori akar atau folder akar (root directory) adalah direktori utama yang memuat semua isi situs web anda. Pada kasus ini, ia dinamakan dengan contoh ContohSitus.com.
  • Subdirektori adalah sebuah direktori yang berada di dalam direktori yang lain. Di sini, Film merupakan sebuah subdirektori dari Hiburan.
  • Direktori induk (parent directory) adalah sebuah direktori yang memuat direktori lain. Di sini, Hiburan adalah direktori induk dari Artis, Film, Musik, dan TV.
Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

DAFTAR TAG PADA HTML

Html | Daftar tag pada Html | Budayakan Berbagi
Sebelumnya saya berterima kasih atas kunjungannya. Jadi disini kita akan membahas mengenai daftar tag pada html. Tag pada html ini cukup penting, karena kita akan membuat desain yang lebih menarik dengan memanfaatkan atribut-atribut yang disesuaikan dengan nilai padasetiap atribut yang kita terapkan.

Berikut ini adalah tabel tag-tag pada HTML dan fungsinya untuk melengkapi kkekurangan dari artikel atribut dan tag pada html sebelumnya :
  1. Tag Font
    Tag Atribut Deskripsi
    <font></font> color
    Size
    name
    Mengubah gaya suatu huruf
  2. Link
    Tag Atribut Deskripsi
    <a></a> Href
    Target
    Style
    Class
    Name
    Id
    Membuat link ke dokumen lain atau situs lainnya.
  3. Gambar
    Tag Atribut Deskripsi
    <img> Src
    Alt
    Name
    Border
    Height
    Width
    Menampilkan sebuah gambar
  4. Formatting
    Tag Deskripsi
    <blockquote></blockquote> Digunakan untuk mengatur teks dan
    gambar dalam suatu tag
    <ol></ol> Ordered List (digunakan dengan <li<)
    <ul></ul> Unordered List (digunakan dengan <li<)
    <li></li> Digunakan untuk mengatur teks dan
    gambar dalam suatu tag
    <blockquote></blockquote> Elemen List
    <dd></dd> Definition List
    <dt> Definition Term
    Definition Description
    <br> Baris Baru
    <hr> Garis Horisontal
    <center></center> Menengahkan Elemen
  5. Tabel
    Tag Atribut Deskripsi
    <table></table> Border
    cellpadding
    cellspacing
    width
    height
    name
    id
    title
    bgcolor
    background
    align
    valign
    Mengubah semua elemen tabel
    <tr></tr> height
    title
    bgcolor
    background
    align
    valign
    Membuat baris baru
    <td></td> height
    width
    bgcolor
    background
    align
    valign
    title
    colspan
    rowspan
    Membuat kolom
    <th></th> height
    width
    bgcolor
    background
    align
    valign
    title
    colspan
    rowspan
    Header(kepala tabel). Otomatis ke tengah dan tebal.
    <tbody></tbody> height
    width
    align
    valign
    bgcolor
    background
    Format yang berlaku bagi cell yang diapit tag.
    <colgroup></colgroup> height
    width
    align
    valign
    bgcolor
    background
    colspan
    Format yang berlaku bagi kolom
  6. Form
    Tag Atribut Deskripsi
    <form></form> method
    action
    name
    Mengatur elemen dari form
    <input type=> text
    password
    hidden
    radio
    checkbox
    submit
    image
    reset
    Variasi dari tipe elemen form
    <font></font> color Mengubah gaya suatu huruf
    text name
    value
    width
    maxlength
    password name
    value
    width
    maxlength
    hidden name
    value
    Digunakan untuk membuat variable hidden.
    radio name
    value
    -
    checkbox name
    value
    checked
    -
    submit value -
    image src
    height
    width
    alt
    name
    border
    -
    reset value -
    <select></select> name
    size
    Membuat combobox. Digunakan bersama dengan option
    <option> selected
    name
    value
    -
    <textarea></textarea> name
    rows
    cols
    wrap
    -
    wrap off
    virtual
    physical
    no wrap
    word wrap, sent as one line
    word wrap, sent with breaks
Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja seperti <table> <input> <ul>. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham, BETUL?.

Okey, buat teman-teman klau ada yang kurang dipahami silahkan komentar baik mengenai artikel ini atau mengenai masalah web. Insya allah kami siap membantu. Selamat berjuang dan semoga ilmunya tersampaikan ...


Sekian dan semoga Bermanfaat ...

ATRIBUT DAN TAG PADA HTML

Html | Atribut dan tag pada html | Budayakan Berbagi

ATRIBUT DAN TAG PADA HTML

Okey. Sebelumnya saya berterima kasih telah mampir diblog ini. Saya harap teman-teman telah paham mengenai materi yang sebelumnya kita bahas dasar html, dimana di dalamnya terdapat materi mengenai html dan apa saya yang kita butuhkan dalam belajar html atau membuat suatu web. Okey, langsung saja kita ke pembahasan materi.

Perintah dalam dokumen html terdiri dari berbagai struktur penyusunan seperti : Tag, atribut dan nilai.
Elemen html ada yang memiliki atribut dan nilai tertentu. Atribut bersifat optional. Sebuah atribut bisa digunakan oleh beberapa perintah. Ada perintah html yang dapat digunakan bila ditulis atributnya, namun ada pula perintah html yang memang tidak memiliki atribut.
Format penulisannya adalah sebagai berikut :

<Perintah atribut 1="nilai" atribut 2="nilai" ... atribut 3="nilai">
... Objek yang diatur ...
</Perintah >
Contoh mendefinisikan atribut pada sebuah perintah html :

Tag Fungsi
<html> Untuk memulai sebuah html
<head> Bagian header atau diatas
<title> Untuk memberi judul dan akan muncul di tab browser
</title> Untuk penutup title yang di awali garing miring
</head> Untuk penutup header yang di awali garing miring
<body> Untuk Bagian Body atau Isi dalam HTML
</body> Untuk Penutup menutup Body dan diawali dengan garis miring
</html> Untuk menutup html yang diawali garis miring

Disini ada beberapa tag dasar yang akan kita gunakan dalam penulisan :
Tag Keterangan
<h1> - <h6> ini adalah Tag Heading, yang berlevel 1, selain <h1> ada juga <h2>, <h3>, <h4>, <h5>, <h6>.
<b> (Bold) Perenannya untuk membuat Huruf menjadi lebih Tebal
<br> untuk Membuat sebuah baris baru atau enter
<body-bgcolor="black"> Peranannya untuk memberi warna untuk background atau latar belakang dan "red" bisa diganti sesuai keinginan anda, misalnya "blue".
<font-color="red"> Untuk mengatur warna Text dan ditutup dengan tag </font>
<font-size="12"> untuk mengatur Ukuran Sebuah Text dan ditutup dengan </font>
<font-face="arial"> Untuk mengatur jenis Font atau Text yang akan digunakan
<i> (Italic) Fungsinya untuk membuat Huruf menjadi Miring
<p> Untuk membuat sebuah Paragraf baru
<u> (Underline) Fungsinya untuk membuat dibawah huruf berisi garis
<hr> untuk membuat sebuah garis Horizontal
<center> untuk menciptakan tulisan atau gambar berada di tengah-tengah
<strong> Tebal penekanan
<em> Miring Penekanan
<img src="nama gambar.format atau Url gambar anda"> fungsinya untuk memasukan sebuah gambar
<marquee> untuk membuat sebuah text ataupun gambar agar bergerak.
<sub> Subscript-tampilan pangkat bawah.
<sup> Subscript-tampilan pangkat atas.
<small> Mengecilkan ukuran tulisan.
<big> Membesarkan ukuran tulisan.
<tt> Menampilkan tulisan seperti huruf mesin ketik manual.


Karakter - karakter khusus :
Entitas Keterangan
© Copyright
® Registered
© Copyright
™ Trade mark
& Ampersand
« Anggle quotation mark (left)
» Anggle quotation mark (right)
£ Poundsterling
€ Euro
¥ Yen
< Lebih kecil
> Lebih besar
  Non Breaking space

Okey, buat teman-teman klau ada yang kurang dipahami silahkan komentar baik mengenai artikel ini atau mengenai masalah web. Insya allah kami siap membantu. Selamat berjuang dan semoga ilmunya tersampaikan ...
Sekian dan semoga Bermanfaat ...

MENGENAL HTML

Html | Mengenal html | Budayakan Berbagi

MENGENAL HTML

Sebelumnya saya berterima kasih atas kunjungannya. Jadi disini kita akan membahas mengenai pengenalan html atau mengenal html dan apa saja yang kita butuhkan untuk memulai belajar membuat suatu web atau belajar script html. Jadi script html merupakan dasar dalam membuat suatu web. Kenapa dasar ? karena bahasa html-lah yang akan menampilkan web yang kita rancang di browser, yang telah diterjemahkan sehingga html dikatakan merupakan dasar dalam pembuatan web.

Penemuan www atau world wide web sangat berdampak besar terhadap perkembangan internet. Dengan adanya www sebuah situs dapat berisi sekumpulan informasi berupa teks, gambar dan video. www merupakan url atau alamat web yang ingin ditampilkan. Web didesain dengan menggunakan bahasa html. Html merupakan singkatan dari Hyper Text Markup Language atau merupakan bahasa pemprograman yang digunakan untuk membuat sebuah website. HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. Menggunakan tag-tag tertentu untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan di web browser.

Sampai saat ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa). Tim Berners Lee lahir di inggris tepatnya dikota London, 8 juni 1955. Kedua orang tuanya merupakan ahli matematika. Tim burners Lee adalah seorang lulusan dari Queen's College di Universitas Oxford pada tahun 1976. Kontribusi terbesar Berners Lee terhadap perkembangan internet adalah dengan tidak menpatenkan world wide web sehingga www dapat digunakan secara bebas.

SEKILAS TENTANG HTML

HTML adalah bahasa dari World Wide Web yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser. Html terdiri dari kode-kode tertentu yang akan memerintahkan web browser untuk menampilkan informasi. baik itu berupa teks, gambar, suara dan lain-lain. Disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Tiap kali kita mengakses dokumen web, maka sesungguhnya kita mengakses dokumen seseorang yang ditulis dengan menggunakan format HTML. Pada Html dipergunakan hypertext link atau hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.

BELAJAR HTML

Untuk memulai belajar html dibutuhkan dua software (Aplikasi) yaitu Html editor dan web browser. Html editor digunakan untuk mengetikkan script/ kode-kode html. Beberapa contoh aplikasi html editor : Dreamweaver, Notepad, Notepad ++, Sublime Text, dan lain-lain. Sedangkan, Web browser merupakan aplikasi yang digunakan untuk mengakses suatu halaman website dan berfungsi menerjemahkan kode (Script) Html yang biasanya ditambahkan JavaScript menjadi sebuah Informasi yang sudah tertata dan menarik secara visual. Beberapa contoh dari aplikasi web browser adalah Internet Explorer, Opera, google Chrome, Mozilla, Firefox, dan lain-lain. Kita hanya membutuhkan salah satu saja. Karena setiap computer yang menggunakan sistem operasi windows telah memiliki aplikasi Internet Explorer.

Buat teman-teman yang ingin belajar web jangan menyerah, jika ada sesuatu yang belum dipahami silahkan berkomentar. Insya allah kami siap membantu sampai teman dapat memahami html dan lanjut ke materi selanjutnya. Selamat Berjuang !!!


Sekian dan semoga Bermanfaat ...