본문 바로가기
온라인 비지니스 블로그 팁

HTML 코드를 쓰는 방법 PC Window 버전

by 보라색파이프 2020. 8. 11.

HTML 코드를 쓰는 방법 PC Window 버전 


HTML은 HyperText Markup Language를 나타냅니다. 웹 디자인에서 주로 사용되는 가장 기본적인 프로그래밍 언어 중 하나입니다. 처음에는 조금 복잡해 보일지 모르지만, 사실 그것은 또한 배우는 더 쉬운 프로그래밍 언어 중 하나입니다. 기본적인 HTML 쓰는 법을 가르쳐 주는 방법 곧 여러분만의 멋진 웹 사이트를 손으로 만들 것입니다.


새 HTML 문서를 만들고 저장

1.텍스트 편집기를 엽니다. 시스템에 미리 설치된 텍스트 편집기를 사용하여 HTML을 쓸 수 있습니다. Windows에서는 메모장을 열 수 있습니다. 

2.페이지 끝에 <!doctype html>을 입력합니다. 이 태그는 웹 브라우저에 문서 유형이 HTML 문서임을 알려줍니다.

3.파일을 클릭합니다. 맨 위에 있는 메뉴 바 안에 있어요.

4.다른 이름으로 저장을 클릭합니다. "파일" 메뉴에 있습니다.

5.문서의 이름을 입력합니다. 웹 사이트의 각 웹 페이지에 대해 별도의 HTML 문서를 작성할 수 있습니다. 많은 웹 사이트에서 첫 번째 페이지의 제목은 "index.html"이지만 원하는 이름을 지정할 수 있습니다. "파일 이름" 옆에 문서의 이름을 지정할 파일 이름을 입력합니다.

6.파일 확장명을 .html로 변경합니다. 기본적으로 메모장은 파일을 ".txt" 파일로 저장하고 TextEdit는 파일을 ".rft" 파일로 저장합니다. 다음 단계 중 하나를 사용하여 문서를 HTML 문서로 저장합니다.PC에서는 "Save as type:" 옆에 있는 드롭다운 메뉴를 사용하여 "모든 파일(*,*)"을 선택합니다. 그런 다음 파일 이름 끝에 있는 ".txt" 확장명을 수동으로 지우고 ".html"로 바꿉니다.

7.저장을 클릭합니다. 이렇게 하면 문서가 HTML 문서로 저장됩니다. 이제부터는 작업을 저장해야 하는 경우 파일 다음에 저장을 클릭합니다.


머리와 본문을 쓰기

1.다음 줄에 <html>을 입력합니다. 이것은 HTML 문서의 열기 태그입니다. 이 값은 "<!doctype html>" 태그 뒤에 있는 두 번째 줄에 표시됩니다. 이 태그는 다음 텍스트가 HTML 형식임을 웹 브라우저에 알립니다.

2.Enter 키를 몇 번 누르고 </html>을 입력합니다. 이렇게 하면 빈 줄이 몇 개 생긴 다음 "<html>" 태그의 닫기 태그를 추가합니다. HTML에서는 모든 항목에 열기 태그와 닫기 태그가 있습니다. 새 HTML 태그를 만들 때 항상 닫기 태그를 추가해야 합니다. 그렇지 않으면 효과가 없을 거예요."<html>"은 항상 문서의 맨 위에 있어야 하며, "</html>" 태그는 항상 문서 맨 아래에 있어야 합니다. 나머지 HTML 코드는 이 두 태그 사이에 들어갑니다.

3.세 번째 줄에 <head>를 입력합니다. HTML 문서의 HTML Head에 대한 열기 태그입니다. 헤드에는 일반적으로 사람들이 웹 사이트를 볼 때 화면에 나타나지 않는 메타 정보가 포함되어 있습니다. 헤드의 열기 태그는 "<html>" 태그가 있는 줄 바로 아래 줄에 들어가야 합니다. 일반적으로 문서 제목, 템플리트, 관련 페이지에 대한 링크 및 웹 브라우저에 대한 특수 코딩 지시사항을 포함합니다. 또한 CSS라고 하는 스타일 언어를 포함할 수도 있습니다.

4. <타이틀>을 입력합니다. 문서 제목을 포함하는 태그입니다. 웹 브라우저에서 볼 때 제목은 맨 위에 있는 탭에 나타나는 텍스트입니다. 이 태그는 Head의 시작 태그 바로 아래에 있어야 합니다.

5.웹 페이지의 제목을 입력합니다. 웹 페이지에 원하는 제목을 입력할 수 있습니다. "<titl>" 태그 바로 뒤에 오거나 다음 줄에 와야 합니다.

6.</title>을 입력합니다. 제목 태그의 닫기 태그입니다. 이것은 HTML 문서의 제목 다음에 해당됩니다. 같은 줄에 있거나 별도의 줄에 있을 수 있습니다. 중요한 것은 HTML 문서의 제목 태그를 닫는 것입니다.

7.Enter 키를 누르고 </head>를 입력합니다. 이 태그는 HTML 문서의 헤드를 닫습니다. 문서 머리글에 다른 항목을 추가하려면 "<head>" 태그와 "</head>" 태그 사이에 문서를 입력해야 합니다. 당신은 필요한 만큼 선을 사용할 수 있습니다.

8.Head 다음에 <body>를 입력합니다. HTML 문서의 본문에 대한 열기 태그입니다. 본문에는 전체 HTML 문서에 나타나는 웹 페이지의 시각적 요소가 포함되어 있습니다.여기에는 텍스트, 이미지, 클릭 가능한 버튼, 링크, 배경색, 배경 이미지 또는 웹 브라우저 내에서 웹 사이트를 볼 때 화면에 나타나는 기타 모든 것이 포함됩니다.

9.Enter를 두 번 누르고 </body>를 입력합니다. HTML 문서의 본문을 닫기 전에 공백을 제공합니다. 이 공간을 사용하여 HTML 문서의 내용 작성을 시작할 수 있습니다. 웹 페이지의 모든 내용은 "<body>" 태그와 "</body>" 태그 사이에 기록됩니다.


HTML로 텍스트를 쓰기

1.본문에 <h1>을 입력하여 헤더를 추가합니다. HTML 문서의 모든 내용은 "<body>" 태그와 "</body>" 태그 사이에 들어갑니다. "<h1>" 태그는 머리글을 쓰기 위한 열기 태그입니다.HTML에서 사용할 수 있는 6개의 헤더 태그는 크기가 다릅니다. "<h1>"은 가장 큰 헤더이고, "<h6>"은 가장 작은 헤더이다. 

2.머리글 태그 뒤에 제목을 씁니다. 태그 뒤에 쓰는 텍스트가 큰 헤더 형식으로 나타납니다. 페이지 제목을 큰 글씨로 맨 위에 표시하려면 "<h1>" 다음에 제목을 입력합니다.

3.헤더 태그를 닫으려면 </h1>을 입력합니다. HTML 문서의 전체 텍스트를 헤더 형식으로 표시하지 않으려면 헤더 태그를 닫아야 합니다. 머리글 텍스트 뒤에 "</h1>"을 입력하여 머리글을 닫습니다.

4.줄 바꿈을 추가하려면 <br>을 입력합니다. 일부 텍스트 뒤에 공백을 추가하려면 "<br>"를 입력합니다. 이렇게 하면 텍스트에 공백이 생기고 다른 행이 추가됩니다. 필요한 만큼 줄에 "<br>" 태그를 입력할 수 있습니다. 줄 바꿈 태그는 닫는 태그가 필요하지 않은 몇 안 되는 HTML 태그 중 하나입니다.

5.단락 텍스트를 추가하려면 <p>를 입력합니다. HTML에 문단 텍스트를 추가하려면 "<p>" 태그를 문단 텍스트의 개구부로 사용합니다.

6.문단 텍스트를 입력합니다. 태그 뒤에 입력하는 텍스트는 문단 텍스트로 포맷됩니다. 필요한 만큼 텍스트를 추가할 수 있습니다.

7.단락 텍스트를 닫으려면 </p>를 입력합니다. 문단 텍스트를 다 썼으면 "<p>" 태그를 사용하여 "<p>" 단락 태그를 닫습니다.

8.HTML 텍스트 태그에 표준 요소를 추가합니다. 태그를 약간 더 맛있게 하려면 HTML 텍스트 태그 내부에 "style="를 입력한 다음 HTML 요소를 추가하여 텍스트 스타일을 지정할 수 있습니다. 여러 스타일 요소를 세미콜론(;)으로 구분하여 태그에 추가할 수 있습니다.다음은 텍스트 태그를 스타일링하는 데 사용할 수 있는 몇 가지 옵션입니다.색상: 텍스트 색상을 변경하려면 HTML 태그의 "style=" 뒤에 "color:[color name];"를 입력합니다. 색상의 실제 이름 또는 16진수 색 코드를 "[색상 이름]" 대신 입력합니다. 글꼴: 텍스트 글꼴을 변경하려면 HTML 태그의 "style=" 뒤에 "font-family:[font name];"를 입력합니다.텍스트 크기는 다음과 같습니다. 텍스트 크기를 변경하려면 HTML 태그의 "style=" 뒤에 "font-size:[size in percent(%) 또는 픽셀(px)];"를 입력합니다. 정렬: 다음을 수행합니다. HTML 태그에 "style=" 뒤에 "text-align:[alignment];"를 입력하여 텍스트를 왼쪽, 가운데 또는 오른쪽으로 정렬할 수 있습니다.

9.목록을 추가해보세요. HTML에 번호 또는 글머리표 목록을 추가할 수 있습니다. HTML에 목록을 추가하려면 다음 단계를 사용하십시오. 번호 목록을 시작하려면 "<ol>"을 입력하고 글머리표 목록을 시작하려면 "<ul"을 입력합니다.나열된 새 항목을 만들려면 "<li>"를 입력합니다.나열된 항목에 대한 텍스트를 추가하려면 "<p>" 태그를 사용합니다.목록 항목의 텍스트를 입력합니다.나열된 항목의 텍스트 부분을 닫으려면 </p>를 입력합니다.나열된 항목 태그를 닫으려면 "</li>"를 입력합니다.다른 모든 목록 항목에 대해 이 과정을 반복합니다.목록 끝에 있는 목록 태그를 닫으려면 "</ol>" 또는 "</ul>"을 입력합니다.

10.HTML 문서를 검토합니다. 주기적으로 작품을 확인하는 것이 좋습니다. 아직 그렇게 하지 않으셨다면요. 어서 일을 저장하세요. 그런 다음 HTML 문서를 마우스 오른쪽 단추로 클릭하고 다음으로 열기를 선택합니다. 웹 브라우저에서 볼 웹 브라우저를 선택합니다.


HTML에 다른 요소를 추가 할려면

1.본문 배경에 색상 스타일을 추가할려면? 본문의 배경색을 변경하려면 "<body> 태그를 편집하여 "<body style=>"라고 합니다. 그런 다음 "style=" Replace "[color name]" 뒤에 "background-color:[color name];"를 색상 또는 16진수 색상 코드의 이름으로 입력합니다. 예를 들어 배경색을 검은색으로 변경하려면 신체 태그를 <body style="배경색:검정색;"으로 입력합니다.또는 본문 태그에서 배경 이미지를 설정할 수도 있습니다. 그렇게 하려면 <body style="background-image:본문 태그로 [image url]" > 이라고 합니다. [image URL]을 사용할 이미지의 웹 주소 또는 위치로 바꿉니다.

2.이미지를 추가합니다. 웹 페이지에 이미지를 추가하려면 <img src="[image url]"를 입력합니다. "[image url]"을(를) 이미지의 웹 주소로 바꿉니다. 이미지 태그에는 닫는 태그가 필요하지 않습니다.이미지 태그에서 "높이=" 및 "폭="를 추가한 다음 이미지 높이 및 너비(픽셀 단위)를 추가하여 이미지 크기를 조정할 수 있습니다.태그 앞에 열기 태그 <center>을 입력하고 이미지 태그 뒤에 </center>을 입력하여 이미지를 중앙에 배치할 수도 있습니다.

3.다른 웹 페이지에 링크를 추가합니다. 웹 디자인에서 다른 웹 페이지로 다시 연결하는 것은 중요합니다. 다음 단계에 따라 다른 웹 페이지로 이동하기 위해 클릭할 수 있는 링크를 만듭니다.<a href=>를 입력하여 링크 태그를 시작합니다.링크할 페이지의 URL을 "a href=" 뒤에 인용문으로 추가합니다.링크의 열기 태그를 닫으려면 ">"를 입력합니다.연결에 사용할 텍스트를 열기 태그 뒤에 입력합니다. 또는 이미지 태그를 사용하여 이미지를 클릭 가능한 링크로 사용할 수 있습니다.

4.수평선을 추가하려면 <hr>를 입력합니다. 수평선은 텍스트에서 주제 구분으로 사용할 수 있습니다. 수평선을 추가하려면 <hr>만 입력하면 됩니다. 이 태그에는 닫는 태그가 필요하지 않습니다.



댓글0