Image!!

We use <img> tag and 4 attributes src(source), alt, width and height.

<img src="image.jpg" alt="black dog" width="400" height="300">

K-pop girls group Twice member Mina, flower crown on top

"alt"is for those who can't see the screen. For them, we explain what the image is about."Width"&"Height"is for browser. We cannot control the size with these attributes, but they help the browser know how large the image is.

We need to include all these 4 attributes when putting images on a website.

Types of images

GIF=256 colors,SVG=for logos or icons,JPG=good compression,PNG=Newest form of photos.Good compression and image that can be transparent.

Responsive Images

↓Image of Mina using a Sourceset code, which does not work well...↓

K-pop girls group Twice member Mina, flower crown on top

↓Image of Mina using a Picture tag, different pictures will be shown for different screen size↓ K-pop girls group Twice member Mina, flower crown on top

↓Image of Mt.Rainier with caption below it↓

Great View of Mt.Rainier
Mt.Rainier has 4,392m of height, which makes the mountain the tallest mountain in the northwest America.

Linkedin LearningにてHTMLの授業を受けているがURLの構造、ナビゲーションバーの作り方のところでよくわからなくなった。具体的には何のためにこの説明をしているのかがわからず集中ができなかった。しかしながら、ハイパーリンクの付け方はマスターしたので前進したということにしよう。

HTML for me Part.3

ARIA Role

※This article is written in simple HTML elements. For tech-savvys, please enjoy how I develop my HTML skills as I keep writing articles.
What is ARIA Roles??

ARIA Roles is another type of Attributes that can be added to any HTML element. To give it more meaning and to make sure the browser understand what something is.

ARIA Role will be used in combination with CSS so better learn in CSS chapter in the future.

Weird Characters

In HTML, some characters like < or > are read as the start or the end of tags. So what can we do when we want to use these characters in our contents??
-use character entities

Character Entities is used in your content to write certain characters that are typically used in HTML.
e.g.)&lt; for <
         &gt; for >
         &amp; for &
          nbsp; for Space

How to wrap words with links

We use <a href="https://...."></a>.Below is an example of link wrapped around the word.

This つぶグミ is the best jelly beans in all over the world.

Now, if you tap つぶグミ in the sentence, the browser will open Amazon page of つぶグミ.

However, not only words or phrases, link can be wrapped around other things like images.

つぶグミのソーダ味は10g増量の85gで満足感大!

Now tap on the image. You will again be took to Amazon page of つぶグミ. Link is really powerful especially when you want visitors to buy the products you wrote about on your article.

HTML for me Part.2

 

over and over

 

※Caution

This article is written only with simple HTML elements("p","dl","h1", etc...)



Let's dive into more complicated part of HTML

Linkedin learning で記事書きたいね


Attributes

HTML attributes provide additional information about HTML elements.
・All HTML elements can have attributes
・Attributes provide additional information about elements
・Attributes are always specified in the start tag
・Attributes usually come in name/value pairs like: name="value"

Four major global attributes

  • Global class Attribute
  • Global id Attribute
  • lang Attribute
  • dir Attribute
What is Global Attributes??

Global Attributes are attributes that can be applied to any HTML elements

Four major global attributes in detail

Class

Allow us to target all elements with that class in OUR CSS or JavaScript.
It gives us a way to attach a reusable name to any elements.
We can address the name in our CSS and apply styling to all the elements that have that class

ID

Allow us to target a unique element with that ID in our CSS of JavaScript
It is helpful when interacting with JavaScript or links.

※These two Attributes are useful when editing with CSS
Lang

Tell the browser what language you are writing in

e.g.)This paragraph is written in American English

例)この段落は日本語で書かれています

Dir

Tell the browser in which direction the text flows.

This paragraph is written in English.It flows from left to right

この文章は日本語で書かれています。本来は左から右ですが、試しにdir="rtl"にするとこんな感じになります。

HTML for me

※use date for serch engine. Let engines know that the article was written on that date. It won't happen if you just write down the date with "p"code

What is HTML??

This is a paragraph. This is what we call paragraph

This is an article.

This is how I really talk

This is the headline 2

This is the headline 3

This is the headline4

This is is the headline 5
This is the headline 6

My favorite character in Attack on Titan is Elen.

When you see favorite and Attack on Titan, you may think that both of them are italiacized. But technically it is different. The word favorite is emphasized on the background while Attack on Titan is just italiacized. On the surface, they look same, but when you listen to these words, you can see the differences.

Strong is recommended to use in the last resort. It works in the similar(almost the same) way as Bold. I cannot tell the difference but let's remember this.

Unordered lists

Place to visit in Seattle

  • Pike Place Market
  • Space Needle
  • Mount Rainer

↓here I'm using "br" code to insert three lines of break before going into the next topic.↓




How to spell number in English
Ordered lists
  1. One
  2. Two
  3. Three
  4. Four
Definition lists

How's it goin'?

How's it goin'?
-used to say as a greeting when people meet someone
-it is another form of "Hello", so when you hear this, people doe not necessarily want to know how things around you are going these days.
-some people does not like this greeting, simply because it means nothing.

One of my favorite quotes are Insanity is doing the same thing over and over and expecting different results.

Why so serious?

Why so serious?

Insanity is doing the same thing over and over and expecting different results.
This is 
"pre" coding, 
                                        where browswer maintain 
                the style of the paragraph 
                                                   as it is.
You don't need to put "p""/p", which bring these scattered sentences all together in one plain sentence like this.

Subscripts & Superscripts

Subscripts
-used when you want to make some words smaller like when writing chemical formula
H2O→H2O

Superscripts
-used when you want to put a footnote on a sentence, or when you wanna put an index in math equation
210=1024→210=1024, Something with a footnotes.2

※諸説アリ

This is a

demonstration

of the paragraph

tag

.
tag line here
          

今日も一日お疲れ様です