by
May 04. 2017
32.(입문서)홈페이지 - HTML 배우기
1. 유튜브 같은 사이트를 만들어 보자.
2. 사이트 구성을 알아보아요.
3. HTML과 HTML5의 차이 알아 보자.
4. 실습 해 보자.
1. 유튜브 같은 사이트를 만들어 보자.
동영상 보는 사이트죠.
만들어 보아요.
어떻게 만들까요?
우선..
2. 사이트 구성을 알아보아요.
1) 개발자는 원하는 사이트를 만듭니다.
2) 서버에 올립니다.
3) 사용자는 PC나 스마트폰을 통해 서버에 접속해서 만든 사이트를 보게 됩니다.
만드는 언어를 알아보아요.
HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)
3. HTML과 HTML5의 차이 알아 보자.
1) HTML
PC용
PC에서 잘 보임.
스마트폰으로 보면 잘 안보임.
PC잘보임
스마트폰은 작아서 잘안보임.
HTML은 배워야 한다.
왜냐하면 HTML5 = HTML + CSS + JAVA Script
배우기 위해 필요한것
텍스트 에디터.
Notepad++ https://notepad-plus-plus.org/
브라우저
Google Chrome http://www.google.co.kr/chrome/browser/desktop/
IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage
html확장자를 표시하기 위해, 확장자 표시되게 한다.
바탕화면 > 컴퓨터 >구성 >폴더 및 검색옵션>보기>알려진 파일 형식의 파일 확장자명 숨기기 체크해제 > 확인
준비
notpad를 열어서 html 파일을 만든다.
2) HTML5
스마트폰 크기에 맞도록 자동으로 크기 맞춰짐.
HTML5 = HTML + CSS + JAVA Script
PC
스마트폰에서는 자동으로 화면이 조정됨
4. 실습 해 보자.
1
notpad를 열어서 0.html 파일을 만든다.
예상 결과 :
2
HTML 작성해보기
0.html
<html>
<head>
<title> 유튜브 만들기 </title>
</head>
<body>
<h3> 유튜브 만들어보기 <br> 동영상 플레이하기.</h3>
</body>
</html>
3
유튜브 같은 사이트 만들어보자.
4
HTML 작성하기
1.html
<html>
<head>
<title> 유튜브 만들기 </title>
</head>
<body>
<h3> 유튜브 만들어보기 <br> 동영상 플레이하기.</h3>
<section id="player">
<video id="media" width="600" height="400" preload controls loop poster="0.jpg">
<source src="1.mp4">
</video>
</section>
<section id="player">
<video id="media" width="600" height="400" preload controls loop poster="1.jpg">
<source src="2.mp4">
</video>
</section>
<br>
<a href="https://www.w3schools.com/"> html공부하는 사이트 w3schools.com </a>
</body>
</html>
5
여러가지 html 태그를 알아보자
6
실습 :
<html>
<head>
<title> 제목넣기: html 공부시작하기. 종료 태그에는 슬러시(/)를 써야한다. </title>
<style>
h1 {color:red;}
</style>
</head>
<body>
기초배워보기 , 본문 내용 쓰기.
<h3> Html 공부 시작했어요. 그 기능중 하나 강제 줄바꾸기는 br 입니다. 그림을 넣는 옵션은 img 입니다. 링크설정은 a href 입니다. CSS는 HTML문에서 꾸미기를 하는 언어입니다.언어이기 때문에 HTML기반으로 동작합니다.</h3>
<h3> Html5 = HTML + CSS + Java Script </h3>
<h1> 크게 쓰기 </h1>
<p> 한줄 내려쓰기 </p>
<br>
<img src="./1.jpg" width="320" height="500" alt="이미지1">
<br>
<img src="img/3.jpg" width="320" height="500" alt="폴더 이미지 3.jpg">
<h3> 유튜브 만들어보기 <br> 동영상 플레이하기.</h3>
<section id="player">
<video id="media" width="600" height="400" preload controls loop poster="0.jpg">
<source src="1.mp4">
</video>
</section>
<p>
<table border="1">
<tr> time
<th> 0th tag !! </th>
<th> 0th tag !! </th>
<th> 0th tag !! </th>
</tr>
<tr>
<th> 1th tag !! </th>
<th> 1th tag !! </th>
<th> 1th tag !! </th>
</tr>
<tr>
<th> 2th tag !! </th>
<th> 2th tag !! </th>
<th> 2th tag !! </th>
</tr>
<tr>
<th> 3th tag !! </th>
<th> 3th tag !! </th>
<th> 3th tag !! </th>
</tr>
</table>
<br>
<a href="https://www.w3schools.com/"> html5공부하는 사이트 w3schools.com </a>
<br>
<a href="http://www.dns-book.com/"> html5공부하는 사이트 dns-book.com </a>
<p>
</body>
</html>
7
시간표 만들어보자.
예상 결과 :
3.html
<html>
<head>
<title> 제목넣기: html 공부시작하기. 종료 태그에는 슬러시(/)를 써야한다. </title>
</head>
<body>
학교,학원.
</body>
<table border="1">
<thead style="background:green"
<tr> 시간표
<th> 수업 </th>
<th> 월요일 </th>
<th> 화요일 </th>
<th> 수요일 </th>
<th> 목요일 </th>
<th> 금요일 </th>
</tr>
</thead>
<tr>
<th> 1교시 </th>
<th> 국어 </th>
<th> 사회 </th>
<th> 미술 </th>
<th> 실과 </th>
<th> 수학 </th>
</tr>
<tr>
<th> 2교시 </th>
<th> 실과 </th>
<th> 과학/실험활동 </th>
<th> 수학 </th>
<th> 미술 </th>
<th> 영어 </th>
</tr>
<tr>
<th> 3교시 </th>
<th> 사회 </th>
<th> 수학 </th>
<th> 실과 </th>
<th> 미술 </th>
<th> 도덕 </th>
</tr>
<tr>
<th> 4교시 </th>
<th> 미술 </th>
<th> 실과 </th>
<th> 영어 </th>
<th> 수학 </th>
<th> 사회 </th>
</tr>
<tr>
<th> 5교시 </th>
<th> 도덕 </th>
<th> 국어 </th>
<th> 사회 </th>
<th> 미술 </th>
<th> 수학 </th>
</tr>
<tr>
<th> 6교시 </th>
<th> 사회 </th>
<th> 국어 </th>
<th> 영어 </th>
<th> 도덕 </th>
<th> 국어 </th>
</tr>
<tr>
<th> 7교시 </th>
<th> 실과 </th>
<th> 수학 </th>
<th> 영수학원 </th>
<th> 도덕 </th>
<th> 국어 </th>
</tr>
<tr>
<th> 학원 </th>
<th> 영수학원 </th>
<th> 영수학원 </th>
<th> </th>
<th> 영수학원 </th>
<th> 영수학원 </th>
</tr>
<tr>
<th> 수업 </th>
<th> </th>
<th> </th>
<th> </th>
<th> 싱크유 </th>
<th> </th>
</tr>
<tr>
<th> 과외 </th>
<th> </th>
<th> </th>
<th> </th>
<th> 영어과외 </th>
<th> </th>
</tr>
</table>
</body>
</html>
8
더 많은 html,css,java script 배우기
https://www.w3schools.com/
9
유튜브 보기
https://www.youtube.com/results?search_query=html5
