Cara membuat website bagian 2, situs lengkap yang terbuat dari 0 dalam HTML, CSS dengan galeri gambar - tutorial video

Tutorial ini menjelaskan situs menggunakan HTML dan CSS, meliputi semua tahap: pengembangan website,
membuat akun di hosting gratis dan akhirnya meng-upload file website kami di hosting yang, hosting gratis adalah metode cepat menempatkan sebuah situs web online kami dalam beberapa menit, kelemahan dari metode ini adalah bahwa kita akan memiliki beberapa iklan yang ditampilkan setiap saat di bagian atas (tajuk di atas).

Siapa pun yang ingin membuka situs web, Anda perlu tahu HTML dan CSS, tidak perlu menjadi ahli dalam HTML (Hyper Text Markup Language), tetapi beberapa informasi kode sangat penting untuk memahami cara kerja hal-hal ini.

Bahkan jika Anda membangun satu situs, Anda masih harus tidak tahu apa yang terjadi melalui file-file akan memerlukan koreksi periodik kesalahan atau pencapaian perubahan.

Banyak orang lari dari kode, banyak menyamakan kode dengan hieroglif, tidak seperti itu sama sekali, seseorang pernah berkata: "CODE IS POETRY", dia benar, ketika Anda melihat ada sesuatu yang lahir dari serangkaian baris kode, Anda merasa luar biasa, Anda membangun dunia maya hanya dengan keyboard dan mouse.

Kami menggunakan aplikasi yang dibangun oleh perusahaan perangkat lunak untuk waktu yang lama, kami hanya melakukan operasi komputer, saatnya melakukan pemrograman, sebenarnya itu bukan bahasa pemrograman, ini adalah "bahasa markup", tetapi kami akan merujuk ke itu seperti bahasa pemrograman, karena kedengarannya aneh "bahasa markup", HTML adalah salah satu bahasa pemrograman termudah (markup) yang digunakan saat ini, kita melihat HTML di situs mana pun, banyak perangkat lunak memiliki mereka komponen HTML, bahasa pemrograman ini ada di mana-mana, saatnya mempelajarinya.

Pertama kali bisa kurang menakutkan, tetapi jika Anda berhati-hati daripada Anda akan segera mengerti bahwa tidak semuanya begitu sulit adalah hal-hal sederhana dan indah, kita membuat sesuatu dengan tangan kita, itulah hal yang paling penting.

Kami akan mempelajari dasar-dasar, maka kita mempelajari cara memasukkan teks dalam halaman web, maka kita akan mengatur dan akan mewarnai teks, kita menggunakan halaman gaya CSS (cascading style sheet) dengan yang kita akan menempatkan semua elemen halaman HTML sama sekali sehingga Anda akan menempatkan di website kami dibuat agar terlihat seperti satu potong.

Anda akan mempelajari teknik sederhana, HTML dasar dan CSS, meskipun ini adalah hal-hal dasar dalam HTML dan CSS, akan menciptakan gambaran yang menyenangkan.

Untuk tutorial ini Anda harus mempersenjatai diri dengan perhatian dan kesabaran, tutorial ini bukan sesuatu yang kita mampu untuk melakukan sedikit, jika beberapa detik gulir Anda mungkin kehilangan sesuatu yang sangat penting dan Anda akan melihat setelah itu tidak lagi masuk akal, konsentrasi informasi yang sangat tinggi dan itu sebabnya saya meminta Anda untuk menjadi sangat, sangat berhati-hati.

Setelah tutorial ini, bahkan kursus intensif saya akan mengatakan, Anda akan memiliki gagasan yang lebih baik apa HTML dan CSS, Anda dapat mengontrol kode dengan baik dan Anda memahami dokumen HTML, merasa bahwa HTML tidak hanya array heroglife akan menghilang, Anda tahu apa itu ketika Anda melihat sebuah HTML atau CSS satu.

Kita akan belajar tentang tag (tag), kami miliki di sini beberapa contoh tag (tag) yang dapat Anda gunakan dalam dokumen HTML, jangan khawatir, tidak perlu menghafal mereka semua, Anda perlu belajar hanya dasar-dasar dalam tabel pertama sisanya dapat ditemukan di sini di situs atau di internet ketika Anda membutuhkannya.

Bahkan tabel memerintahkan tag ini, yang dibuat menggunakan HTML.

elemen dasar (tag).

Mendefinisikan format file Web
header dokumen
dokumen Tilul
HTML halaman tubuh
BGCOLOR = warna Latar belakang warna halaman
TEXT =warna Warna teks pada halaman
LINK =warna Halaman warna link yang belum dikunjungi
Vlink =warna warna link mengunjungi halaman
ALINK =warna Link Color selama klik pengguna exacutat
LATAR BELAKANG = url Halaman gambar latar belakang
ayat
<Hn> <Hn> Subtitle dari tingkat dokumen (n = 1-6)
atribut tertentu dari teks berbingkai
SIZE =n Ukuran teks adalah 1-7
WAJAH ="A, b" Tentukan font yang: aJika tersedia, atau b
COLOR =s Warna teks: baik nama warna atau nilai RGB
baris baru
informasi terformat
HTML Comenatriu
pusat materi di halaman
penggaris horisontal
SIZE =x tinggi penguasa dalam piksel
WIDTH =x lebar penguasa dalam pixel atau persentase
NOSHADE Menonaktifkan tampilan bayangan untuk penguasa horisontal
ALIGN =x Keselarasan penggaris horisontal pada halaman (kiri, tengah, kanan)
COLOR =x Warna penggaris horisontal (IE saja)
Mark Jenis jangkar
HREF =url referensi hypertext
HREF =#name Referensi ke sebuah anchor internal yang
nama =nama Definisi jangkar internal yang

Item ke daftar .

Deskripsi definisi
Jenis daftar definisi
dalam definisi
daftar fitur
<OL Memerintahkan daftar (nomor)
TYPE =ujung Penomoran. Kemungkinan nilai: A, a, I, i, 1
MULAI =x Jumlah mulai daftar memerintahkan
<UL daftar unordered (ditandai)
TYPE =bentuk Form bookmark. Kemungkinan nilai: lingkaran, persegi, disc.

elemen format karakter .

Menempelkan teks dalam huruf tebal
Menempelkan teks dalam huruf miring
Paste teks yang disorot
teks monospace
kutipan bibliogarfica
Program daftar
Gaya logika penyorotan
Keyboard teks
Menyoroti logika yang kuat
Program atau variabel
<BASEFONT SIZE = n> Menentukan ukuran font default dari halaman

Elemen untuk frame .

Mendefinisikan halaman penulisan
COLS =x Jumlah dan ukuran relatif dari kolom
ROWS =x Jumlah dan relatif garis ukuran
BORDER =x Menentukan status "aktif" atau "tidak aktif" untuk frame FRAMESET (1 atau 0)
frameborder = x Menentukan ukuran frame
FRAMESPACING = x Jumlah ruang antara dua frame yang berdekatan
Definisi frame tertentu
SRC =url Sumber URL untuk frame
NAME =nama Nama bingkai (digunakan bersama dengan TARGET = nama sebagai bagian dari tanda jangkar
bergulir =scrl Tentukan pilihan bar derulare.Valori mungkin: pada (mengaktifkan), off (tidak aktif), otomatis (automatic)
frameborder =x Ukuran perbatasan sekitar frame
marginheight =x Ruang tambahan atas dan di bawah kerangka kerja tertentu
MARGINWIDTH =x ruang Suplimetar kiri dan kanan untuk spesifik
Halaman bagian ditampilkan kepada pengguna yang tidak dapat melihat bingkai
Framework (hanya (IE)
SRC =url sumber bingkai
NAME =s Nama window (berguna untuk TARGET)
TINGGI =x tinggi bingkai tertanam
WIDTH =x bingkai lebar tertanam

Elemen untuk tabel .

tabel HTML
BORDER =x border tabel
cellpadding =x Ekstra ruang dalam sel tabel
cellspacing =x Ekstra ruang antara sel-sel tabel
WIDTH =x Dikenakan meja lebar
FRAME =nilai penyesuaian halus dari meja
ATURAN =nilai Penguasa tabel penyesuaian halus
bordercolor = warna Warna Spesifikasi Tabel perbatasan
BORDERCOLORLIGHT = warna Warna lebih terang dari dua warna yang ditentukan
BORDERCOLORDARK = warna Warna yang lebih gelap dari dua warna yang ditentukan
ALIGN =meninggalkan Sejalan meja untuk margin kiri halaman, dan teks mengalir sisi kanan
ALIGN =benar Sejalan meja ke tepi kanan halaman dan teks mengalir ke kiri
hspace =x ruang horisontal Suplimetar sekitar meja
vSpace =x ruang vertikal Suplimetar sekitar meja
COLS =x Menentukan jumlah kolom tabel
Mendefinisikan satu set definisi kolom menggunakan markup
<KOL WIDTH =x> Mendefinisikan lebar kolom dalam pixel
Mendefinisikan meja pos
Mendefinisikan tubuh meja
tabel baris
BGCOLOR =warna Menentukan warna latar belakang untuk seluruh baris
ALIGN =penjajaran Sel keselarasan pada baris saat ini (kiri, tengah, kanan)
Data sel tabel
BGCOLOR =warna Menentukan warna latar belakang untuk data sel
colspan =x Jumlah kolom yang mencakup sel data saat ini
rowspan =x Jumlah baris peregangan sel data saat ini
ALIGN =penjajaran Menyelaraskan struktur sel date.Valori mungkin: (kiri, kanan, tengah)
valign =penjajaran alignment vertikal materi dari sel date.Valori mungkin: (atas, bawah, tengah)
LATAR BELAKANG =url Menentukan gambar latar belakang untuk sel tabel
nowrap Jangan biarkan garis membelah teks dalam sel
ALIGN =paduk Menyelaraskan sel data ke dasar teks yang berdekatan
ALIGN =karakter Sejajarkan kolom dengan karakter tertentu (karakter default adalah ".")
ALIGN =membenarkan Sejajarkan kedua tepi kiri dan tepi kanan teks

Item untuk menambahkan gambar.

<IMG Menandai gambar masukan
SRC =url File Sumber grafis
ALT =teks teks alternatif untuk menampilkan, jika perlu
ALIGN =penjajaran Menyelaraskan gambar pada halaman. Kemungkinan nilai: atas (top), tengah (di tengah), bawah (bawah), kiri (kiri), kanan (kanan)
TINGGI =x tinggi gambar (dalam pixel)
WIDTH =x lebar gambar
BORDER =x Bingkai di sekitar gambar bila digunakan sebagai hyperlink
hspace =x Ekstra ruang di sekitar gambar horizontal (dalam piksel)
vSpace =x Ekstra ruang di sekitar gambar secara vertikal (dalam piksel)

Bentuk elemen.

bentuk HTML aktif
ACTION =url program CGI di server yang menerima data
METODE =metode Bagaimana data ditransmisikan ke server (GET atau POST)
<MASUKAN Camp teks atau input data lainnya
TYPE =pilihan Jenis kolom masukan . Nilai yang memungkinkan: teks, kata sandi, kotak centang, tersembunyi, file,
Radio, mengirimkan, ulang, gambar.
NAME =nama Simbolis bidang nilai nama
NILAI =nilai bidang teks default konten
DIPERIKSA = pilihan Tombol / checkbox ditandai secara default
SIZE =x Jumlah karakter dalam kolom teks
SIZE =x Jumlah maksimum karakter yang diizinkan
centang kelompok
NAME =nama Simbolis bidang nilai nama
SIZE =x Jumlah item menu yang ditampilkan sekali (default = 1)
= GANDAx Memungkinkan beberapa pilihan item menu
<PILIHAN Pilihan khusus dalam suatu bidang
NILAI =nilai nilai yang dihasilkan dari menu pilihan ini
penguatan Camp teks pada beberapa baris
NAME =nama Simbolis bidang nilai nama
ROWS =x Jumlah baris dari kotak teks
COLS =x Jumlah kolom (karakter) per baris dari kotak teks
Bagi bentuk logis di bagian
Nama yang terkait set bidang (fieldsets)
ALIGN =s Tentukan legenda keselarasan (penjelasan) yang ditampilkan (atas, bawah, kiri, kanan)
tabindex =x Menentukan item agar saat pengguna menekan tombol Tab
ACCESKEY =c Yang menyediakan kunci dari cara pintas keyboard yang terkait dengan item tertentu
CACAT unsur ini tidak aktif, tapi ditampilkan di layar
dibaca Unsur ini ditampilkan pada layar tetapi tidak bisa diedit

elemen canggih.

informasi spesifik tentang gaya Model
TYPE =val Jenis model gaya. Biasanya "teks / css"
Biasanya mencakup script Javascript dalam halaman web Anda
LANGUAGE =bahasa Bahasa yang digunakan
EVENT =peristiwa Acara yang memicu eksekusi script tertentu
UNTUK =numeobiect Obyek Nama halaman di mana bertindak skrip

DOWNLOAD TABEL HTML DENGAN TAG

Jika Anda ingin mengunjungi situs dilakukan tutorial, Anda dapat mengakses di alamat ini: http://www.videotutorial.150m.com.

Saya sarankan Anda unzip lampiran dan mempelajari tiga file html atau file CSS menggunakan Notepad ++ atau program editing halaman web lain dengan cara ini dapat membuat perubahan cau bahkan dapat membuat catatan selama itu Anda akan belajar html tanpa Anda akun.

Anda ingin Anda menyenangkan dan menyambut Anda di tutorial berikut dalam seri ini dan seterusnya.

DOWNLOAD FILES UJI

oleh Dan Constantin
tutorialegimp.blogspot.com
Cristian Cismaru: Saya suka segala hal yang berhubungan dengan IT&C, saya suka berbagi pengalaman dan informasi yang saya kumpulkan setiap hari. Saya sedang belajar untuk mengajari Anda!

Lihat Komentar (333)

  • Sangat bagus, ton informasi dalam tutorial ini.
    tutorial ini bisa disebut infus HTML dan CSS.
    Mungkin Anda tidak bisa belajar dalam beberapa bulan Anda bisa belajar di sini dalam satu jam atau lebih, saya sudah melihat semuanya sebelum ditampilkan dan dapat mengatakan bahwa saya terkesan mengutip informasi yang dapat disimpan dalam tutorial.
    Pada satu titik saya merasa perlu untuk minum air, meskipun saya hanya menonton tutorial, dan aku tidak ingin berpikir, mengutip Dan minum air setelah itu.
    Ada sesuatu yang tidak belajar HTML dan / atau CSS setelah tutorial ini.

  • Aoleu, apa yang saya coba pelajari selama sekitar 3 bulan, ternyata saya tidak punya waktu ...
    Terima kasih banyak, saya menonton dengan hati-hati!

  • Cristi-adminSangat bagus, ton informasi dalam tutorial ini.
    tutorial ini bisa disebut infus HTML dan CSS.
    Mungkin Anda tidak bisa belajar dalam beberapa bulan Anda bisa belajar di sini dalam satu jam atau lebih, saya sudah melihat semuanya sebelum ditampilkan dan dapat mengatakan bahwa saya terkesan mengutip informasi yang dapat disimpan dalam tutorial.
    Pada satu titik saya merasa perlu untuk minum air, meskipun saya hanya menonton tutorial, dan aku tidak ingin berpikir, mengutip Dan minum air setelah itu.
    Ada sesuatu yang tidak belajar HTML dan / atau CSS setelah tutorial ini.

    ya Anda benar Cristi tapi saya kecewa karena saya pikir Anda akan melakukan tutorial :( tapi toh tutorial bravo dan sangat bagus

    • Ini tidak baik apa yang Anda katakan dan saya jujur ​​mengatakan ini, pria ini berjuang selama sekitar satu setengah jam untuk mengajari Anda cara membuat situs dari awal dan Anda berkata Anda kecewa karena dia tidak membuatnya? Bisakah Anda bayangkan berapa banyak pekerja yang telah dimasukkan ke dalam dan berapa banyak waktu dia telah hilang untuk mengajari kami dasar-dasar html dan css, pikirkan sebelum Anda membuka mulut bahwa itu tidak cocok untuk Anda mengirimkan pekerjaan dan kemudian meninggalkan komentar lain yang tidak perlu seperti Anda kecewa karena dia tidak menaruh, orang lain membuat tutorial ini, terima kasih bahwa Anda punya tempat untuk belajar;)

  • paruh:
    Cristi ya Anda benar tetapi saya kecewa karena saya percaya bahwa Anda akan melakukan tutorialu tapi tetap Dan bravo tutorialu sangat baik

    Apa yang Anda pikirkan, bahwa seri tentang "Cara membuat situs" sudah berakhir.
    Dalam tutorial berikutnya akan saya.
    Karena apa tutorial berikutnya saya akan perlu diawasi tutorial ini dilakukan oleh Dan.
    Apa yang saya sajikan adalah berbeda dari tutorial saya membuat aza Dan, tapi informasi di dalamnya akan sangat diperlukan untuk pemahaman yang tepat tentang hal-hal.
    Beberapa cara mempublikasikan konten di web, tetapi semua memiliki common denominator, HTML dan CSS, tanpa mereka Anda tidak dapat melakukan apa-apa.

  • Cristi-admin:
    Apa yang Anda pikirkan, yang berakhir seri pada "Bagaimana membuat sebuah website".
    Dalam tutorial berikutnya akan saya.
    Karena apa tutorial berikutnya saya akan perlu diawasi tutorial ini dilakukan oleh Dan.
    Apa yang saya sajikan adalah berbeda dari tutorial saya membuat aza Dan, tapi informasi di dalamnya akan sangat diperlukan untuk pemahaman yang tepat tentang hal-hal.
    Beberapa cara mempublikasikan konten di web, tetapi semua memiliki common denominator, HTML dan CSS, tanpa mereka Anda tidak dapat melakukan apa-apa.

    Hello Cristi, akan datang serangkaian php atau js?

  • alex:
    Hello Cristi, akan datang serangkaian php atau js?

    Kami berbicara tentang segala sesuatu, tetapi juga PHP dan JS situs mengikat HTML, HTML tidak bisa tanpa.
    PHP lebih banyak digunakan untuk mengekstrak data dari database, halaman web masih menggunakan HTML, apakah kita berbicara tentang situs dinamis (php, dhtml, asp, jsp, cf) atau kita berbicara tentang situs statis gunakan HTML, tanpa itu Anda tidak bisa melakukan apa-apa.
    Banyak orang membuat kesalahan besar "Saya tidak ingin situs HTML lagi, saya ingin situs php dinamis", ini adalah kesalahan besar, HTML digunakan hampir di mana-mana, apakah kita berbicara tentang situs dinamis atau situs statis.
    JS (java script) tidak sama dengan JSP (Java Server Pages) yang tergantung pada server, situs JS digunakan untuk script tertentu, tidak membutuhkan script Server JS dapat berjalan di browser tanpa perlu komponen server, dan dalam tutorial ini, dan menggunakan serangkaian script JS (galeri foto), untuk barang-barang tepat waktu penggunaan JS, tidak ada situs penuh dengan JS bukan situs penuh menggunakan Java Server Pages yang adalah sesuatu yang lain, meskipun mereka tampak sama.
    Saya tahu Anda sudah mulai mempelajari "kode" sejak lama, tutorial ini sangat membantu, Dan melakukan hal yang luar biasa dengan tutorial ini, Anda bahkan tidak menyadari betapa berharganya tutorial ini, di bawah tutorial Anda memiliki hampir semua tag ) digunakan dalam HTML, Anda dapat menggunakannya, terutama karena masing-masing memiliki deskripsi.
    Jangan biarkan Anda ALEX, kode istirahat, itu didasarkan.
    Percayalah, Anda kurang TIDAK UNTUK POTENSI!

  • wow banyak informasi yang terstruktur dengan sangat baik sehingga siapa pun dapat memahaminya. Saya pribadi melihat tutorialnya hanya untuk mencari tahu sesuatu yang baru, dan seiring berjalannya tutorial saya kagum pada betapa mudahnya sebuah situs dapat dibuat, tidak juga dimuat dan sangat menyenangkan untuk dilihat. Selamat untuk tutorial ini tetapi juga untuk yang lainnya. Saya menantikan "infus" berikutnya (kata-kata Cristi) dengan informasi.

  • Ini akan menjadi Dreamweaver tutorial? Dc tidak menggunakan Dreamweaver atau tutorial Anda?

    Selamat untuk semua tutorial ... Anda yang terkuat;)

  • Hai.. tutorial ini benar-benar hebat, ada "banyak" informasi..dan saya pikir saya harus belajar html dasar di halaman depan 98 'melakukan lusinan tes yang diambil dari buku-buku di perpustakaan karena saya tidak punya bersih pada waktu itu dan sekarang saya dapat menonton tutorial yang menjelaskan semua yang perlu saya ketahui .. jelas bahwa saya telah berevolusi :))) .. Saya menyukai fakta bahwa itu dijelaskan langkah demi langkah dan mereka dimasukkan di situs semua perintah dasar + contoh yang dapat dikerjakan .. jelas bahwa Anda tahu apa yang Anda lakukan, Anda adalah guru sejati !!
    Namun banyak dari mereka yang bekerja dalam desain web menggunakan program yang secara otomatis membuat pesanan dan pertanyaan saya adalah akan Anda membuat tutorial dengan program seperti itu ??
    Saya tahu Anda membuat tutorial ini untuk memahami perintah dan dengan demikian pemahaman yang lebih baik tentang program desain web ... tapi saya masih penasaran untuk melihat apa yang akan Anda lanjutkan dengan rangkaian tutorial ini karena ada banyak pembicaraan tentang topik ini walaupun ada yang menganggapnya membosankan ketika datang ke tutorial seperti yang dibuat oleh Dan, yang saya ucapkan selamat atas kesempatan ini untuk tutorial ...

Posting terkait

Website ini menggunakan cookies.