HTML 튜토리얼 (초보자 용)

초보자를위한 HTML 튜토리얼HTML을 배우시겠습니까?


좋은 생각 인 것 같습니다. 따라서 우리가 초보자를위한이 HTML 튜토리얼을 구성한 이유.

오늘날 세계에는 약 17 억 개의 웹 사이트가 있습니다. 실제로 이러한 웹 사이트는 모두 한 가지 방법으로 HTML을 사용합니다..

추신 : 코딩을하지 않고 HTML을 배우고 즉시 웹 사이트를 구축하지 않으려면이 가이드를보십시오 : 무료로 웹 사이트를 만드는 방법 (HTML을 배우지 않고).

HTML 소개


HTML이란??

HTML이란?HyperText Markup Language의 약어 인 HTML은 웹 사이트 및 웹 응용 프로그램을 만들기위한 컴퓨터 언어입니다. 주로 텍스트 파일로 작성되고 HTML로 저장된 일련의 코드로 구성되며 HTML 언어로 작성된 코드는 브라우저를 통해 볼 때 아름답고 형식이 잘 지정된 텍스트 또는 텍스트와 미디어의 조합으로 변환됩니다..

HTML은 1990 년 영국의 물리학 자 Tim Berners-Lee에 의해 처음 개발되었으며, 그 이후로 많은 진화를 거쳤으며 가장 최근의 버전은 언어가 처음 발명되었을 때 생각했던 것보다 훨씬 더 많은 것을 달성 할 수있었습니다..

이 학습서에서는 HTML의 기본 사항을 살펴보고 초보자로서 HTML을 시작하기 위해 알아야 할 모든 것.

HTML 버전

첫째, HTML이 발명 된 이후 모든 HTML 버전에 대한 빠른 요약.

  • HTML 1.0: 이것은 HTML의 기본 버전이자 언어의 첫 번째 릴리스였습니다..
  • HTML 2.0:이 버전은 1995 년에 도입되었습니다. 양식 기반 파일 업로드, 테이블, 클라이언트 측 이미지 맵 및 국제화를 포함한 추가 기능을 사용할 수 있도록 점진적으로 진화했습니다..
  • HTML 3.2: 월드 와이드 웹의 표준 개발을 보장하기 위해 1994 년 Tim Berners-Lee가 월드 와이드 웹 컨소시엄 (W3C)을 설립했습니다. 1997 년에 그들은 HTML 3.2를 출판했습니다..
  • HTML 4.0: 1997 년 후 W3C는 HTML 4.0 (브라우저 별 요소 유형 및 속성을 많이 채택한 버전)을 출시했습니다..
  • HTML 4.0은 1998 년에 약간의 편집으로 나중에 재발행되었습니다.
  • HTML 4.01: 1999 년 12 월 HTML 4.01이 출시되었습니다..
  • XHTML:이 사양은 2000 년에 도입되었으며 HTML 4.01과의 공동 표준으로 사용하는 것이 좋습니다. 코드를 올바르게 작성하고 프로그래밍 언어 간 상호 운용성을 보장하기 위해 XML을 통합했습니다..
  • HTML5: W3C는 2014 년 10 월에 권장 사항으로 HTML5를 게시 한 후 2016 년 11 월에 HTML 5.1을 릴리스했습니다..

HTML 편집기 선택

HTML 편집기를 선택하십시오HTML로 웹 페이지를 만들려면 HTML 편집기가 필요합니다. HTML 편집기를 사용하면 몇 가지 이점이 있습니다.

좋은 HTML 편집기를 사용하면 코드를 깨끗하고 체계적으로 유지할 수 있습니다. 또한 버그가있는 코드를 피하고 타이핑 횟수를 줄 이도록 새 태그를 열면 자동으로 닫힙니다. 오늘날 대부분의 HTML 편집기를 사용하면 WYSIWYG 기능을 사용하여 웹 브라우저에서 웹 페이지가 어떻게 표시되는지 미리 볼 수 있습니다.

무료 및 유료 HTML 편집기가 많이 있으며 다음은 선택할 수있는 최고의 옵션 중 일부입니다.

HTML의 기본 구성 요소


사용하려는 HTML 편집기를 결정했으면 다음 단계는 HTML의 구성 요소를 이해하는 것입니다. HTML로 코딩 할 때 이러한 구성 요소를 이해해야합니다. 태그, 속성 및 요소가 포함됩니다. 아래에서 기본 사항을 살펴 보겠습니다.

태그 소개

HTML에 익숙해지면 가장 먼저 이해해야 할 것은 태그입니다. 본질적으로 태그는 일반 텍스트와 HTML 코드를 구분합니다.

따라서 HTML과 관련하여 태그는 문서가 일반 텍스트로 표시되는지 또는 기본적으로 일련의 사물 (하이퍼 링크, 이미지, 미디어 또는 기타)을 표시하는 것으로 보이는 텍스트 코드 인 “변환 된 텍스트”로 표시되는지의 차이를 만듭니다. 태그를 기반으로 표시하도록 지시 된 내용에 따라 형식을 지정하는 방법).

예를 들어 “그는 소년이다”라는 단어를 살펴 보겠습니다.

  • 평범한 텍스트 형식으로, 당신은 얻는다 : 그는 소년이다.
  • 굵은 텍스트 형식으로 다음을 얻을 수 있습니다. 그는 소년

우리가 굵은 글씨체로 된 것을 얻으려면 꼬리표.

HTML에서 텍스트를 굵게 표시

원시 HTML에는 그는 소년 브라우저는 다음과 같이 번역합니다. 그는 소년.

“그는 소년이다”도 이탤릭체로 나올 수 있습니다.

이것은 꼬리표.

HTML에서 텍스트를 기울임 꼴로 표시

우리는 : 그는 소년 다음으로 나온다 그는 소년.

하이퍼 링크는 꼬리표.

HTML로 텍스트를 하이퍼 링크로 만들기

원시 HTML에는 다음이 있습니다. 그는 소년임을 보여주는 소년입니다..

태그에 대해 이해해야 할 것이 몇 가지 있습니다.

  • 태그는 실제로 HTML의 구성 요소입니다. 태그없이 HTML을 수행 할 수 없습니다! 사용할 태그가 붙어 있다면 HTML 주기율표를 확인하십시오..
  • 열려있는 거의 모든 태그를 닫아야합니다. 예외가 있음을 명심하십시오. 닫을 필요가없는 태그의 예는 줄 바꿈과 같은 빈 태그입니다.
    .
  • 태그는 ( “<”) and greater than (“>”) 꺾쇠 괄호. 닫는 태그에는 닫는 태그 이름 앞에 오는 후행 슬래시가 포함됩니다. 열린 태그의 예 : . 닫힌 태그의 예 .
  • 모든 HTML 파일은 여는 태그로 시작합니다 닫는 태그로 끝납니다. HTML 파일의 첫 번째 줄은 브라우저가 사용자가 사용하는 HTML 버전을 알 수 있도록 문서 유형을 선언해야합니다. HTML 페이지가 ‘HTML 코드가 시작되기 전에”.

내용이 추가되기 전에 대부분의 HTML 파일은 기본적으로 다음과 같습니다.

HTML--

다음에 나오는 섹션 태그에는 일반적으로 제목, 메타 태그 및 CSS 파일을 찾을 위치 (브라우저 페이지에서 직접 볼 수없는 내용)와 같은 문서에 대한 정보가 포함됩니다. 사이의 섹션 과”( ‘MAIN CONTENT’로 표시)는 뷰어에서 브라우저에서 볼 수있는 HTML 파일의 기본 컨텐츠가있는 위치입니다. 여기에는 첫 번째 단락부터 하이퍼 링크, 서식, 멀티미디어 및 기타 모든 것이 포함됩니다..

요소 소개

요소 소개

HTML에서 “요소”는 태그 사이의 내용뿐만 아니라 여는 태그와 닫는 태그로 구성됩니다..

그는 소년”(굵은 글씨) 예를 들면 다음과 같습니다. 그는 소년. “그는 소년이다”라는 텍스트는 열린 태그와 닫힌 태그로 둘러싸여 있습니다. 여는 태그, 내용 및 닫기 태그를 포함한 모든 요소는 요소입니다..

태그가 열리고 컨텐츠가 도입되고 태그가 닫히면 요소가 생깁니다..

요소는 기본 형식이거나 복잡한 형식 일 수 있습니다. 왜? 이러한 태그뿐만 아니라 열린 태그와 닫는 태그 사이에있는 요소가 하나의 요소이기 때문입니다. 그것은 요소 안에 요소를 가질 수 있음을 의미합니다. 현재 예에서 “그는 소년이다”(그는 소년)는 요소입니다.

앞서 HTML 문서에 HTML 문서에 내용이 시작되기 전에 태그. 내용은 수백 가지의 다른 요소를 포함 할 수 있지만 이러한 모든 요소는 “본문”요소의 일부입니다 (본문 요소가 열려 있고 내용을 포함하고 닫힌 이후)..

속성 소개

HTML 문서는 기본적으로 모든 것에 태그를 사용하지만 때때로 요소 내부에 추가 정보를 전달하려고합니다. 이 경우 속성을 사용합니다. 이 속성은 요소의 특성을 정의하는 데 사용되며 요소의 여는 태그 안에 사용됩니다. 속성은 이름과 값으로 구성됩니다.

속성 값은 형식을 사용하여 따옴표 안에 넣습니다. 당신의 텍스트.

속성의 예

:

그는 소년

이 예에서, 우리는“그는 소년이다”가 문서의 중앙에 정렬되도록 지시하고 있습니다.

HTML 시작하기


HTML 시작하기오늘 고유 한 기본 HTML 문서를 작성한다고 가정하면 어떻게 시작합니까? 페이지 제목 작성에서 양식 작성에 이르기까지 아래에서 HTML을 시작하는 방법을 안내합니다..

HTML 만들기 요소

HTML 문서를 만들 때 가장 먼저 만드는 것은 요소. 여기에는 메타 데이터 (또는 HTML 문서에 대한 데이터)가 포함됩니다. 여기에는 문자 세트, 문서 제목, 문서 스타일, 스크립트 등과 같은 정보가 포함됩니다..

의 일부 요소 제목을 포함하여 꼬리표.</p><p><strong>예</strong>:</p><pre><title>이 페이지 제목입니다

이 제목은 브라우저 탭에 표시됩니다. 또한 검색 엔진 봇이 웹 사이트를 크롤링 할 때 페이지 제목으로 색인이 생성됩니다.

이것은 또한 포함 요소는 검색 엔진이 목록의 컨텐츠를 설명하는 데 사용할 수있는 정보를 지정하는 데 자주 사용됩니다. 여기에는 설명, 키워드, 저자 정보 등이 포함됩니다. element는 또한 HTML 문서가 사용하는 문자 세트를 지정합니다.

HTML로 제목 만들기

html로 제목 만들기

제목은 웹 사이트의 성공에 중요한 역할을합니다. 첫째, 독자가 페이지 내용을 쉽게 스캔 할 수 있도록합니다. 둘째, 더 중요한 것은 웹 페이지의 구조를 검색 엔진에 전달하므로 검색 엔진 결과에서 콘텐츠의 순위에 영향을주는 경우가 많습니다.

즉, 제목 태그를 사용하여 텍스트를 크게 또는 굵게 표시하지 않는 것이 중요합니다. 이를 위해 사용할 수있는 다른 태그가 있습니다 (이 섹션의 뒷부분에서 설명하겠습니다). 대신 제목 태그는 구조용으로 만 사용해야합니다..

HTML에는 6 개의 제목 태그가 있습니다.

, 와 더불어

가장 중요한 제목과
가장 중요한 제목을 나타내는 태그.

제목을 만들려면 만들려는 제목을 결정하고 일반 제목 태그로 제목을 연 다음 완료된 후에는 항상 태그를 닫으십시오.

HTML 제목 예:

  • 이것이 첫 번째 HTML 제목입니다

    (가장 큰)

  • 이것이 두 번째 HTML 제목입니다

  • 세번째 HTML 제목입니다

  • 네 번째 HTML 제목입니다.

  • 이것은 다섯 번째 HTML 제목입니다
  • 여섯 번째 HTML 제목입니다

단락 만들기

HTML로 단락 만들기

다음 단계는 단락을 만드는 것입니다. 문단은

꼬리표.

:

이것이 첫 번째 단락입니다.

이것은 두 번째 단락이며 더 많은 단락을 만들 것입니다.

HTML로 작성하는 것은 순수한 텍스트로 작성하는 것과는 매우 다릅니다. 따라서 새 단락을 시작하지 않고 HTML 내부에서 텍스트를 분리하면 브라우저에서 텍스트를 표시 할 때 중요하지 않습니다. 대신 줄 바꿈을 사용하려고합니다.
꼬리표.

:

이것은 새로운 단락입니다. 그리고 나는 많은 새로운 줄을 사용하고 싶습니다. 그래서 나는 헤어지고있다.

이것은 다음과 같이 나오지 않을 것입니다 :

이것은 새로운 단락입니다.
그리고 나는 많은 새로운 줄을 사용하고 싶습니다.
그래서 나는 헤어지고있다.

대신 다음과 같이 나옵니다.

이것은 새로운 단락입니다. 그리고 나는 많은 새로운 줄을 사용하고 싶습니다. 그래서 나는 헤어지고있다.

따라서 텍스트를 새 줄로 나누면 다음과 같이 표시됩니다.

이것은 새로운 단락입니다.
그리고 나는 많은 새로운 줄을 사용하고 싶습니다.
그래서 나는 헤어지고있다.

줄 바꿈을 사용하여.

:

이것은 새로운 단락입니다.
그리고 나는 많은 새로운 줄을 사용하고 싶습니다.
그래서 나는 헤어지고있다.

즉, 줄 바꿈 (
) 태그는 빈 태그이므로 닫을 필요가 없습니다..

HTML에서 텍스트 서식

HTML에서 텍스트 서식

다음 단계는 텍스트를 HTML로 형식화하는 것입니다. 여기에서 텍스트를 굵게, 기울임 꼴, 밑줄, 첨자, 위첨자 등으로 표시할지 여부를 표시 할 수 있습니다.이 안내서는 기본적인 지침이므로이 섹션은 서식 지정에있어 가장 중요한 것은 아닙니다. 대신 몇 가지 기본 서식 태그 만 포함합니다. 다른 형식의 서식을 사용하는 과정은 간단합니다. 원하는 태그를 찾아서 진행하십시오.

굵은 체 사용: 그는 소년 로 나온다 그는 소년

이탤릭체 사용: 그는 소년 로 나온다 그는 소년

밑줄 텍스트: 그는 소년 로 나온다 그는 소년. 주목할 가치가 있습니다. 태그는 HTML 4.01에서 더 이상 사용되지 않으며 HTML5에서 스타일이 다른 텍스트를 나타내도록 재정의되었습니다. 따라서 밑줄을 긋는 텍스트를 나타 내기 위해 CSS를 사용하는 것이 좋습니다. 이 도움말은 기본 가이드이므로 간단하게 유지하고 있습니다.

아래 첨자 사용: 그는 소년 로 나온다 그는 소년

위첨자 사용: 그는 소년 로 나온다 그는 소년

서식을 지정하는 데 사용할 수있는 다른 태그의 경우 관련 리소스가 많이 포함 된이 리소스의 끝에있는 용어집을 살펴볼 수 있습니다..

정렬 된 및 정렬되지 않은 목록

조만간 목록을 작성해야합니다. 목록은 순서 (예 : 번호가 매겨 짐) 또는 순서가 지정되지 않은 (예 : 번호가 매겨지지 않음).

다음은 순서 목록의 예입니다.

  1. 항목 1
  2. 항목 2
  3. 항목 3

그것을 만드는 방법은 다음과 같습니다.

  1. 항목 1
  2. 항목 2
  3. 항목 3

순서가없는 목록의 예는 다음과 같습니다.

  • 항목 1
  • 항목 2
  • 항목 3

그것을 만드는 방법은 다음과 같습니다.

  • 항목 1
  • 항목 2
  • 항목 3

아직 명확하지 않은 경우. 분류는 다음과 같습니다.

그만큼

  • 태그는 목록의 각 항목을 나타내는 데 사용됩니다. 목록을 만들 때
      순서 목록 ( “o”= 순서 및 “l”= 목록)을 나타내는 태그 또는