간단한 HTML은 알지만 실제 템플릿 파일을 보면 잘 모르겠어요.목표는 HTML과 CSS에 대한 최소한의 지식을 습득하는 동시에 자신의 학습도 총결하는 것이다.
자세한 HTML 사양 설명을 원하시는 분은 그 전용 사이트를 보십시오.나는 이 보도를 쓸 때 참고로 한다.
http://www.htmq.com/html5/br.shtml
http://www.tohoho-web.com/html/index.htm
이 글에서 나는 화제를 자주 보지만 아직 잘 모르는 라벨에 집중해서 쓴다.솔직히 이런 기사를 보는 것보다 내가 쓰고 행동하는 것을 가장 기억하니 꼭 같이 보세요.먼저 자신이 만든 html 파일의 확인 방법을 설명한다.

HTML 파일 보기

우선 좋아하는 곳에서example.html라는 파일을 만들어 주세요.안에 헬로나 적당한 문자열을 쓰세요.브라우저(Safari에도 Chrome 등)에서 엽니다.넣은 것은 아래입니다.file:///(htmlファイルまでのパス)/example.html데스크톱에 example이 있습니다.html을 만든 다나카 씨라면file:///User/tanaka/Desktop/example.html이런 느낌.(이 일대는 솔직히 잘 어울린다)

이렇게 해서 그 브라우저에서 열면 hello라는 문자열이 나타날 것입니다.오류가 발생했을 때는 기본적으로 경로가 잘못된 것이므로 자세히 검사해 주십시오.

↑ 이런 느낌의 간단한 표현.만약 표시할 수 있다면, 이후에 적당히 여러 가지 라벨을 시도해 보세요.

HTML 태그

우선 용어의 설명이다.태그에 지정된 것을 속성이라고 합니다.
속성의 예는 <img> 라벨의 src 속성을 포함한다.이것은 사진을 표시하는 파일을 표시합니다.
예제 <img src="example.png">속성 중에는 대부분의 탭이 가지고 있는 전역 속성도 있고 id 속성 또는 style 속성도 있다.(뒤에 설명)
여기서부터 템플릿 등 자주 보지만 뜻을 이해하기 어려운 HTML 태그를 중심으로 소개한다.

<meta>

이 글의 메타 정보를 나타내는 것.charset 속성은 문자 인코딩을 지정합니다.name 속성과 content 속성은 집합에 이 글의 설명을 추가합니다.예를 들어 name가'auther'이면 content에 작가 이름을 넣고, name가'keywords'이면 content에 이 글을 설명하는 키워드를 넣는다.다른 것은name와 콘텐츠의 조합도 있지만 생략합니다.그리고 http-equiv 속성.
코드 예제<meta charset="Shift_JIS"> <meta name="author" content="tanaka">

<h1>

제목h1에서 h6까지 숫자가 작을수록 커진다.h7이 존재하지 않기 때문에 무시되어 일반적인 문자 크기가 됩니다.
코드 예제

<meta charset="utf-8">   ←文字化けする人はこれを入れる
<h1>h1 あいうえお</h1>
<h2>h2 あいうえお</h2>
<h3>h3 あいうえお</h3>
<h4>h4 あいうえお</h4>
<h5>h5 あいうえお</h5>
<h6>h6 あいうえお</h6>
<h7>h7 あいうえお</h7>

예제 표시

<br>

줄을 바꾸다html 파일의 줄 바꾸기를 반영하지 않도록 주의하십시오. (아래 예에서 aiueo와 123 사이에는 코드에 줄 바꾸기가 있지만 디스플레이에 줄 바꾸기가 없습니다.)
코드 예제

aiueo
123
<br>
hello

예제 표시

<ul>

순서가 없음을 나타내는 목록입니다.<li>는 컴포넌트를 나타냅니다.참고로 순서가 있는 목록 (ordered list) 사용 <ol> 입니다.사용 방법은 거의 같다.
코드 예제

<meta charset="utf-8">  ←文字化けする人はこれを入れる
<ul>
  <li>みかん
  <li>りんご
</ul>

예제 표시

태그 설명을 잠시 중지하고 CSS에 대해 설명합니다.

CSS 정보

간단하게 말하면 문장의 구조와 미관을 살릴 수 있는 컴퓨터 언어이다.문장을 보기 좋게 하는 언어를 스타일시트 언어(조형언어)라고 하는데, CSS는 대표적인 언어 중의 하나이다.
HTML에서 CSS를 사용하는 방법은 여러 가지가 있습니다.대표적인 것은 <style> 라벨을 사용하는 방법이다.

<style>

스타일시트를 설명하는 데 사용됩니다.
코드 예제

<style>
h5 { color:red }
</style>

<h4>h4 あいうえお</h4>
<h5>h5 あいうえお</h5>
<h6>h6 あいうえお</h6>

이렇게 하면 <style> 태그 둘러싸기에 스타일시트 언어를 씁니다.이번 예는 h5{color:red}의 줄은 CSS로 썼고, 문장의 <h5> 라벨은 빨간색이라는 뜻입니다.
예제 표시
<h5>의 부분이 빨갛게 변했다.
이어서 스타일시트를 설명하는 방법으로 라벨에 끼워 넣는 방법이 있다.

<div>

구역을 나누다.style 속성을 사용하여 레이블로 둘러싸인 범위의 페이지 레이아웃과 스타일을 지정합니다.
코드 예제<div style=" background-color:black; color:white;">あいうえお</div>예제 표시

또한 많은 탭에는 id 또는 class 같은 속성(전역 속성)이 있습니다.이것들은 모두 그 라벨을 명명해서 CSS로 이것을 지정하여 스타일링할 수 있다.
코드 예제

<style>
#id1 { color:red }
.class1 { background-color:black; color:white; }
</style>

<div id="id1">あいうえお</div>
<div id="id2">かきくけこ</div>
<div class="class1">さしすせそ</div>
<div class="class2">たちつてと</div>

예제 표시

style 내에서 id명을 사용할 때 사용#,class명을 사용할 때 사용.#id1과.class1를 주의하십시오.이 예에서 CSS는 id1이라는 id가 있는 위젯이나class1이라는 class 이름이 있는 위젯에만 적용됩니다.

<p>

단락을 나타내다.<p>~</p>로 둘러싸인 부분을 하나의 단락으로 간주합니다.이것도 style 속성이 있기 때문에 이 단락에만 스타일을 적용할 수 있고 id 속성이나 class 속성 등도 있다.
코드 예제

<style>
p.class1 { background-color:black; color:white; }
</style>

<p class="class1">あいうえお</p>
<div class="class1">かきくけこ</div>

예제 표시

CSS의 지정 방법으로서タグ名.クラス名(코드상 p.class1의 지정 방법을 사용할 수도 있습니다. 이로써 같은 클래스 이름이라도 라벨을 통해 지정을 변경할 수 있습니다.

<link>

문장과 관련된 링크를 표시합니다.rel 속성에서 이 문장의 관계를 나타내고 href 속성에 이 문장의 링크를 놓는다.예를 들어, rel="icon" 의 경우 href 에 아이콘이 있는 사진 파일, rel="stylesheet" 의 경우 href 에 해당 글에 적용하려는 CSS 파일 등을 배치합니다.
코드 예제<link rel="icon" href="example.ico"> <link rel="stylesheet" href="example.css">

<a>

링크를 붙이다.앵커의 약어.
코드 예제<a href="index.html">目次に戻る</a>예제 표시

<script>

JavaScript와 같은 스크립트와 블록을 포함하는 데 사용됩니다.type 속성은 스크립트 언어와 데이터 형식을 지정합니다.기본값은 type="text/javascript" 이며 자바스크립트를 사용할 때는 생략할 수 있습니다.src 속성은 스크립트 파일을 지정합니다.
코드 예제 <script src="./sample.js"></script>자바스크립트에서는 클릭 후 동작을 만들 수 있는 것들(투표 버튼을 누르면 투표 결과가 나오는 응용 프로그램 등)을 만들 수 있다.js 파일로 이걸 만들고 이 탭으로 기술하면 홈페이지에 그 프로그램을 삽입할 수 있습니다.
라벨도 있지만 여기까지.시간 나면 다시 기억할게요.