혜랑's STORY

[WEB 1주차 공부 : HTML] 본문

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

[WEB 1주차 공부 : HTML]

hyerang0125 2020. 7. 7. 12:48

- 시작 준비물 : 웹 브라우저 + 코드를 작성할 프로그램(에디터 ; 메모장 등)

- 문법 태그(Tag) : 기본적으로 짝지어 다니고, 뒤에 태그에 슬래쉬( / )를 붙인다.

1. <strong> </strong> : 글씨 진하게 표시하기

2. <u> </u> : 글자 밑에 밑줄 긋기

3. <h_> </h_> : HTML 제목 ( '_' 에는 1부터 6까지의 수가 들어가며, 숫자가 작을수록 글자 크기가 크다.)

4. <br> : 줄 바꾸기

5. <p> </p> : 단락 나누기

6. <parent>

             <child>

             </child>

  </parent>

: 태그가 태그를 포함하는 경우가 생기는데 이때, 포함하는 태그를 부모태그, 포함되는 태그를 자식태그라고 한다.

eg> 리스트의 예시와 코드

리스트 예시

<HTML>
    <BODY>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>

        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>

    </BODY>
</HTML>

+) <ol> </ol> : ordered list, <ul> </ul> : unorded list (둘 다 목록에 관련된 부모 태그이다.)

7. <title> </title> : 웹 페이지의 제목을 사용자에게 명시적으로 보여줄 수 있다. (검색엔진이 검색할 때 사용하기도 함)

8. <meta charset="utf-8"> : utf-8로 문서를 읽는다. (한글이 깨지지 않도록 하기 위함)

9. <body> </body> : 본문(내용)을 묶음

10. <head> </head> : 본문을 설명하는 것들의 묶음

11. <html> </html> : 헤드 태그와 바디 태그를 묶음

12. <!doctype html> : 이 문서는 html형식이다라는 것을 알려주는 태그

13. <a href="파일 이름"> </a> : 링크를 설정하는 태그

- 속성(Attribute) : 태그의 동작을 제어하기 위해 '여는 태그'안에 사용되는 특수 용어로 요소의 유형의 기본 기능을 수정하거나 기능하지 못하는 특정한 요소 유형에 기능을 제공한다.

eg> 링크 실습

index.html 페이지

<HTML>
<HEAD>
    <TITLE>WEB1 - Welcome</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>

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


</BODY>
</HTML>

1.html 페이지

<HTML>
<HEAD>
    <TITLE>WEB1 - Welcome</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>

    <h2>HTML</h2>
    <p>
        HTML(Hyper Text Markup Language)은 가장 단순한 형태의 웹 언어이다.
        웹 서버에 HTML 문서를 저장하고 있다가 클라이언트가 특정 HTML 페이지를 요청하면 해당 HTML 문서를 클라이언트에 전송한다.
        그러면 클라이언트는 이 웹페이지를 해석하여 웹 브라우저에 표현해 주는데 이런 웹 페이지를 정적인(static) 웹 페이지라고 한다.
        [네이버 지식백과]
    </p>


</BODY>
</HTML>

2. html 페이지

<HTML>
<HEAD>
    <TITLE>WEB1 - Welcome</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>

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


</BODY>
</HTML>

3.html 페이지

<HTML>
<HEAD>
    <TITLE>WEB1 - Welcome</TITLE>
</HEAD>
<BODY>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>

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


</BODY>
</HTML>

 

<공부를 하며...>

  생활코딩 유튜브 (https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb)를 통하여 html의 기초들을 배워보았다. 다른 언어들과 다르게 기본적인 문법만 알고 있다면 바로 코딩할 수 있고 그 결과가 바로 보이다 보니 재미있게 배울 수 있었다. 그리고 HTML에 대하여 쉽고 여러 예시를 들어 알려주기 때문에 비전공자 또한 쉽게 배울 수 있을 것 같았다. 코딩이 정규과목으로 채택이 되었으니 많은 사람들이 흥미를 가지고 실습할 수 있는 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 2주차 공부 : HTML]  (0) 2020.07.14
[WEB 1주차 실습: HTML]  (0) 2020.07.07
'2020 SISS 21기 활동/여름방학 WEB' Related Articles more