1. HTML 기본 구조 이해
- 웹 페이지의 기본적인 구조는 HTML 태그로 작성됩니다.
- HTML은 HyperText Markup Language의 약자입니다.
- 문서의 시작과 끝을 알리는 태그는 <html>과 </html> 입니다.
- 웹 페이지의 실제 내용이 들어가는 부분은 <body>와 </body> 태그 사이입니다.
- 웹 페이지의 제목을 정의하는 태그는 <title>과 </title>입니다.
- 메타데이터(데이터에 대한 데이터)를 제공하는 태그는 <head>와 </head>입니다.
2. 텍스트 작성하기
- 일단 기본 텍스트 작성법을 배워보자.
- HTML에서 텍스트는 <p> 태그를 사용해서 작성해야 한다.
- 태그란 HTML 요소를 감싸는 것을 의미한다.
- 각 문단은 <p> 태그로 시작해서 </p> 태그로 끝을 표시해야 한다.
- 텍스트를 굵게 표시하고 싶을 때에는 <b> 태그를 사용하면 된다.
- 텍스트를 이탤릭체로 표시하고 싶으면 <i> 태그를 사용하자.
3. 이미지 삽입하기
- 이미지를 삽입할 위치를 결정하고, 해당 위치에 이미지를 나타낼 img 태그를 작성합니다.
- img 태그의 src 속성에는 이미지 파일의 경로를 지정합니다.
- 이미지를 설명하는 alt 속성을 추가하여 이미지에 대한 대체 텍스트를 제공할 수 있습니다.
- width 및 height 속성을 사용하여 이미지의 크기를 조절할 수 있습니다.
- 옵션으로 title 속성을 통해 마우스를 올렸을 때 나타날 툴팁을 추가할 수도 있습니다.
4. 링크 추가하기
- 내용을 다른 페이지로 연결하는 하이퍼링크를 추가할 때에는 <a> 태그를 사용해야 한다.
- <a> 태그 내에 href 속성에 연결하고 싶은 페이지의 URL을 입력해야 한다.
- 링크에 텍스트를 추가하기 위해서는 <a> 태그 사이에 텍스트를 입력해야 한다.
- 이미지를 클릭했을 때 다른 페이지로 이동하려면 <a> 태그 안에 <img> 태그를 넣어야 한다.
5. 목록 만들기
- 필요한 재료: 순서를 나열한 대로 깔끔한 HTML 코드
- 예시 구조:
<html>
<head>
</head>
<body>
<ul>
<li>목록 항목 1</li>
<li>목록 항목 2</li>
</ul>
</body>
</html> - 상세 설명: 목록은 순서대로 나열된 내용을 시각적으로 나타내며, 이는 웹 페이지에서 정보를 구조화하는 데 유용하다. <ul> 태그는 순서가 없는 목록을 생성하며, <li> 태그를 사용해서 각 항목을 나타낸다.
6. 테이블 생성하기
- 먼저 ```<element>``` 태그를 사용하여 테이블을 열어줍니다.
- 다음으로 각 행을 나타내는 ```<tr>``` 태그를 추가합니다.
- 각 행 안에 셀을 정의하는 ```<td>``` 태그를 사용하여 데이터를 입력합니다.
- 필요에 따라 헤더 행을 추가하기 위해 ```<th>``` 태그를 활용할 수 있습니다.
- 테이블이 끝났다면 ```</table>``` 태그로 닫아줍니다.
7. 폼 만들기
- 폼 요소: 사용자로부터 정보를 수집하는데 사용되는 요소
- 텍스트 입력 필드: 단일 행으로 텍스트를 입력 받을 수 있는 필드
- 비밀번호 입력 필드: 비밀번호를 입력 받을 때 사용되는 필드
- 라디오 버튼: 여러 옵션 중에서 단 하나를 선택할 수 있는 버튼
- 체크 박스: 여러 옵션 중에서 여러 개를 선택할 수 있는 상자
- 드롭다운 목록: 미리 정의된 옵션 중에서 하나를 선택할 수 있는 목록
- 제출 버튼: 폼을 서버로 제출하는 버튼
8. 퍼블리싱 기본 개념
- 퍼블리싱(Publishing): 디자인된 페이지를 개발자가 웹 페이지로 만드는 작업.
- HTML(HyperText Markup Language): 웹 문서의 구조를 정의하는 언어.
- CSS(Cascading Style Sheets): HTML 문서의 스타일이나 레이아웃을 꾸미는 언어.
- 웹 레이아웃(Web Layout): 웹 페이지의 구조와 요소들을 정렬하고 배치하는 것.
- 영역 구분(Sectioning): 웹 페이지를 논리적인 영역으로 구분하여 가독성을 높이는 것.
9. 웹사이트 배포하기
- 웹 호스팅 업체를 선택한다.
- 도메인을 등록하고 구입한다.
- FTP 프로그램을 사용하여 호스팅 서버에 연결한다.
- 제작한 웹페이지 파일을 호스팅 서버에 업로드한다.
- 도메인과 호스팅 서버를 연결한다.
- 웹 브라우저에서 도메인을 입력하여 웹사이트를 확인한다.
'좋은글들' 카테고리의 다른 글
| 유명산 자연 휴양림 - 자연 속 힐링을 경험해보세요 (0) | 2024.07.31 |
|---|---|
| 자연의 소박한 아름다움 (0) | 2024.07.31 |
| 나를 사랑하는 법과 중요성 (0) | 2024.07.30 |
| Github 홈페이지 만들기 - 초보자를 위한 단계별 안내서 (0) | 2024.07.30 |
| 에브리 씽 에브리 웨어 올 앳 원스 - 인기 있는 패션 브랜드 소개 (0) | 2024.07.29 |