원하는 편집기에서 첫 번째 테스트를 위한 새 파일을 만듭니다. Windows 편집기를 사용하는 경우 시작>모든프로그램>액세서리>편집기를 통해 편집기를 엽니다.
그런 다음 파일>다른 이름으로 저장을 선택합니다 . 파일 유형 필드가 중요합니다.
모든 파일은 여기에 설정해야 합니다. 그런 다음 파일 이름 필드에 index.htm을 입력합니다. 이제 원하는 위치에 파일을 저장할 수 있습니다. 이것이 지금 작업 중인 파일, 즉 첫 번째 HTML 파일이며 현재 아직 비어 있습니다. 이 파일은 곧 변경됩니다.
Dreamweaver를 사용하는 경우에는 프로그램을 시작할 때 HTML 파일을 만들도록 지정하는 것이 가장 좋습니다.
HTML 프레임워크
HTML 프레임워크를 시작하기 전에 이 시리즈와 HTML 세계에서 사용되는 의미에 대한 중요한 참고 사항이 있습니다. 태그와 엘리먼트라는 용어를 자주 접하게 되는데, 안타깝게도 종종 잘못 해석되는 경우가 있습니다. 예를 들어 보겠습니다:
<a href="news.htm">뉴스에</a>
이 구문은 a 요소, 즉 <a href="news.htm">To the news</a>를 보여줍니다. 이 요소는 여는 a 태그, 즉 <a&t; 또는 전체 <a href="news.htm"&t;, 요소 콘텐츠 To the news 및 닫는 a 태그 </a&t;로 구성됩니다. 또한 요소 a에는 속성 값이 news.htm인 href 속성이 있습니다.
이전 예제에서는 요소 a를 통한 HTML의 하이퍼링크 정의를 보여주었습니다. 이 요소 a는 여는 ≪a< 태그와 닫는 &l;/a< 태그가 특징입니다. 보시다시피 요소와 태그라는 용어를 올바르게 사용하는 것은 그리 어렵지 않습니다.
이제 시작해 보겠습니다. 편집기에서 이전에 저장한 HTML 파일을 엽니다. 모든 HTML 문서에는 일정한 기본 구조가 있습니다.
다음은 전체 프레임워크입니다:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
개별 항목은 무엇을 의미할까요? 문서 유형 선언부터 시작하겠습니다.
<!DOCTYPE HTML>
이 유형의 문서 유형 선언은 나중에 웹사이트가 표시될 브라우저에 사용 중인 HTML 표준을 알려줍니다. 이 경우 HTML5입니다. HTML 4.01을 사용하는 경우 DOCTYPE 선언은 다음과 같이 표시됩니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
특히 문서 타입 선언은 매우 다양한 변형이 존재하기 때문에 HTML 초보자에게 혼란을 야기합니다. 문서 유형 선언은 문서에 포함될 수 있는 요소를 설명하는 일종의 구성 매뉴얼이라고 생각하면 됩니다.
저는 일반적으로 짧은 HTML5 선언을 사용하는 것을 권장합니다.
<!DOCTYPE HTML>
최신 브라우저는 이를 인식하고 표준 모드에서 이 선언이 사용된 페이지를 표시합니다. 하지만 HTML5에서 허용되는 HTML 요소만 정의해야 합니다. 이에 대해서는 나중에 자세히 설명합니다.HTML 요소를 계속 작성합니다.
<HTML LANG="EN"> ... </HTML>
이 요소는 문서를 둘러싸고 있습니다. 눈에 띄는 것은 lang 속성입니다. 이 속성은 문서에 사용되는 언어를 지정합니다. 다음은 독일어권 국가를 위한 몇 가지 lang 약어입니다.
- de - 독일어(표준)
- de-ch - 독일어(스위스)
- de-at - 독일어(오스트리아)
- de-lu - 독일어(룩셈부르크)
- de-li - 독일어(리히텐슈타인)
영어에는 훨씬 더 다양한 긴 약어가 있습니다.
- en-us - 영어(미국)
- en-gb - 영어(영국)
- en-au - 영어(호주)
- en-ca - 영어(캐나다)
- en-nz - 영어(뉴질랜드)
- en-ie - 영어(아일랜드)
- en-z - 영어 (남아프리카 공화국)
- en-jm - 영어 (자메이카)
- en - 영어(카리브해 제도)
두 자리 약어 de, gb 등을 사용할지 아니면 위에 표시된 복합 약어를 사용할지는 궁극적으로 사용자가 결정할 수 있습니다. 저는 두 자리 숫자를 선호합니다.
문서 헤더 데이터는 head 요소 내에 예상됩니다.
<head> ... </head>
헤더 데이터는 약간 다루기 어렵게 들리지만 금방 설명할 수 있습니다. 여기에 문서를 더 자세히 설명하는 내용을 넣는 곳입니다. 예를 들어 제목과 사용된 문자 집합이 여기에 포함됩니다. 스크립트와 스타일 시트도 여기에 통합할 수 있으며 일반 메타데이터도 정의할 수 있습니다. 이에 대해서는 나중에 자세히 설명하겠습니다.제목 요소는 특히 중요합니다.
<title>사진, 웹 디자인 및 사진 촬영을 사용한 이미지 편집 튜토리얼 - PSD-Tutorials.de </title>
이것은 다양한 위치에서 필요한 제목을 정의하는 데 사용됩니다.
- 브라우저의 제목 표시줄에 있습니다.
- 브라우저에 북마크가 설정된 경우.
- 물론 제목은 검색 엔진 최적화에서 매우 중요한 역할을 합니다.
따라서 제목이 얼마나 중요한지 알 수 있습니다. 가능한 한 짧고 간결한 제목을 선택하세요.
페이지에 대한 자세한 설명을 위해 메타 정보를 사용할 수 있습니다. 이에 대한 자세한 정보는 다음에 설명합니다.
사용된 문자 집합을 계속 사용합니다.
<meta charset="UTF-8" />
이 정보는 브라우저에 중요합니다. 문자가 올바르게 표시되도록 문자를 인코딩하는 방법을 알 수 있는 유일한 방법이기 때문입니다. 올바른 문자 집합을 지정해야만 예를 들어 움라우트 및 특수 문자가 올바르게 표시될 수 있습니다. 여기에는 일반적으로 UTF-8이 지정됩니다.
이제 웹사이트의 실제 콘텐츠, 즉 방문자에게 실제로 표시되는 내용에 대해 알아보겠습니다. 이 모든 것은 본문 요소에 정의됩니다.
<body> ... </body>
데모 목적으로 시작과 끝의 <body> 태그 사이에 다음을 삽입하면 됩니다:
<h1>PSD-Tutorials.de</h1>
그러면 문서는 다음과 같이 표시되어야 합니다.
<!DOCTYPE html> <html lang="en"> <head> <title>예제 HTML5 기본 프레임워크 - www.html-seminar.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de</h1> </body> </html>
변경 사항을 저장하고 브라우저에서 파일을 엽니다.
보시다시피 이제 PSD-Tutorials.de가 실제로 표시됩니다. 첫 번째 HTML 문서를 만들었습니다.
