ついに、今回のHTML学習日記Part5をもって、CodecademyでのHTML学習が修了します！！
では、いつも通り、今回学習した内容をアウトプットしていこうと思います。
今回学習したHTMLの内容を以下に書いていきます。
まずは、form validationについて学習しました。
form validationとは、ユーザーがformが送信される前に、文字数の条件を満たしてくださいなどの、メッセージを教えてくれるような機能のことです。
まず、送信する前に、空欄になっているのを教えてくれるメッセージを表示させるには、<input>の中に、required attributeを追加することで、出来ます。
次に、個数の最大値や、最小値などの値を設定する際に、用いるform validationは、min attributeと、max attributeです。これらは以下のように書き込み、<input>の中に追加します。
min=”1″ max=”5″
“”の間に書き込まれている数値が最小値と、最大値を決定し、今回の場合は、最小値が1で、最大値が5です。
次に、ユーザーが打ち込む文字数の最大、最小を設定する際に、用いるform validationは、minlength attributeと、maxlength attributeです。これらは以下のように書き込み、<input>の中に追加します。
minlength=”5″ maxlength=”50″
“”の間に書き込まれている数値が最小の文字数と、最大の文字数を決定し、今回の場合は、最小の文字数が５文字で、最大の文字数が50文字です。
次に、クレジットカード番号などの数字のみで、14桁以上16桁以下などの条件を設けたい場合は、pattern attributeを用いて、以下のように 書き込み、<input>の中に追加します。
pattern=”[0-9]{14,16}”
このpattern attributeの後に、入る中身は、加えたい条件によって、書き込む中身も変わります。
次に、semanticについて学習しました。
senmanticとは、プログラムの書き方みたいなもので、プログラム意味があるをグループ化しながら書くと、SEOが良くなったり、障害者やモバイルユーザーにとって分かりやすくなったり、他のプログラマーにとって見やすいプログラムであるなどのメリットがあります。
まず、見出しには、<div> tagではなく<header> tagを用います。また、見出しの中の目次や、メニューには、<nav> elementを用います。
次に、記事の内容などを書く際には、<main> elementを用い、<main>の中に記事の内容を書きます。
次に、記事の下部にある連絡先や、利用規約などを書く際には、<footer> elementを用い、<footer>の中に連絡先や、利用規約などを書きます。
次に、記事の内容をテーマごとにまとめる際には、<section> elementを用います。
また、記事の内容の中身には、<article> elementを用い、<article>の中に記事の題名や、文章、写真などを書きます。
次に、<section> elementの中に参考文献や、コメントなどの追加情報を書く際には<aside> elementを用い、<aside>の中に、参考文献や、コメントなどの追加情報を書きます。
次に、写真を埋め込む際には、<figure> elementを用い、<figure>の中に、<img>を書き、その写真の説明文を書く際には、<figcaption> elementを用いてその中に、写真の説明文を書きます。
次に、オーディオを埋め込む際には、<audio> elementを用い、<audio>の中には、<source> elemetを書きます。また、<audio>には、自動再生のautoplay attributeと、再生やミュートなどのcontrols attributeがあり、それを書き込むことが出来、同様に、<source>には、src attributeや、type attributeを書き込むことが出来ます。
最後に、ビデオを埋め込む際には、<video> elementを用い、<video>の中には、<embed> elementを書きます。<video>には、<audio>と同様に、controls,autoplay,loop attributeがあります。<embed>も同様に、src attributeがあり、それを書き込むことが出来ます。
以上が、今回HTMLで学習した内容でした。
sematicは、文章で上手く説明出来ていないと思うので、実際に自分で調べて深く理解して頂きたいです。
今回で、最後のCodecademyでのHTML学習の記事です。一緒にHTMLを学習してくださった、皆さんお疲れ様でした！！！
また、HTMLを使っていく中で記事の修正点や改善点があれば、適宜修正していくと思います！
HTML学習日記Part1 https://k-kimama.com/html-diary-part1/
C++学習日記Part1 https://k-kimama.com/cpp-diary-part1/
Codecademy https://www.codecademy.com/
コメント