シェアする
HTML Beginner Summary - Images: Japanese
Hey everyone!
This is the final article of the HTML beginner's course. You've worked so hard to get here — thank you for staying with us all the way through! This is a full summary, so use it to check up on anything you may have forgotten.
Tags and Elements
A tag is something written with '<>' surrounding it, like '<body>'. Some tags require a closing tag, and some do not. Here's a diagram of tags and elements.
Details: this article
Comment Out
Anything wrapped between '<!--' and '-->' becomes a 'comment'. Here's an example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- Main content starts here --> <!-- Main content ends here --> <!-- Additional content starts here --> <!-- Additional content ends here --> </body> </html>
Details: this article
The title tag
The 'title' tag lets you set the title of the HTML page. Here's an example.
<title>My First Website</title>
Details: this article
The p tag and the br tag
The p tag displays a paragraph of text. Use the br tag when you want to insert a line break. Here's an example.
<p>I'm working on my first website.<br>But I'm hungry, so I'll grab some food first.</p>
Details: this article
The img tag
The img tag lets you display an image. The common image formats used on the web are 'JPEG', 'PNG', and 'GIF'. Here's an example.
<img alt="sample image" src="sample.jpg">
Details: this article
Paths
A path is a way of specifying where a file is located. Common options include: 'URL' for absolute paths, './' for the current folder, '../' for one level up, '/' for paths from the document root, and '//' for protocol-relative paths. Here are some examples.
<img alt="" src="https://wp-p.info/reps/html-beginner/img/test.jpg"> <img alt="" src="./test.jpg"> <img alt="" src="/test.jpg"> <img alt="" src="//wp-p.info/reps/html-beginner/img/test.jpg">
Details: this article
The a tag
The a tag lets you create a hyperlink. The 'target attribute' controls how the destination page opens. Here's an example.
<a href="http://google.co.jp/" target="_blank">click here</a>
Details: this article
h1 through h6 tags
The h1 through h6 tags create headings. Here's an example.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Details: this article
Tables
Tables are created using 'table', 'tr', 'th', and 'td' elements. The 'colspan' attribute merges cells horizontally, and 'rowspan' merges them vertically. Here's an example.
<table>
<tr>
<td colspan="3" rowspan="3">colspan and rowspan both set to 3!</td><td>Cell 2</td><td>Cell 3</td>
</tr>
<tr>
<td>Cell 2</td><td>Cell 3</td>
</tr>
<tr>
<td>Cell 2</td><td>Cell 3</td>
</tr>
</table>
Details: this article
Lists and Definition Lists
Regular lists are created with the 'ul', 'ol', and 'li' tags. Here's an example.
<ul>
<li>
<p>Item 1</p>
<p><span>this is a span</span></p>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Definition lists are created with the 'dl', 'dt', and 'dd' tags. Here's an example.
<dl>
<dt>Term</dt>
<dd>Write the description here</dd>
</dl>
Details: this article
Indentation
'Indentation' means adding whitespace at the start of a line to create visual hierarchy, making the code easier to read. Be careful about unintended whitespace when indenting. Here's an example.
<ul>
<li>Cat</li>
<li>Dog</li>
<li>Horse</li>
</ul>
Details: this article
The div tag and the span tag
The 'div' and 'span' tags carry no semantic meaning. They're mainly used when you want to group elements together. Here's an example.
<div>
<p>This is a p tag.</p>
<p>This is also a p tag. <span>This is a span inside a p tag.</span></p>
</div>
<div>This is a div tag.</div>
Details: this article
That's all for the summary!
As for what to learn next — if you'd like to keep going on this site, the CSS beginner's course is the natural next step.
With CSS, you'll be able to style your pages and create all kinds of beautiful websites. The range of things you can build expands dramatically once you add CSS to your HTML skills. If you're feeling good about HTML, go ahead and start learning CSS too!
That's all from us. Hope to see you around!
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
