--a
So a decent story has started??
a--
--b
Yaa, this time we will learn how to make a website by using a framework called "Bootstrap"!!
a--
--a
When is Billy Captain coming??
a--
--c
Please bend your arm and leg to the right side!!!
No!! It`s not Billy`s Boot Camp!!
a--
--a
Well, it`s not a lesson for shaping up your body??
a--
--c
Oops, that`s right.....I mean No!!
By the way, Boot Camp is a little bit old.
a--
--b
Since this is a proper lesson, I`ve called an assistant!
a--
--a
Billy Captain??
a--
--c
I`m saying No!!!
a--
--b
...She should be coming now, but... maybe she`s late....
Well, let`s start the explanation.
a--
--b
Bootstrap is a design template based on HTML and CSS.
a--
--a
Ok, so I will cook "Monjayaki" with this template.
a--
--c
So that`s also wrong!!!
I wonder if this lesson will go fine....
a--
--b
In other words, if you use Bootstrap, writing codes will be easier.
a--
--a
Ok, where is the power adapter...
a--
--c
It`s not plug cord!!!
Coding!!!
a--
--b
I will explain with pictures for the readers...
The website that we will going to make is like this.
a--
https://global-s-h.com/web01_en/
--b
This is a sample site of a free download of an application.
The HTML code of this website is this.
a--
--b
There is a download button on the right side with the PC view so you can download the sample code for free.
a--
--b
The lesson will be understandable!!
I`ll explain from the very beginning before using Bootstrap.
a--
--a
Well, I can`t make an application... that`s too hard!!
a--
--c
We will not going to make an application... we will create a website. The application is only a sample!!
If you use Bootstrap, even a clumsy Himesaki will.... I mean a smart Himesaki will be OK!
a--
--a
What did you say, Hayato!!!
Now is a good time for you to move to the Hokkaido office!!
a--
--c
Oh, please don`t.....
a--
--b
Let`s move on to make the website.
I will explain the step one by one by omitting difficult vocabularies.
a--
--b
We will use Windows this time.
The first step is to make a folder to keep the files for making the website.
The name can be anything. Let`s make it "web01".
a--
--b
Inside the folder, let`s make one more folder "img".
This "img" is to stock pictures. The name can be anything as long as it`s understandable that image is inside.
a--
--a
Oh!! Even I can do this easily!!
a--
--a
By the way Hayato, what is this loud noisy sound like a street construction...??
a--
--c
Well, that`s true....
a--
--y
Gaaaaaaaaaaaaaaaaaaa
a--
--a
Who is that person sleeping next to you??
a--
--b
O-Oh, Hakanashi!!! Your there!!!
a--
--y
Fuuuuuuuuuuaaaaa
Good Morning....
a--
--b
I`ll introduce her.
She`s the new assistant, Fuyuki Hakanashi!
a--
--a
She`s not Billy Captain.
a--
--c
So, that`s completely different!!
a--
--b
She has IQ of 206.
a--
--y
Nice to meet you, I`m Hakanashi.
Please be nice to me, clumsy Himesaki.
a--
--a
Y-You really want to be killed by me!!!!!
a--
--c
W-Well, calm down.....
a--
--a
....I guess she was sleeping...
Why does she know the conversation that we`re talking?
a--
--b
Her IQ is too high that she gets sleepy.
a--
--a
Useless.
a--
--b
But she hears everything even if she`s sleeping.
a--
--a
Not convenient.
a--
--y
Gaaaaaaaaaaaaaaaaaaa
a--
--a
So, she`s sleeping already...
a--
--b
W-Well, ....she`s listening.... So let`s start the explanation....
a--
--b
It is easy to use the text editor to write codes for HTML.
This time, we will use "Terapad".
a--
--b
You can download from the internet when you search for the word "Terapad".
a--
--b
Ok, so please open the Terapad and start writing codes.
a--
--a
O-Oh.....I will w-write.....c-co-des....inside h-here......
a--
--c
You`re getting nervous too much....
a--
--b
Write this on the first line.
a--
--b
This is called "Doctype declaration".
It`s a code that means "We will start writing HTML".
Just write here and that`s it, like a magic word.
a--
--a
Door Open!!!!
a--
--c
No!!!! Not a magic word to open the door!!!!!
a--
--b
This Doctype declaration is for HTML5. For HTML 4.01, please search!!
We should use HTML5 from now on, so just remember the newest Doctype declaration.
a--
--a
Ok!! So I`ll just put this code on the first line and that`s it, right!
a--
--b
Yes!!
a--
--b
Next, it`s about HTML, head, body tags.
Basically, HTML needs marking by using tags.
Many of the tags need starting tag and ending tag in between the different tags.
a--
--b
The html tags in the picture show the beginning tag and the ending tag.
a--
--b
The tags in between assign that this is HTML.
Head and body tags also use the beginning tag and ending tag.
a--
--a
Head is the top part and the body will be next, right!!
a--
--b
That`s right!!
a--
--b
Body part will be shown on the canvas section of the browser.
Head is the optional information that doesn`t show it on the canvas.
a--
--b
Now, please write words inside the body tag to show it on the browser!!
Let`s write "OK!" in between ＜body＞ to ＜/body＞.
Go! Himesaki!!
a--
--a
U-Umm......So "O" key is on the right side of "I" and "k" is .....
a--
--c
You cannot even type the keyboard!!
It`s already half a year past since you`ve come to this company....
a--
--a
Well, I`ll use the smartphone!!!
a--
--b
O-Oh, very fast!!! It took only 0.5 seconds taking out from her pocket and sending the words by e-mail....
She's the real IT smartphone gunman!!
a--
--b
Ok, let`s save the file with Terapad.
To save the file, click "character/line feed code saving" from "file".
And select "UTF-8". Then, name it "index.html" and save it on the same line with the img folder.
a--
--b
For only Terapad text editor, save it with "UTF-8N", not "UTF-8". I will explain about this more next time.
a--
--b
"index" means top page.
".html" is an extension. ".xls" is Excel ".doc" is Word application so you might know this.
This is to identify what kind of file it is.
a--
--b
We`ve finished with saving.
Let`s see the written "OK!" on the browser!!
a--
--b
Hakanashi!!! It`s your turn now!!!!
Please wake up!!!
a--
--y
Fuuuuuuuuuuaaaaa
a--
--y
HTML, a file in byte order mark format saved in Hypertext Mark Up Language is the number attached to the beginning of text encoded in Unicode encoding format, that is, byte data. When reading this text data, it is made to be able to distinguish the data from Unicode from the first several bytes and which one is used as encoding format.
a--
--a
◇※？〇※◇？〇
a--
--c
H-Hakanashi, please explain this easier......
a--
--y
So, if you double click "index.html", you can see it.
a--
--c
It was really simple this time....
a--
--b
See, Himesaki!! You`re written "OK!" is shown in the browser!
a--
--a
Oh!! It`s in the browser!!
a--
--y
Gaaaaaaaaaaaaaaaaaaa
a--
--a
Sleeping again.
a--
--c
Is this lesson going to be fine....
a--
c--
--f
Next, we will use the Boot Camp!!
a--
--e
It`s Bootstrap....
a--
