現役エンジニアが解説するウェブサイトの基本　〜HTML編〜　【勤勉エンジニアの怠惰ブログ】

Flutterラボ

はじめに

インターネット上でウェブサイトを解説してみたいと思ったことはありませんか？昨今では、WordpressやWixなどノーコードでウェブサイトを作成することが可能になってきましたが、発展した機能を導入したい場合はHTMLやCSSに関する知識が必要になってきます。

本記事では初めてウェブサイト解説に関するプログラミング初心者の方向けにHTMLについて解説していきたいと思います。

HTMLとは

HTMLはHypertext Markup Language、ウェブサイトのフロント（ユーザーの目に見える部分）を編集するための言語です。HTMLではプログラミングのような専門的な技術は要せず、タグと呼ばれるマークアップを利用してサイトの見た目を構築していきます。

HTMLの基本フォーマット

HTMLのデフォルトのフォーマットは以下のようになっています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


</body>
</html>

HTML上でタイトルを編集してみよう

<head>タグ内にある<title>タグにテキストを追加してみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怠惰ブログ</title>
</head>
<body>

</body>
</html>

結果イメージ

そしてブラウザでHTMLを表示してみるとブラウザタブのタイトルを編集することが可能です。

Body

基本的にはbodyの部分を編集してサイトを構築していきます。

<body>


</body>

HTML上で文字を表示してみよう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怠惰ブログ</title>
</head>
<body>
<p>Hello World!</p>

</body>
</html>

結果イメージ


まとめ

本記事ではウェブサイトを構築する基本のHTMLについて解説してみました。リクエストが多ければHTMLタグの詳細の解説とCSSについての解説記事を書いていきたいと思います。

最後に

我々Flutterラボは、大阪の梅田にあるコワーキングスペース『ONthe UMEDA』の料金プランとしてモバイルアプリ開発が学べるプログラミングスクールを運営しております。

オンラインではなく対面で学びたい方におすすめです。
※オンラインをご希望の方はFlutterラボのオンラインスクールをおすすめします。


以下のような方に適したプログラミングスクールです。

  • 大阪でFlutterを学びたい方

  • オフラインで現役エンジニアに教わりたい方

  • プログラミングの基礎から学びたい方

  • アプリを開発してみたい方

  • 初心者からスマホアプリをリリースしたい方

スタンダードコース

Flutter学習用のカリキュラムに合わせて、プログラミングの基礎からアプリ開発の応用まで学べるコースです。

プロコース

ご自身で開発したいアプリを、設計からリリースまですべてサポートするコースです。

無料体験をご用意しておりますので、ぜひ気軽にTwitterのDMか、特設WEBサイトからお問い合わせください。

この記事が気に入ったらサポートをしてみませんか？