쉽고 효과적인 방법으로 HTML을 공부하기 위한 7가지 최고의 웹사이트

HTML 학습에 관심이 있다면 HTML을 쉽게 공부할 수 있는 7가지 최고의 웹사이트 목록이 있습니다.

HTML을 사용하여 웹사이트를 구축하는 방법을 배우는 것은 모든 요소 중에서 최대 30개가 필요하다는 점을 감안할 때 그리 어렵지 않습니다. 그러나 웹 개발의 세계에 완전히 새로운 사람이라면 논문을 보는 신입생처럼 그것에 대해 하나도 이해하지 못할 수 있습니다.

논문 작성과 관련하여 도움 이 필요 하면 Google에서 추가 정보를 검색하고 인터넷의 모든 항목과 마찬가지로 끝없는 옵션 목록을 찾으십시오. 어느 것이 신뢰할 수 있습니까? 어느 쪽이 시간을 낭비하지 않고 귀중한 정보를 제공하지 않을까요? 쉬운 설명은 어디에 있으며 어떤 리소스가 마음을 사로잡을 것입니까?

교육 과정을 단순화할 최고의 리소스 목록을 찾으려면 계속 읽으십시오.

HTML 공부를 위한 이론 기반 웹사이트:

1. HTML 생활 표준

웹 사이트를 열면 읽기가 무거워 보이지만 실제로는 그렇습니다. 전체 목차를 살펴볼 시간이 없다면 섹션 3과 4부터 시작하여 요소에 대해 알아보는 것이 좋습니다.

간단한 웹페이지를 구축할 수 있게 되면 기능을 추가하고 코드를 개선할 수 있습니다. 전체 매뉴얼을 살펴보는 시간이 될 것입니다. 또한 HTML을 사용하여 페이지를 만드는 동안 몇 가지 추가 문제에 직면하게 될 것이므로 이 고도로 구조화된 가이드가 큰 도움이 될 것입니다.

장점은 다음과 같습니다.

• 정기 업데이트;
• 개발에 기여하는 능력;
• 새로운 버그를 보고하는 옵션.

웹 사이트는 PDF, 개발자, 한 페이지 및 여러 페이지 버전으로도 저장됩니다. 개발자 에디션은 적어도 처음에는 당신에게 아무 소용이 없을 수도 있는 추가 정보로부터 정제됩니다.

2. HTML 참조

웹 사이트는 사용하기 매우 쉽고 사용자 친화적 인 인터페이스를 가지고 있습니다. 목록의 이전 요점과 비교하여 다소 미니멀합니다.

홈 페이지는 초보자가 어떤 요소를 다루고 있는지 즉시 확인할 수 있도록 필터가 포함된 유용한 표를 제공합니다.

• 차단하다;
• 인라인;
• 메타;
• 실험적;
• 자동 폐쇄.

더 나아가면 가이드가 콘텐츠를 여러 요소 그룹으로 나눕니다. 각각은 태그의 속성에 대한 간결한 설명, 간단한 예 및 정확하게 구조화된 팁을 제공합니다.

3. 개발자 문서

많은 측면에서 이 웹사이트는 다른 가이드에 별도로 존재하는 여러 기능을 결합합니다. 여기에서 다음을 찾을 수 있습니다.

• 편집기 창의 예와 브라우저에서 어떻게 보이는지;
• 짧은 요약표;
• 속성에 대한 정보;
• 태그를 올바르게 사용하는 방법에 대한 팁
• 다른 브라우저와 요소의 호환성에 대한 세부 정보.

사용되지 않는 태그에 대한 섹션은 훨씬 더 유용합니다. 초보자 개발자 는 답변을 검색할 때 항상 포럼 에서 몇 가지 팁 을 찾습니다. 꽤 자주, 후자는 그렇게 신선하지 않습니다. 따라서 결과적으로 오래된 방법이 적용됩니다. 이 섹션은 2012년 포럼에서 언급된 태그를 절대 사용해서는 안 되는 이유를 설명하는 HTML 역사 책과 같습니다.

4. MDN 웹 문서

MDN Web Docs에는 다양한 기술에 대한 가이드가 포함되어 있으며 HTML도 그 중 하나입니다. 이 가이드는 훨씬 더 자세하고 처음에는 지저분해 보일 수 있습니다. 그러나 탐색은 매우 직관적입니다. Wikipedia와 마찬가지로 기사에는 수많은 하이퍼링크가 있습니다.

또한 페이지 왼쪽에서 목차, 하위 주제를 호스팅하는 초기 페이지로 돌아가는 방법 및 관련 주제를 볼 수 있습니다. DevDocs와 마찬가지로 웹 사이트에는 브라우저의 요소와 더 이상 사용되지 않는 요소의 호환성에 대한 정보가 포함되어 있습니다. 또한 실험 및 비표준 항목에는 자체 설명 아이콘이 표시됩니다.

HTML 공부를 위한 실습 기반 웹사이트:

이론적 자료는 항상 좋은 기초이지만 연습 없이는 사용할 수 없습니다. 따라서 아래 나열된 플랫폼 중 하나 이상을 사용하여 차례로 읽고 코딩해야 합니다.

1. 프리코드캠프

이 gem은 동일한 탭에서 후속 출력으로 코딩할 수 있는 창을 제공합니다. HTML 구문에 익숙해지고 편집기와 브라우저 사이를 전환하여 주의가 분산되지 않는 훨씬 쉬운 방법입니다. 진행하면서 많은 다른 운동을 선택할 수 있습니다.

플랫폼은 팁, 구조화된 지침 및 간단한 인터페이스를 제공합니다. 여기에는 7,000개 이상의 자습서가 포함되어 있으며 이름에서 짐작할 수 있듯이 모두 무료로 액세스할 수 있습니다.

2. 코드펜

위의 리소스와 달리 CodePen은 하나의 탭에서 기술 조합을 허용합니다. '에디터 사용'을 선택하면 세 개의 창이 나타납니다.

• HTML
• CSS
• 자바스크립트

모두 사용할 필요는 없고 필요한 것만 사용하면 됩니다. HTML로 시작할 수 있고, 몇 가지 간단한 기능을 시도할 만큼 충분히 궁금하다면 디자인 이나 스크립트를 추가할 수 있습니다.

편집기는 또한 자신의 웹사이트에 업로드하고 적용하기 전에 여기에서 테스트할 수 있는 오픈 소스 코드에 매우 유용합니다. CodePen은 종종 예제가 제공되는 다른 리소스에 내장되어 있습니다. 그 중 하나는 필요한 경우 HTML 코드 예제를 검색할 수 있는 Free Frontend입니다.

3. Nu HTML 검사기

마지막으로 코드 유효성 검사기는 HTML5 및 해당 표준을 어지럽히지 않도록 가르칩니다. 처음에는 기본 코드 편집기에서 연습하지 않더라도 조만간 작업해야 합니다. VS Code와 같이 사용 가능한 확장의 수에도 불구하고 코드 편집기는 코드가 HTML5에 따라 작성되었는지 여부를 추적하는 데 여전히 뒤쳐질 수 있습니다. 따라서 이 웹사이트가 필요합니다.

코드를 삽입하면 유효성 검사기가 한 줄씩 코드를 확인하기 시작합니다. 실수를 발견하면 보고하지만 코드 트리로 더 깊이 들어가지는 않습니다. 따라서 나머지 코드가 저장된 태그에서 해당 실수를 수정하지 않는 한 유효성 검사기는 다른 실수에 대한 보고서를 볼 수 없도록 합니다. 이렇게 하면 많은 시간과 노력을 절약 할 수 있습니다.

왜 그렇게 많은가?

인터넷 리소스의 수는 무한하므로 이 목록은 계속해서 사용할 수 있습니다. 위에 제시된 HTML 공부를 위한 웹사이트는 HTML 학습자가 반드시 읽어야 하는 것은 아니지만, 반드시 한 번쯤은 읽어볼만한 사이트입니다.

각 리소스는 고유한 구조화 및 정보 표시를 제공합니다. 웹 사이트가 적합하지 않은 경우 다른 웹 사이트를 시도하여 최상의 접근 방식을 찾을 수 있습니다.