🔑 코인 투자 추천 링크 🔑
1) HTML과 인터넷의 이해
2. HTML 코딩 실습환경 준비(ATOM에디터 다운 및 설치)
3. HTML 기본문법(태그) 이해하기 및 검색을 통한 태그공부
6. html 태그 속성 그리고 이미지태그<img> 사용법
7. 부모자식태그 <li><ul><table><tr><td>등
8. HTML 문서의 구조 및 다른 웹페이지 연결하기(a href)
이번 강의에는 HTML 문서의 기본구조 그리고 링크거는법, 마지막으로 웹사이트를 완성하는 법을 배워보겠습니다. 오늘 시간을 통해서 홈페이지 하나를 만들 수 있게 됩니다.
먼저 문서의 제목을 배워봅시다! <title>이라는 태그를 사용하는데요,
1. <title> 태그를 통해서 문서의 제목정하기
구글과 비교하니 1.html로 표현되는걸 바꾸고 싶습니다.
아래와 같이 <title> </title> 안에 Web1 - Html로 작성해봅니다.
네, 아래와 같이 제목이 변경되었습니다.
참고로 title태그의 내용을 검색엔진이 중요하게 검색합니다. 그래서 어떤 title을 다는지가 내 웹페이지가 검색결과에 잘 노출되는지를 결정한다고 보셔도 됩니다!!
2. UTF-8 문서포맷 설정하기(한글깨짐방지)
이번에는 <h1> 태그를 통해서 HTML이란 무엇인가?를 작성해보겠습니다. 한글로 작성했는데요, 최근에는 브라우저에서 거의 자동으로 인식하나 간혹 깨지는 현상이 있을 수 있습니다. 이를 방지하기 위해서 지금 문서가 어떤 형식으로 작성되었는지를 설정해줘야합니다.
에디터 제일 하단에 보시면 UTF-8로 작성된 문서임이 표시가 되죠?
이 웹페이지가 UTF-8방식으로 작성되었다는 뜻입니다. 그래서 웹페이지에 보낼 HTML문서에도 이 형식을 지정해줘야합니다.
<meta charset="utf-8"> 이라고 설정해주면 됩니다.
char는 문자, set는 규칙이라는 뜻입니다.
UTF-8이라는 규칙으로 문자를 읽어라는 뜻입니다.
3. 문서의 머리와 몸을 나누기 <head><body> 태그로 구분해주기
HTML의 문서의 내용은 <body> 태그 안에 둡니다. 그리고 body 태그안에 있는 본문에 대한 내용은 <head> 태그에 정보를 알려줍니다. 즉 모든 내용은 body태그에, 그리고 그 body태그의 내용은 head태그에 정보를 알려주죠.
아래와 같이 적용하면 됩니다.
<head>로 시작해서 </head>로 끝나는 내용에는 문서의 제목, 문서의 정보등이 포함되고,
그 아래에 </head>가 끝난 이후에 <body>로 시작해서 문서의 내용이 들어가고 모든 내용이 끝나면</body>태그로 끝납니다.
그리고 </body> 태그가 끝난 이후에는 html문서가 끝났다는 </html>태그를 입력합니다.
아. <body>태그 위에가 <head>이고 그걸 모두 포함하는 태그가 <html>입니다. 최상위 태그이죠~
<html>태그 상단에는
<!doctype html>이라고 표시해둡니다.
이 웹페이지가 HTML문서로 만들어졌다는걸 표현해주는 내용입니다.
이 태그는정보를 주는것이지 어떤 결과물을 보여주진 않습니다.
이렇게 기본적인 HTML 문서의 포맷이 설정되었고 완성이 되었네요!!!
축하드립니다!!
그럼 조금 더 나아가볼께요!!
4. 인터넷상에 있는 다른 웹페이지들을 한번 연결해봅시다!! a 태그라는걸 사용합니다.
HTML 5.2 공식홈페이지인데요, 아래 홈페이지를 한번 링크걸어볼께요
작성한 문서에서 HTML을 클릭하면 위 링크페이지로 연결하게끔 해보겠습니다.
<a href="www.w3.org/TR/html52/" target="_blank" title="HTML5 specification"> Hypertext Markup Language(HTML)</a>
a는 anchor의 약자입니다.
href는 HyperText Reference의 약자입니다.
즉, 또 다른 인터넷 공간에 있는 HTML문서를 연결해주라는 뜻이죠.
마지막에 target="_blank"는 링크를 클릭했을때 새창에서 페이지가 열리게 하는 속성입니다.
이걸 적지 않으면 현재 페이지가 새로운 페이지로 바뀝니다.
마지막 title은 마우스를 해당 링크에 올려놓았을때 설명을 보여줍니다.
아래와 같이 링크에 마우스를 올려놓으면, HTML5 Specification이라고 표시해주죠!!
댓글