혜랑's STORY

[WEB 2주차 실습 : HTML] 본문

2020 SISS 21기 활동/여름방학 WEB

[WEB 2주차 실습 : HTML]

hyerang0125 2020. 7. 14. 22:49

1. 간단히 자기 취미를 속하는 페이지를 만들고 관련된 유튜브 영상 삽입하기

#실행결과

Chapter03-(1) 실행결과
Chapter03-(1) 실행결과

#코드

<!-- Chapter03-(1) main page -->
<HTML>
<HEAD>
    <TITLE>Chapter03-(1)</TITLE>
</HEAD>
<BODY>
    <h2>나의 취미 소개</h2>
    <p>
        나의 취미는 드라마를 보는 것입니다.<br />
        요즘 가장 흥미롭게 보고있는 드라마는 '사이코지만 괜찮아'입니다.<br />
        <br />
        [소개]<br />
        버거운 삶의 무게로 사랑을 거부하는 정신 병동 보호사 강태와 태생적 결함으로
        사람을 모르는 동화작가 문영이 서로의 상처를 보듬고 치유해가는 한 편의
        판타지 동화같은 사랑에 관한 조금 이상한 로맨틱 코미디
    </p>

    <h2>드라마에서 소개된 동화</h2>
    <p>
        <ul>
            <li><a href="Chapter03-(1).html">[동화zip] op 죽음의 그림자를 끌고 다니는 괴물</a></li>
            <li><a href="Chapter03-(1.1).html">[동화zip] 01 악몽을 먹고 자란 소년</a></li>
            <li><a href="Chapter03-(1.2).html">[동화zip] 02 좀비아이</a></li>
            <li><a href="Chapter03-(1.3).html">[동화zip] 03 푸른 수염의 비밀</a></li>
            <li><a href="Chapter03-(1.4).html">[동화zip] 04 봄날의 개</a></li>
        </ul>
    </p>

    <hr color="black" , size="1" />

    <h2>[동화zip] op 죽음의 그림자를 끌고 다니는 괴물</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/PQx_SDFd3Ok"></iframe>
</BODY>
</HTML>

<!-- Chapter03-(1.1) sub page -->
<HTML>
<HEAD>
    <TITLE>Chapter03-(1)</TITLE>
</HEAD>
<BODY>
    <h2>나의 취미 소개</h2>
    <p>
        나의 취미는 드라마를 보는 것입니다.<br />
        요즘 가장 흥미롭게 보고있는 드라마는 '사이코지만 괜찮아'입니다.<br />
        <br />
        [소개]<br />
        버거운 삶의 무게로 사랑을 거부하는 정신 병동 보호사 강태와 태생적 결함으로
        사람을 모르는 동화작가 문영이 서로의 상처를 보듬고 치유해가는 한 편의
        판타지 동화같은 사랑에 관한 조금 이상한 로맨틱 코미디
    </p>

    <h2>드라마에서 소개된 동화</h2>
    <p>
        <ul>
            <li><a href="Chapter03-(1).html">[동화zip] op 죽음의 그림자를 끌고 다니는 괴물</a></li>
            <li><a href="Chapter03-(1.1).html">[동화zip] 01 악몽을 먹고 자란 소년</a></li>
            <li><a href="Chapter03-(1.2).html">[동화zip] 02 좀비아이</a></li>
            <li><a href="Chapter03-(1.3).html">[동화zip] 03 푸른 수염의 비밀</a></li>
            <li><a href="Chapter03-(1.4).html">[동화zip] 04 봄날의 개</a></li>
        </ul>
    </p>

    <hr color="black" , size="1" />

    <h2>[동화zip] 01 악몽을 먹고 자란 소년</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/CoEVrV7Zh8I"></iframe>
</BODY>
</HTML>

<!-- Chapter03-(1.2) sub page-->
<HTML>
<HEAD>
    <TITLE>Chapter03-(1)</TITLE>
</HEAD>
<BODY>
    <h2>나의 취미 소개</h2>
    <p>
        나의 취미는 드라마를 보는 것입니다.<br />
        요즘 가장 흥미롭게 보고있는 드라마는 '사이코지만 괜찮아'입니다.<br />
        <br />
        [소개]<br />
        버거운 삶의 무게로 사랑을 거부하는 정신 병동 보호사 강태와 태생적 결함으로
        사람을 모르는 동화작가 문영이 서로의 상처를 보듬고 치유해가는 한 편의
        판타지 동화같은 사랑에 관한 조금 이상한 로맨틱 코미디
    </p>

    <h2>드라마에서 소개된 동화</h2>
    <p>
        <ul>
            <li><a href="Chapter03-(1).html">[동화zip] op 죽음의 그림자를 끌고 다니는 괴물</a></li>
            <li><a href="Chapter03-(1.1).html">[동화zip] 01 악몽을 먹고 자란 소년</a></li>
            <li><a href="Chapter03-(1.2).html">[동화zip] 02 좀비아이</a></li>
            <li><a href="Chapter03-(1.3).html">[동화zip] 03 푸른 수염의 비밀</a></li>
            <li><a href="Chapter03-(1.4).html">[동화zip] 04 봄날의 개</a></li>
        </ul>
    </p>

    <hr color="black" , size="1" />

    <h2>[동화zip] 02 좀비아이</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/tvzl7ElMQcc"></iframe>
</BODY>
</HTML>

<!-- Chapter03-(1.3) sub page -->
<HTML>
<HEAD>
    <TITLE>Chapter03-(1)</TITLE>
</HEAD>
<BODY>
    <h2>나의 취미 소개</h2>
    <p>
        나의 취미는 드라마를 보는 것입니다.<br />
        요즘 가장 흥미롭게 보고있는 드라마는 '사이코지만 괜찮아'입니다.<br />
        <br />
        [소개]<br />
        버거운 삶의 무게로 사랑을 거부하는 정신 병동 보호사 강태와 태생적 결함으로
        사람을 모르는 동화작가 문영이 서로의 상처를 보듬고 치유해가는 한 편의
        판타지 동화같은 사랑에 관한 조금 이상한 로맨틱 코미디
    </p>

    <h2>드라마에서 소개된 동화</h2>
    <p>
        <ul>
            <li><a href="Chapter03-(1).html">[동화zip] op 죽음의 그림자를 끌고 다니는 괴물</a></li>
            <li><a href="Chapter03-(1.1).html">[동화zip] 01 악몽을 먹고 자란 소년</a></li>
            <li><a href="Chapter03-(1.2).html">[동화zip] 02 좀비아이</a></li>
            <li><a href="Chapter03-(1.3).html">[동화zip] 03 푸른 수염의 비밀</a></li>
            <li><a href="Chapter03-(1.4).html">[동화zip] 04 봄날의 개</a></li>
        </ul>
    </p>

    <hr color="black" , size="1" />

    <h2>[동화zip] 03 푸른 수염의 비밀</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/y9-hoOJrsiE"></iframe>
</BODY>
</HTML>

<!-- Chapter03-(1.4) sub page -->
<HTML>
<HEAD>
    <TITLE>Chapter03-(1)</TITLE>
</HEAD>
<BODY>
    <h2>나의 취미 소개</h2>
    <p>
        나의 취미는 드라마를 보는 것입니다.<br />
        요즘 가장 흥미롭게 보고있는 드라마는 '사이코지만 괜찮아'입니다.<br />
        <br />
        [소개]<br />
        버거운 삶의 무게로 사랑을 거부하는 정신 병동 보호사 강태와 태생적 결함으로
        사람을 모르는 동화작가 문영이 서로의 상처를 보듬고 치유해가는 한 편의
        판타지 동화같은 사랑에 관한 조금 이상한 로맨틱 코미디
    </p>

    <h2>드라마에서 소개된 동화</h2>
    <p>
        <ul>
            <li><a href="Chapter03-(1).html">[동화zip] op 죽음의 그림자를 끌고 다니는 괴물</a></li>
            <li><a href="Chapter03-(1.1).html">[동화zip] 01 악몽을 먹고 자란 소년</a></li>
            <li><a href="Chapter03-(1.2).html">[동화zip] 02 좀비아이</a></li>
            <li><a href="Chapter03-(1.3).html">[동화zip] 03 푸른 수염의 비밀</a></li>
            <li><a href="Chapter03-(1.4).html">[동화zip] 04 봄날의 개</a></li>
        </ul>
    </p>

    <hr color="black" , size="1" />

    <h2>[동화zip] 04 봄날의 개</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pfvij_g8WJI"></iframe>
</BODY>
</HTML>

※ 보안상의 문제로 유튜브에서 embed 형식으로는 동영상을 열수 없다고 하여 동영상 하단에 있는 >퍼가기<를 통해 iframe 코드를 가져와 사용하였습니다. (iframe을 embed 태그로 대체하고 싶다면 복사한 코드에서 iframe 대신 embed로 변환하여 사용해도 된다고 합니다.)

2. 문서 내에서 링크하기

# 실행결과

Chapter03-(2) 실행결과
Chapter03-(2) 실행결과

#코드

<!-- index.html / main page -->

<HTML>
<HEAD>
    <TITLE>Chapter03-(2)</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="javascript.html">JavaScript</a></li>
    </ol>

    <h2>WEB</h2>
    <p>
         문자-영상-음향-비디오정보"를 한꺼번에 제공하는 멀티미디어 서비스를 말한다. 
        인터넷을 통해 웹에 들어가 웹정보를 검색케 해주는 프로그램을 "웹 브라우저(Web Browser)"라고 한다. 
        웹 서비스를 제공하는 기관이나 장소를 "웹 사이트(Web Site)", 웹 서비스를 제공하는 호스트컴퓨터를 "웹 서버(Web Server)"라고 한다. 
        "홈페이지"는 각각의 웹 사이트에 들어갈 때 처음 나타나는 초기 화면을 가리킨다.
        [네이버 지식백과]
    </p>


</BODY>
</HTML>

<!-- html.html / sub page -->
<HTML>
<HEAD>
    <TITLE>Chapter03-(2)</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="javascript.html">JavaScript</a></li>
    </ol>

    <h2>WEB</h2>
    <p>
         문자-영상-음향-비디오정보"를 한꺼번에 제공하는 멀티미디어 서비스를 말한다. 
        인터넷을 통해 웹에 들어가 웹정보를 검색케 해주는 프로그램을 "웹 브라우저(Web Browser)"라고 한다. 
        웹 서비스를 제공하는 기관이나 장소를 "웹 사이트(Web Site)", 웹 서비스를 제공하는 호스트컴퓨터를 "웹 서버(Web Server)"라고 한다. 
        "홈페이지"는 각각의 웹 사이트에 들어갈 때 처음 나타나는 초기 화면을 가리킨다.
        [네이버 지식백과]
    </p>


</BODY>
</HTML>

<!-- css.html / sub page -->
<HTML>
<HEAD>
    <TITLE>Chapter03-(2)</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="javascript.html">JavaScript</a></li>
    </ol>

    <h2>CSS</h2>
    <p>
        CSS(Cascading Style Sheet) : 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트이다.
        문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다
        [네이버 지식백과]
    </p>


</BODY>
</HTML>

<!-- javascript.html / sub page -->
<HTML>
<HEAD>
    <TITLE>Chapter03-(2)</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="javascript.html">JavaScript</a></li>
    </ol>

    <h2>JavaScript</h2>
    <p>
        HTML 문서의 정적이고 단조로운 한계를 극복하기 위해 넷스케이프(Netscape)사가 만든 것으로 브라우저 자체에 내장된 해석기능을 이용한 클라이언트(client) 기반의 스크립트 언어이다.
        빠르기 때문에 웹문서를 동적으로 꾸밀 때 가장 널리 쓰인다.
        [네이버 지식백과]
    </p>


</BODY>
</HTML>

3. 오디오 / 비디오 삽입하기

#실행결과

Chapter03-(3) 실행 결과

#코드

<!-- chapter03-(3).html -->
<HTML>
<HEAD>
<TITLE>Chapter03-(3)</TITLE>
</HEAD>
<BODY>
    <audio controls autoplay loop src="catSound.mp3"></audio>
    <video controls src="Cat - 3740.mp4" width="560" height="315"></video>

</BODY>
</HTML>

※ 지금까지 계속 네이버 웨일을 사용하여 실행 결과를 확인하였지만, 이번 Chapter03-(3)을 실행할 때 브라우저의 문제로 오디오가 자동으로 재생되지 않아 예외적으로 인터넷 익스플로어를 사용하여 실행 결과를 확인하였다.

4. 상단 이미지 메뉴를 선택하면 아래쪽 프레임에 해당 이미지 보여주기

#실행결과

Chapter03-(4) 실행 결과

#코드

<!-- Chapter03-(4).html -->
<HTML>
<HEAD>
<TITLE>Chapter03-(4)</TITLE>
</HEAD>
<BODY>
    <tr>
        <td>
            <a href="https://cdn.pixabay.com/photo/2020/06/30/22/34/dog-5357794_960_720.jpg" target="dog">
                <figcation>
                    <img src="dog1.jpg" alt="강아지 사진1" width="300" />
                </figcation>
            </a>
            <a href="https://cdn.pixabay.com/photo/2014/08/21/14/51/pet-423398_960_720.jpg" target="dog">
                <figcation>
                    <img src="dog2.jpg" alt="강아지 사진2" width="300" />
                </figcation>
            </a>
            <a href="https://cdn.pixabay.com/photo/2016/10/31/14/55/rottweiler-1785760_960_720.jpg" target="dog">
                <figcation>
                    <img src="dog3.jpg" alt="강아지 사진1" width="300" />
                </figcation>
            </a>
        </td>
    </tr>
    <br />
    <iframe name="dog" width="960" height="645"></iframe>

</BODY>
</HTML>

5. 다양한 입력폼 작성하기 (이메일 주소 / 비밀번호 받기)

#실행 결과

Chapter06-(1) 실행결과

#코드

<!-- Chapter06-(1).html -->
<HTML>
<HEAD>
<TITLE>Chapter06-(1)</TITLE>
</HEAD>
<BODY>
    <h2>회원가입</h2>
    <form>
        이메일 : <input type="text" /><br />
        비밀번호 : <input type="password" /><br />
        <input type="submit" value="확인" />
        <input type="reset" value="취소" />
    </form>

</BODY>
</HTML>

6. 선택항목 추가하기

#실행결과

Chapter06-(2) 실행결과

#코드

<!-- Chapter06-(2).html -->
<HTML>
<HEAD>
<TITLE>Chapter06-(1)</TITLE>
</HEAD>
<BODY>
    <form>
        <h2>수강과목조사</h2>
        이름 : <input type="text" /><br />
        학과 : <input type="text" /><br />
        학년 : <select size="1">
                    <option>1학년</option>
                    <option>2학년</option>
                    <option>3학년</option>
                    <option>4학년</option>
                </select>
        <br /><br />
        <input type="submit" value="확인" />
        <input type="reset" value="취소" />
    </form>


</BODY>
</HTML>

7. 설문조사 폼 양식 작성하기

#실행결과

Chapter06-(3) 실행결과

#코드

<!-- Chapter06-(3).html -->
<HTML>
<HEAD>
<TITLE>Chapter06-(3)</TITLE>
</HEAD>
<BODY>
    <h2>설문조사</h2>
    <form>
        <fieldset>
            <legend>기본정보</legend>
            이름 : <input type="text" /><br />
            나이 : <input type="number" /><br />
            성별 : <input type="radio" name="sex"/>남성
                    <input type="radio" name="sex"/>여성
        </fieldset>
        <fieldset>
            <legend>관심분야(1개 이상)</legend>
            <input type="checkbox" />디지털 콘텐츠
            <input type="checkbox" />웹프로그래밍
            <input type="checkbox" />데이터베이스
            <input type="checkbox" />기계학습
        </fieldset>
        <fieldset>
            <legend>다음 문항에 대해 5점 척도로 답하세요.</legend>
            본 세미나의 주제는 만족스러운가? 1<input type="range" min="1" max="5" />5<br />
            본 세미나의 초청강사는 만족스러운가? 1<input type="range" min="1" max="5" />5<br />
            본 세미나의 강의 시간은 적당한가? 1<input type="range" min="1" max="5" />5
        </fieldset>
        기타 건의사항<br />
        <textarea cols="100" rows="5">전달할 내용을 적으세요.</textarea>
    </form>


</BODY>
</HTML>

8. 레스토랑 예약하기

#실행결과

Chapter06-(4) 실행결과

#코드

<!-- chapter06-(4).html -->
<HTML>
<HEAD>
<TITLE>예약하기</TITLE>
</HEAD>
<BODY>
    <h1>레스토랑 예약하기</h1>
    <form>
        <fieldset>
            <legend>예약자 정보</legend>
            예약자 : <input type="text" /><br />
            연락처 : <input type="tel" placeholder="000-0000-0000" /><br />
            예약인원 :
            <select>
                <option>2명</option>
                <option>3명</option>
                <option>4명</option>
                <option>5명</option>
            </select>
        </fieldset><br />

        <fieldset>
            <legend>예약 시간 선택</legend>
            <input type="date" />
            <input type="time" />
        </fieldset><br />

        <fieldset>
            <legend>메뉴 선택</legend>
            <input type="radio" name="menu" />코스A
            <input type="radio" name="menu" />코스B
            <input type="radio" name="menu" />코스C
            <input type="radio" name="menu" />코스D
            <br />

            요청사항 :<br />
            <textarea name="comment" cols="100" rows="5"></textarea>
        </fieldset><br />

        <input type="submit" value="확인" />
        <input type="reset" value="취소" />
    </form>
 

</BODY>
</HTML>

 

저작자표시

'2020 SISS 21기 활동 > 여름방학 WEB' 카테고리의 다른 글

[WEB 3주차 실습 : CSS]  (0) 2020.07.16
[WEB 3주차 공부 : CSS]  (0) 2020.07.16
[WEB 2주차 공부 : HTML]  (0) 2020.07.14
[WEB 1주차 실습: HTML]  (0) 2020.07.07
[WEB 1주차 공부 : HTML]  (0) 2020.07.07
'2020 SISS 21기 활동/여름방학 WEB' Related Articles more