Tutorial HTML Dasar untuk Pemula
Tutorial HTML Dasar untuk Pemula
HTML DASAR|Carlos
Tutorial HTML
Pekerjaan penelitian: 1
TUTORIAL HTML
Pengantar HTML
Apa arti HTML? dan contoh pertama dari manual ini.
2
Label pertama dari file adalah <html>. Ini memberi tahu peramban bahwa ia
ini adalah sebuah file HTML. Untuk menutup file, kita menggunakan </html>. Semua yang
terletak di antara dua tag adalah kode HTML dari halaman.
Kemudian kita melihat label <head>. Apa yang mengikuti sampai penutupnya
</head>, adalah bagian kepala dokumen dan tidak ditampilkan di layar. Di sini
kami menempatkan informasi seperti judul halaman (<title>Halaman Pertama Saya
halaman Web</title>), kata kunci untuk mesin pencari, sebuah
deskripsi halaman dan data lain dari dokumen.
Nota: perhatikan bahwa semua tag penutup berbeda dari tag yang
pembukaan dengan membawa "/" sebelum nama.
Tutorial HTML
Aturan dasar
Label HTML
Mari kita lihat sebuah contoh.
Elemen HTML dimulai dengan tag pembuka <b> (tag yang kita
tunjukkan teks dalam huruf tebal).
Konten elemen tersebut adalah: Teks ini dicetak tebal.
Akhir elemen HTML adalah dengan tag penutup </b>.
Banyak label memiliki atribut. Mereka memberikan informasi yang lebih lengkap.
ke elemen HTML.
Atribut selalu mengikuti struktur: nama="nilai".
Atribut selalu berada di dalam tag pembuka.
Nilai selalu harus ditempatkan dalam tanda kutip.
Meskipun HTML menerima tag dalam huruf besar <B> maupun huruf kecil
<b>,Konsorsium World Wide Web (W3C)merekomendasikan penggunaan huruf kecil.
Selain itu, XHTML (versi berikutnya dari HTML) hanya menerima huruf kecil.
Itulah sebabnya kami menyarankan untuk terbiasa menggunakan huruf kecil ketika
tuliskan kode HTML Anda.
Tutorial HTML
Judul
6
Kami mendefinisikan ukuran judul atau kepala.
Paragraf
Komentar
Label <!-- ... --> digunakan untuk menyisipkan komentar di dalam kode
yang kita tulis. Itu diabaikan oleh browser pada saat ini
membaca. Komentar membantu kita menjelaskan kode dengan lebih baik dan berasal dari
bantuan besar pada saat kita membutuhkannya untuk mengedit.
Salto de línea
Tag <hr> memungkinkan kita untuk membuat garis horizontal seperti yang memisahkan
berbagai bagian dari tutorial ini.
8
Tutorial HTML
10
Penggunaan aksen, tanda pembuka tanda tanya dan tanda seru, enye, spasi
dalam keadaan kosong, dll.
11
Karakter khusus
Sering kali kita perlu menyertakan dalam teks kita, tanda yang memiliki sebuah
makna khusus dalam HTML (misalnya, "<" - lebih kecil dari). Untuk dapat menampilkannya
kita harus menggunakan nama sandinya.
Penggunaan yang paling umum dari karakter khusus adalah spasi. Jika di
Sebuah teks memiliki 5 spasi kosong berturut-turut, HTML secara otomatis menghapusnya.
4. Para memasukkan spasi kosong, kita menggunakan " " dan HTML akan membiarkannya di dalam
tempat.
Penggunaan lain yang sangat umum adalah menyisipkan aksen dalam kode html melalui
dari nomor entitas
Tutorial HTML
12
Tutorial HTML
Sifat paling penting dari Internet adalah kemungkinan untuk saling terhubung.
dengan yang lainnya.
13
sebuah gambar
sebuah video
sebuah berkas suara
situs di web (halaman web lain)
mengirim email
Untuk itu kita harus menggunakan tag <a> yang berasal dari huruf pertama dari
palabraanchor(ancla).
Atribut target
Ini digunakan untuk menentukan di mana kita ingin dokumen terbuka saat ditekan
tentang tautan.
14
Atribut name
Setelah tujuan ditetapkan, kita dapat membuat tautan ke sana dari yang sama
dokumen atau dari yang berbeda, menggunakan karakter "#" diikuti oleh
nama elemen.
Misalnya:
Seringkali kita ingin menggunakan gambar sebagai tautan ke dokumen lain. Untuk
Kita harus meletakkan tag <img> di antara tag <a> dan </a> dalam
tempat teks.
16
Tutorial HTML
17
Atribut standar
Peristiwa intrinsik
Tutorial HTML
Frames di HTML
Kami membagi halaman menjadi bagian-bagian yang lebih kecil dan di masing-masing bagian tersebut kami visualisasikan
18
Apa itu frame?
Frames (marco dalam bahasa Indonesia) memungkinkan penulis untuk menyajikan dokumen
dengan tampilan ganda.
Ini memungkinkan untuk menjaga informasi tertentu tetap terlihat sementara tampilan lainnya
dipindahkan atau diganti.
Label kerangka
Label bingkai
Label <frame> menentukan dokumen apa yang akan kita tempatkan di setiap bingkai.
Dalam contoh ini, kami membagi layar menjadi satu kolom 25% dan satu kolom 75%.
Kolom pertama berisi dokumen "[Link]" dan kolom kedua
kolom dokumen "[Link]". Tag <frame> tidak boleh membawa
etiket penutupan.
Tutorial HTML
Tag iframe
Etiquet <iframe> digunakan untuk membuat frame di dalam halaman yang berisi
dokumen lain.
Dengan kata lain, saya dapat menampilkan jendela yang berisi halaman Web lain
di dalam halaman yang sedang kita desain
Dalam contoh ini, kita dapat melihat bahwa jendela hasil menunjukkan bahwa kami
menampilkan halaman utama [Link].
Tutorial HTML
20
Tutorial HTML
21
Atribut standar
Acara intrinsik
Tutorial HTML
Tabel HTML
Kami menggunakannya untuk menyusun sebuah situs atau sekadar sebagai tabel data.
Karakteristik tabel
Bingkai tabel
23
Nota: dengan tidak menempatkan atribut border, batas tidak ditampilkan tetapi
tabel ada.
Judul tabel
Margin sel
Ini adalah ruang yang berada di antara tepi sel dan isinya.
Kami mendefinisikan margin dengan atribut cellpadding.
Tutorial HTML
24
Nota: dalam contoh ini kita dapat melihat bahwa atribut cellpadding meninggalkan 20
piksel minimum antara kata-kata dalam setiap sel dan batas-batasnya
mismas.
25
Tutorial HTML
26
Tutorial HTML
27
Tutorial HTML
28
Tutorial HTML
Listas - Daftar
Daftar sangat ideal untuk desain menu.
Tersusun.
Tidak teratur.
Dari definisi.
Daftar Terurut
Son adalah yang mengatur daftar dengan mendahulukan angka, huruf, atau tanda.
Daftar terurut dimulai dengan tag <ol> dan untuk masing-masing dari
item-item yang sama, kami menggunakan tag <li>.
Daftar definisi 30
31
Tutorial HTML
Formulir di HTML
Panduan praktis tentang cara merancang formulir HTML untuk situs Anda.
Label formulir
Jenis kontrol:
Tombol
Kotak centang (checkboxes)
Tombol radio
Menu
Masukan teks
Pemilihan berkas (pemilihan berkas)
Kontrol tersembunyi
Kontrol tipe objek
Tag input
Kami mendefinisikan catatan di mana pengguna dapat memasukkan data.
Atributotipe spesifik menentukan jenis kontrol yang akan dibuat.
Di antara mereka terdapat nilai-nilai berikut:
Teks
Buat kontrol yang memungkinkan kita memasukkan teks dalam satu baris.
Tutorial HTML
33
Catatan: dalam contoh ini kita dapat mengamati hal berikut:
Radio tombol
Digunakan ketika kita ingin pengguna memilih satu opsi dari antara satu
serangkaian kemungkinan.
Kotak centang
34
Kata Sandi
Berfungsi sama seperti teks, tetapi teks yang dimasukkan ditampilkan melalui sebuah
serangkaian asterisk. Umumnya digunakan untuk memasukkan kata sandi.
Kirim
Atur ulang
35
Label textarea
36
Ini digunakan untuk membuat kontrol input teks multilini.
Atribut rows dan cols menunjukkan jumlah baris dan kolom yang
akan memiliki kotak area teks.
37
Tutorial HTML
38
Tutorial HTML
39
Tutorial HTML
40
Tutorial HTML
Gambar di HTML
Gambar, grafik, dan foto memberi kehidupan dan warna pada halaman web.
Untuk menyisipkan gambar di sebuah situs, kita akan menggunakan tag <img>.
Label ini kosong, yaitu kita harus menggunakannya dengan atribut src untuk
yang menampilkan gambar. Tag <img> tidak memiliki penutupan.
Biasanya digunakan ketika kita ingin memvisualisasikan teks penjelasan dari sebuah
gambar.
Teks ini muncul saat mengarahkan kursor pada gambar atau dalam banyak kasus
ketika browser, karena suatu alasan, tidak menampilkan gambar dan di
tempatkan teks alternatif ini di dalam sebuah kotak.
43
Tutorial HTML
Latar Belakang
Ini adalah latar belakang dari setiap halaman web.
Untuk menyisipkan gambar latar belakang, kita harus menggunakan atribut background
di dalam tag <body>.
Nilai dari atribut ini adalah URL dari gambar yang ingin kita tempatkan.
Jika gambar lebih kecil dari layar browser, itu akan diulang
sebanyak yang diperlukan sampai menutupi seluruh layar.
Contoh
Atribut bgcolor
Contoh
Penting!
Sebagai gantinya kita harus menggunakanproperti latar belakang CSSuntuk menulis sebuah
kode yang benar dari situs kami.
Tutorial HTML
INFORMASI ADITIONAL:
Merek atau label
Bagian dari label yang berada di antara "[]" adalah opsional. Sebuah label
selalu berada di antara "<...>". Secara opsional, dapat memiliki sekumpulan
atribut dan nilai. Beberapa atribut tidak memiliki nilai yang terkait; untuk yang ini
atribut biasanya disebut kompak. Jika memiliki nilai
asosiasi, nilai atribut harus ditempatkan di dalam tanda kutip. Konten dari
etika dapat berupa teks, atau label lainnya. Beberapa label tidak memiliki apa pun
konten. Biasanya, semua label harus ditutup.
Semua konten dari dokumen HTML terdapat di antara tag
<html>
45
</html>. Setiap halaman dibagi menjadi kepala (dibatasi antara
etiquetas<head> </head>) dan tubuh (dibatasi antara tag
<body> </body>). Semua informasi yang disertakan dalam header tidak se
renderiza saat melihat dokumen. Ini dianggap "meta informasi". Sebuah
praktik baik untuk memasukkan judul di dalam header halaman web,
menggunakan tag <title>. Ini akan menjadi judul yang akan ditampilkan oleh peramban web kita.
tampilkan di bilah Anda. Judul ini juga dianggap oleh mesin pencari
Internet, seperti Google, saat menentukan tentang apa yang menjadi topik kita
halaman.
Karakter khusus
Seperti dalam semua bahasa pemrograman, dalam HTML ada beberapa karakter yang
memiliki arti khusus, seperti misalnya < dan >. Oleh karena itu, tidak bisa
harus digunakan secara langsung dalam kode HTML, tetapi harus digunakan sebuah
sekuens pelarian yang setara. Di tabel berikut kami menunjukkan
urutan pelarian yang paling umum:
Tutorial HTML
46
Seperti yang dapat kamu amati, semua urutan pelarian dimulai dengan
un "&" dan diakhiri dengan ";". Sebagian besar peramban modern
izinkan menulis vokal dengan aksen dan karakter seperti 'ñ' secara langsung di
HTML. Namun, biasanya adalah ide yang baik untuk menjaga kesehatan dan menggunakan
sekuens pelarian untuk kompatibilitas dengan browser lama.