【HTML入門】21個のタグを紹介！わかりやすくHTMLの基本を解説します〜初心者向け〜
HTML-код
- Опубликовано: 11 июл 2024
- Pythonプログラミングに関する情報を発信しているサプーです！
この動画はHTMLの基本について解説しています。
・HTMLとは？
・基本的なタグの使い方
これらについて説明しています💙
実際に実演しているので、最後まで見てもらえたら嬉しいです😊
💙 メンバーシップ 💙
説明動画 ▶︎ • 【ご報告】本日からメンバーシップ開始します！...
登録 ▶︎ / @pythonvtuber9917
iPhoneの方はこらから ▶︎ PythonSuppl/statu...
🏷 タグ一覧 🏷
1. html ▶︎ htmlテキスト全体を括る
2. head ▶︎ meta情報・設定やを書く(Web画面に表示されない)
3. meta ▶︎ meta情報 (文字コードなど)
4. title ▶︎ Webページタイトル(Webタブに表示される)
5. body ▶︎ Webコンテンツを記載
6. main ▶︎ Webページのメイン部分
7. header ▶︎ Webページの上部ヘッダー部分(ロゴやメニューなど)
8. footer ▶︎ Webページの下部フッター部分(利用規約やお問い合わせ先)
9. h1~h6 ▶︎ 見出し
10. p ▶︎ 段落
11. img ▶︎ 画像
12. video ▶︎ 動画
13. a ▶︎ リンク
14. ul / li ▶︎ リスト
15. table / tr / th / td ▶︎ テーブル
16. div ▶︎ 複数の要素をまとめてブロックに
17. span ▶︎ インライン要素(スタイル適用時に使用)
18. label ▶︎ ラベル
19. input ▶︎ インプット関連(テキストボックス、チェックボックス、ボタン等)
20. select / option ▶︎ セレクトボックス
全部で20個でした!! (21だと思ってた...)
💻 動作環境 💻
Windows 10
Python 3.9.0
⭐️ チャプター ⭐️
0:00 今日のテーマ「HTMLの基本について」
0:25 HTMLとは？
3:22 HTMLの基本的な書き方
6:59 header/main/footerタグ
8:37 h1タグ
9:47 pタグ
10:35 imgタグ
11:42 videoタグ
13:01 aタグ
14:32 ul/liタグ
15:08 table/tr/th/tdタグ
16:45 divタグ
17:16 spanタグ
17:55 inputタグ
20:22 select/optionタグ
20:52 ボタン
21:13 エンディング
💜 チャンネル説明 💜
Pythonプログラミングについて解説するVtuber サプーです✨
初心者でも分かりやすく、Pythonを体系的に学習できるような動画をアップロードしていきます！
みんなが少しでもPythonが好きになってくれたら嬉しいな💕
Twitterとブログをやってるので、フォローお願いします！
Twitter ▶︎ / pythonsuppl
メール ▶︎ python.supu.vtuber@gmail.com
#HTML
#Web画面
#Web制作
#学習
#勉強
#初心者
#入門
#エンジニア
#基本
#PythonVTuberサプー 
Наука
![[Introduction to Python Class] Carefully explain the basics of Python classes !! [For beginners]](http://i.ytimg.com/vi/XMDWpPZkRCc/mqdefault.jpg)
![[Introduction to Git] Basics of Git for beginners ~ Get started in 30 minutes!](/img/1.gif)
めちゃくちゃいい動画に出会えました！即チャンネル登録させていただきました！！
すっごく分かりやすいし、テンポも良い！！
すんなり頭に入ってきます！
HTML初心者には本当にありがたい動画です！
いま自分が一番知りたかった内容がわかりやすくまとまっていて有難い神動画でした！
サプーさんありがとう！これからも勉強させていただきます。
ご視聴いただきありがとうございます！
Pythonが中心ですが、eb関連の動画を今後も出していく予定なので、ぜひ気になるトピックがあれば見てもらえたら嬉しいです😊
凄ーくわかりやすい動画です。コード書いた後にどのように表示されるか見せてくれるのでとてもイメージしやすいです。
ありがとうございます。
ご視聴いただきありがとうございます😊
HTMLはタグと見た目が一致すると、イメージつきやすいですよね！HTMLの理解にお役に立ててたら嬉しいです！
初めて動画拝見しました！分かりやすすぎて保存しました✨✨こういう動画探してました！ありがとうございます🥰
ご視聴いただきありがとうございます！！分かりやすさを重視して動画を作っているので、そう言っていただけて嬉しいです😊
改めて勉強し直してるけどめちゃくちゃわかりやすい。声も聞きやすい
ありがとうございます！！そう言っていただけて嬉しいです！
今まで見たHTMLの解説動画の中でも1番わかりやすいです✨
コード記載の後直ぐに動作を見せてくれるからかな？
動画の作成ありがとうございます☺
ご視聴いただき、ありがとうございます😊
分かりやすさを重視して動画を作成しているので、そう言ってもらえるのがとても嬉しいです！！
とても勉強📖になりました🥹
ありがとうございます😊
丁寧でテンポもよくすんなり頭に入る説明。お金とれますよこれ、素晴らしい動画をありがとうございます
とても理解しやすくてありがたいです🙏
いろいろ学ばせて頂きます！
理解のお役に立てていたら嬉しいです😊
わかりやすいっす。いつもありがとうございます。
ご視聴いただきありがとうございます😊
そう言ってもらえて嬉しいです！！
1番無駄無く解説しているチャンネルだと思いストレス無く学べています!
とてもわかり易かったです
コメントありがとうございます！そう言っていただけて、嬉しいです😊
わかりやすいです！！！！！！
勉強になります！
この動画がHTMLの勉強のお役に立てていたら、嬉しいです😊
無駄がなく、すごく分かりやすくて覚えやすいです。何て才能豊かな方なんだろう。なんたって、綺麗で明瞭な言葉がいいんだよねー。
何を説明して、何を説明しないか？など動画がコンパクトに収まるように意識しています！！
いつも拝見させてもらっています！
最近、プログラミングを学び始めました。
内容がとても分かりやすいので自分の学習ペースに合っています！
ぜひ、CSSについても解説を頂けると幸いです！
ご視聴いただきありがとうございます！
CSSですね、検討してみます！
相変わらず教え方上手いですよね。htmlの解説は溢れてるのに・・・分かりやすく疲れないので不思議。aタグはアンカーの略だったんですね！
理解のしやすさを重視して動画作りをしているので、そう言ってもらえて、とても嬉しいです😊
タグ名は略されすぎてるものがあるので、何の略かわからないですよね😂
助かります😂
実演を交えての解説、とても分かりやすく参考になりました。超初心者にとって、とてもありがたく拝聴できました。ありがとうございます。何度も見て、HTMLを自分のものにしたいです。お願いですが、ぜひともCCSについても、このような解説動画を配信していただけたら幸いです。よろしくお願いいたします。
ご視聴いただきありがとうございます！CSSについても検討してみますね😉
どのチャンネルより丁寧だわ
ありがとうございます！！
動画を参考に勉強させて頂いてます！
少しでもこちらの動画がお役に立てていたら嬉しいです！
モロパクリぐらいにエディター書いてるのTwitterなど飛んだらすみません
ちなみにCSSの動画も作ってほしいです
いまちょうどHTML5を習っております。とてもとても参考になりますし、わかりやすいです。
もう一編くらいHTMLに関するものをだしてくださるとありがたいです。
この動画は毎晩寝るときに繰り返し聞いて学んでいる孫ふたりの年寄り です。
ご視聴いただきありがとうございます😊
HTMLの続編のご要望ですかね！検討してみますね😉
プログラミング初めて２週間ですが、めっちゃ分かりやすかったです。Progateではcssとセットですが、htmlでもこれだけのものが作れるって事に驚きました。チャンネル登録させてもらいますね(^_^)
コメントありがとうございます😊
HTMLも動画を出しているのですが、チャンネルとしてはメインがPython動画になっているので、ぜひPython動画も見てもらえたら嬉しいです！
@@pythonvtuber9917 早速返事ありがとうございます！さっきまでProgateやってたんですけど、BGMとして【まじっくあわ〜】のサプーさんがゲストの動画を流しながら勉強していました(^_^)初学者は最初はhtmlから…って聞いていたので。
色々あるHTMLの説明動画の中で一番分かりやすくてビックリ！とてもタメになりました！
こんなに分かりやすくて素敵な動画だもの、是非もっとHTMLやCSSの説明動画が欲しいです！^^
ありがとうございます！
CSSについても検討してみますね！
歓喜( ；∀；)
HTMLがきたって事は次回はドキドキ💓
コメントありがとうございます😊
あ...次回はHTMLとは全く関係ないので、ご期待に添えなさそうです...😵
学校の授業で授業と言っていいのかすら怪しいほどわかりづらかったのが嘘のようにわかりましたありがとうございます😭今の先生と変わって欲しいほどです
授業みたいに体系的に一気に細かい説明までされると逆に理解しにくいとかあるかもですね。勉強のお役に立てていたら嬉しいです！
なるほど一回見ただけでだいたい分かったよ
ご視聴いただきありがとうございます😊
めっちゃ分かりやすかったｗ
CSSについても解説してほしい
ありがとうございます！！
CSS解説動画も検討してみますね！
@@pythonvtuber9917 あざす
ＨＴＭＬの事、詳しく教えて下さって有難うございます 可愛い女の子から教わってなんか頭に入ってきやすくて良かったです😀
最高でした、ぜひCSSもお願いいたします。
既にあったらすみません
ご要望ありがとうございます！検討してみますね！
はじめまして！
すごくイメージしやすい解説動画でした✨
サプーさんの動画、Pythonの復習にも活用させていただきます！
HTML/CSSを独学でやるか、授業受けるか悩んでいるのですが、独学だと厳しいのでしょうか？
※現在大学2年生で、Java・Python・C言語の基礎は習っています。また、秋からJavaScriptをやるので、そこに向けて学習したいというのがあります。
授業も検討しているのですが、それ以外の授業の時間割が地獄で既に参っていまして…💦
なので、独学で出来るかお聞きしたいです…
とても勉強になりました。
質問ですがbrタグはという時に使うのですよか？
改行したい時にbrタグを使います！
高１です
今からHTMLを学習しようと考えているのですがおすすめのソフトありますか？お金がないのでできれば無料のがいいです！Windowsです！
ソフトというのはエディタのことでしょうか？VSCodeとかはいかがですか？
登録しました!
わからないところがあったら質問していいですか？
チャンネル登録ありがとうございます😊
はい、質問がありましたら、コメント欄に記載いただけたら、答えられる範囲で回答します！
@@pythonvtuber9917 自分は、PCにPythonを入れた頃から見てます。
環境は、OS:Windows10,エディター:Visual studio Code,Pythonのバージョンは、3.9.6です。
質問なんですが、動画を見ながらやると、赤い謎の下線がでるんですよね。何が問題なんですかね?
その赤い下線が引かれている部分は、具体的にどのようなコードでしょうか？可能でしたら、その前後のコードも含めてHTMLを貼り付けてもらえたら、もう少し明確に回答できるかもしれません。
念の為、確認ですが、HTMLファイルは「.html」という拡張子になっていますかね？
@@pythonvtuber9917Pythonの.pyという拡張子です。編集中に出ます
この動画の1:09の部分でも説明しているようにファイルの拡張子を「.html」にしてください😉
.pyだとブラウザで開いてもWeb画面として認識されずに、画面が出ないと思います！
動画の冒頭でも説明しているように、この動画はPythonの動画ではなくて、HTMLの動画になります！
現在ツールなどでHTMLを覚える必要がない気がするのですがどう思いますか？
そうなんですか？初心者でやってるので無知ですみません
忘れたらググればOKですね！エディタのサジェスト機能もありますし。
ありがとうございます
あれ？Python以外も教えてくれるんですか？？
PythonでWebアプリを作る時に使用する技術は、ちょこちょこUPしてます！Git・SQL・HTMLなど😉
Python VTuberとは何とニッチなw
センス問われる言語だぁ・・・
私はセンスがないので、辛いですね😂
@@pythonvtuber9917 あたしもですよーCSS使っても使ってもダサダサよ
これ、RUclipsの動画でいいのか？ちゃんとお金取れるぞ