감독의 직장에 대한 설명. "개인 관리"의 개념. 관리자의 직장 조직. 작업장의 조직 및 장비
웹 개발자는 특정 HTML 코딩 표준이 존재한다는 사실조차 인식하지 못하는 경우가 많습니다. 그러나 2000년에서 2010년 사이에 많은 웹 개발자가 HTML에서 XHTML로 전환했습니다. 동시에 XHTML은 개발자에게 유효하고 "잘 구성된" 코드를 작성하도록 강요했습니다. 코드 유효성 검사와 관련하여 HTML5는 약간의 엉성함을 허용합니다.
그러나 스타일이 일관되면 다른 사람들이 HTML 코드를 더 쉽게 이해할 수 있습니다.
아마도 언젠가는 XML 데이터 리더와 같은 프로그램이 HTML 코드를 읽어야 할 것입니다. 따라서 잘 구성된 XHTML과 유사한 구문을 사용하는 것이 합리적인 접근 방식입니다.
항상 코드가 깔끔하고 깨끗하며 형식이 올바른지 확인하세요.
올바른 문서 유형을 사용하세요.항상 첫 번째 줄에 문서 유형을 선언하세요.
소문자 태그와의 일관성을 유지하려면 다음을 사용할 수 있습니다. 다음 정의문서 유형:
요소 이름을 소문자로 작성
HTML5에서는 요소 이름에 대문자와 소문자를 모두 허용합니다. 그러나 항상 소문자만 사용하는 것이 좋습니다. 이는 다음 고려 사항으로 설명됩니다.
- 태그 이름에 대문자와 소문자를 혼합하는 것은 나쁜 습관으로 간주됩니다.
이것은 텍스트 단락입니다.
아주 나쁜:
이것은 텍스트 단락입니다.
이것은 텍스트 단락입니다.
모든 HTML 요소를 닫습니다.HTML5에서는 모든 요소를 닫을 필요가 없습니다(예: 요소
이것은 텍스트 단락입니다.
이것은 텍스트 단락입니다.
이것은 텍스트 단락입니다.
이것은 텍스트 단락입니다.
빈 HTML 요소 닫기HTML5에서는 빈 요소를 닫을지 여부는 웹 개발자의 희망에 따라 다릅니다.
허용 가능:
또한 허용됩니다:
그러나 XHTML 및 XML에서는 후행 슬래시(/)가 필수입니다.
귀하의 웹 페이지가 XML 애플리케이션에 의해 접근될 것으로 예상된다면, 빈 HTML 요소에 후행 슬래시를 사용하는 것이 더 좋습니다!
속성 이름에는 소문자를 사용하세요.HTML5에서는 속성 이름을 작성할 때 대문자와 소문자를 혼합할 수 있습니다.
- 속성 이름에 대문자와 소문자를 혼합하는 것은 나쁜 습관으로 간주됩니다.
- 개발자는 일반적으로 XHTML과 같은 소문자를 사용합니다.
- 소문자 쓰기가 더 깔끔해 보입니다.
- 소문자로 작성하는 것이 더 쉽습니다.
속성 값을 따옴표로 묶습니다.
HTML5에서는 속성 값을 따옴표 없이 작성할 수 있습니다. 그러나 속성 값을 항상 따옴표로 묶는 것이 좋습니다.
- 의미에 대문자와 소문자를 혼합하는 것은 나쁜 습관으로 간주됩니다.
- 인용된 값은 읽기 더 쉽습니다.
- 값에 공백이 있으면 인용해야 합니다.
아주 나쁜:
값에 공백이 있기 때문에 작동하지 않습니다.
| ㅏ | A에 대한 설명 |
| 비 | B에 대한 설명 |
HTML5 표준에 따라 태그와 태그를 사용할 수 없습니다.
다음 코드는 HTML5 표준에 따라 유효한 것으로 간주됩니다.
페이지 제목 텍스트 제목입니다.
이것은 텍스트 단락입니다.
요소는 문서의 루트입니다. 페이지 언어를 정의하는 데 권장되는 위치는 다음과 같습니다.
페이지 언어 선언은 특수 애플리케이션(예: 화면 판독기)과 검색 엔진 모두에 중요합니다.
또한, 태그나 태그를 작성하지 않으면 애플리케이션의 DOM 및 XML 구조가 깨질 수 있습니다. 또한 태그를 건너뛰면 이전 브라우저(IE9)에서 오류가 발생할 수도 있습니다.
태그를 건너뛰어야 하나요?HTML5 표준에 따라 태그를 사용할 수 없습니다.
기본적으로 브라우저는 자신이 만든 요소 내에서 여는 태그 앞에 모든 요소를 추가합니다.
태그를 생략하면 HTML 구조의 복잡성을 줄일 수 있습니다.
페이지 제목 텍스트 제목
이것은 텍스트 단락입니다.
메타데이터요소는 HTML5에 필요합니다. 페이지 제목은 다음과 같은 의미로 채워져야 합니다.
검색 엔진이 페이지를 올바르게 해석하고 인덱싱하도록 하려면 페이지의 언어 및 문자 인코딩 정의를 가능한 한 빨리 선언해야 합니다.
HTML5 구문 및 코딩 표준
뷰포트 설치(투시창)"뷰포트"는 웹페이지에서 사용자가 볼 수 있는 영역입니다. 이 영역은 장치마다 다르며 장치마다 다릅니다. 휴대 전화컴퓨터 화면보다 작습니다.
HTML5에서는 웹 디자이너가 .
모든 웹페이지에서는 항상 다음 형식의 뷰포트 컨트롤을 사용해야 합니다.
이 뷰포트 컨트롤은 페이지의 크기와 배율을 제어하는 방법에 대한 지침을 브라우저에 제공합니다.
width=device-width 부분은 현재 장치의 화면 너비와 일치하도록 페이지 너비를 설정합니다(사용 중인 장치에 따라 다름).
초기 규모=1.0 부품 세트 첫 번째 수준브라우저가 페이지를 처음 로드할 때 증가합니다.
아래에서는 뷰포트 메타 태그가 설치된 것과 설치되지 않은 스마트폰 화면의 웹 페이지 예를 볼 수 있습니다.
뷰포트 메타 태그가 있는 페이지
HTML 주석짧은 설명은 한 줄에 작성해야 합니다.
간단한 HTML5 문서
가장 간단한 HTML5 문서 중 하나를 살펴보겠습니다. 이는 특수 문서 유형 설명 코드(이 코드의 의미는 다음 섹션에서 설명됨)를 사용하여 문서 유형을 지정하는 것으로 시작하고, 문서의 인코딩과 이름, 그리고 그 내용이 이어집니다. 안에 이 경우내용은 다음과 같은 한 단락의 텍스트로 구성됩니다.
작은 HTML5 문서
이 간단한 문서는 더욱 단순화될 수 있습니다. 예를 들어 HTML5 표준에서는 종료 태그가 실제로 필요하지 않습니다. 브라우저는 문서 끝에서 열려 있는 모든 요소를 닫는 방법을 알고 있기 때문입니다(그리고 HTML5 표준에서는 이 동작을 시행합니다). 그러나 단순화하는 대신 이와 같이 모퉁이를 자르면 마크업을 이해하기가 더 어려워지고 예상치 못한 오류가 발생할 수 있습니다.
대부분의 웹 개발자는 전통적인 섹션을 사용하는 것이 문서를 더 쉽게 이해하는 데 유용하다고 생각합니다. 페이지에 대한 정보(페이지 제목)와 콘텐츠 자체(페이지 본문)를 명확하게 구분합니다. 이 구조는 페이지에 스크립트, 스타일 시트 및 메타 요소를 추가할 때 특히 유용합니다.
작은 HTML5 문서
브라우저를 HTML5 스타일로 바꿔보자!
마지막으로, 다음 목록에 표시된 것처럼 전체 문서(doctype 줄 제외)를 기존 요소로 래핑할 수 있습니다.
작은 HTML5 문서
브라우저를 HTML5 스타일로 바꿔보자!
HTML5까지 공식 HTML 사양의 모든 버전에서는 이 요소의 사용이 필요했지만 이 요소의 존재는 브라우저가 페이지 코드의 나머지 부분을 처리하는 방식에 어떤 영향도 미치지 않았습니다. HTML5에서 이 요소의 사용은 전적으로 개발자의 개인적인 재량에 달려 있습니다.
및 요소의 사용은 단순히 스타일의 문제입니다. 이러한 요소가 없는 페이지는 HTML5에 대해 들어본 적도 없는 오래된 브라우저에서도 완벽하게 작동합니다. 실제로 브라우저는 자동으로 이러한 요소가 있다고 가정합니다. 따라서 JavaScript 스크립트를 사용하여 페이지의 DOM(페이지를 나타내는 소프트웨어 개체 집합)을 보면 개발자가 사용하지 않았더라도 , 및 , 요소에 대한 개체가 포함되어 있습니다.
현재 이 예제 페이지는 가장 기본적인 HTML5 문서와 실용적인 HTML5 웹 페이지의 고급 시작점 사이에 있습니다. 후속 섹션에서는 필요한 나머지 요소를 여기에 추가하고 마크업을 더 자세히 살펴보겠습니다.
HTML5 문서 유형 설명모든 HTML5 문서의 첫 번째 줄은 항상 문서 유형을 설명합니다. 이 설명은 다음 내용이 HTML5 콘텐츠임을 명확하게 나타내며 다음과 같습니다.
HTML5 문서 유형에 대해 가장 먼저 눈에 띄는 점은 놀라운 단순성입니다. 예를 들어, 이를 엄격한 XHTML 1.0으로 작업할 때 웹 개발자가 사용해야 하는 문서 유형에 대한 투박한 설명과 비교해 보세요.
전문 웹 개발자라도 다른 문서에서 복사하여 붙여넣어 XHTML 문서 유형 설명을 삽입해야 했습니다. 그리고 HTML5 문서 유형 설명은 짧고 명확하며 수동으로 입력하기 쉽습니다.
HTML5 문서 유형 설명에는 공식 HTML 버전 번호(HTML5의 경우 5)가 포함되어 있지 않다는 점도 주목할 만합니다. 이는 단순히 페이지가 HTML 페이지임을 나타냅니다. 이는 살아있는 언어로서의 HTML5라는 새로운 개념과 일치합니다. HTML에 추가된 새로운 기능은 문서 유형 설명을 변경하지 않고도 자동으로 페이지에 배치할 수 있습니다.
이 모든 것은 어려운 질문을 제기합니다. HTML5가 살아있는 언어라면 왜 페이지에 문서 유형 설명이 필요한가요?
이 질문에 대한 대답은 문서 유형 설명이 역사적인 이유로 계속 사용된다는 것입니다. 문서 유형 설명이 누락된 페이지를 처리할 때 대부분의 브라우저(포함) 인터넷 익스플로러및 Firefox)로 이동 호환 모드(쿼크 모드). 이 모드에서는 이전 버전에서 사용된 규칙의 오류를 기반으로 페이지 렌더링을 시도합니다. 문제는 한 브라우저의 호환성 모드가 다른 브라우저의 호환성 모드와 다를 수 있다는 것입니다. 그 결과 한 브라우저용으로 설계된 페이지가 다른 브라우저에서 잘못된 글꼴 크기, 깨진 레이아웃과 같은 오류를 표시할 가능성이 높습니다. 등등.
그리고 브라우저가 페이지에서 문서 유형에 대한 설명을 찾으면 이 페이지의 처리가 보다 엄격한 규칙에 따라 수행되어야 한다는 것을 알게 됩니다. 표준 모드, 최신 브라우저에서 표시할 때 일관된 페이지 형식 및 구조를 보장합니다. 몇 가지 예외를 제외하면 브라우저는 설명에 지정된 문서 유형에 전혀 무관심합니다. 단순히 페이지에 일종의 문서 유형 설명이 있는지 확인합니다. HTML5 문서 유형 설명은 브라우저 표준 모드를 활성화하는 가장 짧고 유효한 문서 유형 설명입니다.
문자 인코딩인코딩은 파일에 텍스트를 쓸 때 텍스트를 바이트 시퀀스로 변환하는 방법(및 파일을 열 때 다시 변환하는 방법)을 컴퓨터에 알려주는 표준입니다. 역사적인 이유로 전 세계적으로 다양한 인코딩이 있습니다. 요즘 거의 모든 웹사이트는 필요한 다른 모든 알파벳을 지원하는 작고 빠른 UTF-8 인코딩을 사용합니다.
웹 서버는 종종 웹 서버를 방문하는 브라우저에게 서버가 제공하는 페이지에 특정 인코딩이 있음을 알리도록 구성됩니다. 그러나 귀하의 웹사이트를 호스팅하려는 웹 서버가 (귀하의 서버가 아닌 이상) 이런 방식으로 구성될 것이라고 확신할 수는 없습니다. 자체 서버). 또한 사용 가능성이 가장 높은 인코딩을 추측하려는 브라우저의 시도는 일부 모호한 보안 문제로 인해 실패할 수 있습니다. 이러한 이유로 페이지 마크업에 사용된 인코딩에 대한 정보를 항상 포함해야 합니다.
HTML5를 사용하면 이 작업이 쉬워집니다. 이렇게 하려면 블록의 맨 처음에 요소를 삽입하기만 하면 됩니다(또는 요소가 사용되지 않는 경우 문서 유형 설명 코드 바로 뒤에).
작은 HTML5 문서
Dreamweaver 또는 Expression Web과 같은 웹 개발 도구는 페이지를 만들 때 이 요소를 자동으로 삽입합니다. 또한 이러한 도구는 파일이 UTF 인코딩으로 저장되도록 보장합니다. 그러나 일반 텍스트 편집기를 사용하여 웹 페이지를 만들 때는 파일이 올바른 인코딩으로 저장되도록 추가 단계를 수행해야 할 수도 있습니다.
언어웹페이지의 자연어를 나타내는 것은 좋은 형식으로 간주됩니다. 이 정보는 때때로 다른 사람들에게 유용할 수 있습니다. 예를 들어 검색 엔진은 이 정보를 사용하여 검색 결과를 필터링하여 지정된 언어로 된 페이지만 반환할 수 있습니다.
웹 페이지에 언어 정보를 삽입하는 가장 쉬운 방법은 요소를 이용하는 것입니다.
페이지에 화면 텍스트 리더를 사용하여 읽어야 하는 다양한 언어의 텍스트가 포함되어 있는 경우에도 언어 정보가 유용할 수 있습니다. 이 경우 해당 언어 코드가 포함된 lang 속성이 문서의 원하는 위치(예: 다른 언어의 텍스트를 포함하는 요소)에 삽입됩니다. 이런 방식으로 화면 텍스트 판독기는 읽을 수 있는 텍스트를 결정할 수 있습니다.
스타일 시트 추가적절하게 디자인된 전문 웹사이트의 거의 모든 페이지는 스타일 시트를 사용합니다. 필요한 스타일시트를 지정하려면 HTML5 문서 블록의 요소를 사용하세요.
작은 HTML5 문서
이 방법은 기존 HTML 문서에서 스타일 시트를 지정하는 것과 유사하지만 조금 더 간단합니다. CSS 스타일 시트에는 단 하나의 언어(CSS)만 있으므로 이전에 필요했던 type="text/css" 속성을 추가할 필요가 더 이상 필요하지 않습니다.
JavaScript 코드 추가JavaScript 스크립팅 언어는 원래 지루한 웹 페이지에 빛과 매력을 더하기 위해 시간이 많이 걸리는 방법으로 만들어졌습니다. 현재 JavaScript의 주요 용도는 인터페이스 종소리 개발에서 매우 효율적인 클라이언트를 포함한 맞춤형 웹 애플리케이션 개발로 전환되었습니다. 이메일, 텍스트 편집기브라우저에서 직접 실행되는 지도 엔진도 있습니다.
JavaScript 코드는 기존 HTML 페이지에 삽입되는 것과 거의 동일한 방식으로 HTML5 문서에 삽입됩니다. 다음 목록은 외부 파일에 대한 링크를 사용하여 웹 문서에 JavaScript 코드를 삽입하는 예입니다.
작은 HTML5 문서
다른 스크립팅 언어가 지정되지 않는 한(그리고 JavaScript가 HTML에 대해 널리 지원되는 유일한 스크립팅 언어이기 때문에 이러한 일이 발생할 가능성은 무시할 수 있음), 브라우저는 자동으로 JavaScript가 사용된다고 가정하기 때문에 Language="JavaScript" 속성은 선택 사항입니다. 하지만 외부 JavaScript 파일에 연결하는 경우에도 닫는 태그를 기억해야 합니다. 감독을 통해 또는 빈 요소 구문을 사용하여 코드를 단축하려고 시도하여 이 태그를 생략하면 페이지가 예상대로 작동하지 않습니다.
Internet Explorer에서 JavaScript 페이지를 테스트하는 데 많은 시간을 소비하는 경우 레이블을 추가하는 것이 유용할 수 있습니다. MOTW(Mark of the Web - 네트워크 기능 표시)인코딩 라인 바로 뒤의 블록에 있습니다. 이는 다음과 같이 수행됩니다.
작은 HTML5 문서
이 코드 줄은 Internet Explorer에게 페이지가 원격 웹 사이트에서 로드된 것처럼 페이지를 처리하도록 지시합니다. 그렇지 않으면 IE는 특수 차단 모드로 전환하고 메시지 표시줄에 보안 경고를 표시하며 차단된 콘텐츠 허용 버튼을 클릭할 때까지 JavaScript 코드 실행을 거부합니다.
다른 모든 브라우저는 MOTW 표시를 무시하고 원격 웹사이트와 로컬 HTML 파일에서 로드된 두 페이지에 대해 동일한 보안 설정을 사용합니다.
당신을 보내 잘 했어간단히 지식 기반으로 이동합니다. 아래 양식을 사용하세요연구와 업무에 지식 기반을 활용하는 학생, 대학원생, 젊은 과학자들은 여러분에게 매우 감사할 것입니다.
유사한 문서HTML5 언어, 목록 및 출현의 역사 간단한 설명그 기능의 범주. 멀티미디어 컨텐츠를 최대한 활용하는 대화형 웹 애플리케이션을 생성하도록 설계된 이 표준의 새로운 기능입니다.
코스 작업, 2015년 2월 17일에 추가됨
HTML5는 월드와이드웹(World Wide Web)의 콘텐츠를 구성하고 표현하기 위한 언어로, 인터넷에서 사용되는 핵심 기술이다. Asp.net MVC 3 기술과 HTML5 웹 마크업 언어를 사용하여 웹 애플리케이션을 만듭니다. MVC 플랫폼의 구성.
코스 작업, 2012년 5월 25일에 추가됨
사용자에게 정보를 제공하기 위한 교육 사이트 "HTML5&CSS3"의 주요 요소의 형성 및 구조, 관계 최신 기술웹 산업에 종사하고 응용 분야의 실무 기술을 교육합니다. 사용자 매뉴얼 개발.
코스 작업, 2014년 6월 17일에 추가됨
일반적 특성그리고 회사의 내부 구조. 웹사이트 구축을 위한 도구, 이 과정에서 Joomla 3 – CMS를 사용하는 기능. HTML5 사용의 장점과 단점. 서버측 프로세서로서의 PHP, 그 원리와 주요 기능.
실습 보고서, 2014년 9월 16일에 추가됨
웹 2.0 개념. HTML5 마크업 언어. 도구웹 애플리케이션을 생성합니다. UML 객체 분석 및 디자인 언어. 개발된 온라인 상점의 채우기 및 테스트 구현. 웹페이지 콘텐츠의 형식을 지정합니다.
논문, 2016년 6월 5일에 추가됨
클라이언트 부분의 구조. 콘텐츠 표시를 위해 HTML4 및 HTML5 요소를 선택합니다. 사이트의 정보 콘텐츠 구조. 웹 애드온의 서버 부분과 클라이언트 부분 간의 안전한 상호 작용. JavaScript를 사용하여 스크립트 프로그래밍.
과정 작업, 2014년 1월 13일에 추가됨
하이퍼텍스트 마크업 언어로서의 HTML, 그 구조, 요소. 계단식 스타일 시트, 개발. 레이아웃: 우리가 보는 페이지. 새로운 기술 – HTML5, CSS3. 더 적은. 동적 스타일 마크업 언어. 단순화된 마크업 기술 HAML, SASS.
논문, 2013년 4월 19일에 추가됨
인터넷상의 콘텐츠를 볼 수 있는 프로그램으로서 다양한 브라우저의 개념 기능적 특징그리고 주요 특징. 브라우저 개발의 역사, 기능, 전망에 대한 연구 및 비교.
코스 작업, 2013년 4월 23일에 추가됨
인터넷과 웹사이트가 처음 등장했을 때 개발자들은 다음과 같은 문제에 직면했습니다. 기술적 문제– 브라우저에서 쉽게 표시할 수 있도록 텍스트 및 그래픽 문서의 정보를 구성하고 구조화하는 방법은 무엇입니까?
해결책은 하이퍼텍스트 마크업 언어에서 찾았습니다. 그 당시에는 모든 웹사이트 개발자가 호환성에 대해 생각하지 않고 사실상 자신의 언어를 작성했습니다. 결과적으로 각 사이트에는 자체 브라우저가 필요했습니다.
당연히 이것은 오래 지속될 수 없습니다. 인터넷이 상업적인 관심을 끌기 시작하자마자 인터넷의 정보 공간을 즉시 통합하고 표준화할 필요성이 시급해졌습니다.
HTML 2.0 표준최초로 인식된 표준 하이퍼텍스트 마크업 언어는 HTML 2.0이었습니다. 그 전에는 개발자들끼리 의견이 일치하지 않았습니다. 이 언어로 된 웹사이트는 매우 간단하게 만들어졌으며 많은 제한이 있었습니다. 그리고 곧 컨소시엄이 월드 와이드 웹다음 버전을 제안했습니다.
HTML 3.2세 번째 버전도 특별한 것이 없었습니다. 새로운 기능의 개발은 계속되었고, 다양한 플레이어의 브라우저를 통합하려는 시도가 이루어졌습니다.
HTML 4.0 표준
HTML의 네 번째 버전에서는 이미 고품질 . 불필요한 태그가 많이 제거되었습니다. 웹 페이지를 보다 쉽게 만들기 위해 CSS(Cascading Style Sheet)와 같은 요소를 도입하여 텍스트 정보를 분리하고 서식을 지정했습니다.
이것이 바로 다양한 제조업체의 브라우저에서 사이트의 진정한 표준 표시를 가능하게 한 것입니다.
20세기 말까지 HTML 4는 개발 잠재력을 거의 소진했으며 C3W 컨소시엄은 XHTML이라는 새로운 확장 버전을 제안했습니다.
XHTML 2.0 표준몇 가지 실험 끝에 Extended Hypertext Markup Language의 두 번째 버전이 확립되었습니다. 확장 자체는 HTML 자체의 보다 엄격하고 체계화된 구성을 위해 XML 형식을 사용하는 것으로 구성되었습니다. 기본적으로 XHTML은 모두 동일한 태그이지만 XML 문서로 전송됩니다.
이 프로세스에는 특정 HTML 요구 사항이 강화되어야 합니다.
따라서 새 버전은 "더 엄격하고 표준"이 되었습니다. 모든 새로운 기능을 완전히 실현하려면 이것이 필요했습니다. 동시에 이전 브라우저에서는 XHTML 사이트를 렌더링할 수 있습니다.
완전히 달성되었나요?
그것이 어떻든 상관 없습니다. 컴퓨터 기술은 멈추지 않고 모바일 컴퓨터가 등장했으며 클라우드 서비스가 등장했으며 인터넷은 더 이상 사치가 아닙니다. 소셜 미디어매스 미디어 분야에서 진정한 돌파구였습니다. 사용자는 발전했고 이제 웹사이트는 편리한 정보를 제공하는 것 이상의 기능을 수행해야 합니다.
따라서 XHTML은 21세기가 시작되기도 전에 막다른 개발 경로로 인식되었습니다. 고급 하이퍼텍스트 언어조차도 동적, 대화형 및 멀티미디어 웹 리소스를 생성하는 데 충분하지 않았습니다.
프로그램 요소(스크립트)를 통합하고 웹페이지 구조를 Document Object Model 형식으로 재구성하여 정적 사이트를 강화하려는 시도가 있었습니다. 웹사이트는 더 빠르고 대화형으로 변했습니다. 그러나 레이아웃, 디버깅 및 구성이 너무 복잡합니다.