HTML- Bahasa Markup Hiperteks Standar. (Bahasa inggris singkat. Bahasa Markup HyperTeks).

Bahasa HTML ditemukan kembali pada abad ke-20 untuk menampilkan teks (awalnya hanya teks) dan kemudian berkembang teknologi komputer Video, audio, gambar, dll mulai bermunculan. (di abad ke-21 informasi ini disebut “konten”), yang tentu saja menyebabkan perlunya perluasan Internet. Berkat ini, bahasa HTML mulai berkembang.

Saat ini, selain HTML, ada bahasa pemrograman lain - PHP, CSS, MSQ, skrip Java dan lainnya. Jumlah mereka terus bertambah, begitu pula kualitas penulisan kode.

Bahasa HTML pada dasarnya hanya melakukan markup halaman, apa yang seharusnya ditampilkan di situs, dan bahasa lain memberi “warna” pada halaman dan digabungkan menjadi satu kesatuan, memberikan keindahan dan makna pada situs.

Di abad ke-21, konsep multimedia abad Web 2.0 sudah digunakan sepenuhnya, di mana teks sudah memudar ke latar belakang. Tapi terus saat ini Teks masih digunakan di situs web, sebagai suatu peraturan, untuk menggambarkan beberapa tindakan atau elemen situs, baik itu materi video atau audio. Oleh karena itu, Anda masih perlu mempelajari bahasa HTML, yang tanpanya Anda tidak akan dapat menulis dan mendesain teks dan elemen situs lainnya dengan indah.

Bahasa HTML memiliki banyak versi, tetapi secara umum tidak banyak mengalami perubahan. Saat ini versi utama bahasa HTML adalah HTML 4.01 Transitional - bahasa transisi dari HTML 4.01 Transitiona ke HTML 5.0 terbaru waktu yang diberikan versi HTML.

Kursus ini akan membahas bahasa HTML 4.01 Transitiona karena versi kelima masih dalam pengembangan.

Jadi mari kita mulai belajar bahasa HTML. Saya akan memberikan gambaran hanya tentang tag-tag yang sering ditemukan saat menulis situs web, dan sisanya tidak digunakan sama sekali atau sangat jarang digunakan.

Tabel tag dan atribut HTML.

Tag dan atribut:	Deskripsi tag dan atribut:
	Tag berpasangan (memiliki tag pembuka dan penutup dengan tanda "/" di tag penutup). Merupakan tag generik HTML. Ini adalah wadah umum yang cocok untuk semua orang. tag yang ada. Tag ini dan tiga tag berikutnya diperlukan untuk semua HTML-halaman.
	.Tag ini berisi nama halaman situs. Mesin pencari mencari nama ini terlebih dahulu.
	Label berpasangan. Itu tertulis di dalamnya pasangan tag .Tag ini berisi; meja lengket gaya CSS, judul halaman situs, deskripsi halaman, skrip, pengkodean halaman.
	Label berpasangan. Ditulis di dalam tag berpasangan setelah tag pasangan . Tag ini berisi semua tag lainnya HTML yang memberikan tampilan dan volume halaman. Seluruh proses pembuatan situs web berlangsung di tag ini.
	Label berpasangan. Ditulis di dalam tag berpasangan . Tag ini digunakan untuk menyorot judul di situs. Semakin tinggi angka pada tag, semakin rendah nilai headingnya. Oleh karena itu, semakin kecil judulnya, semakin kecil pengaruhnya terhadap mesin pencari dalam hal optimasi situs. Tag ini memainkan peran besar, begitu pula tag dalam menemukan situs dalam permintaan pencarian.
	Label berpasangan. Ditulis di dalam tag berpasangan . Tujuan utama dari tag ini adalah untuk membagi teks menjadi paragraf.
	Label berpasangan. Ditulis di dalam tag berpasangan . Merupakan tautan ke bagian lain yang sama HTML halaman atau tautan ke situs lain.
	. Tujuannya sama dengan tag, namun dapat membagi seluruh konten menjadi beberapa bagian dengan memberi spasi di antara keduanya. Memiliki sedikit aktivitas fisik.
	Tag tidak berpasangan. Ditulis di dalam tag berpasangan . Tag menunjukkan bahwa di tempat ini ada gambar.
	Label berpasangan. Ditulis di dalam tag berpasangan . Menyisipkan tabel ke dalam situs.
, ,	. Tujuan utama dari tag ini adalah untuk membuat bagian teks berani Dan miring untuk menarik perhatian manusia. Tag ini memungkinkan Anda untuk menyorot ide utama teks.
	Label berpasangan. Ditulis di dalam tag berpasangan . Tag tidak ada artinya, tetapi dengan menggunakan tag ini Anda dapat menyorot area mana pun HTML halaman yang dengannya Anda dapat membuat perubahan apa pun dalam hal desain di style sheet CSS.
	Label berpasangan. Ditulis di dalam tag berpasangan . Tujuannya sama dengan tag , tetapi dengan radius tindakan yang lebih kecil yang beroperasi di dalam tag .
, , , , ,	Tag berpasangan. Ditulis di dalam tag berpasangan . Bagilah teks menjadi daftar dengan poin-poin.
Tag berpasangan. Ditulis di dalam tag berpasangan . Bagilah tabel menjadi baris dan kolom.
		Label berpasangan. Ditulis di dalam tag berpasangan . Memilih baris utama dalam tabel, membuat teks tebal dan meratakannya ke tengah sel.
src="", href=""	Dua atribut, yang intinya memberikan alamat informasi yang tertera di dalamnya. Artinya, mereka menunjukkan tempat di mana konten ini atau itu berada. Dan ini bisa berupa teks biasa atau sumber daya, atau semacamnya informasi grafis; gambar, video, audio, dll. Namun atribut-atribut ini dipisahkan secara ketat berdasarkan tujuannya. Atribut src="" hanya memberikan alamat ke sumber grafik, yaitu tempat di mana sumber tersebut berada. Dan atribut href="" hanya memberikan alamat ke halaman lain di situs atau ke sumber lain, yang sebenarnya merupakan hyperlink dangkal ke sumber lain yang terletak di halaman lain situs.
kelas=""	Atribut yang dapat ditetapkan ke hampir setiap tag. Intinya dari atribut ini adalah memberi nama pada bagian konten tertentu ketika diperiksa lebih lanjut dan dimodifikasi menggunakan style sheet CSS.
judul="",alt=""	Intisarinya adalah memberikan dua atribut pada suatu sumber grafis, misalnya; gambar, deskripsi. Tapi karena ada dua, deskripsinya berbeda. DI DALAM atribut judul="" tertulis deskripsi yang akan disorot ketika Anda mengarahkan kursor mouse ke objek ini sehingga pengunjung mengetahui apa yang tersembunyi di bawah objek ini. Biasanya ini adalah tautan. Atribut alt="" berisi deskripsi dari objek ini yang memperjelas kepada mesin pencari jenis objek apa sehingga dapat ditambahkan ke database untuk diindeks. Deskripsi ini tidak terlihat oleh pengunjung situs, tetapi terlihat oleh mesin pencari.
sejajarkan="", valign=""	Inti dari kedua atribut ini adalah menyelaraskan suatu area situs secara horizontal atau vertikal. Artinya, mereka menjelaskan kepada browser di area situs mana situs itu seharusnya ditempatkan. informasi ini. Atribut align="" menyelaraskan konten tertentu atau seluruhnya secara horizontal. Atribut valign="" menyelaraskan beberapa atau semua konten secara vertikal.
lebar="", tinggi=""	Dua atribut yang intinya adalah meregangkan atau mengecilkan suatu objek di situs. Intinya atribut-atribut ini membuat objek tertentu berubah bentuk misalnya; tabel, tinggi dan lebarnya, sehingga mengubah ukurannya.
perbatasan=""	Atribut bingkai tabel. Dengan menggunakan atribut ini, Anda dapat membuat bingkai meja yang terlihat dan tidak terlihat, serta mengatur ketebalan bingkai.
cellpadding="", spasi sel=""	Inti dari kedua atribut tersebut sama dengan atribut border="", namun yang membedakan hanyalah bahwa border tidak diberikan pada keseluruhan tabel, melainkan pada elemen baris dan kolomnya.
bgwarna=""	Atribut yang menentukan warna batas tabel.

Bepergian melintasi hamparan Web di Seluruh Dunia, Anda dapat melihat betapa berbedanya desain dan kemampuan halaman web. Namun tidak semua dari Anda mengetahui bahwa semua keragaman ini diwujudkan atas dasar bahasa HTML.

Segala sesuatu yang Anda lihat di halaman - teks, gambar, tabel, dan elemen lain yang membentuk konten semantik halaman web, disebut konten, dibuat menggunakan bahasa markup HTML. Klik klik kanan arahkan mouse ke halaman web mana pun, dan pilih item dari menu tarik-turun "lihat kode HTML" atau « Kode sumber» – akan muncul editor teks dengan simbol dan ikon yang tidak dapat Anda pahami - ini dia HTML-kode halaman.

Dokumen WWW apa pun dapat berisi teks, grafik, dan hyperlink yang diberi gaya dan diformat ke berbagai sumber Internet. Untuk mewujudkan semua kemungkinan ini, dikembangkan bahasa khusus deskripsi dokumen WWW disebut Bahasa Markup Hiperteks (HTML), yaitu, Bahasa Markup Hiperteks.

Deskripsi HTML halaman Web adalah serangkaian instruksi yang ditafsirkan oleh program browser.

Sebuah dokumen yang ditulis dalam HTML adalah berkas teks berisi teks sebenarnya, pembawa informasi pembaca, dan tag markup. Tag adalah ditentukan oleh standar HTML, rangkaian karakter yang merupakan instruksi untuk browser.

Menurut petunjuk ini, program menempatkan teks di layar dan menyertakan gambar yang disimpan secara terpisah file grafik, dan membentuk hyperlink dengan dokumen lain atau sumber daya Internet. Dengan demikian, file HTML mengambil tampilan dokumen Web hanya ketika diinterpretasikan oleh browser.

Namun, di bahasa standar HTML memiliki satu kelemahan signifikan. Misalnya, untuk mendeskripsikan tata letak paragraf dalam isi dan desainnya, properti ini perlu dijelaskan untuk setiap paragraf, meskipun terdapat 10 atau 20 paragraf dalam satu halaman. Dan bayangkan situs tersebut dapat memiliki 100 halaman. Akibatnya, Anda perlu memasukkan potongan kode HTML yang sama ke dalam halaman dua puluh atau dua ratus kali, sehingga meningkatkan ukuran file.

Sungguh memusingkan bagi para programmer! Untuk membuat hidup lebih mudah bagi webmaster miskin, mereka diciptakan Lembar Gaya Bertingkat (CSS) - tabel bertingkat gaya.

CSS beroperasi dengan cara yang berbeda, lebih nyaman dan ekonomis. Untuk mendesain paragraf dalam konten situs, kode atau gaya desain ditulis satu kali. Kode atau deskripsi gaya ini disimpan di file terpisah. Selanjutnya hanya diperlukan bila bantuan HTML tandai teks menjadi paragraf, dan CSS akan menangani desainnya. Kode tersebut dikurangi puluhan dan ratusan kali lipat.

Menempatkan deskripsi gaya dalam file terpisah sangat mudah, terutama jika situs tersebut memiliki lebih dari satu halaman. Misalnya saja untuk berubah pendaftaran semua paragraf di situs, cukup ubah kode di style sheet.

CSS bersama dengan HTML dapat menghasilkan keajaiban, semuanya berkat pembagian kerja dalam membuat halaman web. Elemen halaman ditandai berbasis HTML, A desain visual elemen diberikan menggunakan tabel CSS

Lembar Gaya CSS- upaya untuk memisahkan detail desain halaman dari struktur dan isinya.

Untuk saat ini, ini adalah surat berbahasa Mandarin untuk Anda. Tapi saya tidak akan berpura-pura menjadi seorang guru dan menulis tutorial lain “Apa itu HTML dan CSS”. Anda akan menemukan banyak sekali informasi serupa di Internet, ditambah banyak buku teks yang diterbitkan. Jika Anda ingin mendalami topik ini lebih dalam, bendera ada di tangan Anda. Jangan takut HTML Dan CSS sangat sederhana, dan teko mana pun dapat menguasainya. Namun tidak perlu terburu-buru melakukan hal ini.

Oleh pengalaman sendiri Saya tahu bahwa lebih baik tidak membebani otak teko dengan informasi yang tidak perlu, jika tidak maka akan terjadi, mis. otak akan mendidih sebelumnya. Jangan percaya dengan orang-orang pintar di berbagai situs yang menyatakan bahwa membuat website harus dimulai dengan mempelajari HTML dan CSS. aku punya untukmu kabar baik– Anda tidak perlu menulis kode HTML sendiri, karena orang pintar datang dengan CMS .

Dan itu diterjemahkan sebagai “bahasa markup hiperteks.” Hypertext adalah metode khusus untuk menavigasi halaman Internet, diimplementasikan dalam bentuk link hypertext. Dengan mengeklik tautan ini, Anda dapat dengan mudah menavigasi struktur situs. Transisi dalam hal ini tidak terjadi secara linier, yaitu. Anda selalu memiliki kesempatan untuk membuka halaman mana pun di situs, yang tautannya saat ini terlihat.

Markup mengacu pada aturan dan properti tertentu yang ditetapkan ke elemen halaman. Mereka diimplementasikan dalam bentuk yang disebut tag. Misalnya, untuk menunjukkan bahwa teks tertentu pada suatu halaman harus berada di tengah, Anda dapat menandainya dengan tag tengah. Lihat kode HTML halaman tertentu mungkin melalui dia menu konteks. Misalnya, untuk mengakses kode ini di peramban Firefox Anda perlu mengklik kanan di dalam halaman dan memilih "Kode Sumber Halaman".

Bagaimana cara kerja kode HTML?

Apa saja jenis tagnya?

Keterbatasan HTML

Setiap halaman web memiliki struktur umum kode html dasar. Mari kita lihat kode html paling dasar dari halaman website

Kode HTML website paling sederhana (halaman web):

Tekshalaman

Dalam kode situs itu sendiri, huruf besar-kecil tidak menjadi masalah; Anda dapat menulis “HTML, BODY…” dan “html, body…”.

T misalnya Dan berfungsi untuk memastikan bahwa kode dokumen dikenali sebagai html.

– menunjukkan bahwa “kepala” halaman dimulai – judul halaman dan informasi teknisnya.

– judul halaman. Apa yang tertulis di antara kedua tag ini akan ditampilkan di header browser.

– “head” halaman sudah berakhir.

Ada tag pembuka <тег> dan penutupan . Ada tag yang tidak perlu ditutup. Beberapa tag, meskipun tidak ditutup, tidak menyebabkan kesalahan, namun selalu ditutup jika perlu ditutup.

Teks halaman – di antara tag-tag ini terdapat seluruh konten halaman – teks, gambar, tautan, dll.

– dokumen telah berakhir. Biasanya ini adalah jangan menandai kamu pabrik ditambahkan di akhir dokumen.

Tag pemformatan teks

-

- ini adalah judulnya.

Semakin kecil angkanya, semakin besar font pada judulnya, Anda dapat menyesuaikan ukuran masing-masing jenis judul. Diyakini bahwa tag

,

tag yang paling “favorit” oleh mesin pencari; melalui tag ini, mesin pencari menentukan topik konten. Tag

-

harus ditutup.

Contoh:

Tag judul tingkat kedua

- Htajuk tingkat kedua

Judul tingkat keempat

- H tajuk tingkat keempat

Tag juga sering digunakan untuk memformat teks - , , , , .

Teks akan muncul dalam huruf tebal Teks akan muncul dalam huruf tebal – tag analog Teks miring - analog Teks yang digarisbawahi Teks yang dicoret Ditingkatkan Dan menurun teks dibandingkan dengan yang sekarang.
Superskrip -X 2 Berlangganan -X 2 Teks monospace - seperti mesin tik

Semua tag ini memiliki dua sisi dan harus ditutup. Tag dapat digunakan dalam kombinasi. Misalnya:

Teks tebal, miring, dan bergaris bawah

Biasanya, tag ditutup sesuai urutan pembukaannya. Jika Anda mengubah urutannya, tidak ada yang berubah, tetapi jika Anda memiliki format teks yang rumit, Anda akan mengalami masalah.

Umpan baris dan blok teks

Tag judul (

-

) terjemahkan baris setelahnya (“tekan enter”), kecuali ditentukan lain dalam style sheet. Saat Anda menulis teks dalam “naked html”, jeda baris Anda tidak akan diperhitungkan, teks akan masuk berturut-turut hingga judul atau tag khusus.

– menerjemahkan baris tersebut. Tag penutup tidak diperlukan. Jika Anda membutuhkan jarak antar baris yang besar, Anda dapat menggunakan beberapa tag seperti ini, misalnya,




– lima baris feed.

---

– garis pemisah horizontal:

Banyak tag dapat menggunakan atribut khusus, mis.

---

Anda dapat menentukan ketebalannya:

---

http://site.ru/image.png - Inialamat gambar.

http://site.ru/"> Pergi ke Situs.ru

Di manahttp://site.ru/ - situs yang dituju oleh tautan tersebut,Pergi ke Situs.ru – nama tautan , yang disebut jangkar.

Kode tautan berisi atributsasaran=" _kosong " - tautan akan terbuka di jendela baru, dan akan ada gambar di kodenyaperbatasan="0″ - gambar tidak akan memiliki bingkai.

Daftar

Daftar dibuat dengan kode html berikut:

• Item daftar pertama


• Item kedua dalam daftar


• Item ketiga dalam daftar

Tabel

Tabel adalah elemen yang lebih kompleks daripada tag html ini, Anda dapat mencurahkan seluruh posting untuk itu, di sini saya hanya akan menunjukkan contoh kode untuk tabel paling sederhana:

Isi

Jeda baris ditempatkan setelah setiap tag dalam kode untuk kemudahan mengedit kode html.

Isi

Kode tabel yang sama dapat disisipkan seperti ini:

Ini adalah struktur utama halaman situs. Mengetahui dasar-dasarnya, Anda dapat beralih ke yang lebih kompleks. Dasar kode html diperbarui: 10 April 2017 oleh:

admin

Sekarang beberapa kata tentang tag yang kami gunakan untuk membuat halaman ini.

1. Deskripsi tag html dari contoh - tag ini harus ada di setiap halaman web. Mereka memberi tahu browser dan mesin pencari

bahwa ini adalah halaman html.

... Setiap halaman html memiliki struktur berikut: ... Tag judul

2. ... Badan halaman ...

4. - di antara tag-tag ini terdapat semua konten halaman yang terlihat. - di antara tag ini tertulis judul halaman, yang ditampilkan di bagian paling atas browser. Ngomong-ngomong, saat Anda mencari sesuatu di mesin pencari, hal pertama yang ditampilkan adalah nama halamannya. Menandai