웹 UI 구축을 위한 자신의 개발: HTML 부분 이해-JS 튜토리얼-php.cn

웹 개발은 오늘날 가장 수요가 많은 기술 중 하나입니다. 여기에는 브라우저를 통해 액세스할 수 있는 사용자 친화적이고 매력적인 웹사이트를 만드는 것이 포함됩니다. 웹 개발자가 되기 위한 첫 번째 단계는 HTML을 이해하는 것입니다.

Develop yourself to build Web UIs: Part Understanding HTML

HTML(하이퍼 텍스트 마크업 언어)은 모든 웹페이지의 중추입니다. 웹페이지를 구성하고 브라우저에 콘텐츠가 표시되는 방식을 결정하는 데 사용되는 표준 언어입니다. 페이지의 모양은 CSS(Cascading Style Sheets)에 의해 결정되고 기능은 JS(Javascript)에 의해 결정되지만, HTML은 기본적인 골격이나 구조를 담당합니다.

코스의 이 부분을 다이빙하기 전에 여행에서 사용될 유명하고 반복되는 전문 용어를 이해하는 것이 중요합니다. 이는 우리가 진행하면서 개념을 이해하는 데 도움이 될 것입니다(또한 저자가 설명하기 쉽게 만듭니다 ;-) ).

전문 용어 이해

프로그래밍 언어: 컴퓨터가 실행할 수 있는 특정 구문(프로그래밍 언어 방식)으로 작성된 명령 집합입니다. 컴퓨터는 이진 코드(1 또는 0)만 이해한다는 점을 기억하십시오. 이제 컴퓨터가 논리를 이해하도록 하고 절충점을 찾기 위해 우리(인간)는 쉽게 사용할 수 있는 프로그래밍 언어를 만들었습니다. 우리가 코드를 작성하고 컴퓨터가 이를 이해할 수도 있습니다.
컴파일러: 프로그래밍 언어로 작성된 코드를 컴퓨터가 이해하고 실행할 수 있는 기계어로 번역하는 도구입니다.
구문: 프로그래밍 언어의 구조를 정의하는 규칙입니다. 문장에서 단어가 의미를 갖도록 배열되는 방식이라고 생각하세요.
설명: 코드의 특정 부분이 수행하는 작업을 설명하는 코드 내의 메모입니다. 댓글은 다른 개발자(또는 미래의 본인)가 코드 이면의 논리를 이해하는 데 도움이 됩니다.
DOM(문서 개체 모델): DOM은 HTML 문서를 트리 모양으로 표현한 것입니다. HTML의 모든 태그는 이 트리의 노드가 됩니다. 예를 들어, HTML에
(단락) 그 안에 브라우저는 단락 노드를 하위로 포함하는 본문 노드를 생성합니다.
어린이: 진행하면서 이 점을 이해하게 될 것입니다. 다른 요소 내에 중첩된 요소입니다. 예를 들어 HTML에서 div 태그(
) 내의 단락 태그(
)는 div의 하위 태그로 간주됩니다.
블록 수준 요소: 진행하면서 이 전문 용어를 접하게 됩니다. 이 용어는 일반적으로 사용 가능한 전체 너비를 사용하는 요소의 기능을 설명합니다.

HTML로 시작하기

HTML은 하이퍼 텍스트 마크업 언어

를 의미합니다.

하이퍼 텍스트: 서로 다른 문서를 함께 연결하는 HTML의 기능을 말합니다.
마크업 언어: 태그를 사용하여 텍스트에 주석을 달고 브라우저에 표시되는 방법을 정의합니다.

HTML 문서의 기본 구조는 다음과 같습니다.

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

로그인 후 복사

태그: HTML에서 태그는 요소를 정의하는 데 사용됩니다. 태그는 또는
.
요소: 콘텐츠를 포함할 수 있는 여는 태그와 닫는 태그로 구성됩니다. 예를 들어
Hello, world!
단락 요소입니다.

HTML 문서 구조

모든 HTML 문서는 기본 구조를 따릅니다.

: 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>

로그인 후 복사

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>

로그인 후 복사

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.

이 글은 IT와 기계공학 분야의 전문가인 Anantha Krishnan이 쓴 글입니다. 풀 스택 개발 배경과 기계 및 전기 시스템에 대한 열정을 지닌 Anantha Krishnan은 이제 자신의 전문 분야에서 초보자를 돕기 위한 교육 콘텐츠 제작에 주력하고 있습니다.

위 내용은 웹 UI 구축을 위한 자신의 개발: HTML 부분 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to

이전 기사：JavaScript의 단락 이해: 초보자 가이드 다음 기사：API를 사용하여 Flask 앱에 채팅을 구축하는 방법: 종합 가이드

본 웹사이트의 성명

저자별 최신 기사