HTML의 기본 구성 요소 중 하나는 단락입니다. 단락을 정의하려면 "<p>" 및 "</p>" 태그를 사용하십시오. 예를 들어:
<p>이것은 단락입니다. </p>
하이퍼링크는 다른 페이지나 사이트에 대한 링크입니다. "<a href=''>" 및 "</a>" 태그를 사용하여 href 속성이 링크의 URL을 지정하는 하이퍼링크를 만듭니다. 예를 들어:
<a href="https://www.jb51.net">링크입니다</a>
이미지는 페이지의 시각적 효과를 향상시키고 더 많은 정보를 전달할 수 있습니다. "<img src='' alt=''/>" 태그를 사용하여 이미지를 삽입합니다. 여기서 src 속성은 이미지 파일의 경로를 지정하고 alt 속성에는 이미지를 표시할 수 없을 때 표시되는 대체 텍스트가 포함됩니다. 예를 들어:
<img src="image.jpg" alt="아름다운 사진">
테이블은 웹 페이지에 데이터를 표시하는 기본 방법입니다. "<table>", "<tr>" 및 "<td>" 태그를 사용하여 각각 테이블, 행 및 셀을 정의합니다. 예를 들어:
<테이블> <tr> <td>첫 번째 행, 첫 번째 열</td> <td>첫 번째 행, 두 번째 열</td> </tr> <tr> <td>두 번째 행, 첫 번째 열</td> <td>두 번째 행, 두 번째 열</td> </tr> </table>
"<ul>" 또는 "<ol>" 태그를 사용하여 정렬되지 않은 목록이나 정렬된 목록을 만든 다음 "<li>" 태그를 사용하여 목록 항목을 정의합니다. 예를 들어:
<ul> <li>목록 항목 1</li> <li>목록 항목 2</li> </ul> <올> <li>목록 항목 1</li> <li>목록 항목 2</li> </ol>
양식은 사용자 입력을 수집하는 데 사용되는 구성 요소입니다. "<form>" 태그를 사용하여 양식을 생성하고 "<input>" 태그를 사용하여 입력 필드를 정의합니다. 예를 들어:
<form action="submit.php" 메소드="포스트"> <label for="username">사용자 이름:</label> <input type="text" name="사용자 이름" id="사용자 이름"> <label for="password">비밀번호:</label> <input type="password" name="password" id="password"> <입력 유형="제출" 값="제출"> </form>
CSS를 사용하여 웹페이지의 모양과 레이아웃을 제어할 수 있습니다. CSS 스타일은 "<style>" 태그를 사용하여 HTML 문서에 추가할 수 있습니다. 예를 들어:
<스타일>
몸 {
배경색: #f2f2f2;
}
h1 {
색상: 파란색;
텍스트 정렬: 중앙;
}
</style>위의 코드 조각은 HTML 언어의 빙산의 일각에 불과합니다. 그러나 기본적인 웹 페이지 구조와 스타일을 구축하는 데 도움이 될 수 있으며 더 많은 학습을 위한 영감을 얻을 수 있습니다. 이제 이 HTML 코드를 사용하여 자신만의 웹사이트를 만들어 보세요!
HTML5 문서 설명
<!DOCTYPE HTML>
위의 코드 블록은 HTML5 문서 선언으로, 현재 웹페이지가 HTML5 표준에 따라 작성되었음을 나타냅니다.
웹페이지 작성 시 반드시 웹페이지 상단에 HTML5 문서 선언을 작성해 주시기 바랍니다. 문서 선언을 작성하지 않으면 일부 브라우저에서는 이상한 모드로 진입하게 됩니다. 이상한 모드에 들어가면 브라우저가 페이지를 구문 분석하여 페이지가 정상적으로 표시되지 않습니다. 따라서 이 모드에 진입하지 않으려면 문서 명령문을 작성해야 합니다.
일반적으로 사용되는 문서 선언
HTML5
<!DOCTYPE HTML>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
참고: <!DOCTYPE>은 HTML 태그가 아닙니다. 이는 작성된 HTML 버전에 대한 정보(문)를 브라우저에 제공합니다.
일부 이전 페이지와 호환되도록 브라우저에는 두 가지 구문 분석 모드가 있습니다.
표준 모드 표준 모드
쿼크 모드(Quirks Mode) 이상한 모드
이상한 모드는 웹 페이지를 구문 분석할 때 예측할 수 없는 동작을 생성하므로 이상한 모드가 발생하지 않도록 해야 합니다.
파일 형식 <HTML></HTML>(파일의 시작과 끝 부분에 위치)
문서 제목 <TITLE></TITLE>("머리글" 블록에 배치해야 함)
헤더 <HEAD></HEAD>("주제"와 같은 설명 정보)
스타일 <BODY></BODY>(문서 본문)
제목 <H?></H?> (1~6까지 6단계 선택 가능)
제목 정렬 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
<DIV></DIV> 구별
차별화된 정렬 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
인용 블록 <BLOCKQUOTE></BLOCKQUOTE>(일반적으로 들여쓰기)
강조 <EM></EM> (보통 이탤릭체로 표시)
<STRONG></STRONG>에 대한 특별한 강조(보통 굵은 글씨로 표시)
인용문 <CITE></CITE> (보통 이탤릭체로 표시)
코드 <CODE></CODE>(소스 코드 표시용)
샘플<SAMP></SAMP>
키보드 입력<KBD></KBD>
변수<VAR></VAR>
<DFN></DFN> 정의(일부 브라우저에서는 제공되지 않음)
주소<ADDRESS></ADDRESS>
큰 문자<BIG></BIG>
작은 글씨<SMALL></SMALL>
굵은 글씨<B></B>
기울임체<I></I>
요점 <U></U> (일부 브라우저에서는 여전히 이를 제공하지 않습니다)
취소선 <S></S> (일부 브라우저에서는 아직 제공하지 않음)
아래첨자<SUB></SUB>
위첨자 <SUP></SUP>
타자기 <TT></TT>(단일 공백 글꼴로 표시)
미리 정의된 형식 <PRE></PRE>(파일의 공백 크기 유지)
미리 형식화된 형식 <PRE WIDTH=?></PRE>의 너비(문자 단위)
<CENTER></CENTER>로 정렬하세요(텍스트와 그림 모두 허용됨).
Shine <BLINK></BLINK> (역대 가장 조롱받는 태그)
글꼴 크기 <FONTSIZE=?></FONT>(1~7)
글꼴 크기 변경 <FONTSIZE=+|-?></FONT>
기본 글꼴 크기 <BASEFONTSIZE=?>(1~7, 기본값은 3)
글꼴 색상<FONTCOLOR="#$$"></FONT> ($$는 색상 코드입니다.)
1) 텍스처: <img src="이미지 주소">
2) 링크 가입 : <a href="연결할 관련 주소">하고 싶은 말을 적어주세요</a>
3) 새 창에서 링크 열기: <a href="관련 주소" target="_blank">하고 싶은 말을 적어주세요</a>
4) 모바일 폰트(marquee) : <marquee>자신이 쓰고 싶은 단어를 적어주세요</marquee>
5) 굵은 글씨 : <b>자신이 쓰고 싶은 단어를 적어보세요</b>
6) 이탤릭체 : <i>자신이 쓰고 싶은 단어를 적어주세요</i>
7) 글꼴 밑줄 : <u>내가 쓰고 싶은 단어를 적어주세요</u>
8) 글꼴 취소선: <s> 쓰고 싶은 단어를 적으세요</s>
9) 글꼴 크기 늘리기: <big>하고 싶은 말을 써 보세요</big>
10) 글꼴 크기 조절: <h1>쓰고 싶은 단어 쓰기</h1> (글꼴 크기는 h1-h5까지 가능하며, h1이 가장 크고, h5가 가장 작습니다)
11) 글꼴 색상 변경: <font color="#value"> 쓰고 싶은 단어를 입력하세요</font> (값은 000000~ffffff(16비트 16진수) 사이입니다.)
12) 연결의 밑줄 없애기 : <a href="Related address" style="text-꾸밈:none"> 쓰고 싶은 단어를 적어주세요</a>
13) 음악 게시: <embed src="Music address" width="Width" height="Height" autostart=false>
14) 플래시 붙여넣기: <embed src="flash address" width="width" height="height">
15) 비디오 파일 붙여넣기: <img dynsrc="file address" width="width" height="height" start=mouseover>
16) 줄 바꿈:<br>
17) 단락: <p>단락</p>
18) 원본 텍스트 스타일: <pre>텍스트</pre>
19) 게시물 배경 변경: <body background="배경 이미지 주소">
20) 게시물 배경이 스크롤 막대로 스크롤되지 않는 문제 수정: <body background="Background image address" bodybgproperties=fixed>
21) 게시물 배경색을 사용자 정의합니다: <body bgcolor="#value">(값은 10 참조)
22) 배경음악 게시: <bgsound="Background music address" loop=infinite>
23) 웹페이지 게시: <iframe.src="Related Address" width="Width" height="Height"></iframe>