이 게시물을 읽고 첫 번째 웹사이트를 만드십시오. 코딩 배우기#1

4333 단어 htmlbeginnersproductivitytutorial
웹사이트 제작에 관심이 있다면, 이것은 당신에게 좋은 시작이 될 것입니다. 그러나 웹사이트를 만들기 전에 몇 가지 요구 사항이 필요합니다.

1st - VS 코드 설치
2nd - VS Code를 열고 '라이브 서버'라는 확장 프로그램을 설치합니다.

아래 주어진 이미지



세 번째 - 브라우저가 필요합니다. _EX - 인터넷 익스플로러 _ 😜

그게 당신이 필요한 전부입니다.
지금,

첫 번째 단계 - 폴더를 만들고 VS Code에서 엽니다. VS Code에서 폴더를 열려면. 폴더를 열려면 파일 > 폴더 열기로 이동하거나 키보드 단축키 사용 - Ctrl + K + Ctrl + O 을 사용해야 합니다.

두 번째 단계 - 사이드 바에서 버튼을 클릭하여 새 파일을 만듭니다.

사이드 바 및 버튼 이미지

사이드 바 이미지 -



새 파일 버튼



위 이미지에서 강조 표시된 콘텐츠는 새 파일 버튼입니다.

그런 다음 파일 이름을 입력하고 싶습니다. 이를 위해 파일에 index.html를 입력합니다.

그리고 마지막 단계, 세 번째 단계 - 파일에 Emmet!을 입력합니다.

Emmet이 무엇인지 모르는 사용자를 위해 - Emmet은 콘텐츠 지원을 통해 HTML, XML, XSLT 및 기타 구조화된 코드 형식에서 고속 코딩 및 편집을 허용하는 텍스트 편집기용 플러그인 세트입니다.

에밋의 이미지



Emmet!을 입력한 후 Enter 키를 누르면 자동으로 여러 코드가 입력됩니다. 그런 다음 파일에서 다음 코드를 제거합니다.

<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


우리는 그것을 사용하지 않습니다. 프로젝트를 완료한 후 파일에 작성된 모든 코드를 찾습니다.

그런 다음 본문 콘텐츠 중간에 <h1>Hello Everyone</h1> 를 입력합니다. 또한 파일을 저장하는 것을 잊지 마십시오. 파일을 저장하려면 키보드에서 Ctrl + S를 누르세요. 그런 다음 상태 표시줄에서 Go Live 버튼을 누릅니다.

상태 표시줄 및 Go Live 버튼 이미지



이것이 코딩의 전부입니다. 이제 코드 분석을 살펴보겠습니다.

             **BREAKDOWN OF OUR CODE**

이봐, 아직도 읽고 있니? 그럼 팔로우 해주세요.

분석을 위해 첫 번째 섹션을 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello Everyone</h1>
</body>
</html>


첫 번째 줄 - <!DOCTYPE html> 에서 HTML 문서 유형을 선언합니다. 'HTML' 파일이라는 뜻입니다. 두 번째 줄<html lang="en">은 웹 페이지의 언어를 의미합니다. 세 번째와 다섯 번째 줄에는 <head>와 </head> 두 개의 코드가 있습니다. 머리를 의미하며 데이터가 저장되는 곳입니다. 세 번째 줄에는 <head > 다섯 번째 줄에는 </head> 가 표시됩니다. 여기서 세 번째 줄은 시작 부분입니다. 브래킷 각도만 있고 다섯 번째 줄에는 닫는 부분이 있습니다. 각도 태그와 슬래시가 있습니다.

네 번째 줄은 <title>Document</title> 웹 페이지의 제목을 의미합니다. 내 첫 번째 웹사이트 또는 내 웹사이트와 같은 것으로 변경할 수 있습니다. 그것은 웹 페이지의 제목을 사용자 정의합니다.

웹 페이지 제목에 코드<title>Document</title>를 작성한 후의 이미지.



그리고 마지막 부분 - 여섯 번째, 일곱 번째, 여덟 번째 줄은 코드를 보여줍니다.

<body>
    <h1>Hello Everyone</h1>
</body>

.

우리가 웹사이트의 모든 디자인과 물건을 쓰는 본문 태그이고 '제목 1'을 의미하는 h1 태그가 제목 태그입니다. 'Hello Everyone' 자리에 무엇이든 입력할 수도 있습니다. 예를 들어 - 안녕하세요 여러분, Halo 등입니다.

아홉 번째 태그는 HTML 태그를 닫는 태그입니다.

우리의 고장이 완료되었습니다. 오늘은 여기까지입니다. 좋은 하루 되세요.

오늘의 코딩 이미지



고맙습니다,
고담에서.
실화 태그:<img/> 대 <img/>
NestJS에서 HTTP 예외를 사용자 정의하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage