Basic usage of html
Thanks
- Thanks to cainiaojc.com, for there won’t be this note without it. And the reason I put “Thanks” here is that I would not like to see you waste much time on my notes if you really know you can do better with other materials, but there’s also a possibility that you will get much from this concise but detailed notes. OK, up to you, wish you a happy html trip 😄
Prologue
- HTML is the abbreviation of “HyperText Markup Language” (超文本标签语言), which is widely used to create website. We will see how cool it is soon. And, here we go 😄
Setting
- Well, I perfer to use vscode to do almost everything about coding (vscode yyds, emmm, except C/C++), so let’s get some “Extensions” for html. Surprisingly, we only need a “open in browser”, which look like this
-
Then let’s have a test first.
- Make a empty .html file in a folder whichever you like
- Tap a ‘!’ (in English), and press “Enter”, invincible vscode will give you a template
- Type anything you like into the row below “< body >”, maybe “Hello World” or something like that. Well, I will use “THE WORLD!” (yes, I’m a JOJO fan)
- Finally, right click your mouse, and choose “Open In Default Browser”
HOHO~
- Now, you have understand how to code html in vscode. It’s high time to embark on our expedition
Brief Introduction
-
HTML uses tags to connect internet source into a whole. But please remember it’s not a programming language but a markup language (标记语言), which is actually a set of tags. And the tags have <> around them and usually appear in pairs (< something > begin and < /something > end)
Here I must mention that there are not spaces between the <> and the strings, but there do be in this notes for it’s a markdown file, I intentionally making the mistake in order that the <> won’t disappear in this file
-
An example will be a great teacher, so let’s parse the template we have above
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> THE WORLD! </body> </html>-
< !DOCTYPE html > declare the file is a html file and the version is HTML5 (if you want to use other version, like HTML 4.01, you can replace the “html” in the by "HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd” ")
-
< html > is the root element, it mark the beginning of the file together with < /html >
-
in addition, we can use < title > < /title > to modify the name of a website, like
-
-
< head > it includes some meta data (To be honest, I don’t know much about this), something about the encoding method, like utf-8 (as you see), which avoids showing your Chinene characters in a mess
-
< body > all the things show out in your web page (equivalent to html file) will be in this
-
tip: you can use F12 to see the html file of the web page in your browser
-
Here we have gone through all the tags in our template, but you might ask do all these thing have much to do with create a beautiful web page, well, not. But I think you may want to know this, it’s to some extend helpful.
-
OK, no more waste words, let’s what can we do in < body >
Into Body
-
here I want to jump over some boring definition of element (it’s just something in the <>), most elements are able to own attributes (like color or something else). But you don’t need to put much effort on this for you just need to know how to use. I will merely focus on what’s interesting next.
-
There are 5 basic usages as following
-
Heading - there are six levels of handing, which can be used in this way
<h1> Anime </h1> <h2> JOJO </h2> <h3> Jonathan </h3>It will look like this
-
Paragraph - use < p >, it will honest reflect what you write in the file, except it will ignore your wrap(换行), actually it will never do this without some trick (go to Appendix-1). Well, but there will be wrap between different < p > < /p >
<p> STAR PLATINUM ! </p> -
Hyperlink - use < a href=“somewhere” >, I guess you probably not your local folder, so use https: or something like that in the front of your website address
<a href="https://baidu.com"> Google or Bing, whatever, not Baidu </a> -
Image - use < img src=“addr” width=“num” height=“”>, the addr maybe in your local folder, for I fail to show a picture of DIO online😢. And remember that don’t add ‘,’ into the <>
<img src="./pic/微信图片_20240316105502.png" width="350" height="150">If you only choose to use one of ‘width’ and ‘height’, the shape of the pic won’t change, only the size varies.
-
table - watch carefully for what happen next might be a little complex
<table border="2"> <tr> <td bgcolor="red">Jonathan</td> <td>Joseph</td> <td>Jotaro</td> </tr> <tr> <td bgcolor="yellow">DIO</td> <td>Kazi</td> <td>DIO</td> </tr> </table>< tr > means row and < td > means col. You might guess that border means how thick the border of the table is and bgcolor means the color of the grid, I must admit that you are right🎆
- Appendix
-
wrap(换行), it actually use an empty element - < br > or < br/ > (recommand) (remember no endding). This will help you a lot if you try to combine the tag mentioned before
- < br > can be used directly in < body > or between < p > and < /p >
-
horizontal line - < hr > or < hr/ >, well, I won’t tell you that it will wrap automatically
-
explanatory note - you can quickly add this by choosing as much line as you like the press “Ctrl + /” in vscode, or just tap like this
<!-- THE WORLD -->You will see it’s the same as the explanatory note in markdown
-
text formatting, you want Bold ? you want italic ? you want s u b _{sub} sub and u p ^{up} up, or
cout << "you are a coder";look at here and look at me
<strong> Bold </strong> <em> italic </em> <code> cout << "you are a coder"; </code> <sub>sub</sub> <up>up</up> -
space symbol, html is notorious about its space kill, namely it will only show one space in the web page even if you have tapped hundreds of it, just like what markdown does. But luckily, we have some trick to somehow by pass this killer. That is, the family of ‘sp’
let me test the nbsp emsp emsp thinsp doneWhat a big family, remember to add ‘;’ at the back of each of them (well, actually vscode will do this for you), and ‘& nbsp;’ is the most common used one
-
target (hyperlink attribute), you can use target attribute in < a > to assign where the page will open
<a href="https://github.com" target="_blank">open a new github page </a>- _self - default, open in current page
- _blank - open in a new page
- _parent - open in father page (I don’t know much)
- _top - open in top page (I don’t know😢)
-
id, the way to use it is very similar to a bookmark, where you put first like this. Id is a common attribute, which means we can put it in almost every element <>, such as < h1 > and < table >. But name is a specialized attribute of < a >, the way to use is the same as id
<a id="not_click"> bookmark </a> <a name="dio"></a> <!-- it can be empty -->then you can click these to jump back to the position in the same or the other page
<a href="#not_click"> go to bookmark </a> <a href="#dio"> ko no dio da! </a>
-
Until now, you are already able to do much thing on the web, don’t hesitate to go for it.
-
One more thing ~, remember to use lowercase letter in html even if sometimes it support capital, that’s a good habit
-
OK, as you guess
To be continued…
