이것저것1231234

하이퍼텍스트와 속성

저번에 만든 a.html 파일의 마지막 부분에 (도널드 커누스)를 추가해줍니다.

 이번에는 글씨를 클릭하면 다른 웹페이지로 연결되는 링크를 만들어 보려고 합니다. 바로 방금 추가한 (도널드 커누스)를 링크로 만들어 보겠습니다. 글씨를 클릭하여 웹페이지로 이동하게 링크를 걸려면 a태그를 사용해야 합니다. a태그는 anchor의 약자입니다.

 a태그를 달아도 웹페이지에는 변한 것이 없습니다. 그럼 어떻게 해야 링크가 생길까요?

일단 링크를 걸려면 이동할 웹페이지의 주소가 필요합니다. 구글에서 '도널드 커누스'를 검색해서 위키백과를 들어갔습니다. 그리고 주소를 복사한 뒤 a.html 파일로 다시 돌아갑니다.

 a태그 안에 href=(주소)를 추가하면 도날드 커누스라는 부분에 링크를 걸게 됩니다. 하지만 이렇게 하면 링크 클릭 시 기존에 열려있던 페이지에서 링크로 이동하게 됩니다. 불편하므로 새 탭에서 페이지를 열게 하기 위하여 a태그 안에 target="_blank"를 추가해줍니다. 위치는 a태그 안이면 어디든 상관 없습니다.

 한가지 더, 링크 위에 롤오버(마우스 포인터를 올려놓기)를 했을 때, 짤막한 설명이 나오게 하는 법이 있습니다.

title="(내용)"을 추가해주면 롤오버했을 때 입력한 내용이 나오게 됩니다.

 생활코딩(https://opentutorials.org/course/1)에서 공부하고 공부한 내용을 기록하는 형식으로 포스팅하겠습니다.

HTML 소개

 HTML은 Hyper Text Markup Language의 줄임말입니다.

 Hyper Text를 가장 중요한 특징으로 하는

 Markup이라는 형식을 가진

 Language라는 뜻 입니다.

 프로그래밍 언어란 사람과 사람이 소통하듯 사람과 컴퓨터가 소통하기 위해(HTML은 특히 웹브라우저와 소통을) 만들어진 약속입니다. HTML을 사용하여 웹브라우저에게 요청을 할 수 있습니다.

 브라우저를 켜고 아무 사이트에서 우클릭을 하여 익스플로러는 소스 보기, 크롬은 페이지 소스 보기를 클릭하면 나오는 것이 HTML 코드 입니다.

익스플로러에서 본 네이버의 HTML 코드

크롬에서 본 네이버의 HTML 코드

기본 문법

 태그라는건 HTML에서 가장 중요한 문법이고, 가장 중요한 특징입니다. Hyper Text Markup Language에서 Markup이 태그와 밀접한 관계를 갖고 있기 때문에 태그는 HTML에서 너무나 중요합니다. 그리고 HTML은 다른 프로그래밍 언어보다 쉽습니다.

HTML 코드를 만들어서 웹브라우저로 읽어보기

 메모장을 켜서 자신이 적고 싶은 문구를 적습니다. 그리고 상단에 [파일] → [다른 이름으로 저장]을 눌러줍니다.

그 다음 파일 이름을 마음대로 설정 해줍니다. 파일의 확장자는 꼭 .html로 해주고, 파일 형식은 모든 파일, 인코딩은 UTF-8로 바꿔서 저장 해줍니다.

생성된 파일을 열면 작성한 파일의 확장자가 html이기 때문에 웹페이지를 통해서 열리게 됩니다.

작성한 html파일을 그냥 더블클릭하면 웹페이지로 열리기 때문에 수정하기 위해서 [우클릭] → [연결 프로그램] → [메모장]을 클릭합니다.

< >, </ > 이것이 바로 html에서 가장 중요한 문법인 태그이며 각각 시작 태그, 닫히는 태그라고 부릅니다. 닫히는 태그에는 /(슬래시)가 있어야 합니다. 강조할 부분 양 옆에 <strong> </strong> 태그를 쓰고 저장을 하면 강조할 부분이 굵은 글씨로 웹페이지에 나오게 됩니다.

 제목을 적고 싶으면 h1 태그를 사용하면 됩니다 h는 heading(제목)의 약자 입니다. <h1>오늘의 명언</h1>이라 적어주었더니 웹페이지에 오늘의 명언이라는 제목이 나타났습니다. 좀 더 작은 크기의 소제목을 사용하고 싶으면 h2 태그를 사용하면 됩니다.

 html은 다양한 태그를 제공하고 있으므로 적절한 태그를 사용하여 원하는 웹페이지를 만들 수 있습니다.