초보자를위한 완벽한 HTML 가이드

최종 업데이트 : 15 May 2018

20 년 전에도 취미 블로거라고해도 자신을 보호하거나 사이트에 간단한 기능을 추가하기 위해 웹 코딩을 알아야했습니다. 하지만 이제는 HTML의 기본 사항을 알기조차 더 이상 필요하지 않은 많은 편집자와 플러그인이 있습니다. 사이트를 만든다. or 블로그를 운영하다.

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

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

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

HTML은 오늘날의 인터넷 백본입니다. 수백만 개의 웹 사이트가 함께 인터넷을 형성했습니다. HTML은이 모든 웹 사이트의 구성 요소입니다.

초급 Q & A

1- HTML이란 무엇입니까?

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

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

2- 왜 HTML이 필요합니까?

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

그래서 HTML이 필요합니다.

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

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

첫 번째 HTML 파일 만들기 단계

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

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

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

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

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

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


최고에게 이동

1- 안녕하세요!

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

암호:

<! DOCTYPE html> <html> <head> <title> 첫 번째 웹 페이지 </ title> </ head> <body> <p> Hello World! </ p> </ body> </ html>

산출:

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

HTML 구조 이해하기

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

그럼 "Hello World!"코드를 통해 이해해 봅시다. 다음 요소는 모든 HTML 파일의 필수 부분입니다.

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


최고에게 이동

2- HTML 태그

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

HTML 태그에는 대개 여는 태그와 닫는 태그가 있습니다. 시작 태그에는 키워드가보다 작음 (<) 및보다 큼 (>) 기호로 둘러싸여 있습니다. 닫는 태그는 모두 같지만보다 작음 (<) 기호 뒤에 추가 슬래시 (/)가 있습니다.

(2a) 헤드 태그

모든 헤드 태그는 <head>와 </ head> 사이에 있습니다. 여기에는 웹 브라우저 및 검색 엔진에 대한 메타 정보가 들어 있습니다. 그들은 기본적으로 시각적 출력이 없습니다.

<title> </ title>

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

암호:

<title> 나의 첫 번째 웹 페이지 </ title>
제목 태그가 브라우저 상단에 나타납니다.

<link>

링크 태그는 HTML 페이지를 외부 리소스와 연결합니다. 주요 용도는 HTML 페이지와 CSS 스타일 시트를 연결하는 것입니다. 자체 마감 태그이므로 끝이 필요 없습니다 </ link>. 여기에서 rel은 파일과의 관계를 나타내며 src는 소스와의 관계를 나타냅니다.

암호:

<link rel = "stylesheet"type = "text / css"src = "style.css">

<meta>

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

암호:

<meta name = "description"content = "검색 엔진에 표시되는 짧은 설명입니다."

<script> </ script>

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

암호:

<script type = "text / javascript"src = "scripts.js"> </ script>

<noscript> </ noscript>

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

암호:

<noscript> <p> 아아! 스크립트는 사용할 수 없습니다. </ p> </ noscript>

(2b) 바디 태그

모든 body 태그는 <body>와 </ body> 사이에 있습니다. 그들은 시각적 인 결과물을 가지고 있습니다. 가장 많은 작업이 이루어지는 곳입니다. 이러한 태그를 사용하여 기본 페이지 콘텐츠를 구성해야합니다.

<h1> </ h1> - <h6> </ h6>

이들은 표제 태그입니다. 가장 중요한 제목은 <h1>로 태그가 지정되고 <h6>에는 가장 중요하지 않습니다. 올바른 계층 구조로 사용해야합니다.

암호:

<h1> 이것은 h1 표제입니다. </ h1> <h2> 이것은 h2 표제입니다. </ h2> <h3> 이것은 h3 표제입니다. </ h3> <h4> 이것은 h4 표제입니다. </ h4> <h5 > 이것은 h5 표제입니다. </ h5> <h6> 이것은 h6 표제입니다. </ h6>

산출:

태그 서식 지정

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

암호:

<p> 여러 가지 방법으로 텍스트를 강조 할 수 있습니다. </ p> <p> <strong> 굵게 </ strong>, <u> 밑줄 </ u>, <em> 기울임 꼴 </ em> > 마크 </ mark>, <sub> 첨자 </ sub>, <sup> superscript </ sup> 등등! </ p>

산출:

<->

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

예:

<! - <p> 이런 방식으로 코드를 둘러싸면 모든 코드를 주석 처리 할 수 ​​있습니다. </ p> ->

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

<a> </a>

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

구조는 동일합니다. 여기에는 오프닝 <a> 및 마감 부분 </a>이 있습니다. 앵커하려는 텍스트는 <a>와 </a> 사이에 있습니다.

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

  • ahref = "" = 대상 링크를 정의합니다. 링크는 큰 따옴표로 묶입니다.
  • target = "" = URL이 새 브라우저 탭에서 열릴지 아니면 같은 탭에서 열릴 지 정의합니다. target = "_ blank"는 새 탭에 사용되며 target = "_ self"는 같은 탭에서 여는 데 사용됩니다.
  • rel = "" = 현재 페이지와 링크 된 페이지의 관계를 정의합니다. 링크 된 페이지를 신뢰하지 않으면 rel = "nofollow"를 정의 할 수 있습니다.

암호:

<p> <a target="_blank" href="https://www.google.com/"> 여기를 클릭하십시오 </a>. Google로 이동하십시오. 새 탭에서 열립니다. </ p> <p> <a target="_self" href="https://www.google.com/"> 여기를 클릭하십시오. </a> 또한 Google로 연결되지만 현재 탭에서 열립니다. </ p>

산출:

<img />

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

<img />는 자기 닫는 태그입니다. </ img>와 같은 전통적인 종결이 필요하지 않습니다. 올바르게 사용하려면 알아 두어야 할 몇 가지 속성이 있습니다.

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

예:

<p> 이것은 8 월 2014의 Googleplex입니다. </ p> <p>이 이미지의 너비는 500 픽셀이고 높이는 375 픽셀입니다. </ p> <img src = "https : //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt ="8 월 Google 본사 2014 "width ="500 "height ="375 "/>

산출:

도움말 : 클릭 할 수있는 이미지를 삽입 하시겠습니까? 이미지 코드를 <a> 태그로 둘러 쌉니다. 그것이 어떻게되는지보십시오.

<ol> </ ol> 또는 <ul> </ ul>

목록 태그는 항목 목록을 만들기위한 것입니다. <ol>는 정렬 된 목록 (번호 매기기 목록)을 나타내며 <ul>은 정렬되지 않은 목록 (글 머리 기호)을 나타냅니다.

<ol> 또는 <ul>의 목록 항목에는 <li> </ li> 태그가 지정됩니다. li은 목록을 의미합니다. 상위 <ol> 또는 <ul> 태그 내에 원하는만큼 <li> 가질 수 있습니다.

암호:

<item> 1 </ li> </ li> <li> 아이템 2 </ li> <li> 아이템 3 </ li> <item> 1 아이템 </ li> </ li> <li>

산출:

<table> </ table>

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

<table> </ table>은 바깥 상위 코드입니다. 이 태그에서 <tr>은 테이블 행, <td>는 테이블 열, <th>는 테이블 헤더를 나타냅니다.

암호:

27 </ td> </ td> </ tr> <td> 간호사 </ td> </ td> </ td> <td> Simon </ td> <td> / td> <td> 26 </ td> <td> 교수 </ td> </ tr> </ table>

산출:

참고 : 첫 번째 <tr> 안의 값은 머리글입니다. 그래서 우리는 텍스트에 굵은 텍스트 효과를 적용하는 <th>를 사용했습니다.

표 그룹화

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

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

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

  • <thead> </ thead> = 테이블의 표제를 감싸는 경우. 테이블의 모든 분할 페이지에 인쇄합니다.
  • <tbody> </ tbody> = 테이블의 주요 데이터 래핑하기. 필요한만큼 <tbody>를 가질 수 있습니다. <tbody> 태그는 별도의 데이터 그룹을 의미합니다.
  • <tfoot> </ tfoot> = 테이블의 꼬리말 정보를 감싸는 경우. 테이블의 모든 분할 페이지에 인쇄합니다.

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

여기 예제 된 테이블을 <thead>, <tbody> 및 <tfoot>로 그룹화하는 방법은 다음과 같습니다.

암호:

직업 </ th> </ th> </ th> <tbody> <tr> <td> </ th> 간호사 </ td> </ td> <td> 간호사 </ td> </ td> </ td> </ td> 교수 </ td> </ td> </ td> </ td> <td> <td> <td> 27 </ td> <td> 총 인원 : </ td> <td> 26 </ td> </ tr> </ tfoot> </ table>

산출:

<form> </ form>

양식 요소는 웹 페이지 용 대화 형 양식을 만드는 데 사용됩니다. HTML 양식은 몇 개의 연속 요소를 포함합니다. 예 : <label>, <input>, <textarea> 등

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

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

양식 입력에는 여러 유형이 있습니다. 매우 기본적인 입력 유형은 텍스트입니다. <input type = "text"> 형식으로 작성됩니다. 유형은 라디오, 체크 박스, 이메일 등이 될 수도 있습니다. 제출 버튼을 작성하려면 하단에 제출 유형 입력이 있어야합니다.

<label> 태그는 레이블을 만들고이를 입력과 연관시키는 데 사용됩니다. 레이블을 입력과 연관시키는 규칙은 입력의 label 및 id = ""속성의 for = ""속성에서 동일한 값을가집니다.

암호:

<name = "lastname"> 성 : </ title> 짧은 텍스트 : </ label> <textarea id = "bio"rows = "10"cols = "텍스트"id = "성" 30 "placeholder ="여기에 생체 입력 ... "> </ textarea> <br> <label> 성별 : </ label> <br> <label for ="male "> 남성 </ label> <input type = <input type = "radio"name = "gender"id = "female"> <br /> "radio"name = "gender"id = "male" > <input type = "submit"value = "Submit"> <form>

산출:

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


최고에게 이동

3- HTML 속성

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

속성은 attributename = ""처럼 보이고 여는 HTML 태그에 있습니다. 속성의 값은 큰 따옴표로 묶입니다.

id = ""및 class = ""

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

암호:

<h1 class = "heading"> 주요 제목입니다. </ h1>

href = ""

href는 Hypertext Reference의 약자입니다. 사용자가 참조 링크를 가리 키도록합니다. 앵커 태그 <a>는 href를 사용하여 사용자를 도착 URL로 보냅니다.

암호:

<a href="https://www.google.com/"> Google </a>

src = ""

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

암호:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"/>

alt = ""

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

암호:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"alt = "Google 본사"/>

style = ""

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

암호:

<h2 style = "color : red"> 이것은 다른 제목입니다. </ h2>


최고에게 이동

4- 코드 표시 : 블록 대 인라인

일부 요소는 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 사용합니다. 이들은 "블록"요소입니다.

예 : <div>, <p>, <h1> - <h6>, 양식 등

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

예 : <a>, <span>, <br>, <strong>, <img> 등

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

암호:

<! DOCTYPE html> <html> <head> <title> 첫 번째 웹 페이지 </ title> <body> <h2> H2 제목입니다. 블록 표시가 있습니다. </ h2> <h2> <h> 다른 </ u> H2 제목입니다. 여기서 밑줄 태그에는 인라인 표시가 있습니다. </ h2> </ body> </ html>

산출:


최고에게 이동

5 - 큰 따옴표와 HTML의 작은 따옴표

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

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

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


최고에게 이동

6- 의미 론적 HTML과 비 의미 론적 HTML

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

HTML5이 더 좋은 이유는 무엇입니까? 이전 버전에서는 HTML 요소가 ID / 클래스 이름으로 식별되었습니다. 예 : <div id = "article"> </ div>은 기사로 간주되었습니다.

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

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

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

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

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

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"/> <title> 처음 웹 페이지 </ head> <body> <header> <nav> <ul> li> Menu 1 </ li> <li> 메뉴 2 </ li> </ ul> </ nav> </ head> <main> <article> <header> <h2> <html> <p> 게시자 : John Doe </ p> </ head> <p> 기사 내용은 여기에 있습니다. </ p> </ article> <footer> <p> Copyright 2 John Doe < p> </ footer> </ body> </ html>


최고에게 이동

7- HTML 유효성 검사

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

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

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

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


최고에게 이동

8- 기타 유용한 자료

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

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