Creating your first page
First, I highly recommend getting a free account at Neocities (to get a website subdomain like mine, which is cerebraldatabank.neocities.org). Click here and click "Continue anyway".
If using Neocities (or another web host service), open index.html (or create another file, whatever you want). If not, create a new file called "my_first_page.html" locally on your computer, and open it with Notepad (for Windows, right-click it, hover over "Open with…", and click "Notepad").
All HTML documents should start with a DOCTYPE declaration, as shown below.
<!DOCTYPE html>
The DOCTYPE declaration must be the first line of the HTML document.
Most HTML elements (also called nodes) have an opening and closing tag, as shown below.
<tag>Content</tag>
The opening tag is <tag> and the closing tag is </tag> (note the slash preceding the tag name).
Directly after the DOCTYPE declaration there should be an <html> element, as shown below.
<!DOCTYPE html>
<html></html>
An HTML document is made up of two main parts, the head and the body (explained later). So let's add elements for those:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
The content of the <head> element is information about the page that is ususally not visible to the user. The content of the <body> tag is what is displayed on the user's screen when they visit your website. Try editing the below code to see live results in the box next to it.
Markup Tags
The tag above is the <p> tag, which denotes a paragraph. There are many other tags, as shown below.
<h1>1st-level heading</h1>
<h2>2nd-level heading</h2>
<h3>3rd-level heading</h3>
<h4>4th-level heading</h4>
<h5>5th-level heading</h5>
<h6>6th-level heading</h6>
<p>Paragraph</p>
<strong>Strong (bold) text</strong>
<em>Emphasized (italic) text</em>
<main>Main content of page</main>
<span>A piece of text that should be stylistically or otherwise different</span>
<br> <!--Line break-->
<hr> <!--Horizontal rule-->
<aside>Content that is aside from the main content but still related</aside>
<nav>Navigation menu</nav>
<article>Article content</article>
<section>Section (e.g. a section of an article with its own subheading)</section>
<code>Code</code>
<pre>Preformatted text (line breaks, spaces, etc. are preserved)</pre>
<sup>Superscript text</sup>
<sub>Subscript text</sub>
<del>Deleted (strikethrough) text</del>
<ins>Inserted (underlined) text</ins>
<samp>Sample output from a computer program</samp>
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
The HTML for a basic article might be:
<!DOCTYPE html>
<html>
<head>
<title>My Article - My Website</title>
</head>
<body>
<article>
<header>
<h1>My Article</h1>
</header>
<section>
<h2>My 1<sup>st</sup> Section</h2>
<p>The content of my first section.</p>
</section>
<section>
<h2>My 2<sup>nd</sup> Section</h2>
<p>The content of my second section.</p>
</section>
</article>
<aside>
<h2>You Might Like:</h2>
<p>Related links.</p>
</aside>
</body>
</html>
HTML entities are used to encode special characters. Notice how, outside of <pre> elements, HTML automatically downsizes all consecutive spaces? So <p>Welcome... to my website!!!<p> becomes "Welcome... to my website!".
An HTML entity can have the following syntax:
&entityname; /*Only some HTML entities have entity names.*/
&#xunicode-hexadecimal-codepoint
&#unicode-decimal-codepoint
For example, the TM (trademark) sign (™) could be either of the following:
™ (displays as ™ in your browser)
™ (displays as ™ in your browser)
™ (displays as ™ in your browser)
Therefore, to prevent the space downsizing, we will replace each of the spaces with a non-breaking space (NBSP). So this:
<p>Welcome... to my website!!!<p>
will turn into this:
<p>Welcome... to my website!!!<p>
Continue →