Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2

Kategori

Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2 : Styling dan CSS

Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2 : Styling dan CSS

Pada bagian pertama dari Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1 , kita belajar sedikit tentang tulang dari halaman web : HTML . Dalam pelajaran hari ini , kita akan mulai menempatkan pakaian di situs web menggunakan styling dan CSS .

Semoga tulisan Cara Membuat Website Sendiri ini menuntun Anda melalui tiga cara Anda dapat menerapkan gaya elemen dalam dokumen HTML . Ini mengasumsikan Anda sudah memahami pelajaran pertama , jadi jika Anda belum , Anda mungkin ingin melakukan itu pertama . Pada akhir pelajaran ini , Anda akan memahami bagaimana untuk menambahkan properti gaya untuk elemen dalam halaman web Anda . Untuk bahan referensi tambahan , lihat teks di bawah .

Apa yang akan Anda Perlu
  • Sebuah editor teks biasa untuk menulis HTML Anda
  • web browser pilihan Anda untuk menguji HTML Anda
  • Keinginan untuk daging sapi sampai pengetahuan Anda tentang cara kerja web
Seperti yang Anda lihat , itu tidak perlu banyak untuk memulai .

Apakah Styles dan CSS ?

Cascading Style Sheets

CSS singkatan dari Cascading Style Sheets , dan itu bahasa menggunakan browser untuk menafsirkan bagaimana elemen pada halaman web akan terlihat . Bahasa CSS adalah cukup mudah untuk memahami : Anda mendefinisikan properti CSS tertentu, yang span segala sesuatu dari dimensi elemen ( lebar dan tinggi ) , teks ( berat badan , gaya , font- jenis, warna , dll ) , posisi , dan jarak ( margin dan paddings ) .

Pada dasarnya Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2 ini ada hubungannya dengan bagaimana unsur harus melihat , itu ada hubungannya dengan CSS . Untuk memperpanjang pada metafora di atas , HTML dan unsur-unsur dalam dokumen Anda adalah tulang dari situs. Mereka menyediakan struktur . CSS gaun situs Anda dan membuatnya tampak bagus atau tidak . Bagian itu tergantung pada daging desain Anda .

Ditulis , misalnya , CSS terlihat sedikit sesuatu seperti ini : Jika saya ingin menambahkan warna untuk sepotong teks , properti CSS yang sesuai adalah , tidak mengejutkan color . Untuk menentukan properti warna, Anda akan cukup ketik color , Titik dua , menyatakan apa gaya harus , kemudian diakhiri dengan titik koma . Jadi , misalnya , color:red;   mau tak mau dan mengharapkan hasil . Anda dapat menggunakan CSS untuk menerapkan gaya untuk setiap elemen pada halaman web Anda di salah satu dari tiga cara :
  • Gaya Inline : Metode ini yang terbaik untuk cepat , satu off gaya yang ingin Anda berlaku untuk satu elemen tanpa banyak overhead . Anda dapat menambahkan gaya inline untuk setiap elemen dengan mendefinisikan atribut gaya elemen . Sebagai contoh:
<p style="color:red;">The text inside this paragraph tag will be red.</p>
  • Anda dapat menentukan lebih dari satu properti menggunakan gaya inline selama Anda ingat titik koma di antara mereka :
<p style="color:red; font-family:Helvetica; font-size:20px;">The text inside this p tag will be red, 20-pixels wide, and use Helvetica.<p>
  • Stylesheet Internal: Di dalam dokumen ( sering di dalam kepala ) , Anda dapat menentukan gaya untuk elemen dalam halaman menggunakan penyeleksi . stylesheet internal terlihat seperti ini :

<code><style type="text/css">
        h3 {
                color:red;
                font-family:Helvetica;
                font-size:20px;
        }
</style>
  • Dalam contoh di atas h3 adalah pemilih . Itu mengatakan , " Semua elemen H3 di halaman ini harus menggunakan gaya berikut ". Anda juga dapat menentukan penyeleksi menggunakan kelas atau ID elemen .
  • Stylesheet Eksternal : stylesheet ini bergerak CSS ke file eksternal berakhir dengan css ( misalnya , style.css Sintaks untuk stylesheet eksternal adalah persis seperti apa yang Anda lihat dengan stylesheet internal, tetapi Anda tidak perlu gaya deklarasi Sebaliknya . . , Anda link ke stylesheet eksternal Anda seperti:
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
  • Dalam hal ini , saya punya file style.css di dalam folder stylesheet , dan saya mengatakan web browser : " . Ketika Anda memuat halaman, mencari CSS di sini " Segala sesuatu di dalam tampak sama dengan apa yang terjadi di dalam gaya tag stylesheet internal.

Ketika Menggunakan Kelas , ID , dan Element Selectors ?

Sebagian besar waktu , demi organisasi , Anda akan ingin menggunakan stylesheet eksternal . Tapi bagaimana Anda memutuskan mana penyeleksi untuk digunakan? Mari kita cepat berjalan melalui pilihan Anda :
  • Penyeleksi Elemen : Anda harus menggunakan pemilih elemen ketika Anda ingin yang paling elemen dari jenis yang terlihat dengan cara yang sama pada halaman Anda . Jadi jika Anda ingin semua elemen h2 menjadi 30 piksel , Anda bisa menambahkan berikut ke file CSS Anda :
<code>h2 {
        font-size:30px;
}
  • Sejak saat itu , setiap h2 akan menghormati gaya bahwa kecuali jika Anda menimpanya .
  • Kelas Penyeleksi : Kelas berguna untuk gaya luas yang ingin Anda terapkan untuk lebih dari satu elemen , tetapi mungkin gaya yang ingin Anda gunakan sedikit lebih selektif daripada yang Anda lakukan ketika menggunakan pemilih elemen . Dalam video tersebut , saya mendefinisikan sangat membosankan red kelas seperti:
<code>.red {
        color:red;
}
  • Menggunakan dot ( . ) Sebelum teks " merah " , saya sudah bilang browser saya bahwa pemilih ini adalah kelas saya menciptakan . Sekarang , dalam setiap elemen dalam halaman saya , saya bisa menambahkan atribut class = " merah " dan teks yang akan merah .
  • ID Pemilih : Ditetapkan di CSS oleh sebelumnya hash ( # ) , ID pemilih adalah untuk satu elemen tertentu dan satu elemen saja. Pada dasarnya ini menyediakan cara untuk menyesuaikan gaya untuk satu elemen tertentu tanpa menggunakan gaya - menjaga inline semua styling Anda di satu tempat . ( ID juga sangat berguna untuk JavaScript , tapi itu jauh melampaui lingkup kami di sini . ) Jika saya ingin div 800x600px dengan latar belakang merah yang disebut my_red_div , akan terlihat seperti ini :
<code>#my_red_div {
        width:800px;
        height:600px;
        background:red;
}

Pelajari artikelnya untuk melihat semua ini dalam praktek . Membaca adalah satu hal , tapi itu semua mulai lebih masuk akal ketika Anda bisa melihatnya .

Itu dia?

Singkatnya , ya ! Tentu saja ada lebih CSS , dan ada beberapa cara serius lebih maju dari penanganan CSS sehingga Anda benar-benar dapat mempersempit bagaimana unsur-unsur mewarisi gaya mereka , tapi itu benar-benar dasar-dasar . Satu-satunya hal yang hilang : sifat !

Aku tidak , bagaimanapun , akan berjalan melalui setiap properti CSS yang tersedia ( kami terus terang tidak punya waktu dalam pelajaran ini ) . Seperti kebanyakan hal dari sifat pemrograman , Anda akan belajar lebih banyak dari mencari tahu pilihan Anda daripada yang saya bisa berikan dalam satu panduan ringkas . Berikut adalah beberapa referensi CSS Anda mungkin ingin menelusuri :
  • W3Schools CSS Refrence (www.w3schools.com/css/css_reference.asp)
  • Ditambahkan Bytes ' CSS Cheat Sheet (www.cheatography.com/davechild/cheat-sheets/css2/)
  • A List Apart (alistapart.com/)
Saya ingin mendengar lebih favorit di komentar alat bantu referensi ! Aku kebanyakan googler untuk hal semacam ini . Aku tidak ahli CSS , tapi aku sudah menghabiskan jumlah yang baik hacking CSS untuk proyek-proyek hewan peliharaan saya sendiri waktu , dan percayalah : Sedikit berjalan jauh , tapi ada banyak yang dapat Anda pelajari jika Anda ingin pergi jauh .

Nah itu dia sobat http://ddsobirin.wagomu.id/ sedikit informasi yang bisa admin bagikan. Mudah-mudahan ada guna dan manfaat bagi Anda semuanya. Jangan lupa untuk membaca juga postingan lainnya terkait Staedtler Pensil Terbaik Untuk Anak dan juga ada postingan mengenai Tips Memilih Jasa Ekspedisi Pengiriman Barang. Terima kasih sudah berkunjung dan membaca postingannya, demikianlah mengenai Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2.
   




  • Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1

    Kategori │Cara Membuat Website

    Belajar Cara Membuat WebSite Sendiri Untuk Pemula Bagian I : Memahami dan Menulis HTML

    Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1

    Semua orang hidup setidaknya sedikit dari kehidupan mereka di web , dan apakah Anda mengembangkan halaman web untuk hidup , ingin membuat situs web papan nama , atau hanya ingin lebih banyak kontrol atas bagaimana komentar Anda muncul di situs web , memiliki pemahaman HTML pada perintah Anda sangat berharga . Dengan itu dalam pikiran , dalam pelajaran pertama kami tentang cara membuat website sendiri , kami meliputi dasar-dasar tingkat atas dari HTML - bahasa markup dominan web .

    Saat ini sangat mudah untuk menempatkan bersama-sama kehadiran web menggunakan media sosial dan halaman arahan pribadi , tetapi jika Anda ingin benar-benar membuat situs web Anda sendiri Anda akan perlu belajar HTML dan CSS . Untungnya , kami dapat membantu .

    Anda dapat membuat dan mengatur dengan editor teks , memandu Anda melalui struktur dasar dari sebuah dokumen HTML , dan memperkenalkan Anda untuk beberapa hal tentang HTML Anda akan ingin tahu segera . Pada akhir pelajaran Anda akan tahu bagaimana untuk membuat halaman HTML dasar . Jika Anda lupa sesuatu atau ingin bahan referensi tambahan sedikit , memeriksa teks di bawah . Ini akan memberikan Anda dengan informasi dasar tentang HTML yang Anda butuhkan.

    Apa yang Anda Perlukan?
    • Sebuah editor teks biasa untuk menulis HTML Anda
    • web browser pilihan Anda untuk menguji HTML Anda
    • Keinginan untuk daging sapi sampai pengetahuan Anda tentang cara kerja web
    Seperti yang Anda lihat dalam Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1 Anda benar-benar tidak perlu banyak untuk memulai .

    Mendapatkan Plain Text Editor

    Dalam rangka untuk menulis HTML, Anda memerlukan editor teks biasa. Untuk menggunakan editor teks biasa disebut Textmate, tapi itu akan dikenakan biaya. Jika Anda ingin sesuatu yang gratis, Anda punya banyak pilihan besar, termasuk Notepad ++ (Windows), Kod (Mac), atau Teks Sublime baik untuk Windows dan Mac. Ada beberapa editor teks lain di luar sana, sehingga Anda dapat menggunakan apa pun yang Anda inginkan selama itu adalah editor teks biasa.

    Sedangkan teks biasa jangka adalah jenis keliru (inilah mengapa), itu pada dasarnya digunakan untuk menggambarkan teks yang tidak memiliki gaya apapun dan hanya huruf, angka, dan simbol. Ini berarti tidak ada yang berani, tidak ada miring, tidak ada ukuran yang berbeda, dll.

    Sementara editor teks polos Anda mungkin memiliki sintaks-fitur yang mengubah warna teks berdasarkan apa yang Anda ketik untuk membuat kode Anda lebih mudah dibaca ini hanya sesuatu yang Anda akan melihat dalam editor teks Anda dan sesuatu yang tidak disimpan dalam file. Pada dasarnya, Anda memerlukan editor teks yang tidak menyimpan apa-apa tapi teks (yang berarti Anda tidak ingin menggunakan sesuatu seperti Microsoft Word).
    Catatan : Untuk keperluan pelajaran ini , Anda harus menyimpan semua file yang Anda buat dalam editor teks dengan html sebagai ekstensi - file contoh , " my_first_web_page.html " . Anda dapat mengedit dokumen html di teks editor pilihan Anda , tetapi Anda juga dapat melihatnya di browser Anda . Apa yang Anda lihat ketika Anda membukanya di browser Anda akan sangat berbeda dari apa yang Anda lihat ketika Anda membukanya di editor teks Anda .

    Apa itu Dokumen HTML ?

    Jika Anda membaca bagian atas, Anda mungkin menduga bahwa HTML yang merupakan singkatan dari HyperText Markup Language adalah hanya sekelompok teks yang disimpan sebagai jenis dokumen yang browser Anda mengidentifikasi sebagai menggunakan HTML . Jika Anda melihat gambar pada halaman web , itu hanya dirujuk dalam teks dokumen HTML dan tidak secara fisik dimasukkan sebagai bagian dari file .

    Semua dokumen HTML benar-benar adalah menyediakan satu set instruksi berbasis teks yang web browser dapat menafsirkan . Hal ini dilakukan dengan encapsulating teks halaman di tag , yang kita akan belajar lebih banyak tentang dalam satu menit . Ia juga menggunakan tag ini untuk memberitahu web browser untuk melakukan hal-hal seperti gambar tampilan , tambahkan baris istirahat , dan banyak lagi . Pergi lebih jauh , HTML bisa ditata menggunakan CSS yang merupakan singkatan dari Cascading stylesheet, mana kita akan belajar tentang di pelajaran berikutnya . Untuk saat ini , hanya memahami bahwa HTML adalah set instruksi untuk browser Anda bahwa Anda akan menulis .

    Apakah Tags itu?

    Tag digunakan dalam HTML untuk menentukan unsur-unsur tertentu pada halaman sehingga web browser yang tahu bagaimana membuat mereka . Inilah yang satu set tag terlihat seperti :

    <html> </html>

    Tag di atas adalah tag HTML . Dokumen HTML seluruh Anda masuk ke dalam tag tersebut . Semua tag mulai dengan kurang dari simbol dan akhir dengan lebih dari simbol . Mereka disebut tag , sebagian, karena simbol-simbol membuat mereka terlihat seperti tag .

    Tag mulai hanya memiliki istilah HTML di dalamnya , tetapi Anda akan melihat bahwa tag berakhir memiliki / sebelum HTML jangka . The / adalah apa menunjuk itu adalah tag penutup . Tag ini memberitahu browser web Anda bahwa tag HTML pertama adalah awal dari dokumen HTML dan tag penutup / HTML kedua adalah akhir . Kebanyakan tag terlihat seperti ini . Misalnya , jika Anda ingin membuat teks tebal Anda mungkin melihat ini :

    <b> Bold Text </b>

    Catatan : Ada cara lain untuk membuat teks tebal , juga, jadi pastikan untuk menonton videonya di youtube untuk penjelasan lengkap sebagai perbedaan ini kadang-kadang bisa sangat penting .

    Anda juga akan melihat tag yang terlihat seperti ini :

    <img src="image.jpg" width="640" height="480"/>

    Tag di atas adalah tag gambar . Anda mungkin pernah tahu ini sudah, tapi tugasnya adalah untuk menampilkan gambar . Ada dua hal yang patut diperhatikan yang berbeda tentang tag ini . Pertama , tidak memiliki tag berakhir . Hal ini karena tag img adalah tag menutup diri . Ini tidak memerlukan tag akhir karena tidak ada yang akan pergi antara tag awal dan tag akhir .

    Anda akan melihat / a pada akhir tag img , bagaimanapun , dan itu untuk menunjuk akhir. Kembali di hari-hari awal HTML Anda tidak perlu menambahkan bahwa / untuk tag gambar , dan secara teknis Anda masih tidak, tapi itu bentuk yang tepat . Perbedaan lain yang Anda akan melihat adalah bahwa tag memiliki banyak atribut . Atribut adalah hal-hal seperti src = " " dan height = " " , dan mereka berisi informasi yang menjelaskan tentang tag ; dalam kasus tag img , sumber ( src ) atribut selalu diperlukan .

    Atribut src menentukan bahwa file gambar kita ingin menampilkan adalah image.jpg . Karena kita hanya daftar nama file , browser akan menganggap kita menjaga bahwa file gambar di lokasi yang sama persis seperti dokumen HTML kita . Jika Anda memiliki folder bernama gambar di tempat yang sama seperti dokumen HTML Anda dan terus gambar di sana, Anda akan mengatur src untuk " images / image.jpg " karena / menunjuk bahwa kita akan ke dalam folder .

    Jika Anda ingin memuat gambar dari sebuah situs web eksternal , Anda hanya bisa tapi URL lengkap ke gambar ( misalnya ) . Atribut lain hanya menentukan tinggi dan lebar gambar Anda . Hanya atribut src diperlukan untuk tag gambar , tetapi jika Anda tidak menentukan tinggi dan lebar dari gambar Anda browser tidak akan tahu berapa banyak ruang untuk meninggalkan dan itu akan terus menyesuaikan kembali halaman seperti beban . Ini terlihat agak aneh , jadi selalu lebih baik untuk menentukan tinggi dan lebar dalam tag img Anda .

    Untuk referensi cepat dari beberapa elemen tag dasar yang dapat Anda gunakan dalam dokumen Anda , cheatsheet ini adalah tempat yang baik untuk memulai .

    Struktur Dokumen Dasar HTML

    Sekarang bahwa Anda punya struktur tag dasar ke bawah, mari kita lihat struktur dokumen HTML dasar ini . Anda harus tahu ini adalah tampilan yang sangat mendasar dan tidak termasuk benar-benar semua yang Anda mungkin akan menemukan dalam dokumen HTML sepenuhnya dikembangkan , tetapi bekerja dengan baik dan membuat hal-hal yang baik dan sederhana . Berikut struktur yang sangat mendasar :

    Struktur Dokumen Dasar HTML

    Anda akan melihat bahwa di dalam tag HTML yang KEPALA dan BODY tag . Tag HEAD merangkum informasi yang belum tentu akan menampilkan langsung pada halaman, seperti judul halaman ( yang muncul sebagai jendela atau judul tab pada browser web Anda ) , gaya CSS , dan metadata lainnya . Tag BODY merangkum informasi yang akan ditampilkan pada halaman Anda teks , gambar , dan media yang kaya . Dokumen HTML yang dihasilkan dibuka di browser web Anda ( cukup klik ganda file yang disimpan atau drag ke jendela browser ) akan terlihat seperti ini :
    Hasil dari Struktur Dokumen Dasar HTML

    Seperti yang Anda lihat dari contoh , tag tubuh memiliki beberapa hal di dalamnya . Pertama ada tag DIV dengan ID header . tag DIV digunakan untuk mengandung bit konten sehingga Anda dapat gaya mereka dan memindahkan mereka sekitar dengan CSS . Anda akan belajar lebih banyak tentang hal ini ketika kita menyelam ke CSS dalam pelajaran berikutnya .

    Di dalam tag header DIV adalah beberapa teks . Bagian pertama dari teks di dalam tag H1 . tag H1 , H2 , H3 , H4 , H5 , dan H6 semua digunakan untuk membuat judul teks . H1 adalah yang terbesar dan H6 adalah yang terkecil . Secara default mereka menghasilkan tebal , teks yang lebih besar , tetapi Anda dapat gaya mereka namun Anda seperti menggunakan CSS . Karena dokumen HTML ini tidak memiliki informasi gaya CSS , tag H1 akan membuat teks Halaman My terlihat tebal . Efek ini sangat mirip dengan teks judul bagian besar yang Anda lihat di posting ini .

    Di bawah teks H1 hanya beberapa biasa , un gaya teks . Kebanyakan browser membuat un gaya teks dalam font Times New Roman pada ukuran 12pt . Ketika Anda mulai menambahkan gaya CSS Anda akan dapat untuk gaya teks ini namun Anda suka dengan menetapkan gaya default.

    Itu semua Anda benar-benar perlu tahu tentang HTML dasar . Dalam pelajaran berikutnya , kita akan mengambil melihat CSS dasar . Setelah itu kita akan melihat menggabungkan keterampilan untuk membuat situs web dan kemudian membungkus dengan sumber daya tambahan untuk membantu Anda mempelajari lebih lanjut tentang pembuatan situs web . Sampai jumpa besok!

    Nah itu dia sobat http://ddsobirin.wagomu.id/ sedikit informasi yang bisa admin bagikan. Mudah-mudahan ada guna dan manfaat bagi Anda semuanya. Jangan lupa untuk membaca juga postingan lainnya terkait Staedtler Pensil Terbaik Untuk Anak dan juga ada postingan mengenai Tips Memilih Jasa Ekspedisi Pengiriman Barang serta ada juga postingan tentang Green Pramuka City Hunian Strategis dan Nyaman di Pusat Kota. Terima kasih sudah berkunjung dan membaca postingannya, demikianlah mengenai Belajar Cara Membuat Website Sendiri Untuk Pemula bagian 1.