HTML 문서의 구조는 기본 태그입니다. HTML 문서 구조 및 페이지 코드 수정

좋은 하루 되세요, 블로그 독자 및 손님. 하이퍼텍스트 마크업 언어 html의 기본을 배우는 겸손한 조수인 여러분과 다시 함께하겠습니다. 이 기사에서 나는 웹사이트 페이지 구조화에 대한 주제를 다루고 언어의 주요 태그에 대해 더 자세히 소개하고 싶습니다.

웹사이트 구조 html 주제는 가장 중요한 주제 중 하나이며 웹사이트 구축의 기초입니다. 이를 마스터한 후에는 페이지와 웹사이트에 대한 개별 디자인을 쉽게 만들 수 있습니다. 주제에 대한 자세한 연구를 위해 이 기사에서는 이론적 자료뿐만 아니라 블로그 작성에 대한 구체적인 예도 제공합니다. 이제 학습을 시작할 시간입니다!

무섭게 생겼고 프로그래밍하기 쉬웠어요

특히 불안한 분들을 위해 예를 들어 소개를 시작하겠습니다. 다음은 이 기사를 위해 특별히 작성한 간단한 프로그램 코드입니다. 괜찮아요. 각 단계에 대한 자세한 설명이 제공됩니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

기본 하이퍼텍스트 마크업 언어 태그 HTML 5와 함께 제공되는 새로운 태그 페이지 구조화 예 제1조 첫 번째 기사의 내용은 다음과 같습니다. 제2조 두 번째 기사의 내용은 다음과 같습니다.

이 코드는 헤더, 메뉴, 콘텐츠 패널(콘텐츠)과 사이드바(사이드바)를 포함하는 메인 패널(레이아웃), 그리고 “바닥글”(바닥글)로 나누어지는 블로그 페이지를 생성합니다. ).

첫 번째 줄부터 디브리핑을 시작하겠습니다.

웹 문서의 유형을 나타내는 것이 주요 임무인 언어 요소입니다. 이러한 방식으로 브라우저는 페이지가 표시되어야 하는 표준을 결정합니다. 오늘날에는 여러 버전의 html이 있기 때문입니다.

그러나 '언어의 새로운 단위'에 주목할 필요가 있다. 스타일. 이름에서 짐작할 수 있듯이 이 태그는 스타일을 설정하고 페이지의 개체 배열을 조정합니다.

논리적으로 보면, “프로그램의 이 부분에는 어떤 종류의 이해할 수 없는 코드가 있습니까?”라는 질문이 즉시 머릿속에 떠올랐다고 가정할 수 있습니다. 전혀 HTML처럼 보이지 않아요!” 대답은 다음과 같습니다. 스타일 태그에 기록되는 것은 html이 아니라 CSS 코드입니다. 앞서 언급했듯이 이는 웹사이트의 모양을 포맷하는 도구입니다.

사업부마크업 언어 블록 태그를 나타냅니다. 추가 수정을 위해 특정 조각을 분리하는 데 사용됩니다.

블록은 계단식 스타일 시트를 사용하여 관리됩니다. CSS 언어 예제 웹 페이지에는 클래스 속성을 사용하여 스타일이 지정된 세 개의 블록이 있습니다.

따라서 코드에는 다음이 포함됩니다.

• 레이아웃 – 페이지의 주요 부분을 담당하는 블록,
• 사이드바 – 사이드바(보통 탐색용으로 생성됨)
• 콘텐츠 – 블로그 게시물이 위치한 블록입니다.

사이드바 클래스 정의가 있는 요소에서 요소를 사용하여 순서가 지정되지 않은 목록을 정의합니다.

그리고
• . 스타일 클래스 콘텐츠가 있는 블록 – 제목 태그

  그리고 단락

  이제 블록을 자세히 살펴보겠습니다.

  .

  HTML인가요 아니면 여전히 HTML 5인가요? 어떻게 인식하나요?

  레이아웃 스타일 클래스가 있는 div에는 다른 블록 외에도 머리글, 메뉴, 바닥글과 같은 태그가 있습니다. 예제의 다른 요소와 달리 이는 HTML 5 플랫폼에만 해당됩니다.

  따라서 헤더는 하이퍼텍스트 마크업 언어의 요소로, 일반적으로 제목이 삽입되는 사이트 페이지나 섹션의 헤더를 생성합니다. Internet Explorer 브라우저는 버전 8까지의 헤더를 지원하지 않지만 해당 내용을 표시한다는 점은 주목할 가치가 있습니다.

  메뉴 태그의 주요 목적은 메뉴 항목을 표시하는 것입니다. 번호가 매겨진 목록과 번호가 매겨지지 않은 목록을 생성하는 요소와 유사하게 메뉴 컨테이너 내에서 각 콘텐츠 항목은 쌍을 이루는 태그에 포함됩니다.

  .

  

  마지막으로 바닥글 언어 단위입니다. 웹 개발자 전문 용어에서는 이를 페이지의 "바닥글"이라고도 합니다. 이 태그는 페이지 또는 섹션 하단에 있습니다. 바닥글에는 일반적으로 특정 리소스의 저자, ​​문서 작성 날짜, 배경 정보 또는 웹 리소스 독자의 특별한 주의가 필요하지 않은 기타 자료에 대한 정보가 포함됩니다.

  웹 리소스 생성 도구

  인터넷 페이지를 개발하기 위해 많은 소프트웨어 제품이 만들어졌습니다. 일반적으로 간단한 편집 프로그램과 전문적인 소프트웨어 제품으로 나눌 수 있습니다.

  웹사이트를 만들 때 가장 먼저 상상해야 할 것은 웹페이지가 어떻게 구성되어 있는지입니다. 이것은 웹사이트 구축에 있어서 일종의 “기초”입니다. 따라서 보다 복잡한 웹사이트 제작 기술을 살펴보기 전에 최소한 HTML에 대한 기본 지식을 갖추는 것이 좋습니다. 이번 수업에서 우리는 HTML, 정리하자 HTML 문서 구조실제 사례를 사용하여 얻은 지식을 통합합니다.

  HTML이란 무엇입니까?

  HTML HyperText Markup Language의 약자입니다. 이 언어는 사이트 페이지에 하이퍼텍스트가 표시되는 방식을 정확하게 담당합니다. 이제 하이퍼텍스트가 무엇인지 알아 봅시다. 단일 웹 페이지에 텍스트, 일부 표, 그래프, 비디오, 오디오 등 다양한 유형의 정보가 포함될 수 있다는 것은 비밀이 아닙니다. 따라서 이 모든 정보는 하이퍼텍스트라는 한 단어로 불릴 수 있습니다.

  HTML은 프로그래밍 언어가 아니라 마크업 언어입니다. 이 언어에는 논리적 기능이 없으며 수학적 계산을 수행하는 것이 불가능합니다. HTML 페이지에는 확장자가 있습니다. .html또는 .htm IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera 등 브라우저에서 처리됩니다.

  이제 브라우저가 웹 페이지에 표시할 내용과 표시 방법을 어떻게 이해하는지 알아 보겠습니다. 매우 간단합니다. 하이퍼텍스트 마크업 언어 HTML에는 태그라는 내장 명령이 있습니다. 브라우저가 지향되는 것은 바로 그들입니다.

  HTML 문서 구조

  모든 HTML 문서(웹 페이지)에는 특정 구조가 있어야 합니다. 이렇게 하면 브라우저에서 페이지를 열 때 발생할 수 있는 문제를 피할 수 있습니다. 예를 들어, 다음 HTML 코드가 포함된 페이지를 살펴보겠습니다.

  ...
  
  

  이 구조에 무엇이 포함되어 있는지 순서대로 살펴보겠습니다.

  1. HTML 문서에서 가장 먼저 들어가는 것은 버전 표시(첫 번째 줄)입니다. 올바른 작동을 위해 웹 페이지 레이아웃 시 이 줄을 지정해야 합니다.

  3. 그런 다음 사이트 상단(헤더) 영역이 나옵니다. 태그는 이에 사용됩니다. . 헤더에서는 태그 사이에 페이지 제목을 배치하여 페이지 이름을 나타냅니다. . 다음으로 HTML 문서의 인코딩이 표시됩니다(다섯 번째 줄). 이는 키릴 문자를 올바르게 표시하기 위해 수행됩니다. 태그로 헤더 영역 닫기.

  4. 메타 태그 "설명" - 검색 엔진을 위한 페이지 요약입니다. 이 태그는 검색 엔진 최적화에 중요하므로 작성해야 합니다.

  5. 메타 태그 "키워드" - 페이지에 나타날 수 있는 키워드입니다. 이 태그는 검색 엔진용으로도 사용됩니다. 이 태그는 요즘에는 거의 사용되지 않습니다.

  6. 페이지 본문이 태그와 함께 열립니다. 그에 따라 태그로 닫힙니다.
  
  . 웹 페이지의 본문에는 일반적으로 텍스트, 비디오, 오디오 및 기타 정보와 같은 주요 콘텐츠가 포함됩니다.

  따라서 우리는 HTML이란 무엇인가에 대한 질문에 답하고 HTML 문서의 구조를 연구했습니다. 이 단원에서 얻은 정보는 기본 개념이므로 그것 없이는 할 수 없습니다. 더 복잡한 것에 대해서는 다른 수업에서 이야기하겠습니다.

  오늘은 HTML5의 의미론에 대해 이야기하겠습니다. 나는 이미 에 대한 간단한 리뷰 게시물을 작성했습니다. 이 글을 읽기 전에 꼭 숙지해 두시길 권합니다. 이제 HTML5 문서의 의미 구조를 정확하고 유능하게 구성하는 방법에 대해 이 문제를 더 자세히 살펴보겠습니다.

  이 기사에서는 점진적으로 HTML 페이지를 만들고 의미 있는 HTML5 태그로 장식해 보겠습니다.

  

  그림 - HTML5 페이지의 의미 구조.

  페이지 제목의 DOCTYPE 및 메타 태그

  표준 HTML5 문서 템플릿으로 시작하여 헤드에 메타 태그를 추가해 보겠습니다.

  태그를 추가했습니다 키워드를 담당하는 곳입니다. 그리고 태그 페이지 설명을 담당합니다. SEO 최적화를 위해서는 이러한 태그가 필요합니다. 태그를 올바르게 작성하는 것도 필요합니다 , 태그 안에 배치됨 . 문서 자체가 창에 표시될 때 문서 제목은 나타나지 않습니다.

  문서 본문 태그.문서 본문 태그는 창에 표시되는 HTML 문서의 구성 요소를 식별합니다. 문서 본문에는 다른 문서, 텍스트, 기타 형식 정보에 대한 링크가 포함될 수 있습니다.

  문서의 본문입니다.문서 본문은 태그 사이에 있어야 합니다. 그리고. 문서의 텍스트 및 그래픽(의미) 정보로 표시되는 문서의 일부입니다.

  제목 수준<Нх>. 첫 번째 수준의 제목(가장 큰)은 숫자 1로 지정되고 다음 수준은 2로 지정되며, 이런 식으로 숫자 6까지 지정됩니다. 대부분의 브라우저는 6가지 수준의 제목 해석을 지원하며 각 수준은 고유한 스타일을 정의합니다. 대부분의 경우 이러한 헤더의 텍스트는 굵게 표시되고 텍스트 뒤에는 빈 줄이 표시됩니다. 이러한 태그가 문서의 논리적 구조를 결정하고 인터넷 검색 엔진의 색인 생성에 참여하는 것이 중요합니다. 레벨 6 이상의 헤더는 표준이 아니며 브라우저에서 지원하지 않을 수 있습니다.

  단락 태그<Р>. 안에대부분의 워드 프로세서와 달리 HTML 문서에서는 캐리지 리턴이 무시됩니다. 브라우저는 태그가 있는 경우에만 단락을 분할합니다.<Р>. 태그로 단락을 구분하지 않는 경우<Р>, 그러면 문서는 하나의 큰 단락처럼 보입니다.

  미리 서식이 지정된 텍스트 태그

  .
  꼬리표 
  텍스트를 화면에 특정 형식으로 표시할 수 있습니다.  미리 서식이 지정된 텍스트는 종료 태그로 끝납니다.
  .  미리 서식이 지정된 텍스트 내에서 줄 바꿈, 탭 문자(오른쪽으로 8자 이동), 브라우저에서 설치한 불균형 Courier 글꼴을 사용할 수 있습니다.
  
  태그를 나열합니다. HTML 문서에는 번호 목록, 글머리 기호 목록, 설명 목록의 세 가지 주요 목록 유형이 있습니다.
  다른 목록 태그를 사용하거나 다른 목록 태그 내에서 태그를 반복하여 중첩된 목록을 만들 수 있습니다.  이렇게 하려면 한 쌍의 태그(시작 및 끝)를 다른 태그 안에 배치하기만 하면 됩니다.  중첩된 목록 항목이 목록 항목을 나타내는 동일한 마커를 가질지 여부는 브라우저에 따라 다릅니다.
  번호가 매겨진 목록.  안에번호가 매겨진 목록에서 브라우저는 자동으로 항목 번호를 순서대로 삽입합니다.  즉, 번호가 매겨진 목록에서 하나 이상의 항목을 삭제하면 나머지 번호가 자동으로 다시 계산됩니다.
   
  그리고 태그로 끝납니다
   
  .
  
  글머리 기호 목록.  을 위한글머리 기호 목록의 경우 브라우저는 일반적으로 목록 항목에 글머리 기호를 사용합니다.  마커 유형은 일반적으로 브라우저 사용자가 구성합니다.
  번호가 매겨진 목록은 시작 태그로 시작됩니다. 
  그리고 태그로 끝납니다
  .  각 목록 요소는 태그로 시작됩니다.<ы>.
  
  글꼴 서식. HTML은 텍스트 조각의 글꼴 선택에 대해 두 가지 접근 방식을 허용합니다.  한편으로는 텍스트의 특정 섹션에 있는 글꼴이 굵게 또는 기울임꼴이어야 함을 직접 나타낼 수 있습니다.  텍스트의 물리적 스타일을 변경합니다.  반면에 일부 텍스트를 비정상적인 논리적 스타일로 표시하고 해당 스타일의 해석을 브라우저에 맡길 수도 있습니다.
  HTML 문서 내부의 그래픽. WEB의 가장 매력적인 기능 중 하나는 HTML 문서에 그래픽 및 기타 유형의 데이터를 포함할 수 있다는 것입니다.
  HTML 문서에서 그래픽을 사용하는 방법에는 두 가지가 있습니다.  첫 번째는 문서에 그래픽 이미지를 삽입하는 것입니다. 이를 통해 사용자는 문서의 다른 요소의 맥락에서 이미지를 직접 볼 수 있습니다.  이는 태그를 사용하여 수행됩니다. .  이 태그는 점으로 표시되어 있습니다.  닫히지 않습니다.  태그 구문:
  
  필수 매개변수는 표준 URL과 동일한 구문을 갖습니다.  이 URL은 브라우저에
  그림.  도면은 브라우저에서 지원하는 그래픽 형식으로 저장되어야 합니다.  현재는 GIF, JPG, PNG 형식입니다.  대부분의 브라우저에서 지원됩니다.
  ALT="텍스트"
  이 선택적 요소는 그래픽을 지원하지 않거나 이미지 그래픽이 비활성화된 브라우저에 표시될 텍스트를 지정합니다.  일반적으로 이는 사용자가 화면에서 볼 수 있거나 볼 수 있는 이미지에 대한 간단한 설명입니다.  이 매개변수가 없으면 대부분의 브라우저는 그림 위치에 빈 프레임을 표시합니다.  꼬리표 사용자가 Lynx와 같은 비그래픽 브라우저를 사용하고 검색 엔진 색인을 생성하는 경우 권장됩니다.  텍스트는 커서 아래의 시스템 툴팁으로 이미지 위로 이동하지 않고 마우스 커서를 일정 시간 동안 유지해도 표시됩니다.
  대부분의 브라우저에서는 문서에 배경 이미지를 포함할 수 있습니다. 이 이미지는 욕실 타일처럼 복제되어 전체 문서의 배경으로 나타납니다.  이것이 두 번째 방법입니다.  배경 그래픽을 좋아하는 사용자도 있고 그렇지 않은 사용자도 있습니다.  눈에 띄지 않는 반투명 패턴(벽지)은 일반적으로 대부분의 문서의 배경으로 보기 좋습니다.
  하이퍼텍스트 링크는 웹을 사용자에게 매력적으로 만드는 핵심 구성 요소입니다.  사용자는 하이퍼텍스트 링크(이하 링크)를 추가함으로써 일련의 문서를 연결하고 구조화하여 필요한 정보를 최대한 빠르고 편리하게 얻을 수 있습니다.
  링크에는 브라우저가 이를 해석하고 링크 유형에 따라 필요한 기능(호출 방법)을 수행할 수 있는 표준 형식이 있습니다.  링크는 다른 문서, 문서 내의 특정 위치를 가리키거나 파일 요청과 같은 다른 기능을 수행할 수 있습니다.  텍스트나 이미지 또는 둘 다를 하이퍼링크로 사용할 수 있습니다.
  HTML 문서의 링크 구조.브라우저가 URL에 대한 링크를 표시하려면 하이퍼링크 태그 안에 텍스트나 이미지를 배치해야 합니다.  HTML 구문은 다음과 같습니다:
  <А HREF="URL">링크로 강조 표시될 텍스트 또는 이미지
  
  꼬리표<А HREF="URL">링크 설명과 태그가 열립니다.– 닫습니다.  이 두 태그 사이에 있는 모든 텍스트는 웹 브라우저에서 특별한 방식으로 강조 표시됩니다.  일반적으로 이 텍스트는 밑줄이 그어져 강조 표시됩니다.  이미지는 직사각형 프레임으로 구성됩니다.  URL을 나타내는 텍스트는 브라우저에 표시되지 않지만 링크가 활성화될 때(일반적으로 강조 표시되거나 밑줄이 그어진 텍스트를 클릭하여) 의도한 작업을 수행하는 데에만 사용됩니다.
  문서 내의 태그에 대한 링크입니다.해당 섹션에 대한 특별한 숨겨진 레이블을 사용하여 동일한 문서의 다른 영역이나 섹션에 연결할 수 있습니다.  이를 통해 화면을 스크롤하지 않고도 문서 내의 섹션에서 섹션으로 빠르게 이동할 수 있습니다.  사용자가 링크를 클릭하자마자 브라우저는 그를 문서의 지정된 섹션으로 이동시키고 이 섹션에 대한 레이블이 포함된 줄은 브라우저 창의 첫 번째 줄에 배치됩니다("길이"가 브라우저 창에 있는 문서이면 충분합니다.)
  모든 HTML 문서는 태그로 시작해야 합니다. <
  HTML>
  그리고 태그로 끝납니다 HTML>
  .  이러한 태그는 태그 사이의 줄이 단일 HTML 문서를 나타냄을 나타냅니다.  또한 HTML 파일 전체가 HTML 언어의 요소임을 알 수 있습니다.
  또한 HTML 문서에는 HEAD(문서 정보) 및 BODY(문서 본문) 요소가 포함되어야 합니다.
  문서 섹션머리
  문서의 HEAD 섹션은 제목을 정의하고 브라우저의 문서에 대한 추가 정보도 포함합니다.  이 섹션은 선택 사항이지만 잘 작성된 헤더는 매우 유용할 수 있으므로 HTML 문서에서 항상 사용하는 것이 좋습니다.
  헤더 섹션은 태그로 시작됩니다. <
  머리>
  태그 바로 뒤에 .  HEAD 요소의 여는 태그와 닫는 태그 사이에는 다른 헤더 요소가 있습니다.
  문서 제목 제목
  HTML 문서에 이름을 지정하려면 태그가 다음과 같습니다. <
  제목>
  .  이 이름은 브라우저 창 제목에 표시됩니다.  제목은 태그 사이에 작성됩니다. 그리고 한 줄의 텍스트입니다.  이 줄의 길이는 제한되지 않지만 60자 이하로 설정하는 것이 좋습니다.  TITLE 요소는 HEAD 섹션에만 나타나야 합니다.
  문서 섹션몸
  문서의 이 섹션에는 브라우저 창에 표시되는 정보가 포함되어 있습니다.  BODY 섹션은 태그로 시작해야 합니다. <
  몸>
  그리고 태그로 끝납니다 몸>
  , 그 사이에는 문서의 내용을 구성하는 HTML 요소가 있습니다.
  품목 사양몸
  꼬리표 문서의 모양을 결정하는 다양한 속성이 있습니다.  아래는 태그 사양입니다. .
  TEXT="텍스트 색상"
  BGCOLOR="배경색"
  BACKGROUND="배경 이미지 주소"
  TEXT 속성은 전체 문서의 글꼴 색상을 RGB 또는 문자 표기법으로 지정합니다.  기본적으로(이 속성이 지정되지 않은 경우) 브라우저 설정이 사용됩니다.
  BGCOLOR 속성은 문서 브라우저 창의 배경색을 RGB 또는 기호 표기법으로 지정합니다.  기본적으로 브라우저 설정이 사용됩니다.
  BACKGROUND 속성을 사용하면 배경으로 사용되는 사진의 주소와 이름을 지정할 수 있습니다.  이 그림은 문서 배경으로 복제되어 배포됩니다.
  LINK, VLINK 및 ALINK 특성은 RGB 또는 기호 표기법으로 하이퍼링크 색상을 지정합니다.  기본적으로 브라우저 설정이 사용됩니다.  방문하지 않은 하이퍼링크는 다른 문서로 이동하는 데 아직 사용되지 않은 하이퍼링크입니다.  방문한 하이퍼링크는 다른 문서로 이동하는 데 이미 사용된 하이퍼링크입니다.  활성 하이퍼링크 – 현재 탐색 중인 문서에 대한 하이퍼링크입니다.
  BODY 태그 속성 사용에 대한 팁
   BODY 태그에 하나 이상의 색상을 지정한 경우 다른 색상도 지정하세요.  이는 사용자가 브라우저의 색상 설정을 자신에게 더 편리하게 설정할 수 있기 때문입니다.  하나의 색상만 지정하면 일부 사용자의 경우 텍스트가 배경색과 혼합될 수 있습니다.  결과적으로 문서를 보는 것이 어려워집니다.
   배경색이나 이미지의 기본 색상과 "작동"하도록 텍스트 색상을 선택하십시오.  예를 들어, 녹색 바탕에 빨간색이 있으면 상당수의 사람들에게 심각한 문제가 발생할 수 있습니다.
   BODY 요소에는 BGCOLOR와 BACKGROUND를 모두 지정할 수 있습니다.  이 경우 브라우저에서는 BACKGROUND를 우선시하지만, 배경 이미지를 불러올 수 없는 경우에는 BGCOLOR를 사용하게 됩니다.  따라서 문서의 색상 균형이 깨지지 않도록 배경색을 배경 이미지의 색상과 유사하게 설정하십시오.
  
  
  
  
  
  
  
      
   
      
  다음 내용을 읽어보는 것이 도움이 될 수 있습니다.
      
  
       
  게임 연습 - 까다로운 테스트;
   
  가장 끔찍한 공포.  소름 끼치는 이야기.  가장 끔찍한 공포 캠프 공포 이야기 바퀴 달린 관;
   
  어린이 시계 : 유형, 기능;
   
  문서 양식(송장)을 Excel 형식으로 저장할 수 없습니다. "저장" 및 "다른 이름으로 저장" 버튼을 사용할 수 없습니다.;
   
  Excel에서 셀 크기를 조정하고 동일하게 만드는 방법 Excel에서 모든 열의 너비를 변경하는 방법;
   
  AutoCAD 작업공간의 기본 설정 AutoCAD에서 사용자 정의 좌표계를 만드는 방법;
   
  위치 번호 체계의 숫자 번역;
   
  직렬 발진 회로의 전압 공진;