웹사이트를 시작하는 것은 어려운 작업일 수 있습니다. 특히 웹사이트 구축 경험이 제한적이라면 더욱 그렇습니다. 시작하기 위해 Dynadot은 제공합니다: 무료 원페이지 호스팅 모든 도메인 구매와 함께. 우리의 한 페이지 호스팅은 HTML을 모르는 사람들이 웹사이트를 구축하는 데 도움이 되는 "wizard"를 특징으로 합니다. 그러나 우리의 위저드는 HTML만큼 사이트에서 많은 것을 할 수 있도록 허용하지 않으므로, 시작하기 위한 몇 가지 기본 사항은 다음과 같습니다*:

bold
italics
underline

글꼴 크기
글꼴 크기를 변경하는 가장 쉬운 방법은 이 태그를 사용하는 것입니다:

<big>글꼴 크기를 한 단계 늘립니다</big>
글꼴 크기를 한 단계 줄입니다

글꼴을 더 크게 또는 더 작게 만들어야 한다면, 이보다 더 구체적인 태그를 사용할 수 있습니다:

따옴표 안의 숫자만큼 글꼴 크기를 늘립니다
따옴표 안의 숫자만큼 글꼴 크기를 줄입니다

글꼴 크기를 1-7 사이의 숫자로 지정하여 더 구체적으로 설정할 수도 있습니다. 1이 가장 작은 크기이고 7이 가장 큰 크기입니다:

가장 작은 글꼴 8 pt
가장 큰 글꼴 36 pt

글꼴 크기에 대한 또 다른 옵션은 헤더 태그 1-6을 사용하는 것입니다. 이는 텍스트 주위에 간격도 넣어줍니다:

<h1>가장 큰 헤더</h1>

<h6>가장 작은 헤더</h6>

글꼴 색상
글꼴 크기를 변경하는 것 외에도 색상을 조정할 수도 있습니다.

파란색
빨간색

다른 색조의 빨간색이나 파란색을 사용하려면 "red" 또는 "blue." 대신 여섯 자리 16진수 숫자를 입력할 수 있습니다. 모든 색상은 빨간색, 파란색, 녹색으로 구성되며 각 색상에는 고유한 "code."가 있습니다. 코드의 처음 두 숫자(또는 때로는 문자)는 빨간색을 나타내고, 다음 두 개는 녹색을, 마지막 두 개는 파란색을 나타냅니다. 다운로드할 수 있습니다. 컬러 복사 PC용 또는 디지털 컬러 미터 Mac용으로 이 제품들을 사용하여 화면의 어떤 색상 위에 마우스를 올리면 필요한 코드를 제공합니다. 예를 들어 위에서 본 파란색의 코드를 사용한다면 다음과 같이 보일 것입니다:

same blue
그리고 여기 코드를 사용하여 선택할 수 있는 다른 파란색 음영의 예가 있습니다

폰트 타입페이스
마지막으로, 글꼴의 서체를 변경할 수 있습니다. 아이디어가 필요하다면 Microsoft Word를 사용할 수 있습니다.

arial 글꼴
comic sans ms 글꼴
루시다 핸드라이팅

이제 모든 것을 합쳐야 합니다. "font"라는 단어가 있는 것은 단순히 모든 정보를 하나의 태그에 넣을 수 있습니다. 헤더 태그를 사용하거나 굵게, 기울임, 밑줄을 추가하려면 각각의 태그에 추가할 수 있습니다.

모두 함께 합칠 수 있습니다

모두 굵게 할 수 있습니다

또는 굵게 표시할 수 있습니다 part of it

간격
이제 글꼴을 조정할 수 있게 되었으니, 단락과 줄 바꿈을 만들고 경우에 따라 수동으로 공백을 추가해야 할 수도 있습니다:

단락 태그를 사용하면 텍스트가 자체 단락에 배치됩니다...

...그리고 다음 줄에

줄 바꿈을 사용하는 것은... 
...다음 줄로 이동하기 위해 엔터를 누르고, 이 페이지의 다른 모든 것과 달리 닫는 태그가 필요하지 않습니다(이것은 닫는 태그입니다 ). 그냥 다시 입력하면 됩니다... 
...다시 다음 줄로 가는 것과 같습니다.

텍스트 사이의 공간(스페이스바로 입력한 것처럼)에 코드를 사용할 필요는 없습니다. 추가 공간을 원하지 않는 한 HTML은 스페이스바로 여러 개를 입력해도 하나만 인식하기 때문입니다. 텍스트 사이에 공간을 주려면 코드:  를 사용할 수 있습니다.

링크
웹사이트에 추가하고 싶은 것 중 하나는 웹사이트 내 다른 페이지나 다른 웹사이트로의 링크일 것입니다. 링크는 이 코드를 사용하여 쉽게 추가할 수 있습니다:

<a href="http://www.dynadot.com">이것은 Dynadot의 홈페이지로 연결됩니다</a>

위의 링크를 클릭하면 브라우저 설정에 따라 별도의 탭이나 창에서 열리는 것을 알 수 있습니다. 이는 웹사이트에서 벗어나는 링크를 추가하거나 특정 페이지(예: 블로그)에서 사용자를 잃고 싶지 않을 때 권장되는 간단한 방법입니다. 이렇게 하면 고객이 브라우저의 뒤로 가기 버튼을 클릭하지 않고도 해당 페이지를 열어둘 수 있습니다. 링크 뒤에 target="_blank"를 추가하기만 하면 됩니다.

<a href="http://www.dynadot.com" target="_blank">이것은 Dynadot의 홈페이지로 연결됩니다</a>

이미지
마지막으로, 사이트에 이미지를 추가하고 싶을 수 있습니다. HTML로 이미지를 추가하려면 어딘가에 호스팅해야 합니다. 이미지를 직접 호스팅할 곳이 없다면 다음과 같은 서비스를 사용할 수 있습니다: Tiny Pic.com 무료로 이미지를 업로드하고 HTML 태그를 생성해 주는 서비스입니다. 계정을 만들고 싶지 않다면 생성된 HTML을 저장하기만 하면 됩니다(단, Microsoft Word에 저장하지 마세요. Word가 코드를 작동하지 않게 만드는 요소를 추가할 수 있기 때문입니다). 일부 이미지는 매우 크기 때문에 공간을 덜 차지하도록 최적화하는 것이 좋습니다. 이미지 파일 크기를 줄이는 데 사용할 수 있는 무료 이미지 최적화 도구가 있습니다. Image Optimizer.net. Here is an example of a basic image tag:
<img src="https://i45.tinypic.com/9bkglk.jpg"> 이렇게 생겼습니다: Dynadot logo

이미지에 테두리를 추가하고, 크기를 변경하고, 주위에 간격을 추가할 수도 있습니다:

<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

보시다시피 이미지에는 테두리가 있고, 더 넓고 짧으며, 상하좌우 주위에 간격이 있습니다. 또한 왼쪽으로 정렬되어 있어 텍스트가 이미지 옆에 나타납니다.

이미지에 링크를 추가할 수도 있습니다. 이미지 태그 주위에 링크 태그를 다음과 같이 넣기만 하면 됩니다:

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
이제 이 이미지를 클릭하면 홈페이지로 이동합니다:

이로 인해 텍스트 링크에서 보이는 파란색으로 이미지 주변에 테두리가 생길 수 있습니다. 이를 제거하려면 이미지 태그에 border="0"를 추가하세요. Tiny Pic.com에서 생성된 HTML에 이미지 태그 내부에 alt="Image and video hosting by Tiny Pic"가 포함되어 있는 것도 알 수 있습니다. 이는 이미지가 어떤 브라우저에서 제대로 표시되지 않을 경우 텍스트를 추가하는 데 사용할 수 있습니다. 대체 텍스트를 추가하면 검색 엔진 최적화(SEO)에도 도움이 될 수 있습니다.

이제 HTML에 대해 더 자신감이 생겼기를 바랍니다. 웹사이트에서 기술을 테스트할 수 있습니다. 하지만 잠재적으로 불완전한 HTML로 저장하기 전에 무료 서비스를 사용하여 HTML을 테스트하는 것을 권장합니다: onlinehtmleditor.net. 상단에 몇 가지 쉬운 HTML 버튼도 있어 도움이 됩니다. 이제 당신은 단지 당신의 도메인 아직 가지고 있지 않다면 오늘 바로 웹사이트를 시작하세요!

*참고로 font 태그는 더 이상 사용되지 않으며 모든 브라우저에서 올바르게 표시되지 않을 수 있습니다. 글꼴 스타일은 CSS에서 정의하는 것이 가장 좋으며, 이에 대해서는 나중에 블로그 글에서 다루겠습니다.

게시자 Robyn Norgan

Basic HTML - Getting Started with Your Website

<h1>가장 큰 헤더</h1>

<h6>가장 작은 헤더</h6>