初心者がエンジニアに転職するための、壁打ちブログ('ω')

・CS、SV、TA、データサイエンス、などをIT業界で学んできた私が、 サーバーサイドエンジニアとして独立するまでのブログです

ゼロから始めるエンジニアへの道 #3 ~html編③~

HTML/CSSの学習環境を整え

やったこと（今回はすでにやっていたことの復習みたいなもん）

・VSコードの準備 .・fontfamailyの導入（vsのバージョンが原因で正規的なく動作はしなかった）　 　・Windows側の拡張子表示など

HTML/CSSの概要を理解しよう

前提 　
1．HTMLとPHPは基礎のecho文や基礎Tagくらいは触ったことがある。 　
2．CSSはTagや句の暗記はしていないものの、テキスト構文でFAQ作成くらいはやったことがある。

01 プロフィールサイトを作ってみよう

・素材の格納（img.）

02 ブラウザに名前を表示しよう

・htmlのテキスト（文字コードの指定なしの場合↓↓） 　・ブラウザ（chromeのtabに対して、ドラッグ＆ドロップで表示。これでサーバー構築しなくてもchordの確認ができる）

f:id:Takeda2864:20200504183549p:plainf:id:Takeda2864:20200504183616p:plain
Vsコードにテキスト（文字コードの指定がないchordの添付）

03 タグでマークアップしてみよう（ここから、HMTL構文を書きます）

  • 02のままだと、見出しや文章に区別がついてないので、構文で区分けをしていきます。
    • 重要な見出しheading の 1 番目という意味で h1 という記号を活用します。
      • HTMLのtagは <> （不等号記号）を活用します。　
      • 段落を表す paragraph (パラグラフ) pタグで囲む

※タグを使って02の様な文字列に対して意味付けを行う事を「マークアップ」するといいます。　

f:id:Takeda2864:20200504182950p:plainf:id:Takeda2864:20200504183059p:plain
このように、h1で区分けを行い、P tagで段落を切り分けができました。

04 imgタグで画像を表示しよう

  • 本来の連取以降分では以下のように、ローカルディレクトリのパスを記入しますが、
    • 環境構築が適切ではないのか、ローカル表示されないので、一旦はblogの顔を表示しています。
    • ( img src="" width="120" height="120" alt="太郎にアイコンです")

04の構文（Blogの画像反映）

~
<html>
<img src="https://cdn.image.st-hatena.com/image/square/da161997713f23479ca06fcaff8c7893ce57a75d/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F155897278%2F1583412966696427" width="120" height="120" alt="顔写真">
<h1>TK</h1>
  <p>システムエンジニアを目指しています</p>
</html>
~

Blogできになった点　

  • コードブロックや改行見出しになれるために、Markdownを活用していますが構文のエラチェックが無いので、結構時間かかる(;´･ω･)
    • 例えば、Pタグのテキストなど（文字コードの指定を指定していないから？ですかね？）　
      • このままだと、時間食うので他の記法も試してみるかなぁと思ってます（;´д｀）