プログラミング小僧のブログ

元消防士、プログラミング初心者

HTML&CSS Output

HTML&CSS

本日、朝の散歩後に学校で学習したのはJavaとHTML＆CSS。自宅学習ではHTML&CSSを中心にしたので、今日の記事はタイトルのとおりにします。

学校ではHTMLで表の、ラジオボタン、チェックボックスの作成を、CSSでフォント、配色、背景の設定について勉強しました。

HTMLという言語でWebページに文章、画像の貼り付けし、CSSで装飾を施します。

 

今日までに学校で習ったことの復習アウトプット

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="descriptoin" content="ただの自己紹介">
<title>自己紹介</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>Introduce</h1>
<a href="https://google.co.jp"><img src="DSC00395.JPG" alt="栗の実"></a>
今すぐ<a href="https://google.co.jp">Googleで検索</a>
<h2>メニュー</h2>
<h3>経歴</h3>
<h3>趣味</h3>
<h3>好きな食べ物</h3>
<h3>嫌いな食べ物</h3>

</body>
</html>
 
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="descriptoin" content="ただの経歴">
<title>経歴</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>経歴</h1>
<img src="DSC00387.JPG" alt="夕暮れ">
<a href="https://google.co.jp">Googleで夕暮れを検索</a>
<ul>
<li>水泳やってました</li>
<li>元消防士</li>
<li>プログラミング始めました</li>
<li>冷やし中華始めました</li>
</ul>
<p>冷やし中華の上の具材</p>
<ol>
<li>卵</li>
<li>ハム</li>
<li>きゅうり</li>
</ol>

</body>
</html>
 
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="ただの趣味">
<title>Document</title>
</head>

<body>
<h1>趣味</h1>
<table border="1">
<tr>
<th>何を</th>
<th>いつ</th>
<th>どうした</th>
</tr>
<tr>
<td>今日</td>
<td>始めました</td>
</tr>
<tr>
<td>餃子は</td>
<td>いつも</td>
<td>やってます</td>
</tr>
<tr>
<td>ラー油は</td>
<td colspan="2">手作りなんです</td>
</tr>
</table>
</body>

</html>
 
 
@charset "UTF-8";
body {
background-color:rgb(228, 199, 71);
}
h1 {
color:aqua;
}
p {
font-size: 20px;
}