인형 기본 HTML 안내서

최종 업데이트 : 05 년 2020 월 XNUMX 일


XNUMX 년 전만해도 취미 블로거 일지라도 자신을 보호하거나 사이트에 간단한 기능을 추가하려면 웹 코딩을 알아야했습니다. 하지만 이제는 사용 가능한 편집기와 플러그인이 너무 많아서 HTML의 기본을 알기 만해도 더 이상 필요하지 않습니다.

이것의 문제는 몇 가지 기본 사항을 모르는 경우 블로그에서 쉽게 실제 문제에 빠지고 사소한 문제를 해결하기 위해 값 비싼 개발자를 고용해야한다는 것입니다. 뿐만 아니라 사용자 정의 텍스트 위젯을 추가하는 것과 같이 블로그를 변경하려면 약간의 지식이 필요합니다.

HTML 코드.
HTML "코드".

콘텐츠 레이아웃이 올바르지 않다고 생각하면 HTML 지식을 통해 정상적으로 돌아올 수 있습니다.

다음은 블로거 및 비 -techie 온라인 비즈니스 소유자를위한 HTML 안내서입니다.

HTML은 오늘날 인터넷의 중추입니다. 수백만 개의 웹 사이트가 함께 인터넷을 형성했습니다. HTML은 이 모든 웹 사이트의 빌딩 블록.

시작하기 전에…

1. HTML이란 무엇입니까?

HTML은의 약어입니다. Hyper T내선 MArkupe L고뇌. 웹 브라우저 용 태그를 붙이기위한 표준 언어입니다.

HTML은 "요소"로 표시됩니다. 요소는 "태그"라고도합니다.

2. HTML이 필요한 이유는 무엇입니까?

웹 브라우저는 지원되는 언어로 작성된 웹 사이트 만 렌더링 할 수 있습니다. HTML은 가장 일반적인 마크 업 언어이며 웹 브라우저에서 가장 많이 사용됩니다.

그래서 HTML이 필요합니다.

3. HTML은 대소 문자를 구분합니까?

HTML은 대소 문자를 구분하지 않습니다. 그러나 적절한 경우와 함께 HTML을 작성하는 것이 가장 좋습니다.

첫 번째 HTML 파일 만들기 단계

컴퓨터의 메모장을 사용하여 기본 HTML 파일을 만들 수 있습니다. 그러나 많은 코드를 작성하는 것은 고통 스러울 것입니다.

코드 편집기가 필요합니다. 훌륭한 코드 편집기를 사용하면 큰 코드를 작성하고 구성하는 것이 더 쉬워집니다.

나는 사용하고 추천한다. 메모장 + + (무료 및 오픈 소스) 웹 언어 작성. 다른 편집기를 사용할 수도 있습니다. 서브lime 텍스트, Atom

다음은 수행해야 할 작업입니다.

  1. 코드 편집기 설치
  2. 열어 봐.
  3. 새 파일 만들기
  4. .html 파일로 저장하십시오.

당신은 갈 준비가되었습니다!

코드 편집기 Atom의 예
코드 편집기 – Atom

1. 안녕하세요!

다음 코드를 복사하여 새 HTML 파일에 붙여 저장하십시오. 이제 웹 브라우저에서 실행하십시오.

암호:

내 첫 웹 페이지 안녕하세요!

출력:

축하해! 처음 HTML 파일을 만들었습니다. 이 시점에서 이해할 필요는 없습니다. 우리는 곧 그것을 다룰 것입니다.

HTML 구조 이해하기

모든 HTML 파일에는 일반적인 나체 구조가 있습니다. 이것은 모든 것이 시작되는 곳입니다. 그리고 모든 커다란 코드 페이지는 트리밍 후이 구조로 올 것입니다.

그러니“Hello World!”에서 이해해 봅시다! 암호. 다음 요소는 모든 HTML 파일의 필수 부분입니다.

  • = 이것이 HTML 파일임을 브라우저에 대한 선언입니다. 전에 지정해야합니다. 꼬리표.
  • = 이것은 HTML 파일의 루트 요소입니다. 당신이 쓰는 모든 것은 과 .
  • = 이것은 브라우저의 메타 정보 부분입니다. 이 태그 안의 코드에는 시각적 출력이 없습니다.
  • = 웹 브라우저가 렌더링하는 부분입니다. 웹 사이트에서 정확히 볼 수있는 것은 과 .

2. HTML 태그

HTML은 수백 개의 서로 다른 태그의 공동 작업입니다. 어떻게 작동하는지 배워야합니다. 또한 그들이 올바른 방법으로 사용했는지 확인해야합니다.

HTML 태그에는 일반적으로 열기 및 닫기 태그가 있습니다. 여는 태그에는보다 작음 (<) 및보다 큼 (>) 기호로 묶인 키워드가 있습니다. 닫는 태그는 모두 동일하지만보다 작음 (<) 기호 뒤에 추가 슬래시 (/)가 있습니다.

(2a) 헤드 태그

모든 헤드 태그는 과 . 여기에는 웹 브라우저 및 검색 엔진에 대한 메타 정보가 포함되어 있습니다. 기본적으로 시각적 출력이 없습니다.

제목 태그는 브라우저 탭에 표시되는 웹 페이지의 제목을 정의합니다. 이 정보는 웹 프로그램 및 검색 엔진에서 사용됩니다. HTML 파일 당 가장 높은 제목을 가질 수 있습니다.

암호:

내 첫 웹 페이지
제목 태그-HTML 샘플
제목 태그가 브라우저 상단에 나타납니다.

링크 태그는 HTML 페이지를 외부 리소스와 연결합니다. 주요 용도는 HTML 페이지를 CSS 스타일 시트와 연결하는 것입니다. 자동으로 닫히는 태그이며 엔딩이 필요하지 않습니다. . 여기서 rel은 파일과의 관계를 나타내고 src는 소스를 의미합니다.

암호:

메타는 HTML 파일의 메타 정보를 제공하는 또 다른 자체 마감 태그입니다. 검색 엔진 및 기타 웹 서비스는 이러한 정보를 사용합니다. 검색 엔진에 맞게 페이지를 최적화하려면 메타 태그가 필수입니다.

암호:

<meta name="description" content="This is the short description that search engines show"

script 태그는 서버 측 스크립트를 포함하거나 외부 스크립트 파일에 대한 링크를 만드는 데 사용됩니다. 시작 태그에는 두 개의 속성이있을 수 있습니다. 하나는 유형이고 다른 하나는 소스 (src)입니다.

암호:

Noscript 태그는 웹 브라우저에서 스크립트가 비활성화 된 경우 작동합니다. 그것은 웹 브라우저에서 스크립트를 허용하지 않는 사용자와 호환되는 페이지를 만듭니다.

암호:

아아! 스크립트가 비활성화됩니다.

(2b) 바디 태그

모든 body 태그는 과 . 시각적 출력이 있습니다. 이것은 대부분의 작업이 수행되는 곳입니다. 이러한 태그를 사용하여 기본 페이지 콘텐츠를 구성해야합니다.

...에

이것이 표제 태그입니다. 가장 중요한 제목은 그리고 가장 덜 중요한 . 올바른 계층 구조에서 사용해야합니다.

암호:

이것은 h1 제목입니다. 이것은 h1 제목입니다. 이것은 h1 제목입니다 이것은 h2 제목입니다. 이것은 h2 제목입니다. 이것은 h2 제목입니다.

출력:

태그 서식 지정

HTML 파일의 텍스트는 많은 형식 지정 태그를 사용하여 형식을 지정할 수 있습니다. 콘텐츠의 단어 또는 행을 강조 표시해야 할 때 필요합니다.

암호:

여러 가지 방법으로 텍스트를 강조 표시 할 수 있습니다. 굵게 , 밑줄 , 기울임 꼴 , 표 , 아래 첨자 , 위 첨자 등!

출력:

주석 태그를 사용하여 일부 코드의 렌더링을 벗어날 수 있습니다. 코드는 소스 코드에 나타나지만 렌더링되지는 않습니다. 이 태그의 주요 용도는 나중에 참조 할 수 있도록 html 파일의 문서를 만드는 것입니다.

예:

You can comment out any code by surrounding them in this way -->

(2c) 기타 중요한 HTML 태그

앵커는 거의 모든 곳에서 사용되는 귀중한 태그입니다. 하나 이상의 앵커 링크가 없으면 어떤 웹 페이지도 온라인으로 보지 못합니다.

구조는 동일합니다. 그것은 개폐 부분이 있습니다. 고정하려는 텍스트는 과 사이 에 있습니다.

사용자가 클릭 한 후 어디로 어떻게 이동하는지 정의하는 몇 가지 속성이 있습니다.

  • ahref =”“ = 대상 링크를 정의합니다. 링크는 큰 따옴표로 묶입니다.
  • target =”“ = URL이 새 브라우저 탭에서 열리거나 동일한 탭에서 열릴 지 여부를 정의합니다. target =”_ blank”는 새 탭용이고 target =”_ self”는 동일한 탭에서 열기위한 것입니다.
  • rel =”“ = 현재 페이지와 링크 된 페이지의 관계를 정의합니다. 링크 된 페이지를 신뢰하지 않는 경우 rel =”nofollow”를 정의 할 수 있습니다.

암호:

Google로 이동 하려면 여기 를 클릭하세요 . 새 탭에서 열립니다. 여기를 클릭하십시오 . 또한 Google로 이동하지만 현재 탭에서 열립니다.

출력:

이미지 태그는 많은 이미지 기반 웹 사이트를 상상할 수없는 또 다른 중요한 태그입니다.

자동으로 닫히는 태그입니다. 다음과 같은 전통적인 폐쇄가 필요하지 않습니다. . 올바르게 사용하기 전에 알아야 할 몇 가지 속성이 있습니다.

  • src =”“ = 이것은 이미지의 소스 링크를 정의하기위한 것입니다. 큰 따옴표 사이에 링크를 삽입하십시오.
  • alt =”“ = 대체 텍스트를 나타냅니다. 이미지가로드되지 않으면이 텍스트는 사용자에게 누락 된 이미지에 대한 아이디어를 제공합니다.
  • 너비 =”“ = 이미지의 너비를 픽셀 단위로 정의합니다.
  • 높이 =”“ = 이미지의 높이를 픽셀 단위로 정의합니다.

예:

2014 년 500 월 Googleplex입니다. 이 이미지의 너비는 375 픽셀이고 높이는 0 픽셀입니다.

출력:

팁 : 클릭 가능한 이미지를 삽입 하시겠습니까? 이미지 코드를 태그로 묶습니다. 어떻게되는지보세요.

또는

목록 태그는 항목 목록을 생성하기위한 것입니다. 순서 목록 (번호 목록)을 의미하며 순서가 지정되지 않은 목록 (글 머리 기호)을 나타냅니다.

내부 목록 항목 또는 태그 됨 . li는 목록을 의미합니다. 당신은 많은 것을 가질 수 있습니다 부모 안에서 원하는대로 또는 꼬리표.

암호:

다음은 정렬 된 목록입니다. 항목 1 항목 2 항목 3 순서가 지정되지 않은 목록입니다. 항목 1 항목 2 항목 3

출력:

표 태그는 데이터 표를 만들기위한 것입니다. 표 머리글, 행 및 열을 정의하는 몇 개의 내부 수준 태그가 있습니다.

외부 부모 코드입니다. 이 태그에서 테이블 행을 나타냅니다. 테이블 컬럼을 의미하고 테이블 헤더를 의미합니다.

암호:

이름 나이 직업 조 27 실업가 축가 26 간호사 시몬 39 교수

출력:

참고 : 첫 번째 내부의 값 제목입니다. 그래서 우리는 텍스트에 굵은 텍스트 효과를 적용합니다.

표 그룹화

테이블 그룹화 요소를 사용하여 테이블 기능을 확장 할 수 있습니다. 여러 페이지로 분할되는 대형 테이블을 작성해야하는 경우가 있습니다.

테이블 데이터를 머리글, 본문 및 바닥 글에 그룹화하면 독립적 인 스크롤을 허용 할 수 있습니다. 머리글과 본문 부분은 테이블이 스팬 된 모든 페이지에 인쇄됩니다.

테이블 그룹화 태그는 다음과 같습니다.

  • = 테이블의 표제를 감싸는 경우. 테이블의 모든 분할 페이지에 인쇄합니다.
  • = 테이블의 주요 데이터를 래핑합니다. 당신은 많은 것을 가질 수 있습니다 당신이 필요로. ㅏ 태그는 별도의 데이터 그룹을 의미합니다.
  • = 테이블의 꼬리말 정보를 감싸는 경우. 테이블의 모든 분할 페이지에 인쇄합니다.

그룹화를 사용하는 것은 필수 사항이 아닙니다. 더 큰 테이블을 읽기 쉽게 만들 때 사용할 수 있습니다. 일부 특수 개발자는이 태그를 CSS 셀렉터로 사용합니다.

예제 테이블을 다음과 같이 그룹화하는 방법은 다음과 같습니다. , 과 :

암호:

이름 나이 직업 남자 27 실업가 축가 26 간호사 시몬 39 교수 총 인원 : 삼

출력:

Form 요소는 웹 페이지에 대한 대화 형 양식을 만드는 데 사용됩니다. HTML 양식에는 여러 연속 요소가 포함됩니다. 예 : , , 기타

양식의 작업 속성은 매우 중요합니다. 정보 처리를위한 서버 측 페이지 또는 제 3 자 페이지를 가리 킵니다. 처리를 위해서는 먼저 메소드를 정의해야합니다.

get 또는 post의 두 가지 방법 중 하나를 사용할 수 있습니다. get은 Post가 메시지 본문에 정보를 보내는 URL 형식의 모든 정보를 보냅니다.

양식에 대한 입력에는 여러 유형이 있습니다. 가장 기본적인 입력 유형은 텍스트입니다. 다음과 같이 작성됩니다. . 유형은 라디오, 확인란, 이메일 등일 수도 있습니다. 제출 버튼을 만들려면 하단에 제출 유형 입력이 있어야합니다.

태그는 레이블을 만들고 입력과 연결하는 데 사용됩니다. 레이블을 입력과 연관시키는 규칙은 레이블의 for =””속성과 입력의 id =””속성에서 동일한 값을 갖는 것입니다.

암호:

이름: 성: 짧은 약력 : 성별: 남성 여자

출력:

참고 : 정보를 처리하기 위해 서버에 연결되어 있지 않았기 때문에 작업에 null 값을 지정했습니다.

3. HTML 속성

속성은 HTML 태그에 대한 수정 자의 한 유형입니다. HTML 태그에 새로운 구성을 추가합니다.

속성은 attributename =””처럼 보이며 여는 HTML 태그에 있습니다. 속성 값은 큰 따옴표 사이에 있습니다.

id =””및 class =””

id 및 class는 HTML 태그의 식별자입니다. 다른 이름은 식별자를 사용하여 다른 HTML 요소에 지정됩니다. 여러 요소에 하나의 클래스 식별자를 사용할 수 있습니다. 그러나 여러 요소에 하나의 ID 식별자를 사용할 수는 없습니다.

암호:

이것이 메인 타이틀입니다.

href =””

href는 Hypertext Reference를 나타냅니다. 사용자에게 참조 링크를 알려줍니다. 앵커 태그 는 href를 사용하여 사용자를 도착 URL로 보냅니다.

암호:

구글

src =””

src는 source를 나타냅니다. HTML 파일에서 사용중인 매체 또는 자원의 소스를 정의합니다. 소스는 로컬 또는 제 3 자 URL 일 수 있습니다.

암호:

alt =””

alt는 대안을 의미합니다. HTML 요소를로드 할 수 없을 때 사용되는 백업 텍스트입니다.

암호:

style =””

스타일 속성은 HTML 태그에서 자주 사용됩니다. HTML 태그 내에서 CSS 작업을 수행합니다. 스타일 속성은 큰 따옴표로 묶습니다.

암호:

이것은 또 다른 제목입니다

4. 코드 디스플레이 : 블록 대 인라인

일부 요소는 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 사용합니다. 이것이“차단”요소입니다.

전의: , , - , 양식 등

일부 요소는 필요한 공간 만 차지하고 새 줄에서 시작하지 않습니다. 이것은 "인라인"요소입니다.

예 : ,, ,, 기타

CSS 스타일을 사용할 때 블록 요소를 인라인에서 구별해야합니다. 이 HTML 가이드에서는 그다지 필요하지 않습니다.

암호:

내 첫 웹 페이지 이것은 H2 제목입니다. 블록 표시가 있습니다. 이것은 또 다른 H2 제목입니다. 여기서 밑줄 태그에는 인라인 표시가 있습니다.

출력:

5. HTML에서 큰 따옴표와 작은 따옴표

이 질문은 매우 분명합니다. HTML에서 무엇을 사용해야합니까? 작은 따옴표 또는 큰 따옴표? 사람들은 둘 다 사용하는 것 같지만 어느 것이 맞습니까?

HTML에서는 작은 따옴표와 큰 따옴표가 같습니다. 그들은 출력에 어떤 차이도 만들지 않습니다.

원하는 사람은 누구나 사용할 수 있습니다. 그러나 코드 페이지에서 두 가지를 혼합하는 것은 나쁜 습관으로 간주됩니다. 당신은 그들 중 어느 하나와 일치해야합니다.

6. 시맨틱 HTML과 비 시맨틱 HTML

시맨틱 HTML은 최신 HTML 버전으로 HTML5이라고도합니다. 비 의미 론적 HTML과 XHTML의 개발 된 버전입니다.

HTML5가 더 나은 이유는 무엇입니까? 이전 버전에서는 HTML 요소가 ID / 클래스 이름으로 식별되었습니다. 예를 들면 : 기사로 간주되었습니다.

HTML5에서 태그는 ID / 클래스 식별자없이 자신을 기사로 나타냅니다.

HTML5을 위해 이제 검색 엔진 및 기타 웹 응용 프로그램이 웹 페이지를 더 잘 이해할 수 있습니다. 시맨틱 웹 사이트는 SEO를 위해 더 나은 것으로 입증되었습니다.

다음은 인기있는 HTML5 태그 목록입니다.

  • = 이것은 시청자에게 보여주고 싶은 주 콘텐츠를 감싸는 것입니다.
  • = 제목 또는 저자 메타와 같은 내용의 헤더 부분을 마크 업하기위한 것입니다.
  • = 시청자에게 사용자 정의되거나 독립적 인 콘텐츠를 지정합니다.
  • = 머리글, 바닥 글 또는 세로 막대와 같은 코드를 그룹화 할 수 있습니다. 당신은 div의 의미 론적 형식이라고 말할 수 있습니다.
  • = 여기에서 바닥 글 컨텐츠, 면책 조항 또는 저작권 텍스트가 속합니다.
  • = 플러그인 문제없이 오디오 파일을 삽입 할 수 있습니다.
  • = 좋아요 ,이 태그를 사용하여 플러그인 문제없이 동영상을 삽입 할 수 있습니다.

간단한 HTML5 구조는 다음과 같습니다.

내 첫 웹 페이지 메뉴 8 메뉴 1 이것은 기사의 제목입니다 게시자 : John Doe 기사 내용은 여기에 있습니다. 저작권 2 John Doe

7. HTML 유효성 검사

대부분의 웹 전문가는 작업을 마친 후 코드의 유효성을 검사합니다. 코드가 제대로 작동 할 때 코드를 검증해야하는 이유는 무엇입니까?

코드의 유효성을 검사 할 수있는 두 가지 이유가 있습니다.

  1. 그것은 당신이 당신의 코드를 cross-browser와 cross-platform 호환 가능하게 만드는데 도움을 줄 것입니다. 코드는 현재 브라우저에서 오류를 표시하지 않지만 다른 브라우저에서는 오류를 표시 할 수 있습니다. 코드 유효성 검사를 통해 문제가 해결됩니다.
  2. 검색 엔진 및 기타 웹 프로그램에 오류가있는 경우 페이지 크롤링이 중지 될 수 있습니다. 유효성 검사를 통해 중대한 오류가 없음을 확인할 수 있습니다.

W3C 검사기 코드 유효성 검사를위한 가장 인기있는 서비스입니다. 그들은 코드를 검증하는 몇 가지 방법을 가지고있다. 파일을 업로드하거나 유효성 검사 엔진에 코드를 직접 입력 할 수 있습니다.

8. 기타 유용한 리소스

HTML은 계속 학습하는 주제입니다. 더 많은 HTML 업데이트 버전이 더 빨리 제공 될 수 있습니다. 따라서 업데이트 상태를 유지하고 계속 연습해야합니다. 연습은 HTML과 같은 것입니다.

다음은 유용한 리소스입니다.