Audio, Video files on a web page
Firework from GasWorks Park on the Independence Day.
It tooks super long to figure out how to put a video on my blog. Finally, Streamable.com took me where I was aspiring to go!!!!!!!
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">
"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...↓
↓Image of Mina using a Picture tag, different pictures will be shown for different screen size↓
↓Image of Mt.Rainier with caption below it↓
■
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
■
※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 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
- One
- Two
- Three
- 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
demonstrationof the paragraph
tag
.tag line here
最強のグミとは
皆さんこんにちっわ!