HTML5 기초, 1부: 시작하기

HTML5는 웹 콘텐츠를 구성하기 위해 설계된 언어입니다. 그 목적은 표준적이고 직관적인 UI 마크업 언어를 만들어 웹 디자인과 개발을 더 쉽게 만드는 것입니다. HTML5는 페이지를 자르고 분할하는 다양한 수단을 제공하므로 사이트를 논리적으로 구성하는 데 사용할 수 있을 뿐만 아니라 사이트에 집계 기능을 제공하는 절단 구성 요소를 만들 수 있습니다. HTML5는 정보 매핑의 본질을 구현하고 정보를 구분하고 정보에 태그를 지정하여 사용하기 쉽고 이해하기 쉽도록 정보를 웹 사이트 디자인으로 매핑하는 방법이라는 점에서 "정보에서 웹 사이트 디자인까지의 매핑 방법"이라고 설명할 수 있습니다. 이는 HTML5의 표현적 의미와 실용적인 미학의 기초로서 디자이너와 개발자에게 단순한 텍스트 콘텐츠부터 풍부한 대화형 콘텐츠까지 모든 수준에서 다양한 콘텐츠를 게시할 수 있는 능력을 제공합니다. 모든 멀티미디어가 포함됩니다.

HTML5는 효율적인 데이터 관리, 그리기, 비디오 및 오디오 도구를 제공하여 웹 및 휴대용 장치에서 크로스 브라우저 애플리케이션 개발을 용이하게 합니다. HTML5는 더 큰 유연성을 제공하고 매우 흥미로운 대화형 웹사이트 개발을 지원하므로 모바일 클라우드 컴퓨팅 서비스 개발을 주도하는 기술 중 하나입니다. 또한 우아한 구조, 양식 컨트롤, API, 멀티미디어, 데이터베이스 지원 및 크게 향상된 처리 속도를 포함한 새로운 태그와 향상된 기능을 소개합니다.

HTML5의 새로운 태그는 매우 인상적이며 태그는 해당 기능과 사용법을 요약합니다. 이전 버전의 HTML은 설명이 없는 태그를 더 많이 사용했습니다. 그러나 HTML5에는 내용을 즉시 식별할 수 있도록 하는 풍부한 내용 태그 세트를 제공하는 매우 설명적이고 직관적인 태그가 있습니다. 예를 들어, 자주 사용되는 태그는 ,

태그를 추가하면 특정 콘텐츠 유형에 대한 보다 정확한 설명도 제공됩니다.

HTML5는 다음을 제공합니다.

1. 포함하려는 내용을 정확하게 설명하는 태그
2. 향상된 네트워크 통신
3. 일반적으로 사용되는 저장소가 대폭 개선되었습니다. 백그라운드 프로세스를 실행하는 Web Worker
5. 로컬 애플리케이션과 서버 간의 지속적인 연결을 설정하는 WebSocket 인터페이스
6. 향상된 저장 데이터 검색 방법
7. 페이지 저장 및 로딩 속도 향상
8. CSS3를 사용하여 GUI를 관리합니다. 이는 HTML5가 콘텐츠 지향적일 수 있음을 의미합니다
9. 향상된 브라우저 양식 처리
10. 클라이언트측에서 로컬 저장을 허용하는 SQL 기반 데이터베이스 API
11. 캔버스 및 타사 플러그인을 설치하지 않고도 그래픽 및 비디오를 추가할 수 있는 비디오
12. 스마트폰 위치 기능을 사용하여 모바일 클라우드를 통합하는 Geolocation API 사양 서비스 및 앱
13. JavaScript 코드를 다운로드하면 모바일 장치와 클라우드 서비스 간의 보다 효율적인 통신이 가능해집니다.

HTML5는 사용자에게 더욱 매력적인 경험을 제공합니다. HTML5를 사용하여 디자인된 페이지는 데스크톱 애플리케이션과 유사한 경험을 제공할 수 있습니다. HTML5는 또한 API 기능을 유비쿼터스 브라우저와 통합하여 향상된 다중 플랫폼 개발을 제공합니다. 개발자는 HTML5를 사용하여 플랫폼 전반에 걸쳐 원활하게 흐르는 현대적인 애플리케이션 경험을 제공할 수 있습니다.

HTML5라는 단어를 말할 때, 지속적인 혁신을 표현하기 위해 짧은 단어를 사용합니다. 새로운 마크업, 새로운 방법론 세트, HTML5와 상호 보완적인 두 동료인 CSS3 및 Javascript 간의 상호 작용을 기반으로 하는 공통 개발 프레임워크, 현상에 대한 클라이언트 중심 접근 방식 애플리케이션의 핵심입니다. HTML5 기술 기술 및 방법의 많은 데스크톱 배포 외에도 HTML5는 기능이 풍부한 웹 휴대폰 브라우저에서도 구현될 수 있습니다. 이는 Palm webOS를 실행하는 Apple iPhone, Google Android 및 Android 장치 시장이 성장하고 있는 시장입니다. 이것에 대한 증거.

HTML5의 강력한 기능 중 매우 중요한 측면은 정보 매핑 또는 콘텐츠 차단입니다. 원한다면 이 접근 방식을 사용하면 프로세스를 훨씬 더 쉽게 이해할 수 있습니다. 웹 처리 영역에 대한 제어를 강화함으로써 설계 및 개발 측면에서 이 도구가 얼마나 효율적이었는지 확인할 수 있습니다.

HTML5는 텍스트 수준에서 보다 효율적인 의미 처리와 양식 구성 및 사용에 대한 보다 강력한 제어의 출현을 예고합니다. HTML5 혁신의 이러한 모든 기능과 기타 많은 미묘함은 점점 더 지배적인 패러다임의 기초입니다. 많은 기관, 상업 기관 및 기타 기관, 심지어 정보 처리 및 전달을 주요 기관 활동으로 전혀 간주하지 않는 많은 조직도 이러한 증가하는 현상의 발전으로 인해 다양한 정도로 영향을 받습니다.

HTML5는 요술램프가 아니며 지니가 나타나지 않습니다. 그러나 그 기술적, 방법론적 자산으로 인해 요술 램프를 연마하는 것보다 차선책이 됩니다.

기획페이지

간단한 웹페이지를 만들어 보겠습니다. 그 과정에서 HTML5에 도입된 몇 가지 새로운 태그에 대해 논의하겠습니다. 효율적이고 효과적인 웹 페이지를 만들려면 계획을 세우고 구축하려는 모든 구성 요소를 고려해야 합니다. 생성한 웹 페이지는 그림 1과 같은 고급 디자인을 갖게 됩니다. 페이지 디자인에는 머리글 영역, 탐색 영역, 세 개의 섹션 영역과 옆 영역을 포함하는 기사 영역, 마지막으로 바닥글 영역이 포함됩니다. 이 페이지는 Google의 Chrome 브라우저에서 작동하도록 설계되어 브라우저 호환성 문제를 일으키는 시각적 혼란을 제거하는 동시에 기본 구조에 대한 이해를 방해합니다. 우리의 목표는 새로운 HTML5 태그의 사용법을 명확하게 설명하고 이를 사용하여 올바른 형식의 코드와 우아한 페이지 디자인을 만드는 방법을 보여주는 페이지를 만드는 것이었습니다.

그림 1. Acme United의 웹 페이지 계획

이 페이지를 만드는 과정에서 HTML5를 올바르게 사용해야 하는 CSS3가 포함됩니다. 웹페이지를 효율적으로 CSS3는 HTML5 페이지의 스타일, 탐색 및 일반적인 모양과 느낌에 필수적이며 WsSchool의 CSS3 참조 사이트(참고자료 섹션 참조)에서 찾을 수 있는 속성 세트에는 배경, 글꼴과 같은 매우 유용한 요소가 포함되어 있습니다. , 선택 윤곽, 애니메이션 등

그러나 페이지 구축을 시작하기 전에 몇 가지 새로운 HTML5 태그를 배워야 합니다.

헤더 영역

페이지 제목과 부제가 포함된 예시입니다.

태그는 페이지의 헤더 영역에 대한 내용을 만드는 데 사용됩니다. 페이지 자체 외에도 여기서 생성된 웹페이지는 하이레벨 디자인에서 제공하는 페이지용 Header 영역과 Article 및 Section 영역 내부에 Header 영역이 있습니다. 목록 1은

태그의 예를 제공합니다.

목록 1.

제목 텍스트

여기에 배치하세요

; 목록 2에 표시된 태그.

제목 계층 구조를 사용하여

목록 2.

기본 제목
부제목

여기에 텍스트 또는 이미지를 배치할 수 있습니다.

탐색 영역

태그를 사용하여 페이지의 탐색 영역을 만들 수 있습니다.

요소는 탐색을 위한 영역을 정의하며, 페이지의 다른 영역에 포함된 링크를 배치하는 데에는 사용되지 않습니다. 탐색 영역에는 목록 3에 표시된 것과 같은 코드가 포함될 수 있습니다.

목록 3.

홈

a href="#" kesrc="#">회사 소개

제품문의하기

귀하가 디자인한 페이지 페이지의 실제 콘텐츠를 저장하는 기사 영역이 생성됩니다. 페이지의 다른 콘텐츠와 독립적으로 사용할 수 있는 콘텐츠를 정의하는

태그를 사용하여 이 영역을 만듭니다. 예를 들어 RSS 피드를 생성하려는 경우

을 사용하여 콘텐츠를 고유하게 식별할 수 있습니다.

태그는 제거할 수 있고 다른 맥락에 배치할 수 있으며 완전히 이해할 수 있는 콘텐츠를 식별합니다.

Acme United 계획의 기사 영역에는 세 개의 섹션 영역이 있습니다.

에는 웹 콘텐츠의 관련 구성요소 영역이 포함되며, 부분. 태그는 일반적으로 둘.

태그는

태그를 포함할 수도 있습니다. 태그는 유사한 정보를 그룹화하는 데 사용되며, 태그는 콘텐츠의 의미에 영향을 주지 않고 사용할 수 있는 정보를 배치하는 데 사용됩니다. 새로운 맥락.

태그는 이름에서 알 수 있듯이 완전한 정보 패키지를 제공합니다. 반면,

태그에는 관련 정보가 포함되어 있지만 의미가 상실되므로 정보 자체를 다른 문맥에 배치할 수 없습니다.

및

태그의 사용 예는 목록 4를 참조하세요.

목록 4.

콘텐츠
/섹션 ;

콘텐츠


< ; /article>

콘텐츠



이미지 요소

태그와

및

태그 모두 이미지, 차트, 사진을 포함하는 데 사용되는

태그를 포함할 수 있습니다.

태그에는 태그에 포함된 그림 제목이 포함될 수 있습니다. 내용. 목록 5는

및

태그 구조의 예를 제공합니다.

목록 5. 태그의 예

그림 캡션

미디어

및

태그에는 다양한 미디어 요소가 포함될 수도 있습니다. 이전에는 삽입만 가능했던 음악, 비디오 등의 미디어 요소를 이제 더욱 정확하게 식별할 수 있습니다.

태그는 음악이나 기타 오디오 스트림과 같은 오디오 콘텐츠를 식별합니다.

목록 6. 태그의 예

브라우저에서는 오디오 태그를 지원합니다.

여기에는

태그에는 이 요소를 사용하면 대체 비디오 또는 오디오 파일을 지정할 수 있으며 브라우저는 미디어 유형이나 지원되는 코덱에 따라 해당 파일 중에서 선택할 수 있습니다. 목록 8에는 두 가지 옵션이 있습니다. 파일의 WMA 버전이 사용 중인 브라우저에서 재생되지 않으면 MP3 버전을 사용해 보세요. 그렇지 않으면 사용자가 오디오를 사용할 수 없는 이유를 알 수 있도록 메시지를 표시합니다.

목록 8. 태그의 예

브라우저가 HTML '오디오' 요소를 지원하지 않습니다.

목록 9. 태그의 예

src 및 type 속성 외에도

Aside Zone

Acme United 플랜의 Aside 구역은 태그를 사용하여 생성할 수 있습니다. 이 태그는 보충하는 연속 기사의 일부가 아닌 보충 콘텐츠를 저장하는 장소로 간주됩니다. 잡지에서는 기사 자체에서 나온 요점을 강조하기 위해 옆면을 자주 사용합니다. 태그에 포함된 콘텐츠는 해당 콘텐츠가 포함된 기사, 섹션 또는 페이지의 메시지에 영향을 주지 않고 제거될 수 있습니다.

목록 10은

목록 10.

작년에 가족과 함께 유로 디즈니를 방문했습니다.

프랑스의 디즈니

캘리포니아에는 유로디즈니 외에도 디즈니랜드가 있습니다.

요소에는 기사의 작성자나 날짜 등 페이지, 기사 또는 콘텐츠의 일부와 관련된 정보가 포함됩니다. 목록 11에 표시된 것처럼 페이지 바닥글에는 저작권이나 기타 중요한 법적 정보가 포함될 수 있습니다.

목록 11.

Copyright 2011 Acme United.

페이지 구축

이제 HTML5 페이지를 생성하는 데 사용해야 하는 기본 태그를 이해했으므로 페이지 구축을 시작하겠습니다. Acme United용 웹 페이지를 구축합니다. 완성된 페이지는 그림 2에 표시됩니다. 페이지를 다운로드하여 사용할 수 있습니다(다운로드 섹션 참조).

그림 2. Acme United 웹페이지

자, 페이지를 구성해 보겠습니다. 가장 먼저 처리해야 할 것은 입니다. HTML5에서는 만 기억하면 됩니다. 이는 이 태그에 대한 입력을 단순화할 뿐만 아니라 미래에도 더욱 경쟁력을 갖출 수 있도록 해줍니다. html5라고 불리는 것이 아니라 단지 html이라는 점을 기억하는 것이 중요합니다. HTML 버전이 몇 개나 나오더라도 은 항상 html일 수 있습니다.

태그에는 태그가 포함되어 있습니다. 12.

목록 12. html과 언어를 영어로 지정한 후

즉, 스크립트, 브라우저 지원 정보, 스타일시트 링크, 메타 정보 및 기타 초기화 기능을 포함할 수 있는 요소를 사용할 수 있습니다. 헤드 영역에서 다음 태그를 사용할 수 있습니다:

2.

스크립트> 🎜>5.

6.