Create the First HTML Document
The First HTML Document
So, you’ve chosen to learn HTML? Here is the first lesson. HTML is a markup language – meaning you markup the structure and the browser will display accordingly. So the start off – every HTML page should have a start and an end. The start of html is denoted by tag and ends with . Lets start by creating a new folder named MyWeb in any location you wish. Then go ahead open a text editor (Notepad in Windows, TextEdit in Mac OS and Linux has a variety of them) and add the following codes.
<html>
<head>
<title>My First HTML</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Now open the folder and open the index.html file. You should now see in your browser something like this:
Now you might think what’s with all those codes? The first line with the tag <html> tells the browser that it is the start of an HTML page, the last tag </html> tells that it is the end. The beginning tag and end tag is known as the Element of HTML. Then everything within the <head>…</head> is known as the head element which could includes many important elements and one being the <title>…</title> element. The next that follows is the <body>…</body> element. Here all the content of your website will go in. And in the <body> tag you can add other elements of HTML. The following is a list of different elements you can add:
- <h1>…</h1> – Heading Level 1
- <h2>…</h2> – Heading Level 2
- <h3>…</h3> – Heading Level 3 and so on up to <h6>…</h6>
- <p>…</p> – is for paragraph.
- <strong>…</strong> to bold a text.
- <em>…</em> – to emphasize text.
Go ahead and try to use the above elements inside the <body>…</body> element. Here I’ll explain the two types of Elements in HTML.
- Block Level Elements: These types of elements will create a line space between one and the other. The heading and paragraph elements are block level elements.
- Inline Elements: These elements will not break the line when used but rather will stay in line. <strong>…</strong> and <em>…</em> are such types of elements.
Try this code and see the results
<html>
<head>
<title>My First HTML</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Hello World</p>
<p>This is a second paragraph and I'm putting <strong>Bold</strong> and <em>Emphasis</em> just to see if it works
</p>
</body>
</html>
Now go ahead and write something for your new site.
Great work, Thank you
ReplyDelete