What is HTML
This is a very very basic introduction to HTML, you many people could just actually skip, only if you really want to know some basic HTML staff.
HTML (HyperText Markup Language) is actually a computer language that display the most basic elements in a website (Here is a little fun side story, html was actually developed by a physicist Tim Berners-Lee during the contract of build CERN).
A basic html file should contains the element below.
1. html tag
2. head tag
3. body tag
<html>
<head></head>
<body></body>
</html>Each of the pair of <xxx></xxx> is a code tag, <xxx> is an opening tag and </xxx>is a closing tag, also there is a kind of tag named self closing tag which do not has a closing tag, but only a slash “/” at the end.
You could put other code tag inside each block, but there are some rules needed to be followed.
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Article | 42KM</title>
<meta charset="UTF-8">
<meta description="This is a very basic article regarding HTML" />
<link rel="stylesheet" href="sample.min.css" />
<body>
<script src="sample-needed-asap.min.js"></script>
<script src="sample-needed-later.min.js" async></script>
</body>
</head>- <!DOCTYPE html> is a way to define what kind of document this file is, without the define, some older browser may not able to work properly. This is the way in html5, and be reminded it is case sensitive.
- meta tag and CSS tag should always being put inside head tag, and they are all self closing tag. Also title tag is the text that being display on the tab of your browser, what you in side the tag will be displayed on the tab and description is mainly for display in search engine search result. For some people, you may already know Google does not support meta keyword for many years, so just forget those keywords.
- All CSS related code should be put inside the head block(no matter its internal or external style sheet, btw inline CSS should always be avoid if possible), since browser render the code from top to bottom, if you want the style being display ASAP after the browser start loading your webpage, you should put it as top as possible (ATAP, haha).
- Normally we should put the Javascript just before the closing body tag(make older browser load faster), and if the Javascript file is not a file that must be loaded at the beginning, try to add an async attribute(tell the browser does not wait for this file to finish download, but download other things below it now) inside the tag. The reason we should put Javascript at close to the end of body tag is, no matter what you js file do, most likely they are interacting with the DOM (document object model, you may consider this is the whole HTML code, if you want to know more, please click here), so if the HTML code is not yet being all downloaded, your Javascript may not able to do anything and could generate error to break your whole web page.
- Always remember to include character setting (charset="UTF-8")in the meta tag, since some characters like symbol or languages other than English may not able be displayed properly if you forget to include this setting, if you want to have a look, well you can try use some Chinese characters and try in some IE browser.
- Some of you may already notice there is a .min text inside the filename of Javascript and CSS files, that is representing those files are already being minified (read more in here, and be reminded to keep the not minified version CSS and Javascript file for the future uses). Minified is a technique to reduce the file size of files, since every time browser download a file, the file size is a key indicator of the downloading speed. If your website downloadable size is smaller, not only visitors could see the content of your site faster, Google will also give a better score for your SEO.
OK, let’s finish the basic of HTML(some are actually best practice) for now and do some really practice, you may copy the code and use your own browser to follow, and I will use the original code before.
sample.min.css code, just put this file in the same directory of the html file.
*{margin:0}a{color:#FFF;text-decoration:none}body{font-family:Arial}h1{margin-top:30px;margin-bottom:30px;text-align:center}header{height:80px;background-color:#C30}footer{height:100px;background-color:#999}footer,header{width:100%;position:relative}header ul{right:15px;top:50%;transform:translateY(-50%)}footer ul,header ul{list-style:none;position:absolute}header li{float:left;margin-right:10px;margin-left:10px}footer li{padding-top:15px;padding-bottom:15px}.image-block{width:100%;height:500px;background-size:cover;background-image:url(https://cdn-images-1.medium.com/max/1096/1*28-1lYrYTQoLhi87mllgBw.png)}sample.-needed-asap.min.js, put this file in the same directory of the html file too.
let targetBox=document.getElementById("js-text-box"),repeater=setInterval(generateText,1e3);function generateText(){targetBox.innerHTML+=" Hello World!"}generateText(),setTimeout(function(){clearInterval(repeater),console.log('text generation stop now')},1e4);<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Article | 42KM</title>
<meta charset="UTF-8">
<meta description="This is a very basic article regarding HTML" />
<link rel="stylesheet" href="sample.min.css" />
<body>
<h1>Basic HTML Introduction</h1>
<p></p>
<script src="sample-needed-asap.min.js"></script>
<script src="sample-needed-later.min.js" async></script>
</body>
</head>
There are much more html tags for you to explore, but remember there are some tags already being deprecated in HTML5, so please remember do not use them, and the here is the reference.
After you finished the setup, you could see something like below and see there is an area that the text ‘Hello World!’ being kept generating and be stopped after 10 seconds.
If you fail to include the CSS file, the layout will be broken, or if you fail to include the Javascript file you will not see the text kept being generating.
OK, see you again next time.
