サービス
サービスを探す
プロ人材を探す
仕事を探す
ブログを探す
サービス
サービスを探す
プロ人材を探す
仕事を探す
ブログを探す
購入・発注したい方
サービスを探す
プロ人材を探す
ノウハウ・素材を探す
ブログを探す
仕事・求人を投稿して募集
エージェントに人材を紹介してもらう
受注・働きたい方
出品する
単発の仕事を探す
継続 (時給/月給) の仕事を探す
エージェントに仕事を紹介してもらう
カテゴリ一覧
イラスト作成・漫画制作
デザイン制作
Web制作・HP作成・EC構築
動画編集・映像制作
集客・マーケティング相談
NEW
ビジネス代行・事務代行
音楽制作・ナレーション
IT相談・システム開発
ライティング・翻訳
コンサルティング・士業
生成AI活用・開発・制作
占い
悩み相談・カウンセリング
学習指導・資格・キャリア相談
住まい・美容・生活相談
オンラインレッスン・習い事
ハンドメイド制作
出張撮影・出張サービス
資産運用・副業の相談
NEW
弁護士検索・法律Q&A(法律相談)
サポート
はじめての方へ
ご利用ガイド
お困りのときは
ログイン
会員登録
サービスを探す
イラスト作成・漫画制作
>
デザイン制作
>
Web制作・HP作成・EC構築
>
動画編集・映像制作
>
集客・マーケティング相談
NEW
>
ビジネス代行・事務代行
>
音楽制作・ナレーション
>
IT相談・システム開発
>
ライティング・翻訳
>
コンサルティング・士業
>
生成AI活用・開発・制作
>
占い
>
悩み相談・カウンセリング
>
学習指導・資格・キャリア相談
>
住まい・美容・生活相談
>
オンラインレッスン・習い事
>
ハンドメイド制作
>
出張撮影・出張サービス
>
資産運用・副業の相談
NEW
>
>
プロ人材を探す
>
ノウハウ・素材を探す
ブログを探す
>
求人募集を投稿する
人材を紹介してもらう
仕事を探す
出品する
仕事を探す
仕事を紹介してもらう
出品する
仕事を紹介してもらう
求人募集を投稿する
人材を紹介してもらう
ブログを投稿
会員登録で10%割引クーポンを獲得!
会員登録で10%割引クーポンを獲得!
ココナラブログ
ホーム
ブログトップ
ブログ
IT・テクノロジー
HTMLファイルを作ってみよう!
記事
IT・テクノロジー
tsuyu0102
2023/04/17 08:03
今回はWebサイト制作のはじめの一歩、.htmlのファイルを一緒に作って、ブラウザで表示させてみます!
ページを作ってみよう!
まず、テキストエディタを開いて、下記コードをコピペしてください。そして、index.htmlなどと名前をつけて保存します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first site</title>
</head>
<body>
<p>ページへようこそ!</p>
</body>
</html>
テキストエディタとは、文字を入力・編集するためのソフトのこと。Windowsならメモ帳、Macならテキストエディットとか。
Dreamweaver、ホームページビルダー、Visual Studio CodeやSublime TextでもOKです。
表示を確認してみよう!
今作ったindex.htmlをブラウザ(Google ChromeとかEdgeとか)で開いて表示を確認してみましょう。ダブルクリックまたはファイルをブラウザにドラッグで開きます。
タブのところに表示されているのは、<title>タグ内に書いた文字です。ブックマーク保存するときに表示される部分にもなります。
<body>タグの中に書いたものがブラウザ上に表示されます。
画像を表示してみよう!
<p>ページへようこそ!</p>の下に、
<img src="cat.jpg" alt="ミーティング中の猫">
と書いてみました。(index.htmlと同じところ(同じフォルダ内とか)に画像を置いた設定。)
▼ブラウザ結果
▼コードはこんな感じ。
このようにしてサイトを作っていきます。
今回は以上になります。
お疲れ様でした★
#HTML
#お役立ち
#お役立ち情報
#初心者向け
FFFTPで楽天GOLDサーバーにアクセス!
一覧に戻る
楽天市場GOLDのindex_sp.htmlを引き...
このブログを見た人にオススメ
AI漫画の作り方|初心者が失敗しない7つの手順
記事
デザイン・イラスト
修羅AI動画ラボ
2026/09/02 22:54
AIで作ったLPを公開する前に確認したい5項目
記事
IT・テクノロジー
AI道具箱
2026/08/31 07:59
Webサイトで「なんかダサい」が起こる理由5選|デザインを整える基本ポイント
記事
デザイン・イラスト
HANA HAPPY 87
2026/08/30 00:12
管理画面、迷子になっていませんか?|基本の「3層構造」をやさしく解説
記事
コラム
イマムラデザイン
2026/08/28 10:53
動かないボタンの修正依頼で伝える5項目
記事
IT・テクノロジー
AI道具箱
2026/08/28 01:50