写経です！③bodyタグの中へその２
みなさんこんには( ^ω^ )
前回まででbodyタグの中に入っているタグのよく使うやつ
下記の６個みてきました。
１・h1〜h6 ２・p ３・pre ４・ul ５・ol ６・li
うーん全然いけそうかもと。
あともう少しみていこうと思います。
７・dl
ディーエル・・・definition listsの略リストを定義するためのタグ。
<dl>～</dl>には<dt>タグ、<dd>タグだけしかつかえません。
olやulと同じ感じでリストを挟んで定義します。
８・dt
ディーティー・・・Definition Termの略。リストの項目を定義するためのタグ。
olやulの「番号や●」の部分を説明の項目として書きたい時はdtを使って書きます。
９・dd
ディーディー・・・Definition Descriptionの略。リストの内容を書くためのタグ。
liと同じようにリストの内容を書いていきます。
10・table
テーブルタグ・・・表であることを示すタグ。
table＞th||tr>tdの順でネストになります。
11・th
ティーエイチタグ・・・Table Hederの略。表のヘッダーであることを示すタグ。
td要素の代わりにこの要素を使用すると、そのセルが見出しとして表示されます。
thの中tdが入ります。
12・tr
ティーアール・・・Table Rowの略。横1列を示します。
trの中にtdが入ります。
13・td
ティーアール・・・Table Dataの略。セルのデータを示します。
14・div
・・・複数要素をブロック化してまとまりであることを表す。
dev自体に意味があるわけではなくまとまりを示すための箱として使う。
もうちょいいけそうなので続きは次回書いていきます。
前回まででbodyタグの中に入っているタグのよく使うやつ
下記の６個みてきました。
１・h1〜h6 ２・p ３・pre ４・ul ５・ol ６・li
うーん全然いけそうかもと。
あともう少しみていこうと思います。
７・dl
ディーエル・・・definition listsの略リストを定義するためのタグ。
<dl>～</dl>には<dt>タグ、<dd>タグだけしかつかえません。
olやulと同じ感じでリストを挟んで定義します。
８・dt
ディーティー・・・Definition Termの略。リストの項目を定義するためのタグ。
olやulの「番号や●」の部分を説明の項目として書きたい時はdtを使って書きます。
９・dd
ディーディー・・・Definition Descriptionの略。リストの内容を書くためのタグ。
liと同じようにリストの内容を書いていきます。
10・table
テーブルタグ・・・表であることを示すタグ。
table＞th||tr>tdの順でネストになります。
11・th
ティーエイチタグ・・・Table Hederの略。表のヘッダーであることを示すタグ。
td要素の代わりにこの要素を使用すると、そのセルが見出しとして表示されます。
thの中tdが入ります。
12・tr
ティーアール・・・Table Rowの略。横1列を示します。
trの中にtdが入ります。
13・td
ティーアール・・・Table Dataの略。セルのデータを示します。
14・div
・・・複数要素をブロック化してまとまりであることを表す。
dev自体に意味があるわけではなくまとまりを示すための箱として使う。
もうちょいいけそうなので続きは次回書いていきます。
写経です！②bodyタグの中へ
みなさんこんには( ^ω^ )
なんとなくHTMLの大枠が見えてきたので
前回の中で挟み込んで書く文章はbodyタグの間に書いていく。
ここまではわかったので。
つぎはbodyタグの中で使うタグを見ていこうっと。
HTML5のタグが109個 2012年時点
ちなみにHTMLやCSSはW３Cという団体がその規格を決定しているようなので
正式なものはそこからみた方がいいですね。
うーん。。。
山のようにあるのですね。
無理です。。。
もう少しすくなくしてくれないかな。
いや少なくしよう。みなかったことにしよう。。。
許してください。
ということで、「初心者 スペース HTML タグ」
でgoogleさんに再度きいてみました。
そうするとちゃんとあるじゃないですか
初心者が（強調）！！覚えるべきタグに的をしぼっているブログやサイトが( ´ ▽ ` )ﾉ
ということでまずは「初心が覚えるべく第１段」
書いてはchromeのリロードを繰り返して表示のされ方を確認します。
①h1〜h6
・・・見出しのためのタグ。h１が最重要で数字が大きくなるにつれて重要度が下がる。
②p
ピータグ・・・paragraph(段落)ですね。
③pre
プレタグ・・・paragraph(段落)ですね。空白や改行なんかも含めてそのままを表示してくれます。
wordやメールの本文なんかも含めてそのまま貼り付けてこのタグで囲んじゃえばいいのです。
④ul
ユーエル・・・unorder list略。リスト頭に１、２、３などの行番をつけないリストの場合で頭に●
をつけて表示してくれる。ulの中にliをいれて使う。
⑤ol
オーエル・・・order list。リスト頭に１、２、３などの行番をつけて表示してくれる。
olの中にliをいれて使う、
⑥li
エルアイ・・・listの略。ul、olとともに使う。実際のリストはliで挟まれた文章がlistになって表示される。
最初はむちゃくちゃいっぱいあってむりじゃん。
っておもったけど整理してよく使うの見てみるとわりかしそんなに難しくないかもと
じゃっかん思えてきた今日この頃です。
次回はもうちょっとタグについてみていきます。
なんとなくHTMLの大枠が見えてきたので
前回の中で挟み込んで書く文章はbodyタグの間に書いていく。
ここまではわかったので。
つぎはbodyタグの中で使うタグを見ていこうっと。
HTML5のタグが109個 2012年時点
ちなみにHTMLやCSSはW３Cという団体がその規格を決定しているようなので
正式なものはそこからみた方がいいですね。
うーん。。。
山のようにあるのですね。
無理です。。。
もう少しすくなくしてくれないかな。
いや少なくしよう。みなかったことにしよう。。。
許してください。
ということで、「初心者 スペース HTML タグ」
でgoogleさんに再度きいてみました。
そうするとちゃんとあるじゃないですか
初心者が（強調）！！覚えるべきタグに的をしぼっているブログやサイトが( ´ ▽ ` )ﾉ
ということでまずは「初心が覚えるべく第１段」
書いてはchromeのリロードを繰り返して表示のされ方を確認します。
①h1〜h6
・・・見出しのためのタグ。h１が最重要で数字が大きくなるにつれて重要度が下がる。
②p
ピータグ・・・paragraph(段落)ですね。
③pre
プレタグ・・・paragraph(段落)ですね。空白や改行なんかも含めてそのままを表示してくれます。
wordやメールの本文なんかも含めてそのまま貼り付けてこのタグで囲んじゃえばいいのです。
④ul
ユーエル・・・unorder list略。リスト頭に１、２、３などの行番をつけないリストの場合で頭に●
をつけて表示してくれる。ulの中にliをいれて使う。
⑤ol
オーエル・・・order list。リスト頭に１、２、３などの行番をつけて表示してくれる。
olの中にliをいれて使う、
⑥li
エルアイ・・・listの略。ul、olとともに使う。実際のリストはliで挟まれた文章がlistになって表示される。
最初はむちゃくちゃいっぱいあってむりじゃん。
っておもったけど整理してよく使うの見てみるとわりかしそんなに難しくないかもと
じゃっかん思えてきた今日この頃です。
次回はもうちょっとタグについてみていきます。
写経です！①htmlの構造から
みなさんこんには( ^ω^ )
HTMLからのスタートでいきなりつまずきましたが、
とりあえず書き始めるこれが大事ですね。
HTMLに限らず、なんかうまく説明するよりかも
覚えた方が早いよね。。。的なことがよくあるんですね。
こういうのをプログラミングの世界では「おまじまない」っていうんですね。
◯HTMLの構成
下記が大きな構成になっているのようです。
HTMLを書くときにはまずはじめにここから書くようです。
ちゃかちゃか写経します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
◯タグの説明
< >開始タグと 終了タグ
この間に文章を挟むのが一般的なHTMLのマークアップ。
＜DOCTYPE! HTML＞
…HTML５ではここからHTMLがはじまるよという宣言だそうです。
ここはいわゆるおまじないの部分です。
これには終了タグがありません。
<html lang="ja">
htmlタグ・・・これの中に各種のタグを書いていきます。
lang→languag(言語)
"ja"→japanese(日本語)
というのが定義されています。
</head>
ヘッドタグ・・・この中にブラウザ上には表示されないが重要な情報が書かれます。
特に必ずあるものは下記参照。
<meta charset="UTF-8">
charaset→文字のコードをセットしますよ。
UTF-8→標準的に使われている日本語に対応した文字コード。現在はほとんどこれです。
<title>
タイトルタグ・・・読んで字のごとくですがこのページのタイトルを決めるタグです。
タイトルと書いてあるので僕は最初ここがWEBページのタイトル部分だと思っていましたが
WEBのブラウザ上には基本的には表示されません。
ただchromeのタブんお部分に記載されている文字はこのタイトルタグで囲まれている部分です。
ただし、あなどってはいけないのが、WEBページには表示されないが、よくいうSEO的には非常に
重要なタグになっているようです。
googleさんがこのWEBページを見たときにこのページは何書いてあるんだろうと判断するのが
このタグに挟まれている部分なのです。
目立たないけど頑張り屋さん的な立ち位置なのですね。
<body>
ボディタグ・・・いわゆるWEBページに表示させるページなんですね。
この間になにか文字を打って、そのテキストをブラウザに表示させると
文字がブラウザ上に表示されます。
なので最初にでてきたはさみこんでいく文章はここから書くのですね。
あっやっとなんかすっきりしてきた。
次は<body>タグの中にあるいろいろなタグについて勉強していこうっと！
HTMLからのスタートでいきなりつまずきましたが、
とりあえず書き始めるこれが大事ですね。
HTMLに限らず、なんかうまく説明するよりかも
覚えた方が早いよね。。。的なことがよくあるんですね。
こういうのをプログラミングの世界では「おまじまない」っていうんですね。
◯HTMLの構成
下記が大きな構成になっているのようです。
HTMLを書くときにはまずはじめにここから書くようです。
ちゃかちゃか写経します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
◯タグの説明
< >開始タグと 終了タグ
この間に文章を挟むのが一般的なHTMLのマークアップ。
＜DOCTYPE! HTML＞
…HTML５ではここからHTMLがはじまるよという宣言だそうです。
ここはいわゆるおまじないの部分です。
これには終了タグがありません。
<html lang="ja">
htmlタグ・・・これの中に各種のタグを書いていきます。
lang→languag(言語)
"ja"→japanese(日本語)
というのが定義されています。
</head>
ヘッドタグ・・・この中にブラウザ上には表示されないが重要な情報が書かれます。
特に必ずあるものは下記参照。
<meta charset="UTF-8">
charaset→文字のコードをセットしますよ。
UTF-8→標準的に使われている日本語に対応した文字コード。現在はほとんどこれです。
<title>
タイトルタグ・・・読んで字のごとくですがこのページのタイトルを決めるタグです。
タイトルと書いてあるので僕は最初ここがWEBページのタイトル部分だと思っていましたが
WEBのブラウザ上には基本的には表示されません。
ただchromeのタブんお部分に記載されている文字はこのタイトルタグで囲まれている部分です。
ただし、あなどってはいけないのが、WEBページには表示されないが、よくいうSEO的には非常に
重要なタグになっているようです。
googleさんがこのWEBページを見たときにこのページは何書いてあるんだろうと判断するのが
このタグに挟まれている部分なのです。
目立たないけど頑張り屋さん的な立ち位置なのですね。
<body>
ボディタグ・・・いわゆるWEBページに表示させるページなんですね。
この間になにか文字を打って、そのテキストをブラウザに表示させると
文字がブラウザ上に表示されます。
なので最初にでてきたはさみこんでいく文章はここから書くのですね。
あっやっとなんかすっきりしてきた。
次は<body>タグの中にあるいろいろなタグについて勉強していこうっと！
HTMLからスタート
みなさんこんには( ^ω^ )
まずはHTMLからスタートしていこうと思います。
その前に使っているツールは以下になります。
◯google chrome
ご存知のgoogle chrome! webサイトの構築をしたり、プログラミングをするのであれば
ディベロッパーツールがあるchromeがおすすめです。
また何か調べものをしたりする際もショートカットキーの多様Gmaiとの連携のおかげで
学習が捗るためには欠かせないツールです。
◯sublime text2
最近人気のテキストエディターでプログラマーさんやWEBデザイナーさんからも大人気のエディター。
軽くてプラグインが非常に多いのが人気のポイントです。
コードを保管機能やemmet(zencodding)FTTP連動など多彩な機能を備えています。
◯HTMLとは
現在はHTML５が主流のWEBページの文章構造を規定するもので
プログラミング言語ではなくマークアップ言語とよばれるものいうこと。
ふむふむ。
なんのこっちゃ。
マークアップ言語とは文章をタグ＜＞というものでハサミ混んで
文章の意味を定義してあげるものという。。。。
ようするに書いた文章をタグ<>ではさめばいいんだね。
そっか。そっか。
じゃーやったろうじゃないか。
まずはテキストエディターを開きます。
sublime text２！！見た目かっこいい！！
を開きます。
それではいよいよかき始めちゃうよ。
準備はいいかい。
はじめのいいーーーっぽ！って。
おーい！はさみこんで＜＞なかにはいってるの
意味わかんないよ〜。
実は一番最初のここからひっかりました。
文章を挟み込むって言ったじゃん。
DOCTYPE! HTML←文章じゃないじゃん！！
という思いをぐっと噛み締めて書き始めました。
あー先が思いやられるな。。。。
まずはHTMLからスタートしていこうと思います。
その前に使っているツールは以下になります。
◯google chrome
ご存知のgoogle chrome! webサイトの構築をしたり、プログラミングをするのであれば
ディベロッパーツールがあるchromeがおすすめです。
また何か調べものをしたりする際もショートカットキーの多様Gmaiとの連携のおかげで
学習が捗るためには欠かせないツールです。
◯sublime text2
最近人気のテキストエディターでプログラマーさんやWEBデザイナーさんからも大人気のエディター。
軽くてプラグインが非常に多いのが人気のポイントです。
コードを保管機能やemmet(zencodding)FTTP連動など多彩な機能を備えています。
◯HTMLとは
現在はHTML５が主流のWEBページの文章構造を規定するもので
プログラミング言語ではなくマークアップ言語とよばれるものいうこと。
ふむふむ。
なんのこっちゃ。
マークアップ言語とは文章をタグ＜＞というものでハサミ混んで
文章の意味を定義してあげるものという。。。。
ようするに書いた文章をタグ<>ではさめばいいんだね。
そっか。そっか。
じゃーやったろうじゃないか。
まずはテキストエディターを開きます。
sublime text２！！見た目かっこいい！！
を開きます。
それではいよいよかき始めちゃうよ。
準備はいいかい。
はじめのいいーーーっぽ！って。
最近はじめました。
最近プログラミングをはじめました。
世の中では技術革新が目覚ましく、今後の必須スキルではないかなとずっと思っていましたが、
やっぱり難しそうっという気持ちが先行して何年も勉強を放置していました。
でもやっぱりチャレンジしたいという気持ちと仕事も営業から事務方に変わり少し肉体的にも精神的にも余裕が出たのでそろそろだろうということで１ヶ月前からスタートしました。
パソコン自体はもともと好きなこともあるのでもしかしたら割とスムーズにいくのではないかと期待をしていたのですが。。。
やっぱりプログラミングはそんなに甘いものではなかったです。
でも今回は諦めずやっていこうと思いますのでこのブログ内でも
日々の気づきやトレンドを含めながら僕のプログラミング状況に関しても
随時報告していきたいと思います。
僕の中ではまずはweb関連に興味があったので
HTMLやCSSやJavascriptなどのWEBサイトの作成に関わるところから
スタートしようと思っていました。
その時にはまだHTMLとCSSとJavascriptがどういう言語で違いがなんなのかということも
説明できないし、認識もできていませんでしたが。
まず初めに独学でどうやって勉強をするのかをネットでgoogって調べてみました。
結構いろんな方がブログで自分の勉強方や、おすすめの書籍やサイト、動画などを
紹介しているのでびっくりしました。
こんなに独学で勉強しているひとっているのだなぁと感心です。
そこで僕もその中からいくつかピックアップをして勉強することに
ちなみ「dotinstall」,「schoo」の動画から入るとすごく分かりやすいかったです。
なかなか最初のうちは文字で見ても書いてあることがまるでわからない状態なので
プログラミング初心者の心得は動画で基礎を習得せよですね。
動画で実際にエディターで記述してブラウザで表示してみるというような一通りのながれと
その記述の解説もしてくれるのでほぼみれば内容は把握できますね。
まずは動画マニアのようにひたすら見るべし繰り返し見るべし笑![[パンチ]](https://blog.ss-blog.jp/_images_e/153.gif)
それでもわからない部分はネットでググって調べるというところですね。
まずはこれでスタートを切れました。
次回はどんな内容を次回は具体的な勉強内容です。
世の中では技術革新が目覚ましく、今後の必須スキルではないかなとずっと思っていましたが、
やっぱり難しそうっという気持ちが先行して何年も勉強を放置していました。
でもやっぱりチャレンジしたいという気持ちと仕事も営業から事務方に変わり少し肉体的にも精神的にも余裕が出たのでそろそろだろうということで１ヶ月前からスタートしました。
パソコン自体はもともと好きなこともあるのでもしかしたら割とスムーズにいくのではないかと期待をしていたのですが。。。
やっぱりプログラミングはそんなに甘いものではなかったです。
でも今回は諦めずやっていこうと思いますのでこのブログ内でも
日々の気づきやトレンドを含めながら僕のプログラミング状況に関しても
随時報告していきたいと思います。
僕の中ではまずはweb関連に興味があったので
HTMLやCSSやJavascriptなどのWEBサイトの作成に関わるところから
スタートしようと思っていました。
その時にはまだHTMLとCSSとJavascriptがどういう言語で違いがなんなのかということも
説明できないし、認識もできていませんでしたが。
まず初めに独学でどうやって勉強をするのかをネットでgoogって調べてみました。
結構いろんな方がブログで自分の勉強方や、おすすめの書籍やサイト、動画などを
紹介しているのでびっくりしました。
こんなに独学で勉強しているひとっているのだなぁと感心です。
そこで僕もその中からいくつかピックアップをして勉強することに
ちなみ「dotinstall」,「schoo」の動画から入るとすごく分かりやすいかったです。
なかなか最初のうちは文字で見ても書いてあることがまるでわからない状態なので
プログラミング初心者の心得は動画で基礎を習得せよですね。
動画で実際にエディターで記述してブラウザで表示してみるというような一通りのながれと
その記述の解説もしてくれるのでほぼみれば内容は把握できますね。
まずは動画マニアのようにひたすら見るべし繰り返し見るべし笑
それでもわからない部分はネットでググって調べるというところですね。
まずはこれでスタートを切れました。
次回はどんな内容を次回は具体的な勉強内容です。
