Scribd
Upload
6 views

Role of HTML and CSS

Uploaded by

Simo Renato
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Role of HTML and CSS

Uploaded by

Simo Renato
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

ROLE OF HTML and CSS

1. Goal
 Understand what HTML and CSS are.
 Understand the importance of writing correct HTML.

2. How is the website displayed?


The process of displaying a website

What is happening when you browse a website on your PC or


smartphone?
Let's try accessing thecafé's websiteusing Chrome.

This website is a fictitious website created to help you learn HTML and
CSS from now on.
From the navigation at the top of the website, you can go to the menu
page and the contact page.
Each of these pages is called a Web page and a Web site is a collection
of multiple Web pages.
ROLE OF HTML and CSS

Accessing this URL will send back data stored at a location on the
Internet called https://demohtml.diveintocode.jp/demo1/index.html .
The URL is the location on the Internet where this data is stored.

The data sent back is read by the browser on your PC, and this is what
displays the page of the cafe site you are looking at.
So, what kind of data is this sent back to us?

Let's take a look at the contents of the data in Chrome's Developer


Tools.

Chrome has features for developers (Developer Tools).


Using this, let's take a look at the actual contents of the web page being
displayed.

From the menu bar, select

For Mac
View > Develop/Manage > Show Source

For Windows
Google Chrome Settings > Other Tools > Developer Tools
ROLE OF HTML and CSS

This is HTML.
If you look closely, you can see that the characters and sentences
displayed on the web page are also described in the HTML file.
HTML is the original document of the web page. You will be able to learn
and create HTML from now on.

What is HTML

A document has a structure.


For example, take a look at this section.
ROLE OF HTML and CSS

The layout is neatly laid out so that "CONCEPT" is the title, "DIC Coffee's
Commitment" is the subtitle, and "DIC Coffee's coffee is made from
Rwandan coffee beans." is the main text.

Now, what if the same content is displayed in the following text?

CONCEPTDIC Coffee's CommitmentDIC Coffee's coffee is made from


Rwandan coffee beans.

In this case, the document structure is not known.


So, how can we show document structurewithout using layout?
For example, suppose the following sentence structure is expressed as
follows.

<TITLE> CONCEPT <SUBTITLE> DIC Coffee's commitment <TEXT> We use


Rwandan coffee beans.

I have tried to show <title> 、 <sub-title> , <body> with the words as they are.
It is hard to see, but you should be able to understand it.
A document like this, in which the document structure is expressed only
by letters and symbols without layout, is called "Hyper
Text". Markup is the process of describing characters and symbols to
make the original document into hypertext
HTML stands for Hyper Text Markup Language
HTML is a document that has been marked up into hypertext so that
computers can understand the document structure.

What is CSS
ROLE OF HTML and CSS

CSS is an abbreviation of Cascading Style Sheets, and it realizes the


design of the website by setting the appearance style such as color and
size in addition to the layout.
HTML files alone are very hard for humans to see, so we use CSS.

It should be easier to see if it is laid out like the image on the left.
CSS does this layout.

Let's check how the CSS is actually written.


Launch the Developer Tool.
ROLE OF HTML and CSS

CSS is displayed at the bottom of the screen.

The layout is achieved by specifying the size of the text and how to
arrange it.
We will now learn about CSS as well.

A website is a collection of many files

As explained at the beginning, "Each page is called a web page, and a


collection of multiple web pages is called a website." A website is made
up of many files.
In addition to the HTML / CSS that you have learned so far, it is
composed of various files such as images and videos.

3. Correct websites are searched correctly


How websites are searched
ROLE OF HTML and CSS

Well, I've taken the cafe website as an example so far, but probably no
one knew the URL of this website originally.
Even if you create your own website and publish it on the Internet, you
can only find it if you know the URL.
In order to be found, it must be displayed in the search results by
services such as Google and Yahoo !.

So how do you get it searched?


On the Internet, a program called a crawler crawls websites to collect
information.
The information collected is various information such as what the
website is about, what kind of information is posted, when it was
created, and so on. It then stores that information in a database and
displays the appropriate website as a result from the information in that
database when it is actually searched.

Properly convey document structure to both humans and computers

With the ability to write CSS and create beautiful looking websites, some
people don't care about the HTML document structure.
In fact, when you're browsing a website, you rarely see just HTML, and
even if the HTML has a strange structure, it doesn't look good if you can
lay it out with CSS.

However, as explained in "How Websites Are Searched", humans are not


the only ones viewing websites. I also see a program called a crawler.
Websites that the crawler does not understand correctly will not be
searched correctly.

The idea of correctly marking up HTML based on its meaning based on


the document structure is called semantic HTML.
Don't forget to be aware of Semantic HTML as you learn and become
more fluent in different languages.

4. HTML5 and CSS3


History of HTML and CSS

I think you're browsing a website in Chrome right now, but Chrome isn't
the only browser that can display your website. For Mac users, safari was
often used, and for Windows a while ago, Internet Explorer was often
used.
ROLE OF HTML and CSS

In fact, not all browsers were able to display HTML and CSS correctly.
HTML was invented in 1989 by Tim Berners-Lee, who worked at the
European Organization for Nuclear Research (CERN).
The first version of CSS was recommended in 1996 by the W3C, an
organization founded by Tim Berners-Lee to promote the standardization
of technologies used on the Web (a recommendation is an official
announcement).

However, when CSS was recommended, Internet Explorer, which had a


share in the browser at that time, did not support CSS, so the layout was
made using only HTML. Many websites had incorrect document structure
because the markup was for layout purposes.

After that, Internet Explorer gradually supported CSS, and with the
advent of new browsers that support CSS such as Safari and FireFox, the
roles of HTML that describes the document structure and CSS that
describes the layout can be separated. I did.

Introducing HTML5 and CSS3

In the history described so far, new versions of HTML and CSS have been
recommended several times.
And now, the newest and mainstream are HTML5 and CSS3.

HTML5 was recommended in 2014 and is a major improvement over


previous HTML.
CSS3 isn't officially recommended by the W3C, but it's called CSS with
new features added to it.
From now on we will also learn HTML5 and CSS3.

Can I use

Browsers that support HTML5 and CSS3 are Chrome, FireFox, Safari, and
Edge as of June 2020.
However, HTML and CSS are still evolving. Even the four browsers that
support HTML5 and CSS3 may not be compatible depending on the
method of description.
If you are wondering whether or not your website is compatible with any
of these browsers, you can check the Can I use website
ROLE OF HTML and CSS

For example, if you look at the HTML tag for displaying a video called
"iframe", it looks like this.
ROLE OF HTML and CSS

If it is green, it corresponds.
Some people may not know how to use it yet, but we will touch on it as
we learn, so let's get used to it gradually.

5. Summary
 HTML is a document in which the document you want to display
on a Web page is marked up in hypertext so that the computer
can understand the document structure.
 CSS sets the style of appearance and enables the design of
websites.
 In order to be searched correctly, it is important to describe it in
the correct document structure.

6. Official document / reference information


1. W3C

2. Can I use

You might also like