컴맹인 제가 HTML 파일을 만들게 되기까지 쉽지 않은 시간들이었습니다.
제가 할 수 있으면 여러분들에게는 식은 죽 먹기일 겁니다.
세상에는 배워야 할 것들이 참 많은데.
HTML도 그중 하나인 것 같습니다.
저와 함께 단계별로 HTML 코드 복사 파일을 만들어 보세요.
HTML 코드 복사 파일 만들기 시작
HTML 파일을 만드는 것은 웹 개발 학습을 시작하는 좋은 방법입니다.
누구나 쉽게 따라할 수 있는 단계별 지침은 다음과 같습니다.
1단계: 텍스트 편집기 열기
컴퓨터에서 간단한 텍스트 편집기를 엽니다.
Windows에서는 메모장, macOS에서는 TextEdit 또는
기타 기본 텍스트 편집기를 사용할 수 있습니다.
2단계: HTML 코드 작성
HTML 코드 작성:
텍스트 편집기에서 다음 HTML 코드를 입력합니다.
저는메모장에 입력했습니다.
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">http://Hello, World! This is my first web page. <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first web page.</p> </body> </html> |
html 확장자를 사용하여 HTML 파일 저장
1단계:파일 저장
▶ 파일을 저장하는 방법
1. 텍스트 편집기를 엽니다.
HTML 코드를 작성한 텍스트 편집기를 엽니다.
2. HTML 코드 작성 또는 붙여넣기:
- HTML 코드를 텍스트 편집기에 작성하거나 붙여넣습니다.
3. 다른 이름으로 저장:
- 텍스트 편집기의 왼쪽 상단에 있는 "파일"을 클릭하세요.
4. 다른 이름으로 저장을 선택하세요.
- 메뉴에서 텍스트 편집기에 따라 "다른 이름으로 저장...
- " 또는 "다른 이름으로 페이지 저장..."을 선택합니다.
5 위치 선택:
- HTML 파일을 저장하려는 위치로 이동합니다.
6. 파일 이름:
- "파일 이름" 필드에 HTML 파일의 이름을 입력합니다.
- 예를 들어 이름을 index.html.7.
7. 파일 유형 선택:
- 저장하기 전에 "파일 형식" 또는 이와 유사한 드롭다운에서
- "모든 파일" 또는 "모든 형식"을 선택하십시오.
8. html 확장자 추가:
-.html파일 이름 끝에 추가하세요 .
- 예를 들어, 파일 이름을index로 지정했다면
- 이제 파일 이름은index가 되어야 합니다.
- index.html.
9. 저장 버튼을 클릭:
- "저장" 버튼을 클릭하세요.
이제 .html 확장자를 사용하여 HTML 파일을 성공적으로 저장했습니다.
웹 브라우저에서 이 파일을 열어 HTML 페이지를 볼 수 있습니다.
참고: 저장할 때 파일 형식을 "모든 파일"로 선택하고 .html파일 이름에 확장자를 추가하세요.
2단계: 웹 브라우저에서 새로 생성된 HTML 파일을 엽니다
▶ 웹 브라우저(예: Google Chrome, Firefox, Safari)를 사용하여
▶ 새로 생성된 HTML 파일을 엽니다.
▶ "Hello, World!"가 표시되어야 합니다.
▶ 메시지가 표시됩니다.
3단계: 선택 사항: 페이지를 사용자 정의하세요:
텍스트 편집기에서 HTML 파일로 돌아가서
태그 내부의 텍스트를 변경해 <h1>보세요 <p>. 파일을 저장하고
웹 브라우저를 새로 고쳐 변경 사항을 확인하세요.
4단계: 축하해요! 방금 첫 번째 HTML 파일을 만들었습니다.
이는 간단한 예이지만 웹 개발에 대해 더 자세히 배울 수 있는
훌륭한 출발점이 됩니다.
<p>Hello, World!</p>
<p>This is my first web page.</p>
'Techinity(테크니티) > 인공지능과 Techinity(테크니티)' 카테고리의 다른 글
| CLS(Cumulative Layout Shift) 이해 및 수정하는 방법 (1) | 2024.01.27 |
|---|---|
| [초보자가이드] 구글서치콘솔 사용 하는 가장 쉬운 방법 (1) | 2024.01.27 |
| [초보자가이드]티스토리 블로그에서 수익을 창출하는 방법 (1) | 2024.01.25 |
| 웹사이트 로그인 방법 3가지, 명칭 개념 알고 사용하기 (2) | 2024.01.24 |
| [초보자가이드] sns 빠르게 시작하는 방법 (1) | 2024.01.24 |