How does the website work? Flow of Web page creation-release

Well, let's study how to make a website from scratch! Please be assured that even beginners, so I will explain carefully.
First of all, let's understand how the website you usually visit is published .

 Contents of this article

1.What is the Internet? What is the Web?
2.Structure of the Web World
3.Flow of viewing web pages
4.Flow of creation and release of website
5.What should I learn after all?
6.[Reference] Differences between websites, webpages and websites.

1. What is the Internet? What is the Web?
Let's start with a slightly wider story to make it easier to understand.

1-1. What is the Internet?
What is the "Internet" that you usually talk to?

The Internet is a mechanism that connects computers to each other and exchanges all kinds of information.

 This "connection between computers" is the Internet.

1-2. What is the Web?

I often hear the word Web, but what is the difference with the Internet? The Web is actually one of the many features of the Internet.

It is an image that "the Web is included in the Internet". In addition to the Web, the Internet has various functions such as mail and file transfer.

And what you always see on the web is the "web" . This page you are looking at is also on the web.
The Web is the most important feature of the Internet, so I think many people use it in the sense of Internet = Web.

2. Structure of the Web World
Let's look at the Web in more detail.

Web image ?? High-rise buildings

The web world is like a group of skyscrapers. There are many rooms (web sites) in the building.

Each room is assigned an address (? URL).
If you put the information that you want to make public in this room, people can come to see through search engines and links.

In this way, a convenient Web world is built up by having a lot of people gather information in rooms, link the rooms with each other, and have them registered as search engines.

3. Mechanism of web page
What kind of flow is the Web page that we usually see on a PC or smartphone?

It's a bit more difficult, but you don't have to understand everything suddenly. Somehow let's keep in mind about what it is like this.
3-1. Web page is displayed by interaction with server
Software and computers that publish information on the Web are called Web servers .
On the other hand, those who receive information from a web server are called web clients . We surf the web, we hit the web client.

You can see web pages by exchanging information between your web server and your web client such as your smartphone.

For example, when everyone accesses by entering a Yahoo URL from a smartphone, a request has been sent saying "Show to Web Server!".
The server responds with "Yahoo's page, please!"

3-2. View web pages in a browser!

Web pages are basically viewed using a "Web browser".

Internet Explorer, Google Chrome, Safari, etc.

This web browser helps us (the web client side) to view web pages comfortably.

Web pages can be viewed comfortably by browser
The information of the web page we received from the server is written in "Language for computer (code)".

I can not decipher the language (code) for the computer one by one. It is the browser that changes and displays such "language for computers" into "language for humans".

4. Flow of creating and releasing a website
It is finally the main subject. How do I create a website from scratch and publish it? Here, I will introduce the rough flow.

1

Write the content of the page in HTML document
Write the text and skeleton of the page in the language of HTML. HTML is written in the form of "enclosing a sentence with a specified tag". I will explain carefully how to write in Salwaka.

2

Write page design in CSSIt will be done almost simultaneously with 1. We will write the design information of the HTML document created in 1 in the language of CSS. CSS allows you to change the color of the text, draw lines, and adjust the size of the margins.

3

Prepare a serverThe information of the web page was made in 12. You need to have a server to publish it for everyone to see. You can create your own server , but renting from a vendor is easier. In terms of image, it feels like renting a room in a building.

Four

Get domainYou can decide your own website address. This address is called a domain. It is a guy who often looks at "~~ .com" or "~~ .jp". You can get your favorite domain through the domain administrator (NG already used).

Five

Upload web page information to serverIf you use file transfer software (= FTP software), you can easily upload data from your own PC to the server .
Upload web page information such as HTML document and CSS document created in 12 to the server using file transfer software.

6

You can access the page by entering the URL!Once you've done this, everyone can access the page by entering a URL in the browser.

7

Spread web pagesI would like many people to read the web page you have published. Therefore, share on SNS such as Twitter and facebook, or set it to be displayed on search engines such as Google. We will explain these steps in the future in Salwaka.

5. After all, what should I learn to create a website?

Assuming that the flow until the website is released is understood, what do you have to learn in the end?

5-1. If you want to acquire web design skills

What you need to learn at a minimum

Writing HTML : You need to learn to create a web page skeleton.

Writing CSS : You need to learn to make your web page design fashionable.

With these two pieces of knowledge, you can create a great web page. There is no need to sit back and learn the rest of the procedure. If it is gugu, it is because it will explain how carefully.

After learning these two, let's learn additional languages ??such as Javascript if you want to add motion to your web page.
5-2. If you just want to make a blog ...
If you use blogs such as Hatena Blogs , Ameba Blogs , Livedoor Blogs , you can create a blog by simply skipping all the complicated procedures above. It's free to start and it's easy to write and publish articles. There are a lot of design templates, so you can create a fashionable blog.

5-3. If you want to create a stylish blog with Wordpress ...
WordPress is a tool that makes creating and updating websites easy. This Salwaka is also operated using Wordpress.
Even if you start a blog using WordPress, you can not customize the design to your liking without knowledge of HTML and CSS.

 Conclusion
Let's learn how to write HTML and CSS first!

[Reference] What is the difference between home page, web page and web site?

Last but not least. Now, in this article, the words "web page" and "web site" have been issued repeatedly. I think you can grasp the image of the website and the web page, but what is the difference from the "home page" ?

What is the difference?

Web page: One page. For example, this article you are looking at is a web page.

Website : A collection of multiple web pages. It is one Web site including the page of the article and the top page.
Homepage : This is what many people misuse. Originally it was a word pointing to "the page displayed first" when launching a browser, but now it seems that many people use it in the meaning of "web site".

Web pages, websites, homepages are a bit confusing, but keep in mind if you are learning web design.

Web site mechanism Summary

 Summary

Web is one of the features of the Internet

When viewing a web page, the page information is received from the server and displayed in a browser

First make HTML and CSS statements to make a web page

Prepare server for publishing web page and get domain

Upload web page information such as HTML and CSS to the server with file transfer software

If you acquire web design skills, you will learn how to write HTML and CSS