見出し画像

#2-3 基本的なsyntaxとリンクや画像の挿入

What I learned today 今日の学び―復習を兼ねて
#2

・HTML Tags, Elements, and Attributes
・HTML Typography
・HTML Links

・HTML Tags, Elements, and Attributes
例えば次のsyntaxだとそれぞれの名前は以下の通り。
<h1>text</h1>
<>: left/right angle bracket
h1: element name
<h1>: opening tag
</h1>: closing tag

・Inline Elements
改行(line break)なしでHTML elementsに入れ込む。たとえば以下の通り
<p>This contains an <em>inline-level</em>element.</p>
<em>inline-level</em>の部分がinline elementsになり、ブラウザ上ではデフォルトではイタリックで表示されました。

・Div
division tagのこと。elementsをグループ化する時に使う。Block element.

・Span
inline elementsのスタイルをそれ以外のスタイルと合わせるために使う。
例えば、
<p>Span is a generic<span> inline-container.</span></p>
と書くとブラウザ上で inline-container.はイタリックにならない。

・Attributes: add information about an element
例えば
<p class="class-name"> Text </p>
と書くと
class: attribute name
"class-name": attribute value
class="class-name": attribute

classは特定のclass nameをスタイリングのために特定する役割
idはelementを識別する役割

・HTML Typography
*headline, paragraphの作り方
Headlineは<h1>text</h1>
Paragraphは<p>text</p>

ランダムな文字列の作り方:>plorem30
 ランダムな文字列の改行はview>Word Wrap

web page中にライン(horizontal line)を挿入したいときは<hr>

wbpageに表示したい文字の改行は<br>
 たとえば以下の様に入力すると
 <p>Hold fast to dreams, <br>for if dreams die, <br>Life is a broken-winged bird<br>that cannot fly.</p>
ブラウザには、次のように表示される。
Hold fast to dreams,
for if dreams die,
Life is a broken-winged bird
that cannot fly.

・HTML Links
リンクを挿入するときは<a href="ここにリンク">表示させたい名前</a>

同じページ中で指定した場所に飛びたいときは
 <a href="#idをつけたその場所の名前>表示させたい名前</a>
 id のつけ方は例えば<h1>に着ける場合
 <h1 id ="">Heading

#3
・HTML Lists(ordered/unordered/nested list)
・HTML Images
 <img src="path/url/of/the/image" alt="describes the image, Displayed on the screen if the image fails to load">
→対応する画像がなければ、ブラウザ上には壊れた画像のアイコンと、"describes the image, Displayed on the screen if the image fails to load"
と表示される。

 <img src="assets\images\20231020_umt1.jpg" alt="" height="250px">
→リンクと対応する画像を表示できる。大きさはpx or %で、heightとwidthで調節。

今日の宿題
お手本のweb pageを作成
15分弱かかった。。

今週の反省
調査地・ベトナムへの長期出張期間中にKredoの受講が始まりました。調査地に滞在している間は、日の出ている時間帯は外に行って色々観察したり、聞いて回ったりしたい、しなきゃという気持ちと、プログラミングを勉強すると決めた限りは授業と復習はしっかりしなきゃという気持ちと両方あり、プログラミング学習と研究を両立するペースをつかめていません。日が昇る前/沈んだ後にはプログラミング、日中は研究に専念する(授業時間以外)スタイルを確立できるように、次の1週間は時間の区切り、終わりを遵守して取り組んでみます。


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