Tell me! How to write HTML
In “The basics of web production. How do you make it?” I told you that the Web is made in a programming language called HTML.
Here, I would like to briefly introduce how to write HTML.
basic form of HTML
First of all, there is a set phrase.
Think of the following as the basic form.
HTML
<html>
<head>
</head>
<body>It's a test.</body>
</html>
First, enclose the HTML in ‘<html>’ and ‘</html>’.
The part surrounded by ‘<‘ and ‘>’ is called a tag.
‘<html>’ is called html tag.
After that, when you see a tag related HTML, remember that it is the one surrounded by ‘<‘ and ‘>’.
The first that appears is called start tag, and the last is called end tag.
The end tag must have a ‘/’.
Some tags don’t need end tag, but many are enclosed with start and end tags.
Next, prepare the head tag and body tag in the html tag.
When writing something inside tag, you usually indent it using the tab key etc on your keyboard.
(It works without it, but there is such a convention to make it easier to see. ）
The head tag is where you write information about web page.
For example, title and description and CSS and Javascript used on the page.
Also, title is displayed in the tab of Internet browser, but basically, the information written in head tag is not displayed on web page.
What is displayed in browser is content written in body tag.
So, you write in body tag what want to display, but you will have to use various tags.
(Even if you write sentences without tags are displayed in browser.)
If you are using a PC, please create a text file and write as above.
After saving, open your internet browser and drag and drop it there.
You should see something like this:
If you open it in Safari on Mac, it may be garbled.
In that case, please add a sentence to specify the character code of the web page in head tag.
HTML
<html>
<head>
<meta charset="utf-8">← add this
</head>
</html>
As an aside, When I was just starting programming, I was a little impressed when the source code made by myself was work in browser.
It was a simple page, but I thought that I was able to actually make it even though I was usually a viewer.
Let’s use various tags
HTML has various tags. And web pages are created by making full use of them.
Tags tell information of web page to other person.(for example, engineer and search engines such as Google etc.)
Make sure you use it properly!
I introduce some typical tags from here.
I show sample code, so please write between start tag and end tag of body tag.
h1 tag
HTML
<h1>Article title</h1>
Tag for headings.
In addition to the h1 tag, the headings are from h2 to h6.
The higher the number, the less important it becomes.
For example, in the case of this page, the article title “Tell me! How to write HTML” is the most important content, so I wrote it with ‘<h1>’.
As a subtitle, “Let’s use various tags” used h2, and “h1 tag” used h3.
In general, the size of the characters depends on which tag you use.
The h1 tag is the largest and the h6 tag is the smallest.
However, you must not choose a tag by the size of character.
If you want to change size of characters, you can adjust them in CSS.
Use it in order from h1 according to importance in headline.
p-tag
HTML
<p>This is a p-tag.</p>
It means paragraph.
I think that it is probably the most commonly used tag when writing articles.
a tag
HTML
<a href="https://google.co.jp">Open Google</a>
<a href="https://google.co.jp" target="_blank">Open Google in a separate tab</a>
Tag for link.
You can go to the specified page by clicking on the character enclosed in the a tag.
‘href=’ is written in the tag.
It is called attribute.
You can think that attribute is option set to tag.
For example, href attribute of a tag has URL of document.
In the above case, jump to ‘https://google.co.jp’ when click “Open Google”.
Also, if you specify “_blank” in the target attribute, you can open in a separate tab.
It is effective when you want to introduce contents that is little different from main contents.
Use properly according to the purpose.
ol/ul tag
HTML
<ol>
<li>Put 2liter of water in a saucepan and bring to a boil.</li>
<li>Finely chop the leeks while you wait.</li>
<li>When it boils, add the noodles.</li>
</ol>
<ul>
<li>Ol tag has order.</li>
<li>Ul tag has not order.</li>
<li>Both of the above tags use li tags inside.</li>
</ul>
The ol and ul tags are bulleted tags.
Ol tag is used when order is required.
I think that it is good to use it when showing the procedure of something.
On the other hand, ul tag is used when order is not required.
Li tag is used inside ol tag and ul tag.
If you write as above, it will be displayed as follows on the browser.
As you can see, numbers will be assigned automatically when used ol tag.
And dot will be assigned when used ul tag.
img Tags
HTML
<img src="./image/test.png">
The tag that displays the image.
Write an image file path in src attribute.
A file path is where a file location.
In the above case, image file ‘test.png’ is display.
‘test.png’ will be in the ‘image’ folder at the same hierarchy as this html file.
(The first ‘.’ refers to the current hierarchy. In other words, it points to the location of this html file.)
This way of writing is called a ‘relative path’.
You can also specify like ‘https://shitakke.com/image/test.png’.
In this way, writing a URL to an image starting with ‘http’ or ‘https’ is called an ‘absolute path’.
By the way, the img tag only displays the image specified by src attribute, so end tag is not required.
table tags
HTML
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Hometown</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Taro Sato</td>
<td>Hokkaido</td>
</tr>
<tr>
<td>2</td>
<td>Franz Ferdinand</td>
<td>Glasgow</td>
</tr>
</tbody>
</table>
The table tag is a tag used when you want to display the content in table format.
In the above case, it will be displayed as follows.
Well, there are a lot of tags in the table tag.
To explain one by one,
the table tag has the attribute ‘border’.
You don’t have to it, but if you don’t put it on, the line will not be displayed, so I put it on for convenience.
Border is set to ‘1’. The higher the number, the thicker the line.
As child elements of table tags, there are thead tag and tbody tag.
Thead tag is a tag for writing information that is the heading of a table.
In the above case, ‘No.’ and ‘Name’ and ‘Hometown’ will be heading.
Tbody tag is where you write the data associated with the heading.
It is the actual contents of table.
Both thead and tbody tags have tr tags as child elements.
Tr tag represents one line of the table.
In the above case, the table consists of 1 line for the heading, 2 for the data part.
There are th and td tags in the tr tag.
These are called cells, and if you are using spreadsheet software such as Excel, you will get
an image, it will be one section on the table.
In the above case, the second column from the left is the ‘Name’ column, so the first row is the heading, and the second row and later the actual name is displayed.
Th tags are used as headings, they are usually used in thead tag.
Td tags are cell for data, it is used in tbody tag.
Let’s match the number of th tags and the number of td tags for one line.
If it does not match, the layout of the table will collapse.
div tag
HTML
<div class="card1">
<h2>Article 1</h2>
</div>
<div class="card2">
<h2>Article 2</h2>
</div>
Each of the tags that I’ve introduced were meaningful. But div tag has no meaning clearly.
Div tag is just a box.
This is used when you want to put something together.
Don’t you know if this is all?
I will explain in detail using sample code.
The sample code above encloses the headings in ‘Article 1’ and ‘Article 2’ with div tags, respectively.
In the above case, it will be displayed as follows.
It will look no different compared to nothing div tag.
However, if you load the following CSS into HTML, it will be displayed as follows.
CSS
.card1 {
margin-bottom: 2rem;
padding: 1rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card2 {
padding: 1rem;
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
Do you understand?
The first div has the class name ‘card1’ and the second div has the class name ‘card2’, and I wrote a style for each.
I put a shadow around it and make it like card. The second one looks like it’s floating with a shadow stretching out.
In this way, you can be treat as a separate by using div tag. You can be apply different styles to each one, and you can be control them in Javascript.
Abount CSS, I introduced in “Tell me! How to write CSS”. Please refer to this as well.
This is off topic, but HTML has inline and block elements.
For example, inline elements include <a>, <strong>, <img>, <span> etc. Block elements include <p>, <table>, <div>, <article>, <section> etc.
Inline elements are used in content and do not divide the content.
Block elements group their contents together. It is for separating contents.
Div tag belong to block elements.
It is used when you want to grouping without using other block elements.
Div tag tend to be used a lot without thinking deeply, because it is convenienced.
However, you should consider if there is another suitable one.That’s the better way.
Summary
I introduced what is often used, because i can not explained all tags.
I think that you can do a lot of things with this alone, so please try writing various things!
In addition, HTML is just a document that display on web page. therefore, It may not be arranged as you think.
No problem, you can adjust design of the document by using CSS. So if you want to know how to write CSS, please refer here as well. “Tell me! How to write CSS”.
Shitakke!
- HTML is written by enclosing it in tags
- ‘h1-h6’ tags are meaning heading
- ‘p’ tag is meaning paragraph
- ‘a’ tag is meaning link to other document
- ‘ol/ul’ tags are meaning bulleted
- ‘img’ tag is meaning display image
- ‘table’ tag is meaning table format
- ‘div’ tag is used when you want to group something
- keep it mind that choose right tags to use
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy