콘텐츠

• 단계
• 1 부 : HTML을 발견 한 방법
• 조언
• 경고
• 필요한 것

HTML (HyperText Markup Language)은 웹 페이지 구축을위한 기본 언어입니다. 쉽고 유연한 코딩 언어로 만들어졌습니다. 인터넷의 거의 모든 웹 사이트는이 코드 (ColdFusion, XML, XSLT)의 어떤 형태로 개발됩니다. HTML은 이해하기 쉽지만 포괄적 인 기능에 관심이 있다면 오랫동안 계속 배울 수 있습니다. 웹 사이트에 색상과 재미를 더하려면 기본 HTML 페이지에 익숙해 지 자마자 기본 CSS를 배울 수 있습니다.

단계

4 단계 중 1 : 문서 작성

1. 

   간단한 텍스트 편집기를 엽니 다. NotePad는 좋은 옵션이며 무료로 다운로드 할 수 있습니다. 대부분의 텍스트 편집기로 HTML을 작성할 수 있지만 자동 서식 기능이있는 더 복잡한 소프트웨어는 HTML 페이지를 구성하기 어렵게 만들 수 있습니다.
   • 일반적으로 브라우저에서 HTML로 인식하지 못할 수있는 형식으로 파일을 저장하므로 텍스트 편집기를 사용하지 마십시오.
   • 온라인 HTML 편집기를 사용할 수도 있습니다. 전용 HTML 편집 프로그램은 초보자에게 권장되지 않습니다.

2. 

   
   
   파일을 웹 페이지로 저장합니다. 상단 메뉴에서 파일 → 다른 이름으로 저장을 선택합니다. 파일 형식을 "웹 페이지", ".html"또는 ".htm"으로 변경합니다. 쉽게 찾을 수있는 곳에 파일을 저장하십시오.
   • 이 세 가지 옵션에는 차이가 없습니다.

3. 

   브라우저에서 파일을 엽니 다. 파일을 두 번 클릭하면 브라우저에서 빈 웹 페이지로 자동으로 열립니다. 또는 Firefox 또는 Internet Explorer와 같은 브라우저를 연 다음 파일 → 파일 열기를 사용하여 문서를 선택할 수 있습니다.
   • 이 웹 사이트는 온라인이 아닙니다. 컴퓨터에서만 볼 수 있습니다.

4. 

   
   
   웹 페이지를 새로 고치고 변경 사항을 확인하십시오. 빈 문서에 다음을 입력하십시오. 여보세요. 문서를 저장하십시오. 브라우저에서 빈 웹 페이지를 새로 고침하면 페이지 상단에 굵게 표시된 "Hello"라는 단어가 표시됩니다. 이 자습서 중에 새 HTML을 테스트하려면 .htm 문서를 저장 한 다음 브라우저 창을 새로 고쳐 HTML이 어떻게 컴파일되는지 확인하십시오.
   • ""과"''브라우저에 나타납니다. 파일이 HTML로 올바르게 컴파일되지 않았습니다. 다른 텍스트 편집기 나 다른 브라우저를 사용해보십시오.

5. 

   
   
   태그를 알아보십시오. HTML 명령은 웹 페이지를 컴파일하고 표시하는 방법을 브라우저에 알려주는 "태그"로 작성됩니다. 항상 작은 따옴표 안에 작성됩니다. 이며 위의 예에서 사용한 것처럼 웹 페이지에 표시되지 않습니다.
   • "시작 카드"또는 "개봉 카드"입니다. 이 태그 뒤에 쓰여진 모든 것은 "굵게"(웹 페이지에서 굵게)로 정의됩니다.
   • / 기호로 구분할 수있는 "종료 태그"또는 "종료 태그"입니다. 굵은 텍스트의 끝을 나타냅니다. 대부분의 (전부는 아님) 태그가 작동하려면 종료 태그가 필요하므로 반드시 포함해야합니다.

6. 

   문서를 작성하십시오. HTML 문서의 모든 항목을 삭제하십시오. 쓰여진 그대로 (글 머리 기호 제외) 다음 텍스트로 다시 시작합니다. 이 HTML 코드는 사용중인 HTML 유형과 모든 HTML이 태그 안에 배치 될 것임을 브라우저에 알려줍니다. 과 .

7. 

   head (head) 및 body 태그를 추가합니다. HTML 문서는 두 부분으로 나뉩니다. "상단"섹션은 페이지 제목과 같은 특별한 정보를위한 것입니다. "본문"섹션에는 페이지의 주요 내용이 포함됩니다. 이 두 섹션을 문서에 추가하고 끝 태그를 포함해야합니다. 새로 추가 된 텍스트는 굵게 표시됩니다.

8. 

   페이지 제목을 지정하십시오. 헤드 섹션에있는 대부분의 카드는 초보자와 함께 배우는 데 중요하지 않습니다. 하지만 제목 태그는 사용하기 쉽고 브라우저 창이나 브라우저 탭의 이름으로 표시되는 내용을 결정합니다. 헤드 라인 시작 및 종료 태그를 head 태그 안에 배치하고 태그 사이에 원하는 헤더를 작성합니다.
   광고

4 단계 중 2 : 텍스트 서식

1. 

   몸에 텍스트를 추가하십시오. 이 섹션에서는 본문 태그로만 작업합니다. 다른 텍스트는 여전히 문서에 있지만이 자습서에서는 반복하지 않음으로써 공간을 절약합니다. 카드 사이에 원하는 것을 쓰십시오. 과 , 페이지의 첫 번째 콘텐츠로 표시됩니다. 예를 들면 :
   • HTML 페이지를 작성하는 위키 하우 지침을 따랐습니다.

2. 

   텍스트 제목을 추가합니다. 헤더 태그를 사용하여 페이지를 구성하면 브라우저가 그 사이에 더 큰 글꼴 크기로 텍스트를 표시하도록 지시합니다. 이러한 태그는 검색 엔진 및 기타 도구에서 웹 사이트의 내용과 구성 방법을 결정하는데도 사용됩니다.
   가장 큰 제목이며, 더 작은 제목을 만들 수 있습니다.
   . 페이지에서 시도해보십시오.
   • 내 페이지에 오신 것을 환영합니다.

   • HTML 페이지를 작성하는 위키 하우 지침을 따랐습니다.

   • 오늘 내 목표 :

   • 완료된 목표 :

   • 제목을 사용하는 방법을 알아 봅니다.

   • 완료되지 않은 목표 :

   • 텍스트 서식 태그에 대해 자세히 알아보세요.

3. 

   텍스트 서식 태그에 대해 자세히 알아보세요. "strong"태그는 이미 보셨지만 텍스트 서식을 지정하는 다른 방법이 많이 있습니다. 이러한 태그를 시도하거나 동일한 텍스트 문자열에 대해 한 번에 여러 태그를 사용해보십시오. 뒷면에 끝 태그를 추가하는 것을 잊지 마십시오!
   • 브라우저에서 굵게 표시되는 중요한 텍스트입니다.
   • 브라우저에서 기울임 꼴로 표시되는 강조된 텍스트입니다.
   • 평소보다 약간 작은 텍스트. 이 텍스트는 제목에 사용되는 경우 자동으로 크기가 조정됩니다.
   • 텍스트가 더 이상 관련이 없으며 본문 대시와 함께 표시됩니다.
   • 텍스트는 다른 문서보다 나중에 삽입되며 밑줄과 함께 표시됩니다.

4. 

   페이지의 텍스트를 구성합니다. "엔터"키를 누르는 것만으로는 텍스트가 다른 줄에 표시되기에 충분하지 않다는 것을 알 수 있습니다. 이러한 태그는 단락 및 줄 바꿈을 만들거나 다른 방식으로 텍스트를 정렬하는 데 도움이 될 수 있습니다.

   • "paragraph"의 줄임말, (paragraph) 태그는 단락에서 이러한 태그 사이의 모든 텍스트를 유지하고 위와 아래의 텍스트와 구분합니다.

   • 
     이 태그는 줄 바꿈을 생성합니다. 다른 콘텐츠를 방해하지 않으므로 종료 태그를 추가하지 마십시오. 이 태그는 단락이 아닌시 또는 주소 행에 사용하십시오.

   • 텍스트를 매우 정확하게 표시해야하는 경우이 태그는 내부 텍스트를 고정 너비 글꼴 (각 글자의 너비가 동일 함)로 설정하고 간격을 만들 수 있습니다. 태그 대신 일반 편집을 위해 원하는대로 공백 및 줄 바꿈.

   • 이 태그는 소스에서 인용 된 텍스트 유형을 정의합니다.

     나중에 소스를 설명 할 수 있습니다. 인용 카드.

5. 

   보이지 않는 캡션 텍스트를 추가합니다. 댓글 태그는 웹 페이지에 표시되지 않습니다. 콘텐츠에 영향을주지 않고 HTML 문서에 주석을 달 수 있습니다. 종료 태그를 추가하지 마십시오.
   • 끝 태그가없는 카드를 "빈 태그"라고합니다.

6. 

   함께 결합하십시오. 이러한 태그를 기억하는 가장 좋은 방법은 웹 사이트에서 사용하는 것입니다. 다음은 지금까지 배운 단계의 카드를 사용한 예입니다. 브라우저에 어떻게 표시 될지 예측 한 다음 문서에 복사하여 알아보세요.
   • 내 웹 사이트에 오신 것을 환영합니다.

   • 이 페이지를 즐기시기 바랍니다!

     나는 당신을 위해 그것을 만들었습니다.

   • 1 부 : HTML을 발견 한 방법

   • 나는 이미 HTML을 배웠다 하나 두시간, 그래서 이제 나는 전문가입니다.
   광고

4 단계 중 3 : 링크 및 이미지 추가

1. 

   속성에 대해 알아 봅니다. 태그에는 속성이라고하는 추가 정보가 포함될 수 있습니다. 이러한 속성은 태그 자체 내에 추가 단어로 표시됩니다. 속성 이름 = "특정 값". 예를 들어 모든 HTML 태그는 title 속성을 가질 수 있습니다.

   • 소개 단락은 여기에 있습니다.

     웹 페이지에서 단락 위로 마우스를 가져 가면 나타나는 "소개"단락의 제목을 지정하십시오.

2. 

   다른 웹 사이트로의 링크. 카드 사용 다른 웹 페이지에 대한 하이퍼 링크를 만듭니다. href 속성을 사용하여 링크 할 웹 페이지의 URL을 삽입합니다. 읽고있는 웹 페이지로 연결되는 예는 다음과 같습니다.
   • 웹 사이트 방문자는이 텍스트를 클릭하여 링크를 따라갈 수 있습니다.

3. 

   태그에 id 속성을 추가하십시오. 모든 HTML 태그가 사용할 수있는 또 다른 속성은 "id"요소입니다. 아무 카드 에나 쓰십시오. id = "vidu" 또는 공백이없는 이름을 사용하십시오. 눈에 보이는 효과는 없지만 다음 단계에서 사용할 것입니다.
   • 예를 들어 문서에 다음을 추가합니다.

     이 단락은 id 속성이 작동하는 방식을 설명하는 예제로 사용됩니다.

4. 

   특정 ID를 가진 요소에 연결합니다. 이제 하이퍼 링크 태그를 사용할 수 있습니다. , 같은 페이지의 다른 위치로 링크합니다. URL 대신 # 기호와 연결하려는 ID 값을 차례로 사용합니다. 예를 들면 이 텍스트는 ID가 "vidu"인 텍스트로 연결됩니다.
   • 모든 HTML 값은 대소 문자를 구분합니다. "#VIDU"및 "#vidu"는 모두 동일한 위치에 링크됩니다.
   • 페이지가 한 번에 전체 페이지를 표시 할만큼 충분히 짧다면 브라우저에서 링크를 클릭해도 아무 일도 일어나지 않을 것입니다. 스크롤 막대가 나타날 때까지 창 크기를 조정 한 다음 다시 시도하십시오.

5. 

   사진을 추가하십시오. 카드 빈 태그로 종료 태그가 필요하지 않습니다. 브라우저가 이미지를 표시하는 데 필요한 모든 정보는 속성을 사용하여 추가됩니다. 다음은 각 속성에 대한 설명과 함께 wikiHow 로고를 표시하는 예입니다.
   • 
   • 속성 src = "" 사진이 어디에 있는지 브라우저에 알려줍니다. (다른 사람의 사이트에서 사진을 게시하는 것은 부적절한 것으로 간주되며 페이지가 더 이상 활성화되지 않으면 사진이 사라집니다.)
   • 속성 스타일 = "" 많은 일을 할 수 있지만 가장 중요한 것은 이미지의 너비와 높이를 픽셀 단위로 설정하는 데 사용됩니다. (별도의 속성 인 width = ""및 height = ""를 대신 사용할 수도 있지만 CSS를 사용하는 경우 크기 조정 문제가 발생할 수 있습니다.)
   • 속성 alt = "" 이미지로드에 실패한 경우 사용자에게 표시되는 이미지에 대한 간략한 설명입니다. 이것은 시각 장애인 웹 사이트 방문자를위한 스크린 리더에 사용되기 때문에 요구 사항으로 간주됩니다.
   광고

4/4 부 : 자세히 알아보기 웹 사이트 추가 및 온라인 얻기

1. 

   HTML을 확인하십시오. HTML 유효성 검사는 코드의 오류를 확인합니다. 사이트가 올바르게 표시되지 않는 경우 유효성 검사를 통해 문제를 일으키는 오류를 찾을 수 있습니다. 또한 코드가보기 좋게 표시되는지 확인하여 HTML에 대해 더 많이 알려줄 수 있지만 HTML 표준의 새로운 업데이트로 인해 더 이상 권장되지 않습니다. 잘못된 HTML을 사용한다고해서 사이트가 쓸모 없게되는 것은 아니지만 문제를 일으키거나 다른 브라우저에서 불안정하게 표시 될 수 있습니다.
   • W3C에서 무료 온라인 유효성 검사 서비스를 사용하거나 온라인에서 다른 HTML 5 유효성 검사 도구를 검색하십시오.

2. 

   태그 및 속성에 대해 자세히 알아보세요. 다른 많은 HTML 태그 및 속성과이를 배울 수있는 곳이 많습니다.
   • 더 많은 자습서와 전체 태그 목록을 보려면 w3schools 및 HTML Dog를 사용해보십시오.
   • 마음에 드는 웹 페이지를 찾은 다음 브라우저의 "페이지 소스보기"기능을 사용하여 HTML 코드를 직접 가져옵니다. 문서에 복사하고 작동 방식을 연구하십시오.
   • 다른 기사를 읽고 HTML로 표를 작성하는 방법, 메타 태그를 사용하여 검색 엔진에서 찾을 가능성을 높이거나 부서를 사용하는 방법에 대해 알아보십시오. CSS를 통해 스타일을 지정하는 데 도움이되도록 페이지의 영역을 설정하고 범위 (텍스트 요소의 스타일을 지정하는 데 사용됨)를 설정합니다.

3. 

   웹 사이트를 온라인으로 만드십시오. 웹 사이트를 호스팅 할 서비스를 선택한 다음 개인 웹 도메인에 원하는만큼 HTML 페이지를 업로드 할 수 있습니다. 이를 위해서는 FTP 업로드 소프트웨어를 사용해야하지만 많은 웹 렌탈 서비스도이 서비스를 제공합니다.
   • 사이트에 직접있는 페이지 나 이미지에 링크 할 때 전체 주소를 사용해야합니다. 예를 들어, 도메인 이름이 www.chuyengiahtmlsieudang.com이면 텍스트는이 태그에 있습니다. "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"로 연결됩니다.

4. 

   CSS로 스타일을 추가합니다. HTML 페이지가 약간 단조롭다면 CSS의 기본 사항을 학습하여 색상, 다양한 글꼴을 추가하고 요소가 배치되는 위치를 더 잘 제어 할 수 있습니다. CSS "스타일 시트"를 HTML 페이지에 연결하면 주어진 태그 내 모든 텍스트의 스타일을 자동으로 조정하여 즉석에서 대폭 변경할 수 있습니다. 여기에서 기본 서식 레이어를 조금 사용하거나 HTML Dog의 CSS 자습서에서 더 자세한 자습서를 통해 더 자세히 알아볼 수 있습니다.

5. 

   웹 사이트에 JavaScript를 추가하십시오. JavaScript는 HTML 페이지에 많은 기능을 추가하는 데 사용되는 프로그래밍 언어입니다. JavaScript 명령은 시작 태그와 끝 태그 사이에 삽입됩니다. , 대화 형 버튼 추가, 수학 문제 계산 등에 사용할 수 있습니다. w3c 예제에서 자세히 알아보십시오. 광고

조언

• 이 튜토리얼에서 사용 된 doctype 선언 (문서 유형 선언 사용)은 쉬운 형식 인 "느슨한 HTML 4.0.1 전환"(HTML 4.0.1 전환이 아님)입니다. 초보자가 사용할 수 있습니다. 사용하다 () 브라우저가 엄격한 HTML 5 형식으로 컴파일하도록하는 대신 권장되는 (일반적으로 덜 사용되는) 표준 스타일입니다.

경고

• HTML의 목적은 콘텐츠를 글로벌 형식으로 유지하는 것입니다. 배경색 및 요소의 정확한 배치와 같은 웹 사이트의 표시를 제어하지 않습니다. 이 작업을 수행 할 수있는 태그가 아직 있지만 CSS를 사용하여보다 제어 가능하고 일관된 웹 사이트를 만드는 것이 좋습니다.

필요한 것

• 메모장이나 텍스트 편집기와 같은 간단한 텍스트 편집기
• Internet Explorer 또는 Mozilla Firefox와 같은 웹 브라우저
• (선택 사항) Adobe Dreamweaver, Aptana Studio 또는 Microsoft Expression Web과 같은 HTML 편집기