HTML을 배우는 방법

콘텐츠

단계
1/2부: HTML 기초 학습
2/2부: 고급 HTML
팁
경고
뭐가 필요하세요

HTML은 영어의 약자입니다. 하이퍼 텍스트 마크업 언어 (하이퍼텍스트 마크업 언어). 이것은 사이트의 기본 마크업이 생성되는 코드 또는 언어입니다. 프로그래밍을 한 번도 해본 적이 없다면 배우는 것이 어려울 수 있지만 실제로 시작하는 데 필요한 것은 기본 텍스트 편집기와 인터넷 브라우저뿐입니다. 인터넷 포럼, 사용자 정의 페이지 또는 wikiHow 기사에서 본 HTML 마크업의 몇 가지 예를 알아볼 수도 있습니다. HTML은 모든 인터넷 사용자에게 유용한 도구이며 기본을 배우는 데 생각보다 시간이 덜 걸립니다.

단계

1/2부: HTML 기초 학습

1 HTML 문서를 엽니다. 대부분의 텍스트 편집기(Windows의 경우 메모장 또는 메모장 ++, Mac의 경우 TextEdit, GNU/Linux의 경우 gedit)를 사용하여 HTML 파일을 생성할 수 있습니다. 새 문서를 만들고 파일 → 웹 페이지 형식으로 다른 이름으로 저장을 사용하여 저장하거나 파일 확장자를 .doc, .rtf 또는 다른 확장자가 아닌 .html 또는 .htm으로 변경합니다.
- 파일이 RTF 형식 대신 "일반 텍스트"로 저장되거나 형식 및 이미지가 저장되지 않는다는 경고를 받을 수 있습니다. 이건 괜찮아; HTML의 경우 이러한 옵션이 필요하지 않습니다.
2 생성된 파일을 브라우저에서 엽니다. 빈 파일을 저장하고 컴퓨터에서 찾은 다음 두 번 클릭하여 엽니다. 브라우저에서 빈 페이지가 열려야 합니다. 그렇지 않으면 파일을 브라우저의 주소 표시줄로 드래그하십시오. HTML 파일을 편집할 때 이 페이지를 새로 고쳐 변경 사항을 볼 수 있습니다.
- 이런 식으로 인터넷에서 웹사이트를 만드는 것이 아닙니다. 다른 사람들은 이 페이지에 액세스할 수 없으며 로컬 페이지를 테스트하기 위해 인터넷 연결이 필요하지 않습니다. 브라우저는 단순히 HTML 코드를 해석하여 마치 웹사이트인 것처럼 "읽습니다".
3 마크업 태그가 무엇인지 이해합니다. 일반 텍스트와 달리 태그는 페이지에 표시되지 않습니다. 대신 브라우저에 페이지와 콘텐츠를 표시하는 방법을 알려줍니다. "여는" 태그에는 지침이 포함되어 있습니다. 예를 들어 텍스트가 다음과 같이 표시되어야 한다고 브라우저에 알릴 수 있습니다. 굵게... 또한 명령이 끝나는 브라우저를 표시하기 위해 "end" 태그가 필요합니다. 이 예에서 시작 태그와 종료 태그 사이의 텍스트는 굵게 표시됩니다. 태그는 부등호 안에 작성되지만 끝 태그는 슬래시로 시작합니다.
- 여는 태그는 부등호 사이에 작성됩니다. 여는 태그>
- 닫는 태그에서 슬래시는 태그 설명자(이름) 앞에 놓입니다. /종료 태그>
- 다른 태그가 어떻게 사용되는지 알아 보려면 계속 읽으십시오. 이 단계에서는 녹음 형식만 기억하면 됩니다. 태그는 부등호 기호:> 및 /> 사이에 작성됩니다.
- 일부 자습서에서는 HTML 태그를 요소라고 하고 여는 태그와 닫는 태그 사이의 텍스트를 요소 콘텐츠라고 합니다.
4 편집기에 html> 태그를 입력합니다. 모든 HTML 파일은 태그로 시작해야 합니다. HTML> 그리고 태그로 끝 / html>... 이 태그는 태그 사이의 모든 콘텐츠가 HTML에 있음을 브라우저에 알립니다. 문서에 다음 태그를 추가합니다.
- 종종 HTML 파일은 다음 줄로 시작합니다. DOCTYPE HTML>즉, 브라우저는 전체 파일을 HTML로 인식해야 합니다. 이 줄은 필요하지 않지만 호환성 문제를 해결하는 데 도움이 될 수 있습니다.
- 다이얼 HTML> 문서 상단에 있습니다.
- Enter 또는 Return 키를 여러 번 눌러 여러 개의 빈 줄을 만든 다음 다음을 입력합니다. / html>
- 기억 전체 이 기사에서 만들 코드는 이 두 태그 사이에 작성해야 합니다.
5 파일에 head> 섹션을 만듭니다. html> 및 / html> 태그 사이에 여는 태그를 만듭니다. 머리> 그리고 닫는 태그 / 머리>... 그들 사이에 몇 개의 빈 줄을 추가하십시오. head> 및 / head> 태그 사이에 쓰여진 내용은 페이지 자체에 표시되지 않습니다. 다음 단계를 수행하면 이 태그의 용도를 알 수 있습니다.
- head> 및 / head> 태그 사이에 쓰기 제목> 그리고 / 제목>
- title> 및 /title> 태그 사이에 작성 HTML 배우는 방법 - wikiHow.
- 변경 사항을 저장하고 브라우저에서 파일을 엽니다(또는 파일이 이미 열려 있는 경우 페이지를 새로 고침). 주소 표시줄 위의 페이지 제목에 나타나는 텍스트를 보셨습니까?
6 body> 섹션을 만듭니다. 이 예의 다른 모든 태그와 텍스트는 본문 섹션에 작성되며 그 내용은 페이지에 표시됩니다. 후에 닫는 태그 / head>, 하지만 ~ 전에 태그 / html> 태그 추가 몸> 그리고 / 바디>... 이 기사의 나머지 부분에서는 본문 섹션을 사용하십시오. 파일은 다음과 같아야 합니다.
HTML>
머리>
title> HTML 배우는 방법 - wikiHow / title>
/ 머리>
몸>
/ 바디>
/ html>
7 다양한 스타일을 사용하여 텍스트를 추가합니다. 페이지에 실제 콘텐츠를 추가할 시간입니다! body 태그 사이에 작성하는 모든 내용은 브라우저에서 새로고침된 후 페이지에 표시됩니다. 사용하지 마세요 기호 또는 >브라우저가 콘텐츠를 텍스트 대신 태그로 해석하려고 하기 때문입니다. 쓰다 여보세요! (또는 원하는 대로) 다음 태그를 텍스트에 추가하고 어떤 일이 일어나는지 확인하십시오.
- em> 안녕하세요 여러분! / em> 텍스트를 "기울임꼴"로 만듭니다. 여보세요!
- 스트롱> 여러분 안녕하세요! / 스트롱> 텍스트를 "굵게" 만듭니다. 여보세요!
- s> 안녕하세요 여러분! / s> 취소선 텍스트: ~~여보세요!~~
- 섭> 안녕하세요 여러분! / 섭> 글꼴을 위 첨자로 표시합니다.
- sub> 안녕하세요 여러분! / sub> 글꼴을 아래 첨자로 표시합니다. _{여보세요!}
- 다른 태그를 함께 사용해 보세요. 어떻게 보일 것인가 em> 강한> 안녕하세요 여러분! / 강한> / em>?
8 텍스트를 단락으로 나눕니다. HTML 파일에 여러 줄의 텍스트를 작성하려고 하면 브라우저에 줄 바꿈이 표시되지 않습니다. 텍스트를 단락으로 나누려면 태그를 추가해야 합니다.
- p> 이것은 별도의 단락입니다. / p>
- 이 문장은 이 줄의 시작 앞에 줄 바꿈 br>이 옵니다.
  종료 태그가 필요하지 않은 첫 번째 태그입니다. 이러한 태그를 "빈" 태그라고 합니다.
- 섹션 제목을 표시하는 제목 만들기:
  h1> 제목 텍스트 / h1>: 가장 큰 타이틀
  h2> 제목 텍스트 / h2> (두 번째 수준 제목)
  h3> 제목 텍스트 / h3> (세 번째 수준 제목)
  h4> 제목 텍스트 / h4> (4단계 제목)
  h5> 제목 텍스트 / h5> (가장 작은 제목)
9 목록을 만드는 방법을 배웁니다. 웹 페이지에 목록을 만드는 방법에는 여러 가지가 있습니다. 아래 옵션을 시도하고 가장 좋아하는 옵션을 결정하십시오. 전체 목록에는 한 쌍의 태그가 필요하며(예: 글머리 기호 목록의 경우 ul> 및 / ul>) 각 목록 항목은 다른 태그 쌍(예: li> 및 /)으로 강조 표시됩니다. 리>.
- 글머리 기호 목록:
  ul> li> 첫 번째 줄 / li> li> 두 번째 줄 / li> li> 등등 / li> / ul>
- 번호 매기기 목록:
  ol> li> 하나 / li> li> 둘 / li> li> 셋 / li> / ol>
- 정의 목록:
  dl> dt> 커피 / dt> dd> - 뜨거운 음료 / dd> dt> 레모네이드 / dt> dd> - 차가운 음료 / dd> / dl>
10 다음을 사용하여 페이지 레이아웃 줄 바꿈, 수평선 및 영화. 페이지에 텍스트 이외의 것을 추가할 때입니다. 자세한 내용은 다음 태그를 시도하거나 링크를 따라가십시오. 온라인 호스팅 서비스를 사용하여 게시하려는 이미지에 대한 링크를 만드십시오.
- 수평선: 시간>
- 그림 삽입: img src = "이미지 링크">
11 링크를 추가합니다. 이러한 태그를 사용하여 다른 페이지 및 사이트에 대한 하이퍼링크를 만들 수 있지만 아직 웹사이트가 없기 때문에 앵커 링크, 즉 페이지의 특정 위치에 대한 링크를 만드는 방법을 배웁니다.
- 페이지에서 링크하려는 위치에 a> 태그를 사용하여 앵커를 만듭니다. 명확하고 기억에 남는 이름을 생각해 보세요.
  
  a name = "Tips"> 링크하려는 텍스트. / a>
- href> 태그를 사용하여 상대 링크 또는 외부 리소스에 대한 링크를 생성합니다.
  
  a href = "페이지 링크 또는 페이지 내 앵커 이름"> 링크 역할을 할 텍스트 또는 이미지. / a>
- 다른 페이지의 상대 링크에 링크하려면 기본 링크와 앵커 이름 뒤에 # 기호를 추가합니다. 예를 들어 https://en.wikihow.com/learn-HTML#Tips는 이 페이지의 팁 섹션으로 연결됩니다.

2/2부: 고급 HTML

1 속성을 알아보십시오. 속성은 추가 정보를 나타내는 태그 내부에 기록됩니다. 속성의 형식은 다음과 같습니다. 이름 = "값", 어디 제목 속성을 정의합니다(예: 색상 색상 속성의 경우), 값은 해당 값을 나타냅니다(예: 빨간색 빨간색).
- 속성은 HTML 기본 사항에 대한 이전 섹션에서 실제로 사용되었습니다. img> 태그는 속성을 사용합니다. src, 상대 링크 앵커는 속성을 사용합니다. 이름링크는 속성을 사용합니다. href... 이미 보았듯이 모든 속성은 다음 형식으로 작성됩니다. ___='___’.
2 HTML 테이블로 실험하십시오. 테이블 생성에는 다양한 태그의 사용이 포함됩니다. 실험하거나 더 자세한 지침을 읽을 수 있습니다.
- 테이블 태그 생성:테이블> / 테이블>
- 테이블에 있는 각 행의 내용을 태그로 묶습니다. 트>
- 열 머리글은 태그로 정의됩니다. 일>
- 다음 줄의 셀: td>
- 다음 태그를 사용하는 예:
  
  표> tr> 일> 열 1: 월 / 일> 일> 열 2: 저축 / 일> / tr> tr> td> 1월 / td> td> 5000 루블 / td> / tr> / 테이블>
3 추가 헤드 섹션 태그를 알아보세요. 모든 html 파일의 시작 부분에 있는 head> 태그를 이미 배웠습니다. title> 태그 외에도 이 섹션에 대한 다른 태그가 있습니다.
- 다음을 포함하는 메타 태그 메타데이터검색 엔진에서 사이트 색인을 생성하는 데 사용됩니다. 검색 엔진에서 사이트를 더 쉽게 찾을 수 있도록 하려면 하나 이상의 여는 meta> 태그를 사용하십시오(닫는 태그는 필요하지 않음).태그당 하나의 속성과 하나의 값을 사용하십시오. meta name = "description" content = "page description">; 또는 메타 이름 = "키워드" 콘텐츠 = "쉼표로 구분된 키워드">
- 다른 유형의 인코딩을 사용하여 생성되고 색상, 텍스트 정렬 및 기타 여러 기능을 사용하여 HTML 페이지를 변경할 수 있는 스타일 시트(CSS)와 같은 타사 파일을 가리키는 Link> 태그.
- 페이지에 JavaScript 파일을 첨부하는 데 사용되는 script> 태그. 이 파일은 페이지를 대화식으로 수정하는 데 필요합니다(사용자 작업에 대한 응답으로).
4 다른 사이트의 HTML 코드로 실험해 보십시오. 다른 웹 페이지의 소스 코드를 보는 것은 HTML을 배우는 좋은 방법입니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 브라우저의 상단 메뉴에서 소스 보기 또는 이와 유사한 것을 선택할 수 있습니다. 익숙하지 않은 태그가 무엇을 하는지 알아내거나 관련 정보를 인터넷에서 검색하십시오.
- 다른 사람의 사이트를 편집할 수는 없지만 소스 코드를 파일에 복사하여 나중에 태그를 실험할 수 있습니다. CSS 마크업을 사용하지 못할 수 있으며 색상과 서식이 다르게 보일 수 있습니다.
5 더 자세한 가이드 탐색을 시작하십시오. 인터넷에는 W3Schools 또는 HTMLbook과 같이 HTML 태그 전용 사이트가 많이 있습니다. 종이 책도 판매 중이지만 표준이 변경되고 발전함에 따라 최신 버전을 찾으려고 노력하십시오. 더 나아가 CSS를 마스터하여 사이트의 레이아웃과 모양을 훨씬 더 많이 제어할 수 있습니다. CSS를 배운 후 웹 디자이너는 일반적으로 JavaScript를 배웁니다.

팁

Notepad ++는 일반 메모장과 유사한 훌륭한 무료 프로그램이지만 온라인에서 브라우저에 코드를 저장하고 테스트할 수 있습니다. (또한 HTML, CSS, Python, JavaScript 등 거의 모든 언어를 지원합니다.)
인터넷에서 간단한 페이지를 찾아 코드를 컴퓨터에 저장하고 실험해 보십시오. 텍스트 이동, 글꼴 변경, 이미지 교체 등 무엇이든 시도해 보세요!
메모장을 메모장에 적어두면 항상 손에 넣을 수 있습니다. 이 페이지를 인쇄하여 참조할 수도 있습니다.
코드를 작성할 때 귀하와 다른 사람들이 이해할 수 있도록 주의 깊게 작성하십시오. 사용! - 여기에 주석 삽입 -> HTML 주석의 경우: 페이지에는 반영되지 않지만 코드 문서에는 표시됩니다.
XML과 RSS가 인기를 얻고 있습니다. XML 및 RSS 기술이 포함된 페이지의 코드는 경험이 없는 사용자가 읽고 이해하기가 더 어렵지만 이러한 도구는 매우 유용합니다.
HTML의 마크업 태그는 대소문자를 구분하지 않지만 표준화 및 XHTML 호환성을 위해 이 문서의 예와 같이 소문자만 사용하는 것이 좋습니다.

경고

일부 태그는 지난 몇 년 동안 사용이 중단되었으며 동일하거나 일부 추가 효과를 제공하는 새 태그로 교체되었습니다.
페이지를 테스트하려면 W3 사이트로 이동하여 최신 HTML 요구 사항을 확인하십시오. HTML 표준은 시간이 지남에 따라 변경되며 일부 태그는 최신 브라우저에서 더 잘 작동하는 새 태그로 대체됩니다.