많은 사람들은 자신의 웹 사이트를 만드는 것이까다로운 사업이며 심각한 준비와 복잡한 도구 사용이 필요합니다. 사실 최소한의 지식과 가장 기본적인 Windows 프로그램 인 메모장 만 있으면 시작할 수 있습니다. 메모장에서 웹 사이트를 만드는 방법에 대한 간단한 지침을 따르면 몇 시간 안에 첫 번째 전체 페이지를 만들 수 있습니다.
메모장의 장점
Профессиональные веб-разработчики, опытные 사이트 제작자는 작업 과정에서 메모장을 거의 사용하지 않지만이 프로그램이 훌륭한 선택 인 두 가지 범주의 사용자가 있습니다.
- 초보 레이아웃 디자이너;
- 웹 페이지를 만드는 과정에 익숙하지 않은 사람들, 단순한 명함 사이트를 작성하기 위해 복잡한 편집기를 마스터하고 싶지 않은 사람들.
많은 전문가들이 레이아웃에 익숙해지고HTML, 메모장을 사용하여 웹 사이트를 만드는 방법을 알아냅니다. 이를 통해 얻은 모든 지식을 안정적이고 신속하게 통합 할 수있었습니다. 메모장은 코드 및 마크 업 작업을위한 것이 아니며 최신 프로그램에서 사용할 수있는 기본 제공 힌트, 자동 완성 및 기타 칩이 없으므로 개발자는 자신과 자신의 메모리에만 의존 할 수 있습니다.
메모장 텍스트 편집기는 가장 겸손한이는 프로그램의 복잡한 기능을 이해하는 데 오랜 시간이 걸리지 않음을 의미합니다. 이것은 자주 사용하지 않을 도구를 배우는 데 시간을 할애하지 않는 사용자에게 매우 매력적입니다.
일의 기초
메모장에서 HTML 웹 사이트를 만드는 방법에 대한 단계별 지침은 프로그램을 여는 것으로 시작됩니다. 메모장을 찾는 가장 쉬운 방법은 보조 프로그램 섹션의 Windows 시작 메뉴를 사용하는 것입니다.
새로 열린 파일은확장자 html. 이 확장은 브라우저에 웹 페이지임을 알리기 때문에 중요합니다. "파일"메뉴의 "다른 이름으로 저장"명령은 새 창을 엽니 다. 여기서 문서의 이름을 index.html로 지정하고 utf-8 인코딩을 선택하고 폴더를 저장해야합니다.
이제 언제든지이 파일을 두 번 클릭하거나 마우스 오른쪽 단추로 상황에 맞는 메뉴를 호출하고 "메모장으로 열기"를 선택하여이 파일을 열 수 있습니다.
페이지가 이미 생성되었으며 브라우저에서 어떻게 보이는지 확인할 수 있습니다. 웹 브라우저에서 문서를 여는 방법에는 여러 가지가 있습니다.
- 마우스 오른쪽 버튼으로 클릭하고 나타나는 메뉴에서 "Google 크롬으로 열기"(또는 다른 브라우저) 명령을 선택합니다.
- 열려있는 브라우저의 탭 표시 줄로 아이콘을 드래그하기 만하면됩니다.
- 브라우저의 주소 표시 줄에 파일로 시작하는 문서의 전체 주소를 입력합니다. // protocol
파일 : /// C : /Users/UserName/Desktop/my-site/index.html이제 페이지는 예상대로 비어 있으므로 정보로 채울 시간입니다.
하이퍼 텍스트 마크 업 언어
광대 한 월드 와이드 웹의 모든 웹 페이지특수 언어 HTML (Hypertext Markup Language)로 작성됩니다. 메모장이나 다른 편집기에서 웹 사이트를 만드는 방법을 알아 내려면 기본 사항을 이해하는 것이 매우 중요합니다. 개발자는 HTML을 사용하여 페이지가 어떻게 보이는지 브라우저에 설명합니다. 이것이 파일의 올바른 확장자를 설정하는 것이 중요한 이유입니다.
언어는 꺾쇠 괄호로 묶인 문자 조합 인 태그를 기반으로합니다.
태그의 예 :
<h1> 첫 번째 수준 제목 </ h1> <i> 기울임 꼴 텍스트 </ i>여는 태그와 닫는 태그 사이의 텍스트는 브라우저에서 특별한 방식으로 처리됩니다.
페이지에 직접 표시되는 데이터 외에도 페이지를 만들 때 브라우저 자체를위한 특별한 서비스 정보를 지정해야합니다.
첫 번째 스케치
html 문서의 올바른 형식으로 시작해야합니다. 페이지의 기본 구조는 다음과 같습니다.
<! DOCTYPE html> <html> <헤드> <meta charset = "utf-8"> <title> 세계 최고의 사이트 </ title> </ head> <본체> </ body> </ html>각 요소의 의미 :
DOCTYPE-HTML-페이지 루트 태그머리-사이트 방문자에게 보이지 않는 서비스 정보 섹션메타-서비스 태그, charset 속성은 텍스트 인코딩을 정의합니다.표제-브라우저 탭에 표시되는 페이지의 이름몸-페이지에 직접 표시되는 문서의 본문.
코드를 저장하고 브라우저에서 파일을 다시 열거 나 다시로드하면 첫 번째 변경 사항을 볼 수 있습니다. 사이트 이름이 탭에 나타납니다.
주제와 구조
메모장을 사용하여 HTML로 사이트를 만드는 방법을 파악하기 전에이 사이트가 어떻게 보일지 명확하게 상상해야합니다. 예를 들어 특정 John Doe의 개인 블로그를 살펴 보겠습니다.
이 페이지 구조의 주요 요소 :
- 로고와 첫 번째 수준의 제목이있는 모자;
- 수평 탐색 바;
- 3 개의 기사로 대표되는 주요 콘텐츠, 각 기사는 제목, 간단한 설명 및 전체 텍스트에 대한 링크로 구성됩니다.
- 저작권 고지가있는 지하실.
이 페이지의 HTML 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <헤드> <meta charset = "utf-8"> <title> 세계 최고의 사이트 </ title> </ head> <본체> <div class = "wrapper"> <헤더> <a href="index.html"> <img src = "/ images / images / logo.png"alt = ""width = "100"> </a> <h1> John Doe </ h1> </ 헤더> <탐색> <ul> <li> <a href="bio.html"> 자서전 </a> </ li> <li> <a href="life.html"> 나의 삶, 나의 업적 </a> </ li> <li> <a href="gallery.html"> 사진 앨범 </a> </ li> <li> <a href="contacts.html"> 문의하기 </a> </ li> <li> <a href="thanks.html"> 감사합니다 </a> </ li> </ ul> </ nav> <메인> <기사> <h2> 슈퍼 콘서트 </ h2> <div> 티켓을 위해 1km 길이의 줄을 섰다. 이 쇼를 즐기기 위해 !! </ div> <a href="posts/concert.html"> 자세히보기 </a> </ article> <기사> <h2> 내가 아이스크림을 좋아하는 이유 </ h2> <div> 깊은 이유를 공유하고 싶어 아이스크림에 대한 나의 사랑 ... </ div> <a href="posts/ice-cream.html"> 자세히보기 </a> </ article> <기사> <h2> 될 것인가? </ h2> <div> 삶과 죽음의 문제. </ div> <a href="posts/to-be-or-not-to-be.html"> 자세히보다 </a> </ article> </ 메인> <바닥 글> John Doe (c) 2018 년 </ footer> </ div> </ body> </ html>HTML5 표준의 시맨틱 태그는 웹 페이지를 설명하는 데 사용됩니다. 헤더, 본관, 탐색, 보행인, 조.
코드 설명 :
- 헤더에는 링크에 래핑 된 이미지가 포함되어 있습니다. 도움을 받으면 사이트의 어느 곳에서나 홈 페이지로 돌아갈 수 있습니다.
- 이미지 자체는 폴더에 있습니다.
이미지파일과 플러시index.html... 속성을 사용하는 코드에서폭너비는 100 픽셀로 엄격하게 설정됩니다. - 제목은 태그로 스타일이 지정됩니다.
h1, 그 중요성을 강조합니다. - 탐색 메뉴는 번호가 지정되지 않은 목록으로 표시되고 각 항목은 사이트의 해당 페이지에 대한 링크입니다. 이러한 섹션은 아직 존재하지 않지만 나중에 만들 수 있습니다.
- 기사 제목의 경우 태그를 사용하십시오.
h2. - "보기"링크는 기사의 전체 텍스트가있는 별도의 페이지로 연결됩니다. 이 페이지도 아직 존재하지 않습니다.
- 모든 콘텐츠는 클래스와 함께 공통 블록으로 래핑됩니다.
싸개... 클래스 속성은 일반적으로 요소의 스타일을 지정하는 데 사용됩니다.
이제 페이지는 다음과 같습니다.
이보기는 계획된보기와 그다지 유사하지 않습니다. 상황을 해결하려면 장식을 추가해야합니다.
이렇게하려면 옆에 다른 파일을 만들어야합니다. index.html 이름을 style.css... 필요한 모든 스타일이 포함됩니다.
현재 프로젝트 구조는 다음과 같습니다.
스타일링
메모장에서 웹 사이트를 만드는 방법을 계속해서 알아 내면서 스타일 시트를 연결하는 새로운 수준으로 이동합니다.
브라우저가 디자인을 가져올 위치를 이해하려면 css 파일의 주소를 지정해야합니다. 이것은 서비스 정보이며 섹션에 배치되어야합니다. 머리.
<헤드> <meta charset = "utf-8"> <title> 세계 최고의 사이트 </ title> <link rel = "stylesheet"href = "style.css"> </ head>이제 파일에서 설명 할 모든 것 style.css, 브라우저가 페이지에 적용됩니다. 예를 들어 배경색을 변경해 보겠습니다.
몸 { 배경 : # 89745d; }스타일 시트의 전체 내용은 다음과 같습니다.
몸 { 패딩 : 0; 글꼴 모음 : 산세 리프; 글꼴 크기 : 16px; 배경 : # 89745d; } .wrapper { 패딩 : 20px; 여백-왼쪽 : 자동; 여백-오른쪽 : 자동; 너비 : 960px; } 헤더 a { 텍스트 장식 : 없음; } header img { 수직 정렬 : 중간; 여백-오른쪽 : 20px; } header h1 { 디스플레이 : 인라인 블록; 수직 정렬 : 중간; 색상 : # f8d9b7; } nav { padding-top : 20px; padding-bottom : 20px; } nav ul { 여백 : 0; 텍스트 정렬 : 가운데; } nav ul li { 디스플레이 : 인라인 블록; 목록 스타일 : 없음; 패딩 : 0px 15px; } nav ul li a { 색상 : # f8d9b7; 텍스트 장식 : 없음; } nav ul li a : hover { 텍스트 장식 : 밑줄; } 기사 { 패딩 : 20px; 여백 : 20px 0; 배경 : # f8d9b7; 상자 그림자 : 00 15px # f8d9b7; } article h2 { margin-top : 0px; margin-bottom : 15px; 색상 : # d57106; } 기사 a { 글꼴 크기 : 14px; 글꼴 스타일 : 기울임 꼴; 색상 : # d57106; } footer { 패딩 : 20px; 텍스트 정렬 : 오른쪽; 색상 : # f8d9b7; 글꼴 크기 : 14px; 글꼴 두께 : 굵게; }스타일에 대한 설명 :
- body 요소는 기본 글꼴 매개 변수 인 sans-serif 계열 및 크기 16 픽셀로 설정됩니다.
- 기본 컨테이너는 960 픽셀의 일정한 너비를 가지며 가운데에 있습니다.
- 메뉴 목록 항목은 인라인 블록 요소로 선언되어 하나의 행에 배치 될 수 있습니다. 링크의 밑줄이 제거되었으므로 이제는 마우스 오버시에만 나타납니다.
- 기사 블록에는 대조되는 배경과 약간의 그림자가 있습니다.
브라우저에서 문서를 새로 고치면 최종 표현을 볼 수 있습니다. 첫 번째 웹 페이지가 성공적으로 생성되었습니다!
그러나 블로그는 메인으로 만 구성 될 수 없습니다.기사 목록이있는 페이지. 어떻게 든 전체 텍스트로 별도의 게시물을 표시해야하며 탐색 메뉴에 표시된 페이지는 이미 계획되어 있습니다.
인터넷의 가장 중요한 개념은 링크를 통해 개별 문서를 연결하는 것입니다. 메모장에서 하이퍼 링크 웹 사이트를 만드는 방법은 무엇입니까?
페이지 추가
사실, 필요한 모든 것이 이미 완료되었습니다. 메뉴 항목 및 포인터 "Watch"는 특수 태그에 더 자세히 표시됩니다. a, 하이퍼 링크의 형성을 담당합니다. 필수 주소는 속성에 표시됩니다. href... 페이지 자체를 만들고 파일 옆에 배치하는 것만 남아 있습니다. index.html.
사진 앨범 페이지의 샘플 코드 (gallery.html) :
<!DOCTYPE html> <html> <헤드> <meta charset = "utf-8"> <title> 세계 최고의 사이트 </ title> <link rel = "stylesheet"href = "style.css"> </ head> <본체> <div class = "wrapper"> <헤더> <a href="index.html"> <img src = "/ images / images / logo.png"alt = ""width = "100"> </a> <h1> John Doe </ h1> </ 헤더> <탐색> <ul> <li> <a href="bio.html"> 자서전 </a> </ li> <li> <a href="life.html"> 나의 삶, 나의 업적 </a> </ li> <li> <a href="gallery.html"> 사진 앨범 </a> </ li> <li> <a href="contacts.html"> 문의하기 </a> </ li> <li> <a href="thanks.html"> 감사합니다 </a> </ li> </ ul> </ nav> <메인> <div class = "gallery"> <그림> <img src = "/ images / images / in-forest.jpg"alt = ""> <figcaption> 숲속 </ figcaption> </ 그림> <그림> <img src = "/ images / images / winter.jpg"alt = ""> <figcaption> 겨울 </ figcaption> </ 그림> <그림> <img src = "/ images / images / on-beach.jpg"alt = ""> <figcaption> 해변에서 </ figcaption> </ 그림> <그림> <img src = "/ images / images / work.jpg"alt = ""> <figcaption> 직장에서 </ figcaption> </ 그림> <그림> <img src = "/ images / images / new-year.jpg"alt = ""> <figcaption> 새해 </ figcaption> </ 그림> <그림> <img src = "/ images / images / picture.jpg"alt = ""> <figcaption> 자화상 </ figcaption> </ 그림> </ div> </ 메인> <바닥 글> John Doe (c) 2018 년 </ footer> </ div> </ body> </ html>기본 구조, 머리글, 탐색 및 바닥 글이 기본 페이지를 완전히 복제하고 섹션 만 변경됩니다. 본관이제 여러 블록이있는 갤러리가 있습니다. 그림... 각 블록에는 그림과 캡션이 있습니다.
페이지를 디자인하는 데 동일한 파일이 사용됩니다. style.css섹션 내부에 연결 머리... 갤러리에 대한 몇 가지 규칙을 추가해야합니다.
.갤러리 { 글꼴 크기 : 0; } 그림 { 디스플레이: 인라인 블록; 수직 정렬 : 하단; 너비 : 33.3333 %; 상자 크기 : 테두리 상자; 패딩 : 10px 15px; 여백 : 0px; 글꼴 크기 : 14px; 색상 : # f8d9b7; 텍스트 정렬 : 가운데; } figure img { 너비 : 100 %; margin-bottom : 10px; }여기서는 css 기술을 사용하여 블록을 3 개 연속으로 배치하고 부모 컨테이너 너비의 정확히 1/3로 설정할 수 있습니다.
갤러리의 최종 모습은 아래와 같습니다.
하이퍼 링크는 사이트 페이지 간 이동을 제공합니다. 메뉴에서 "사진 앨범"으로 이동하고 로고를 클릭하면 기본 페이지로 다시 이동할 수 있습니다.
인터넷에 사이트 배치
그래서 우리는 메모장에서 웹 사이트를 만드는 방법에 대한 단계별 지침을 사용하여 알아 냈습니다. 그러나 이제 아무도 그를 보지 않습니다! 그러나 개인 블로그는 당신의 삶을 전 세계와 공유하기 위해 만들어집니다.
상황을 해결하려면호스팅에 생성 된 모든 파일과 특수 서비스를 사용하여 사이트의 도메인을 선택합니다. 모든 취향과 지갑에 대한 서비스를 제공하는 수많은 호스팅 제공 업체가 있습니다.
호스팅 업체와 계약을 체결하면 생성 된 모든 파일을 전송할 수있는 제어판에 액세스 할 수 있습니다. 현재 프로젝트 구조는 다음과 같습니다.
여기에는 나머지 사이트 페이지에 대한 HTML 파일도 포함되어야합니다.
코드 편집기
이제 HTML 사이트를 만드는 방법을 알았습니다.메모장이지만 더 편리한 방법이 있습니다. 전문가는 코드 작업을 위해 설계된 특수 편집기를 사용합니다. 사이트를 쉽게 만들고 편집 할 수 있도록 많은 편리한 옵션을 제공합니다.
가장 인기있는 도구-Visual Studio코드, 숭고한 텍스트, 메모장 ++. 그들의 복잡성을 두려워해서는 안됩니다. 메모장을 사용하여 웹 사이트를 만드는 방법을 알면 무엇이 무엇인지 쉽게 파악할 수 있습니다. 이 편집기의 모든 추가 기능은 웹 마스터의 작업을 용이하게하도록 설계되었으며 그 과정에서 그를 방해해서는 안됩니다.
메모장을 통해 웹 사이트를 구축하는 것은 웹 개발자로서 길고 흥미로운 여정의 시작에 불과합니다.
