LotosLabo

プログラミング技術とか気になった情報を載せていきます

HTMLについて

HTMLとは?

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)とは、ウェブ上の文書を記述するためのマークアップ言語です。

書き方

HTML5をベースに載せていきます。

test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
内容を記入
</body>
</html>


HTML4.01ではこんなかんじ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>タイトル</title>
</head>
<body>
内容を記入
</body>
</html>


基本構造

<html>
</html> 

<html>から始まり</html>で終わります。


基本的に<>はタグと呼ばれ、タグは始まりと終わりを書かなければなりません。

<title>
タイトルが記入できます
</title>

<body>
ここに本文を書く
</body>

●基本的なタグ

段落

<h1>
<h2>
<p>



文字指定

・太字
<p>  <b>  あいうえお </b>  </p>

・斜体
<p> <i>  あいうえお </i> </p>

・下線
<p> <u>  あいうえお </u>  </p>

・削除線
<p> <s> あいうえお </s> </p>

・強調
<p><em> あいうえお </em> </p>

・より強い強調
<p><strong> あいうえお</strong></p>

・上付き文字
<p> <sup>あいうえお</sup> </p>

・下付き文字
<p><sub>あいうえお</sub></p>



フォント指定

HTML5では確か使用不可

フォント
<font face="MS P明朝"  size="6">あいうえお</font>

色
<font color= "red">赤色です</font>
<font color="#ff0000">赤色です</font>



ページ全体文字色

<body text="orange">



改行

<br>



テキスト位置

<h1 align="left">      左寄り
<h1 align="center">  中央寄り
<h1 align="right">   右寄り



背景色指定

<body bgcolor ="red">



背景画像

<body background="aiueo.jpg">



区切り指定

<hr></hr>



テキストスクロール

<marquee>スクロール</marguee>



テキストを記入された状態で表示

<pre>
あいうえお
</pre>



画像を表示

<img src = "aiueo.jpg">

サイズ
<img src ="aiueo.jpg width = "100" height = "300">

テキスト表示
<img src ="aiueo.jpg width = "100" height = "300" alt ="あいうえお">

枠をつける
<img src ="aiueo.jpg width = "100" height = "300" alt ="あいうえお" border="10">

位置
<img src ="aiueo.jpg width = "100" height = "300" alt ="あいうえお" border="10" align ="top">
align = "middle"
align = "bottom"

回り込み
align = "left"
align = "right"



リンク

画像
<a href ="URL"><img src="URL(画像)"></a>

テキスト
<a href = "url">あいうえお</a>

メール
<a href="mailto:メールアドレス"></a>

同じページ内へのリンク
<a href="#aiue">あいうえお</a>
<a name="aiue">あいうえお</a>

他のページ内へのリンク
<a href="test.html#aiue"></a>
<a name ="aiue"></a>



線を引く

<hr size = "5"> </hr>



リスト

記号のリスト
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>

記号の種類
<ul type="circle">
<ul type="square">


数字のリスト
<ol>
<li>あいうえお</li>
</ol>



コピーライトの表示

<address>コピーライト</address>



スタイル項目の使用

ボディ前に記述

<style>
body {color: #444444}

h1    {font-size: 1.25em;
          font-family:  sans-serif}

p       {font-size: 0.75em}
ul   
li
a
</style>

ボディ後

<body>
<h1 style="font-size: 2em">
あいうえお></h1></body>



テーブルの作成

<table>
<tr>  <td>1 </td>   <td>  3 </td>   </tr>
</table>


見出し
<tr> <th>1 </th> <th> 2 </th> </tr>


外枠の線
<table border ="1">

テーブルサイズ
<table border ="1"  width = "120" height ="120">


セルを横につなげる
<td colspan ="3"></td>

セルを縦につなげる
<td rowspan="3"></td>



フォームの作成

<form>

テキストエリア
<input type="text" name="namae">

ラジオボタン
<input type="radio" name="namae">

ボタン
OK
<input type="submit" value ="送信">

リセット
<input type="reset" value="クリア">

パスワードボックス
<input type="password" name="pass">

テキストエリアボックス
<textarea cols="30" rows="5" name="com">

チェックボックス
<input type ="checkbox" name ="check">

プルダウンボックス
<select name="aiue">
<option value="aiueo">あいうえお</option>
<option value="kakiku">かきくけ</option>
</select>

リストボックス
<select size="3"  name="list">
<option value="aiue">あいうえお</option>
<option value="kakiku">かきくけ</option>
</select>

</textarea>
</form>



埋め込みオブジェクト

<object data = "URL"  ,type = MIME , width =" 500" height="300">



要素グループ

<div></div>

<div id="container">
(名前をつける)

<span class>