본문 바로가기

IT- 컴퓨터 기초

Html 배우기

 CSS를 함께 사용하여 페이지를 만들 때 그래도 html 태그를 조금 더 알 고 있으면 만드는데 조금은 쉬울 것입니다.

제작을 위하여 HTML(hyper makup llanguafe)의 명령어를 조금 배워야 됩니다.

홈페이지 제작은  제일 위 시작을 알리는 <html>입력으로 작업을 시작 합니다.

HTML 문법은 기호< >를  시작을 나타내고 마침은 </> 을 의미합니다.

기호 속에 태그 명령어를 담아 표현됩니다.

<html >  홈페이지 시작

<head > 헤더 시작

</head> 
<body > 몸체 부분

</body >
</html > 홈페이지 끝 

창 타이틀이나 크기, 기본 경로 들을 설정하며

창 분할등으로 자신의  의도를 형식에 맞게 명령어로 나타냅니다.

<title> 문장</ title >

글꼴의 크기는  <h 숫자> 문장 </h>

숫자는 1 ~ 6까지며 숫자가 6이면 제일 작은 크기며 1이 제일큰 크기입니다.

글자의 위치 정렬은  왼쪽 오른쪽 가운데로 위치를 나타냅니다.

left , center, right

대한민국을  굵게 , 나라사랑을 중심에 나타내려는 형식은 

<H1 >대한민국  </H1>

<H3 align=center> 나라사랑 </H3>

색상을 나타내는 형식은 

<font color = 색상 값> 문장 </font>

글꼴  형식.

<font face= " 서체 이름"  </font>

문단 정렬

문장을  여려 줄로 입력할 때 전체를 어느 위치에 보일 것인가를 나타냅니다.

Left, center, right

 <DIV ALIGN =  위치>  문단 </div>

 <DIV ALIGN =  left>   </div>

홈페이지의 문장( 한 줄)은 자판의 Enter로 줄바꿈을 하지 않고

<br> </br>   ,<p> </p> <pre> </pre> 형식으로

문단  한줄 한줄도 어떤 모양으로 나타낼 것인지 태그로 명령합니다.

<br> 해당 위치에서 enter을 1번 한 것과 같다. 

<P> 해당 위치에서 enter을 2번 한 것과 같다.

<pre> 문단 서두에 <pre>를 입력하면 문단 전체를 입력한 모양 그대로 나타내 줍니다.

문장 전체를 어느 위치에 둘 것인가도  태그 <  LEFT /RIGHT / CENTER> 로 명령합니다.

<P ALIGN = LEFT /RIGHT / CENTER> 문장  < /p>

★ 문서 리스트 만들기

UL   ... OL     

문서에 항목 리스트를 만들려면 UL은 순서 없는 목록을 나타내는 태그.

OL은 순서 있는 목록을 만드는 태그입니다.

목록에서 순서를 나타낼 때는 LI 태그를 명령하고 사용할 기호 모양을 저정합니다.

disk, circls , square   ●○■

< UL TYPE = disk /circle /square>

<LI TYPE = disk > 항목명 

</UL>

순서 있는 목록 형식

<OL TYPE =A/a/I/i/1 START = 숫자>

< LI TYPE =A/a/I/i/1 START = 숫자> 항목명

</OL>

★  표형식 그림 나타내기 

그림을 나타낼 때 배경, 테두리, 선 등을 태그로 설정할 수 있습니다.

이미지도 하나 또는 다수를 나타낼 때 어떤 모양으로 배치 시킬 것인가도 태그로 명령합니다.

그림을 하나의 사각형 안에 나타내려면 사각형 즉 테두리 굵기, 색갈, 배경색을 지정할 수 있습니다,

그리고 여러 그림을 넣으려면 그림사이 간격도 태그로 명령합니다.

기본 형식은

<img src = " 그림 파일명"> 

표 형식 

<table border = 숫자 

bgcolor ...배경색

cellpadding ... 표 내부 여백 

cellspacing ... 셀 내부 간격

align ... 좌우 정렬

valign ... 상하 정렬

< tr .... 새로운 행을 만든다.

< td    ....데이터 셀을 만든다 

< th ... 제목 셀을 만든다.

  rowspan =숫자 ... 행을 숫자 만큼 합친다.

colspan= 숫자 ... 열을 숫자 만큼 합친다.

그림의 가로  세로 크기를 나타낼 때는

<img src = " 그림 파일명" width = 200 height = 300 > 

그림을 표안에 놓는 모양을 할 때는 border태그 

<img src = " 그림 파일명. jpg" border =5  width = 200 height = 300 > 

 

★  링크  나타내기 

기본 형식은 <a href = url> 문장 < /a>

★  창 분할   나타내기 

창분할은 창을 나누어질 방향과 비율을 명령한다.

기본형식은

<frameset  cols = " 30%, 70%"> 또는 

 <frameset  rows = " 30%, 70%">

홈페이지를 만들기 위하여 메모장을 이용하게 될때

메모장에 입력하려면 입력하는 규칙이 있습니다.

예를 들어 ,홈페이지 시작을 알리려면

<html> 로 시작을 명령하고 페이지 끝에 < /htnl> 이렇게  꺽쇄 안에 / 기호를 넣어 마감을 나타냅니다.

홈페이지의 제목을 나타내려면

< head>를 입력하면 제목을 나타내려는 명령이구나!! 캄퓨터는 읽어 들입니다. 마감 태그는 </head>

,그런데 제목의 글자 크기, 색갈,글꼴 등 디테일하게 보이려면 

나타내려는 것에 대한 명령어를 알고 있어야 됩니다.

외울필요는 없고 필요할 때 검색으로 방법을 알아내서 태그를 작성하면 됩니다.

'IT- 컴퓨터 기초' 카테고리의 다른 글

CSS 시트 만들기  (0) 2024.01.17