HTML 학습

콘텐츠

단계로
2 단계 중 1 부 : HTML의 기본 사항 배우기
2/2 부 : 고급 HTML 학습
팁
경고
필수품

HTML은 하이퍼 텍스트 마크 업 언어, 코드 또는 언어 웹 사이트를 만드는 데 사용됩니다. 이전에 프로그래밍 한 적이 없다면 복잡해 보일 수 있지만 간단한 워드 프로세싱 프로그램과 인터넷 브라우저 만 있으면됩니다. 포럼, 온라인 프로필 또는 wikiHow 기사에서 일부 HTML을 인식 할 수 있습니다. HTML은 인터넷을 사용하는 모든 사람에게 유용한 리소스이며 HTML을 배우는 데 예상보다 시간이 덜 걸릴 수 있습니다.

단계로

2 단계 중 1 부 : HTML의 기본 사항 배우기

HTML 문서를 엽니 다. 메모장 또는 Windows 용 Word 및 Mac 용 텍스트 편집기를 포함한 대부분의 워드 프로세싱 프로그램을 사용하여 HTML 문서를 만들 수 있습니다. 새 문서를 열고 상단 메뉴에서 파일 → 다른 이름으로 저장을 선택하여 문서를 웹 페이지로 저장하거나 파일 확장자를 ".doc", ".rtf"또는 다른 모든 것에서 ".html"또는 ".htm으로 변경하십시오. ".
- 이제 문서가 RTF (서식있는 텍스트)에서 "일반 텍스트"형식으로 변경되고 일부 서식 옵션 및 이미지가 제대로 저장되지 않는다는 경고가 표시 될 수 있습니다. 이 경고는 무시해도됩니다. HTML 문서는 이러한 옵션을 사용하지 않습니다.
- .html 및 .htm 파일은 동일합니다. 둘 다 작동합니다.
브라우저로 문서를 봅니다. 빈 문서를 저장하고 닫은 다음 저장 한 위치에서 문서를 두 번 클릭하여 다시 엽니 다. 이제 브라우저에서 문서가 빈 웹 페이지로 열릴 것입니다. 그래도 작동하지 않으면 파일 아이콘을 브라우저의 주소 표시 줄로 드래그하십시오. 나중에이 기사의 단계에 따라 HTML 문서를 편집하는 경우 계속해서 브라우저로 돌아가 코드의 변경 사항이 어떻게 보이는지 확인합니다.
- 참고 : 웹 페이지가 아직 온라인 상태가 아닙니다. 페이지는 다른 사용자가 액세스 할 수 없으며 테스트를 위해 인터넷 연결이 필요하지 않습니다. 브라우저를 사용하여 마치 웹 사이트 인 것처럼 HTML 문서를 "읽습니다".
"태그"가 무엇인지 이해합니다. 일반 텍스트처럼 태그는 최종 웹 페이지에 표시되지 않습니다. 태그는 브라우저에 페이지와 페이지의 콘텐츠를 표시하는 방법을 알려줍니다. 시작 태그에는 지침이 포함됩니다. 예를 들어 브라우저에 텍스트를 굵게 표시하도록 지시 할 수 있습니다. 지침이 적용되는 위치를 브라우저에 알리려면 종료 태그가 필요합니다.이 예에서는 시작 태그와 종료 태그 사이의 모든 텍스트가 굵게 표시됩니다. 종료 태그도 괄호 안에 배치되지만 첫 번째 괄호 뒤에 슬래시가 있습니다.
- 괄호 안에 시작 태그를 작성합니다. 이것은 시작일입니다>
- 괄호 안에 종료 태그를 쓰지만 첫 번째 괄호 뒤에 슬래시를 넣습니다. /이것은 닫는 태그입니다>)
- 기사 뒷부분에서 기능 태그를 작성하는 방법을 읽으십시오. 이 단계에서는 태그를 작성하는 방법을 기억하기 만하면됩니다 :> 및 />.
- 다른 HTML 과정에서 태그는 "요소"라고도하며 여는 태그와 닫는 태그 사이의 텍스트는 "요소 콘텐츠"라고도합니다.
첫 번째 html> 태그를 작성하십시오. 모든 HTML 문서는 html>태그와 끝 / html>꼬리표. 이것은 이러한 태그 사이의 모든 것이 HTML로 작성되었음을 브라우저에 알려줍니다. 문서에 다음 태그를 추가하십시오.
- 쓰다 html> 문서 상단에 있습니다.
- Enter 또는 Return 키를 여러 번 눌러 공간을 확보 한 다음 / html>
- 널 기억 해요 모두 이 두 태그 사이에
문서의 head> 부분을 만드십시오. 태그 html>과 / html> 사이에 머리>시작 태그 및 / 헤드>-end 태그. 이 태그 사이에 공간을 다시 만드십시오. 이 태그 사이에 쓰여진 내용은 웹 페이지 자체에 표시되지 않습니다. 다음 단계를 시도하고 정보가 표시되는 위치를 확인할 수 있는지 확인하십시오.
- head> 및 / head> 태그 사이에 씁니다. 제목> 과 / 제목>
- 태그 title> 및 / title> 사이에 다음과 같이 작성합니다. HTML 배우는 방법 (이미지 포함)-wikiHow.
- 문서를 저장하고 브라우저에서 엽니 다 (또는 페이지가 아직 열려있는 경우 문서를 저장하고 브라우저에서 페이지를 새로 고칩니다). 페이지 상단의 주소 표시 줄 위에 방금 작성한 내용이 보이십니까?
body> 섹션을 만듭니다. 이 초보자 용 문서의 다른 모든 내용은 body> 섹션에 배치되고 웹 페이지에 표시됩니다. 후 태그 / 헤드>,하지만 앞에 작성한 태그 / html> 바디> 과 / 본체>. 이 기사에서 자세히 설명하는 모든 내용은 body 태그 사이에 배치합니다. 이제 다음과 같은 문서 (글 머리 기호 없음)가 있어야합니다.
- html>
- 머리>
- title> HTML 배우기-wikiHow / title>
- / 헤드>
- 바디>
- / 본체>
- / html>
다양한 스타일로 텍스트를 추가합니다. 이제 브라우저에서 실제로 볼 수있는 내용을 작성하기 시작했습니다! 변경 사항을 저장하고 브라우저 내에서 페이지를 새로 고치면 body 태그에 작성한 모든 내용이 브라우저에 표시됩니다. 쓰다 아니 징후가있는 것 과 >브라우저가 일반 텍스트 대신 HTML 명령으로 해석하기 때문입니다. 예를 들어 쓰기 안녕하세요! ( "Hello world!"에 대한 영어, 특정 프로그래밍 언어로 된 프로그래밍 과정의 첫 번째 예로서 글로벌 표준 텍스트입니다) 또는 다른 것입니다. 텍스트 앞뒤에 다음 태그를 삽입하고 어떤 일이 발생하는지 확인합니다.
- em> 안녕하세요! / em> 기울임 꼴 텍스트처럼 보입니다. 안녕하세요!
- strong> 안녕하세요! / strong> 굵은 텍스트처럼 보입니다. 안녕하세요!
- s> 안녕하세요! / s> 취소 선 텍스트처럼 보입니다. ~~안녕하세요!~~
- sup> 안녕하세요! / sup> 위첨자처럼 보입니다.
- sub> 안녕하세요! / sub> 캡션처럼 보입니다. _{안녕하세요!}
- 조합 시도 : 어떻게 보는가 em> strong> Hello world! / strong> / em> 나가?
텍스트를 단락으로 나눕니다. 문서에 다른 줄의 텍스트를 넣으면 모든 줄이 차례로 배치되는 것을 볼 수 있습니다. 새 줄과 빈 줄을 직접 프로그래밍해야합니다.
- p> 이것은 별도의 섹션입니다 ./p>
- 이 문장은 첫 번째 줄에 있고이 문장은 다음 줄에 있습니다.
  끝 태그가 필요없는 첫 번째 태그입니다! 우리는 이러한 태그를 빈 태그.
- 섹션 이름을 명확하게하기 위해 헤더를 만듭니다.
  h1> 헤더 / h1>: 가능한 가장 큰 헤더
  h2> 헤더 / h2> (2 단계 헤더)
  h3> 헤더 / h3> (3 단계 헤더)
  h4> 헤더 / h4> (4 단계 헤더)
  h5> 헤더 / h5> (가능한 가장 작은 헤더)
목록을 만드는 방법을 알아 봅니다. 웹 페이지에 목록을 만드는 방법에는 여러 가지가 있습니다. 가장 좋아하는 것을 찾으려면 다음 방법을 시도하십시오. 한 쌍의 태그가 전체 목록 주위에 배치되고 (예 : 정렬되지 않은 목록의 경우 ul> 및 / ul> 태그) 다른 태그 쌍이 목록 내의 각 항목 주위에 배치됩니다 (예 : li> 및 / li>). .
- 다음 코드를 사용하여 글 머리 기호 목록을 만듭니다.
  ul> li> 한 항목 / li> li> 다른 항목 / li> li> 다른 항목 / li> / ul>
- 또는 다음 코드를 사용하여 번호 매기기 목록을 만듭니다.
  ol> li> 항목 1 / li> li> 항목 2 / li> li> 항목 3 / li> / ol>
- 또는 소위 정의 목록을 만드는이 코드 :
  dl> dt> 커피 / dt> dd>-뜨거운 음료 / dd> dt> 우유 / dt> dd>-차가운 음료 / dd> / dl>
새로운 선, 수평선 및 이미지로 페이지를 더욱 매력적으로 만드십시오. 이제 페이지에 다른 것을 추가 할 때입니다. 다음 태그를 사용해보십시오 (이미지 링크를 사용할 수 있도록 이미지를 온라인에 게시해야합니다).
- 줄 삽입 : br> 또는 시간>
- 이미지 삽입 : img src = "the_url_of_your_image">
페이지의 다른 위치에 대한 링크를 삽입합니다. 이 코드를 사용하여 다른 페이지 및 웹 사이트에 연결할 수도 있지만 아직 웹 사이트가 없기 때문에 링크 할 수있는 페이지의 특정 위치 인 "앵커"에 중점을 둘 것입니다.
- 먼저 링크하려는 페이지의 지점에 a> 태그를 사용하여 앵커를 만듭니다. 앵커에게 기억하기 쉬운 명확한 이름을 지정하십시오.
  
  a name = "Tips"> 이것은 앵커를 배치하는 텍스트입니다 ./a>
- href> 태그를 사용하여 앵커 또는 다른 웹 페이지에 연결하세요.
  
  a href = "url of the webpage or name of anchor on this page"> 여기에 링크로 표시된 텍스트 또는 이미지를 작성하십시오 ./a>
- 다른 페이지의 앵커에 연결하려면 URL 뒤에 # 문자와 앵커 이름을 추가합니다. 예를 들어 http://www.wikihow.com/HTML-leren#Tips는이 페이지의 "팁"섹션으로 바로 연결됩니다.

2/2 부 : 고급 HTML 학습

속성에 대해 알아 봅니다. 속성은 태그 내에 배치되며 시작 및 종료 태그 사이의 "요소 콘텐츠"를 추가로 조정하는 데 사용됩니다. 그들은 결코 혼자 서 있지 않습니다. 다음과 같은 방식으로 작성됩니다. 이름 = "값". 이름 속성의 이름 (예 : "color")을 나타내고 값 이 특정 사례를 설명합니다 (예 : "빨간색").
- 이 기사의 이전 부분에서 자세히 살펴보면 이미 속성을 접한 것입니다. img> 태그는 속성을 사용합니다. src, 앵커는 속성을 사용합니다. 이름 및 링크는 속성을 사용합니다. href. 당신은 그들이 모두 크기를 알 수 있습니다 ___='___’ 따르십시오.
HTML 테이블을 실험 해보십시오. 표 또는 그래프를 만들려면 여러 태그가 필요합니다.
- 전체 테이블 주위에 테이블 태그 (영어로 "table")로 시작합니다.표> / 표>
- 각 행의 내용 주위에 태그를 배치합니다. tr>
- 첫 번째 행에 열 머리글을 배치합니다. 일>
- 연속 된 행에 셀 배치 : td>
- 다음은이 모든 것이 어떻게 결합되는지에 대한 예입니다.
  
  table> tr> th> Column 1 : Month / th> th> Column 2 : Money saved / th> / tr> tr> td> January / td> td> € 100 / td> / tr> / table>
헤드 섹션에서 사용되는 다른 태그에 대해 알아보십시오. 이미 각 문서의 시작 부분에 배치하는 head> 태그를 배웠습니다. head 섹션에는 title> 태그 외에 다른 태그가있을 수 있습니다.
- 메타 태그를 사용하여 메타 데이터 웹 페이지에 대해. 이 데이터는 검색 엔진에서 웹 페이지를 분류하는 데 사용됩니다. 페이지가 검색 엔진에 표시되도록하려면 하나 이상의 메타 태그를 배치 할 수 있습니다 (종료 태그는 필요하지 않음). 각 태그에는 정확히 하나의 이름 속성과 콘텐츠 속성이 포함되어야합니다. 예 : meta name = "description"content = "put here 설명 ">; 또는 메타 이름 = "키워드"content = "여기에 키워드 목록을 작성하고 항상 쉼표로 구분">
- link> 태그는 다른 파일을 페이지에 링크하는 데 사용됩니다. 일반적으로 CSS 스타일 시트를 HTML 페이지와 연결하는 데 사용되는 이러한 페이지는 다른 종류의 코드로 구성되며 페이지의 전체 스타일을 결정하는 데 사용됩니다.
- script> 태그는 javascript 파일을 HTML 페이지와 연결하는 데 사용됩니다. Javascript를 사용하면 사용자가 페이지에서 작업을 수행하면 페이지를 변경할 수 있습니다.
기존 페이지에서 HTML로 재생합니다. 웹 페이지의 소스 코드를 보는 것은 HTML 지식을 확장하는 좋은 방법입니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "소스보기", "페이지 소스 표시"또는 이와 유사한 항목을 선택합니다. 모르는 특정 태그가 무엇을하는지 알아 보거나 온라인에서 답을 검색하십시오.
- 다른 사람의 웹 사이트를 편집 할 수는 없지만 HTML 코드를 자신의 문서에 복사하고 여러 가지 조정이 수행되는 작업을 살펴볼 수 있습니다. 참고 : 많은 웹 사이트에서 CSS 스타일 시트를 사용하기 때문에 많은 색상이나 다른 스타일을 보지 못할 수 있습니다.
더 심층적 인 기사를 읽고 HTML에 대해 알아보십시오. W3Schools 또는 Codecademy와 같은 더 많은 HTML 태그를 마스터하기위한 많은 리소스가 인터넷에 있습니다. 사용 가능한 HTML 책도 많이 있지만 HTML 표준이 수시로 변경되므로 최신 버전을 사용하고 있는지 확인하십시오. HTML을 좋은 수준으로 마스터했다면 CSS로 전환하여 웹 페이지의 디자인과 스타일을 더 잘 제어 할 수 있습니다. 그 후 다음 단계는 일반적으로 javascript입니다.

팁

인터넷에서 간단한 웹 페이지를 찾은 다음 코드를 엉망으로 만드는 것이 유용 할 수 있습니다. 텍스트를 이동하고 글꼴을 변경하고 이미지를 변경하십시오.
노트북을 사용하여 코드를 적어두면 잠시 기억 나지 않는 경우에 대비할 수 있습니다. 이 페이지를 인쇄하여 참고 용으로 보관할 수도 있습니다.
오늘날 웹 사이트에서 XML과 RSS가 점점 더 많이 사용되고 있습니다. 코드는 특히 소스 코드에서 볼 때 육안으로는 액세스 할 수없는 것처럼 보일 수 있지만 기능은 유용 할 수 있습니다.
HTML 내에서 사용되는 태그는 대소 문자를 구분하지 않지만 기본값은 소문자를 사용하는 것입니다 (이 기사 에서처럼). XHTML과의 호환성을 위해 태그에 소문자를 적극 권장합니다.

경고

일부 태그는 더 이상 사용되지 않으며 동일한 기능을 수행하는 다른 태그로 대체되었지만 종종 더 많은 옵션을 제공합니다.
페이지가 HTML 표준을 준수하는지 확인하려면 W3 웹 사이트로 이동하여 현재 표준에 대해 코드를 테스트하십시오. 많은 태그가 더 이상 사용되지 않으며 최신 브라우저에서 더 잘 작동하는 태그로 대체되었습니다.