HTML basics
The most basic tags
The heading of evry page is <!DOCTYPE html>, but it is only formal from html 5.0
here is a screenshot:
This is a pair tag which needs to be written at the start and end of your html code.
At the end you will type this: </html>. This tag tells the browsers not to read the <> as plain text.
This tag defines the heading code. The heading is ended with </head>.
Inside this pair shold be main stuff like the charsetting, title, favicon and style of the page
<body> is also a pair tag. It defines the bigger part of the page.
Here should be all the text, blogs, ads, lists and simmilar
This tag is also pair. You place it inside the <head> tag. Whatever you write inside
will be written on the tab icon in the browser. Do not place HTML code inside this.
Other basic tags
<h1> - <h6>Also a pair tag. Theese are different types of text titles. h1 is the biggest, h6 looks like bold text.
They have automatic formatting and can't be on a same line with other text. Dont use often.
This isn't a pair tag. It's used to break a line at any place. No need to use after <p> or <h6> tag.
You can also write it like this: </br>
<p> is a paragraph. It's ended with </p>. The end of the tag automaticaly breaks the line.
This is how to make links to other pages. Used like this: <a href="somehtml.html">something</a>
This will look like this: something
Stands for "unordered list" and "ordered list". Each item of the list has to be surrounded with <li> and </li>.
Ul has bullets before each item, ol has numbers. The bullets can be changed to icons. Example:
- First thing
- Second thing
<img>
<img> is not a pair tag. Should be written like this: <img src="image_name.xxx">
Its also possible to add extra tags, like width, height, opacity, ... The image code will then look like this one:
<img src="something.gif", width="340px", height="40%">
This is a not pair tag in the head of the code. Its used to link your page to other stuff, like icons or stylesheets
Example:
<link href="style.css" rel="stylesheet" type="text/css" media="all"> makes the page use the specified style,
<link rel="icon" href="http://www.iconj.com/gif_icon.php?pid=nwqq62n4zs" type="image/gif"> will make the page icon (at the tab bar) look like the one from this page
<meta>It's another non-pair tag in the head of the page. it's something like a sign. It's not needed in the page, but it's good to have
How is it used:
Description: <meta name="description" content="My super page.">. Google will show this if it has the searched word.
Keywords: <meta name="keywords" content="html, super stuff, ads">. This will help search engines find your page. Google ignores this.
Language: <meta http-equiv="Content-language" content="en"> sets automatically the page language.
Charsetting: <meta charset="UTF-8"> tells your browser what coding does your page use.
Redirect: <meta http-equiv="refresh" content="6;URL=http://www.rudyhoivt.neocities.org"> is automatical page redirect code.
Mobile friendly page: <meta name="viewport" content="width=device-width,initial-scale=1"> tells phones to zoom the page
div stands for divission. This pair tag is used to divide the body of the page into different parts.
Theese parts can be positioned and styled differently. Eg. this page is divided into two parts:
the ad banner (<div id="ad">) and the main part (<div id="main">). The id is used in the
css style code as an (you guessed it) identifier.
Pair tag wich turnes the text bold.
This is a pair tag wich makes the text slanted
Underlines text, and is pair
The three tags above can be mixed:
<u><i><b>something</b></i></u> = something