Kembangkan diri anda untuk membina UI Web: Bahagian Memahami HTML-tutorial js-php.cn

Pembangunan Web ialah salah satu kemahiran yang paling diminati hari ini. Ia melibatkan penciptaan laman web yang mesra pengguna dan menarik yang boleh diakses melalui pelayar. Langkah pertama untuk menjadi pembangun web ialah memahami HTML.

Develop yourself to build Web UIs: Part Understanding HTML

HTML (Hyper Text Markup Language) ialah tulang belakang mana-mana halaman web. Ia adalah bahasa standard yang digunakan untuk menstruktur halaman web, menentukan cara kandungan dipaparkan dalam penyemak imbas. Manakala kemunculan halaman ditentukan oleh CSS (Cascading Style Sheets) dan fungsinya oleh JS (Javascript), HTML bertanggungjawab ke atas rangka atau struktur asas.

Sebelum menyelam dalam bahagian kursus ini, adalah penting untuk memahami jargon terkenal dan berulang yang akan digunakan dalam perjalanan anda. Ini akan membantu anda memahami konsep semasa kami maju (dan juga memudahkan pengarang untuk menerangkan sesuatu ;-) ).

Memahami Jargon

Bahasa Pengaturcaraan: Satu set arahan yang ditulis dalam sintaks tertentu (cara bahasa pengaturcaraan) yang boleh dilaksanakan oleh komputer. Ingat komputer hanya memahami kod binari (sama ada 1 atau 0), kini, untuk membuat komputer memahami logik dan juga untuk mencari pertukaran, kita (manusia), telah mencipta bahasa pengaturcaraan supaya mudah untuk kami untuk kod dan juga untuk komputer memahaminya.
Penyusun: Alat yang menterjemah kod yang ditulis dalam bahasa pengaturcaraan ke dalam bahasa mesin yang boleh difahami dan dilaksanakan oleh komputer.
Sintaks: Peraturan yang mentakrifkan struktur bahasa pengaturcaraan. Fikirkan ia sebagai cara perkataan disusun dalam ayat supaya masuk akal.
Ulasan: Nota dalam kod yang menerangkan perkara yang dilakukan oleh bahagian tertentu kod. Komen membantu pembangun lain (atau diri masa depan anda) memahami logik di sebalik kod anda.
DOM (Model Objek Dokumen): DOM ialah perwakilan seperti pepohon bagi dokumen HTML. Setiap teg dalam HTML anda menjadi nod dalam pepohon ini. Contohnya, jika HTML anda mempunyai teg dengan
(perenggan) di dalamnya, penyemak imbas mencipta nod badan dengan nod perenggan sebagai anaknya.
Kanak-kanak: Anda akan memahami perkara ini semasa anda maju. Elemen bersarang dalam elemen lain. Contohnya, dalam HTML, teg perenggan (
) dalam teg div (
) akan dianggap sebagai anak kepada div.
Elemen peringkat blok: Anda akan diperkenalkan dengan jargon ini semasa anda maju. Istilah ini biasanya menerangkan ciri elemen yang ia akan mengambil lebar penuh yang tersedia.

Mencuba menggunakan HTML

HTML bermaksud Hyper Text Markup Language

Teks Hiper: Merujuk kepada keupayaan HTML untuk memautkan dokumen yang berbeza bersama-sama.
Bahasa Penanda: Menggunakan teg untuk menganotasi teks, mentakrifkan cara ia perlu dipaparkan dalam penyemak imbas.

Berikut ialah struktur asas dokumen HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Tutorial</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Salin selepas log masuk

Teg: Dalam HTML, teg digunakan untuk mentakrifkan elemen. Teg disertakan dalam kurungan sudut, seperti atau
.
Elemen: Terdiri daripada teg pembuka dan teg penutup, yang mungkin mengandungi kandungan. Contohnya,
Hello, dunia!
ialah unsur perenggan.

Struktur Dokumen HTML

Setiap dokumen HTML mengikut struktur asas:

: Declares the document type and version of HTML.
: The root element that encloses all other HTML elements.
: Contains meta-information about the document, such as the title and links to stylesheets.
: Sets the title of the webpage, displayed in the browser's title bar or tab.
: Provides metadata about the HTML document, such as character set, author, and viewport settings. It's a self-closing tag.
: Embeds CSS code to style the HTML elements.
<script></script>: Embeds JavaScript code for adding interactivity to the webpage.
: Encloses the content that will be visible to users on the webpage.

Commonly Used HTML Elements

Here are some basic HTML elements you’ll use frequently:

: Defines a paragraph.
: A block-level element used to group other elements together.
: An inline element used to group text for styling purposes.
: Represents the introductory content or navigational links of a section.
to
: Headings, with
being the highest level and
the lowest.
: Inserts a line break (self-closing tag — meaning there is no need to close the tag).
: Used to create an HTML form for user input.
: Creates an input field, typically used within a form.
: Creates a dropdown list.
: Associates a text label with a form element.
: Defines a table.
: Defines a row in a table.
: Defines a cell in a table row.
: Defines a header cell in a table row.
: Defines an unordered (bulleted) list.
: Defines an ordered (numbered) list.

Creating Your First HTML File

To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:

Open your text editor and type the following code:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>
  <h1>Example Number 1</h1>
  <p>Hello, world!</p>
</body>
</html>

Salin selepas log masuk

Save the file with a .html extension (e.g., index.html)
Open the file in your web browser to see your first HTML webpage in action!
To inspect your code, press Ctrl + Shift + C in Google Chrome to open the Developer Tools and explore the DOM structure.
Go to the network tab in the Developer Tools and refresh your browser tab.

You can find that there is a request in the name that you have saved as in this picture.
Develop yourself to build Web UIs: Part Understanding HTML

In the response tab, you will find the code that you have written as in the following picture
Develop yourself to build Web UIs: Part Understanding HTML

Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like , , , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.

Creating a Table

Let’s take a step further by creating a simple table in HTML:

Open the same HTML file and add the following code inside the tag:

<p>Table Example</p>
<table>
  <tr>
    <th>Name</th>
    <th>Power</th>
    <th>Is Kurama Present</th>
  </tr>
  <tr>
    <td>Naruto</td>
    <td>Rasengan</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Sasuke</td>
    <td>Sharingan</td>
    <td>No</td>
  </tr>
</table>

Salin selepas log masuk

Save the file and refresh your browser to see the table displayed.

Notice the heading is being rendered by paragraph tag. Alternatively, you can also use tag, which will center the heading of the table. Experiment with the caption tag and refresh to see the changes.

Note that tag should only be used immediately after the

opening tag.

You’ve now successfully created a basic table in HTML. Feel free to experiment with additional rows and columns to get more comfortable with HTML syntax.

Conclusion

Congratulations on completing your first steps into web development with HTML! The key to mastering HTML is practice. Experiment with different elements, create your own webpages, and don’t be afraid to make mistakes — every error is a learning opportunity.

Remember, this is just the beginning. As you continue to build on this foundation, you’ll soon be able to create more complex and dynamic websites. Let’s make the web a better place, one line of code at a time.

Artikel ini ditulis oleh Anantha Krishnan, seorang profesional yang berpengalaman dalam kedua-dua IT dan Kejuruteraan Mekanikal. Dengan latar belakang dalam pembangunan tindanan penuh dan minat terhadap sistem mekanikal dan elektrik, Anantha Krishnan kini menumpukan pada mencipta kandungan pendidikan untuk membantu pemula dalam bidang kepakarannya.

Atas ialah kandungan terperinci Kembangkan diri anda untuk membina UI Web: Bahagian Memahami HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：dev.to

Artikel sebelumnya：Memahami Litar Pintas dalam JavaScript: Panduan Pemula Artikel seterusnya：Cara Membina Sembang ke dalam Apl Flask dengan API: Panduan Komprehensif

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang