> 웹 프론트엔드 > CSS 튜토리얼 > HTML로 첫 번째 웹 페이지를 만드는 방법은 무엇입니까?

HTML로 첫 번째 웹 페이지를 만드는 방법은 무엇입니까?

WBOY
풀어 주다: 2024-09-05 06:42:50
원래의
595명이 탐색했습니다.

첫 번째 웹페이지를 만드는 것이 어렵게 들릴 수도 있지만 HTML(HyperText Markup Language)을 사용하면 생각보다 간단합니다! 이 가이드에서는 첫 번째 웹 페이지를 즉시 실행하고 실행할 수 있도록 프로세스를 단계별로 안내해 드립니다. 뛰어들어 보세요!

HTML이란 무엇입니까?

HTML은 HyperText Markup Language의 약자로 웹페이지를 만드는 데 사용되는 표준 언어입니다. 귀하가 방문하는 모든 웹사이트의 중추라고 생각하십시오. 텍스트, 이미지, 링크 등의 콘텐츠를 웹 브라우저에서 볼 수 있도록 구조화합니다.

환경 설정

코딩을 시작하기 전에 몇 가지 도구가 필요합니다.

  • 텍스트 편집기: HTML 코드를 작성하는 곳입니다. 메모장(Windows) 또는 TextEdit(Mac)과 같은 간단한 것을 사용할 수 있지만 더 나은 기능을 위해서는 Visual Studio Code 또는 Sublime Text와 같은 코드 편집기를 사용하는 것이 좋습니다.
  • 웹 브라우저: 웹페이지를 보려면 Chrome, Firefox, Edge와 같은 브라우저가 필요합니다.

첫 번째 HTML 파일 만들기

첫 번째 웹페이지 파일을 만들어 보겠습니다.

  • 텍스트 편집기 열기: 선택한 텍스트 편집기를 열어 시작하세요.
  • 새 파일 만들기: '파일' 클릭 > '새 파일.'
  • 파일 저장: 이 새 파일을 index.html로 저장합니다. 대부분의 웹사이트 메인 페이지의 표준 이름입니다.
  • HTML 문서의 기본 구조 이제 HTML 문서의 기본 구조를 살펴보겠습니다. index.html 파일에 다음 코드를 입력하세요.
<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page!</h1>
    <p>This is my very first HTML page.</p>
</body>
</html>
로그인 후 복사

출력

How to Create Your First Web Page with HTML?

구조 이해

  • : 이 선언은 문서를 HTML5 문서로 정의합니다.
  • < html >: HTML 페이지의 루트 요소입니다.
  • < head >: 이 섹션에는 제목과 같은 HTML 문서에 대한 메타 정보가 포함되어 있습니다.
  • < title >: 이 태그 내의 콘텐츠는 브라우저의 제목 표시줄이나 탭에 제목으로 표시됩니다.
  • < body >: 제목, 단락, 이미지 등과 같은 웹페이지 콘텐츠가 들어가는 곳입니다.
  • < h1 >: 이 태그는 최상위 제목을 정의합니다.
  • < p >: 이 태그는 단락을 정의합니다. 더 많은 콘텐츠 추가 웹페이지에 더 많은 것을 추가해 보겠습니다. 단락 아래에 다음 코드를 추가합니다.

About Me

I’m learning how to build websites with HTML.

  • HTML
  • CSS
  • JavaScript

출력:

How to Create Your First Web Page with HTML?
새로운 요소 설명

  • < h2 >: 이는 두 번째 수준 제목을 정의합니다.
  • < ul >: 순서가 지정되지 않은 목록이 생성됩니다.
  • < li >: 순서가 지정되지 않은 목록 내의 목록 항목입니다.

웹 페이지 보기

코드를 작성했으면 이제 실제로 작동하는 모습을 볼 시간입니다!

  • 파일 저장:index.html 파일이 저장되었는지 확인하세요.
  • 브라우저 열기: 웹 브라우저를 엽니다.
  • 페이지 보기: index.html 파일을 브라우저 창으로 드래그하거나 파일을 두 번 클릭하여 브라우저에서 직접 엽니다.
  • 이제 첫 번째 웹페이지가 실시간으로 표시됩니다!

결론

축하합니다! HTML을 사용하여 첫 번째 웹 페이지를 만들었습니다. 이는 시작에 불과하지만 이제 더욱 복잡하고 대화형 웹 페이지를 구축할 수 있는 기반이 마련되었습니다. 기술을 확장하려면 새로운 태그와 요소를 계속 실험해 보세요.

메모:

Basic부터 Advance, Advance to Expert, Expert에서 Pro까지 모든 주제를 다루는 시리즈를 시작합니다. 꼭 팔로우해주세요.
HTML, CSS, JS에 대해 자세히 알아보려면 제 웹사이트 webdevtales.com을 방문하세요.

위 내용은 HTML로 첫 번째 웹 페이지를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿