らいふしふったー

20代後半の未経験がプログラミングに挑戦していくサイト。

プログラミング

HTMLとCSSについて学ぶ①

投稿日:2017年1月30日 更新日:

Pocket

こんばんは、HTMLとCSSを少しずつ学んで行こうと思っている信です。

今日は、「DIVE INTO CODE」のDIVERという教材を手に取りました。

 

Webサイトの仕組み

Webサイトには、静的なページと動的なページがあります。静的なものは管理者が更新しない限り内容が変わらないページ、動的なものは管理者が更新しなくても内容が変わっていくページです。

Webブラウザからリクエストしたものが、Webサーバにあるデータ(HTML,CSS,JSなど)をレスポンスされたものがWebサイトとして表示されます。

 

○HTMLとは:HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)

HTMLは、マークアップ言語と呼ばれるものです。Webサイト上に表示させる基本的な文章を構成したり、見出しや表をマークアップ(人間語が認識出来ない機械でも文書の構造が認識出来るように、文書の各要素に目印を与えて行く事)するために使われます。
基本的な文書だけを構成するためのものです。

とりあえずHTMLの全体像やルールを学んで行きましょう。
<>を囲んで宣言するものを要素と言います。(例:<○○>開始タグ  </○○>修了タグ)
○○の中に入る文字(要素)によって表示される意味が変化します。

いっぺんに覚えれないと思うので一つずつ理解して覚えてます。

 

※教材で使用されたもの完成モデル

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Achieve</title>
</head>
<body>
 <header>
 <ul>
 <li><a href="#">Achieve</a></li>
 <li><a href="#">トップページ</a></li>
 <li><a href="#">お問い合わせ</a></li>
 <li><a href="#">ブログ</a></li>
 </ul>
 </header>
 <section class="main-header">
 <img src="images-master/achieve.png">
 </section>
 <section class="about">
 <h2>About Achieve</h2>
 <p>
 Achieveは、受講生のために作成された、教材用アプリです。<br>
 Achieveを作り終えることで、SecondTeamに参加するための力を身につけることができます。
 </p>
 <p>
 Acheiveを一言で表すと、タスク管理アプリです。<br>
 チームメンバーが、今どのようなタスクを行っているかリアルタイムで把握することができます。
 </p>
 </section>
 <section class="function">
 <h2>Function</h2>
 <div class="function-images">
 <div class="function-image">
 <img src="images-master/key.png">
 <p>ログイン機能</p>
 </div>
 <div class="function-image">
 <img src="images-master/mails.png">
 <p>メール送信機能</p>
 </div>
 <div class="function-image">
 <img src="images-master/girls.png">
 <p>友達つながり機能</p>
 </div>
 <div class="function-image">
 <img src="images-master/comment.png">
 <p>コメント投稿機能</p>
 </div>
 </div>
 </section>
 <footer>
 <p>運営会社DIVE INTO CODE株式会社</p>
 <p>© 2015-2016 Copyright DIVE INTO CODE Corp.</p>
 </footer>
</body>
</html>

テスト

テスト

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

プログラミングスクールに2ヶ月通ってみて

no image

新しいことをやると疲れて逃げ出したくなる

no image

シェアハウスを決めた

こんにちは、今日は昨日の一日を踏まえて生きました信です。 今朝はすぐに外に出て朝から夕方までカフェで作業しました。 関連

no image

人的ネットワークを築く

no image

HTMLとCSSについて学ぶ②

こんにちは、今日もHTMLを勉強していました信です。 学びはパズルを作るのと似ています。 一つずつピースを集めて手持ちを増やす、今は分からないピースでも沢山集めたら揃えて繋がるものが出てくる。大きくな …