マークアップの練習

HTML基礎

HTMLで1番大事なのは正しい文章構造にマークアップ出来るか、です。
まずは文章をしっかりと読み、理解してからマークアップをし始めましょう。

アウトライン構造

アウトラインとは階層構造のことで、HTMLでのマークアップでは、このアウトラインを意識することが非常に重要になってきます。
webサイトを作る上でアウトライン構造は最も重要なポイントの1つです。自身の伝えたい内容が正しくアウトライン構造化されているか、外部ツールなどを使い必ず確認しましょう。

f:id:yachin29:20160601140359p:plain

HTML5 Outliner

HTML 5 Outliner

以下の文章を使って正しいアウトライン構造を作ってみましょう。

HTMLについて
HTML(HyperText Markup Language)とは、ウェブ上の文書を記述するためのマークアップ言語である。

HTML5
HTML5は、HTML4に代わる次世代のHTMLとして2008年1月に草案が発表され、2014年10月に勧告された新しいHTML仕様。

HTML5の新要素
header、nav、footerなどが新しい要素して加わりました。

header要素
header要素には文書全体に対するイントロダクションやナビゲーションなどを配置します。

nav要素
nav要素には、ナビゲーションを表します。そのサイト、またはページ内の移動で必要となる主要なリンクメニューのセクションで使用します。

XHTML
HTML 4.01をXMLにて再定義したもので、その仕様はHTMLと同じくW3Cによって勧告されている。

XHTMLで使われていた要素
div要素やp要素などが使われていました。

h1要素
h1要素とはサイト内で1番ランクの高い見出しを表します。

p要素
p要素とは文章中の1つの段落を表すことができます。

★うちのにゃんこ★

我が家のアイドル、にゃんこ達を紹介します!

我が家のにゃんこ紹介

飼い主紹介

猫写真募集

我が家のにゃんこ紹介

●すばる(白キジトラ・オス)

目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。

特徴:

大きな目と耳。まがったしっぽ。

性格:

マイペース。

●ぐれ子(灰色毛皮・メス)

生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。

特徴:

しゃがれ声。ゴロゴロすりすり攻撃。

性格:

甘え上手。腹黒。

●ねず子(白茶トラ・メス)

ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。

特徴:

片目。小顔。

性格:

プライド高い。人間に対しては女王様。

飼い主紹介

H.N. :

roka404

仕事 :

フリーランスでWeb関係のお仕事してます

mail :

info@hogehoge.com

Web :

http://www.hogehoge.com/

猫写真募集

ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ 10にゃんこ集まったら紹介ページを開設します!

Copyright © UCHI NO NYAN’S All Rights Reserved.

f:id:yachin29:20170130155328j:plain


使用画像
subaru

f:id:yachin29:20170130155315j:plain

gureko

f:id:yachin29:20170130155320j:plain

nezuko

f:id:yachin29:20180320202658p:plain

f:id:yachin29:20180320202708p:plain

f:id:yachin29:20180320202718p:plain

コメント

タイトルとURLをコピーしました