웹 페이지를 만드는 방법? 초간단 HTML 설명

5269 단어 htmlwebdevtutorial
HTML은 HyperText Markup Language의 약자입니다. 간단히 말해서 HTML은 웹 페이지의 콘텐츠에 구조를 부여하는 언어입니다. 그게 다야!

HTML을 어디에 쓸 것인가?
  • HTML 지침은 확장자가 .html 또는 .htm인 파일에 저장해야 합니다. 이는 텍스트 파일을 .txt로 저장하고 Microsoft Office 문서를 .docx로 저장하는 방법과 유사합니다
    • .
  • 파일 확장자는 해당 파일이 HTML 파일이고 처리가 필요함을 웹 브라우저에 직접 표시하며 해당 출력은 웹 주소 URL에서 사용자에게 표시됩니다.

    • 그게 다야!

    HTML 문서의 구조?

  • 모든 HTML 문서는 다음과 같은 기본 구조를 갖습니다.

    <html>

    <head> 
                {Special Section that describes the webpage} 
    </head>

    <body> 
                {Put Content to be displayed on webpage here} 
    <body>

</html>


  • HTML 지침을 "태그"라고 합니다. 기본적으로 두 가지 유형의 태그가 있습니다.
  • 명시적인 열기 및 닫기가 필요한 태그(예: <html> 및 </html> )
  • 자동 닫힘 태그, 즉 한 번만 작성해야 합니다(예: <hr/> )

  • 또한 HTML의 특별한 속성은 대소문자를 구분하지 않는다는 것입니다. 즉, 태그는 대문자, 소문자 또는 둘을 혼합하여 작성할 수 있습니다. <HTML> , <html> , <hTmL> 모두 동일한 의미를 갖습니다. 그러나 규칙은 모든 HTML 태그를 소문자로 작성하는 것입니다.

    • 예제 웹페이지를 살펴보겠습니다.

    <html>
    <head>
        <title>Beautiful Website</title>
    </head>

    <body>

        <h1>Heading Line</h1>

    <hr/>

        <p>This is a line in the paragraph.
      This is another line in our paragraph.
      This is also a line in our paragraph
        </p>

    </body>

</html>


    결과:



    설명:

    각 지침과 그 의미를 살펴보겠습니다.
  • 항상 전체 문서는 <html> 및 </html> 태그 사이에 포함됩니다.

  • 다음은 <head>와 </html> 사이에 있는 "head"섹션으로 당사 웹 페이지를 설명하는 특수 정보입니다. 헤드 섹션 내에 포함할 수 있는 많은 태그가 있습니다.
  • 여기서는 <title> </title> 태그를 사용했습니다. 이 태그 안에 포함된 콘텐츠는 아래 웹 브라우저의 제목 표시줄에 표시됩니다.



  • 다음은 <body> </body> 로 묶인 "본문"섹션입니다.
  • <h1> </h1> 태그를 제목 수준 1이라고 하며 콘텐츠가 웹 페이지에 눈에 띄게 표시되도록 합니다.
  • <hr/>는 HTML에서 수평선을 표시하는 "horizontal rule"이라는 자동 닫힘 태그입니다.
  • <p> 및 </p> 태그는 단락 태그라고 하며 웹 페이지에서 콘텐츠의 단락을 구성하는 데 사용됩니다
    • .


    그렇다면 웹사이트를 만드는 데 필요한 것은 HTML뿐일까요?

    기술적으로 그렇습니다. HTML은 골격 웹 사이트를 만드는 데 충분합니다. 하지만 아름다운 웹페이지를 만들기 위해서는 CSS가 필요합니다. 마찬가지로 웹 애플리케이션(동적 웹 사이트의 멋진 이름이며 사용자 상호 작용을 지원함)을 생성하려면 JavaScript도 필요합니다.

    모든 HTML 태그는 무엇입니까?

    HTML은 방대한 태그 목록을 포함하도록 수년에 걸쳐 발전했습니다. 다양한 HTML 태그를 찾고 이해하는 가장 좋은 방법은 Mozilla의 MDN 문서https://developer.mozilla.org/en-US/docs/Web/HTML를 사용하는 것입니다.

    추가 자료:

    이 문서는 HTML에 대한 가장 기본적인 가이드일 뿐입니다. HTML에는 위에서 설명한 것보다 훨씬 더 많은 것이 있습니다. 사실 HTML의 최신 반복, 즉 HTML5는 다음과 같은 골격 구조를 가지고 있습니다.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{Name of Webpage}</title>
</head>
<body>
    {Content of HTML document}
</body>
</html>


    HTML에 대한 이러한 추가는 웹 자체가 시간이 지남에 따라 진화하고 현대적인 요구 사항이 이러한 변경을 필요로 한다는 사실 때문입니다. 그러나 이들 각각은 MDN에 매우 잘 설명되어 있고 이해하기 쉽습니다.

    직접 사용해 보세요: https://codepen.io/chandanbsd/pen/NWyypjv
    GO: Paralelismo e concorrência
    Git 커밋을 여러 커밋으로 분할하는 방법은 무엇입니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage