HTML은 무엇인가?
- HTML 은 Hyper Text Markup Language 이다.
- HTML 은 Web pages를 만들기 위한 standard markup language 이다.
- HTML 은 Web page의 구조를 기술한다.
- HTML 은 elements 로 구성된다.
- HTML elements는 브라우저에게 내용물을 어떻게 보여줘야 하는지 알려준다.
- HTML elements는 내용이 어떤 부분인지를 명명한다. such as "this is a heading", "this is a paragraph", "this is a link", etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- <!DOCTYPE html> HTML5 document 인 것을 나타냄
- <html> HTML page의 root element
- <head> HTML page에 관한 meta information 포함
- <title> HTML page의 title (브라우저의 title bar 혹은 그 페이지의 탭에 나타남)
- <body> 는 document의 body, 즉 모든 보이는 내용의 컨테이너이다. (headings, paragraphs, images, hyperlinks, tables, lists, etc.)
- <h1> large heading
- <p> paragraph
<!DOCTYPE> 선언
<!DOCTYPE> 선언은 document type을 정의하고 브라우저가 웹 페이지를 올바르게 표시하도록 도와준다.
페이지의 맨 처음, 모든 HTML 태그들 전에 한번만 쓰여야 한다.
<!DOCTYPE> 선언은 대문자와 소문자를 같은 것으로 취급한다.(not case sensitive)
HTML5의 <!DOCTYPE>선언 :
<!DOCTYPE html>
HTML Headings
head는 <h1> 부터 <h6> tag가 있다.
<h1> 가장 중요한 heading.
<h6> 가장 덜 중요한 heading.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraphs
HTML paragraph는 <p> 로 정의되어 있다.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
HTML link는 <a> 로 정의되어 있다
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
링크의 목적지는 href 속성에 들어간다.
속성은 HTML element에 추가 정보를 제공하기 위해 사용된다.
HTML Images
HTML 이미지는 <img> tag로 정의된다.
이미지의 속성들 : The source file (src), alternative text (alt), width, and height
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
alt는 인터넷이 느리거나 에러 등으로 인해 소스 이미지를 불러올 수 없을때 출력하는 정보이다.
HTML 소스코드 보는 법
HTML 페이지를 우클릭한 후
Chrome ) View Page Source
Edge ) View Source
누르면 HTML 소스코드가 포함된 윈도우 창이 뜬다.
HTML Element 살펴보기
요소나 빈 공간을 우클릭한 후 Inspect, Inspect element 등을 누른다.
'Developing > TIL(Develop)' 카테고리의 다른 글
| Html 속성 Html Attributes (0) | 2023.09.06 |
|---|---|
| HTML 요소 HTML Element (0) | 2023.09.04 |
| 파이썬 기본 출력 (0) | 2022.08.05 |
| 파이썬 기초 문법 (0) | 2022.08.05 |
| Java Socket으로 localhost Server와 Client 만들고 연결하기 (0) | 2022.01.18 |
