해당 게시물은 생활코딩 HTML 을 정리한 내용 입니다.
출처: 생활코딩(https://opentutorials.org/course/2039)
[목차]
6. DOCTYPE
- 설명
DOCTYPE: Document Type의 약자이며 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정합니다.
- 예제(DOCTYPE)
<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>
7. 웹사이트 만들기
- 예제(index.html)
<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
<li><a href="1.html">기술소개</a></li>
<li><a href="2.html">기본문법<a/></li>
<li><a href="3.html">하이퍼텍스트와 속성</a></li>
<li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>
- 예제(1.html)
<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
<li><a href="1.html">기술소개</a></li>
<li><a href="2.html">기본문법<a/></li>
<li><a href="3.html">하이퍼텍스트와 속성</a></li>
<li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
<h2>기술소개</h2>
HTML은 HyperText Markup Language의 약자로서 웹페이지를 만드는 언어입니다.
</body>
</html>
8. 개발도구
- 설명
해당 강좌에서는 atom 개발도구를 사용하고 있습니다.
아래 주소에서 설치 파일을 다운로드할 수 있습니다.
출처: Atom
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
- 사용방법
- 태그명을 입력한 다음, Tab 키를 누르면 태그가 자동완성됩니다.
- ol>li*4 와 같은 방식으로도 작성 가능합니다.
- Ctrl+Alt+오른쪽 화살표 키를 누르면 커서가 다음 편집 지점으로 옮겨집니다.
9. HTML의 변천사와 통계
- HTML 연대기
출처: martinrinehart
http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html
HTML Tag History
HTML Tags: Past, Present, Proposed © 2012, Martin Rinehart Prerequisite: This page was prepared for students learning from Professional HTML, Volume I of V in the Frontend Engineering series. It is most meaningful to persons currently using HTML who wish t
www.martinrinehart.com
-
HTML 통계
출처: advancedwebranking
https://www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
10. 단락 - p
- 설명
해당 강좌에서는 HTML의 주요 태그 중에서 p 태그에 대해서 설명하고 있습니다.
p 태그: paragraph의 줄임말로 단락을 표현할 때 사용합니다.
- 예제(p 태그)
<html>
<head><meta charset="utf-8"></head>
<body>
<p>HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.</p>
<p>HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
<p>The language is written in the form of HTML elements consisting of tags enclosed in angle brackets . Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page.</p>
</body>
</html>
단락과 단락 사이의 거리를 좀 더 떨어 트리고 싶다면 아래의 2가지 방법을 사용하실 수 있습니다.
1) 줄바꿈 태그(br)를 사용
2) p 태그의 부피, 간격을 CSS를 이용하여 변경할 수 있습니다.
'HTML' 카테고리의 다른 글
| 생활코딩 HTML 정리 (1~5) (0) | 2020.01.09 |
|---|
댓글