이 교육 과정에서는 메모장을 사용하지 않고 기본 사이트를 만드는 방법을 알아 봅니다. Mac에있는 경우 TextEdit을 사용해야합니다.
HTML과 같은 코드를 변경하는 데 사용할 수있는 다른 전문 코드 편집기가 있습니다
메모장 ++ (Windows)-무료
Adobe Brackets (Windows / Mac)-무료
그랜드 텍스트 (Windows / Mac)-유료
Mac에있을 때 TextEdit보다 나은 옵션이 필요한 경우 Mac과 Windows를 모두 다루는 Adobe Bracket을 다운로드 할 수 있습니다. 필자는 Windows를 다루고 있으며 이러한 방식으로 메모장의 필수 적응을 활용합니다. 이 교육 실습의 코드는 모든 편집 관리자에서 작동하므로 원하는 교정자 및 시작 방법을 선택하십시오.
윈도우
Windows 7 이전 버전에서 메모장을 열려면 시작-> 모든 프로그램-> 보조 프로그램-> 메모장을 클릭하십시오. 당신은 마찬가지로 "노트북"에 대한 시작 및 퀘스트를 누릅니다.
매킨토시
TextEdit을 열고 환경 설정> 새 문서> 일반 컨텐츠 선택으로 이동하여 컨텐츠 관리자가 일반 컨텐츠로 설정되어 있는지 확인하십시오. 그런 다음 "Open and Save"에서 "html 문서를 html 코드로 표시"및 "RTF 레코드를 RTF 코드로 표시"를 선택하십시오.
다음으로 코드를 관리자에게 재정렬하십시오.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML 파일 절약
HTML 기능 보강을 사용하여 레코드를 "index.html"로 예비하십시오. 가능한 한 .html을 이름에 포함시키지 않으면 작동하지 않습니다. 참고 : .html을 선호하더라도 "L"없이 .htm을 사용할 수 있습니다.
html 레코드에 선호되는 인코딩을 UTF-8로 설정하십시오. ANSI 인코딩은 미국 및 서유럽 문자 전용입니다.
HTML 레코드를 절약
브라우저에서 HTML 파일 열기
다음으로, 당신이 기록을 남긴 봉투로 가서 프로그램에서여십시오. 이 모델에서는 Chrome을 사용하고 있지만 모든 최첨단 프로그램이 작동합니다.
참고 : 레코드를 여는 데 어려움이 있으면 .html로 남겨 두십시오.
브라우저에서 HTML 파일 열기
브라우저에서 HTML 파일 검토
프로그램에서 레코드가 열리면 다음과 유사합니다.
URL 표시 줄에 기록 방식을 확인하십시오.
record : // C : / 사용자 / 웹 사이트 DIY / Desktop / HTML / indexhtml
그것이 PC에서 레코드를 만드는 가장 좋은 방법입니다.
브라우저에서 HTML 파일 검토
텍스트 초점
html 문서를 만드는 데 필요한 기본 사항을 이해 했으므로 내용을 집중시키는 방법을 찾아야합니다.
작성한 html 문서로 이동하여 <center> <h1> My First Heading </ h1> </ center>과 같이 "My First Heading"주위에 <center> </ center> 레이블을 포함하십시오.
추가 통지가있을 때까지 <p> 첫 번째 단락 </ p>을 지 웁니다.
텍스트 초점
파일을 예비하고 프로그램에서 다시 한 번 부활 시키십시오. 프로그램 창이 아직 열려있는 경우 기본적으로 소생을 클릭하여 페이지를 다시로드 할 수 있습니다.
이제 헤더 컨텐츠가 사이트 페이지에 집중되어야합니다.
집중된 콘텐츠
웹 사이트에 Youtube 비디오 추가
YouTube 비디오를 사이트에 추가하려면 : Youtube로 이동하여 사이트에 추가해야하는 비디오를 찾으십시오.
비디오에서 "오른쪽 클릭"및 "임베디드 코드 삽입".
웹 사이트에 Youtube 비디오 추가
비디오 내장 코드를 메모장에 붙이기
설치 코드를 메모장에 붙이십시오
설치 코드는 다음과 같습니다.
<iframe width = "854"height ="480"src = "" frameborder = "0"allowfullscreen> </ iframe>
너비와 높이를 원하는 것으로 변경할 수 있습니다. 코드에서 숫자를 변경하고 다른 모든 내용은 변경하지 마십시오. 이 모델에서는 width = "427"및 height = "240"을 사용합니다. 원하는 것을 원하는대로 설정할 수 있습니다.
YouTube에서 복제 한 임베드 코드 주위에 <center> </ center> 태그를 넣어 비디오의 초점을 맞 춥니 다.
또한 <h1> 내 첫 번째 제목 </ h1> 레이블 사이의 제목을 "내 웹 사이트"라고 표시하도록 변경하십시오.
비디오에 집중
집중된 비디오 모델
다른 페이지에 링크 추가
현재 개인이 클릭하면 Google에 연결되는 연결을 추가합니다.
동영상 바로 아래에 첨부 코드를 사이트에 추가하십시오.
내부 라벨을 사용하여 연결에 초점을 맞추는 방법을 확인하십시오. 또한 중간 태그 바로 전에 <br> 레이블을 확인하십시오. 여기에는 비디오와 연결 사이에 줄 바꿈이 포함됩니다.
다른 페이지에 링크 추가
이제 비디오 아래를 클릭했을 때 Google로 연결되는 비디오 아래의 연결을 관찰해야합니다.
필요한 모든 페이지로 이동하는 인터페이스를 만들 수 있습니다. href 특성의 내용을 변경하기 만하면됩니다.
다른 사람이 연결할 때 다른 창에서 연결을 열어야하는 경우 연결 태그에 첨부 된 품질을 포함 시키십시오.
모델 연결
웹 사이트를위한 두 번째 페이지 만들기
현재 귀하의 사이트에 대한 두 번째 페이지를 만들어 page2html이라고합니다. 이 라인을 따라 이전과 마찬가지로 Google에 연결하는 대신 사이트의 다른 부분에 연결할 수 있습니다.
다른 html 레코드를 만들고 그 아래 코드를 추가하십시오. 그것을 예비하고 그것을 page2html이라고 부르십시오
<! DOCTYPE html>
<html>
<본체>
<h1> 2 페이지 </ h1>
<p> 이것은 나의 두 번째 페이지입니다. </ p>
</ body>
</ html>
귀하의 사이트에는 현재 기본 페이지에서 연결할 수있는 두 번째 페이지가 있습니다.
웹 사이트를위한 두 번째 페이지 만들기
메인 페이지에서 Page2에 연결
Page2를 만들었으므로 메인 페이지의 연결을 page2html에 연결하도록 조정하겠습니다.
"indexhtml"을 열고 Google에 연결하는 URL을 2 페이지에 연결하도록 변경하십시오.
<a href="page2html"> 2 페이지 </a>
메인 페이지에서 Page2에 연결
현재 사이트의 2 페이지에 있습니다.
연결을 효과적으로 만들었을 때 비디오 아래의 연결을 클릭하면 pagehtml로 이동해야합니다. 알 수없는 이유로 연결이 작동하지 않는 경우 몇 단계를 다시 수행하고 지침을 다시 한 번 준수하십시오. 사이트에 조인 / URL을 포함시키는 방법을 이해하는 것은 놀라운 일입니다. 모든 웹은 Google이 제출 한 방대한 연결 모음 일뿐입니다.
CSS와 함께 멋진 스타일 포함
우리는 현재 CSS를 사용하여 page2에 대한 연결 스타일을 지정하여 캐치처럼 보입니다. CSS는 사이트 디자인을 제어하는 데 사용됩니다.
<body> 태그 바로 아래의 색인 html 페이지에서 가장 높은 지점에서 첨부 코드를 다시 정렬하십시오. 고착 할 때 다른 코드를 덮어 쓰지 마십시오.
<헤드>
<style media = "screen"type = "text / css">
ㅏ {
표시 : 인라인 스퀘어;
너비 : 100px;
키 : 30px;
라인-스테이 처 : 30px;
쿠션 : 10px;
기초 음영 : # 00AEEF;
음영 : #ffffff;
프린지 스윕 : 10px;
}
</ style>
</ head>
이 코드가 본질적으로하는 것은 이전에 만든 연결에 기초 음영과 키를 포함하도록 프로그램에 조언하는 것입니다. 마찬가지로 10px의 외곽 범위를 포함하여 모서리를 약간 조정했습니다. CSS에 익숙해 져 사이트를 매우보기 좋게 만들 수있는 무료 온라인 교육이 많이 있습니다.
'New Features' 카테고리의 다른 글
| PUBG 게임 시즌 13 로얄 패스가 나왔습니다-확인하십시오 (0) | 2020.05.14 |
|---|---|
| iPhone 12 누출-알아야 할 기능 및 가격-배터리와 대형 디스플레이가 함께 제공 될 수 있음 (0) | 2020.05.12 |
| Top 5 short video editing apps for Android and iOS - Download Now (0) | 2020.05.04 |
| 5 프로그래밍 언어 언어를 배우는 데 시간을 낭비해서는 안됩니다-2020 언어 휴지통 (0) | 2020.05.03 |
| 2020 년에 저가형 PC에서 PUBG를 재생하는 방법 (0) | 2020.05.03 |
