HTML 1
In this lesson, I will introduce HTML to you and we will create a few simple examples. By the end of our HTML lessons, we will be able to create a web page.
HTML, to give it its full name, Hyper Text Markup Language, is the fundamental language used to create web pages. There is no exact translation in Turkish, but there are various close approximations. We can say it means "Text Markup Language." It is important to note that HTML is not a programming language.
You don’t need any special software to write HTML code. In our work, we will write our code in Notepad and then use any browser (Google Chrome, Firefox, Opera, etc.) to render it meaningfully.
HTML was developed in 1990, and over time, several versions have been released. The most recent one is HTML5, which was released in 2012.
Now, let’s start getting familiar with HTML code.
HTML language consists of code blocks called tags. Tags are written between “<” and “>” symbols. For example: , , ... Usually, each tag has a closing counterpart. To close a tag, we add a “/” before the tag name. So, for the three tags we gave as an example, they are closed like this: , , . We write our code and then insert the content we want (text, images, etc.) and close it. Let’s look at a more detailed example: The tag makes text bold. Anything written between and will be displayed in bold (e.g., This text is bold).
Now let’s examine the basic page structure:
<html>
<head>
<title>My Title</title>
</head>
<body>
<p>
Hello World
</p>
</body>
</html>
As you can see, each tag opened has been closed. Forgetting to close a tag can affect the functionality of your code. Open Notepad and write the code above. Then save and close the file. It will be saved as "New Text Document.txt." Change the extension from .txt to .html. Now, when you open the file, it will open in your browser, and you will see "Hello World" displayed on the screen.
In the browser tab, you will also see "My Title." Thus, we have written and run our first code. Let’s explain what each of the tags does:
All HTML code is written between the ... tags. Anything outside of this won’t have any effect. Within the tags, we use two basic tags: and for the header and body sections of the page. The ... section defines the metadata for the page. We used the tag to give the page a title. Additionally, the tag allows us to use other web technologies like JavaScript and CSS. JavaScript and CSS are more advanced than HTML, so it’s important to learn HTML first. However, you can research what they do in the meantime. Let’s get back to our topic.
We will go into more detail about the tag later. For now, the tag is what we are mainly concerned with. The content of a web page is written between the ... tags. All the text, images, tables, etc., are added there. Everything that the user sees on the page is within the section.
Now let’s print three sentences vertically using HTML. We may skip the tag, which won’t affect the functionality.
<html>
<body>
Today the weather was rainy and cold.<br/>
I didn’t go outside at all.<br/>
I spent the whole day reading a book.<br/>
</body>
</html>
The tag is special. Normally, we place content between two tags to format it. However, the tag is used alone. It indicates the end of a line, so anything after will appear on the next line. For instance, if we were to write a poem using HTML, we would need to place the tag at the end of each line. But what if we are writing a long article, and we want paragraphs? In that case, we use the tag to define paragraphs. We write the text between the ... tags. Let’s see an example.
<html>
<body>
<p>
Barış Manço is one of the pioneers of rock music in Turkey and is considered one of the founders of the Anatolian Rock genre. He started music at Galatasaray High School. He completed his higher education at the Royal Academy of Belgium. With over 200 songs, he earned 12 gold and one platinum album and cassette award.
</p>
<p>
Barış Manço drew inspiration from his daily life for some of his songs. "Domates, Biber, Patlican" is one example. Through his television program, he traveled to many countries and was called "Barış Çelebi" as a result.
</p>
</body>
</html>
The text about Barış Manço will appear as two paragraphs in the browser. Now let’s add a title. But first, let me explain a bit about heading tags... There are 6 different sizes of headings available in HTML. They range from to , and the text size decreases as you go from to . Let’s see an example:
<html>
<body>
<h1>HEADING - 1</h1>
<h2>HEADING - 2</h2>
<h3>HEADING - 3</h3>
<h4>HEADING - 4</h4>
<h5>HEADING - 5</h5>
<h6>HEADING - 6</h6>
</body>
</html>
Write this in Notepad, save it as an .html file, and open it in your browser. The headings will be displayed in order from largest to smallest.
Now, let’s say we want our title to be centered. To do that, we can use the tag. The ... tags will center everything between them. Let’s quickly see an example:
<html>
<body>
<center><h1>HEADING</h1></center>
</body>
</html>
If we wrote it as HEADING, it would give the same result. However, writing HEADING would be wrong! So, if we use two different tags in one expression, we should always close the tag we opened last.
Correct:
<a><b>computer</b></a>
<b><a>computer</a></b>
Wrong:
<b><a>computer</b></a>
<a><b>computer</a></b>
That’s all for our first lesson. I hope the explanation was simple and clear. See you in the next lesson. Take care!
Yorumlar
Yorum Gönder