Every HTML document starts with a special
HTML document consists of HTML elements which are marked up with HTML tags. Every HTML element is marked up with a pair of an opening and closing tag, either a single empty tag which is a short version of such a pair. Also, HTML elements can be nested.
<p> This is a normal text </p> <p> <b>This text is bold</b> </p> <p> <i>And this one is italic</i> </p> <p> <b>This text is bold, <i>and this is bold and italic</i></b> </p> <p> <img src="/images/sam.jpg" /> <!-- This is a short version of HTML element --> <!-- And by the way, this is an HTML comment --> </p>
A mandatory part of an HTML document structure consists of thee HTML elements:
html is a root element of every HTML document. The purpose of
head is to keep a document metadata there, like document title, meta description, web page icon, CSS or RSS URLs, etc.
body is a visual part of the document, its body. Here is an example of very simple yet complete HTML document:
<!DOCTYPE html> <html> <head> <!-- Web page title --> <title>My First Web Page</title> </head> <body> <!-- Web page content --> Mommy, look! I'm a web developer! </body> </html>
There are about a hundred of different HTML tags total, however you don't have to learn all of them right away. In fact you need just a dozen of them to start.
title is a web page title, and this is all we need to learn about head elements at this point.
h6 are six levels of headlines. Just as in a newspaper.
p is a text paragraph.
img is a picture.
div is a general-purpose block, a division.
a is a hyper reference, the essence of an HTML document.
b is a bold text.
i is an italic text.
And that's it for now. Some of HTML elements have attributes. Those are additional element properties. For example, if you put
img element you want to specify where should this picture come from. If you put
a element you want to set where should that hyper reference link to.
<p> This is a nasty car: <img src="https://img1.stcrm.it/images/19846680/HOR_STD/400x/bugatti-centodieci-5.jpg" /> </p> <p> Google it yourself <a href="https://google.com">here</a> </p>
Note that line breaks inside the document don't break lines in the rendered HTML. To break lines you should use paragraphs, divs, and other elements which we'll discuss later.
OK, that's it for this lesson. At the end let's create a bigger web page and put there all we've learned so far. To view how's it look just create a file
page.html, put there your HTML and open it in your web browser or just doubleclick it in your file manager.
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>My first big web page</h1> <p> Hello there. My name is Sam and I'm a junior web developer </p> <p> One day I will get rich and buy <a href="https://www.bugatti.com/one-off/centodieci/">this</a> car: </p> <p> <img src="https://img1.stcrm.it/images/19846680/HOR_STD/400x/bugatti-centodieci-5.jpg" /> </p> </body> </html>