HTML을 생성하려면 태그가 필요합니다. 기본 HTML 태그. 빈 블록 및 인라인 컨테이너

요즘에는 웹 사이트를 만드는 데 특별한 어려움이 발생하지 않습니다. 인터넷에는 웹 사이트 만들기 서비스를 제공하는 포털이 충분하기 때문입니다. 그러나 그러한 서비스를 위해 만들어진 웹사이트는 자체적으로 만들어진 것이 아니라 시험관에서 자란 복제물과 유사합니다.

독립적으로 만들어진 웹사이트는 언제나 즐거운 창작의 고통을 겪으며 사랑받는 아이가 될 것입니다. 소위 정적 사이트라고 불리는 HTML 프로그래밍 언어를 사용하여 웹사이트를 만들 수 있습니다.

HTML 편집기는 웹 사이트를 만드는 데 사용됩니다. HTML 기반 웹사이트를 독립적으로 만들려면 HTML 프로그래밍 언어에 대한 지식, Photoshop의 특정 개념, 기사 작성 기술, 약간의 상상력 및 디자인 아트가 필요합니다.

PHP 프로그래밍 언어를 사용하여 만든 웹사이트는 동적 웹사이트입니다. 인터넷에 있는 대부분의 기존 웹사이트는 PHP, CMS(콘텐츠 관리 시스템) 엔진을 기반으로 만들어졌습니다. 이 사이트에서는 CMS 엔진을 사용하여 웹사이트를 직접 만들 때 웹사이트를 만드는 방법을 배우고 적격한 도움을 받을 수 있습니다.
- Joomla에서 웹사이트 생성

어떤 일을 시작하는 것은 언제나 어렵습니다. 여기서 가장 중요한 것은 구체적인 목표를 설정하는 것입니다. 먼저 만들고 싶은 웹사이트의 테마와 샘플을 선택하고 구현 계획을 세워보세요. 그리고 주요 목표를 달성하는 길을 따라 이동하십시오.

하이퍼텍스트 마크업 언어와 같습니다. HTML은 프로그래밍 언어가 아니라 웹사이트 마크업 언어입니다.

모든 브라우저는 이 마크업을 사용자에게 친숙한 형식으로 변환할 수 있습니다.

이 언어는 태그라는 특수 명령을 사용합니다. 각 태그에는 고유한 기능이 있습니다. 엄청난 수의 태그가 있습니다. 이상적으로는 모든 것을 배워야 합니다. 하지만 초보 개발자에게는 기본 지식만으로도 충분합니다.

HTML 명령 목록은 매우 큽니다. 그러나 주요한 것은 많지 않습니다. 코드 작성을 시작하려면 편집기가 필요합니다. 메모장을 사용할 수 있습니다. Notepad++를 사용하는 것이 좋습니다. 그는 이렇게 생겼습니다.

장점은 특수 편집기에서 태그가 카테고리에 따라 특정 색상으로 강조 표시된다는 것입니다. 메모장이나 다른 프로그램에서 HTML 웹사이트를 만드는 명령은 동일합니다. 사용되는 언어는 어디에서나 동일합니다. 개발 환경은 단지 도구일 뿐입니다.

HTML에는 닫는 태그와 닫히지 않는 태그가 있습니다. 또한 이 언어에는 중첩이라는 개념이 있습니다. 코드의 각 개체는 요소입니다. 요소에는 여는 태그, 닫는 태그 및 콘텐츠가 있습니다. 또한 태그에는 고유한 값을 가진 고유한 추가 속성이 있습니다.

그림에서 두 개의 태그와 를 볼 수 있습니다. 열기와 닫기는 동일하게 작성되지만 "/"만 다릅니다. 태그가 닫혀 있지 않으면 핸들러는 다른 모든 항목을 이 특정 요소의 연속으로 간주합니다. 이것은 매우 중요합니다. 특히 링크에서요. 좀 더 자세히 살펴보겠습니다.

태그는 필수입니다. 항상 작성해야합니다. 하지만 닫을 필요는 없습니다. 표준에 따르면 필요하지만 닫지 않아도 계속 작동합니다.

이러한 HTML 명령은 페이지의 프레임워크입니다. 필수 항목입니다. 그들은 또한 문을 닫습니다.

태그의 이름은 의미에 해당합니다. 머리 - 머리. 이 섹션에서는 눈에 보이지 않는 서비스 및 중요한 정보를 나타냅니다. 본문 섹션은 문서의 본문입니다. 다음은 사용자에게 표시되는 콘텐츠입니다. 나중에 혼란을 피하기 위해 즉시 태그를 닫으십시오.

서비스 섹션에는 다음과 같이 명시되어 있습니다.

• 문서 제목;
• 스타일 파일;
• 스크립트 파일;
• 메타 태그;
• 검색 엔진에 대한 지침;
• 로봇에 대한 지침;
• 프로그래머는 사용할 수 있지만 사용자는 사용할 수 없는 기타 정보.

스타일 파일은 다음과 같이 연결됩니다.

스크립트 파일은 다음과 같습니다.

텍스트에는 제목이 있어야 합니다. 우리는 다음과 같이 나타냅니다.

페이지 제목

이 텍스트는 브라우저 탭의 제목에 표시됩니다. 이 제목은 검색 엔진 결과로도 표시됩니다.

텍스트는 단락 태그에 배치되어야 합니다. 로 표시됩니다. 텍스트에 문자열을 사용할 수도 있습니다.

Word에서와 같이 텍스트 서식을 지정할 수 있습니다.

• 이탤릭체
• 굵은 글씨
• 줄을 그은 텍스트
• 밑줄 친 텍스트

텍스트에 스타일을 지정할 수 있습니다. 다른 요소들을 검토한 후 마지막에 살펴보겠습니다.

다른 중요한 HTML 명령이 있습니다. 웹사이트를 만들려면 헤더가 필요합니다. 첫 번째 수준 제목 태그를 사용하여 표시됩니다. 1부터 6까지의 레벨이 있습니다. 제목은 중첩되어야 한다는 점을 이해하는 것이 중요합니다.

그림의 예.

h1 제목은 하나만 사용하는 것이 좋습니다. 이 경우 태그와 일치해야 합니다. 물론 200개의 h1 제목을 지정할 수 있지만 그렇게 하면 검색 엔진에서 불이익을 받게 됩니다.

이미지는 웹 페이지의 필수적인 부분입니다. 이 예에서는 사진을 삽입하는 방법을 보여줍니다.

보시다시피, 예제에서는 호출되는 내용과 방법을 자세히 보여줍니다.

HTML 명령을 배우고 있다면 링크 태그만 알면 됩니다. 구성하는 가장 중요한 요소 중 하나입니다.

위의 예에서는 링크 텍스트 대신 이미지가 있는 것을 볼 수 있습니다. 즉, 텍스트와 그림을 모두 넣을 수 있습니다.

테이블도 매우 자주 사용됩니다. 처음에는 편리한 형식으로 정보를 제공하도록 의도되었습니다. 그러나 레이아웃 디자이너는 이를 사용하여 다양한 페이지 요소를 배치했습니다.

테이블은 다음과 같이 생성됩니다.

width 속성은 테이블의 너비를 지정합니다. 백분율 또는 픽셀 단위일 수 있습니다. 테두리는 테두리의 두께를 지정합니다.

구조는 다음과 같이 지정됩니다. tr 태그는 문자열입니다. td 셀에 태그를 지정하세요. 그리고 모두 함께 - 이것은 테이블입니다.

테이블을 정렬할 수 있습니다. 이렇게 하려면 왼쪽, 가운데, 오른쪽의 세 가지 값을 사용할 수 있는 정렬 속성을 사용하세요. 사용 예는 다음과 같습니다.

이러한 HTML 명령(너비 및 정렬)은 다른 요소에도 작동합니다. 이미지의 경우 프레임 두께도 표시됩니다.

HTML 명령을 사용하면 다양한 유형의 목록을 만들 수 있습니다. Word 편집기와 거의 동일합니다.

HTML 언어에는 이러한 목록의 순서가 있는 예와 순서가 없는 예가 있습니다.

• 첫 번째
• 두번째
• 제삼

결과는 다음과 같습니다:

• 첫 번째
• 두번째
• 제삼

순서가 지정된 목록은 정확히 같은 방식으로 생성되지만 대신

, 태그를 사용하세요.

여기에서 목록 표시 유형을 설정할 수도 있습니다.

• "1" - 아라비아 숫자 1, 2, 3...
• "에이"- 대문자 A, B, C...
• "에이"- 소문자 a, b, c...
• "나"- 큰 로마 숫자 I, II, III...
• "나"- 작은 로마 숫자 i, ii, iii...

아라비아 숫자가 기본으로 표시됩니다.

이는 번호가 매겨진 목록이기 때문에 목록의 시작 값을 지정하는 시작 속성을 갖습니다. 예를 들어 10일이나 20일부터 시작하는 목록을 표시할 수 있습니다.

스타일 사용

사이트에 대한 HTML 명령은 매우 다양하지만 모두 스타일을 따릅니다. 스타일은 head: 섹션에 파일로 지정하거나 미리 만들어진 스타일을 바로 작성할 수 있습니다.

이러한 스타일 정의에는 차이가 있습니다. 스타일 파일은 사이트의 모든 페이지에서 지정할 수 있습니다. 변경하자마자 이 업데이트는 전체 사이트에 영향을 미칩니다. 특정 페이지에서 스타일을 지정하는 경우 이러한 클래스의 변경 사항과 사용은 이 파일 내부에만 적용됩니다. 귀하의 설정은 그 이상으로 적용되지 않습니다.

20개의 HTML 페이지가 있고 헤더를 2픽셀 더 크게 만들기로 결정했다고 가정해 보세요. 스타일 파일에 모든 내용이 있는 경우 해당 파일만 변경하면 됩니다. 모든 것이 개별적인 경우에는 20페이지를 모두 업데이트해야 합니다.

다음과 같이 한 페이지에만 지정할 수 있습니다.



이제 이 페이지를 만드는 데 사용한 태그에 대해 몇 마디 하겠습니다.

예제의 html 태그에 대한 설명

1. - 이 태그는 모든 웹페이지에 있어야 합니다. 그들은 브라우저와 검색 엔진에 이것이 HTML 페이지임을 알려줍니다.

모든 HTML 페이지의 구조는 다음과 같습니다.

... 제목 태그 ... ... 페이지 본문 ...

2. - 이 태그 사이에는 페이지에 표시되는 모든 콘텐츠가 있습니다.

4. - 이 태그 사이에 페이지 제목이 작성되어 브라우저 맨 위에 표시됩니다. 그런데 검색 엔진에서 무언가를 검색하면 가장 먼저 표시되는 것은 페이지 이름입니다. 태그는 종종 "제목"으로 축약됩니다. 태그를 만드는 방법 기사를 읽어 보시기 바랍니다.

이제 HTML 페이지 본문( 및 내부)에 있는 태그로 이동하겠습니다.

5. - 이 태그는 태그 내부의 모든 것을 중앙에 배치합니다. 이 경우 중앙이 화면의 중앙이 됩니다. 앞으로는 이러한 태그 사용을 중단하는 것이 좋습니다.

6. 제목 태그 클래스 중 하나입니다... 일반적으로 페이지 제목을 묶습니다. 예를 들어, 이 페이지에는 "html 페이지 생성 예"라는 제목 태그가 있습니다.

메모

이러한 태그는 웹사이트 순위에 큰 비중을 차지하므로 신중하고 현명하게 사용해야 합니다.

HTML 코드를 작성할 때 간단한 규칙을 준수해야 합니다. 제목 태그가 먼저 와야 하고 그 다음에 와도 됩니다. 가장 중요한 것은 먼저, 다음, 그런 다음 등이 있어서는 안된다는 것입니다. 엄격한 계층 구조가 있어야 합니다. 제목 등 어쩌면 많이.

7.
닫는 태그가 필요하지 않은 단일 태그입니다. 다음 줄로 이동합니다. 내 예에서는 두 개의 단일 태그를 연속으로 작성하여 다음 줄로 두 번 이동했습니다.

8. 이미지를 표시하는 단일 태그입니다.

• src는 이미지 주소를 지정하는 필수 매개변수입니다. (URL_IMAGE 대신 이미지가 저장된 주소를 입력해야 합니다.)
  메모:
  • 이미지가 HTML 페이지와 동일한 폴더에 있으면 이미지 이름을 작성하는 것으로 충분합니다. 그렇지 않으면 절대 또는 상대 URL을 입력해야 합니다.
  • 이미지 확장자를 지정하는 것을 잊지 마세요. 예를 들어 .jpg, .gif, .jpeg입니다.
• alt 또는 title - 이 매개변수에서 이미지에 대한 설명을 작성할 수 있습니다. 이미지 위에 마우스를 올리면 이런 설명이 나옵니다. 이러한 매개변수는 웹사이트 홍보, 특히 이미지 검색에 중요합니다. 이미지를 로드하지 못한 경우 이 텍스트가 표시되며 이는 장점이기도 합니다.

9. - 이 태그는 글꼴, 배경, 크기 등을 변경하기 위해 생성됩니다. 즉, 텍스트 서식과 관련된 모든 것을 하나의 태그로 구성할 수 있습니다. 이 태그에는 몇 가지 속성이 있는데 이에 대해서는 별도의 강의에서 다루겠습니다.

참고: - 유사한 태그.

이러한 모든 옵션을 설정할 수 있는 CSS 글꼴 속성도 있습니다.

10. - 굵은 글씨로 강조 표시합니다. 과 사이의 모든 내용은 굵게 강조 표시됩니다. 예를 들어 콘텐츠의 맨 처음에 작성하고 맨 끝에서 닫으면 페이지의 모든 텍스트가 굵게 강조 표시됩니다. 이것은 매우 일반적인 태그이며 그와 유사한 태그는 입니다.

검색 엔진은 키워드의 영향력을 높이는 측면에서 이 태그에 주목합니다. 하지만 매번 굵은 글씨로 키워드를 강조 표시하면 스팸으로 인식되므로 주의가 필요합니다.

HTML 페이지를 만드는 방법이 궁금하십니까? 이렇게 하려면 몇 시간을 투자해야 하며, 5분 안에 첫 페이지를 만들 수 있다는 것을 알게 될 것입니다.

HTML은 HyperText Markup Language의 약자입니다. 번역하면 "하이퍼텍스트 마크업 언어"를 의미합니다. HTML은 프로그래밍 언어가 아니라 사이트 마크업 언어라는 점을 이해하는 것이 중요합니다.

모든 최신 브라우저에서는 이를 인식할 수 있습니다. 그런 다음 작성자가 미리 의도한 대로 사용자에게 친숙한 방식으로 정보를 표시합니다.

이 언어는 특수 태그를 사용합니다. 각 태그는 자체 기능을 수행합니다. 그것들이 많이 있습니다. 이상적으로는 모든 것을 배워야 합니다. 하지만 초보자에게는 기본적인 지식만으로도 충분합니다.

HTML 기초

HTML 페이지를 만들기 전에 페이지가 무엇으로 구성되어 있는지 알아야 합니다. 이 언어에는 요소와 태그라는 두 가지 개념이 있습니다.

여는 태그와 닫는 태그는 이 요소가 시작하고 끝나는 위치를 나타내는 데 사용됩니다. 이렇게 생겼습니다.

콘텐츠

보시다시피 여는 태그와 닫는 태그의 유일한 차이점은 "/"입니다.

전체 HTML 문서는 이러한 요소의 모음입니다. 문서 구조에 대한 특정 요구 사항이 있습니다. 모든 페이지 콘텐츠는 와 태그 사이에 있어야 합니다. 코드를 작성할 때 여는 태그와 닫는 태그를 즉시 포함하는 습관을 들이세요.

또한 HTML 언어의 구조에는 자체 계층 구조가 있다는 점을 기억하십시오. 그렇지 않으면 중첩이라고 합니다. 다른 모든 것이 그 안에 있기 때문에 가장 중요합니다.

HTML에는 두 개의 하위 요소가 있습니다.

• ... ;
• .. .

HEAD 블록은 다양한 서비스 정보를 나타낸다. 이 정보는 브라우저에 표시되지 않습니다. 예를 들어 개발자, 모든 프로그램, 로봇 등에 대한 지침이 있습니다.

가장 중요한 것은 여기에 내용이 없다는 것입니다.

BODY 섹션은 사용자에게 표시될 문서 내용을 지정합니다.

10개의 중첩 요소가 있을 수 있으므로 열린 태그와 닫힌 태그를 즉시 만드는 방법을 알아보세요. 또한 편의상 중첩된 태그를 들여쓰기하는 것이 좋습니다. 예를 들면 다음과 같습니다.

이는 동일한 중요도의 태그가 동일한 수준에 있고 하위 태그가 "내부"에 있도록 수행됩니다. 이렇게 하면 올바른 코드 부분을 이해하고 찾는 것이 훨씬 쉬워집니다. 그렇지 않으면 혼란스러울 수 있습니다. 하지만 공간을 절약하기 위해 본체 자체를 들여쓰기 없이 만들 수도 있습니다. 이는 다른 모든 사람이 추가 들여쓰기를 하지 않도록 하기 위한 것입니다. 나머지는 모두 분리하는 것이 좋습니다.

간단한 HTML 페이지를 만드는 방법

코드를 작성하려면 일종의 편집기가 필요합니다. 그것들이 많이 있습니다. 인기 있는 것은 Notepad++와 Adobe Dreamweaver입니다. 메모장을 사용해도 됩니다.

Notepad++ 편집기의 모습은 다음과 같습니다.

이것은 매우 편리한 편집기이자 동시에 무료입니다. 위의 Adobe Dreamweaver는 유료 버전입니다. 글쓰기용 편집기와 메모장의 차이점은 특수 태그가 강조 표시된다는 것입니다. 강조 표시되어 있지 않으면 잘못 쓴 것입니다.



백라이트가 언어와 일치하려면 설정에서 지정해야 합니다.



메모장에서 HTML 페이지를 만드는 방법을 살펴보겠습니다. 즉, 기술적인 부분을 마치고 바로 태그 공부로 넘어가겠습니다.

HTML 메모장에서 웹 페이지를 만드는 방법

시작하려면 메모장을 엽니다.



그런 다음 다음 스크린샷에 표시된 내용을 입력하세요.



단순히 복사하는 대신 손으로 쓰는 데 익숙해지세요. 손으로 쓸 때는 태그 베이스 전체를 기억하는 것이 좋습니다.



그런 다음 브라우저에서 파일을 열고 결과를 감상할 수 있습니다. 이제 HTML 메모장에서 웹 페이지를 만드는 방법을 이해해야 합니다.

전세계 컨소시엄 W3C

인터넷의 모든 표준을 개발하고 구현하는 W3C라는 조직이 있습니다. 모든 브라우저는 이러한 표준을 준수하며 이러한 규칙에 따라 페이지 마크업(코드)을 처리합니다.

HTML 언어 개발자의 공식 웹사이트에서 모든 태그와 사용 규칙이 포함된 표를 찾을 수 있습니다. 이 기사에서는 가장 기본적인 것들을 고려합니다.

규칙은 무엇일까?라고 생각할 수도 있습니다. 설명된 모든 태그에는 자체 권장 사항이 있습니다. 그 중 몇 가지가 있습니다:

• 선택적 태그입니다.
• 금지됨.
• 태그가 비어 있습니다.
• 구식
• 잃어버린.
HTML의 태그

HTML 페이지를 만들기 전에 HEAD 서비스 부분에 무엇이 있어야 하는지 이해해야 합니다.

HEAD 영역에는 필수 태그와 선택 태그가 모두 포함되어 있습니다. 필수 태그는 제목입니다. 제목으로 지정되어 있습니다. 전체 문서에 할당됩니다. 그리고 Google 검색 엔진 결과에 표시되는 것은 제목 태그입니다.

BODY 섹션으로 이동하겠습니다. 브라우저에 표시되는 요소가 있고 그렇지 않은 요소도 있습니다. 예를 들어 댓글은 사용자에게 표시되지 않습니다. 팀으로 작업하는 경우 메모용으로 사용하거나 다른 직원에게 힌트를 주는 데 사용할 수 있습니다.

그들은 다음과 같이 지정됩니다.

그 사이에 있는 모든 것은 프로그램에 의해 그렇게 간주됩니다. 다른 댓글 태그 내에 댓글 태그를 중첩할 수 없다는 점에 유의하세요. 왜냐면 오픈하자마자 .

이러한 중첩의 예:

첫댓글 계속 -->

브라우저의 결과는 다음과 같습니다

첫댓글 계속 -->

여기 조각이 있습니다 보이지 않을 것입니다. 두 번째 여는 태그 추가 텍스트