HTML 페이지를 만드는 방법

작가: Florence Bailey
창조 날짜: 20 3 월 2021
업데이트 날짜: 1 칠월 2024
Anonim
HTML 기초 1회, 누구나 웹페이지를 만들 수 있습니다^^
동영상: HTML 기초 1회, 누구나 웹페이지를 만들 수 있습니다^^

콘텐츠

HTML(Hypertext Markup Language)은 웹 페이지 개발을 위한 기본 프로그래밍 언어입니다. 간단하고 편리한 프로그래밍 언어로 만들어졌습니다. 인터넷에 있는 대부분의 페이지는 이 언어(ColdFusion, XML, XSLT) 형식 중 하나를 사용하여 개발되었습니다. 이 기사를 읽은 후 인터넷의 다른 리소스를 사용하여 교육을 계속할 수 있습니다. 이 주제와 관련된 다른 기사를 인터넷에서 검색해 보십시오.

단계

방법 1/1: HTML 페이지 작성

  1. 1 여기에 제시된 단계 중 하나에 익숙해지기 전에 "필요한 것" 섹션을 참조하십시오.
  2. 2 이 문제를 이해하기 전에 알아야 할 사항:
  3. 3 기본. 태그라고 들어보셨나요? 태그는 내부에 단어가 있는 꺾쇠 괄호로 둘러싸여 있습니다. 끝 태그는 동일한 형식으로 작성되지만 첫 번째 꺾쇠 괄호 뒤에 슬래시가 추가됩니다. 속성은 태그에 세부 정보를 추가하는 데 사용되는 태그의 선택적 단어입니다.
  4. 4 문서의 시작 부분입니다. 사용 중인 텍스트 편집기에 다음을 붙여넣습니다.
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
    태그는 동일한 태그로 닫아야 하지만 첫 번째 꺾쇠 괄호 뒤에 슬래시가 있어야 합니다. 태그와 같은 예외가 있습니다. 메타 또는 DOCTYPE.
  5. 5 DOCTYPE
    • 일반적으로 대부분의 웹 페이지는 문서 유형 ". 이것은 인코딩과 웹 브라우저에서 인코딩을 인식하는 방법을 결정하는 데 도움이 됩니다. 대부분의 페이지는 그것 없이도 작동하지만 "일치하려면 이것이 필요합니다(인터넷에서 인코딩 유형과 사용 방법을 규제합니다)... HTML 4.01용 DOCTYPE은 다음과 같습니다! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> 이것은 하나입니다. 가장 일반적인 DOCTYPE은 인터넷의 모든 페이지에서 사용됩니다.먼저 'html'을 설명하는 페이지 유형을 가리킨 다음 인코딩 유형을 강조 표시하고 마지막으로 웹 브라우저용 페이지를 설명하는 DOCTYPE의 위치를 ​​강조 표시합니다.
    • 예를 들어 새 태그 또는 특정 태그를 사용하는 것과 같이 다양한 유형의 HTML(수년에 걸쳐 개발된 다양한 버전)이 있습니다. 일부 태그는 더 이상 사용되지 않습니다(다른 더 유용한 태그가 대신 사용됨).
    • b> 그리고 나> - 이것은 현재 태그에 부과된 것입니다. 왜냐하면 그것들은 텍스트를 변환하는 데 사용되지만 사양은 아니기 때문에 결과적으로 다른 태그가 이를 대체하기 위해 옵니다. 꼬리표 강한> 의 대체품입니다 나>, 그리고 엠>, 대체 나>.
    • 이전 태그를 서식 이상의 태그로 교체하는 것이 중요합니다. 텍스트가 번역되면 형식뿐만 아니라 의미도 동일하게 유지됩니다. 이것은 의미상 정확합니다.
    • XHTML 버전 2.0에서 b> 및 나> HTML 버전 3+에서와 같이 사용되지 않습니다.
  6. 6 HTML "캡슐화 규칙".
    • 현재 사용 중인 더 중요한 태그를 살펴보겠습니다. 페이지를 만드는 동안 간단한 구조가 사용됩니다. 태그가 열리면 결과적으로 닫혀야 한다... 이것은 전체 구조에 적용됩니다. 다음은 XHTML 레이아웃 구조의 유효한 예입니다.
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • 머리>
    • 메타 http-equiv = "콘텐츠 유형" 콘텐츠 = "텍스트 / html; charset = utf-8" />
    • 제목> Hello World! / 제목>
    • / 머리>
    • 몸>
    • h1> Hello World! / h1>
    • / 바디>
    • / html>
    • 메시지를 발행하는 샘플 코드 안녕하세요 세계... 이것을 시험이라고 한다 안녕하세요 세계.
  7. 7 표제
    • 웹 페이지 제목은 태그 사이의 내용입니다. 머리>... 이 콘텐츠는 사용자가 볼 수 없습니다(페이지 제목에 표시된 제목만). 태그 간 정보 머리>, 다음과 같은 다른 태그를 묶을 수 있습니다.

      • META 태그는 검색 엔진 및 기타 유틸리티에 유용한 정보에 사용됩니다.
      • 스타일(CSS)과 같이 문서 간의 링크를 생성하는 LINK 태그.
      • SCRIPT 태그에는 (다른 문서에서) 원격으로 액세스할 수 있는 기능과 함께 거의 모든 웹 코딩이 포함됩니다.
      • 본질적으로 페이지에 적용할 수 있는 스타일인 STYLE 태그.
      • TITLE 태그는 웹 브라우저에서 페이지의 제목으로 나타나는 제목입니다.
    • 이 웹사이트에서 가져온 예제 헤더에서 이들 중 일부의 데모를 보겠습니다(축소됨).
      • 머리>
      • 제목> ... / 제목>
      • 메타 이름 = "설명" 내용 = "..." />
      • 링크 rel = "스타일시트" 유형 = "텍스트/css" href = "..." />
      • 메타 http-equiv = "콘텐츠 유형" 콘텐츠 = "텍스트/html; 문자 집합 = UTF-8" />
      • 스타일 유형 = "텍스트 / CSS" 미디어 = "전체"> ... / 스타일>
      • 스크립트 유형 = "텍스트 / 자바스크립트" src = "..."> / 스크립트>
      • / 머리>

        눈치채지 못한 경우를 대비하여 실제 정보가 제거된 개별 태그가 강조 표시되었습니다. 예제는 다소 짧고 다음에서 찾을 수 있는 거의 모든 태그를 보여줍니다. 머리>HTML 주석을 제외하고(간단한 태그에서 이에 대해 이야기할 것입니다).
  8. 8 어디서나 간단한 태그
    • 계속해서 다른 태그를 살펴보겠습니다. 태깅에 주의하고 "캡슐화"의 법칙을 기억하십시오.

      • strong> 중요한 텍스트를 강조합니다.
      • small> 텍스트를 작게 만듭니다. 글꼴 크기는 1에서 7까지의 표준 단위로 측정되며 3이 기본 텍스트 크기입니다. ...
      • pre> 서식 있는 텍스트 블록을 정의합니다. 그것이 맞기 때문에 그러한 텍스트는 같은 크기의 글꼴로 입력되며 단어 사이에는 모든 공백이 있습니다.
      • em> 텍스트를 구로 표시합니다.
      • del> 텍스트를 삭제합니다.
      • ins> 문서에 삽입된 텍스트를 정의합니다.
      • h1> 많은 표제 태그 중 하나입니다. 이러한 종류의 태그는 숫자가 다른 'h'로 시작합니다. 같은 번호의 태그를 닫아야 합니다.
      • p> 단락을 정의합니다.
      • ! --- ... ---> 다른 태그와 달리 주석은 태그 내부에 있어야 합니다. 이 정보는 코드를 볼 때만 볼 수 있습니다.
      • blockquote> 인용문을 표시하며 cite> 태그와 함께 사용할 수 있습니다.
      • 위의 몇 가지 예는 기존 태그의 전체 목록이 아닙니다. 다른 사람에 대해 알아보려면 방문하십시오.
  9. 9 명확한 구조 만들기
    • 페이지는 정보를 단락으로 구문 분석할 수 있도록 간단한 태그 세트에 데이터를 보유하도록 설계되었습니다. 컴퓨터는 데이터를 인식하지만 컨텍스트나 개념적 연결에 대해서는 알지 못합니다. 우리는 컴퓨터 친화적인 HTML 페이지를 만들어야 합니다. 이것은 div 태그를 사용하여 수행됩니다. 엄청난 수의 페이지를 만드는 데 도움이 됩니다. CSS로 스타일을 지정할 수 있으며 레이아웃을 위한 큰 코드 테이블을 만드는 것보다 쉽습니다.
      • div> 이 태그는 스타일을 지정할 수 있고 사용자와 컴퓨터가 모두 이해할 수 있는 별도의 정보 블록을 사용할 수 있기 때문에 특별합니다.
    • div 태그를 사용하는 간단한 HTML 레이아웃을 살펴보겠습니다.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • 머리>
      • 메타 http-equiv = "콘텐츠 유형" 콘텐츠 = "텍스트 / html; charset = utf-8" />
      • 제목> Hello World! / 제목>
      • / 머리>
      • 몸>
      • h1> Hello World! / h1>
      • div ID = "contentOne">
      • p> 이것은 div # contentOne의 일부 텍스트입니다. / p>
      • div>
      • p> div # contentOne / p> 하위 섹션의 단락
      • / div>
      • / div>
      • / 바디>
      • / html>
    • div> 태그를 사용하면 CSS 및 Javascript로 작업하는 동안 스타일을 찾고 수정하는 데 도움이 됩니다. HTML은 CSS 스타일 및 Javascript와 함께 작동하기 위해 다른 인코딩을 사용하여 더 좋고 반응이 빠른 사용자 경험을 만듭니다.

팁

  • 이 기사를 읽은 후에는 멈추지 말고 알아야 할 모든 것을 배웠다고 생각하십시오. 특히 이 기술에서는 항상 배워야 할 것이 있습니다.
  • 코드를 배우고, 이해하고, 작성하십시오.
  • 일부 태그는 >만 사용합니다. Para 및 br이 몇 가지 예입니다. >로 열린 다른 태그는 더 닫아야 합니다. 예: "div> / div>".
  • 사람들은 새로운 발견을 기대하므로 재창조, 디자인 또는 코드화합니다.
  • 많이 배웠다면 서버 프로그래밍을 배워보세요.
  • CSS뿐만 아니라 Javascript로 작업하는 방법을 배웁니다.

경고

  • HTML은 콘텐츠 편집에 관한 것임을 기억하십시오. 즉, HTML은 인식된 형식으로 콘텐츠를 저장하는 데만 사용됩니다. 다른 변경은 CSS와 같은 다른 기술을 사용하여 수행해야 합니다. 또한 "의미상 올바른다른 사람들이 인정하지 않더라도. 다른 프로그래밍 언어는 웹 페이지(CSS, Javascript 및 XML)를 구축하는 데 도움이 됩니다. HTML은 콘텐츠 생성자입니다.

뭐가 필요하세요

  • ANSI 인코딩을 지원하는 텍스트 편집기
  • Internet Explorer 또는 Mozilla Firefox와 같은 웹 브라우저
  • (선택 사항) Adobe Dreamweaver, Aptana Studio 또는 Microsoft Expression Web과 같은 wysiwyg 또는 wykiwyg HTML 편집기

인기있는 출판물

이미지를 PDF로 변환하는 방법
이미지를 PDF로 변환하는 방법
그램을 칼로리로 변환하는 방법
그램을 칼로리로 변환하는 방법
게임 문명 혁명에서 승리하는 방법
게임 문명 혁명에서 승리하는 방법
보석을 연마하는 방법
보석을 연마하는 방법