canapeリンク『タグについて』

FAQ

「よくある質問FAQの語は英語のFrequently Asked Questionsの略語」

39＜article＞

What do we want?
Our data.
When do we want it?
Now.
Where is it?
We are not sure.

70＜dl>＜dfn＞＜abbr＞＜i＞

happiness
/'hæ p. nes/
n.
The state of being happy.
Good fortune; success. Oh happiness! It worked!
rejoice
/ri jois'/
v.intr. To be delighted oneself.
v.tr. To cause one to be delighted.
幸福とは
/'hæ p. nes/
なないふ
The state of being happy.
Good fortune; success. Oh happiness! It worked!
rejoice
/ri jois'/
v.intr. To be delighted oneself.
v.tr. To cause one to be delighted.

94＜dl>＜dfn＞＜abbr＞

探偵とは
秩序Order
体系System 自分を喜ばせること.
真理Truth 喜ばせるために.

101＜abbr＞

とは、「abbreviation」（略語）の略で、略語を示すタグです

WWW

上のコードは＜p>＜abbr title="World Wide Web">WWW＜/abbr>＜/p> abber例文参照サイト

106＜dfn＞

dfnとは「definition」（定義）の略で、何らかの用語の意味を定義（解説）する際、文章中に出てくるその定義用語の部分に対してこの要素を使用します

I define the term in the dfn element.

[dfn要素で用語を定義します。]

title属性 定義される用語の正式な名称を指定

いま解説しているHTMLは、ウェブページを作成するための言語の一つです。

HTMLはそれほど難しいものではありません。簡単なウェブページなら数種類のタグを覚えれば十分に作成することが可能です。

#上部へ ---------------------------
＜figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。 図表にキャプションや注釈を付けても良いでしょう。 図表にキャプションを付ける場合には、＜figcaption>タグを使用します。

119＜figure＞＜figcaption＞

この例は、コードリストをマークアップするためのfigure要素を示す。

In listing 4 we see the primary core interface API declaration.

[リスト４にプライマリコアインターフェイスが表示されます API宣言。]





Listing 4. The primary core interface API declaration.[リスト4.プライマリー・コア・インターフェースAPI宣言]
interface PrimaryCore {[インターフェース プライマリーコア]
 boolean verifyDataLine();[ブール値確認データライン]
 void sendData(in sequence<byte> data);[無効 データ送る（順番通りにltバイト）データ]
 void initSelfDestruct();[無効 初期化自己破壊する]
 
}

The API is designed to use UTF-8.[APIは、UTF-8を使用するように設計されています。]

これは（ギャラリー内のような）ページの主コンテンツである写真をマークアップするfigure要素である。 Bubbles at work — My Gallery™画廊
Bubbles, sitting in his office chair, works on his latest project intently.
Bubbles at work
この例において、figureにない画像にくわえて、figureにある画像と動画が見られる。 自己完結型のユニットではないので、最初の画像はリテラルに例の第2文の一部である。 したがって、figureは不適切であろう。

165＜blockquote＞

Malinko's comics[マリンコの漫画]

This case centered on some sort of "intellectual property"[この事件は、ある種の「知的財産」を中心にした]
infringement related to a comic (see Exhibit A)[コミックに関連する侵害（別紙Aを参照）].
The suit started after a trailer ending with these words:[訴訟が始まったこれらの単語で終わるトレーラーの後：] ROUGH COPY! Promblem-Packed Action![下書き！ 問題満載のアクション！」]
＜Q>タグはQuotation（引用）の略で、〜で 囲まれた部分が引用であることを表します。 ＜Q>タグは、改行を必要としない程度の比較的短い文を引用・抜粋する際に使用します。 長めの文章を引用・転載する際には、＜BLOCKQUOTE>タグを使用してください。

引用コンテンツ

...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit B.
[放映されました。 より大きなノートブックで武装した弁護士が、 雪玉を使った先制攻撃。 トレーラーの完全なコピーは 別紙Bに含まれています。]

引用元：ページタイトル

186＜figure＞

Two squiggles on a dirty piece of paper.
Exhibit A. The alleged rough copy comic.
#上部へ

112＜figure＞＜video＞＜cite＞

＜video src="ex-b.mov">＜/video>
Exhibit B. The Rough Copy trailer.

The case was resolved out of court. ここでは、「鏡の国のアリス」詩の一部にfigureを用いてマークアップしている。

200＜figure＞

'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.

＜cite＞Jabberwocky斜体文字！＜/cite＞ (first verse). Lewis Carroll, 1832-98
この例において、それは城を取り扱うより大きな作品の一部である可能性があり、ネストされたfigure要素は、グループ内の各図に対してグループのキャプションと個々のキャプションの両方を提供するために使用される：

209＜figure＞

The castle through the ages: 1423, 1858, and 1999 respectively.

180＜figure＞

Etching. Anonymous, ca. 1423.
The castle has one tower, and a tall wall around it.

217＜figure＞

Oil-based paint on canvas. Maria Towle, 1858.
The castle now has two towers and two walls.

222＜figure＞

Film photograph. Peter Jankle, 1999.
The castle lies in ruins, the original tower all that remains in one piece.
#上部へ 図は、時にはコンテンツからのみ、暗黙的に参照される：

230＜article＞＜figure＞

Fiscal negotiations stumble in Congress as deadline nears

Obama and Reid sit together smiling in the Oval Office.
Barrak Obama and Harry Reid. White House press photograph.

Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers grasping for a way to reopen the government and raise the country's borrowing authority with a Thursday deadline drawing near.

...
#上部へ --s-244行目-----------
これは、主要コンテンツセクションがmain要素を用いて定義される卒業式のプログラムである。この例において、main要素は、主要コンテンツのサブセクションへのリンクで構成する nav要素を含むことに注意する。
Graduation Ceremony Summer 2022
＜header＞
The Lawson Academy:
＜/header＞

2022年夏の卒業式 Graduation Ceremony Summer

＜main＞

Graduation[卒業]

Ceremony[ 式 ]

Opening Procession

Speech by Valedictorian

Speech by Class President

Presentation of Diplomas

Closing Speech by Headmaster

オープニング行列
卒業生総代によるスピーチ
学級委員長によるスピーチ
卒業証書の提示
校長による閉会のスピーチ

Graduates[卒業生]

Awards[ 賞 ]

＜/main＞
#上部へ
267Code Exampe:
たとえば、ブログの投稿はarticle、章にsection、ページのナビゲーションの目的にnav、フォームコントロールのグループにfieldsetを使用してマークアップされるだろう。 一方、div要素は、文体上の目的のため、すなわち類似の方法で注釈をつけたすべてのセクション内の複数段落を包むために有用であるかもしれない。次の例は、別々な2つの段落要素に言語の設定を一度に設定する代わりに、一度に2つの段落の言語を設定する方法として使用されるdiv要素である：

281＜article＞＜lang="">

My use of language and my cats

My cat's behavior hasn't changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.

My other cat, coloured black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognises that their flat is a mirror image of ours.

Hm, I just noticed that in the last paragraph I used British English. But I'm supposed to write in American English. So I shouldn't say "pavement" or "flat" or "colour"...

I should say "sidewalk" and "apartment" and "color"!

------------------------------

formはsubmitされないようになってます。

氏名

--------------------------

299HTMLソース＜label＞＜fieldset＞＜legend＞

性別

趣味

#上部へ
--------------------------

ページ内リンクできる

#○○　👉　id="○○"　

317First

＜h4 id="one">317First＜/h4>

Second

＜p id="two">Second＜/p>
Third
＜div="three">Third＜/div>
Fourth
＜a id="fourth">Fourth＜/a>
Fifth
＜em id="five">Fifth＜/em>

hがoneで、
pがtwo
divがthird
aがfourth
emがfiveで紐ずけられる

  • First
    • <li><a href="#one">First</a><li>勝手に [ ""]を外してみた
  • Second
  • Third
  • Fourth
  • Fifth

    • #

    参照サイト

    <a href>について

    322

    
  <a href="#" target="_blank"></a>

  <a href="#" target="_self"></a>

  <a href="#" target="_parent"></a>

  <a href="#" target="_top"></a>

  <a href="#" target="abc"></a>

    のタグを使って順番に書くと次のようになる

    別画面を開いてリンクします
    リンク元と同じフレームにリンクします
    ひとつ上の親フレームにリンクします
    フレームをすべて解除してリンクします
    abcという名前のフレームにリンクします
    
  <a href="a.shtml"></a>
  <a href="http://www.htmq.com/html5/a.shtml"></a>
  <a href="../index.html"></a>
  <a href="mailto:info@htmq.com"></a>
  <a href="../index.html"><img src="bs.png" alt="HTMLクイックリファレンス"></a>

    のタグを使って順番に書くと次のようになる

    相対パスでリンクしますa href="a.shtml
    絶対パスでリンクしますa href="http://www.htmq.com/html5/a.shtml"
    ひとつ上のディレクトリへa href="../index.htm"
    メールa href="mailto:info@htmq.com"
    HTMLクイックリファレンスa href="../index.htm

    href="#" というのは「そのページの最上部へのリンク」という意味


    HTML-onclick属性

    ＜a href="https://canape2020.stars.ne.jp/" target="_blank"＞
    ＜a href=https://canape2020.stars.ne.jp/" target="_blank" onClick="new_open(); return false＞さてこれはCSS無くてもOKというが上とどう違うの？
    Click
    このコードは＜div id="text-button" onclick="location.href='https://style.potepan.com/'">Click＜/div>です

    参考サイトhttps://style.potepan.com/articles/21691.html

    ■HTML＜div id="text-button" onclick="clickDisplayAlert(this.id)">Click＜/div＞
    Click
    ■CSS 
    ＜style>
#text-button {
  display: block;
  cursor: pointer;
  width: 360px;
  text-align: center;
  border: 1px solid #232323;
  padding: 10px;
}＜/style>
    続きはこちら

    #はもどる

    /はもどる

    ＜a href="#" onClick="new_open();return false"＞　
    ＜a href="JavaScript:void(0)" onClick="new_open();return false"＞