HTML 기초 #1

 

디버깅 엔진 설치 [ATOM]

 

 

 

 

 

 

적정 File Folder을 만든다.

 

 

 

간단한 문구 적은 뒤 저장 폴더에 가서 Web Page를 연다.

 

 

 

wow!

 

 

경로 폴더의 HTML 파일 이미지

 

 

작동 원리

1. 클라이언트에서 웹 서버로 접속한다.
2. 웹 서버에서 클라이언트가 요청하는 HTML 파일을 읽어와 클라이언트에 전송한다.
3. 이를 클라이언트에서 파싱하여 요청한 웹 화면을 보게 된다.

 

F12를 누르면 HTML 정보를 볼 수 있다.

 

 

 

본격적으로 알아보기

 

<!-- 이거슨 주석-->
이거슨 <h1>노지환</h1>이 직접 만드는 HTML의 <b>페이지이다.</b>
<i>노지환 왈 "왈왈왈" 이라고 전했다.</i>
<!--h는 Hwading이라는 의미로 제목 및 소제목에 사용이 된다.-->
<!--i는 Italic이라는 의미 -->

<!-- b는 Bold라는 의미 -->
<!--strong은 Bold와 나타나는건 같지만 강조의 의미가 강함-->
<!--프로그래밍적으로 strong이라는 의미가 나올때, 강조하는 효과(사운드 및 이펙트)등을 넣어 사용 할 수 있다-->
<!-- u는 Underline라는 의미 -->

<p><b>이거슨 굵기</b></p>
<p><strong>이거슨 스트롱맨</strong></p>

https://www.w3schools.com/tags

HTML Reference

위 사이트는 HTML 레퍼런스에 대해 설명해주는 웹사이트이다. 에디터 모드로 직관적으로 볼 수 있어 좋음.

 

 

<!-- 웹은 틀리더라도 어느정도는 커버가 가능하다.-->
<!--엔터키 : <br> (Line breaker)-->
이거슨 줄띄우기 br <br> 되었나?
<p>단락을 나누는 기능은 p : Paraggraph.</p>
되었나?<br>
<!--이미지 출력-->
<img src="img_girl.jpg" alt="이미지를 못 찾았을 경우 나오는 텍스트" height="500" width="350">

<!--링크 : <a href = "" (target= "_blank" 시 새로운 탭 생성)> 웹에 나오는 텍스트 및 이미지 등등 </a>>-->
<p>
<a href="https://www.naver.com" target="_blank">네이버 받아랏 </a>
</p>