[HTML5&CSS] HTML5 기본 구조

처음 doc type을 정한다. HTML5부터는 매우 심플하다.

<!DOCTYPE HTML>

 

HTML 태그로 시작한다. lang attribute로 어느 언어인지를 명시한다.

<html lang=”en”></html>

 

html 태그 안에는 head와 body가 들어간다.

먼저 head 안에 들어갈 내용을 살펴보자.

head의 필수 태그는 title이다. title 태그 전에 meta 태그로 charset을 명시해준다.

meta 태그로 해당 페이지의 description을 적어주면 좋다.

meta 태그로 디바이스의 width와 초기 scale로 viewport도 적어준다.

<head>

<meta charset=”utf-8″>

<title>DasomOLI’s example1</title>

<meta name=”description” content=”The purpose of this page is for showing a example of HTML5 basic structure”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

</head>

 

body 태그 안엔 보일 내용을 내용의 목적에 맞는 태그를 사용해서 적는다.

대표적인 태그는 제목을 적을 때 사용하는 heading <h1>, <h2> 등의 태그와 리스트를 작성할 때 사용하는 unordered list <ul>, ordered list <ol>, 그리고 그 아래 항목을 적을 때 사용하는 list item <li>, 문단을 작성할 때 사용하는 paragraph <p> 태그 등이 있다.

<body>
<h1>DasomOLI’s example1</h1>
<p>Hello HTML5!</p>
</body>

모두 합치면 다음과 같을 것이다.

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <metacharset=”utf-8″>
    <title>DasomOLI’s example1</title>
    <metaname=”description”content=”The purpose of this page is for showing a example of HTML5 basic structure”>
    <metaname=”viewport”content=”width=device-width, initial-scale=1″>
  </head>
  <body>
    <h1>DasomOLI’s example1</h1>
    <p>Hello HTML5!</p>
  </body>
</html>

완성된 html 은 w3c에서 제공하는 validator (https://validator.w3.org/)를 통해 유효성을 검사할 수 있다.

 

moniwiki 설치

글 정리할 때 익숙한 건 역시 moniwiki다. 다시 설치하려니 github로 옮겨가고, wikiseed 심는 것도 따로 프로젝트를 따로 뒀던데 다시 설치하는 절차를 정리한다.

설치하려는 디렉토리 아래(난 /var/www/)에서 git clone

[code]
git clone https://github.com/wkpark/moniwiki.git
chown -R www-data:www-data moniwiki
cd moniwiki/
git clone https://github.com/wkpark/moniwiki-wikiseed.git wikiseed
cd theme/
git clone https://github.com/wkpark/moniwiki-theme-paper.git paper
git clone https://github.com/wkpark/moniwiki-theme-bootstrap3.git bootstrap3
git clone https://github.com/wkpark/moniwiki-theme-publish.git publish
[/code]

브라우저에서 monisetup.php 접속

  1.  $sitename 설정
  2.  $admin_passwd 설정
  3.  $use_sectionedit 설정
  4.  “Sow wikiseed” 로 wiki seed 심기

추가로 config.php 에서 고치기

http://blog.dasomoli.org/240 참고

쉘에서 secure.sh 실행

[code]
sh secure.sh
[/code]

apache2 설정

/etc/apache2/sites-available/moniwiki.dasomoli.org.conf

[code]
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request’s Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName moniwiki.dasomoli.org

<Directory /var/www/moniwiki>
Options FollowSymLinks
AllowOverride None
Require all granted
</Directory>

ServerAdmin dasomoli@gmail.com
DocumentRoot /var/www/moniwiki

# Available loglevels: trace8, …, trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn

ErrorLog ${APACHE_LOG_DIR}/moniwiki_error.log
CustomLog ${APACHE_LOG_DIR}/moniwiki.access.log combined

# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with “a2disconf”.
Include conf-available/serve-cgi-bin.conf
</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
[/code]

moniwiki 디렉토리에 index.html 생성

/var/www/moniwiki/index.html

[code]
<html>
<head>
<meta http-equiv=”refresh” content=”0; url=./wiki.php”>
</head>
<body onload=”javascript:window.location=’./wiki.php'”>
Please follow <a href=”wiki.php”>this link</a>
</body>
</html>
[/code]

HTML 자동 이동 – meta refresh

<html>

<head>

<meta http-equiv=”refresh” content=”0; url=./index.php”>

</head>

<body onload=”javascript:window.location=’./index.php'”>

Please follow <a href=”index.php”>this link</a>

</body>

</html>

참고: https://en.m.wikipedia.org/wiki/Meta_refresh