'HTML.CSS.JavaScript'에 해당되는 글 72건

  1. 2017.04.18 1-1
  2. 2017.04.18 1-1
  3. 2017.04.18 1. HTML 소개와 기본 구조(1-1)
  4. 2017.04.18 0. 인터넷 프로그래밍을 배우는 목표 설정
  5. 2012.11.05 7. 입력한 데이터 받기
  6. 2012.11.05 6. 폼
  7. 2012.11.05 5. 프레임
  8. 2012.11.05 4. 표
  9. 2012.11.04 3. 여러 가지 HTML의 태그 (2)
  10. 2012.11.04 2. 여러 가지 HTML 태그 (1)
HTML.CSS.JavaScript/문제2017. 4. 18. 18:21

1-1

1. HTML은 어디에서 사용되는가?

문서작성

커뮤니티 첫 페이지 장식

동영상 편집

음악편집

2

  • HTML은 홈페이지, 이메일, 커뮤니티 첫 페이지 장식, 게시판 글 작성에 사용된다.


2. 다음 중 잘못 연결된 것은?

HTML 문서의 시작과 종료 <html> ~ </html>

HTML 문서의 머리 부분 <head> ~ </head>

HTML 문서의 타이틀 <headline> ~ </headline>

HTML 문서의 몸통 부분 <body> ~ </body>

3

  • <headline> 이라는 태그는 존재 하지 않는다.


3. 다음은 HTML을 이루는 기본 구조이다, 틀린 곳을 고르시오.

<html>

<title><head></head></title>

<body></body>

</html>

2

  • <title></title> 태그는 <head></head> 태그 안에 포함되어야 한다.


'HTML.CSS.JavaScript > 문제' 카테고리의 다른 글

1-3  (0) 2017.04.21
1-2  (0) 2017.04.18
Posted by 멜데스
HTML.CSS.JavaScript/핵심요약2017. 4. 18. 18:19

1-1

  1. 1. HTML은 Hyper Text Makeup Language의 약자로 홈페이지를 작성하기 위한 언어이다.
    • HTML = 하이퍼텍스트(Hyper Text) + 마크업(Mark-up)
  2. 2. HTML의 활용
    • 홈페이지, 메일을 보낼 때, 커뮤니티 첫 페이지 장식
    • 게시글 장식 등
  3. 3. HTML 기본 구조
    •    <html>
    •    <head><title></title></head>
    •        <body>
    •        </body>
    •    </html>


'HTML.CSS.JavaScript > 핵심요약' 카테고리의 다른 글

2-3  (0) 2017.04.28
2-2  (0) 2017.04.28
2-1  (0) 2017.04.28
1-3  (0) 2017.04.21
1-2  (0) 2017.04.18
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 4. 18. 18:18

1. HTML 소개와 기본 구조(1-1)

Internet(인터넷) = Interactive + Network (네트워크 간의 상호작용이라는 뜻)


www(World Wide Web)서버

SGML에서 자주 쓰이는것들을 쉽게 사용할 수 있게 만든 파생언어

HTML(Hyper Text Mark-up Language)

XML(Extensible Mark-up Language)


HTML은 어디에서 사용될까?

1. 홈페이지

Http(HyperText Transfer Protocol)

프로토콜 : 통신규약

Http : 80Port

Index.html, main.html


2. 메일을 보낼때.

E-Mail(Electronic Mail) 

SMTP      

POP

3. 커뮤니티 

4. 게시글 장식


HTML의 기본구조

<HTML>

<HEAD>

<TITLE> HTML문서의 제목(Title)이 들어갑니다.

</TITLE>

</HEAD>

<BODY>

HTML문서의 내용이 들어갑니다.

</BODY>

</HTML>


HTML의 기본태그

HTML 문서의 시작과 종료(<html> ~ </html>)

HTML 문서의 머리 부분(<head> ~ </head>)

HTML 문서의 타이틀(<title> ~ </title>)

HTML 문서의 몸통부분(<body> ~ </body>)


===================================================================================

HTML이란?

HTML : 하이퍼텍스트(Hyper Text) + 마크업(Mark-up)

하이퍼텍스트 - 하이퍼링크 설정이 가능하고 텍스트들이 서로 연결되어 있다는 의미

마크업 - 어떤 내용에 뭔가 특별히 지시하는 문장을 추가할 수 있는데 이러한 추가적인 정보를 의미

===================================================================================

마크업과 HTML이란?

메모장을 이용한 HTML 문서 작성하기

- 대소문자 구별 안함

- 개행해서 작성해도 인식못함

Test.html


'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

5. 글자와 목록 관련 태그(2-2)  (0) 2017.04.28
4. 글자와 목록 관련 태그(2-1)  (0) 2017.04.24
3. HTML 기본 태그 익히기(1-3)  (0) 2017.04.21
2. HTML 기본태그 익히기(1-2)  (0) 2017.04.18
0. 인터넷 프로그래밍을 배우는 목표 설정  (0) 2017.04.18
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 4. 18. 17:56

0. 인터넷 프로그래밍을 배우는 목표 설정

  • HTML의 특징에 대해 설명할 수 있다.
  • HTML 태그 요소에 대한 설명할 수 있고, 테이블, 프레임 등을 활용하여 실제 웹 페이지로 구성할 수 있다.
  • JavaScript 의 특징에 대해 설명할 수 있다.
  • JavaScript 의 문법과 객체 구조에 대해 설명할 수 있고, 이를 HTML에 응용할 수 있다.
  • 웹서버 구축 방법을 설명할 수 있고, ASP 페이지를 작성하여 구동할 수 있다.


'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

5. 글자와 목록 관련 태그(2-2)  (0) 2017.04.28
4. 글자와 목록 관련 태그(2-1)  (0) 2017.04.24
3. HTML 기본 태그 익히기(1-3)  (0) 2017.04.21
2. HTML 기본태그 익히기(1-2)  (0) 2017.04.18
1. HTML 소개와 기본 구조(1-1)  (0) 2017.04.18
Posted by 멜데스
HTML.CSS.JavaScript/기타2012. 11. 5. 14:59

7. 입력한 데이터 받기

입력한 데이터를 GET이나 POST로 송신하고, 서버에서 받는 방법


POST로 전달된 데이터는 키보드와 입력된 것과 똑같이 STDIN(표준 입출력)이라는 방법으로 받습니다.

GET으로 전달된 데이터는 QUERY_STRING(환경 변수)이라는 웹 서버의 OS가 갖고 있는 변수에 저장됩니다.


6. 폼에서 작성한 파일로 부터 전달받은 값을 펄(perl)의 CGI 프로그램을 사용하여 송신해보자.


#!/perl/bin/perl    =cut  Perl의 경로를 지정 (ActivePerl이 'C:\perl'의 폴더에 설치된 경우의 경로) =cut


$str = $ENV("QUERY_STRING");    #환경 변수 QUERY_STRING의 내용을 변수$str에 대입


print "Content-type: text/html\n\n";    #콘텐트의 종류 (출력 내용이 HTML 텍스트라는 것을 나타냄)

=cut

$str의 내용을 출력

=cut

print "<html>\n";

print "<title>CGI</title>\n";

print "<body>\n";

print "$str\n";

print "</body\n";

print "</html>\n";


'HTML.CSS.JavaScript > 기타' 카테고리의 다른 글

6. 폼  (0) 2012.11.05
5. 프레임  (0) 2012.11.05
4. 표  (0) 2012.11.05
3. 여러 가지 HTML의 태그 (2)  (0) 2012.11.04
2. 여러 가지 HTML 태그 (1)  (0) 2012.11.04
Posted by 멜데스
HTML.CSS.JavaScript/기타2012. 11. 5. 14:42

6. 폼

폼은 브라우저에서 데이터를 입력 선택하기 위한 부품.

폼에 입력된 정보는 서버에 전달 됩니다.


<html>

<head><title>입력폼</title>


<body>

<form action="http://localhost/cgi-bin/getname.cgi" method="GET"> <!--URL지정, 송신방법 (POST, GET)으로 지정-->

이름<input type="text", name="NM"><br> <!--폼과 부품의 종류를 지정, 송신할 값을 지정-->

<input type="submit" value="보내기"><br>

</form>

</body>

</html>




'HTML.CSS.JavaScript > 기타' 카테고리의 다른 글

7. 입력한 데이터 받기  (0) 2012.11.05
5. 프레임  (0) 2012.11.05
4. 표  (0) 2012.11.05
3. 여러 가지 HTML의 태그 (2)  (0) 2012.11.04
2. 여러 가지 HTML 태그 (1)  (0) 2012.11.04
Posted by 멜데스
HTML.CSS.JavaScript/기타2012. 11. 5. 14:25

5. 프레임

웹 브라우저 창을 분할하여 한 번에 여러 개의 페이지를 표시할 수 있는 틀을 '프레임' 이라고 한다.

프레임을 작성하려면 분할을 지정 할 부모 프레임 HTML 파일과 각 페이지를 표시할 자식 프레임 HTML 파일이 필요합니다.


<html>

<head><title>프레임</title></head>


<frameset row="20%, 80%"> <!--<frameset> 태그로 분할을 지정 (프레임을 row(가로로 1:4 분할 (세로는 cols))-->

<frame src="A.html"" name="menu"> <!--<frameset> 태그로 표시할 페이지 지정(프레임 명(name) 과 프레임에 표시할 HTML파일 지정(src))-->

<frameset cols="20%, 80%">

<frame src="B.html" name="data">

<frame src="C.html" name="mycontents">

</frameset>

<noframes> <!--<noframes> 태그와 </nofames> 태그 사시에 프레임을 처리하지 못하는 브라우저를 위한 메시지를 기술-->

<body>

이 페이지는 프레임을 사용하고 있습니다.

</body>

</noframes>


</frameset>

</html>


---------------------------------


<a href="0603.html" target="mycontents">6월 3일 (월) </a> : 프레임에 표시할 파일명을 지정하고 페이지를 표시할 프레임을 지정

'HTML.CSS.JavaScript > 기타' 카테고리의 다른 글

7. 입력한 데이터 받기  (0) 2012.11.05
6. 폼  (0) 2012.11.05
4. 표  (0) 2012.11.05
3. 여러 가지 HTML의 태그 (2)  (0) 2012.11.04
2. 여러 가지 HTML 태그 (1)  (0) 2012.11.04
Posted by 멜데스
HTML.CSS.JavaScript/기타2012. 11. 5. 14:05

4. 표

1. 표

<html>

<head>


<title>메탈표</title>


<body>

<table border="5" cellspacing="10" cellpadding="15"> <!--바깥쪽 테두리와 안쪽 테두리의 너비를 픽셀단위로 지정, 셀의 공백을 픽셀로 지정-->

<caption>메탈</caption>    <!--표의 제목 설정-->

<tr><td>&nbsp;</td>

<tr><td>헤비메탈</td><td>데스메탈</td>

<tr><td>인더스트리얼</td><td>에픽메탈</td>

</table>


</head>

</html>




------------------

colspan="2" : 2개의 셀을 가로로 병합합니다.

rowspan="2" : 2개의 셀을 세로로 병합합니다.

&nbsp (non-breaking-space) : 공란 표시

'HTML.CSS.JavaScript > 기타' 카테고리의 다른 글

6. 폼  (0) 2012.11.05
5. 프레임  (0) 2012.11.05
3. 여러 가지 HTML의 태그 (2)  (0) 2012.11.04
2. 여러 가지 HTML 태그 (1)  (0) 2012.11.04
1. HTML의 기본  (0) 2012.11.04
Posted by 멜데스
HTML.CSS.JavaScript/기타2012. 11. 4. 18:49

3. 여러 가지 HTML의 태그 (2)

1. 목록

<html>


<head>

<title>멜데스</title>

</head>


<body>

<h1>멜로딕 데스메탈</h1>

<h2>Children Of Bodom</h2>

<ol>

<li>Lake Bodom</li>

<li>Downfall</li>

<li>Everytime I Die </li>

<li>Hate crew Deathroll</li>

<li>Are you dead yet?</li>

<li>Banned From Heaven </li>

<li>Roundtrip To Hell And Back</li>

</ol>

</body>

</html>


*<ul>을 쓰면 숫자 대신 점(·)이 찍힌다.


2. 특수 기호의 사용

태그 표기에 사용되는 기호들을 출력하려면?

& --> &amp;    ~와~(ampersand)

< --> &lt;        ~보다 작다(less-than)

> --> &gt;        ~보다 크다(greater-than)

"        &quo;    큰따옴표(double quotation)


'HTML.CSS.JavaScript > 기타' 카테고리의 다른 글

5. 프레임  (0) 2012.11.05
4. 표  (0) 2012.11.05
2. 여러 가지 HTML 태그 (1)  (0) 2012.11.04
1. HTML의 기본  (0) 2012.11.04
1. 기초작성법  (0) 2012.10.02
Posted by 멜데스
HTML.CSS.JavaScript/기타2012. 11. 4. 18:39

2. 여러 가지 HTML 태그 (1)

1. 본문의 목차의 크기 

ex)


<html>


<head>

<title>멜데스</title>

</head>


<body>

<h1>멜로딕 데스메탈</h1>

<h2>Children Of Bodom</h2>

<h3>Relentless, Reckless Forever</h3>

<h4>Roundtrip to hell and back</h4>

</body>

</html>


2. 링크


<html>


<head>

<title>멜데스</title>

</head>


<body>

<h1>멜로딕 데스메탈</h1>

<h2>Children Of Bodom</h2>

<h3>Relentless, Reckless Forever</h3>

<h4>Roundtrip to hell and back</h4>

<a href="http://www.youtube.com/watch?v=ldiVtE0Vnu0">Roundtrip to hell and back</a>

</body>

</html>


3. 강조

<html>


<head>

<title>멜데스</title>

</head>


<body>

<h1>멜로딕 데스메탈</h1>

<h2>Children Of Bodom</h2>

<h3><em>Relentless, Reckless Forever</em></h3>

<h4><strong>Roundtrip to hell and back</strong></h4>

<a href="http://www.youtube.com/watch?v=ldiVtE0Vnu0">Roundtrip to hell and back</a>

</body>

</html>


4. 그 외의 기능

<hr> : 가로 선을 표시

<p> ~ </P> : 단락을 설정

<b> ~ </b> : 태그로 둘러싸인 부분을 굵은 글꼴로 표시

<u> ~ </u> : 태그로 둘러싸인 부분에 밑줄을 긋기

<br> : 줄을 바꿈

<img src="그림파일명"> : 지정된 그림 파일 표시

<pre> ~ </pre> : 브라우저에 따라 모양을 바꾸지 않고 입력한 대로 표시


'HTML.CSS.JavaScript > 기타' 카테고리의 다른 글

5. 프레임  (0) 2012.11.05
4. 표  (0) 2012.11.05
3. 여러 가지 HTML의 태그 (2)  (0) 2012.11.04
1. HTML의 기본  (0) 2012.11.04
1. 기초작성법  (0) 2012.10.02
Posted by 멜데스

티스토리툴바