Beginning HTML
Websites 1
There are more than a billion websites on the internet. From massive services like Facebook ...
Websites 2
... to simple websites like blogs, communities, and discussion forums.
Websites 3
But no matter how complex or simple, most websites are written in HTML.
Let's have a look behind the scenes of this website.
<html> <body> Welcome, friend! </body> </html>
Look at that! This bit of code around Welcome, friend!
already makes a website.
HTM-what?
HTML stands for Hypertext Markup Language. With HTML code, we can tell web browsers how to display a website.
Web browsers
Web browsers like Chrome and Safari know how to read HTML code and display websites based on the code.
Let's make Hello, World!
display in this website.
<html> <body> Hello, World! </body> </html>
Nice! These cryptic words seem to tell the browser to display Hello, World!
.
Structure
HTML code has a special structure. For example, it begins with the word <html>
.
<html> <body> Hello, World! </body> </html>
There! With <html>
at the beginning, the web browser knows that it can expect HTML code.
Tags
<html>
is a tag. Tags help the web browser figure out what to make of any text that's before or after them.
Can you remember another tag?
<body>
and</body>
Great! We'll find out what the <body>
tag does in a minute.
Angular brackets
Tags begin with a <
sign and end with a >
sign.
<html> <body> Hi, I'm written in HTML. </body> </html>
Sweet! Tags are hard to miss with those angular brackets around them.
Pairs
Tags often come in pairs. If you see <html>
, for example, chances are that there's a similar tag close by.
<html> <body> Hi, I'm written in HTML. </body> </html>
Fantastic! The <html>
tag has a sibling: </html>
.
Beginning
These tag pairs consist of an opening and a closing tag. Opening tags use a <
sign, a special word, and a >
sign.
<html> <body> Hi, I'm written in HTML. </body> </html>
Great stuff! All HTML opening tags follow the exact same pattern.
Ending
Closing tags have an extra character before the special word: a /
sign.
<html> <body> Hi, I'm written in HTML. </body> </html>
See that? The /
sign closes the tags.
Using tags
<html> <body> Hi, I'm written in HTML. </body> </html>
Nice! You're getting good at this.
A closing tag has a /
sign and goes after an opening tag. We'll need <html>
, <body>
, then </body>
and finally </html>
.
Body
Anything we want the web browser to display needs to go between<body>
and </body>
.
<html> <body> Hi, I'm written in HTML. </body> </html>
There we go! The text goes in between <body>
and </body>
.
Simple website
With that, we can already build a simple website.
<html> <body> Welcome to my website! </body> </html>
Sweet! Now it's time to take the next step.
Comments