HTML 페이지 작성법

PDF 다운로드
PDF 다운로드

HTML (HyperText Markup Language)을 이용하면 웹 페이지들을 개발할 수 있다. 간단하고 유연한 프로그래밍 언어를 만들기 위해 만들어진 언어이다. 인터넷에서 찾을 수 있는 모든 페이지는 다 이 언어를 이용해서 만들었다고 해도 과언이 아니다. HTML을 배우는 것은 쉽지만, 여러 깊은 내용들이 있어서 숙련될 때까지는 시간이 걸린다. 페이지에 색을 추가한다든지 해서 좀 더 예쁘게 만들고 싶다면  CSS를 배워야 한다.  

방법 1
방법 1 의 4:

문서 설정하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    메모장을 사용하면 쉽게 작성할 수 있다. 그 외 기타 텍스트 편집 프로그램을 이용하면 HTML을 편집할 수 있지만, 오히려 복잡한 프로그램을 사용하면 HTML 편집이 어려울 수 있다. [1]
    • TextEdit은 별로 추천하지 않는다. HTML로 인식되지 않는 형식으로 파일을 자주 저장하기 때문이다.
    • 인터넷에 있는 HTML 편집기를 사용해도 된다. HTML 편집 전문 프로그램은 초보자에게 추천하지 않는다. [2]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    파일 → 다른 이름으로 저장 을 선택한다. 형식을 "웹 페이지"로 확장자를 ".html" 또는 ".htm"으로 변경하자. 찾기 쉬운 곳에 저장하면 된다.
    • 위의 3가지 옵션에는 차이가 없다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    파일을 더블 클릭하면, 자동으로 브라우저에서 열릴 것이다. 또는 인터넷 익스플로러나 파이어폭스같은 브라우저를 연 다음에 파일 → 열기 를 클릭한 후에 파일을 찾아도 된다.
    • 이 파일은 서버에 있는 것이 아니기 때문에 자신의 컴퓨터로만 볼 수 있다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <strong>Hello</strong> 을 빈 문서에 입력하자. 저장한다. 파일을 새로 고침한다. 그러면 "Hello"가 화면에 뜰 것이다. 새로운 HTML을 시험해 보고 싶으면 이렇게 저장한 후에, 새로고침을 눌러 주면 된다.
    • "<strong>", "</strong>''라는 글자가 화면에 그대로 나타난다면, 파일을 HTML 형식으로 읽는데 실패한 것이다. 다른 텍스트 편집기나 브라우저를 사용해 보자.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 명령어들은 태그를 이용해서 웹 브라우저에게 어떻게 웹 페이지를 해석할지 전달한다. 태그들은 언제나 <like these>처럼 각 괄호 안에 내용이 적힌다. 그리고 화면에 모습을 드러내지 않는다. 벌써 위에서 하나 사용해 보았다.
    • <strong>을 시작 태그 또는 여는 태그라고 부른다. 이 태그 다음에 나오는 내용은 강조된 텍스트라고 하며 주로 굵게 표시된다.
    • </strong> 를 마침 태그 또는 닫는 태그라고 부른다. 이 태그는 < 다음에 나오는 /로 알 수 있다. 이 태그는 strong 태그 내용은 여기서 끝이 난다는 뜻이다. 대다수의 태그는 마침 태그가 필요하다. 꼭 넣어 주도록 하자.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 문서에 있는 모든 내용을 지우자. 그리고 다음 내용을 추가해서 시작해 보자. 맨 앞에 있는 점은 무시하고 모든 텍스트를 그대로 옮기자. 이 문서를 작성하면 어떤 HTML 버전을 사용하는지 알려 주며, 모든 HTML 코드는 <html>, </html> 태그들 사이에 들어가야 한다. [3]
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • </html>
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 문서는 두 부분으로 나뉜다. "head" 부분에는 페이지 제목같은 특별한 정보가 들어간다. "body" 부분에는 페이지의 주요 정보가 들어간다. 이 두 태그를 문서에 추가해 주자. 마침 태그를 빠뜨리지 말자. 새로 추가된 코드는 굵게 표시했다.
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • </head>
    • <body>
    • </body>
    • </html>
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    head 부분에 들어가는 대부분의 코드는 초보자가 몰라도 되는 내용이다. title 태그의 경우에는 사용하기 쉽기도 하고, 브라우저 탭에 제목이 표시되므로 알아 두어야 한다. 페이지 제목을 추가해 보자. 새로 추가된 코드는 굵게 표시했다.
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>My first HTML page.</title>
    • </head>
    • <body>
    • </body>
    • </html>
    광고
방법 2
방법 2 의 4:

형식 태그

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-9-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-9-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    여기부터는 body 태그 안에만 코드를 작성할 것이다. 위에서 작성한 태그들은 그 위치에 계속 있다. 하지만, 지면을 절약하기 위해서 그 부분은 표시하지 않을 것이다. 원하는 내용을 <body>, </body> 태그 사이에 넣어 보자.
    • <body>
    • wikiHow글을 따라서 작성해 본 웹 페이지.
    • </body>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-10-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-10-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    글의 내용을 제목 태그들을 이용해서 정리해 주자. 이 부분은 웹 브라우저에서 큰 글씨로 강조해 준다. 이 부분은 또한 검색 엔진이나 다른 도구들에서 페이지의 내용이 무엇이며, 어떻게 정리되는지 알려 준다. <h1> </h1>가 제일 큰 글자이며, <h6> </h6>가 제일 작은 글자이다. 실험해 보자.
    • <body>
    • <h1>새로운 웹페이지.</h1>
    • wikiHow글을 따라서 작성해 본 웹 페이지
    • <h3>오늘의 목표</h3>
    • <h5>끝난 일들</h5>
    • 제목 태그 사용법 배우기
    • <h5>더 해야 할 것들</h5>
    • 형식 태그 공부하기
    • </body>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-11-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-11-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    "strong" 태그 외에도 텍스트를 꾸미는데 사용할 수 있는 방법은 많다. 아래 예들을 보면서 한 번 여러 가지로 실험을 해 보자. 마침 태그를 붙이는 것을 잊지 말자.
    • <strong> 중요한 텍스트. 굵게 표시된다. </strong>
    • <em> 강조된 텍스트. 대개 기울임으로 표시된다. </em>
    • <small> 조금 작은 크기의 텍스트. 제목에 쓰이면, 알아서 크기가 조절된다. [4] </small>
    • <del> 취소선이 그어진 텍스트 </del>
    • <ins> 나중에 추가된 텍스트, 밑줄이 그어져 있다. </ins>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-12-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-12-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    엔터 키를 입력한다고 해서 줄이 바뀌지 않는다는 사실을 알게 되었을 것이다. 아래 태그들을 배워 놓으면, 문단, 줄바꿈을 하는데 도움을 받을 수 있을 것이다.  
    • <p> paragraph(문단)에서 p를 따 왔다. 이 태그들 사이에 있는 태그를 한 문단으로 분류한다. 그리고 위 아래 문단과 분리해 준다. </p>
    • <br> 줄바꿈 태그. 이 태그에는 마침 태그가 없다. 이 태그는 내용을 바꾸지 않는다. 시를 쓰거나, 주소를 표시할 때 사용하고, 문단을 나눌 때 쓰지 말자. [5]
    • <pre> 텍스트를 정확하게 표시해야 할 때 사용한다. 이 태그 안에 있는 글은 고정폭 글꼴로 표시된다. (각 글자가 같은 너비를 갖는다는 뜻이다. 한국어의 경우에는 차이가 별로 없지만, 영어의 경우에는 a와 i처럼 너비가 다른 경우가 흔하다.) 또한 줄바꿈 역시 엔터를 입력하면 정확하게 작동한다. [6] </pre>
    • <blockquote> 뭔가를 인용할 때 사용하면 되는 태그이다. </blockquote> 출처를 표시할 때에는 <cite> 태그 </cite> 를 쓰면 된다.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-13-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-13-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    주석 태그는 웹 페이지에 나타나지 않는다. HTML 문서에 자신에게 필요한 내용을 주석으로 남길 수 있다. <!--- 이렇게 사이에 넣으면 된다. ---> 마침 태그는 필요 없다.
    • 마침 태그가 없는 태그들을 "빈 태그"라고 부른다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-14-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-14-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    태그를 공부하는 가장 좋은 방법은 사용해 보는 것이다. 지금까지 배운 내용을 하나로 묶어 놓은 글이다. 그냥 복사해 붙여 넣지 말고, 코드를 읽어 보고 어떻게 화면에 표시될지 예상해 보자.
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>첫 웹 페이지</title>
    • </head>
    • <body>
    • <h1>새로운 웹 페이지</h1>
    • 즐거운 시간 되세요!<p><strong>당신을 위한 사이트!</strong>
    • <h2>Part 1: 나는 어떻게 HTML을 배우게 되었는가</h2>
    • <!---잊지 말기: h1은 h2보다 크다--->
    • HTML을 <del>한 시간</del> <ins>두 시간</ins>공부했으니, 나는 전문가다!
    • </body>
    • </html>
    광고


방법 3
방법 3 의 4:

링크 및 이미지 삽입

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-15-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-15-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    태그에는 특성을 이용해서 추가 정보를 더해 줄 수 있다. 특성은 태그 안에 있는 여러 단어로 표시된다. 형태는 "이름"="값"이다. 예를 들어, 거의 모든 HTML 태그에는 title 특성이 들어갈 수 있다.
    • <p title="Introduction">개요 문단</p>에는 introduction이라는 값을 갖는 title이라는 특성이 추가되었다. 이 부분은 그 문단에 마우스를 갖다 대면 등장한다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-16-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-16-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <a> </a> 태그를 이용하면 다른 웹 페이지에 링크를 걸 수 있다. href 특성을 이용해서 웹 페이지 주소를 넣어 주면 된다. 다음은 지금 HTML 작성법 영문판 페이지의 링크 예이다.
    • <a href="http://www.wikihow.com/Write-an-HTML-Page">클릭하면 영문판 페이지로 이동합니다.</a>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-17-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-17-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    모든 HTML 태그에 추가할 수 있는 특성 중 하나는 id 이다. id="example" 처럼 빈 칸을 추가하지 않고 id 특성을 추가해 주면 된다. [7] 시각적으로 아무런 변화도 없지만, 다음 단계에서 요긴하게 쓰일 것이다.
    • 예를 들어, 다음을 추가해 보자. <p id="example">id 특성이 어떻게 작동하는지 알아 보기 위한 문단.</p>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-18-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-18-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <a> </a> 태그를 이용해서 현재 읽고 있는 페이지의 특정 지점에 링크를 걸 수 있다. URL을 넣는 것이 아니라, # 문자와 id 이름을 입력해 링크를 표시할 것이다. 예: <a href="#example"> 클릭하면, id가 "example"인 문단으로 이동 </a>
    • 특성에 들어가는 값들은 대소문자 구분이 없다. [8] #EXAMPLE이나 #example이나 같은 곳으로 이동한다.
    • 페이지가 짧아서 한 번에 모든 것이 표시된다면, 아무 일도 안 일어나는 것처럼 보일 것이다. 스크롤바가 생길 때까지 창을 줄여 보고 다시 시도해 보자.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-19-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-19-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <img> 태그는 마침 태그가 필요 없는 빈 태그이다.  브라우저에게 필요한 모든 정보는 특성을 통해 전달된다. [9] 다음은 wikiHow 로고를 표시하는 코드이다.
    • <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="wikiHow logo">
    • src에는 이미지가 어디에 있는지 알려 준다. 허락 없이 이미지를 막 가져다 쓰는 것은 무례한 일이다. 또한 이 이미지는 원본 사이트가 다운될 경우, 보이지 않는다.
    • style은 여러 일을 할 수 있다. 하지만 가장 중요한 것은 이미지의 크기를 픽셀 단위로 결정할 수 있다는 점이다. (style 특성 내부에 또다시 width(너비), height(높이) 특성을 사용해 주어야 한다. 하지만 style 특성을 사용하면 나중에 CSS를 쓸 때 예상하지 못했던 오류를 접할 수 있으니 조심한다. [10] )
    • alt의 경우에는 이미지를 불러 들이는데 실패했을 때 사용할 수 있는 간단한 설명을 입력한다. 이 부분은 필수적인 부분인데, 시각 장애인을 위한 스크린 리더 프로그램이 이 부분을 사용하기 때문이다. [11]
    광고
방법 4
방법 4 의 4:

고급 정보 및 인터넷에 웹 페이지 공유하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-20-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-20-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML에 문제가 없는지 검증해 보자. 웹 페이지가 잘 표시되지 않는다면, 검증 프로그램을 사용하면 문제를 찾을 수 있다. 이렇게 하면 HTML에 대해 더 배울 수 있을 뿐 아니라, 더 보기 좋은 페이지를 만드는 법을 알 수 있다. 하지만 HTML 표준이 항상 업데이트되기 때문에 필수적인 부분은 아니다. 유효하지 않은 HTML을 쓴다고 해서 사이트를 읽을 수 없는 것은 아니다. 하지만, 문제를 일으킬 수 있으며, 브라우저마다 내용이 다르게 표시될 수 있다.
    • W3C 에서 제공하는 무료 서비스를 사용해 보거나 인터넷에 HTML 5 validator라고 쳐 보자.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-21-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-21-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML 태그와 특성은 이 외에도 많다.
    • w3schools 과 HTML Dog 에서 여러 가지를 배울 수 있을 것이다.
    • 좋아하는 페이지에 들어간 다음에 소스 보기 기능을 이용해서 HTML 코드를 읽어 보자. 자신에 문서에 붙여 넣은 뒤에 어떻게 작동하는지 확인해 보자.
    • 표, 메타 태그, div, span 태그 등을 사용하는 법을 검색해 보고 조사해 보자.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-22-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-22-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    웹 호스팅 서비스를 고른 후에 개인 웹 서버에 HTML 페이지를 여러 개 올려 보자. 이렇게 하려면 FTP를 어떻게 쓰는지 알아야 할 것이다.
    • 자신의 사이트의 페이지나 이미지를 링크한다면, 전체 주소를 쓸 필요가 없다. 예를 들어서, 자신의 도메인 주소가 www.superskilledhtmlcoder.com라면, <a href="/journal/monday.html">링크</a>라고만 해도 www.superskilledhtmlcoder.com/journal/monday.html 로 페이지를 링크할 수 있다
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-23-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-23-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    웹 페이지가 너무 단순한 느낌이라면, CSS를 배워서 색, 폰트 등을 추가해 주고, 각 요소들의 위치를 변경해 줄 수 있다. CSS "스타일시트"를 링크하면, 페이지를 멋지게 바꾸어 줄 수 있으며, 특정 태그의 텍스트의 스타일을 자동적으로 바꾸어 줄 수 있다. HTML Dog's CSS guide 에서 CSS를 어떻게 쓰는지 배워 보자.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-24-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-24-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    JavaScript라는 프로그래밍 언어를 이용하면 페이지에 동적인 기능을 추가해 줄 수 있다. JavaScript 명령어들은 <script></script> 태그 사이에 들어간다. 사용자의 입력에 반응하는 버튼, 수학 계산 등 여러 가지를 할 수 있다. the w3c examples 에서 공부해 보자.
    광고


팁

  • 이 글에서 사용된 doctype은  "loose HTML 4.0.1 transitional"이다. 초보자가 다루는데 좋은 방식이다. [12] HTML5를 쓰고 싶다면, <!DOCTYPE html>을 쓰면 된다. 이제는 HTML5가 더 많이 쓰이기 때문에 이것을 쓰는 것이 좋다.
광고

경고

  • HTML은 정보를 담기 위한 형식이며, 배경색이나 항목의 위치 같은 웹 페이지의 겉모습을 제어하기 위한 문서가 아니다.  이런 부분을 제어하는 태그들이 있지만, CSS를 이용해 바꾸어 줄 때 제어가 더 편리하며, 일관적인 웹 페이지를 만들 수 있다.
광고

필요한 것들

  • 메모장이나 TextEdit같은 텍스트 편집기.   
  • 인터넷 익스플로러나 파이어폭스같은 웹 브라우저
  • (선택사항) 어도비 드림위버, 앱타나 스튜디오, MS 익스프레션 웹 같은 HTML 편집기

관련 위키하우

유튜브 비디오 다운받는 방법
PDF 번역하는 방법
와이파이 비밀번호 변경하는 법
특정 웹사이트가 안 열릴 때 해결하는 법
마인크래프트 스킨을 변경하는 방법
내 컴퓨터의 IP 주소 찾는 법
디스코드에서 친구를 추가하는 방법
유튜브 동영상 다운로드하는 7가지 방법
스포티파이에서 음악 다운받는 법
인스타그램 팔로워 차단 및 차단 해제 방법
영화 다운 받는 방법
인스타그램 사용하는 방법
구글 크롬을 기본 브라우저로 설정하는 방법
공유기 두 대 연결하는 법
광고

출처

  1. ↑ http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
  2. ↑ http://htmldog.com/guides/html/beginner/gettingstarted/
  3. ↑ http://www.w3.org/QA/Tips/Doctype
  4. ↑ HTML Tutorials
  5. ↑ http://www.w3schools.com/tags/tag_br.asp
  6. ↑ http://www.w3schools.com/tags/tag_pre.asp
  7. ↑ http://www.w3schools.com/tags/att_global_id.asp
  8. ↑ http://www.w3schools.com/tags/att_global_id.asp
  9. ↑ http://htmldog.com/guides/html/beginner/images/
  1. ↑ http://www.w3schools.com/html/html_images.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp
  3. ↑ http://www.htmlbasictutor.ca/doctype-declaration.htm

이 위키하우에 대하여

다른 언어
이 문서는 14,692 번 조회 되었습니다.

이 글이 도움이 되었나요?

광고