Pengantar pengembangan web

HTML 5 logo on an iPhone smartphone with app icons around it in a cloud
Selamat datang di web.

Kembali pada hari saya (Oke, sebelum hari saya), profesi pengembang web adalah satu rendah. Ini peringkat di bawah anjing pembenci tetapi di atas Yankees fan pada skala kehormatan profesional. Karena semua tag dan gambar transparansi spacer kita gunakan, kami dilihat sebagai hacker mentah tanpa rasa estetika.

Baik, kita mungkin masih kurang dalam rasa estetika, tetapi sebagai Web telah dikembangkan sehingga memiliki profesi pengembang web. Hari-hari ini ada alat yang tak terhitung jumlahnya yang bisa kita gunakan untuk membuat ditulis dengan baik, standar sesuai, dan indah (Oke, mungkin bukan yang terakhir) halaman web. Sebagian besar situs besar yang Anda gunakan saat ini (plug tak tahu malu: termasuk yang satu ini) dibangun menggunakan alat ini.

Perkumpulan kami alat pada akhir browser ini telah memungkinkan kami untuk menciptakan hal-hal di web yang tak terbayangkan hanya 10 tahun yang lalu, seperti jaringan sosial yang tak terhitung jumlahnya yang mengaku menjadi cara terbaik untuk membuang-buang waktu Anda, “panas” startups teknologi mengklaim telah merevolusi sesuatu yang sudah dilakukan ribuan kali, dan klon Angry Birds mengaku hanya sedikit lebih buruk dari aslinya. Semua di web. Jadi mungkin alat ini belum pergi ke yang terbesar dari penggunaan.

Jadi apa alat ini menakjubkan saya telah berbicara tentang? Memimpin jalan telah menjadi (terus terang menakjubkan) bahasa yang disebut HTML5, CSS3, dan JavaScript, yang saya julukan 3 penunggang kuda dari webocalypse yang. Berikut adalah melihat di masing-masing:

HTML

HTML (benar dikenal sebagai HyperText Markup Language; Anda dapat melihat mengapa orang-orang yang tidak ingin terlihat buruk hanya menggunakan akronim) adalah bahasa yang digunakan untuk lay out halaman web. Klik kanan pada halaman ini dan klik “Lihat Sumber”. Itulah HTML halaman ini menggunakan.

Dasarnya, HTML adalah sekelompok tag, yang browser menafsirkan dan menjabarkan. Misalnya, melihat kode HTML ini:

<p>Saya tidak tahu tentang Anda, tapi aku suka menekan tombol.</p>

<br>

<tombol>Klik saya!</tombol>

Kode HTML ini teks dibungkus dalam sebuah paragraf (itu <p> tag mulai paragraf, itu </p> tag berakhir paragraf.) Ada satu baris (itu <br>) dan kemudian tombol Anda dapat mengklik ke isi hati Anda. Browser Anda akan berbaring keluar pada layar untuk Anda.

Jadi itu semua baik dan bagus. Tapi jika Anda memiliki apa-apa selain HTML, you get a webpage that looks like it came straight out of the 1990’s. Tidak lebih baik keluar dari dekade itu pula (hairstyles, musik, dan lain-lain) Tapi tunggu! Masih ada lagi!

CSS

Akronim lain. Musim panas. CSS singkatan Cascading Style Sheets, yang merupakan sedikit keliru karena mereka tidak benar-benar kaskade (apa pun artinya… itu kode komputer, bukan air terjun!) CSS adalah bahasa yang digunakan untuk gaya halaman Web. Ini, terlalu, ditafsirkan oleh browser Anda.

CSS dan HTML bekerja sama – HTML membuat tata letak halaman, CSS memberikan bakat nya. Bayangkan membangun rumah: HTML menyediakan kerangka kayu menjemukan tapi diperlukan, CSS menambahkan warna neon dan furnitur unik.

CSS adalah bahasa cukup sederhana: untuk tag HTML tertentu (seperti paragraf), Anda dapat menentukan nilai untuk kelas berbagai gaya. Browser Anda akan membaca CSS dan menerapkannya pada semua tag HTML yang cocok. Misalnya:

p {

warna: merah;

font-size: 16px;

}

Jadi setiap ayat (barang-barang di HTML <p> tag) akan memiliki merah font yang dan menjadi 16 piksel dalam ukuran. Jika Anda perhatikan, ini adalah beberapa gaya yang sama dapat Anda gunakan di Microsoft Word dan aplikasi lainnya.

Jadi sekarang halaman web Anda diletakkan dan mereka terlihat cantik. Tapi ada satu hal yang: itu semua mereka lakukan. Mereka hanya duduk di sana dan terlihat cantik. Yang sangat bagus dan semua, tapi pengguna web ingin lebih. Mereka ingin animasi mewah. Mereka ingin pop-up (Oke, mungkin mereka lakukan kembali di 2002, tapi saya ngelantur.) Mereka ingin tombol yang akan melakukan hal-hal ketika Anda mengklik pada mereka.

Tentang yang terakhir – itu masalah. Anda dapat membuat <tombol> di HTML, dan Anda dapat mengkliknya sepanjang minggu, tapi itu tidak melakukan apa-apa dalam waktu dekat. Jika Anda ingin tombol untuk, oh saya tidak tahu, memindahkan gajah Anda di layar dan menyerang sesuatu, then you need something more.

JavaScript

JavaScript adalah tidak akronim, jika Anda ingin tahu. Mereka menyebutnya JavaScript karena itu tampak seperti bahasa pemrograman disebut Java, yang aneh karena itu tidak. Toh, JavaScript adalah a proper programming language that causes all the dynamic effects Anda lihat di web.

Seperti bahasa pemrograman, JavaScript adalah serangkaian perintah yang membuat variabel dan menggunakan fungsi. Sejuk bagian tentang JavaScript (baik, sekeren bahasa pemrograman dapat) adalah bahwa Anda dapat mengakses elemen-elemen HTML (seperti paragraf dan tombol) dan gaya CSS (seperti warna font dan ukuran) dan mengubahnya. Lihatlah kode ini:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – itu $ sign tells the browser to find all matching elements, and the ‘pmeans it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (lagi, this is all from the viewpoint of awebdev”) is how elegantly the three languages work together. Itu baris terakhir JavaScript berinteraksi dengan HTML halaman dan CSS yang digunakan untuk gaya itu. Ini tidak seperti bahasa ini hanya komponen yang berbeda dari hal yang sama – mereka satu dan sama, sisi yang berbeda dari mesin menakjubkan yang sama.

Terdengar menarik? Saya pikir itu tidak. Itu hanya bagian dari keindahan web.

Diterbitkan oleh

Neel Mehta

Harvard College. Pengembang web. Kadang filsuf. Baseball junkie.

One thought on “Pengantar pengembangan web”

  1. wow was surprised to find out that u wrote it, good job it is a nice lead into this for me before i go to sawyer’s web programming packets.

Tinggalkan Balasan