<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> My First Web Page</title>
</head>
<body>
<h1>이예지</h1>
<p>Email : yyjj0421@kangwon.ac.kr</p>
<p>ID : 202112801</p>
</body>
</html>
<!DOCTYPE html> : 웹 브라우저에게 해당 페이지가 HTML 문서라고 알려주는 것
</html> : 웹 문서 시작을 알리는 태그.
- 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시
- lang 속성을 사용하여 문서에서 사용할 언어를 지정한다.
- 문서 정보를 지정하는 <head>부분과 문서 내용을 입력하는 <body>부분 포함.
<head> 태그 : 브라우저에게 해당 페이지의 정보 제공
- 문서 관련 정보 입력, 웹 브라우저 화면에는 안보임.
- 문서에서 사용할 외부 파일 링크(style, script)
<meta> 태그 : 문자 세트 등 여러가지 문서 정보가 들어있음
cf) UTF : 한글로 된 내용 표시할 때 사용하는 유니코드.
<title> 태그 : 문서 제목을 나타냄.
<body>태그: 웹 브라우저에 표시될 내용 입력 ex) <body> 내용 </body>
HTML의 대부분에 Tag들은 body 태그 사이에서 사용.
HTML : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
+ Mark up 이기 때문에 Tag라는 개념을 사용한다.
*메타정보 웹 문서 간단한 예시
<!DOCTYPE html>
<html>
<head>
<title>HTML5 메타정보</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Lee Ye Ji">
<meta name="keywords" content="HTML5, CSS3, JavaScript, JQuery">
<meta name="description" content="Web Programming">
<meta http-equiv="refresh" content="10, http://www.google.co.kr">
<base href="https://www.naver.com" target="_blank">
</head>
<body>
<p>
헤드 태그 내 메타정보에는 웹 문서를 만든 이,
검색 시 키워드, 문서에 대한 설명, 문서 내 기본 디렉터리 등이 포함.
</p>
<p>
이 문서는 10초 후 google로 이동합니다.
</p>
<a href=""> 여기를 클릭하면 기본 디렉터리로 설정된 NAVER로 이동합니다.</a>
</body>
</html>
Tag
- 미리 정의되어 있는 태그
사용자가 변경할 수 없으며 사용 용도에 맞게 사용
- 사용자가 직접 정의하여 사용하는 태그
사용자가 태그를 직접 설계하고 HTML문서에 포함하여 작성
속성(Attributes) : 태그의 종속적인 정보를 표현하기 위해서 사용
태그 없이 단독 사용 불가
속성 = "값" 형태로 작성
<tag attibute="value">contents</tag>
웹문서의 Semantic Tag(레이아웃)
1. <header>
HTML5 문서의 머리말 영역으로 중요한 정보를 표시 (ex: 사이트의 제목, 로고)
2. <nav>
내비게이션(navigation) 영역으로 웹 사이트 내에 분류된 다른 영역으로 이동할 때 사용.
3.<article>
독립된 주요 콘텐츠 영역을 정의. 하나의 section 안에 여러의 article이 존재 가능.
4. <aside>
주 콘텐츠 외의 콘텐츠 표시 (ex: 사이드바)
5. <footer>
사이트의 자세한 정보 표시 (ex: 저작권 정보, 관리자 정보, 회사 정보)
'FE > Web(HTML5, CSS, JS)' 카테고리의 다른 글
갬블링게임 (0) | 2022.05.11 |
---|---|
[HTML]구조화 (0) | 2022.04.03 |
[HTML 실습 01] 기본 문서 작성, 표 생성, 셀 병합, th, td (0) | 2022.03.19 |
[HTML] tag (0) | 2022.03.19 |