Struktur Dasar HTML5 dan Elemen Utama
Diterjemahkan oleh
ScribdTranslationsStruktur Dasar HTML5 dan Elemen Utama
Diterjemahkan oleh
ScribdTranslationsHTML5
Definisi dan struktur dasar
Pada tahun 1991, Tim Berners-Lee menciptakan bahasa penandaan ini untuk memperbaiki
komunikasi antara dia dan rekan-rekannya di CERN, sejak itu sudah muncul 5
versi dan HTML menjadi dasar web.
Dengan HTML, kita menentukan makna dan struktur dari konten web dan, selain teks,
halaman kita membutuhkan gambar, video, dan berbagai format lainnya dan untuk itu kita punya
elemen HTML.
Sebuah elemen HTML dibentuk oleh tag pembuka dan atributnya, konten, dan sebuah
tag penutup. Dan lebih jauh kita akan melihat bahwa ada elemen yang tidak memiliki tag
penutupan.
Dengan elemen-elemen ini kita dapat mengelompokkan jenis konten, mengubah ukuran dan bentuk dari
fontes dan menambahkan berbagai media ke halaman web kami.
Dan sekarang kita bisa melihat bagaimana struktur dasar dari sebuah file HTML.
Baris pertama dokumen harus <!DOCTYPE html>, meskipun tampak seperti sebuah
elemen HTML hanya memberi tahu browser bahwa ia sedang menangani file tipe
HTML5. Elemen-elemen HTML ada di bawah ini.
<html>
Tag html adalah akar dari dokumen Anda, semua elemen HTML harus berada di dalamnya.
Dan di sini kami memberi tahu browser tentang bahasa dokumen kami ini, melalui
atributo lang, untuk bahasa Portugis Brasil kita menggunakan pt-BR.
<head>
Tag head berisi elemen-elemen yang akan dibaca oleh browser, seperti metadata - sebuah
contoh adalah charset, yang merupakan pengkodean karakter dan yang paling umum adalah UTF-8,
JavaScript dengan tag skrip, CSS melalui tag gaya dan tautan - kita akan melihat perbedaannya
ketika kita berbicara tentang CSS - dan judul halaman dengan tag title.
<body>
Dan di dalam tag body kita menempatkan semua konten yang terlihat oleh pengguna: teks, gambar,
video.
Praktik
Sebagai latihan untuk kursus ini, kita akan membangun situs pribadi, dan kita perlu memulainya.
dengan struktur dasar yang baru saja kita lihat.
Mari kita buat file [Link] dan menambahkan doctype serta elemen html, head dan
tubuh.
Kemudian kita akan menambahkan elemen meta dan title, pada yang pertama kita menambahkan atribut
charset dengan nilai UTF-8 untuk memberi tahu browser tentang pengkodean karakter dan
pada detik kedua kita bisa menempatkan nama kita.
Dan terakhir kami akan menuliskan nama kami di dalam elemen body hanya untuk
melihat ini di peramban.
Semantik
Selama bertahun-tahun elemen standar di HTML adalah div, kami membangun konten kami
semua berdasarkan itu, dan demikianlah lahirnya sup div.
Namun pada tahun 2014, versi kelima HTML diluncurkan, dan bersamanya datang berbagai perubahan.
penting, seperti kinerja dan aksesibilitas, tetapi dalam kursus pengantar ini kita akan
fokus pada semantik.
Semantik memungkinkan kita untuk menggambarkan konten kita dengan lebih tepat, sekarang sebuah blok
teks tidak hanya sebuah div, sekarang adalah sebuah artikel dan memiliki arti lebih seperti ini. Dan kita memiliki
berbagai elemen untuk memberikan makna baru pada divs:
<section>
Mewakili bagian konten umum ketika tidak ada elemen lain.
spesifik untuk itu.
<header>
Ini adalah header halaman atau bagian dari halaman dan biasanya berisi logo,
menu, kolom pencarian.
<artikel>
Mewakili konten yang independen dan lebih relevan di dalam suatu halaman, seperti
sebuah postingan blog, berita di sidebar atau blok komentar. Sebuah artikel
dapat berisi elemen lain, seperti header, judul, paragraf, dan gambar.
<samping>
Ini adalah bagian yang mencakup konten terkait dengan konten utama, seperti artikel
terkait, biografi penulis dan iklan. Biasanya digambarkan sebagai
barras samping.
<footer>
Elemen ini mewakili footer dari konten atau sebagian darinya, karena ia diterima di dalam
dari berbagai elemen, seperti artikel dan bagian dan bahkan dari tubuh. Contoh konten dari sebuah
<footer> adalah informasi penulis elinks terkait.
<h1>-<h6>
Mereka tidak dibuat dalam versi 5 HTML dan juga tidak spesifik untuk semantik, tetapi
digunakan untuk tujuan ini. Mereka digunakan untuk menandai pentingnya judul, yaitu
<h1> yang paling penting dan <h6> yang paling sedikit. Sebuah saran: gunakan hanya satu <h1> per halaman, karena
ia mewakili tujuan dari halaman Anda.
Praktik
Dando continuidade ao nosso site, iremos montar sua estrutura. Pensei em adicionarmos
sebuah judul dengan nama kami, daftar pos (seperti blog) dan footer untuk
kontak kami.
Mari kita buka berkas [Link] kita dan mulai dengan header: kita buat <header>
logo di bawah <body> dan kami menempatkan judul halaman kami di dalam <h1>.
Setelah itu kita akan membuat daftar postingan: kita membuka elemen section dan di dalamnya
kami menambahkan <header> lain yang berisi <h2>. Perhatikan bahwa saya bisa memiliki lebih dari satu
<header> di halaman.
Untuk membuat postingan kami, kami menambahkan sebuah <article> dengan <header> dan <h3>.
Langkah terakhir dari tahap ini adalah membuat footer untuk informasi kontak kami: buat
elemen footer sebelum menutup </body>.
Jangan khawatir tentang tata letak dan konten halaman, kami akan mengurus itu nanti.
depan.
Teks dan tautan
Pembuatan HTML didorong oleh kebutuhan untuk berbagi teks dan dokumen, dan
meskipun setelah hampir 30 tahun, dengan semua evolusi web, ini masih mewakili suatu
boa parte do conteúdo da web.
Kami sudah membahas sebelumnya tentang elemen h1-h6 dan, mereka sangat penting bagi kita
mengindikasikan secara visual pentingnya dan lokasi bagian teks di halaman, tetapi untuk
Teks yang lebih panjang dan lebih padat kita gunakan elemen p.
<p> merepresentasikan sebuah paragraf, tetapi tidak hanya mendukung teks, kita dapat menambahkan
gambar, kode, video, dan berbagai jenis konten lainnya di dalamnya.
Elemen lain yang menarik dan sangat diperlukan di web adalah <a> - yang berarti
anchor/âncora, ia mewakili sebuah hyperlink, dialah yang menghubungkan berbagai konten dan halaman
di web.
Elemen a memiliki beberapa atribut, tetapi kita akan fokus pada dua, href dan target.
O href representa ohyperlinkpara onde sua âncora aponta, pode ser uma página do seu
atau dari situs lain, sebuah email dan bahkan sebuah nomor telepon, dua yang terakhir membutuhkan
prefix tel: dan [Link] masing-masing.
O target neste momento vai servir para nos ajudar a abrir nossos links em outra aba do
navigasi menggunakan nilai _blank.
Praktik
Mari kita tambahkan teks fiktif ke postingan kita: segera setelah penutupan
</header> mari kita tambahkan elemen p dan memasukkan teks yang akan kita ambil dari
[Link]
Dan di suatu bagian dari teks ini kita akan menambahkan sebuah hyperlink ke halaman lain dan satu untuk
email kami.
Saya akan membuat hyperlink untuk profil LinkedIn saya: tambahkan hyperlink di atribut href dan
valor _blank di atribut target, sehingga olink akan dibuka di tab lain. Dan di lainnya
tempat teks saya akan menambahkan email saya dan tautan untuk itu, dengan cara ini: <a
href="[Link] target="_blank">lucas@[Link]</a>
Gambar
Sebuah web juga dibuat dari gambar dan untuk merepresentasikannya kita memiliki elemen <img>, itu adalah
salah satu elemen tanpa tag penutup.
Elemen img sangat sederhana, hanya memiliki 2 atribut sendiri, yaitu src dan alt.
O src adalah wajib dan menyimpan jalur untuk gambar yang ingin Anda tampilkan di halaman.
O alt tidak diwajibkan tetapi sangat dianjurkan karena meningkatkan aksesibilitas, ia
tampilkan deskripsi gambar jika tidak dimuat dan pembaca layar menggunakan atribut ini
untuk menggambarkan gambar agar pengguna mengetahui apa artinya.
Praktik
Mari kita tambahkan gambar ke header halaman dan gambar ke postingan.
Pertama, mari kita letakkan gambar-gambar di folder proyek kita. Untuk gambar dari
header saya memilih foto saya dengan lebar 100 piksel dan tinggi 100 piksel dan
Untuk gambar postingan, saya mencari kode html di situs Unsplash, saya memilih salah satu dari
gambar dan saya meninggalkannya dengan lebar 960 piksel dan tinggi 322 piksel.
Di dalam <header> pertama halaman dan sebelum <h1> kita akan menambahkan sebuah elemen
img e no atributo src colocamos o caminho para a nossa foto, /[Link], e o
atribut alt harus berisi makna untuk gambar, seperti dalam kasus saya adalah
ilustrasi, saya akan menempatkan Ilustrasi wajah Lucas Vilaboim.
Dan di dalam <header> dari <article> kita akan melakukan hal yang sama, tetapi sekarang setelah
<h3>, dan di atribut alt kita akan menuliskan Editor teks yang menunjukkan kode HTML.
Daftar
Elemen terakhir yang akan kita lihat di modul ini adalah yang terkait dengan daftar: <ul>, <ol> dan
<li>.
Daftar digunakan untuk mengelompokkan koleksi item, seperti daftar bahan atau,
bagaimana akan ada dalam kasus kami, sebuah daftar kontak.
Elemen ul membuat daftar yang tidak terurut, di mana urutan elemen tidak penting,
ia direpresentasikan dengan titik, lingkaran, atau kotak.
O <ol> digunakan untuk membuat daftar terurut, di mana urutannya penting, oleh karena itu mereka adalah
direpresentasikan dengan angka, angka romawi atau huruf.
Dan elemen li adalah item di dalam salah satu dari daftar tersebut. Sebuah <li> dapat berisi berbagai jenis dari
konten, seperti paragraf, gambar, dan bahkan daftar lainnya.
Praktik
Kami akan menambahkan daftar kontak di footer halaman kami, dan untuk itu kami akan menggunakan
juga elemen yang kita lihat sebelumnya.
Buat elemen ul dan di dalamnya tambahkan sebuah <li> dengan elemen a, di atribut href
tambahkan tautan ke media sosial yang Anda miliki dan, dalam konten jangkar
letakkan nama jaringan ini.
CSS 3
Definisi dan pemilih
Setelah pembuatan HTML, kebutuhan untuk memformat halaman menjadi jelas, sehingga,
Pada tahun 1996, bahasa gaya yang kita kenal sebagai CSS diciptakan.
Sintaksisnya cukup sederhana dan dapat dijelaskan dengan kalimat "Anda membuat aturan gaya untuk"
elemen atau kelompok elemen.
Mari kita gunakan elemen HTML yang kita lihat sebelumnya, anchor <a>, untuk
memberikan contoh.
Sebuah aturan CSS diwakili oleh sebuah pemilih atau sekelompok pemilih, dalam kasus kita adalah
Jadi di dalam sepasang kurung kurawal kita menambahkan deklarasi, pada contoh di atas
kami sedang mengubah warna dan ukuran font dari jangkar ini, pernyataan tersebut dibentuk oleh
sebuah properti dan sebuah nilai.
Perhatikan bahwa kita bisa menempatkan beberapa pemilih dalam sebuah aturan dengan memisahkannya menggunakan koma.
Dan ada satu detail terakhir dalam contoh ini: pseudo-kelas. Elemen HTML mengalami
perubahan yang disebabkan oleh interaksi pengguna, seperti menggerakkan mouse di atas atau mengklik
di elemen ini.
Oa:hoverdo contoh berarti bahwa jangkar juga akan memiliki penampilan ini saat
pengguna mengarahkan mouse ke atas sebuah hyperlink.
ID x Kelas
Pada contoh sebelumnya, kami membuat aturan yang mengubah elemen HTML secara langsung, tetapi
ini berarti bahwa semua elemen <a> akan memiliki penampilan itu, dan biasanya
kami memiliki situs yang lebih kompleks yang memerlukan berbagai aturan berbeda untuk elemen
sama.
Agar lebih nyata mari kita ingat sedikit tentang situs yang mulai kita buat di
modul sebelumnya, ia memiliki beberapa elemen header, tetapi kami tidak akan ingin header tersebut
principal memiliki format yang sama dengan header sebuah postingan, di situlah masuknya
ID dan Kelas.
Selector yang kita lihat di contoh pertama adalah selector tipe, karena itu mewakili sebuah
elemen HTML, dan dengan ID dan Kelas kita dapat mewakili jenis elemen apa pun
tetapi ada beberapa perbedaan antara mereka:
ID: diwakili oleh simbol # (hash) diikuti oleh nama untuk ID tersebut.
Kelas: kelas diwakili dengan cara yang mirip dengan ID, tetapi diawali dengan titik
alih-alih hash.
Dan perbedaan yang paling penting di antara mereka adalah cara mereka harus digunakan: ID hanya dapat
dapat digunakan sekali di halaman HTML sementara kelas tidak memiliki batasan.
Latihan
Mari kita tambahkan beberapa kelas di situs kita dan ubah beberapa elemen, tetapi sebelum itu
kita perlu menambahkan berkas CSS ke halaman kita.
Di modul HTML kami menemukan bahwa kita bisa menambahkan CSS dengan dua cara, yaitu dengan
elementostyle, dan dengan demikian aturan-aturannya akan berada di file HTML, atau kita bisa membuat sebuah
arsip CSS dan menambahkannya di halaman melalui elementolink, dan inilah cara yang
kami akan menggunakan.
Buat elemen link di dalam kepala file Anda dan tambahkan
atributosrel="stylesheet"ehref="[Link]", oreldenota o tipo de arquivo que estamos
termasuk di halaman dan ohrefé jalur ke file. Dan di folder yang sama dari
Buat file bernama [Link].
Sekarang kita akan ke CSS, tambahkan ID #title ke h1 pada halaman, karena kita ingin agar dia
Jadilah unik, dan kemudian tambahkan kelas .subtitle dan .post_title ke h2 dan h3, masing-masing.
Di file CSS kita akan mengubah warna tiga judul ini, dan kemudian mengubah ukuran dari
fonte do título da postagem.
Model kotak
Ketika kita membuat layout sebuah situs, browser merepresentasikan setiap elemen
HTML sebagai kotak persegi panjang, itulah model-box. Dan dengan CSS kita mengubah
penampilan kotak ini (lebar, tinggi, warna latar belakang, dll.). Kotak ini terdiri dari 4
area: konten, padding, border, dan margin.
Margin adalah jarak antara elemen;
Sebagai bordas (batas);
Padding adalah jarak antara batas dan konten, perbedaannya dengan
margens adalah bahwa deklarasi gambar latar belakang berfungsi di dalamnya;
Isi (content) adalah apa yang diwakili oleh blok Anda, sebuah teks, sebuah gambar, sebuah
video
Latihan
Untuk melihat box-model kita akan menambahkan warna dan batas pada beberapa elemen.
Pertama, kita akan menambahkan warna latar belakang agar tampilan lebih mudah, kita akan menggunakan
propriedadebackgroundcom o valor#fcfcfcno elementobody.
Setelah itu kita akan menambahkan sebuah kelas ke <article>, bisa .post, dan kemudian kita akan menempatkan
latar belakang putih dengan properti background dan nilai #FFF. Sekarang kita bisa
melihat konten dari kotak-model.
Mari kita tambahkan padding 10 piksel di artikel yang sama ini. Apakah kalian menyadari
jarak yang muncul di sekitar konten kami?
Sekarang kita menambahkan batas yang lebih gelap padanya dengan properti border. Saya akan berbicara lebih lanjut
detalhadamente sobre border mais a frente, mas por enquanto vamos deixar essa borda
dengan lebar 3 piksel, garis batas padat dan berwarna biru.
Dan terakhir kita akan menambahkan margin di luar pos dengan
propriedademargine atau nilai 10 piksel.
Dan sekarang dengan memeriksa elemen kami, kami berhasil mendapatkan semua lapisan yang disebutkan.
sebelum: konten berwarna biru, padding berwarna hijau, tepi berwarna coklat dan margin dalam
jeruk.
Dan karena kita sudah mulai berbicara tentang tepi dan warna latar belakang, di video berikutnya kita akan
memperdalam sifat-sifat ini.
Mendandani elemen
Sekarang kita sudah memahami box-model, kita bisa fokus untuk membuat situs kita lebih cantik.
jadi mari kita ulas kembali sifat-sifat yang telah disebutkan:
Padding dan Margin
Sebelumnya kita menggunakan opaddinge omarginda dalam bentuk yang lebih dasar, hanya dengan satu nilai,
tetapi mereka lebih kuat dari itu. Jika kita ingin memberikan ukuran yang berbeda untuk
Setiap sisi kotak, kita bisa, dan kita akan melihat tiga cara untuk melakukannya.
Yang pertama adalah menetapkan nilai untuk bagian atas dan bawah, dan kemudian untuk sisi-sisinya.
kiri dan kanan.
Nilai 10piksel mengacu pada sumbu Y, atau bagian atas dan bawah, dan 5piksel
merujuk pada sisi kiri dan kanan.
Bentuk kedua adalah memberikan nilai untuk setiap sisi kotak.
Jadi kita mulai dari atas dengan 15 piksel, melewati sisi kanan dengan 10 piksel, kemudian
para a parte inferior com 5 pixels e por último o lado esquerdo com 0, e sempre nessa
urutan.
Sebuah tips yang baik juga adalah bahwa ketika nilainya 0, kita tidak perlu menaruhnya.
a unidade.
Bentuk ketiga adalah dengan properti spesifik untuk setiap sisi, sejauh ini kita telah memiliki
lihat jalan pintas untuk properti ini.
Opsi ini lebih sering digunakan ketika kita memiliki nilai yang sama untuk 3 sisi, dan yang keempat perlu
memiliki nilai yang berbeda, jadi kita menggunakan padding dengan hanya satu nilai dan salah satu dari ini
opsi untuk mewakili sisi yang berbeda.
Latar Belakang
Properti background juga merupakan jalan pintas untuk beberapa properti, tetapi itu yang kalian...
dapat diserap sedikit demi sedikit, dan pilihan bacaan yang baik adalah dokumentasi MDN.
Untuk sementara kita akan melihat hanya bagaimana mengubah warna latar belakang.
Dan di sini kita memiliki 3 cara untuk menambahkan warna latar belakang, dan masih ada cara lain.
Yang pertama adalah berdasarkan nama warna dalam bahasa Inggris, yang kedua adalah berdasarkan kode heksadesimal dan
terceira é usando apenas o atalhobackground.
Batas
Kami melihat bahwa properti border dapat memiliki 3 nilai: lebar, warna, dan gaya, tetapi ada
beberapa kekhususan dalam hal ini.
Lebar dapat digunakan dengan berbagai unit, seperti px, em, dan mm. Warna dapat
diatribusikan dengan nama atau dengan kode heksadesimal, sama seperti yang kita lakukan dengan
latar belakang, dan gaya diwakili oleh kata kunci, mari kita lihat beberapa di antaranya:
solid: menunjukkan tepi yang sederhana dan lurus;
berbintik: adalah lingkaran-lingkaran kecil dengan jarak kecil di antara mereka;
garis putus-putus: membentuk garis putus-putus.
Dan memanfaatkan bahwa saya menunjukkan kode ini, kita harus berbicara tentang bagaimana memisahkan penataan.
dua sisi dari sebuah tepi.
Dan jika Anda tidak ingin menggunakan properti border, ada properti khusus untuk
setiap aspek dari sebuah batas, yaitu border-width untuk lebar, border-color untuk warna
gaya batas
Di sini kita memiliki kode yang sama sebelumnya dalam dua cara berbeda, yang pertama dengan
atalhobordere pada hari Senin dengan setiap properti spesifik.
Dan setelah itu kita bisa menggabungkan sisi-sisi dengan aspek dari sebuah tepi dan membuat sebuah aturan
lebih spesifik lagi.
Radius batas
Dan properti terakhir adalah border-radius, yang memungkinkan untuk membulatkan sudut-sudut dari sebuah
elemen. Kita bisa menggunakan berbagai satuan, tetapi yang paling umum adalah piksel dan
persentase.
Dengan menempatkan hanya satu nilai, kita mengubah semua sudut elemen, tetapi mengikuti itu
urutan yang sama seperti yang kita lihat pada padding margin - atas, kanan, bawah dan kiri -
kami berhasil mengubah setiap sudut secara terpisah.
Latihan
Dalam latihan ini kita akan membuat situs kita menjadi sedikit lebih indah menggunakan properti
yang baru saja kita lihat.
Mari kita tingkatkan padding menjadi 15 piksel dan juga memberikan margin sebesar 15 piksel
hanya di bagian bawah pos.
Quando olhamos para os textos percebemos que os espaçamentos estão diferentes do
sisa dari pos, jadi mari kita standarisasi ini.
Pada judul pos, kami akan menghapus semua margin untuk kemudian memasang hanya satu margin.
inferior dari 15 piksel. Dan di tubuh pos kita perlu menambahkan kelas dan menghapus semua
sebagai margin untuk kemudian menambahkan margin atas sebesar 15 piksel.
Kita bisa mempertahankan latar belakang putih, tetapi kita akan memperkecil lebar batas menjadi 2.
piksel dan ubah warna menjadi yang sama dengan teks - #505050 - dan terakhir kita akan menambahkan sebuah
border-radius, 5 piksel sudah cukup. Kita bisa menambahkan nilai yang sama dari
border-radius pada gambar, untuk itu kita akan menambahkan sebuah kelas pada gambar terlebih dahulu.
Mendesain teks
Kita sudah tahu bahwa kita bisa mengubah warna dan ukuran beberapa font, dan sekarang kita akan ...
mendalami ini.
jenis huruf
Dengan font-family kita dapat mengubah font teks kita, seperti font dari internet
atau yang terinstal di komputer kita, tetapi kita akan fokus pada font yang aman,
panggilan font web yang aman.
Sumber-sumber ini disebut demikian karena ditemukan di hampir semua sistem dan
dapat digunakan tanpa khawatir.
ukuran-font
Ukuran font membantu kita mengubah ukuran teks, ada beberapa satuan ukuran.
untuk dia tetapi untuk saat ini pixel sudah cukup bagi kami.
gaya-font
Kami menggunakan font-style untuk membuat teks miring, sebagian besar waktu Anda hanya akan menggunakan
nilai italic untuk dia, tetapi jika perlu menghapus italic dari teks Anda dapat menggunakan
valornormal.