HTML Basis

lrlagkdusl·2023년 2월 3일
0

HTML

목록 보기
1/14
post-thumbnail

What is HTML?

Html은 hyper text markup language 의 줄임말이다.
Html은 웹페이지를 만들어내기 위한 마크업 언어이다.
Html은 웹페이지의 구조를 나타낸다.
Html은 다양한 elements들고 구성되어 있다.
Html의 elements는 브라우저에 내용이 어떻게 구성되는지를 말한다.
Html의 elements label은 “this is a heading”, “this is a paragraph”, ”this is a link” 등과 같이 내용의 조각들이다.

<!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문서이다. 모든 HTML문서는 문서의 타입을 다음과 같이 정의해야한다.
html 요소는 루트 element로서 전체 html page를 감싸며 문서의 시작과 끝에 표현되어야한다.
head 요소는 HTML page에 대한 메타 데이터를 포함한다. (메타 데이터란 데이터에 대한 데이터를 의미한다.)
title 요소는 HTML page의 제목을 정한다.(정한 title은 title바에 보여진다)
body 요소는 문서의 몸통 역할 또는 컨테이너 역할로 보여지는 모든 것을 포함한다. 예시로 다음을 포함할 수 있다. 글자를 표현하는 heading, 도표, 이미지, 하이퍼링크, 표 리스트 등등
h1 요소는 큰 제목을 표현한다.
p 요소는 단락을 정의한다.

Html heading?

Html heading은 h1 부터 h6 태그까지 표현할 수 있다. 숫자가 커질수록 글자크기는 작아진다.

<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>

Html Paragraphs?

html paragraphs는 p 태그로 표현할 수 있다.
p 태그는 문서 내용의 단락을 표현한다.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Html Links?

html links는 a 태그와 함께 표현된다.
네이버로 예를 들면 다음과 같다.

<a href="https://www.naver.com">This is a link</a>

위에 코드에서 href 는 링크의 목적지를 정의하는 attribute이다.
attribute는 html elements의 부가적인 정보를 제공할 때 사용된다.
attrubute는 뒤에 포스팅에서 자세히 다룰 것이다.

Html Image?

html images는 img 태그로 표현한다.
source file(src), alternative text(alt), width, height들은 모두 img의 attributes이다.
attribute를 사용하면 태그에 효과를 줄 수 있게 된다.

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

다음 포스팅은 elements 에 대해서 공부할 것이다.

profile
코딩을 공부하기 위한 공간입니다

0개의 댓글