개발의 역사와 최신 HTML 표준. HTML 언어란 무엇입니까? HTML 튜토리얼. 초보자를 위한 HTML 및 CSS 기본 사항

07.04.2019

이 기사가 귀하에게 도움이 되기를 바랍니다. 즐거운 독서 되세요!

간략한 배경

오래 전, 거의 문명이 시작될 무렵(20세기 70년대까지)에는 인터넷이 없었습니다. 전혀 없었습니다.

컴퓨터의 출현과 함께 이들을 어떻게든 통합하려는 욕구와 필요성이 생겼고, 미국의 4개 대형 대학이 이 작업을 맡았습니다. 개념의 탄생부터 역사적인 순간까지 약 7년이 지났습니다.

1969년 10월 29일, 640km 거리에 있는 캘리포니아 대학과 스탠포드 연구소에서 ARPANET 네트워크의 처음 두 노드 사이에서 통신 세션이 수행되었습니다. 로스앤젤레스의 한 과학자가 스탠포드의 컴퓨터에 원격으로 연결했습니다. 스탠포드 동료는 화면에 입력된 문자가 화면에 나타나는 것을 보고 전화로 각 문자의 전송을 확인했습니다. 그리하여 컴퓨터 네트워크 시대가 시작되었습니다.

오랫동안 인터넷은 전문가만을 위한 공간이었고 주로 기술 문서와 이메일을 교환하는 데 사용되었습니다. 단순 사용자의 경우거기에는 할 일이 없었습니다. 그리고 지난 세기의 90년대 초반에만 "인터넷 사람들에게" 혁명이 일어났습니다. 🙂

1991년

영국인 Timothy John Berners-Lee가 제네바의 CERN에서 언어를 발명했습니다. 하이퍼텍스트 마크업, 일명 HyperText Markup Language, 일명 HTML, 마크업 및 문서 디자인용으로 설계됨 월드와이드편물.

바로 이거 야! Tim 경은 또한 글로벌 하이퍼텍스트 프로젝트(이제는 World Wide Web으로 알고 있음)를 개발했습니다. 사실 이 프로젝트를 진행하는 과정에서 HTML이 탄생하게 되었습니다.

HTML 언어

나는 모든 웹 개발자가 8월 6일을 업무상 휴일로 간주할 수 있다고 믿습니다. :)

첫 번째 웹페이지는 어떠셨나요? 🙂 대부분의 분들이 이 책을 읽고 싶어하지 않으셨을 거라 생각합니다. 그곳에 오래 머물기는커녕요. 제작자들은 이것이 시작일 뿐이라는 것을 이해하고 다음과 같이 진행했습니다.

1993년 6월 - HTML 1.2

이 버전에서는 40센트짜리 태그 중 무려 3개나 되는 태그가 이미 나타났는데, 이는 문서의 일종의 시각적 디자인을 암시합니다(예: 굵은 이탤릭체). 나머지 태그는 논리적 마크업용으로만 제공됩니다.

1994 - W3C 설립

팀 버너스 리 경(Sir Tim Berners-Lee)이 월드 와이드 웹 컨소시엄(World Wide Web Consortium)을 설립했습니다. 인터넷컨소시엄, W3C). W3C의 사명은 과거에도 그랬고 지금도 남아있습니다.

잠재력을 최대한 발휘하세요 월드 와이드 웹, 네트워크의 장기적인 발전을 보장하는 프로토콜과 원칙을 생성함으로써

이 사람들에게 큰 공로를 인정한 것은 HTML이 단일 버전으로 출시되었다는 사실입니다. 기본 세트태그와 속성, 웹 페이지가 오늘날 우리가 알고 있는 것이 되었습니다. 90년대 중반에 몇몇의 사람들이 있었다고 상상해 보십시오. 최대 생산자소프트웨어는 자체 태그 이름을 사용하여 자체 HTML 버전을 출시할 계획이었습니다. 지금 웹 개발이 얼마나 혼란스러울까요! 예를 들어 채용 광고: “우리는 웹사이트를 제작할 레이아웃 디자이너를 찾고 있습니다.모질라 파이어 폭스", "레이아웃 디자이너가 급히 필요합니다.가장자리", "우리는 레이아웃 디자이너가 필요합니다빛나다»… 한마디로 W3C 덕분입니다 :)

1995년 9월 22일 - 버전 2.0

개발 및 승인 프로세스 새로운 버전매우 여유로웠고 유일한 사람은 눈에 띄는 개선새 버전 강철:

쿼리: 예를 들어 키워드 검색입니다.
컴퓨터에서 서버로 데이터를 전송하기 위한 양식: 예를 들어 생년월일을 입력하거나 설문지의 여러 옵션 중 하나를 선택합니다.

1995년 3월 – HTML 3.0 작업 시작

표준의 첫 번째 버전에는 다음과 같은 흥미로운 내용이 많이 포함되어 있습니다.

테이블 생성을 위한 태그,
수학 공식을 표시하고,
이미지 주변의 텍스트 감싸기 등

~에 HTML 생성 3.0 개발자들은 구조적 마크업의 이데올로기와 구조적 마크업에 훨씬 더 관심이 있는 사용자의 요구 사이의 불일치를 어떻게 해결할 수 있을지 고민했습니다. 모습웹 페이지.

그리고 이러한 모순이 HTML의 원래 속성을 변경하지 않도록 세 번째 버전의 제작자는 웹 페이지 디자인에 사용되는 새로운 도구에 대한 지원을 추가하기로 결정했습니다.

1996년 12월 17일 - CSS

CSS(Cascading Style Sheets) 및 러시아어 - 계층적 스타일 사양. 좀 더 명확해지지 않은 것 같은데요?)) 완전히 러시아어로 되어 있다면 다음과 같은 스타일 시트가 첨부되어 있습니다. HTML 문서그리고 봉사하다 시각 디자인문서의 특정 부분.

따라서 CSS 시스템은 다음과 같습니다.

공식적으로 HTML에 의존하지 않으며,
HTML과 다른 자체 구문이 있습니다.
HTML의 이념적 제한에 영향을 받지 않으며,
이를 통해 모든 HTML 태그에 대한 모양 매개변수를 설정할 수 있습니다.

와 함께 CSS를 사용하여웹 페이지 작성자는 마침내 모든 글꼴과 크기를 쉽게 변경할 수 있게 되었으며, 중요한 것은 이것이 새로운 태그를 많이 도입함으로써가 아니라 이미 해석에 영향을 미치는 메커니즘을 사용함으로써 가능해졌다는 것입니다. 기존 태그 HTML.

CSS가 할 수 있는 경이로움을 보여주기 위해 캐나다인 Dave Shea는 수백 명의 웹 개발자가 완전히 다른 CSS 스타일로 동일한 HTML 페이지를 입력하여 명상하는 장소인 CSS Zen Garden을 만들었습니다.

마이크로소프트의 영향력

한편, 머나먼 은하계에서... 마이크로소프트는 넷스케이프의 급격한 매출 증가를 알아차렸다. 네비게이터 브라우저물론 나는 옆으로 설 수 없었습니다. MS에서 약간 재작업됨 모자이크 브라우저처음에는 사용자들에게 그다지 인기가 없었던 자체 탐색기를 출시하기 시작했습니다.

1996년 8월에 만들어졌습니다. 인터넷 버전 Explorer 3.0 브라우저는 당시 상당한 혁신을 이루었고 인기를 얻었으며 브라우저 시장을 Netscape Communications와 Microsoft 사이에 절반으로 나누었습니다.

그리고 동시에 마이크로소프트 시간 W3C를 그 날개 아래로 데려갔습니다.

1997년 1월 14일 - HTML 3.2

버전 3.2는 CSS가 승인된 지 한 달 만에 출시되었으며 이미 스타일 시트와 상호 작용할 수 있도록 완전히 조정되었습니다.

버전 3.0의 많은 혁신 사항을 생략했지만 Netscape Navigator에서 지원하는 비표준 요소를 추가했습니다. 인터넷 익스플로러 3.

1997년 12월 18일 - HTML 4.0

이 버전에서는 이전 버전. 많은 태그가 오래된 것으로 표시되어 사용이 권장되지 않습니다. 대신 테이블을 사용했어야 했습니다. CSS 스타일.

새 버전에는 프레임, 스크립트, 일반 절차다양한 객체 구현. 또한 테이블과 양식이 개선되어 신체 장애가 있는 사람들의 접근성이 향상되었습니다.

HTML 4는 국제화 분야 전문가의 도움으로 개발되어 어떤 언어로든 문서를 작성하고 전 세계로 쉽게 전송할 수 있게 되었습니다.

1999년 12월 24일 – HTML 4.01

이 버전에서는 개체, 모양 및 이미지가 약간 수정되었으며 버그가 수정되었으며 일반적으로 더 많은 기능이 추가되었습니다. 안정 버전, 웹 개발자들이 10년 이상 사용해 왔습니다.

어떤 워킹 그룹

2004년: 스위스 프로그래머 Ian Hickson(당시 Opera 개발자)과 Mozilla, Google, Apple과 같은 여러 회사 대표가 설립되었습니다. 실무 그룹 WHATWG( 편물 하이퍼텍스트 애플리케이션 기술 일하고 있는 그룹).

그러한 커뮤니티를 만든 이유는 당시 W3C가 HTML에 대한 관심을 잃고 XML을 기반으로 확장 가능한 하이퍼텍스트 마크업 언어인 XHTML을 개발하기 시작했기 때문입니다. 자세한 내용은 다루지 않겠습니다. 왜냐하면... ~에 이 순간이 언어는 발전을 멈췄습니다.

2년 동안 W3C와 WHAT 워킹 그룹은 각자 자신의 프로젝트를 진행했습니다. 그러나 나중에 WHAT Working Group이 일부 결과를 달성했지만 XHTML 2는 결코 실현되지 않았음이 분명해졌습니다.

그리고 2006년에 Tim Berners-Lee는 W3C와 WHATWG가 협력할 것이라고 발표했습니다. 추가 개발 HTML.

2014년 10월 28일 – HTML 5

새 버전에서는 이전 버전에 비해 구문이 더 엄격해졌습니다.
멀티미디어 기술에 대한 지원 개선
28개의 새로운 구조 요소가 등장하여 코드 이해가 더욱 쉬워졌습니다.
더 이상 사용되지 않는 태그가 제외되었습니다.
javascript와 같은 스크립트 지원에 더 많은 관심이 기울여졌습니다.

현재 HTML 개발은 계속되고 있습니다.

W3C는 6월 초 버전 5.1의 작업 초안을 발표했습니다. 컨소시엄은 모든 사람에게 이 버전에 대한 리뷰와 의견을 작성하도록 요청합니다. 왜냐하면... 이전과 마찬가지로 HTML은 꺾쇠 괄호를 사랑하는 많은 사람들이 동시에 작업하는 프로젝트로 남아 있습니다.

어쩌면 곧 당신도 그들 중 하나가 될 것입니까?

마지막으로 유머의 순간입니다.

낙천주의자는 영어를 배우고, 비관주의자는 중국어를 배우고, 현실주의자는 HTML을 배웁니다.

현실적으로 행동하세요 😉

아마 처음부터 시작할 것 같은데...

HTML은 본질적으로 프로그래밍 언어가 아닙니다. 마크업 언어입니다. 하이퍼텍스트 문서. 즉, 그는 인터넷 생활을 위한 텍스트, 그림, 표 등의 문서 배열을 담당합니다. 그에게 2 곱하기 2가 얼마인지 계산하도록 강요하는 것은 불가능합니다. 논리 함수, 하지만 2 더하기 2는 4라는 정보를 게시하는 것이 아름답고 가장 중요한 것은 쉽습니다. 쉽습니다. 이 언어는 브라우저(브라우저)라는 친숙한 프로그램을 사용하여 읽혀집니다. 표준 명령 html 언어를 사용하고 이를 "씹는" 방식으로 문서는 웹 마스터(문서 컴파일러)가 표시하려는 형식으로 컴퓨터 모니터에 표시됩니다.

이제 명령에 대해 설명자라고 부르지만 더 자주 태그라고 합니다.

첫 번째 페이지로 돌아가서 다음과 같이 썼습니다.

나의 첫 페이지

안녕하세요 월드!!!

그래서 이것이 사이에 쓰여진 것입니다. 태그라고 부릅니다. 페이지를 보는 독자에게는 보이지 않지만, 태그를 발견하면 이를 신호로 이해하는 브라우저에는 명확하게 표시됩니다. 모니터에서 읽고 표시해야 하는 문서입니다. 올바른 형태로.. 그러나 태그에는 문서가 종료되었으며 더 이상 필요하지 않은 브라우저, 즉 브라우저가 필요하다고 명시되어 있으며 명확한 양심을 가지고 쉴 수 있습니다.

그럼 우리는 무엇을 썼나요? 브라우저는 그것을 어떻게 읽나요?

브라우저 생각:

- 문서 시작.. 또 할 일이 많아요..
- 영어사전 찾아보고 머리라고 번역해 보세요... 머리에 톱밥이 있어도 문제 없어요!! ... 문서에 대한 기본 서비스 정보는 다음과 같습니다.. 그렇다면 그들이 나에게 원하는 것은 무엇입니까?
- "제목"은... 창 헤더에 이름을 써야 함을 의미합니다.
나의 첫 페이지 - 주전자가 다시 훈련 중입니다..
- 이름 전체가 끝났습니다.. 넘어가셔도 됩니다..
- 응, 그리고 이름 외에는 더 이상 말도 안되는 생각을 머릿속에 두지 않는다..
- 문서의 “본문”, 아래에 기재된 모든 내용은 공개적으로 공개됩니다.
안녕하세요 월드!!! -

- 얼마나 좋은데! 벌써 충분해!!!
텍스트를 다음 줄로 옮깁니다. 그 안에 무엇이 있을지 추측할 수도 있습니다. 제 이름은 (여기에 귀하의 이름이 있습니다)입니다. 이것이 제 첫 번째 페이지입니다! -
- 글쎄요, 그렇습니다.. 그들은 더 독창적인 것을 생각해 낼 수 없습니다..
- 그게 다야? 다른 내용은 표시하지 않으시겠습니까?

자, 끝입니다!! 깨지 마세요, 뒤집지 마세요, 불이 나면 먼저 꺼내세요!!

이것이 우리 페이지를 읽는 대략적인 방식입니다.. 보시다시피 브라우저는 다소 변덕스러운 유형이므로 명확하고 정확한 명령을 제공해야 합니다. 그렇지 않으면 욕하고.. 큰 소리로.. 따라서 다음을 기억합시다. 것들:

1) 여는 태그가 있으면 닫는 태그도 있어야 한다는 점을 꼭 기억하세요.
당사 태그와 같은 예외가 있지만 - 다음과 같이 작성해야 한다고만 명시되어 있으므로 닫을 필요가 없습니다.새 줄

. 그건 그렇고, "My name is.."라는 줄 앞에 동일한 내용을 몇 개 더 추가해 보면 그 결과 눈에 띄게 낮아진 것을 볼 수 있습니다. (물론 변경 사항을 메모장에 저장하고 브라우저에서 "새로 고침" 버튼을 클릭하세요.)

- 2) 모든 문서에는 다음 코드 템플릿이 있어야 합니다.
- 문서의 시작
- 머리의 시작
- 머리를 닫는다
- 몸의 시작
- 신체 폐쇄

문서 끝 이 태그는 필수입니다! 각각에 대해 항상 작성해야 합니다.새 페이지

, 그리고 그 순서대로만! 모든 것을 거꾸로 뒤집으려고 하지 마세요...

3) 주문 정보 :

열기 및 닫기 태그는 일종의 컨테이너로, 다른 태그를 저장할 수 있는 상자입니다. 작은 상자... 따라서 논리에 따라 문서는 다음과 같아야 합니다.

콘텐츠

열기 및 닫기 태그는 일종의 컨테이너로, 다른 태그를 저장할 수 있는 상자입니다. 작은 상자... 따라서 논리에 따라 문서는 다음과 같아야 합니다.

머리에 맞지 않는 쓰레기로 판명 될 것입니다. "큰"것은 이미 닫혀 있고 "작은"것은 "가운데"에 잠겨있는 "튀어나와"있습니다. 콘텐츠”는 사방에 흩어져 있습니다. 브라우저에 대해 무슨 말이 있는지 사람조차 상상하기 어렵습니다. 페이지 코드를 명확하게 구성하십시오. 그렇지 않으면 아무것도 작동하지 않습니다..

자, 우리는 간단한 텍스트를 작성하는 방법을 배웠습니다. 이제 시작되었습니다! 다음 장에서 나는 당신이 그것으로 무엇을 할 수 있는지에 대해 이야기할 것입니다..

웹 사이트를 작성할 때 하드 드라이브의 편리한 위치에 폴더를 만들고 명확하다면 원하는 대로 이름을 지정하십시오... 페이지를 이 폴더에 저장하고 의미 있는 이름을 지정하십시오... aaa와 같은 옵션을 지정하십시오. html, 123.html은 혼란과 혼란을 가져올 것입니다... 이 단계에서이 조언은 실용적이지 않을 수도 있지만 앞으로는 작업이 훨씬 쉬워질 것입니다. 예를 들어, 상호 참조를 위해 이름을 기억해야 하는 파일이 최소한 20-30개 있다고 상상해 보십시오. 먼저 주문하세요!

코드를 작성할 때 "좋은 작성 스타일"을 고수하는 것이 좋습니다. 즉, 하나의 태그가 다른 태그 안에 중첩되므로 "사다리" 방식으로 태그를 작성하는 것이 좋습니다. 시간이 지나면 다음과 같이 작성된 코드를 읽는다는 것을 이해하게 될 것입니다.

나의 첫 페이지

안녕하세요 월드!!!

제 이름은 Carlson입니다. 이것이 제 첫 번째 페이지입니다!

이것보다 훨씬 쉽습니다:

나의 첫 페이지

안녕하세요 월드!!!

제 이름은 Carlson입니다. 이것이 제 첫 번째 페이지입니다!

그리고 이보다 훨씬 더 그렇습니다:

나의 첫 페이지Hello world!!!
제 이름은 Carlson입니다. 이것이 제 첫 번째 페이지입니다!

습관의 문제이기는 하지만... 그래도 "읽기 쉽게" 쓰는 데 익숙해지는 것이 더 좋습니다.

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

HTML 문서는 일반적인 문서입니다 텍스트 문서, 평소와 같이 생성될 수 있습니다 텍스트 에디터(메모장) 및 코드 강조 표시 기능이 있는 특수한 것(Notepad++, Visual) 스튜디오 코드등등.) . HTML 문서의 확장자는 .html입니다.

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

시작 태그는 요소가 시작되는 위치를 표시하고 종료 태그는 요소가 끝나는 위치를 표시합니다. 닫는 태그는 태그 이름 앞에 슬래시 /를 추가하여 구성됩니다. .... 시작 태그와 닫는 태그 사이에는 태그의 내용, 즉 내용이 있습니다.

단일 태그는 콘텐츠를 직접 저장할 수 없습니다. 콘텐츠는 속성 값으로 기록됩니다. 예를 들어 태그는 내부에 Button이라는 텍스트가 있는 버튼을 생성합니다.

태그는 서로 중첩될 수 있습니다. 예를 들면 다음과 같습니다.

텍스트

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

텍스트

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

각 요소에는 여러 클래스 값과 하나의 ID 값만 할당될 수 있습니다. 여러 의미클래스는 공백으로 구분하여 작성됩니다. class 및 id 값은 문자, 숫자, 하이픈, 밑줄로만 구성되어야 하며 문자 또는 숫자로만 시작해야 합니다.

브라우저는 HTML 문서를 보고(해석하고) 구조(DOM)를 구축하고 이 파일에 포함된 지침(스타일 시트, 스크립트)에 따라 표시합니다. 마크업이 올바른 경우 브라우저 창에는 HTML 요소(헤더, 테이블, 이미지 등)가 포함된 HTML 페이지가 표시됩니다.

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

HTML 문서는 두 개의 섹션, 즉 헤더(태그 사이)와 콘텐츠 부분(태그 사이 ...)으로 구성됩니다.

웹페이지 구조 1. HTML 문서 구조

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

DOCTYPE은 다음을 담당합니다. 올바른 표시브라우저별 웹페이지. DOCTYPE은 다음을 정의할 뿐만 아니라 HTML 버전(예: html)뿐만 아니라 인터넷에 있는 해당 DTD 파일도 있습니다.

...

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

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

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

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

, , 등.

하위 항목은 하나 이상의 요소 유형 내에 있는 요소입니다. 예를 들어 는 의 자손이고 요소는

은(는) 및 의 자손입니다.

상위 요소 - 다른 요소와 둘 이상 관련되어 있는 요소 낮은 수준, 그리고 그 위의 나무에 위치합니다. 그림 1과 . 꼬리표

에만 상위 항목이 있습니다.

하위 요소- 더 높은 수준의 다른 요소에 직접 종속되는 요소입니다. 그림 1에는 , , 요소만 있습니다.

그리고 의 자녀입니다.

자매 요소는 문제의 요소와 공통된 상위 요소를 갖는 요소, 즉 동일한 수준의 요소입니다. 그림 1에서 및 은 동일한 수준의 요소이며, 요소 및

그들은 서로 자매입니다.

1.1. 요소 1.2. 요소

섹션 ... 포함 기술적 인 정보페이지 정보: 제목, 설명, 키워드 검색 엔진, 인코딩 등 여기에 입력하는 정보는 브라우저 창에 표시되지 않지만 브라우저에 페이지 처리 방법을 알려주는 정보가 포함되어 있습니다.

1.2.1. 요소

필수 섹션 태그는 입니다. 이 태그 안에 있는 텍스트는 웹 브라우저의 제목 표시줄에 나타납니다. 제목은 제목에 완전히 들어가도록 길이가 60자 이하여야 합니다. 제목 텍스트에는 가능한 많은 내용이 포함되어야 합니다. 전체 설명웹페이지 콘텐츠.

1.2.2. 요소

선택적 섹션 태그는 단일 태그입니다. 도움을 받아 검색 엔진의 페이지 콘텐츠 및 키워드에 대한 설명, HTML 문서 작성자 및 기타 메타데이터 속성을 설정할 수 있습니다. 요소는 사용된 속성에 따라 서로 다른 정보를 전달하므로 여러 요소를 포함할 수 있습니다.

페이지 내용과 키워드에 대한 설명은 러시아어와 영어 등 여러 언어로 동시에 지정할 수 있습니다.

태그를 사용하면 검색 엔진의 웹페이지 색인 생성을 차단하거나 허용할 수 있습니다.

지정된 시간 후에 페이지를 자동으로 다시 로드하려면 새로 고침 값을 사용해야 합니다.

30초 후에 페이지가 다시 로드됩니다. 방문자를 다른 페이지로 리디렉션하려면 url 매개변수에 URL을 지정해야 합니다.

표 2. 태그 속성 기인하다

문자셋	현재 HTML 문서의 문자 인코딩을 지정합니다.
콘텐츠	값에 따라 http-equiv 또는 name 속성과 연관된 값을 지정하는 임의의 텍스트를 포함합니다.
http-equiv	특정 웹페이지에서 브라우저 작업을 제어합니다(HTTP 헤더와 동일). 페이지를 렌더링할 때 브라우저는 속성에 지정된 지침을 따릅니다. 기본 스타일은 페이지에서 사용할 기본 스타일을 지정합니다. content 속성에는 CSS 스타일 시트를 참조하는 요소의 ID 또는 스타일 시트를 포함하는 요소의 ID가 포함되어야 합니다. 새로 고침은 페이지가 다시 로드되기 전의 시간을 초 단위로 표시하거나, 콘텐츠 속성에 시간 뒤에 "url=page_address" 줄이 포함된 경우 다른 페이지로 리디렉션되기 전의 시간을 나타냅니다. 자동 재부팅지정된 기간 이후의 페이지 이 예에서는, 30초 후: 방문자를 즉시 다른 페이지로 이동해야 하는 경우 url 매개변수에 URL을 지정할 수 있습니다.
이름	콘텐츠 속성에 포함된 값과 연결됩니다. 요소에 이미 http-equiv , charset 또는 itemprop 속성이 설정된 경우에는 사용하면 안 됩니다. application-name은 페이지에 사용되는 웹 애플리케이션의 이름을 지정합니다. 작성자는 문서 작성자의 이름을 자유 형식으로 지정합니다. 설명은 정의합니다 간단한 설명예를 들면 다음과 같습니다. 생성기는 패키지 중 하나를 지정합니다. 소프트웨어, 문서를 만드는 데 사용됩니다. 예: . 키워드에 목록이 포함되어 있습니다. 키워드, 페이지 콘텐츠에 해당하는 쉼표로 구분됩니다. 예: . 또한 이름 속성받아들일 수 있다 다음 값 creator, googlebot, 게시자, robots, slurp, viewport와 같은 확장 사양에서 제공되지만 아직 공식적으로 채택된 것은 없습니다.

1.2.3. 요소

이 요소 내부에는 페이지에 사용되는 스타일이 설정됩니다. HTML 문서에서 스타일을 설정하려면 다음을 사용하세요. CSS 언어. 한 페이지에 이러한 요소가 여러 개 있을 수 있습니다.

이 요소 안에는 웹 페이지 요소 자체와 전체 웹 페이지에 대한 형식 지정 코드를 작성할 수 있습니다.

.paper(너비: 200px; 높이: 300px; 배경색: #ef4444; 색상: #666666; )

지정된 스타일을 요소에 연결하려면 다음을 사용해야 합니다. 클래스 속성(또는 ID) 요소에 적절한 이름을 할당합니다.

...

CSS 코드는 마크업 요소에 값으로 직접 삽입될 수 있습니다. 스타일 속성, 예를 들어:

1.2.4. 요소

다른 방법을 사용하여 문서의 스타일을 설정할 수도 있습니다. 별도의 파일.css 확장자를 사용합니다(예: style.css ).

스타일이 있는 파일을 웹 페이지에 연결하는 방법에는 두 가지가 있습니다.
@import url 지시문을 통해

@import url(style.css);

요소를 사용합니다. 요소에는 닫는 태그가 필요하지 않습니다. 이 아이템현재 페이지와 다른 문서 간의 관계를 정의합니다. 한 페이지에 이러한 요소가 여러 개 있을 수 있습니다. 항목에는 다음 보기:

표 4. 태그 속성 속성 설명, 허용되는 값

교차 기원	사이트에서 이미지를 검색할 때 CORS(웹 페이지가 다른 도메인의 리소스에 액세스할 수 있도록 하는 브라우저 기술)를 사용해야 하는지 여부를 나타냅니다. 익명 — 브라우저는 요청이 이루어진 도메인 이름이 포함된 Origin 헤더를 교차 도메인 요청에 자동으로 추가합니다. 서버가 CORS 헤더 Access-Control-Allow-Origin: *(또는 별표 대신 도메인 이름)로 응답하지 않으면 이미지 로드가 차단됩니다. use-credentials - 서버가 Access-Control-Allow-Credentials: true 를 사용하여 자격 증명을 제공하지 않으면 이미지 로딩이 차단됩니다.
href	태그의 기본 속성인 값은 스타일이 포함된 파일의 경로입니다.
hreflang	참조 문서의 텍스트 언어를 결정합니다.
미디어	링크 리소스를 적용해야 하는 장치 유형을 지정합니다.
목하	콘텐츠를 보호하기 위해 인라인 스타일을 사용하기 위한 규칙을 설정하는 서버에서 임의로 생성된 문자열 변수입니다. 속성 값은 텍스트 문자열입니다.
상대	속성은 사이의 관계를 정의합니다. 현재 문서링크가 연결되는 문서입니다. 대체 - 동일한 문서에 대한 링크이지만 형식이 다릅니다(예: 인쇄용 페이지, 번역, 미러, RSS 또는 Atom 형식의 피드). . 아카이브 - 링크된 문서가 역사적으로 중요한 내용임을 나타냅니다. 링크는 기록, 문서 또는 기타 자료 모음을 가리킬 수 있습니다. 작성자 링크는 문서 작성자에 대한 페이지나 작성자의 연락처 정보가 있는 페이지로 연결됩니다. 링크인 기사의 가장 가까운 조상에 대한 참조를 북마크에 추가하거나, 조상이 없는 경우 요소와 가장 밀접하게 관련된 기사의 섹션을 북마크에 추가합니다. external은 링크되는 페이지가 이 사이트의 일부가 아님을 나타내는 데 사용됩니다. 먼저 일련의 문서에서 첫 번째 문서를 가리키는 링크를 지정합니다. 도움말 도움말 문서에 대한 링크입니다. 아이콘은 현재 문서에 사용될 아이콘의 경로를 지정합니다. 마지막은 다음으로 이어지는 링크를 나타냅니다. 마지막 문서문서의 순서대로. 라이센스 문서의 저작권 정보에 대한 링크입니다. next는 이 문서가 시리즈의 일부이고 링크가 해당 시리즈의 다음 문서로 이동함을 나타냅니다. nofollow는 해당 링크가 페이지 작성자의 보증을 받지 않았거나 해당 링크가 상업적 성격을 띠고 있음을 나타냅니다. noreferrer는 링크를 따라갈 때 요청 소스의 URL이 포함된 클라이언트 요청 헤더가 전달되지 않아야 함을 나타냅니다. pingback은 블로그가 링크된 사이트에 자동으로 알릴 수 있도록 하는 pingback 서버의 주소를 지정합니다. prefetch는 참조된 파일을 미리 캐시해야 함을 지정합니다. prev는 이 문서가 시리즈의 일부이고 링크가 해당 시리즈의 이전 문서에 대한 것임을 나타냅니다. 검색은 참조 문서에 검색 및 관련 리소스에 대한 인터페이스가 포함되어 있음을 나타냅니다. 사이드바는 링크된 문서가 가능한 경우 추가 브라우저 컨텍스트에 표시된다는 것을 나타내며, 일부 브라우저에서는 하이퍼링크를 클릭하면 창을 열어 북마크바에 링크를 추가합니다. 스타일시트 링크 외부 파일, 이 문서의 스타일 시트로 사용됩니다. 태그는 하이퍼링크 태그가 이 문서에 적용됨을 나타냅니다. up은 페이지가 일부임을 나타냅니다. 계층적 구조, 하이퍼링크는 더 많은 정보로 연결됩니다. 높은 레벨구조의 자원.
크기	아이콘 크기를 지정합니다. 시각적 디스플레이. 크기 속성은 rel="icon"과 함께 사용되며 다음 값을 사용할 수 있습니다. 너비-높이 - 공백으로 구분된 크기 목록을 정의합니다. 각 크기는 너비-높이(아이콘 크기는 픽셀로 지정됨) 형식이어야 합니다. 예: ; any - 아이콘의 크기를 원하는 대로 조정할 수 있습니다.
제목	링크 제목이나 대체 스타일 시트 세트의 이름을 정의합니다. 속성 값은 텍스트입니다.
유형	참조되는 문서의 MIME 유형을 지정합니다. 안에 이 경우"text/css" 값을 사용합니다.

1.2.5. 요소 표 5. 태그 속성 속성 설명, 허용되는 값

비동기	이 속성은 스크립트가 페이지의 나머지 부분과 비동기적으로 실행된다는 것을 나타냅니다(페이지가 로드되는 동시에 스크립트가 실행되기 시작함).
문자셋	문자 인코딩을 정의합니다.
교차 기원	로드할 때 CORS를 사용할지 여부를 결정합니다. 외부 스크립트(src 속성을 사용하여). 익명 - 크로스 도메인 요청에 스크립트를 로드하기 전에 브라우저는 액세스 매개변수(쿠키, X.509 인증서, 로그인/비밀번호)를 전달하지 않고 자동으로 Origin 헤더를 추가합니다. 기본 인증 HTTP를 통해). 서버 응답에 Access-Control-Allow-Origin: 도메인 이름 헤더가 포함되어 있지 않으면 스크립트가 로드되지 않습니다. use-credentials — 스크립트를 도메인 간 요청에 로드하기 전에 브라우저는 액세스 매개변수(쿠키, SSL 인증서 또는 로그인/비밀번호 쌍)를 나타내는 Origin 헤더를 자동으로 추가합니다. 서버 응답에 Access-Control-Allow-Credentials: true 헤더가 포함되어 있지 않으면 스크립트가 로드되지 않습니다.
연기하다	사용자 장치에서 문서가 렌더링될 때까지 스크립트 해석이 지연됩니다.
목하	XSS(교차 사이트 스크립팅) 공격으로부터 보호하여 보안을 제공합니다. nonce 값과 해시를 사용하여 내장 스크립트를 사용하기 위한 규칙을 설정합니다. 페이지 렌더링 중에 브라우저는 각 인라인 스크립트의 해시를 계산하고 이를 CSP에 나열된 해시와 비교합니다. " 이외의 리소스에서 다운로드 바람직한 것의 리스트", 차단되었습니다.
소스	스크립트 파일의 위치를 나타내며 속성 값은 다음과 같습니다. 파일 URL JavaScript 프로그램이 포함되어 있습니다.
유형	태그의 내용을 구성하는 데 사용되는 스크립트 언어를 선언하는 데 사용됩니다.

1.3. 요소

이 섹션에는 문서의 모든 내용이 포함되어 있습니다. 요소에 사용 가능합니다.

표 5. 태그 속성 속성 설명, 허용되는 값

후문에	인쇄를 위해 페이지를 보낸 후 또는 인쇄 창이 닫힌 후에 발생하는 이벤트입니다.
인쇄 전	인쇄를 위해 페이지를 보내기 전에 발생하는 이벤트입니다.
언로드 전	방문자가 다른 페이지로 전환을 시작하거나 '창 닫기'를 클릭하면 이벤트가 트리거됩니다. 확인 대화 상자에 메시지를 표시하여 사용자에게 현재 페이지에 머물 것인지 아니면 나갈 것인지 알릴 수 있습니다.
onhashchange	예를 들어 사용자가 example.domain/test.aspx#page1 에서 example.domain/test.aspx#page2 로 이동할 때와 같이 URL의 해시 부분이 변경되면 이벤트가 시작됩니다.
온메시지	이벤트 소스를 통해 메시지가 수신되면 이벤트가 발생합니다.
온오프라인	브라우저가 인터넷 연결이 끊어졌다고 판단하면 브라우저에 의해 이벤트가 트리거됩니다.
온라인	인터넷 연결이 복원되면 브라우저에 의해 이벤트가 트리거됩니다.
페이지숨기기	사용자가 링크 클릭, 페이지 새로고침, 양식 작성 등의 탐색을 통해 페이지를 떠날 때 이벤트가 발생합니다.
페이지 쇼	onload 이벤트 이후 사용자가 웹 페이지로 이동할 때 이벤트가 발생합니다.
언로드시	어떤 이유로 페이지가 로드되지 않거나 브라우저 창이 닫히면 이벤트가 트리거됩니다.

내 블로그 페이지에 오신 것을 환영합니다. HTML은 웹 페이지를 만드는 데 사용되는 간단한 마크업 언어입니다. 배우기가 겁나지 않도록 간단하다고 말씀드렸습니다. html 언어는 초보자에게 이상적입니다. 프로그래밍 언어를 처음부터 즉시 익히는 것이 훨씬 더 어렵지만 html은 실제로 훨씬 더 간단합니다.

이 글에서 저는 이 언어를 가장 빠르고 효과적으로 배우는 방법을 알려드리고 싶습니다. 그러면 한 두 달 안에 이 언어를 완벽하게 알 수 있을 것입니다. 불가능하다고 생각하시나요? 나는 시작했다 HTML 학습 3월 말. 5월 말쯤에는 이미 업무에 필요한 태그의 90%를 문제 없이 알고 있었습니다.

무료로 언어를 배우는 방법은 무엇입니까?

물론 대부분의 경우 빠른 학습유용한 사이트를 찾아야 합니다. 첫째로, 당신은 필요합니다 HTML 참조. 노련한 프로그래머라도 이를 사용합니다. 왜냐하면 수십 개의 태그와 해당 속성을 머릿속에 유지하는 것이 불가능하기 때문입니다.

제가 여러분에게 추천할 수 있는 참고서적은 htmlbook입니다. 이것은 모든 태그를 수집하고 작업 결과를 보여주는 정말 멋진 사이트입니다. 상세 설명. 그러나 이것은 단지 지침일 뿐이다. 추가 도구, 실제 연습을 통해 가장 큰 효과를 얻을 수 있습니다.

대화형 코스

그리고 여기서 내가 얘기하고 있는 건 대화형 강좌. 이는 코드를 작성하고 코드가 어떻게 표시되는지 즉시 확인할 수 있는 기능입니다. 강좌를 진행하는 동안 과제가 주어집니다. 첫째, 간단한 것, 예를 들어 텍스트를 제목으로 바꾸거나 표를 만드는 것입니다. 그러면 더 어렵습니다. 결국 당신은 당신이 무엇을 할 수 있는지 이해하게 될 것입니다 HTML을 사용하여. 이 비용을 지불해야 한다고 생각한다면 착각입니다.

html과 css 강좌가 있는 훌륭한 사이트입니다. 처음 16~18개 코스는 무료입니다! 공부를 계속하고 유료 학습에 접근하려면 월 300 루블 또는 연간 1800을 지불해야합니다. 개인적으로 저는 300 루블을 지불하고 한 달 안에 모든 유료 과정을 이수했으며 그로부터 많은 혜택을 받았습니다.

기록의 중요성

제가 드리는 또 다른 조언 - 적어보세요! 귀하에게 새롭고 중요한 정보를 모두 적어 두십시오. 기록하지 않으면 기억하지 못할 위험이 있습니다. 필요한 지식. 개인적으로 내 선반에는 거의 글쓰기로 가득 찬 세 권의 일반 노트가 있는데, 가끔 이것 저것 잊어버릴 때마다 그것들을 본다.

HTML과 CSS의 병행 연구

HTML은 웹페이지의 구조와 레이아웃을 생성하는 데 도움이 되는 하나의 웹 기술일 뿐입니다. CSS는 웹사이트 개발의 디자인을 전적으로 담당합니다. 이들 언어는 서로 상호작용하기 때문에 동시에 학습해야 합니다.

독립적인 실습

어느 정도 지식을 얻으면 스스로 연습할 수 있습니다. 어떻게 하나요? 그림, 표, 중첩 목록, 간단한 2열 페이지 레이아웃 등으로 기사를 레이아웃해 보세요. 그러기 때문에 연습해야 해요. 유일한 방법모든 것이 어떻게 작동하는지에 대한 이해를 두뇌에 빠르게 주입하십시오. 물론 가장 좋은 것은 이 문제에 대한 교사를 찾는 것이지만 아마도 이에 대한 비용을 지불해야 할 것입니다.

webformyself 팀의 교훈

Webformyself는 웹사이트 구축에 관한 수많은 정보를 제공하는 훌륭한 인터넷 포털입니다. 해당 웹사이트에서 많은 것을 찾을 수 있습니다. 무료 기사 HTML, CSS 및 웹 사이트 레이아웃에 관한 것이지만 유용한 지식을 가능한 한 빨리 전달하는 것이 목적인 유료 비디오 튜토리얼도 출시했습니다.

결국, 이러한 웹 기술을 배우는 이유가 있어야 합니다. 이는 일반적으로 웹 사이트 레이아웃을 직접 만드는 방법을 배우기 위해 수행됩니다. 이 목표도 가지고 있다면 webformyself.com에서 프리미엄 레슨에 대한 액세스 권한을 구매하는 것이 훌륭한 옵션이 될 것입니다. 결과적으로, HTML과 CSS에 대한 강의뿐만 아니라 다른 많은 강의에도 접근할 수 있습니다. 예를 들어 JavaScript와 WordPress가 있습니다.

거기에는 레슨을 사용하여 첫 번째 레이아웃을 만들 수 있는 기회를 포함하여 유용한 레슨이 있습니다. 이것은 당신이 받게 될 것이기 때문에 매우 중요합니다. 좋은 연습, 그 후에는 인터넷에서 찾은 사이트에 대한 다른 레이아웃을 만들려고 시도하면서 스스로 더 잘할 수 있습니다.

언어를 배우는 데 얼마나 걸리나요?

평균적으로 HTML과 CSS는 다음과 같이 매우 빠르게 배울 수 있습니다. 올바른 접근 방식. 예를 들어, 저는 몇 달이 걸렸습니다. 지식을 어디서 얻을 수 있는지 알면 학습 과정의 속도가 몇 배로 빨라질 수 있습니다.

좋은 사이트 유용한 재료내가 당신에게 줬어요. 그 다음은 당신에게 달렸어요. 원칙적으로 위의 리소스는 인터넷에서 가장 좋습니다. 예를 들어, 10만 명 이상의 사람들이 Htmlacademy 과정을 이수했으며 87,000명 이상의 사람들이 Webformyself 업데이트를 구독했습니다.

우리는 출시했다 새 책"콘텐츠 마케팅 소셜 네트워크에서: 구독자의 머릿속에 들어가 브랜드에 사랑에 빠지게 만드는 방법.”

구독하다