이번에는 여러분이 잘 알고 있는 텍스트를 입력받는 기능, 선택기능을 공부해볼 것입니다.
일단 기본 태그들은 form과 input입니다.
일단 예제로 살펴봅시다.
<html>
<body>
<form action="http://localhost/login.php>
<p>아이디: <input type="text" name="id" value="id></p>
<p>비밀번호:<input type=""password" name="pwd" value="nothing></p>
<p>주소: <textarea cols="40" rows="'8">주소</textarea></p>
<h1>색상선택</h1>
<p><select name="color">
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>색상다중선택</h1>
<h2>ctrl을 누르고 선택<h2>
<p><select name="color2" multiple>
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>옷의 색상</h1>
<p>
<input type="radio" name="color" value="red">빨강색
<input type="radio" name="color" value="blue" checked>파랑색
<input type="radio" name="color" value="black">검은색
</p>
<h1>사이즈</h1>
<p>
<input type="checkbox" name="size" value="95">95
<input type="checkbox" name="size" value="100">100
<input type="checkbox" name="size" value="105">105
</p>
<p><input type="submit"</p>
</form>
</body>
</html>
아직 form에 대한 강의는 안 끝났습니다. 다음시간에 form에 대해 조금 더 알아보는 시간이 있겠습니다.
일단 위의 것을 해석해 봐야겠죠? 아는 것은 안 하겠습니다.
form action은 이 데이터를 어디로 전송할지를 정하는 것입니다. form태그 안에 있는 모든 선택된 데이터를 localhost/login.php로 전송합니다.
input은 텍스트를 입력받는 상자인데요, type은 글자의 종류(text:일반, password:점글자, submit은 예외(제출))입니다. name은 글자가 무엇인지, value는 들어갔을 때의 기본값입니다.
select태그는 선택 태그인데요, dropdown list로 표시됩니다. name은 이것의 의미, option은 그 선택되는 것중 하나, 그것의 value는 표시되는 것의 의미입니다.
select name 다음에 multiple을 붙인 것은 다중선택기능입니다. 말 그대로 ctrl버튼과 마우스로 버튼을 누르면 다중선택이 가능합니다.
input type의 radio는 동그란 것인데요, 이것은 단일선택, 즉 하나만 선택이 가능합니다. name과 value는 같고요, 밑의 checkbox는 다중선택입니다. 네모 박스가 나타나는데요, 네모박스 안에 체크표시가 됩니다. 저는 다중선택을 input multiple보다는 checkbox를 추천합니다.
오늘 강의는 잘 이해가 안 가실수도 있습니다. 그러면 일단 제가 쓴 걸 복사해서 개발도구나 메모장으로 가져가서 저장 후 실행시켜보세요. 그래도 모르겠으면 댓글 남겨 주세요.
감사합니다.
2016년 6월 7일 화요일
2016년 6월 4일 토요일
홈페이지 만들기 제5강
자, 오늘 강의 내용은 꽤 깁니다. 그리고 주위 깊게 살펴봐야 하는 거라, 저는 2틀동안 걸쳐 쉬어가면서 하면 좋겠습니다. 홈페이지 만들겠다는 사람 몸살 걸리게 하고 싶진 않아서...
자, 우리가 홈페이지를 들어가 보면 살짝의 간격의 띄어쓰기로 표시되어 있는 단락을 보신 적이 있으시나요?
단락은 영어로 paragraph, html 언어계에서는 <p>입니다. 이것은 아주 간단합니다. 그냥 한 단락 앞에 <p>, 뒤에 </p>를 붙이면 됩니다.
자, 이제 이해하기 어려운 부분이 시작됩니다.
우리는 홈페이지에 사진을 넣죠? 사진은 영어로 image, html에서는 img입니다. 일단은 이미지를 준비해 주고, 저는 이미지 이름을 '나'라고 짓겠습니다. 그럼 어떻게 해야 하는지 예제로 살펴봅시다.
예)
<img src="나.jpg" width="300" height="200" alt="내 사진" title="내 사진">
이러면 어떻게 될까요?
이미지는 '나'라는 이미지가 업로드 되고, 가로는 300픽셀, 높이는 200픽셀, 이미지가 깨졌을때 '내 사진'이라고 나오고, 그림 위에 마우스를 올려 놓으면 '내 사진'이라고 흰 박스에 표시됩니다. 즉, src는 업로드할 이미지, width는 가로 길이, height는 세로 길이, alt는 이미지가 깨졌을 때 나오는 글, title은 마우스를 위에 올려놓았을 때 나오는 도움말입니다.
다음은 이해하기 조금 어려우실 수도 있습니다. 이것은 표인데요, 표는 영어로 table입니다. 그래서 html 언어에서도 <table>입니다.
이 표는 3가지 부분으로 나누어 설명드릴 건데요, 2번째 부터는 꼭 듣지 않아도 되는 내용입니다. 하지만 표를 심화적으로 표현하고 싶다면 힘들어도 하시는 것이 좋겠습니다. 너무 무리는 하지 마시고요...
일단, 표의 기본부터 살펴봅시다.
표는 어떻게 생겼죠? 표는 여러 박스가 큰 사각형으로 둘러싸여 있는 형태입니다.
표 예제로 살펴봅시다.
<html>
<body>
<table border="1">
<tr>
<td>이름</td><td>성별</td><td>주소</td><td>수익</td>
</tr>
<tr>
<td>최진혁</td><td>남자</td><td>청주</td><td>1000</td>
</tr>
<tr>
<td>최유빈</td><td>여자</td><td>청주</td><td>500</td>
</tr>
<tr>
<td>합계</td><td></td><td></td><td>1500</td>
</table>
<body>
</html>
이렇게 넣었습니다. 그럼 이렇게 나오게 됩니다.
이름 성별 주소 수익
최진혁 남자 청주 1000
최유빈 여자 청주 500
합계 1500
태두리도 있지만 넣을 수 있 는 프로그램이 없어서 안 넣었습니다.
자, 해석을 해 봅시다.
table은 표가 시작된다는 뜻이고, border="1"은 태두리라는 뜻이고(2도 넣을 수 있지만 2는 모양이 이상해서 1 추천), tr은 table row의 약자로, 한 행이 추가된다는 뜻입니다. 대신 행이 끝날 때는 </tr>을 붙여줘야 합니다. <td>는 한 칸에 들어가는 내용입니다. 그리고 마지막에 </table>을 붙여 줘야 합니다. 그런데
이해가 잘 되시나요? 저는 이해하는데 1달 걸렸는데... 여러분이 이해가 안 되는 부분이 있으시면 댓글로 남겨주세요. 언제든디 도와드리겠습니다.
자, 2번째 부분입니다.
글을 병합하려면 어떻게 할까요?
위에 표에서 둘다 청주에 살고 있죠? 그럼 어떻게 넣어야 병합을 할 수 있을까요?
이때 바로 달려가는 것은 <span>! 그런데 그냥 <span> 넣으시면 큰일나요. 행인지 열인지 구분해서 넣어야 해요. 행은 row니까 <rowspan>을 넣고, 그 다음 행 몇 개를 병합할 것인지 해석해서 넣어야 합니다. 만약 2개의 행을 병합하고 싶으면 <rowspan="2">이렇게 넣어주세요. 그 다음 밑에 행에 병합할 글자와 <td>태그는 삭제! 예를 들면 위에서는 이렇게 되죠.
<td rowspan="2">청주</td>
밑의 행에서는
그러면 열 병합은 어떻게 할까요?
<td colspan="">입니다. 이것도 위에 것이랑 마찬가지입니다. colspan할 열 개수를 넣어 주시고 그 열은 삭제!
자, 3번째 부분입니다. 이제부터는 차근차근 쉬워집니다.
표도 머리, 몸통, 발이 있죠? 그냥 <tr>을 바꾸면 됩니다. 이 행을 머리로 하고 싶다. 그러면 <tr>을 <thead>로. 몸통은 <tbody>. 맨 밑의 꼬리말은 <tfoot>. 그러면 머리말은 굵고 가운데 정렬이 됩니다. 나머지 몸통은 중간, 꼬리말은 맽 밑으로 가게 됩니다.
강의 중 어려우신 것이 있으시면 바로 댓글에 질문해주세요~
감사합니다~
홈페이지 만드는 개발도구
2016년 6월 3일 금요일
홈페이지 만들기 제4강
자, 오늘 강의는 되게 짧습니다.
우리가 웹페이지를 만들때 계속 <html>로 시작했잖아요. 그런데 전문적인 웹사이트에서 마우스 오른쪽 버튼을 클릭하셔서 페이지 소스 보기를 하시면 시작은 대부분 <!DOCTYPE html>이라고 되어 있는 것을 보실 수 있습니다.
이것은 지금 현재까지는 필요 없는데, 우리가 나중에 마스터 되서 이것을 잘 활용해야 합니다. 안 그러면 네이버나 다음, 구글 뭐 이런데처럼 전문적인 사이트를 만들 수가 없습니다. 그러므로 우리는 이것을 필요 없지만 중요한 것으로 여기면서 계속 앞에 이것을 붙여야 합니다.
우리가 웹페이지를 만들때 계속 <html>로 시작했잖아요. 그런데 전문적인 웹사이트에서 마우스 오른쪽 버튼을 클릭하셔서 페이지 소스 보기를 하시면 시작은 대부분 <!DOCTYPE html>이라고 되어 있는 것을 보실 수 있습니다.
이것은 지금 현재까지는 필요 없는데, 우리가 나중에 마스터 되서 이것을 잘 활용해야 합니다. 안 그러면 네이버나 다음, 구글 뭐 이런데처럼 전문적인 사이트를 만들 수가 없습니다. 그러므로 우리는 이것을 필요 없지만 중요한 것으로 여기면서 계속 앞에 이것을 붙여야 합니다.
홈페이지 만들기 제3강
지난 시간에 배운 것들은 기억나죠? 자, 이번 시간에는 이것으로 문서의 구조를 살펴볼거구요, 새로운 것도 배울 거예요.
지난 시간에 배운 것들만으로도 사실 충분한 홈페이지를 만들 수 있습니다. 그런데 이것보다 더 고급스러운 것을 배울 것입니다.
여러분은 홈페이지에 들어가 보면 글자 크기가 다 다르죠? 그것을 배우고, 또 인터넷에 들어가 보면 종종 글씨가 깨지는 것도 있습니다. 이것도 치료하는 법을 가르쳐 드리겠습니다.
우리가 배우고 있는 것은 html이죠? 글자를 나타낼때에는 h를 사용할 겁니다. 우리가 달리기 시합에서 1등한다고 하면 제일 빨랐단 거잖아요? 여기서는 제일 크다는 겁니다.
예제를 봅시다.
예)
<html>
<head>
<title>홈페이지 만들기></title>
</head>
<body>
<h1>안녕?</h1>
<h2>ㅋㅋ</h2>
</body>
</html>
이렇게 하면 어떻게 될까요?
홈페이지 만들기
안녕?
ㅋㅋ
이렇게 나옵니다.
아주 간단하죠? 이것은 원리이니 쉬울 것입니다.
이것은 외우셔야 합니다. 글자가 깨지지 않게 치료하는 거라서...
뿀묘횟킇긓
이렇게 나오는 것을 보셨을 수 있습니다.
이것을 치료하기 위해 사용하는 태그가 있습니다.
<meta charset="utf-8">
이것은 외우시면 됩니다. 참고로 이것은 title 바로 다음줄에 나옵니다.
오늘 강의는 여기서 끝내겠습니다. 감사합니다.
지난 시간에 배운 것들만으로도 사실 충분한 홈페이지를 만들 수 있습니다. 그런데 이것보다 더 고급스러운 것을 배울 것입니다.
여러분은 홈페이지에 들어가 보면 글자 크기가 다 다르죠? 그것을 배우고, 또 인터넷에 들어가 보면 종종 글씨가 깨지는 것도 있습니다. 이것도 치료하는 법을 가르쳐 드리겠습니다.
우리가 배우고 있는 것은 html이죠? 글자를 나타낼때에는 h를 사용할 겁니다. 우리가 달리기 시합에서 1등한다고 하면 제일 빨랐단 거잖아요? 여기서는 제일 크다는 겁니다.
예제를 봅시다.
예)
<html>
<head>
<title>홈페이지 만들기></title>
</head>
<body>
<h1>안녕?</h1>
<h2>ㅋㅋ</h2>
</body>
</html>
이렇게 하면 어떻게 될까요?
홈페이지 만들기
안녕?
ㅋㅋ
이렇게 나옵니다.
아주 간단하죠? 이것은 원리이니 쉬울 것입니다.
이것은 외우셔야 합니다. 글자가 깨지지 않게 치료하는 거라서...
뿀묘횟킇긓
이렇게 나오는 것을 보셨을 수 있습니다.
이것을 치료하기 위해 사용하는 태그가 있습니다.
<meta charset="utf-8">
이것은 외우시면 됩니다. 참고로 이것은 title 바로 다음줄에 나옵니다.
오늘 강의는 여기서 끝내겠습니다. 감사합니다.
2016년 6월 2일 목요일
홈페이지 만들기 제2강
자, 지난 수업에 했던 html이 기억나죠? 복습해 봅시다.
시작할때는 <html>을 써 준다.
위에 머리말을 쓰려면 이렇게 해 준다.
<head>
<title>내 홈페이지(예)</title>
</head>
글을 쓸 때는 이렇게 해 준다.
<body>
내 홈페이지(예)
</body>
링크를 해 줄때는 이렇게 해 준다.
<a href="...">내 홈페이지(예)</a>
html을 끝낼 때는 이렇게 해 준다.
</html>
자, 이제 새로운 것을 배워 봅시다.
글이 같은 세로줄로 앞에 점으로 나열 된 것을 본 적이 있으시나요? 예를 들어 보도록 하죠.
이것은 리스트처럼 나열되어 있죠? 리스트는 영어로 말 그대로 list입니다. 그것을 줄여 <li>로 써 줍니다.
그런데 1. 2. 3. 이런 것은 어떻게 쓰냐고요?
점은 순서가 없죠? 하지만 1. 2. 3. 은 숫자로 순서가 있습니다. 그러므로 나열되어 있다는
것으로 ordered list를 줄여 <ol>이라고 붙이죠. 그런데 점은 어떻게 하나요? 나열이 되어 있지 않다는 뜻으로 unordered list를 줄여 <ul>이라고 붙입니다. 많은 분들은 ul을 보고 url이라고 착각하셔서 링킹을 하는 경우가 있는데, 링크는 <a href>고 이것은 <ul>입니다.
자, 이제 예제로 넘어가죠.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
<ul>
<li>내 홈페이지
<li>입니다.
</ul>
<ol>
<li>ㅋㅋ
<li>ㅎㅎ
</ol>
</body>
<html>
좀 길죠? 하지만 줄 넘기는 거 안 해도 된다는 거 지난 시간에 배웠죠? 하지만 이것이 보기 깔끔하다는 점이...
자, 오는 강의는 여기서 마치도록 하겠습니다. 감사합니다.
시작할때는 <html>을 써 준다.
위에 머리말을 쓰려면 이렇게 해 준다.
<head>
<title>내 홈페이지(예)</title>
</head>
글을 쓸 때는 이렇게 해 준다.
<body>
내 홈페이지(예)
</body>
링크를 해 줄때는 이렇게 해 준다.
<a href="...">내 홈페이지(예)</a>
html을 끝낼 때는 이렇게 해 준다.
</html>
자, 이제 새로운 것을 배워 봅시다.
글이 같은 세로줄로 앞에 점으로 나열 된 것을 본 적이 있으시나요? 예를 들어 보도록 하죠.
- 안녕
- 나는 ...이야.
- ㅋㅋ
- ㅎㅎ
이것은 리스트처럼 나열되어 있죠? 리스트는 영어로 말 그대로 list입니다. 그것을 줄여 <li>로 써 줍니다.
그런데 1. 2. 3. 이런 것은 어떻게 쓰냐고요?
점은 순서가 없죠? 하지만 1. 2. 3. 은 숫자로 순서가 있습니다. 그러므로 나열되어 있다는
것으로 ordered list를 줄여 <ol>이라고 붙이죠. 그런데 점은 어떻게 하나요? 나열이 되어 있지 않다는 뜻으로 unordered list를 줄여 <ul>이라고 붙입니다. 많은 분들은 ul을 보고 url이라고 착각하셔서 링킹을 하는 경우가 있는데, 링크는 <a href>고 이것은 <ul>입니다.
자, 이제 예제로 넘어가죠.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
<ul>
<li>내 홈페이지
<li>입니다.
</ul>
<ol>
<li>ㅋㅋ
<li>ㅎㅎ
</ol>
</body>
<html>
좀 길죠? 하지만 줄 넘기는 거 안 해도 된다는 거 지난 시간에 배웠죠? 하지만 이것이 보기 깔끔하다는 점이...
자, 오는 강의는 여기서 마치도록 하겠습니다. 감사합니다.
홈페이지 만들기 제1강
오늘 배울 내용은 홈페이지인데요, 홈페이지를 어떻게 만드는지 알고 있는 분들도 계시고 모르는 분들도 계시는데, 일단 기초부터 차근차근 짚고 넘어가죠.
여러분, 홈페이지는 html으로 만들어진다는 것을 알고 계셨나요? 그런데 이상하게도 홈페이지는 꼭 도메인이 있어야 한다고들 하시는데, 홈페이지는 그냥 인터넷 페이지입니다. 그러므로 도메인이 없어도 됩니다. 홈페이지는 간단하게 메모장으로 만들 수 있습니다.
일단 메모장 여는 방법입니다. 바탕화면이나 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하시고 새로 만들기를 클릭하시면 바로가기라는 것이 있습니다. 그걸 클릭하시고 박스에 notepad.exe라고 쓰시고 확인 누르시고 이름 정하고(이름은 자유) 확인하시면 그 화면에 방금 지정한 이름의 바로가기가 나타납니다. 그걸 클릭하시면 화면이 나옵니다.
이제 본격적인 html 공부를 시작합시다.
1. 화면에 표시되는 글
일단 html을 시작하려면 html이라고 입력해야 시작되는데, html언어에서는 <과 >이 없으면 html이라고 인식을 못 합니다. 그러므로 일단 <html>을 입력해야 시작이 되겠죠?
자, 다음은 화면에 글 표시하기입니다. 우리 몸은 영어로 body라고 합니다. 화면은 우리의 몸인 셈이므로 <body>를 입력해 줘야 화면에 글이 표시됩니다. 그 다음에 여러분이 하고 싶은 말을 써 줍니다. 그런데 여기서 잠깐! html 언어에서는 엔터를 알아듣질 않습니다. Html 언어에서는 엔터 대신 html언어를 사용합니다. <br>입니다. 하지만 띄어쓰기는 그냥 스페이스바 한번 치면 됩니다.
자, 그런데 html에서는 뭘 끝내지 않으면 다음 것으로 넘어갈 수가 없습니다. 그러므로 반드시 끝내야 하는데, 이것은 /입니다. 그러므로 본문을 끝낼 때는 </body>라고 해 줘야겠죠.
자, 이제 본문의 기초는 끝났습니다. 그런데 링크가 없으면 시시하죠? 링크 연결 법을 알려 드리도록 하겠습니다.
링크는 대부분 글자에 색이 있고 밑줄이 처져 있죠? 그것이 나타나게 할 겁니다. 이제부터는 대부분원리가 아닌 규칙이므로 차근차근 외우셔야 합니다.
링크의 전에는 <a href="가 나옵니다. a는 색 있는 글자라는 뜻인데 이 a는링크와 붙어 있을 때만 적용됩니다. href는 링크라는 뜻이고요, " 다음에는 연결할 링크 주소를 써 줍니다. 그리고 다시 "를 넣어 줍니다. 그리고 >를 넣어 주세요. 그 다음에 입력할 것은 링크와 연결된 글자인데요, 엔터나 띄어쓰기 하지 않은 상태에서 쓰고 싶은 글자를 써 넣으세요. 그리고 이제 색 있는 글자는 끝났다는 표시로 </a>를 넣어 주세요.
2. 위에 표시되는 글
자, 이제부터는 예제로 합시다.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
이 홈페이지는 메모장으로 만들어졌습니다.<br>
<a href="naver.com">네이버</a>
</body>
</html>
이렇게 쓰면 어떻게 될까요?
Head는 우리의 머리라는 뜻이죠? 그러니까 head에 있는 글은 머리말이라는 뜻이죠. 그리고 title은 제목입니다. 그러니까 이 홈페이지의 이름을 창 맨 위에 띄우는 것이죠.
그리고 제가 </html>을 넣은 이유는 html이 끝났다는 것입니다.
이렇게 만들어진 홈페이지에 접속하는 방법입니다.
Ctrl+s를 해 주시고 바탕화면으로 저장 위치를 바꾼 뒤 이름은 마음대로 하시되 끝에 .html을 붙여야 합니다. 파일 형식은 모든 파일로 해 주세요. 그런 뒤 저장을 해 주시면 바탕 화면에 방금 만든 파일이 나타납니다. 그 파일을 클릭하면 바로 인터넷에 여러분이 만든 홈페이지가 열립니다. 도메인이 이상하죠? 그것은 나중에 Html 마스터가 됬을 때 합시다.
자, 이제 여러분은 아주 간단한 홈페이지를 만들 수 있게 되었습니다. 축하합니다!
여러분, 홈페이지는 html으로 만들어진다는 것을 알고 계셨나요? 그런데 이상하게도 홈페이지는 꼭 도메인이 있어야 한다고들 하시는데, 홈페이지는 그냥 인터넷 페이지입니다. 그러므로 도메인이 없어도 됩니다. 홈페이지는 간단하게 메모장으로 만들 수 있습니다.
일단 메모장 여는 방법입니다. 바탕화면이나 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하시고 새로 만들기를 클릭하시면 바로가기라는 것이 있습니다. 그걸 클릭하시고 박스에 notepad.exe라고 쓰시고 확인 누르시고 이름 정하고(이름은 자유) 확인하시면 그 화면에 방금 지정한 이름의 바로가기가 나타납니다. 그걸 클릭하시면 화면이 나옵니다.
이제 본격적인 html 공부를 시작합시다.
1. 화면에 표시되는 글
일단 html을 시작하려면 html이라고 입력해야 시작되는데, html언어에서는 <과 >이 없으면 html이라고 인식을 못 합니다. 그러므로 일단 <html>을 입력해야 시작이 되겠죠?
자, 다음은 화면에 글 표시하기입니다. 우리 몸은 영어로 body라고 합니다. 화면은 우리의 몸인 셈이므로 <body>를 입력해 줘야 화면에 글이 표시됩니다. 그 다음에 여러분이 하고 싶은 말을 써 줍니다. 그런데 여기서 잠깐! html 언어에서는 엔터를 알아듣질 않습니다. Html 언어에서는 엔터 대신 html언어를 사용합니다. <br>입니다. 하지만 띄어쓰기는 그냥 스페이스바 한번 치면 됩니다.
자, 그런데 html에서는 뭘 끝내지 않으면 다음 것으로 넘어갈 수가 없습니다. 그러므로 반드시 끝내야 하는데, 이것은 /입니다. 그러므로 본문을 끝낼 때는 </body>라고 해 줘야겠죠.
자, 이제 본문의 기초는 끝났습니다. 그런데 링크가 없으면 시시하죠? 링크 연결 법을 알려 드리도록 하겠습니다.
링크는 대부분 글자에 색이 있고 밑줄이 처져 있죠? 그것이 나타나게 할 겁니다. 이제부터는 대부분원리가 아닌 규칙이므로 차근차근 외우셔야 합니다.
링크의 전에는 <a href="가 나옵니다. a는 색 있는 글자라는 뜻인데 이 a는링크와 붙어 있을 때만 적용됩니다. href는 링크라는 뜻이고요, " 다음에는 연결할 링크 주소를 써 줍니다. 그리고 다시 "를 넣어 줍니다. 그리고 >를 넣어 주세요. 그 다음에 입력할 것은 링크와 연결된 글자인데요, 엔터나 띄어쓰기 하지 않은 상태에서 쓰고 싶은 글자를 써 넣으세요. 그리고 이제 색 있는 글자는 끝났다는 표시로 </a>를 넣어 주세요.
2. 위에 표시되는 글
자, 이제부터는 예제로 합시다.
예)
<html>
<head>
<title>내 홈페이지</title>
</head>
<body>
이 홈페이지는 메모장으로 만들어졌습니다.<br>
<a href="naver.com">네이버</a>
</body>
</html>
이렇게 쓰면 어떻게 될까요?
Head는 우리의 머리라는 뜻이죠? 그러니까 head에 있는 글은 머리말이라는 뜻이죠. 그리고 title은 제목입니다. 그러니까 이 홈페이지의 이름을 창 맨 위에 띄우는 것이죠.
그리고 제가 </html>을 넣은 이유는 html이 끝났다는 것입니다.
이렇게 만들어진 홈페이지에 접속하는 방법입니다.
Ctrl+s를 해 주시고 바탕화면으로 저장 위치를 바꾼 뒤 이름은 마음대로 하시되 끝에 .html을 붙여야 합니다. 파일 형식은 모든 파일로 해 주세요. 그런 뒤 저장을 해 주시면 바탕 화면에 방금 만든 파일이 나타납니다. 그 파일을 클릭하면 바로 인터넷에 여러분이 만든 홈페이지가 열립니다. 도메인이 이상하죠? 그것은 나중에 Html 마스터가 됬을 때 합시다.
자, 이제 여러분은 아주 간단한 홈페이지를 만들 수 있게 되었습니다. 축하합니다!
피드 구독하기:
글 (Atom)