bahasa HTML dan penggunaannya. Tutorial "Membuat halaman Web menggunakan bahasa HTML". Dasar-dasar HTML dan CSS untuk Pemula

03.04.2020 Pemulihan data

DESAIN SITUS WEB

Tahapan membuat website

Membuat situs Web melibatkan beberapa tahap - dari menemukan ide hingga implementasinya. Untuk membuat produk yang benar-benar menarik dan bermanfaat, Anda harus melalui langkah-langkah berikut.

Analisis dan desain. Analisis kekuatan dan kelemahan pesaing, desain informasi Situs web, pengembangan konsepnya, evaluasi audiens target.

Penulisan konten. Dibawah konten (Konten) mengacu pada konten situs. Istilah ini digunakan untuk merujuk pada konten konseptual dari situs Web.

Kreatif. Kreatif- istilah untuk komponen visual situs Web. Ini termasuk pengembangan desain, elemen grafis, pemrosesan grafis dan segala sesuatu yang berhubungan dengannya.

Menulis kode untuk situs web. Memprogram file Web, menulis bagian fungsional

Pengujian. Pada tahap ini, semuanya diperiksa: kemudahan navigasi, integritas data, kebenaran tautan dan ejaan, dan selain itu, tidak semua browser menafsirkan tag HTML yang sama dengan cara yang sama.

Publikasi. Menempatkan situs Web di Internet. Sebagian besar penyedia layanan Internet (Internet service provider - ISP) menyediakan layanan untuk meng-host halaman web secara gratis (layanan ini disebut Web hosting - Web hosting). Untuk penerbitan, Anda dapat meng-host situs Web dengan penyedia atau menggunakan opsi lain.

Mendukung. Penting untuk memutuskan bagaimana bagian dan bahan baru akan ditambahkan, apa yang akan terjadi pada yang lama. Mungkin perlu untuk membuat arsip berita, di mana berita yang telah kehilangan relevansinya akan jatuh. Bahkan yang lebih penting adalah pembaruan informasi secara teratur di situs Web untuk daya tariknya yang berkelanjutan.

Terminologi desain web

peramban web- program aplikasi yang dirancang untuk menginterpretasikan kode dokumen HTML dan menampilkan dokumen hypertext pada layar komputer. Browser yang paling sering digunakan - Internet Explorer Opera, Mozilla Firefox, Google Chrome. Seiring dengan istilah "browser", istilah sinonim digunakan: "browser" dan "navigator".

situs web- satu set halaman web dan file yang saling berhubungan yang memiliki arti yang sama. Setiap situs Web memiliki satu halaman Web yang disebut homepage atau halaman Utama. Semua pengunjung ke situs Web pertama-tama sampai ke sana, dan kemudian dengan bantuan hyperlink mereka sampai ke halaman lain dari situs Web.

halaman web(Dokumen HTML) adalah file teks dalam format HTML *.htm atau *.html, yang dihosting di WWW. Selain teks, halaman Web mungkin berisi grafik, animasi, klip video, musik, dan tautan hypertext yang memungkinkan Anda menavigasi dan melihat halaman Web lain.

Salah satu cara untuk membuat halaman Web (atau dokumen HTML) adalah dengan menggunakan editor teks buku catatan dibangun ke dalam Windows. Editor ini membuat file halaman Web, yang disimpan dengan ekstensi *.htm dan kemudian dilihat dengan browser.

Pembuatan situs Web dengan cara bahasa HTML

Bahasa HTML(Hyper Text Markup Language) adalah bahasa markup hypertext dokumen yang digunakan untuk menulis situs Web.

Bahasa HTML memungkinkan:

- membuat dan mengedit situs Web, termasuk halaman Web rumah, yang kemudian dapat ditempatkan di Internet;

- mengedit dokumen HTML yang diterima dari Internet sehingga semua objek yang disematkan dalam dokumen (gambar, animasi, dll.) berfungsi;

- membuat presentasi multimedia, tayangan slide, proyek demonstrasi, berkat tautan hypertext dan kemampuan untuk menyisipkan gambar, diagram, animasi, klip video, musik dan iringan ucapan, efek khusus teks (misalnya, garis berjalan) ke dalam dokumen HTML.

KONSEP DASAR BAHASA HTML

Elemen adalah konstruksi bahasa HTML, atau wadah yang berisi data.

halaman web adalah sekumpulan elemen.

Menandai adalah penanda awal dan akhir elemen. Tag mendefinisikan ruang lingkup elemen dan memisahkan elemen satu sama lain. Tag diapit oleh tanda kurung siku, misalnya: . Tag akhir, jika disediakan oleh sintaks bahasa, dilengkapi dengan garis miring:.

Bingkai- area dokumen hypertext dengan bilah gulirnya sendiri. Bingkai memungkinkan Anda memecah halaman menjadi area persegi panjang, yang masing-masing menampilkan halamannya sendiri. Anda dapat menempatkan satu atau lebih bingkai pada halaman (halaman seperti itu disebut halaman bingkai atau rangkaian bingkai).

Membentuk- area dokumen hypertext yang diperlukan untuk organisasi masukan dengan pengunjung situs.

Applet- program aplikasi kecil yang ditransfer ke komputer klien sebagai file terpisah dan diluncurkan saat melihat halaman Web.

Naskah- program yang disertakan dalam halaman Web untuk meningkatkan kemampuannya.

Penempatan (Unggah)- menyalin dokumen dari komputer klien ke server Web - digunakan saat membuat halaman Web Anda sendiri (yaitu, saat menerbitkannya).

Piksel- titik warna terkecil dari layar monitor.

STRUKTUR UMUM DOKUMEN HTML SEDERHANA

Struktur umum yang paling sederhana dokumen HTML adalah:

<СОММЕNT> Komentar

</b> Nama dokumen <b></ TITLE > </b></p> <p><b></HEAD> </b></p> <p><b><BODY> </b></p> <p>Di sinilah teks dari dokumen HTML itu sendiri berada.</p> <p><b></BODY> </b></p> <p><b></HTML> </b></p> <p>Mari kita beri penjelasan tentang tag yang ditentukan dari dokumen HTML:</p> <p><b><COMMENT> </b>- komentar ke dokumen. Tidak dibutuhkan.</p> <p><b><HTML> </b>- ID dari seluruh blok perintah HTML.</p> <p><b><HEAD> </b>- ID header dokumen HTML.</p> <p><b><TITLE> </b>- pengenal judul viewport.</p> <p><b><BODY> </b>- ID perintah HTML dari dokumen yang akan dilihat.</p> <p>Tiga tag utama <b><HTML> </b>, <b><HEAD> </b> dan <b><BODY> </b> menyediakan browser dengan informasi dasar untuk mengidentifikasi dan mengatur dokumen.</p> <p>Semua <a href="https://chinasouth.ru/id/data-recovery/chto-takoe-teg-ukazat-strukturu-tega-struktura-html-dokumenta-osnovnye-tegi-primer-pravila-oform/">tag tertentu</a>- berpasangan, mis. masing-masing diakhiri dengan tag akhir garis miring. Semua perintah dapat ditulis dengan huruf kecil dan huruf kapital.</p> <p><b><МЕТА> </b>- tag yang tidak berpasangan digunakan untuk menunjukkan <a href="https://chinasouth.ru/id/hard-drives/ep-vkontakte-samye-bolshie-pabliki-v-vk-podrobnaya-informaciya-o-stranice/">Informasi rinci</a> tentang dokumen.</p> <p><u>TAG FORMAT STREAM TEKS</u></p> <p><b><Р> </b>- pengidentifikasi akhir paragraf, setelah itu baris kosong ditambahkan. Tandai di akhir <b></Р> </b>.</p> <p><b><BR> </b>- pengidentifikasi umpan baris.</p> <p><b><HR> </b>- ID gambar garis horizontal.</p> <p>Tag ini tunggal, mis. tidak berpasangan, mereka tidak memerlukan tag garis miring.</p> <p><b><PRE> </b>- atur ke font dengan lebar yang sama. Tandai di akhir <b></PRE>. </b></p> <p><u>PASANG TAG UNTUK MEMBATASI KEPALA DAN SUB JUDUL DOKUMEN</u></p> <p><b><Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>. </b> Dalam hal ini, judul akan ditampilkan dalam huruf kapital, dan ukuran huruf dari tag <b><Н1> </b> akan menjadi yang terbesar <b><Н2> </b>- kurang dari <b><НЗ> </b>- bahkan lebih sedikit, dll.</p> <p><u>PASANG TAG UNTUK MEMBATASI KARAKTER TEKS</u></p> <p><b><В> </b>- pengenal font tebal.</p> <p><b><strong> </b>- pengenal font yang dipilih.</p> <p><b><i> </b>- pengenal miring.</p> <p><b><U> </b>- menggarisbawahi pengenal.</p> <p><b><s> </b>- pengidentifikasi dicoret.</p> <p><b><tt> </b>- pengenal font dengan lebar tetap (teletype atau kurir).</p> <p><b><big> </b>- mengatur ukuran font yang ditingkatkan.</p> <p><b><small> </b>- mengatur ukuran font yang diperkecil.</p> <p><b><center> </b>- mengatur pemusatan teks.</p> <p><b><sub> </b>- mengatur subskrip.</p> <p><u>TAG FORMAT PARAGRAF</u></p> <p><b><р align=left> </b>- perataan teks pada paragraf ke kiri.</p> <p><b><р align=right> </b>- perataan teks pada paragraf ke kanan.</p> <p><b><р align=center> </b>- keselarasan teks dalam paragraf di tengah.</p> <p><b><р align=justify> </b>- keselarasan penuh di kedua tepi layar,</p> <p><b>meluruskan</b>- atribut keselarasan.</p> <p><u>DAFTAR TAG</u></p> <p>Tag daftar adalah cara untuk menampilkan informasi terstruktur secara visual. Daftar berurutan digunakan untuk menampilkan operasi atau algoritma sekuensial. Browser secara otomatis menghasilkan angka untuk setiap item dalam daftar.</p> <p><b><OL> </b>- pengidentifikasi dari daftar yang dipesan. Pada akhirnya <b></OL>. </b></p> <p>Daftar tidak berurutan digunakan untuk membuat daftar di mana urutan item tidak penting. Setiap elemen akan didahului oleh penanda.</p> <p><b><UL> </b>- pengidentifikasi daftar yang tidak berurutan. Pada akhirnya <b></UL>. </b></p> <p>Elemen individu dalam daftar berurutan dan tidak berurutan ditandai dengan satu tag <b><LI> </b>, dan elemen dalam daftar definisi <b><DL> </b> tag <b><DT> </b> untuk istilah dan <b><DD> </b> untuk arti istilah.</p> <p><b><LI> </b>- pengidentifikasi elemen dalam daftar berurutan dan tidak berurutan.</p> <p>Tag akhir <b></LI> </b> dapat dihilangkan.</p> <p><u>TAG DAFTAR DEFINISI</u></p> <p>Daftar definisi menyediakan pemformatan khusus, seperti kamus, untuk istilah dan deskripsi terkaitnya.</p> <p><b><DL> </b>- ID daftar definisi. Pada akhirnya</DL>.</p> <p><b><DT> </b>- pengenal istilah dalam daftar definisi.</p> <p><b><DD> </b>- pengidentifikasi nilai istilah dalam daftar definisi.</p> <p><b><DL> </b></p> <p><b><DT> </b> nama istilah 1</p> <p><b><DD> </b> definisi istilah 1</p> <p><b><DD> </b> definisi lain dari istilah 1</p> <p><b></DL> </b></p> <p><u>TAG WARNA</u></p> <p><b><BODYbgcoIor=«teal» text=«aqua» link=«red»> </b>- mengatur warna teks (teks), warna latar belakang (bgcolor) dan warna tautan hypertext (tautan).</p> <p><b><BODY background=«back.jpg»> </b>- mengatur gambar latar belakang (wallpaper) pada halaman Web di file back.jpg.</p> <p><b><BODY background=«\windows\tartan.bmp»> </b>- gambar latar belakang (wallpaper) diambil dari file tartan.bmp, dan jalur file ini ditunjukkan.</p> <p><b><font color=«yellow» size=5> </b>- mengatur warna karakter teks (warna) dan ukurannya (ukuran). Tandai di akhir <b></font>. </b></p> <p><u>TAG GARIS</u></p> <p><b><hr coIor=«lime»> </b>- mengatur warna garis horizontal.</p> <p><b><hr color=«red» size=3 width=220 align=center> </b>- atribut <b>ukuran = N</b> mengatur ketebalan garis dalam piksel; atribut <b>lebar = M</b> mengatur panjang garis dalam piksel; atribut <b>sejajar = tengah</b>(atau <b>kiri,</b> atau <b>Baik</b>) menentukan offset garis (penempatannya di tengah, atau offset ke kiri atau kanan).</p> <p><u>TAG UNTUK MEMASUKKAN GAMBAR</u></p> <p>Grafik pada halaman adalah sarana untuk mengekspresikan pikiran, menekankan ide.</p> <p>Gambar dapat disimpan dalam beberapa format. Jenis File GIF - <a href="https://chinasouth.ru/id/data-recovery/formaty-graficheskih-failov-8-klass-grafy-primenenie-grafov-k-resheniyu/">format grafik</a> exchange, menjadi jenis file pertama yang didukung oleh WWW. Kemudian format JPEG dikembangkan - sekelompok ahli fotografi bersama. Format ini lebih efisien daripada GIF untuk menyajikan gambar besar.</p> <p>Format PNG telah mendapatkan popularitas - grafik jaringan pribadi, yang menggantikan GIF.</p> <p>Saat memublikasikan situs, gambar harus berada di folder tempat file halaman disimpan, dan URL harus asli.</p> <p>JPEG menggunakan teknik kompresi gambar khusus yang menguntungkan untuk gambar dan foto.</p> <p><b><img src='/data-recovery/yazyk-html-i-ego-ispolzovanie-uchebnoe-posobie-sozdanie-web-stranic/' loading=lazy loading=lazy> </b>- memasukkan <a href="https://chinasouth.ru/id/external-hard-drives/vektornaya-grafika-v-html-vstavka-graficheskih-izobrazhenii-bazovye-formy/">gambar grafis</a> sebagai file animasi lycos.gif. Anda juga dapat menggunakan file grafik *.jpg (atau *.jpeg), *.bmp.</p> <p><b><img src='/data-recovery/yazyk-html-i-ego-ispolzovanie-uchebnoe-posobie-sozdanie-web-stranic/' loading=lazy loading=lazy> </b>- jika atribut lebar (lebar dalam piksel) dan tinggi (tinggi dalam piksel) digunakan saat menyisipkan gambar, maka saat memuat gambar, browser pertama-tama akan menampilkan bingkai di mana gambar seharusnya berada, dan kemudian gambar itu sendiri, karena membutuhkan waktu lebih lama untuk memuat. Dengan demikian, ruang di layar disediakan untuk gambar.</p> <p><b><img src='/data-recovery/yazyk-html-i-ego-ispolzovanie-uchebnoe-posobie-sozdanie-web-stranic/' loading=lazy loading=lazy> </b>- memasukkan gambar grafik sebagai file iexplor.gif, dan path lengkap file grafik pada disk ditunjukkan: c:\html\animat\iexplor.gif (saat ini harus dipikirkan terlebih dahulu, jika tidak masalah tampilan akan terjadi ketika pindah ke komputer lain).</p> <p><b><img src='/data-recovery/yazyk-html-i-ego-ispolzovanie-uchebnoe-posobie-sozdanie-web-stranic/' loading=lazy loading=lazy> </b>- atribut <b>berbatasan</b> menetapkan batas di sekeliling gambar dengan ketebalan 3 piksel. Atribut <b>alt</b> memberikan teks sebagai pengganti bingkai jika tidak ada gambar.</p> <p>Atribut <b>batas = 0</b> digunakan untuk menghapus batas di sekitar gambar. Ini diperlukan, misalnya, saat menggunakan gambar gif animasi secara transparan.</p> <p><b><img src='/data-recovery/yazyk-html-i-ego-ispolzovanie-uchebnoe-posobie-sozdanie-web-stranic/' loading=lazy loading=lazy> </b></p> <p>Di sini atribut <b>hsp=5</b> memberikan aliran teks yang mulus di sekitar gambar. Ini menentukan lebar ruang putih ke kanan dan kiri gambar dalam piksel.</p> <p>Atribut <b>sejajar = "kiri"</b> memastikan bahwa pola ditempatkan di sebelah kiri.</p> <p><u>TAG SAMPAH KE FILE LAIN</u></p> <p><b><а href=«excite.htm»>semangat.htm</a> </b>- tautan hypertext ke file excite.htm.</p> <p><b><а href=«C:\book\book.inf»>buku.inf</a> </b>- tautan hypertext, transisi ke file book.inf. Saat meluncurkan browser, Anda harus menentukan program penampil <a href="https://chinasouth.ru/id/ssd-drives/sed-vstavit-stroku-v-fail-ispolzuem-potokovyi-tekstovyi/">berkas teks</a> book.inf, seperti edit.com.</p> <p>Saat bekerja di Internet, Anda harus membedakan antara file dengan huruf besar dan kecil dalam nama dan ekstensi. Harus ada kecocokan penuh antara nama file sesuai dengan ukuran setiap huruf dalam nama dan ekstensi, ditentukan dalam hyperlink dan terletak di server, jika tidak hyperlink tidak akan berfungsi.</p> <p>Untuk mempermudah pekerjaan Anda, Anda dapat menentukan nama file digital (angka selalu berukuran sama).</p> <br><p><u>BUKA TAG HALAMAN WEB LAIN</u></p> <p><b><а href=«http://www.da.ru»>http://www.da.ru</a> </b>- tautan hypertext dalam bentuk teks, transisi di Internet ke halaman Web http://www.da.ru.</p> <p><b><а href=«zinn.gif»><img src='/data-recovery/yazyk-html-i-ego-ispolzovanie-uchebnoe-posobie-sozdanie-web-stranic/' loading=lazy loading=lazy></a </b>> - link hypertext berupa gambar globe.gif, transisi untuk melihat gambar zinn.gif.</p> <p><u>MASUKKAN TAG ALAMAT EMAIL</u></p> <p><b><а href=«mailto: krilenka@ya.ru»>krilenka@ya.ru</a> </b>- hyperlink ke alamat <a href="https://chinasouth.ru/id/windows-and-wheels/kak-pozdravit-otkrytkoi-po-elektronnoi-pochte-kak-otpravit-otkrytku-po/">Surel</a>. Saat ditekan, panggilan dibuat <a href="https://chinasouth.ru/id/memory-card/nastroika-pochtovoi-programmy-outlook-express-dlya-chego-nuzhen-pochtovyi/">program surat</a> dan alamat email yang ditentukan: krilenka@ya.ru dimasukkan dalam item <b><i>Kepada siapa</i> </b>.</p> <p><u>TAG MASUKKAN DOKUMEN</u></p> <p><b><embed src=«Welcome.avi» Width=280 Height=140 autostart=true> </b> -</p> <p>memasukkan objek ke dalam dokumen HTML. Dalam hal ini, ini adalah file multimedia *.avi, dan ketika halaman dimuat, file ini dijalankan secara otomatis, dimensi yang di layar diatur oleh atribut <b>Lebar</b> dan <b>Tinggi</b>.</p> <p>Jika dokumen HTML besar, maka di dalamnya melompat dengan label (U01): <b><Р> <а href=«#U01>pengantar</а> </Р> <а name=«U01»>pengantar</а> </b></p> <p><u>TAG UNTUK MEMBUAT STRING TEKS</u></p> <p><u>(HANYA UNTUK INTERNET EXPLORER):</u></p> <p><b><marquee behavior=«scroll» direction=«right» loop=«-l»>Internet adalah jendela ke Dunia!</marquee> </b></p> <p>Jika baris teks harus berjalan ke kiri, maka alih-alih <b>Baik</b> pasti ada kata <b>kiri.</b> Anda dapat membuat baris teks berjalan lebih sederhana (yaitu tanpa atribut, dan akan berjalan ke kiri):</p> <p><b><marquee>Selamat datang!</marquee> </b></p> <p>Jika string teks harus berjalan ke kiri, lalu ke kanan, lalu di tag <marquee>atribut digunakan <b>perilaku = "alternatif"</b>.</p> <p><u>DAFTAR WARNA SIMBOL HTML</u></p> <p>Ada 16 warna primer secara total:</p> <p>Alih-alih istilah ini, Anda dapat menggunakan untuk menentukan warna <b>kode RGB</b>(<b>R</b> ed, <b>G</b> kendali, <b>B</b> lu), misalnya: <b>#FFFFFF</b>- putih (putih), <b>#FF0000</b>- merah (merah).</p> <p>berubah <b>kode RGB</b>, warna dapat dicocokkan dengan teks dan latar belakang yang Anda inginkan.</p> <p><u>TAG KONEKSI AUDIO</u></p> <p>Untuk memutar suara (file *.mid) setelah memuat dokumen HTML di browser Internet Explorer (mis <a href="https://chinasouth.ru/id/usb-flash-drives/kak-otklyuchit-avtozagruzku-prilozhenii-na-android-est-prostoe-reshenie/">Latar Belakang</a>), Anda perlu menulis perintah berikut, misalnya:</p> <p><b><bgsound src=«\windows\canyon.mid» lоор=1> </b></p> <p>Anda juga dapat menggunakan file *.wav. Jumlah drama <b>lingkaran</b> dapat ditingkatkan dari 1 menjadi p.</p> <p><u>TAG BINGKAI</u></p> <p><b><frameset></frameset> </b>- definisi bingkai (jendela) struktur dokumen: ukuran dan lokasi bingkai pada halaman. Mengganti tag BODY dalam dokumen dengan bingkai; dapat bersarang di frameset lain.</p> <p><b><frameset rows=«value,vaIue»> </b>- penentuan jumlah dan ukuran bingkai horizontal (bingkai garis) di jendela browser (piksel, persentase lebar).</p> <p><b><frameset cols=«value,value»> </b>- menentukan jumlah dan ukuran bingkai vertikal (bingkai kolom) di jendela browser (piksel, persentase lebar).</p> <p><b><frame> </b>- definisi bingkai dan propertinya dalam struktur FRAMESET.</p> <p><b><noframes> </noframes> </b>- menentukan apa yang akan ditampilkan jika browser tidak mendukung frame.</p> <p>Atribut bingkai:</p> <p><b><frame src=«URL»> </b>- menentukan alamat (URL) file HTML yang ditampilkan dalam bingkai ini.</p> <p><b><firame name=«name»> </b>- definisi nama bingkai ini, yang akan digunakan nanti untuk merujuknya dari dokumen lain menggunakan parameter <b>target</b>.</p> <p><b><frame marginwidth=#> </b>- definisi lebar (dalam piksel) margin kiri dan kanan bingkai; harus sama dengan atau lebih besar dari 1.</p> <p><b><frame marginheight=#> </b>- definisi lebar (dalam piksel) margin atas dan bawah bingkai; harus sama dengan atau lebih besar dari 1.</p> <p><b><frame scrolling=VALUE> </b>- penentuan keberadaan bilah gulir dari konten bingkai; nilai dapat berupa: "ya", "tidak", atau "otomatis". Standarnya adalah otomatis.</p> <p><b><frame noresize> </b>- mencegah pengubahan ukuran bingkai.</p> <u><br></u> <p><u>TAG FORMULIR</u></p> <p>Agar formulir berfungsi, Anda perlu menulis <b>CGI</b> naskah. HTML hanya membuat tampilan formulir.</p> <table><tr><td> <form></form> </td> <td>Buat formulir yang bisa diisi</td> </tr><tr><td> <select multiple name=«NAME» size=?></select> </td> <td>Elemen pilih membuat menu dalam formulir yang dapat diisi, seperti "Pilih satu item dari banyak" atau "Pilih beberapa item dari banyak". Ukuran menentukan jumlah item yang terlihat tanpa menggulir.</td> </tr><tr><td> < Option > </td> <td>Elemen opsi menjelaskan item menu individual. Tidak memiliki tag akhir.</td> </tr><tr><td> <textarea name=«NAME» cols=40 rows=8> </textarea> </td> <td>Membuat bidang untuk memasukkan beberapa baris teks. Cols menunjukkan lebar; baris menunjukkan ketinggian.</td> </tr><tr><td> <input type=«checkbox» name=«NAME»> </td> <td>Membuat kolom input untuk atribut ya/tidak atau untuk atribut yang dapat memiliki beberapa nilai sekaligus. Teks segera mengikuti tag.</td> </tr><tr><td> <input type=«radio» name=«NAME» value=«x»> </td> <td>Membuat bidang input untuk atribut yang menerima satu nilai dari beberapa kemungkinan. Teks berikut segera setelah tag.</td> </tr><tr><td> <input type=text name=«foo» size=20> </td> <td>Membuat bidang input untuk satu baris teks. Ukuran menentukan panjang dalam karakter.</td> </tr><tr><td> < input type=«submit» value=«NAME»> </td> <td>Membuat tombol, ketika diklik, formulir yang sudah diisi dikirim ke server.</td> </tr><tr><td> <input type=«image» border=0 name=«NAME» src=«name.gif»> <input type=«reset»> </td> <td>Pembuatan gambar grafik untuk tombol yang menginisialisasi transfer data ke server.</td> </tr></table><p><u>MEMBUAT TABEL DALAM HTML</u></p> <p>Tabel adalah cara yang nyaman untuk memformat data dalam HTML.</p> <p>Tabel didefinisikan dan properti umumnya ditentukan oleh tag <b><table></table>. </b> Secara horizontal, misalnya, di tengah, tabel dapat disejajarkan menggunakan tag <b><р align=«center»>, </b> ditempatkan sebelumnya <b><table>. </b></p> <p>Menandai <b><table> </b> mungkin memiliki atribut:</p> <p><b><table border=«5» width=«100» cellpadding=« 10» cellspacing=«10»>, </b></p> <p><b>batas = "5"</b>- lebar sisi wajah dalam piksel. Pada nol, bingkai menghilang;</p> <p><b>lebar = "100"</b>- lebar tabel dalam piksel atau <b>lebar = "50%"</b>- lebar tabel dalam % dalam kaitannya dengan lebar halaman di jendela;</p> <p><b>spasi sel = "10"</b>- lebar muka depan dalam piksel;</p> <p><b>cellpad="10"</b>- mengatur ukuran ruang putih dalam piksel yang mengelilingi data dalam sel.</p> <p>Menandai <b><caption></caption> </b> menentukan judul tabel.</p> <p>Menandai <b><tr> </b> menentukan baris tabel. Tag berikutnya <b><tr> </b> menentukan baris berikutnya dalam tabel. Tag akhir adalah opsional.</p> <p>Menandai <b><td> </b> menentukan sel tabel. Tag berikutnya <b><td> </b> mengatur sel tabel berikutnya. Tag akhir adalah opsional.</p> <p>Warna latar belakang sel diatur dalam tag <b><td> </b>: <b><td bgcolor=«yellow»> </b></p> <p>Tag tidak berpasangan <b><th> </b>- mengatur elemen sel, yang merupakan judul tabel. Tag ini harus berada di dalam tag <b><tr>. </b></p> <p>Sel header berbeda dari sel normal karena teks di dalamnya dicetak tebal. Warna latar belakang tajuk diatur: <br><b><tr><th bgcolor=«yellow»> </b> Zarolovok 1.</p> <p><u>NASKAH</u></p> <p>Program ini digunakan untuk mengimplementasikan situs web <b><i>mesin</i> </b>, yang mengimplementasikan fungsionalitas selain sekadar menampilkan halaman Web yang sudah jadi. Misalnya, menelusuri katalog toko online (daftar produk diambil dari database toko), mencari di Internet (halaman dengan jawaban <a href="https://chinasouth.ru/id/ssd-drives/brauzer-hrom-poslednyaya-skachat-besplatno-poiskovuyu-sistemu-hrom-upravlenie/">mesin pencari</a> dihasilkan secara dinamis), menampilkan spanduk (mesin "memberi" satu atau lain spanduk ke halaman situs sesuai dengan algoritma yang diberikan).</p> <p>Script - program sederhana dalam bahasa pemrograman "scripting" (Perl, Php, Javascript), komponen mesin. Dalam kasus ekstrim, mesin situs dapat terdiri dari satu skrip.</p> <p>Cgi-bin secara historis merupakan subdirektori di server tempat skrip dan komponen lain dari mesin situs berada. Beberapa perusahaan hosting (layanan untuk meng-hosting situs Web orang lain di server Web mereka sendiri atau server Web orang lain) menyediakan direktori cgi-bin pribadi kepada pelanggan mereka untuk meng-host skrip.</p> <p>Istilah HTML (HyperText Markup Language) adalah singkatan dari "Hypertext Markup Language". Versi pertama HTML dikembangkan oleh Tim Berners-Lee dari European Laboratory for Particle Physics.</p> <p>Sejak pembuatan versi pertama HTML telah mengalami beberapa perubahan. Seperti banyak hal lain di dunia komputasi, versi, atau spesifikasi, HTML akhirnya diberi nomor. Spesifikasi 2.0, 3.0 dan 3.2 diketahui. Spesifikasi HTML saat ini selalu dapat ditemukan di server W3C.</p> <p>HyperText Markup Language (HTML) adalah bahasa standar untuk membuat dokumen hypertext di lingkungan WEB. Dokumen HTML dapat dilihat <a href="https://chinasouth.ru/id/usb-flash-drives/samsung-s5-opisanie-obzor-smartfona-samsung-galaxy-s5-seriinyi-ubiica-bluetooth---eto/">berbagai jenis</a> browser web. Saat dokumen dibuat dengan <a href="https://chinasouth.ru/id/windows-and-wheels/sozdanie-giperssylok-kak-vstavit-giperssylku-v-html-sozdanie-i/">menggunakan HTML</a>, browser WEB dapat menafsirkan HTML untuk menyorot berbagai elemen dokumen dan memprosesnya terlebih dahulu. Penggunaan HTML memungkinkan dokumen diformat untuk presentasi menggunakan font, garis, dan elemen grafis lainnya pada sistem apa pun yang melihatnya.</p> <p>Sebagian besar dokumen memiliki elemen standar seperti judul, paragraf, atau daftar. Dengan menggunakan tag HTML, Anda dapat menetapkan elemen-elemen ini, menyediakan browser WEB dengan informasi minimum untuk menampilkan elemen-elemen ini, sambil mempertahankan keseluruhan struktur dan kelengkapan informasi dokumen. Semua yang diperlukan untuk membaca dokumen HTML adalah browser WEB yang menafsirkan tag HTML dan menampilkan dokumen di layar dalam bentuk yang diberikan oleh pembuatnya.</p> <p>Dalam kebanyakan kasus, penulis dokumen secara ketat mendefinisikan <a href="https://chinasouth.ru/id/windows-and-wheels/htc-u11-fotografii-obzor-htc-u11-neozhidanno-otlichnyi-smartfon-vneshnii-vid/">penampilan</a> dokumen. Dalam kasus HTML, pembaca (berdasarkan kemampuan browser WEB dapat, sampai batas tertentu, mengontrol tampilan dokumen (tetapi bukan isinya). HTML memungkinkan Anda untuk menandai di mana dalam dokumen sebuah judul atau paragraf harus menggunakan tag HTML, dan kemudian menyediakan WEB- browser untuk menafsirkan tag ini.</p> <p>Misalnya, satu browser WEB dapat mengenali tag awal paragraf dan menyajikan dokumen dalam bentuk yang diinginkan, sementara yang lain tidak memiliki kemampuan ini dan menyajikan dokumen dalam satu baris. Pengguna beberapa browser WEB juga memiliki kemampuan untuk menyesuaikan ukuran dan jenis font, warna, dan parameter lain yang memengaruhi tampilan dokumen.</p> <p>Dokumen HTML dapat dibuat menggunakan editor teks apa pun atau editor dan konverter HTML khusus. Pilihan editor yang akan digunakan untuk membuat dokumen HTML semata-mata tergantung pada konsep kenyamanan dan preferensi pribadi masing-masing penulis. Misalnya, editor HTML seperti "Netscape Navigator Gold" dari Netscape memungkinkan Anda membuat dokumen secara grafis menggunakan teknologi WYSIWYG (What You See Is What You Get). Di sisi lain, sebagian besar alat pembuat dokumen tradisional memiliki konverter yang memungkinkan Anda mengonversi dokumen ke format HTML.</p> <p>Semua tag HTML dimulai dengan "<" (левой угловой скобки) и заканчиваются символом ">" (tanda kurung siku). Biasanya, ada tag awal dan tag akhir. Misalnya, berikut adalah tag kepala yang mendefinisikan teks di dalam tag awal dan akhir dan menjelaskan judul dokumen: <TITLE>Judul dokumen

HTML tidak peka huruf besar/kecil untuk karakter yang menjelaskan tag, dan contoh di atas mungkin terlihat seperti ini:

Judul dokumen

Tag akhir terlihat sama dengan tag awal, dan berbeda darinya dengan garis miring sebelum teks di dalam kurung sudut. PADA contoh ini menandai memberitahu browser WEB untuk menggunakan format header, dan tag- tentang penyelesaian teks judul.

Beberapa tag seperti

(tag yang mendefinisikan paragraf) tidak memerlukan tag akhir, tetapi penggunaannya membuat teks sumber dokumen lebih mudah dibaca dan terstruktur.

Ketika browser web menerima dokumen, itu menentukan bagaimana dokumen harus ditafsirkan. Tag pertama yang muncul dalam dokumen harus berupa tag . Tag ini memberi tahu browser web bahwa dokumen Anda ditulis menggunakan HTML. Dokumen HTML minimal akan terlihat seperti ini:

...badan dokumen...

Judul dokumen

Tag header dokumen harus digunakan segera setelah tag dan tidak ada tempat lain di badan dokumen. Tag ini adalah gambaran umum dokumen. Hindari meletakkan teks apa pun di dalam tag . Mulai tag ditempatkan tepat sebelum tag dan tag lain yang menjelaskan dokumen, dan tag akhir</HEAD> ditempatkan segera setelah akhir deskripsi dokumen. Sebagai contoh:</p> <p><HTML> <HEAD> <TITLE>Daftar karyawan Judul dokumen </p> <p>Sebagian besar browser web menampilkan konten tag <TITLE>di judul jendela yang berisi dokumen dan di file bookmark, jika didukung oleh browser WEB. Judul dibatasi oleh tag <TITLE>dan, terletak di dalam -tag, seperti yang ditunjukkan pada contoh di atas. Judul dokumen tidak muncul ketika dokumen itu sendiri ditampilkan di jendela.

Komentar

Seperti bahasa apa pun, HTML memungkinkan Anda untuk memasukkan komentar ke dalam isi dokumen, yang disimpan saat dokumen dikirim melalui jaringan, tetapi tidak ditampilkan oleh browser. Sintaks komentar:

Komentar dapat muncul di mana saja dalam dokumen dan dalam nomor berapa pun.

Tag badan dokumen mengidentifikasi komponen dokumen HTML yang ditampilkan di jendela. Badan dokumen dapat berisi tautan ke dokumen lain, teks, dan informasi terformat lainnya.

Badan Dokumen

Badan dokumen harus berada di antara tag dan. Ini adalah bagian dari dokumen yang ditampilkan sebagai teks dan informasi grafik (semantik) dari dokumen Anda.

tag paragraf

Tidak seperti kebanyakan pengolah kata, carriage return biasanya diabaikan dalam dokumen HTML. Pemisahan paragraf fisik bisa di mana saja dalam teks sumber dokumen (untuk kemudahan pembacaan). Namun, browser hanya membagi paragraf ketika ada tag

Jika Anda tidak memisahkan paragraf dengan tag

Dokumen Anda akan terlihat seperti satu paragraf besar.

Tautan hypertext adalah komponen kunci yang membuat WEB menarik bagi pengguna. Dengan menambahkan tautan hypertext (selanjutnya disebut tautan), Anda membuat satu set dokumen yang terkait dan terstruktur, yang memungkinkan pengguna untuk menerima informasi yang dia butuhkan secepat dan semudah mungkin.

Tautan memiliki format standar, yang memungkinkan browser untuk menafsirkannya dan melakukan fungsi yang diperlukan (metode pemanggilan) tergantung pada jenis tautan. Tautan dapat menunjuk ke dokumen lain, tempat khusus dokumen ini atau melakukan fungsi lain, seperti meminta file melalui FTP untuk ditampilkan oleh browser. URL dapat menunjuk ke lokasi tertentu di jalur absolut, atau menunjuk ke dokumen di jalur saat ini, yang sering digunakan saat mengatur situs Web yang besar dan terstruktur. Kembali ke tautan sebelumnya jika pemindahan ada di dalam dokumen. Jika Anda menggunakan tautan di dalam dokumen dan kemudian menekan tombol Kembali, Anda tidak akan pergi ke tautan sebelumnya, tetapi akan kembali ke bagian dokumen yang Anda lihat sebelumnya.

Salah satu fitur yang paling menarik dari Web adalah kemampuan untuk menyertakan link ke grafik dan jenis data lainnya dalam dokumen HTML. Ini dilakukan dengan menggunakan tag . Menggunakan tag ini dapat meningkatkan tampilan dan fungsionalitas dokumen secara signifikan.

Ada dua cara untuk menggunakan grafik dalam dokumen HTML. Yang pertama adalah penyematan gambar grafis dalam dokumen, yang memungkinkan pengguna untuk melihat gambar secara langsung dalam konteks elemen lain dari dokumen.

Ini adalah teknik yang paling sering digunakan dalam desain dokumen, kadang-kadang disebut sebagai "gambar sebaris".

Beberapa browser WWW memungkinkan pengguna untuk mengisi formulir yang mengembalikan nilai dan melakukan beberapa tindakan di server WWW Anda. Ketika formulir ditafsirkan oleh browser WEB, elemen layar GUI khusus dibuat, seperti bidang input, kotak centang, tombol radio, menu tarik-turun, daftar yang dapat digulir, tombol, dan sebagainya. Ketika pengguna mengisi formulir dan mengklik tombol "Kirim" (KIRIM adalah jenis tombol khusus yang ditentukan saat menjelaskan dokumen), informasi yang dimasukkan oleh pengguna dalam formulir dikirim ke server HTTP untuk diproses dan dikirim ke program lain yang berjalan di bawah server, sesuai dengan antarmuka CGI (Common Gateway Interface).

Saat Anda mendeskripsikan formulir, setiap elemen input memiliki tag . Saat pengguna memasukkan data ke dalam elemen formulir, informasi tersebut ditempatkan di bagian VALUE elemen formulir. Salah satu fitur yang paling menarik dari Web adalah kemampuan untuk menyertakan link ke grafik dan jenis data lainnya dalam dokumen HTML.

Dasar-dasar HTML berisi aturan dasar bahasa HTML, deskripsi struktur halaman HTML, hubungan dalam struktur dokumen HTML antar elemen HTML.

Dokumen HTML biasa saja Dokumen Teks, bisa dibuat seperti biasa editor teks (Buku catatan), dan dalam yang khusus, dengan penyorotan kode (Notepad++, Kode Visual Studio, dll.). Dokumen HTML memiliki ekstensi .html.

Sebuah dokumen HTML terdiri dari pohon elemen HTML dan teks. Setiap elemen diidentifikasi dalam dokumen sumber dengan tag awal (pembukaan) dan akhir (penutup) (dengan pengecualian langka).

Mulai tag menunjukkan di mana elemen dimulai, berakhir - di mana ia berakhir. Tag penutup dibentuk dengan menambahkan garis miring / sebelum nama tag:<имя тега> … . Antara tag awal dan akhir adalah isi dari tag – konten.

Tag tunggal tidak dapat menyimpan konten secara langsung, ditulis sebagai nilai atribut, misalnya tag akan membuat tombol dengan teks Tombol dalam.

Tag dapat bersarang satu sama lain, misalnya,

Teks

. Saat berinvestasi, Anda harus mengikuti urutan penutupannya (prinsip "matryoshka"), Misalnya, posting berikutnya akan salah:

Teks

.

Elemen HTML dapat memiliki atribut (global, diterapkan ke semua elemen HTML, dan miliknya sendiri). Atribut ditulis dalam tag pembuka suatu elemen dan berisi nama dan nilai yang ditentukan dalam format atribut name="value" . Atribut memungkinkan Anda untuk mengubah properti dan perilaku elemen yang ditetapkan.

Setiap elemen dapat memiliki beberapa nilai kelas dan hanya satu nilai id. Beberapa nilai kelas ditulis dengan spasi,