HTML로 문서 만들기. 웹 페이지 만들기 HTML 문서의 웹 페이지는 다음을 나타냅니다.
웹페이지란 무엇입니까? HTML(Hypertext Markup Language)로 작성된 문서로 브라우저를 통해 볼 수 있습니다. URL을 입력하면 웹페이지에 접속됩니다.
웹 페이지에는 텍스트, 그래픽, 다른 페이지와 파일에 대한 하이퍼링크가 포함될 수 있습니다.
웹페이지를 여는 방법웹페이지를 보려면 브라우저가 필요합니다(예: 인터넷 익스플로러, Edge, Safari, Firefox 또는 Chrome). 브라우저에서 다음을 입력하여 웹페이지를 열 수 있습니다. 주소 표시 줄 URL. 예를 들어, "https://www.computerhope.com/esd.htm"을 입력하면 ESD Computer Hope 페이지가 나타납니다.
방문하려는 사이트의 URL을 모르는 경우 다음을 사용할 수 있습니다. 검색 엔진웹페이지를 찾거나 사이트 검색을 사용합니다.
최초의 웹페이지는 언제 만들어졌나요?최초의 웹페이지는 1991년 8월 6일 Tim Berners-Lee에 의해 CERN에서 만들어졌습니다. 그 전에는 http://info.cern.ch/의 첫 번째 사이트와 첫 번째 웹페이지를 방문하여 보실 수 있습니다.
사이트와 웹페이지의 차이점은 무엇인가요?웹사이트는 하나 이상의 웹페이지를 포함하는 장소입니다. 예를 들어, 우리 리소스는 귀하가 지금 읽고 있는 웹 페이지를 포함하여 수천 개의 다양한 웹 페이지를 포함하는 사이트입니다.
위의 URL 예에서 "url.htm"은 웹페이지이며 항상 URL의 마지막 부분입니다. .htm, .html, .php, .cgi, .pl 또는 기타 파일 확장자로 끝나지 않는 URL의 경우 서버는 기본적으로 웹 페이지 index.htm을 로드합니다. 예를 들어 연락처 페이지 URL에 대한 웹페이지가 없습니다. 이 경우 기본 인덱스 파일은 /contact 디렉터리에서 로드됩니다.
우리는 웹페이지를 보는 데 브라우저가 사용된다는 점을 이미 언급했습니다. 웹페이지는 CSS, 이미지, JavaScript 등 여러 요소로 구성됩니다. 웹페이지의 본문은 다음과 같이 생성됩니다. HTML을 사용하여. 이 코드는 HTML 편집기를 사용하여 생성하거나, 사람이 작성하거나, 서버측 스크립트를 사용하여 생성할 수 있습니다. 일반적으로 사람이 만든 웹 페이지는 .htm 또는 .html 확장자로 끝납니다. 예를 들어, 이 페이지의 파일 이름은 "webpage.htm"입니다. 스크립트에 의해 생성된 페이지는 .cgi, .php, .pl 등으로 끝날 수 있습니다.
웹페이지에는 어떤 요소가 포함되어 있나요?다음은 웹 디자이너가 이해할 수 있도록 주요 요소에 대한 분석입니다. 논리적 구조웹페이지:
대부분의 웹 페이지에는 자세한 정보를 찾기 위해 클릭할 수 있는 흥미로운 하이퍼링크가 있습니다. 또한 음악 듣기, 비디오 시청, 구매, 채팅 등의 다양한 작업을 수행할 수 있습니다.
HTML 및 CSS 웹 사이트 구축 강의를 시작하기 전에 두 언어의 차이점, 각 언어의 구문 및 일부 기본 용어를 이해하는 것이 중요합니다.
HTML과 CSS란 무엇입니까?HTML(HyperText Markup Language)은 제목, 단락 또는 이미지와 같은 콘텐츠를 정의하여 콘텐츠의 구조와 의미를 정의합니다. CSS(Cascading Style Sheets) 또는 Cascading Style Sheet는 디자인을 위해 만들어진 프레젠테이션 언어입니다. 모습예를 들어 글꼴이나 색상을 사용하는 콘텐츠입니다.
HTML과 CSS라는 두 언어는 서로 독립적이므로 그대로 유지되어야 합니다. CSS는 HTML 문서 내부에 작성하면 안 되며 그 반대의 경우도 마찬가지입니다. 일반적으로 HTML은 항상 콘텐츠를 나타내고 CSS는 항상 스타일을 정의합니다.
HTML과 CSS의 차이점에 대한 이해를 바탕으로 HTML에 대해 더 자세히 살펴보겠습니다.
기본 HTML 용어HTML 작업을 시작하기 전에 새롭고 종종 이상한 용어를 접하게 될 것입니다. 시간이 지남에 따라 이들 모두에 더 익숙해지겠지만 지금은 세 가지 기본 HTML 용어인 요소, 태그 및 속성부터 시작해야 합니다.
강요요소는 페이지에 있는 개체의 구조와 콘텐츠를 정의하는 방법을 지정합니다. 일반적으로 사용되는 요소 중 일부에는 여러 수준의 제목(~ 요소로 정의됨)과 단락(다음으로 정의됨)이 포함됩니다.
); 목록에 요소를 포함할 수 있습니다. . . . 그리고 많은 다른 사람들.
요소는 요소 이름을 묶는 꺾쇠 괄호로 식별됩니다. 따라서 요소는 다음과 같습니다.
태그꺾쇠 괄호 추가< и >요소 주위에 태그라는 것을 만듭니다. 태그는 여는 태그와 닫는 태그의 쌍으로 가장 자주 발생합니다.
여는 태그는 요소의 시작을 표시합니다. 기호로 구성됩니다. 예를 들어, .
닫는 태그는 요소의 끝을 표시합니다. 기호로 구성되어 있습니다.< с последующей косой чертой и именем элемента и завершается символом >; 예를 들어, .
여는 태그와 닫는 태그 사이에 나타나는 콘텐츠는 해당 요소의 콘텐츠입니다. 예를 들어 링크에는 여는 태그가 있습니다. 및 닫는 태그. 이 두 태그 사이에 있는 내용이 링크의 내용이 됩니다.
따라서 링크 태그는 다음과 같습니다.
속성속성은 요소에 대한 추가 정보를 제공하는 데 사용되는 속성입니다. 가장 일반적인 속성에는 요소를 식별하는 id 속성이 포함됩니다. 요소를 분류하는 class 속성; 삽입된 콘텐츠의 소스를 지정하는 src 속성; 관련 리소스에 대한 링크를 지정하는 href 속성이 있습니다.
속성은 요소 이름 뒤의 여는 태그에 정의됩니다. 일반적으로 속성에는 이름과 값이 포함됩니다. 이러한 속성의 형식은 속성 이름, 등호, 따옴표로 묶인 속성 값으로 구성됩니다. 예를 들어, 요소 href 속성을 사용하면 다음과 같습니다.
셰이 하우
기본 HTML 용어 데모이 코드는 웹페이지에 "Shay Howe"라는 텍스트를 표시하며, 이 텍스트를 클릭하면 사용자는 http://shayhowe.com으로 이동하게 됩니다. 링크 요소는 여는 태그를 사용하여 선언됩니다. 및 닫는 태그여는 태그에서 href="http://shayhowe.com"을 통해 선언된 링크 주소의 속성과 값뿐만 아니라 텍스트도 포함합니다.
쌀. 1.01. 개요 형식의 HTML 구문에는 요소, 속성 및 태그가 포함됩니다.
이제 HTML 요소, 태그, 속성이 무엇인지 알았으니 첫 번째 웹 페이지를 살펴보겠습니다. 여기에 새로운 것이 있으면 걱정하지 마세요. 진행하면서 분해해 보겠습니다.
HTML 문서 구조 사용자 정의HTML 문서는 .txt가 아닌 .html 확장자로 저장된 간단한 텍스트 문서입니다. HTML 작성을 시작하려면 먼저 사용하기 편리한 텍스트 편집기가 필요합니다. 아쉽게도 여기에는 포함되지 않습니다 마이크로 소프트 워드또는 페이지(페이지)는 복잡한 편집기이기 때문입니다. HTML 및 CSS 작성에 가장 널리 사용되는 두 가지 텍스트 편집기는 Dreamweaver와 숭고한 텍스트. 무료 대안으로는 Windows용 Notepad++와 Mac용 TextWrangler도 있습니다.
모든 HTML 문서에는 , 및 와 같은 선언과 요소를 포함하는 필수 구조가 포함되어 있습니다.
문서 유형 선언은 HTML 문서의 맨 처음 부분에 있으며 브라우저에 사용 중인 HTML 버전을 알려줍니다. 우리는 최신 버전의 HTML을 사용할 것이므로 문서 유형은 간단합니다. 그 다음에는 문서의 시작을 나타내는 요소가 옵니다.
요소 내부에서는 다음을 정의합니다. 윗부분다양한 메타데이터(페이지에 대한 정보 포함)를 포함한 문서. 요소 내부의 콘텐츠는 웹페이지 자체에 표시되지 않습니다. 대신 문서 제목(브라우저 창의 제목 표시줄에 표시됨), 외부 파일에 대한 링크 또는 기타 유용한 메타데이터가 포함될 수 있습니다.
웹페이지에 표시되는 모든 콘텐츠가 요소에 포함됩니다. 일반적인 HTML 문서의 구조는 다음과 같습니다.
안녕하세요 월드! 안녕하세요 월드!
이것은 웹페이지입니다.
HTML 문서 구조 데모이 코드는 문서 유형 선언으로 시작하여 바로 뒤에 . 내부에는 요소와 가 있습니다. 요소에는 태그를 통한 페이지 인코딩과 요소를 통한 문서 제목이 포함됩니다. 요소에는 요소를 통한 제목과 를 통한 텍스트 단락이 포함됩니다. 제목과 단락은 모두 요소 내에 중첩되어 있으므로 웹 페이지에 표시됩니다.
요소가 다른 요소 안에 있는 경우(중첩이라고도 함) 문서 구조를 잘 구성하고 읽기 쉽게 유지하기 위해 들여쓰기하는 것이 좋습니다. 이전 코드에서는 두 요소가 모두 . 요소의 들여쓰기 구조는 및 내부에 새 요소가 추가되면서 계속됩니다.
자동 폐쇄 요소이전 예에서 요소는 닫는 태그를 포함하지 않은 유일한 태그였습니다. 걱정하지 마십시오. 이는 의도적으로 수행된 것입니다. 모든 요소가 여는 태그와 닫는 태그로 구성되는 것은 아닙니다. 일부 요소는 단일 태그 내의 속성을 통해 단순히 콘텐츠나 동작을 수신합니다. 이러한 요소 중 하나입니다. 예제의 요소 내용은 charset 속성과 값을 사용하여 할당됩니다. 기타 일반적인 자동 폐쇄 요소는 다음과 같습니다.
문서 유형 선언과 , 및 , 요소를 사용하여 만든 다음 구조는 매우 일반적입니다. 이 문서 구조는 새로운 HTML 문서를 생성할 때 자주 사용할 것이기 때문에 편리하게 유지하고 싶습니다.
코드 검증아무리 주의 깊게 코드를 작성하더라도 오류는 불가피합니다. 다행히 HTML과 CSS를 작성할 때 작업을 확인할 수 있는 유효성 검사기가 있습니다. W3C는 코드에서 오류를 검사하는 HTML 및 CSS 유효성 검사기를 제공합니다. 코드를 검토하면 모든 브라우저에서 올바르게 렌더링하는 데 도움이 될 뿐만 아니라 코드 작성 시 모범 사례를 가르치는 데도 도움이 됩니다.
연습 중웹 디자이너이자 프런트 엔드 개발자로서 우리는 우리 기술에 관한 수많은 훌륭한 컨퍼런스에 참석할 수 있는 사치를 누리고 있습니다. 우리는 다음 수업 동안 자체적인 스타일 컨퍼런스를 조직하고 이를 위한 웹사이트를 만들 예정입니다. 이와 같이!
HTML에서 조금 벗어나 CSS를 살펴보겠습니다. HTML은 웹페이지의 콘텐츠와 구조를 정의하고 CSS는 시각적 스타일과 모양을 정의한다는 점을 기억하세요.
기본 CSS 용어HTML 용어 외에도 익숙해져야 할 몇 가지 기본 CSS 용어가 있습니다. 이러한 용어에는 선택기, 속성 및 값이 포함됩니다. HTML 용어와 마찬가지로 CSS를 더 많이 사용할수록 이러한 용어는 제2의 천성이 됩니다.
선택기웹페이지에 요소를 추가할 때 다음을 사용하여 스타일을 지정할 수 있습니다. CSS를 사용하여. 선택기는 HTML에서 스타일(예: 색상, 크기, 위치)을 대상으로 지정하고 적용할 요소를 결정합니다. 선택기는 우리가 원하는 정도에 따라 고유한 요소를 선택하기 위해 다양한 측정항목의 조합을 포함할 수 있습니다. 예를 들어 페이지의 모든 단락을 선택하거나 특정 단락 하나만 선택하려고 합니다.
선택기는 일반적으로 ID, 클래스 값 등의 속성 값이나 또는 등의 요소 이름과 연결됩니다.
CSS에서 선택기는 선택한 요소에 적용되는 스타일을 묶는 중괄호()와 결합됩니다. 이 선택기는 모든 요소를 대상으로 합니다.
피(...)
속성요소를 선택하면 속성에 따라 해당 요소에 적용될 스타일이 결정됩니다. 속성 이름은 선택기 뒤, 중괄호() 안, 콜론 바로 앞에 옵니다. 배경, 색상, 글꼴 크기, 높이 및 너비, 기타 일반적으로 추가되는 속성 등 사용할 수 있는 속성이 많이 있습니다. 다음 코드에서는 모든 요소에 적용되는 색상 및 글꼴 크기 속성을 정의합니다.
P( 색상: ...; 글꼴 크기: ...; )
가치지금까지는 선택기를 통해 요소를 선택하고 속성을 통해 해당 요소에 적용할 스타일을 결정했습니다. 이제 값을 통해 이 속성의 동작을 설정할 수 있습니다. 값은 콜론과 세미콜론 사이의 텍스트로 지정할 수 있습니다. 아래에서는 모든 요소를 선택합니다.
그리고 색상 속성 값을 주황색으로, 글꼴 크기 속성 값을 16픽셀로 설정합니다.
P(색상: 주황색; 글꼴 크기: 16px; )
이를 테스트하기 위해 CSS에서 규칙 세트는 선택기로 시작하고 바로 뒤에 중괄호가 옵니다. 이러한 중괄호에는 속성과 값 쌍으로 구성된 선언이 포함되어 있습니다. 각 선언은 속성으로 시작하고 그 뒤에 콜론, 속성 값, 마지막으로 세미콜론이 옵니다.
일반적인 방법은 중괄호 안의 속성과 값 쌍을 이동하는 것입니다. HTML과 마찬가지로 들여쓰기는 코드를 체계적이고 명확하게 유지하는 데 도움이 됩니다.
쌀. 1.03. CSS 구문 구조에는 선택기, 속성 및 값이 포함됩니다.
몇 가지 기본 용어와 일반적인 CSS 구문을 아는 것은 좋은 시작이지만, 깊이 들어가기 전에 다루어야 할 몇 가지 사항이 더 있습니다. 특히, CSS에서 선택기가 어떻게 작동하는지 자세히 살펴볼 필요가 있습니다.
선택기로 작업하기앞서 언급한 것처럼 선택기는 스타일이 지정될 HTML 요소를 나타냅니다. 선택기를 사용하는 방법과 작동 방식을 완전히 이해하는 것이 중요합니다. 첫 번째 단계는 알아가는 것입니다 다양한 방식선택자. 가장 기본적인 선택기인 유형, 클래스 및 식별자 선택기부터 시작하겠습니다.
유형 선택기유형 선택기는 유형별로 요소를 대상으로 합니다. 예를 들어 모든 요소를 대상으로 지정하려면 div 선택기를 사용해야 합니다. 다음 코드는 요소의 유형 선택기와 해당 HTML을 보여줍니다.
사업부(...)
... ...
클래스클래스를 사용하면 클래스 속성 값을 기반으로 요소를 선택할 수 있습니다. 클래스 선택자는 동일한 유형의 모든 요소가 아닌 특정 요소 그룹을 선택하기 때문에 유형 선택자보다 조금 더 구체적입니다.
클래스를 사용하면 여러 요소에 동일한 클래스 속성 값을 사용하여 여러 요소에 동일한 스타일을 한 번에 적용할 수 있습니다.
CSS에서 클래스는 앞에 점으로 표시되고 그 뒤에 클래스 속성 값이 표시됩니다. 아래 클래스 선택기는 요소와 요소를 포함하여 멋진 클래스 속성 값을 포함하는 모든 요소를 선택합니다.
엄청난(...)
...
식별자식별자는 한 번에 하나의 고유 요소만 대상으로 하기 때문에 클래스보다 훨씬 더 정확합니다. 클래스 선택자가 클래스 속성 값을 사용하는 것처럼 식별자는 id 속성 값을 선택자로 사용합니다.
표시되는 요소 유형에 관계없이 id 속성 값은 페이지에서 한 번만 사용할 수 있습니다. ID가 존재하는 경우 중요한 요소를 위해 예약되어야 합니다.
CSS에서 식별자는 앞에 해시 기호로 표시되고 그 뒤에 id 속성 값이 표시됩니다. 여기서 id는 값이 shayhowe인 id 속성을 포함하는 요소만 선택합니다.
#샤이하우( ... )
...
추가 선택기선택자는 매우 강력한 기능이며 위에서 설명한 것들은 우리가 접하는 가장 일반적인 선택자 중 하나입니다. 이러한 선택기는 시작에 불과합니다. 사용할 수 있는 고급 선택기가 많이 있으며 쉽게 사용할 수 있습니다. 익숙해지면 더 발전된 기능을 확인하는 것을 두려워하지 마십시오.
좋아요, 모든 것을 하나로 모으기 시작하겠습니다. HTML 내부의 페이지에 요소를 추가한 다음 해당 요소를 선택하고 CSS를 사용하여 스타일을 지정할 수 있습니다. 이제 두 언어가 함께 작동하도록 HTML과 CSS 사이의 점을 연결해 보겠습니다.
CSS 연결하기CSS가 HTML과 대화하도록 하려면 HTML에서 CSS 파일을 가리켜야 합니다. 좋은 방법은 HTML 문서의 요소 내에서 가리키는 하나의 외부 파일에 모든 스타일을 포함하는 것입니다. 하나의 외부 CSS를 사용하면 사이트 전체에 동일한 스타일을 적용하고 빠르게 변경할 수 있습니다.
CSS 추가를 위한 기타 옵션CSS를 통합하는 다른 옵션에는 내부 스타일과 인라인 스타일 사용이 포함됩니다. 실제로 이러한 옵션을 접할 수 있지만 사이트 업데이트를 번거롭고 번거롭게 만들기 때문에 일반적으로 눈살을 찌푸립니다.
외부 스타일 시트를 생성하기 위해 다시 선택한 텍스트 편집기를 사용하여 새로운 스타일 시트를 생성하고 싶습니다. 텍스트 파일.css 확장자를 사용합니다. CSS 파일은 HTML 파일과 동일한 폴더 또는 하위 폴더에 저장되어야 합니다.
요소 내부에는 HTML과 CSS 파일 간의 관계를 정의하는 요소가 사용됩니다. CSS에 연결하고 있으므로 스타일시트 값과 함께 rel 속성을 사용하여 관계를 나타냅니다. 또한 href 속성은 CSS 파일의 위치나 경로를 나타내는 데 사용됩니다.
다음 예제 HTML 문서에서 요소는 외부 스타일시트를 가리킵니다.
CSS가 올바르게 렌더링되려면 href 속성의 경로 값이 CSS 파일이 저장된 위치와 직접 일치해야 합니다. 이전 예에서 main.css 파일은 HTML 파일과 동일한 위치(루트 폴더라고도 함)에 저장됩니다.
CSS 파일이 하위 폴더에 있는 경우 href 속성의 값은 해당 경로와 일치해야 합니다. 예를 들어, main.css 파일이 stylesheets라는 하위 폴더에 저장된 경우 href 속성의 값은 stylesheets/main.css가 됩니다. 슬래시(또는 슬래시)를 사용하여 하위 폴더로 이동함을 나타냅니다.
~에 이 순간우리의 페이지는 느리지만 확실하게 살아나기 시작했습니다. 아직 CSS를 너무 깊이 다루지는 않았지만 일부 요소에는 CSS에서 선언하지 않은 스타일이 있다는 것을 알아차렸을 것입니다. 이러한 요소에 자신이 선호하는 스타일을 적용하는 것은 브라우저입니다. 운 좋게도 이러한 스타일을 매우 쉽게 다시 작성할 수 있으며, 이는 CSS 재설정을 사용하여 다음에 수행할 작업입니다.
CSS 재설정 사용각 브라우저에는 다양한 요소에 대한 고유한 기본 스타일이 있습니다. 어떻게 구글 크롬제목, 단락, 목록 등을 표시하는 방식은 Internet Explorer의 방식과 다를 수 있습니다. 브라우저 간 호환성을 보장하기 위해 CSS 재설정이 널리 사용되었습니다.
CSS 재설정은 다음에서 모든 기본 HTML 요소를 가져옵니다. 주어진 스타일모든 브라우저에 일관된 스타일을 제공합니다. 이러한 재설정에는 일반적으로 이러한 값을 낮추는 치수, 패딩, 여백 또는 추가 스타일을 제거하는 작업이 포함됩니다. CSS 캐스케이딩은 위에서 아래로 작동하므로(곧 배우게 될 것입니다) 재설정은 스타일의 맨 위에 있어야 합니다. 이렇게 하면 이러한 스타일을 먼저 읽을 수 있습니다. 다른 브라우저공통된 참조 지점에서 작업을 시작합니다.
적용할 수 있는 다양한 CSS 재설정이 있으며 모두 고유한 기능을 가지고 있습니다. 강점. Eric Meyer의 가장 인기 있는 것 중 하나인 그의 CSS 재설정은 새로운 HTML5 요소를 포함하도록 조정되었습니다.
좀 더 모험적인 느낌이 든다면 Nicholas Gallagher가 만든 Normalize.css도 있습니다. Normalize.css는 모든 핵심 요소에 대해 하드 리셋을 사용하는 데 중점을 두지 않고 대신 해당 요소에 대한 공통 스타일을 설정하는 데 중점을 둡니다. 이를 위해서는 CSS에 대한 더 깊은 이해와 스타일을 통해 얻고자 하는 것이 무엇인지에 대한 지식이 필요합니다.
브라우저 간 호환성 및 테스트앞서 언급했듯이 브라우저마다 요소를 다르게 렌더링합니다. 브라우저 간 호환성과 테스트의 중요성을 인식하는 것이 중요합니다. 사이트는 모든 브라우저에서 정확히 동일하게 보여서는 안 되지만 가까워야 합니다. 어떤 브라우저를 지원하고 어느 정도까지 사이트에 가장 적합한지에 따라 결정을 내려야 합니다.
CSS를 작성할 때 주의해야 할 사항이 몇 가지 있습니다. 좋은 소식은 모든 것을 할 수 있고 그것을 익히려면 약간의 인내심이 필요하다는 것입니다.
연습 중컨퍼런스 사이트에서 마지막으로 중단했던 부분으로 돌아가 CSS를 추가하는 방법을 살펴보겠습니다.
브라우저에서 index.html 파일을 보면 요소와
이미 기본 스타일이 포함되어 있습니다. 특히, 고유한 글꼴 크기와 주변 공간이 있습니다. Eric Meyer의 재설정을 사용하면 이러한 스타일을 부드럽게 만들어 각각이 동일한 기반에서 시작할 수 있습니다. 이렇게 하려면 그의 웹사이트를 살펴보고 코드를 복사하여 main.css 파일 상단에 붙여넣으세요.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 라이센스: 없음(공개 도메인) */ html, body, div,span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 약어, 주소, big, cite, 코드, del, dfn, em, img, ins, kbd, q, s, samp, small, Strike, Strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 필드 세트, 양식, 라벨, 범례, 테이블, 캡션, tbody, tfoot, thead, tr, th, td, 기사, 따로, 캔버스, 세부 정보, 포함, 그림, figcaption, 바닥글, 헤더, hgroup, 메뉴, 탐색, 출력, 루비, 섹션, 요약, 시간, 표시, 오디오, 비디오( 여백: 0; 패딩: 0; 테두리: 0; 글꼴 크기: 100%; 글꼴: 상속; 수직 정렬: 기준선 ; ) /* 이전 브라우저에 대한 HTML5 표시 역할 재설정 */ 기사, 따로, 세부 정보, figcaption, 그림, 바닥글, 머리글, hgroup, 메뉴, 탐색, 섹션( 표시: 블록; ) 본문( 줄 높이: 1; ) ol, ul ( 목록 스타일: 없음; ) blockquote, q ( 인용문: 없음; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) 테이블 ( border- 붕괴: 붕괴; 테두리 간격: 0; )
또한 href 속성을 사용하여 main.css 파일에 대한 링크를 포함할 것입니다. main.css 파일은 자산 폴더 내부에 있는 스타일시트 폴더에 저장된다는 점을 기억하세요. 따라서 main.css 파일의 경로인 href 속성의 값은 자산/스타일시트/main.css여야 합니다.
스타일 컨퍼런스
작업 내용을 확인하고 HTML과 CSS가 어떻게 함께 작동하는지 확인할 시간입니다. 브라우저에서 index.html 파일을 열면(또는 이미 열려 있는 경우 페이지를 새로 고치면) 이전과 약간 다른 결과가 표시됩니다.
쌀. 1.04. CSS 재설정이 포함된 스타일 컨퍼런스 사이트
시연 및 원천아래에서 현재 상태의 Styles Conference 웹사이트를 확인하고 사이트의 현재 소스 코드를 다운로드할 수 있습니다.
요약그래서 모든 것이 괜찮습니다! 우리는 이 튜토리얼에서 몇 가지 큰 단계를 밟았습니다.
이제 HTML과 CSS의 기본을 알았습니다. 계속해서 HTML과 CSS를 작성하는 데 더 많은 시간을 할애하면 이 두 언어로 작업하는 것이 훨씬 더 편안해질 것입니다.
요약하면 다음 내용을 다루었습니다.
- HTML과 CSS의 차이점.
- HTML 요소, 태그 및 속성 소개.
- 첫 번째 웹페이지의 구조를 설정합니다.
- CSS 선택기, 속성 및 값을 소개합니다.
- CSS 선택기로 작업하기
- HTML에서 CSS를 가리키는 포인터입니다.
- CSS 재설정의 중요성.
이제 HTML을 자세히 살펴보고 의미론에 조금 익숙해지도록 하겠습니다.
리소스 및 링크- Scripting Master를 통한 일반적인 HTML 용어
- 인상적인 웹을 통한 CSS 용어 및 정의
- CSS 도구: Eric Meyer를 통해 CSS 재설정
작업 목적: 학생들에게 HTML 언어의 기본 개념, HTML 문서의 구조, 필수 태그, 주석, 텍스트 형식 지정 방법, 물리적 및 논리적 스타일, 간단한 정적 웹 문서 작성 기술 습득에 익숙해지도록 합니다.
실습 수업에서는 메모장 텍스트 편집기를 사용하여 HTML 파일을 준비하고 Internet Explorer 브라우저를 도구로 사용하여 수행된 작업을 모니터링합니다.
이론적인 정보
기본 개념
하이퍼텍스트- 한 요소에서 다른 요소로 쉽게 전환할 수 있는 방식으로 컴퓨터 화면의 텍스트 요소 간에 의미론적 연결을 설정할 수 있는 정보 구조입니다. 실제로 하이퍼텍스트에서 일부 단어는 밑줄을 긋거나 다른 색상(하이퍼링크)으로 색칠하여 강조 표시됩니다. 단어를 강조 표시하면 해당 단어와 강조 표시된 단어와 관련된 주제가 더 자세히 논의되는 일부 문서 사이의 연결을 나타냅니다. HTML 형식으로 작성된 별도의 문서는 다음과 같습니다.
HTML 문서;
웹문서;
웹 페이지.
이러한 페이지는 일반적으로 NTM 또는 HTML 형식입니다.
한 명의 작성자 또는 하나의 IEDV 본문에 속하고 공통 하이퍼링크로 상호 연결된 웹 페이지 그룹은 웹 노드 또는 웹 사이트라는 구조를 형성합니다. 각 HTML 페이지에는 고유한 URL이 있습니다. ㅏ디피이자형씨인터넷에서.
액자 (액자) - 두 가지 의미를 지닌 용어입니다. 첫 번째 값은 자체 스크롤 막대가 있는 문서 영역입니다. 두 번째는 애니메이션 그래픽 파일(프레임)의 0DNN0H 이미지입니다.
애플릿(애플릿) - 다음 형식으로 클라이언트 컴퓨터로 전송되는 프로그램 별도의 파일웹 페이지를 볼 때 실행됩니다.
스크립트(스크립트) , 또는 스크립트는 웹 페이지의 기능을 확장하기 위해 포함된 프로그램입니다. 특정 상황에서는 Internet Explorer 브라우저에 "페이지에서 스크립트 실행을 허용하시겠습니까?"라는 메시지가 표시됩니다. 이 경우에는 스크립트를 의미합니다.
CGI (흔한 게이트웨이 상호 작용) - 서버에서 작동하여 웹 페이지의 기능을 확장할 수 있는 프로그램의 일반 이름입니다. 이러한 프로그램이 없으면 대화형 웹 페이지를 만드는 것이 불가능합니다.
브라우저(브라우저) - 웹 페이지를 보기 위한 프로그램입니다.
요소- HTML 언어 디자인. 데이터를 보관하고 특정 방식으로 형식을 지정할 수 있는 컨테이너로 생각할 수 있습니다. 모든 웹페이지는 요소들의 집합입니다. 하이퍼텍스트의 주요 아이디어 중 하나는 요소 중첩 가능성입니다. 예를 들어:
요소의 콘텐츠, 요소가 형식화하는 데이터
꼬리표(영어 태그 - 레이블, 설명자, 레이블) - 요소의 시작 또는 끝 표시입니다. 태그는 요소 동작의 경계를 정의하고 요소를 서로 분리합니다. 웹 페이지 텍스트에서 태그는 꺾쇠 괄호로 묶여 있습니다.< >, 종료 태그 뒤에는 항상 슬래시가 옵니다. 이 대괄호 사이에 없는 텍스트(< >)은 브라우저에서 볼 때 완전히 표시됩니다. 예를 들어:
요소의 내용, 데이터
요소의 형식을 지정합니다
이 텍스트는 별도의 단락에 위치합니다.
모든 웹페이지는 요소들의 집합입니다. HTML의 기본 원칙 중 하나는 한 요소를 다른 요소 내에 중첩하는 기능입니다.
기인하다- 요소의 매개변수 또는 속성. 속성은 시작 태그 내부에 있으며 공백으로 서로 구분됩니다. 시멘트에 텍스트가 포함된 경우 속성은 글꼴 색상과 크기, 텍스트 단락 정렬 등을 지정할 수 있습니다. 요소에 그림이 포함된 경우 속성은 그림 크기, 그림 주변 프레임의 존재 여부 및 크기 등을 지정할 수 있습니다.
이 텍스트는 화면 중앙에 정렬됩니다.
이 예에서는 단락의 시작과 끝을 정의하는 태그를 다시 사용합니다. 그러나 시작 태그에는 텍스트 정렬을 화면 중앙으로 설정하는 align 속성이 포함되어 있습니다.
메모:
어느 유용한 정보형식을 나타내는 시작 태그와 끝 태그 사이에 있어야 합니다.
모든 속성은 시작 태그에 있습니다.
사용 편의성을 위해 시작 태그는 대문자(P)로, 종료 태그는 소문자(/p)로 작성할 수 있지만 반드시 그럴 필요는 없습니다.
모든 요소에 종료(닫는) 태그가 필요한 것은 아닙니다.
각각의 새 요소 작성을 시작하세요. 새 줄. 중첩된 요소를 들여씁니다(탭). 이것도 꼭 필요한 것은 아니지만 작업이 훨씬 쉬워질 것입니다.
WWW에서 문서를 다운로드하면 브라우저 창에 해당 텍스트가 완벽한 형식의 보기 쉬운 형식으로 표시됩니다. 이는 웹 페이지가 일반적인 텍스트가 아니라 브라우저 창에서 문서 표시를 제어하기 위한 일부 보조 정보도 포함하고 있음을 의미합니다. 문서를 개발할 때 사용자가 어떤 유형의 컴퓨터에서 해당 문서를 볼 것인지 명확하지 않기 때문에 특정 컴퓨터 플랫폼용으로 개발된 형식(예: Windows XP용 Microsoft Word 형식)으로 웹 페이지를 작성하고 저장할 수 없습니다. 모든 유형의 컴퓨터에서 작업하는 사용자가 그에 따라 형식화된 문서를 보려면 이러한 목적으로 특별히 개발된 HTML 언어가 사용됩니다.
HTML이란 정확히 무엇입니까?브라우저로 작업하는 경우 보기 - HTML 코드 보기(보기 - 소스) 메뉴 명령을 선택합니다. 이 페이지의 초기 코드가 HTML로 표시된 창이 디스플레이에 나타납니다.
Ctrl+U를 누르거나
인터넷상의 웹 페이지의 모습은 종종 변합니다. 그러나 현재 우리에게는 이것이 중요하지 않습니다.
HTML - 하이퍼텍스트 마크업 언어HTML - HyperText Markup Language는 문서의 구조를 설명하는 매우 일반적인 명령 집합입니다. 이 마크업 언어를 사용하면 문서의 개별 논리적 부분(제목, 단락, 표, 목록 등)을 강조 표시할 수 있지만 특정 서식 속성을 지정하지는 않습니다. 특정 형식의 서식은 문서를 읽을 때 브라우저 자체에 의해 결정되며 브라우저는 구체적으로 다음을 제공합니다. 더 나은 디스플레이 웹 문서당신의 화면에.
앞서 언급했듯이 HTML 코드를 자동으로 생성하는 특수 편집기 프로그램을 사용하여 웹 페이지를 만들 수 있으며, 이 프로그램은 마크업 언어에 대한 지식이 필요하지 않습니다. 그러나 이러한 프로그램은 기능이 제한되고 오류가 포함되어 있으며 모든 플랫폼에서 작동하지 않는 잘못된 HTML 코드를 생성하는 경우가 많습니다. 따라서 WEB 디자인을 진지하게 익히고 WEB 문서 작성 원리를 이해하고 싶다면 HTML 언어의 기본을 모르면 할 수 없습니다. 특히 WEB 페이지를 만드는 것이 전혀 어렵지 않기 때문입니다. 어쩌면 HTML 페이지를 만드는 프로그램을 마스터하는 것보다 훨씬 쉬울 수도 있습니다.
HTML 언어HTML 언어는 여러 변형이나 사양으로 존재합니다. 소프트웨어 제품 버전과 마찬가지로 사양에는 2.0, 3.0, 3.2, 4.0이라는 번호가 매겨져 있습니다. 모든 후속 사양은 이전 사양에 대한 확장 및 추가를 나타냅니다. 우리는 후자의 구성을 사용할 것입니다 HTML 사양 4.0이 지원됩니다. 최신 버전가장 일반적인 브라우저.
HTML 코드 창의 문서는 특수한 형식의 텍스트 문서입니다. 이 형식의 모든 파일에는 HTML 확장(.html) 또는 HTM(.htm)입니다. HTML 문서는 일반 텍스트와 꺾쇠괄호로 묶인 마크업 요소를 혼합합니다.< и >, 예를 들어, , , , . 이러한 마크업 요소를 태그라고 합니다. 태그는 단일 태그로 열리고 닫힐 수 있으며 특정 순서에 따라 후속 부분으로 구성됩니다.
- 왼쪽 꺾쇠괄호.
따라서 HTML 문서의 시작 부분에 나타나서 시작을 표시하는 여는 태그는 HTML 이름과 두 개의 꺾쇠 괄호로 구성됩니다.< >, 그리고 WEB 문서 끝에 위치한 태그에는 지정된 부분 외에 슬래시/기호도 포함되어 있어 닫는 태그를 의미하며 문서의 끝을 나타냅니다. 태그는 문서에 통합된 스크립트 프로그램의 코드 시작을 의미합니다. 이 태그에는 스크립트 이름 외에도 값이 "vbscript"인 언어 속성이 포함되어 있습니다. 이는 스크립트가 vbscript 언어로 작성되었음을 의미합니다.
태그에는 라틴 문자만 사용할 수 있으며 속성 값에는 모든 문자를 사용할 수 있습니다. 예를 들어 키릴 문자가 속성 값으로 사용되는 경우 name="Section 1"과 같이 따옴표로 묶어야 합니다.
HTML 언어는 큰 글자와 소문자를 구분하지 않으므로 및 태그는 동일합니다. 그러나 2010년 HTML 언어 사양 영역에서 문제를 정리하는 책임을 맡은 w3c 컨소시엄은 최신 버전에서 작은 문자, 즉 중요한 조건으로 태그를 작성할 것을 끊임없이 권장합니다. 따라서 더 나아가 태그를 소문자로 작성하는 방법을 사용하겠습니다.
HTML 기반의 태그대부분의 태그는 쌍으로 구성됩니다. 여는 태그 뒤에는 해당하는 닫는 태그가 오고, 그 사이에는 텍스트나 기타 태그가 포함됩니다. 예:
온라인 서점 Three Steps
이러한 경우 두 개의 태그와 그 사이에 포함된 문서 부분이 블록을 형성합니다. HTML 요소. 예를 들어 일부 태그는 단일 태그이며 닫는 태그가 없습니다. 이러한 태그는 그 자체가 HTML 요소입니다.
대부분의 태그에는 브라우저가 현재 태그를 처리하는 방법에 대한 추가 정보를 제공하는 특성인 하나 이상의 속성이 있을 수 있습니다. 그러나 속성이 전혀 없을 수도 있습니다. 태그 속성은 이름(예: align), 등호 = 및 문자열로 지정되는 값(예: "center": align="center")으로 구성됩니다. 속성 값은 일반적으로 따옴표로 묶입니다. 그러나 이러한 값에 라틴 문자, 숫자 및 하이픈만 사용하는 경우 따옴표를 생략할 수 있습니다(예: align=center). 그러나 다가오는 HTML과 JavaScript 및 언어의 통합과 관련된 여러 상황으로 인해 따옴표를 생략하는 것은 엄격히 권장되지 않습니다. 그러므로 즉시 속성을 따옴표로 묶는 습관을 기르십시오.
HTML 문서 구조각 HTML 문서에는 다음과 같은 특정 구조가 있습니다.
…
HTML 문서의 구조에는 다음과 같은 필수 요소가 포함되어 있습니다.
- 문서의 시작과 끝을 표시하는 태그 및 ;
- 헤더는 및 으로 구분됩니다.
- 태그로 묶인 몸체…
및 태그로 구분된 제목은 ... 태그를 사용하여 문서의 제목을 정의합니다. 제목은 내용의 윤곽을 잡아야 하며 일반적으로 5-6단어 미만으로 구성됩니다. 이 제목은 브라우저의 프로그램 작업 창 제목 표시줄에 표시되며, 검색 엔진용 색인을 컴파일하는 봇은 제목을 사용하여 문서를 식별합니다.
... 요소 외에도 헤더에는 ... 요소가 포함될 수 있습니다. 예를 들어 문서에 대한 정보를 나타냅니다. 여는 태그에는 문서 유형, 암호화, 작성자, 키워드 목록 등과 같은 문서의 특성을 설명하는 이름=값 쌍이 포함됩니다. 이 데이터는 문서를 색인화할 때 검색 엔진에서도 사용됩니다.
HTML(하이퍼텍스트 마크업 언어)은 특수 언어서식 지정 텍스트 문서(문서 마크업 언어 - WWW 문서 뷰어라고도 함) HTML은 문서의 구조를 설명하는 매우 간단한 명령 집합입니다. HTML을 사용하면 텍스트의 개별 논리적 부분(제목, 단락, 목록 등)을 강조 표시하고, 별도로 준비된 사진이나 그림을 웹 페이지에 배치하고, 다른 문서와의 통신을 위해 페이지에 링크를 구성할 수 있습니다.
예를 들어 HTML은 Microsoft Word처럼 구체적이고 정확한 문서 형식 속성을 지정하지 않습니다. 특정 유형의 문서는 궁극적으로 프로그램에 의해서만 결정됩니다. 브라우저당신의 컴퓨터에서. 이러한 접근 방식의 필요성은 하드웨어와 하드웨어의 이질성과 관련이 있습니다. 소프트웨어인터넷에 연결된 컴퓨터. HTML은 프로그래밍 언어도 아니지만 웹 페이지에는 임베디드 프로그램이 포함될 수 있습니다. 스크립트~에 자바스크립트 언어그리고 비주얼 베이직스크립트 및 프로그램- 애플릿자바 언어로.
관점에서 윈도우 사용자, 웹 페이지는 인터넷 서버에 있는 *.htm 또는 *.html 파일입니다. 지역 네트워크또는 컴퓨터의 하드 드라이브에 있습니다.
HTML은 프로그래밍 언어가 아니며 문서 표시에만 사용된다는 점을 기억하세요. 저것들. 본질적으로 창조 HTML 페이지를 사용하면 일반 텍스트 편집기에서와 거의 동일한 방식으로 태그를 사용하여 텍스트를 편집할 수 있습니다. 각 태그에는 고유한 속성이 있지만 모두 꺾쇠 괄호 ""로 묶여 있습니다(예: , ).
HTML의 모든 태그는 쌍을 이루는 태그와 쌍을 이루지 않는 태그의 두 가지 유형으로 나뉩니다. 쌍을 이루는 태그는 여는 태그에 닫는 태그가 필요한 태그입니다. HTML의 닫는 태그는 슬래시로 표시되며 다음과 같이 작성됩니다. 짝이 없는 태그에는 닫는 태그가 필요하지 않습니다. 이러한 태그의 예는 다음 줄 태그로 나누기입니다.
. 또한 모든 페이지에 반드시 사용해야 하는 필수 태그와 원하는 대로 사용하는 선택 태그가 있습니다.
