HTML 기본 - 필수 태그 및 HTML 문서 만들기 - 1 투표를 기준으로 5점 만점에 5.0

이 자습서에서는 HTML의 기본 사항을 다룹니다.

이미 알고 있듯이 인터넷의 대부분의 웹 페이지는 html 파일 형식입니다. 그러한 문서의 기본 태그와 그 목적을 고려하십시오.

HTML 문서에는 페이지에서 텍스트와 그래픽이 표시되는 방식을 결정하고 적절한 파일 확장자를 갖는 특정 태그가 포함되어 있다는 점에서 텍스트 문서와 다릅니다.

브라우저가 이해할 수 있도록 이 페이지태그로 구성되며 이를 위한 것으로 특정 확장자가 있어야 합니다. HTML 문서에는 .html 또는 .htm 확장자가 있습니다.

이제 간단한 웹 페이지를 만들 것입니다. html 문서, 즉 확장자가 .html인 파일을 만드는 것은 배를 껍질을 벗기는 것만큼 쉽습니다. 나는 이것을 위해 특별한 폴더를 만드는 것이 좋습니다. 여기에 우리가 수업에서 고려할 모든 것을 넣을 것입니다.

공부를 목적으로 하는 동안 HTML 언어우리는 페이지를 만드는 데 사용하지 않습니다 특별 프로그램, 널리 알려진 등. 이 단계에서 우리의 목표는 html의 기초를 배우는 것입니다.

페이지를 생성하기 위해 우리는 표준 텍스트 편집기를 사용할 것입니다. Windows 버전. 내 경험으로 나는 그것을 안다. 이 방법 HTML의 기초를 배우기 시작한 사람에게 가장 생산적이고 이해하기 쉽습니다.

앞으로 사이트를 만들려면 일종의 HTML 편집기를 사용하는 것이 가장 좋습니다. 이렇게 하면 작업이 간단해집니다. 개인적으로 Dreamweaver 편집기를 사용하는 것을 선호합니다.

그동안 메모장 텍스트 편집기를 사용해 봅시다. 따라서 "시작" >> "모든 프로그램" >> "표준" 메뉴 항목으로 이동하여 메모장 텍스트 편집기를 시작합니다.

이제 아래 코드를 복사하여 메모장 창에 붙여넣으십시오. 모든 html 파일의 기초가 됩니다.

내 첫 페이지 그래서 당신은 당신의 첫 번째를 만들었습니다 웹 페이지!!!

삽입? 이제 메모장에서 "파일" 메뉴 항목을 선택하고 드롭다운 목록에서 "다른 이름으로 저장 ..." 항목을 선택하면 파일 저장 창이 열립니다. 여기서 우리는 "파일 이름" 필드에 관심을 가질 것입니다. 여기에 파일 이름(예: "My first page")을 입력하고 .txt 확장자 대신 .html 확장자를 입력해야 합니다.

인터넷에 페이지를 배치할 때 페이지에 이름이 지정된다는 점을 기억하십시오. 영어, 여기에서는 예를 들어 러시아어로 이름을 지정했습니다. 그림을 보세요.

그런 다음 이전에 만든 폴더나 컴퓨터의 다른 폴더를 선택하고 이 파일을 저장합니다. 내 자신 텍스트 문서닫지 마십시오. 우리는 여전히 그와 함께 일할 것입니다.

코드를 입력하고 확장자를 .txt에서 .html로 변경한 결과 텍스트 문서를 html 문서로 "전환"했습니다. 이제 이 파일을 저장한 폴더로 이동하여 브라우저에서 엽니다. 결과적으로 "여기에 첫 번째 웹 페이지를 만들었습니다!!!"라는 텍스트가 표시됩니다.

그런 다음 브라우저 창을 닫지 않고 메모장으로 돌아가서 "여기에 첫 번째 웹 페이지를 만들었습니다 !!!"라는 텍스트를 원하는 대로 변경해 보십시오. 그런 다음 "파일" >> "저장" 메뉴 항목으로 이동하여 이 페이지가 있는 열린 브라우저 창으로 이동합니다. 여기에서 버튼을 클릭하여 페이지를 새로 고치거나 조합을 누릅니다. Ctrl 키+ R, 페이지가 새로 고쳐지고 브라우저에 텍스트가 표시됩니다.

코드 자체에서 무언가를 변경할 때 항상 이 작업을 수행하십시오. 텍스트 에디터메모장에서 브라우저에 어떻게 표시되는지 확인하고 싶습니다.

이제 파일에 어떤 종류의 태그를 작성했는지 알아보겠습니다. 사실 이것들은 가장 중요한 html 문서 태그이며, HTML의 기초파일이며 모든 HTML 문서에 있어야 합니다.

코드의 첫 번째 주요 태그는 이 시작 및 종료 태그는 html 문서를 시작하고 끝내고 브라우저에 파일을 html 문서로 취급해야 한다고 알려줍니다.

다음 태그 html 문서의 일종의 헤드 역할을 하며 그 안에 특정 서비스 정보를 포함하는 다른 태그가 배치됩니다. 우리는 다른 사람들에 대해 이야기 할 것입니다.

이 경우 태그를 포함하고, 이 태그에는 페이지 이름이 포함되어 있으며 브라우저 창 맨 위에서 볼 수 있습니다. 이 예에서는 "My first page"라는 이름이 표시됩니다. 그리고 우리 코드의 마지막 태그는 이 태그들 사이에 웹 페이지의 모든 내용, 모든 텍스트, 그래픽, 표 등을 직접 배치합니다. 이것이 모든 HTML 파일.

이 단원에서는 html 문서에 필요한 태그와 그 기초를 형성하는 태그를 살펴보았습니다. 다음에 HTML 수업나머지 태그를 살펴보고 각 태그가 개별적으로 무엇을 담당하는지, 특정 태그에 어떤 속성이 내재되어 있는지 알아보겠습니다.

HTML 기초 HTML 언어의 기본 규칙, HTML 페이지 구조에 대한 설명, HTML 요소 간의 HTML 문서 구조 관계를 포함합니다.

HTML 문서는 일반 텍스트 문서이며 일반 텍스트 편집기와 동일한 방식으로 작성할 수 있습니다. (공책), 그리고 코드 강조 표시가 있는 특수한 경우 (메모장++, 비주얼 스튜디오코드 등). HTML 문서에는 .html 확장자가 있습니다.

HTML 문서는 HTML 요소와 텍스트의 트리로 구성됩니다. 각 요소는 소스 문서에서 시작(열기) 및 끝(닫기) 태그로 식별됩니다(드문 경우 제외).

시작 태그요소가 시작되는 위치, 끝 - 끝나는 위치를 보여줍니다. 닫는 태그태그 이름 앞에 슬래시 /를 추가하여 형성:<имя тега> … . 시작 태그와 끝 태그 사이에는 태그의 콘텐츠인 콘텐츠가 있습니다.

단일 태그는 콘텐츠를 직접 저장할 수 없으며 태그와 같은 속성 값으로 작성됩니다. 텍스트가 있는 버튼을 생성합니다 단추내부에.

예를 들어, 태그는 서로 중첩될 수 있습니다.

텍스트

. 투자할 때 마감 순서를 따라야 합니다. ("마트료시카"의 원리), 예를 들어 다음 항목은 올바르지 않습니다.

텍스트

.

HTML 요소는 속성(전역, 모든 HTML 요소에 적용, 고유)을 가질 수 있습니다. 속성은 요소의 여는 태그에 작성되며 속성 name="value" 형식에 지정된 이름과 값을 포함합니다. 속성을 사용하면 속성이 설정된 요소의 속성과 동작을 변경할 수 있습니다.

각 요소는 여러 클래스 값과 하나의 id 값만 가질 수 있습니다. 여러 클래스 값은 공백으로 작성되며,

. class 및 id 값은 문자, 숫자, 하이픈, 밑줄만 포함해야 하며 문자 또는 숫자로만 시작해야 합니다.

브라우저는 HTML 문서를 보고(해석) 구조(DOM)를 만들고 이 파일에 포함된 지침(스타일 시트, 스크립트)에 따라 표시합니다. 마크업이 정확하면 브라우저 창에 제목, 표, 이미지 등의 HTML 요소가 포함된 HTML 페이지가 표시됩니다.

통역 과정 (파싱)웹 페이지가 브라우저에 완전히 로드되기 전에 시작됩니다. 브라우저는 CSS를 처리하고 페이지 요소에 스타일 시트를 연결하면서 HTML 문서를 처음부터 순차적으로 처리합니다.

HTML 문서는 태그 사이의 두 섹션(제목)으로 구성됩니다. … 및 콘텐츠 - 태그 사이 … .

웹 페이지 구조

1. HTML 문서의 구조

HTML 언어는 문서 유형 선언 파일에 포함된 규칙을 따릅니다. (문서 유형 정의 또는 DTD). DTD는 특정 태그에 유효한 태그, 속성 및 해당 값을 정의하는 XML 문서입니다. HTML 유형. HTML의 각 버전에는 고유한 DTD가 있습니다.

DOCTYPE브라우저가 웹 페이지를 올바르게 표시할 책임이 있습니다. DOCTYPE은 HTML 버전(예: html)뿐만 아니라 웹상의 해당 DTD 파일도 정의합니다.

...

태그 내의 요소 , 소위 문서 트리를 형성합니다. 개체 모델문서, DOM(문서 객체 모델). 동시에 요소는 루트 요소입니다.


쌀. 하나. 가장 단순한 구조웹 페이지

웹 페이지 요소의 상호 작용을 이해하려면 소위 "가족 관계"요소 사이. 여러 중첩 요소 간의 관계는 상위, 하위 및 형제 관계로 분류됩니다.

선조다른 요소를 포함하는 요소입니다. 그림 1에서 모든 요소의 조상은 . 동시에 요소는 포함된 모든 태그의 조상입니다.

,

, ,