brunch

You can make anything
by writing

- C.S.Lewis -

by 클라우드 엔지니어 Nov 11. 2018

29.(입문서) HTML5 시작

모바일 홈페이지 혼자 만들자

< 서비스를 만드는 프로그래밍 언어  HTML >


<1>  툴 다운로드 하기

<2>  HTML 실습해보자





<1>  툴 다운로드 하기


1) 텍스트 에디터

HTML을 작성하기 위한 프로그램 https://notepad-plus-plus.org//


2) 브라우져

HTML을  테스트하기 위한 구글 크롬 https://www.google.com/intl/ko_ALL/chrome/

PC에 맞게 32비트 or  64비트를 다운 받는다




<2>  HTML 실습해보자

  

1. HTML 시작하기


<!DOCTYPE html>

<html>

<head>

<title> </title>

</head>

<body>

<H1>   html5  !!!  </H1>

</body>

</html>



결과 : 


nano 에디터 사용하기

nano  index.html 



2.  타이틀 넣기와  글씨 크기 변경


<!DOCTYPE html>

<html>

<head>

<title> HTML5 + ssss </title>

</head>

<body>

<H1> HELLO WORLD !! HTML5 ! </H1>

<H2> HELLO WORLD !! HTML5 ! </H2>

<H3> HELLO WORLD !! HTML5 ! </H3>

<H4> HELLO WORLD !! HTML5 ! </H4>


결과 : 



3. 테그 알아보기


br과 p 테스트  <p>

링크 테스트 <p>

ol 과 ul 테스트 <p>  <br> <p>


링크 <p>

<a href="http://serverchk.com"> www.serverchk.com  바로가기 </a><br> <p>

링크 <br>

<a href="http://it.serverchk.com"> IT무료 교육 it.serverchk.com 바로 가기  </a><br>

<p>


<h1> ol test </h1>

<ol>

<li> test ol </li>

<li> test ol </li>

<li> test ol </li>

</ol>



<h1> ul test </h1>

<ul>

<li> test ul </li>

<li> test ul </li>

<li> test ul </li>

<li> test ul </li>

</ul>


<hr / >


결과 : 


4. 표만들기


<table border="1">


<tr> 1

<th> 1th tag !! </th>

<th> 1th tag !! </th>

<th> 1th tag !! </th>

</tr>


<tr> 2

<th> 2th tag !! </th>

<th> 2th tag !! </th>

<th> 2th tag !! </th>

</tr>


<tr> 3

<th> 3th tag !! </th>

<th> 3th tag !! </th>

<th> 3th tag !! </th>

</tr>


</table>


결과 : 



5. 그림 불러오기, 음악 불러오기


그림 불러오기  <p>


<body>

<img src="game1.jpg" alt="111" width="300">

<img src="null111.jpg" alt=" NULL !!! not exist !!" width="300" >

<p>

<br>

<p>



음악 mp3 

<p>

<audio src="1.mp3" controls autoplay="autoplay"> </audio>

</body>

</html>


동영상 불러오기

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

</video>


결과 : 



6. 옵션 버튼과 리스트 버튼 설정하기



<body>

<select>

<option> 111 </option>

<option> 222 </option>

<option> 333 </option>

<option> 444 </option>

</select>

</body>



<body>

<select multiple="multiple">

<option> 111 </option>

<option> 222 </option>

<option> 333 </option>

<option> 444 </option>

</select>

</body>


결과 : 



참고해서 공부할만한 사이트  https://www.w3schools.com/


감사합니다.


매거진의 이전글 28. 리눅스 마스터-모바일 홈페이지 만들기

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
;