본문 바로가기
생활정보

HTML 파일 만들기 - 초보자를 위한 단계별 가이드

by gadisuny 2024. 7. 30.

1. HTML 파일이란 무엇인가?

 

Markup

 

  • 웹 페이지를 생성하는 기본적인 구조를 정의하는 파일
  • 텍스트 기반으로 작성되며 HTML(하이퍼텍스트 마크업 언어)로 작성
  • 웹 브라우저에 의해 해석되어 사용자에게 보여지는 내용 제어
  • 텍스트, 이미지, 비디오 등과 같은 다양한 미디어를 포함할 수 있음
  • 기본적으로 .html 또는 .htm 확장자를 가짐

 

 

2. HTML 파일을 만들기 위해 필요한 준비물

 

Text Editor

 

  • 텍스트 편집기: HTML 코드를 작성하기 위한 가장 기본적인 도구
  • 웹 브라우저: 작성한 HTML 파일을 확인하는 데 필요한 소프트웨어
  • 연결된 인터넷: 필요한 CSS나 JavaScript 파일을 불러오기 위해 필요한 요소

 

 

3. 간단한 HTML 파일 만들기 예시

 

 

```html 간단한 HTML 파일 만들기

HTML 파일 만들기 예시

  • HTML 파일은 텍스트 에디터로 작성한다.
  • DOCTYPE 선언은 문서의 유형을 정의한다.
  • html 태그는 HTML 문서의 시작과 끝을 표시한다.
  • head 태그는 문서의 정보와 속성을 정의한다.
  • title 태그는 문서의 제목을 표시한다.
  • body 태그는 문서의 본문을 정의한다.
```

 

 

4. HTML 파일을 열어보는 방법

 

preview

 

  • 파일 탐색기를 열어서 원하는 HTML 파일을 찾아 더블 클릭한다.
  • HTML 파일이 기본적으로 웹 브라우저에서 열리는 것을 확인한다.
  • 만약 파일이 웹 브라우저에서 열리지 않는다면, 파일 탐색기에서 우클릭하여 다른 프로그램으로 열기를 선택한다.
  • 열고자 하는 웹 브라우저를 선택하여 HTML 파일을 열어본다.

 

 

5. 기본적인 HTML 태그 소개

 

Semantic Elements

 

  • 제목 태그: 웹 페이지의 제목을 정의하는 태그로, \</b> 태그를 사용합니다.</li> <li><b>단락 태그</b>: 텍스트 단락을 구분지어 표현할 때 사용하며, <b>\<p></b> 태그를 활용합니다.</li> <li><b>링크 태그</b>: 다른 웹 페이지로 이동할 수 있는 하이퍼링크를 생성하기 위해 <b>\<a></b> 태그를 활용합니다.</li> <li><b>이미지 태그</b>: 이미지를 삽입하고 표현하기 위해 <b>\<img></b> 태그를 사용합니다.</li> <li><b>목록 태그</b>: 항목을 나열하는 데 사용되며, 주요한 태그로는 <b>\<ul></b>, <b>\<ol></b>, <b>\<li></b> 등이 있습니다.</li> </ul><p> </p> <p> </p> <h3>6. HTML 파일을 브라우저에서 확인하기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1655892796775-c947f39f1106?w=800" alt="Preview" style="width:100%;" /> <p> </p> <ul> <li><b>HTML 파일</b>이 저장된 위치로 이동한다.</li> <li>해당 파일을 더블 클릭하여 브라우저에서 열 수 있다.</li> <li>브라우저에서 파일이 정상적으로 나타나는지 확인한다.</li> </ul><p> </p> <p> </p> <h3>7. 추가 학습 자료 및 참고 사이트</h3> <p> </p> <img src="https://images.unsplash.com/photo-1563986768711-b3bde3dc821e?w=800" alt="Resources" style="width:100%;" /> <p> </p> <ul> <li><b>MDN Web Docs</b>: 웹 기술에 대한 포괄적인 문서와 가이드가 있는 곳.</li> <li><b>w3schools</b>: 웹 개발에 관한 튜토리얼, 예제, 연습문제를 제공하는 사이트.</li> <li><b>Codecademy</b>: 인터랙티브한 방식으로 웹 개발 언어를 배울 수 있는 플랫폼.</li> <li><b>freeCodeCamp</b>: 온라인에서 무료로 프로그래밍을 배울 수 있는 커뮤니티.</li> </ul><p> </p> <p> </p></div> <!-- System - START --> <!-- System - END --> <script onerror="changeAdsenseToAdfit()" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script> <!-- inventory --> <ins class="adsbygoogle" style="margin:50px 0; display:block" data-ad-client="ca-pub-9527582522912841" data-ad-slot="4947159016" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-HCZEy0KQLPMGnGuC"></ins> <script id="adsense_script"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script> if(window.ObserveAdsenseUnfilledState !== undefined){ ObserveAdsenseUnfilledState(); } </script> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//gadisuny.tistory.com/reaction'; window.ReactionReqBody = { entryId: 100 }</script> <div class="wrap_btn" id="reaction-100" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="HTML 파일 만들기 - 초보자를 위한 단계별 가이드" data-description="1. HTML 파일이란 무엇인가?   웹 페이지를 생성하는 기본적인 구조를 정의하는 파일 텍스트 기반으로 작성되며 HTML(하이퍼텍스트 마크업 언어)로 작성 웹 브라우저에 의해 해석되어 사용자에게 보여지는 내용 제어 텍스트, 이미지, 비디오 등과 같은 다양한 미디어를 포함할 수 있음 기본적으로 .html 또는 .htm 확장자를 가짐  2. HTML 파일을 만들기 위해 필요한 준비물   텍스트 편집기: HTML 코드를 작성하기 위한 가장 기본적인 도구 웹 브라우저: 작성한 HTML 파일을 확인하는 데 필요한 소프트웨어 연결된 인터넷: 필요한 CSS나 JavaScript 파일을 불러오기 위해 필요한 요소  3. 간단한 HTML 파일 만들기 예시  ```html HTML 파일.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="gadisuny" data-pc-url="https://gadisuny.tistory.com/entry/HTML-%ED%8C%8C%EC%9D%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C" data-relative-pc-url="/entry/HTML-%ED%8C%8C%EC%9D%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C" data-blog-title="gadisuny"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="100" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="7061403" data-url="https://gadisuny.tistory.com/entry/HTML-%ED%8C%8C%EC%9D%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">gadisuny</strong><span class="img_common_tistory ico_check_type1"></span></button><div class="postbtn_ccl" data-ccl-type="1" data-ccl-derive="2"> <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko" target="_blank" class="link_ccl" rel="license"> <span class="bundle_ccl"> <span class="ico_postbtn ico_ccl1">저작자표시</span> <span class="ico_postbtn ico_ccl2">비영리</span> <span class="ico_postbtn ico_ccl3">변경금지</span> </span> </a> </div> <!-- <rdf:RDF xmlns="https://web.resource.org/cc/" xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"> <Work rdf:about=""> <license rdf:resource="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko" /> </Work> <License rdf:about="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko"> <permits rdf:resource="https://web.resource.org/cc/Reproduction"/> <permits rdf:resource="https://web.resource.org/cc/Distribution"/> <requires rdf:resource="https://web.resource.org/cc/Notice"/> <requires rdf:resource="https://web.resource.org/cc/Attribution"/> <prohibits rdf:resource="https://web.resource.org/cc/CommercialUse"/> </License> </rdf:RDF> --> <div data-tistory-react-app="SupportButton"></div> </div> <!-- PostListinCategory - START --> <div class="another_category another_category_color_gray"> <h4>'<a href="/category/%EC%83%9D%ED%99%9C%EC%A0%95%EB%B3%B4">생활정보</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/%EB%B0%B0%EB%84%88-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%A0%84%EB%AC%B8-%ED%8C%81%EA%B3%BC-%ED%8A%B8%EB%A0%8C%EB%93%9C-%EC%86%8C%EA%B0%9C">배너 만들기 - 전문 팁과 트렌드 소개</a>  <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EB%B0%A9%EB%B2%95%EC%9C%BC%EB%A1%9C-%EC%82%AC%EC%A7%84%EC%9D%84-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EB%93%A4">효율적인 방법으로 사진을 다운로드하는 방법들</a>  <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%A0%84%EB%AC%B8%EA%B0%80%EB%93%A4%EC%9D%B4-%EC%B6%94%EC%B2%9C%ED%95%98%EB%8A%94-%ED%8C%81%EA%B3%BC-%EA%B0%80%EC%9D%B4%EB%93%9C">포트폴리오 웹사이트 만들기 - 전문가들이 추천하는 팁과 가이드</a>  <span>(0)</span></th> <td>2024.07.30</td> </tr> <tr> <th><a href="/entry/2022-%EB%B4%84-%EC%B5%9C%EC%8B%A0-%ED%8A%B8%EB%A0%8C%EB%93%9C-%ED%8C%A8%EC%85%98-%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%80%EC%9D%B4%EB%93%9C">2022 봄 최신 트렌드 - 패션 스타일 가이드</a>  <span>(0)</span></th> <td>2024.07.30</td> </tr> <tr> <th><a href="/entry/%EC%97%98%EC%A7%80-%ED%8C%A8%EC%85%98-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%9C-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%98%EB%8A%94-%ED%8C%A8%EC%85%98-%EC%84%B8%EA%B3%84">엘지 패션 - 트렌디한 스타일로 완성하는 패션 세계</a>  <span>(0)</span></th> <td>2024.07.29</td> </tr> </table> </div> <!-- PostListinCategory - END --> </div> <div class="related-articles"> <h2>관련글</h2> <ul> <li> <a href="/entry/%EB%B0%B0%EB%84%88-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%A0%84%EB%AC%B8-%ED%8C%81%EA%B3%BC-%ED%8A%B8%EB%A0%8C%EB%93%9C-%EC%86%8C%EA%B0%9C?category=1224342"> <figure> </figure> <span class="title">배너 만들기 - 전문 팁과 트렌드 소개</span> </a> </li> <li> <a href="/entry/%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EB%B0%A9%EB%B2%95%EC%9C%BC%EB%A1%9C-%EC%82%AC%EC%A7%84%EC%9D%84-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EB%93%A4?category=1224342"> <figure> </figure> <span class="title">효율적인 방법으로 사진을 다운로드하는 방법들</span> </a> </li> <li> <a href="/entry/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%A0%84%EB%AC%B8%EA%B0%80%EB%93%A4%EC%9D%B4-%EC%B6%94%EC%B2%9C%ED%95%98%EB%8A%94-%ED%8C%81%EA%B3%BC-%EA%B0%80%EC%9D%B4%EB%93%9C?category=1224342"> <figure> </figure> <span class="title">포트폴리오 웹사이트 만들기 - 전문가들이 추천하는 팁과 가이드</span> </a> </li> <li> <a href="/entry/2022-%EB%B4%84-%EC%B5%9C%EC%8B%A0-%ED%8A%B8%EB%A0%8C%EB%93%9C-%ED%8C%A8%EC%85%98-%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%80%EC%9D%B4%EB%93%9C?category=1224342"> <figure> </figure> <span class="title">2022 봄 최신 트렌드 - 패션 스타일 가이드</span> </a> </li> </ul> </div> <div class="comments"> <div data-tistory-react-app="Namecard"></div> </div> </div> </article> <aside id="aside" class="sidebar"> <div class="sidebar-1"> <!-- 카테고리 --> <nav class="category"> <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 </a> <ul class="category_list"><li class=""><a href="/category/%EC%83%9D%ED%99%9C%EC%A0%95%EB%B3%B4" class="link_item"> 생활정보 </a></li> </ul> </li> </ul> </nav> </div> <div class="sidebar-2"> <!-- 공지사항 --> <div class="notice"> <h2>공지사항</h2> <ul> </ul> </div> <!-- 최근글/인기글 --> <div class="post-list tab-ui"> <div id="recent" class="tab-list"> <h2>최근글</h2> <ul> </ul> </div> <div id="popular" class="tab-list"> <h2>인기글</h2> <ul> </ul> </div> </div> <!-- 최근댓글 --> <div class="recent-comment"> <h2>최근댓글</h2> <ul> </ul> </div> <!-- Facebook/Twitter --> <div class="social-list tab-ui"> </div> <!-- 태그 --> <div class="tags"> <h2>태그</h2> <a href="/tag/%EC%B5%9C%EC%8B%A0%ED%8A%B8%EB%A0%8C%EB%93%9C">최신트렌드</a> <a href="/tag/%ED%8C%A8%EC%85%98%EA%B0%80%EC%9D%B4%EB%93%9C">패션가이드</a> <a href="/tag/%ED%8A%B8%EB%A0%8C%EB%93%9C">트렌드</a> <a href="/tag/%EC%9B%B9%ED%88%B0%EC%B6%94%EC%B2%9C">웹툰추천</a> <a href="/tag/%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%81">디자인팁</a> <a href="/tag/%EC%97%AC%ED%96%89">여행</a> <a href="/tag/%EC%9D%B8%EC%83%9D">인생</a> <a href="/tag/%EC%97%AC%ED%96%89%EA%B0%80%EC%9D%B4%EB%93%9C">여행가이드</a> <a href="/tag/%EA%B1%B4%EA%B0%95%EC%8B%9D%ED%92%88">건강식품</a> <a href="/tag/%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4%EC%86%8C%ED%92%88">인테리어소품</a> <a href="/tag/%EC%97%B0%EC%95%A0%ED%98%84%EC%8B%A4">연애현실</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8">블로그</a> <a href="/tag/%ED%99%88%EC%BF%A1">홈쿡</a> <a href="/tag/%EC%97%AC%ED%96%89%ED%8C%81">여행팁</a> <a href="/tag/%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8">다이어트</a> <a href="/tag/%EC%A0%95%EA%B5%90%ED%95%9C%EA%B8%B0%EC%88%A0">정교한기술</a> <a href="/tag/%EC%A0%95%EB%B3%B4%EA%B8%80">정보글</a> <a href="/tag/%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4%EB%94%94%EC%9E%90%EC%9D%B8">인테리어디자인</a> <a href="/tag/%EC%97%AC%ED%96%89%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8">여행스타그램</a> <a href="/tag/%EC%97%AC%ED%96%89%EB%B8%94%EB%A1%9C%EA%B7%B8">여행블로그</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EC%84%A4%EC%A0%95">목표설정</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC%ED%8C%81">스타일팁</a> <a href="/tag/%EC%A0%95%EB%B3%B4">정보</a> <a href="/tag/%EC%9D%98%EB%AF%B8">의미</a> <a href="/tag/%ED%96%89%EB%B3%B5%ED%95%9C%EC%9D%BC%EC%83%81">행복한일상</a> <a href="/tag/%EC%A0%84%EC%9E%90%EC%B1%85">전자책</a> <a href="/tag/%EB%A8%B9%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8">먹스타그램</a> <a href="/tag/%EC%9E%90%EA%B8%B0%EA%B3%84%EB%B0%9C">자기계발</a> <a href="/tag/20%EB%8C%80%EC%97%B0%EC%95%A0">20대연애</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%A0%95%EB%B3%B4">블로그정보</a> </div> <!-- 전체 방문자 --> <div class="count"> <h2>전체 방문자</h2> <p class="total"></p> <p>Today : </p> <p>Yesterday : </p> </div> <!-- 소셜 채널 --> <div class="social-channel"> <ul> </ul> </div> </div> </aside> </div> </section> <hr> <footer id="footer"> <div class="inner"> <div class="order-menu"> </div> <a href="#" class="page-top">TOP</a> <p class="meta">Designed by 티스토리</p> <p class="copyright">© Kakao Corp.</p> </div> </footer> </div> <script src="https://tistory1.daumcdn.net/tistory/7061403/skin/images/script.js?_version_=1715087781"></script> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> </div> <div class="#menubar menu_toolbar "></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <iframe id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//gadisuny.tistory.com/api"></iframe> <!-- DragSearchHandler - START --> <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script> <!-- DragSearchHandler - END --> <!-- SyntaxHighlight - START --> <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/styles/atom-one-light.min.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/delphi.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/php.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/python.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/r.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/ruby.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/scala.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/shell.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/sql.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/swift.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/typescript.min.js" defer></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/vbnet.min.js" defer></script> <script>hljs.initHighlightingOnLoad();</script> <!-- SyntaxHighlight - END --> </body> </html>