HTML(HyperText Markup Language)
하이퍼텍스트를 가장 중요한 특징으로 하는
마크업이라는 형식을 가진
컴퓨터 프로그래밍 언어
진한 글씨 strong
<strong>자신의 힘</strong><storng> - 시작태그 </stong> - 닫히는 태그
제목 (굵고 큼, 줄바꿈)
<h1>오늘의 명언</h1><h2>,<h3> 숫자 커질수록 글씨가 작아진다.
하이퍼텍스트
<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" title="전설적인 프로그래머">도널드 커누스</a><a> - 링크(anchor의 약자), target="_blank" - 새로운 탭에서 열기, href="" - 링크, title="" - 마우스 포인터 위에 미리보기 표시
<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
(<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" target="_blank" title="전설적인 프로그래머">도널드 커누스</a>)리스트
<ol> #ordered list 순서가 있는 리스트
<li>기술소개</li> #list
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<ul> #unordered list 순서가 없는 리스트
<li>최진혁</li>
<li>최유빈</li>
</ul>
<html>
<head>
<title>HTML - 수업소개</title> #탭 제목
<meta charset="utf-8"> #글씨 깨짐 현상 방지
</head>
<body>
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<h2>수업의 목적</h2>
본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
웹애플리케이션 만들기
위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다.
</body>
</html>DOCTYPE
<!DOCTYPE HTML>Document type declaration
웹사이트 만들기
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
<li><a href="1.html">기술소개</a></li>
<li><a href="2.html">기본문법</a></li>
<li><a href="3.html">하이퍼텍스트와 속성</a></li>
<li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
<h2>수업의 목적</h2>
본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
웹애플리케이션 만들기
위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다.
</body>
</html>p 태그 - 단락
<p>abcdefg</p>br 태그 - 줄바꿈
<br>imh 태그 - 이미지
<img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">alt - (alternative text) 이미지가 깨졌을 때 표시되는 속성
table 태그 - 표
<table border="2">
<tr>
<td>이름</td> <td>성별</td> <td>주소</td>
</tr>
<tr>
<td>최진혁</td> <td>남</td> <td>청주</td>
</tr>border - 테두리, tr - 행 구분
table 사용보다는 css를 활용하는것이 좋다.
form 태그
텍스트 입력
<form action="http://localhost/login.php"> # 이 링크로 이동
<p>아이디 : <input type="text" name="id" value="dafault value"></p> # input - 사용자로부터 입력 받음 ,value - 기본적으로 입력되어있는 텍스트
<p>비밀번호 : <input type="password" name="pwd"></p># password - *으로 표시
<p>주소 : <input type="text" name="address" value="default value">
</p>
<p>textarea :
<textarea clos="50" rows="10">defalut value</textarea> # 여러 줄 입력
</form>
<input type="submit"> #서버에 보내는 제출 버튼선택
<form action="http://localhost/color.php">
<select name="color"> # 콤보박스
<option vlaue="red">붉은색</option>
<option vlaue="black">검은색</option>
<option vlaue="blue">파란색</option>
</select>
</form><input type="radio" name="color" value="red"> #radio - 라디오 버튼
<input type="checkbox" name="size" value="95"> #checkbox - 다중 선택<input type="submit" value="전송"> # 버튼이름 전송으로 변경
<input type="button" value="버튼" onclick="alert('hello world')"> # JS 활용해야 사용 가능데이터 전송 - hidden
<form action="http://localhos/hidden.php">
<input type="hidden" name="hide" value="egoing">label
<label for="id_txt">text</label> # 이름표라고 생각
<input id ="id_txt" type="text" name="id" value="dafault value">
<label><input type="checkbox" name="color" value="red">붉은색</label> # 더 간단하게 작성 가능하다.method
<form action="http://localhos/hidden.php" method="get"> get - 정보가 url에 드러난다.
post - 정보가 url에 드러나지 않는다.
파일 업로드
<form action="http~~" method="post" enctype="multipart/form-data">
<input type="file">