Click to get information about our services.
HTML başlık etiketleri, bir web sayfasının içeriği hakkında bilgi verir ve arama motorlarına içeriğin neyle ilgili olduğunu açıklar. Bu nedenle, başlık etiketlerinin doğru şekilde kullanımı, web sitesinin SEO'sunu artırmaya yardımcı olabilir.
In this section we will examine HTML Styles. Nowadays, the place of the internet in our lives is increasing day by day and the design of web pages remains equally important. Therefore, the use of HTML styles is very important when doing web design. In this article, general information about HTML styles will be given and their use will be detailed with coding examples.
What are HTML Styles?
HTML is a language used to structure web pages. HTML styles are a structure that helps make HTML codes readable, understandable and aesthetic. That is, the appearance and layout of web pages can be easily adjusted thanks to HTML styles.
How to Use HTML Styles?
HTML styles are used with the help of a file called CSS (Cascading Style Sheets). In this file, all style properties on the web page are specified and the HTML codes are linked to this file.
For example, let's create a title tag using the following HTML code:
<h1>Bu bir başlıktır</h1>
This title tag will be displayed as:
Bu bir başlıktır
However, this title tag will become much more elegant and readable when we add styling features.
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bu bir başlıktır</h1>
</body>
We can also beautify this header with style properties by adding the following code in the styles.css file:
h1 {
font-size: 32px;
color: red;
text-align: center;
}
When we add this code, the title tag will display like this:
Bu bir başlıktır
What did we do up there?
We created a styles.css file and specified that it was a style file with link rel.
We specified where our style file is located with the href tag that we learned in our previous lesson.
Then we moved to the body area and titled our page with <h1>.
Afterwards, we went to the css file we created and created the style codes for our <h1> tag.
font-size: is the style file in which we determine the font size of the title we created.
color: is the style file in which we determine the font color of the title we created.
text-align: is a style file that allows us to align the title we created to the region we want.
But what if we want to write this code in HTML codes rather than in a separate styles.css file, how can we write it?
Example:
<head>
<style>
h1 {
font-size: 32px;
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
</body>
Görünüm:
Bu bir başlıktır
If we do not create a styles.css file but want to write css codes in the HTML file, <style> css codes </style It will be enough to write it between the tag.
HTML Styles with Coding Examples
By using HTML styles, we can add many different features suitable for web page design. For example, we can add many features such as text size, colors, line styles, background color, etc. Below you can see examples of what can be done using HTML styles:
1. Changing text size:
Örnek:
<h1 style="font-size: 24px;">Bu bir başlıktır</h1>
Above, we created a title with <h1> and entered a text size code for the title and fixed the title to 24px.
Appearance:
Bu bir başlıktır
2. Color changing:
Example:
<h2 style="color: red;">Bu bir alt başlıktır</h2>
We define a subheading above with <h2> and add <h2> tag to style We set a color with.
Appearance:
Bu bir alt başlıktır
3. Set background color:
Example:
<p style="background-color: yellow;">Bu bir paragraftır</p>
Above, we opened our paragraph tag <p>, specified a style inside it and set the background color as yellow.
Appearance:
Bu bir paragraftır
4. Adding a border:
Example:
<div style="border: 1px solid black;">Bu bir div etiketidir</div>
We set a div tag above and added a border line to the div as a style.
Example:
5. Text alignment:
Örnek:
<p style="text-align: center;">Bu bir paragraftır</p>
We created a paragraph tag above and loaded a style file to align the text, using center to center the text within the section we used.
Appearance:
Bu bir paragraftır
Let's Combine 5 Styles
Now, let's try all the styles we learned today on a single div?
<div class="eadiv">Bu bir yazıdır. </div>
<style>
.eadiv{
font-size:24px;
color:red;
background-color:yellow;
border:1px solid black;
text-align:center;
}
</style>
We created a div above and divided the div into a section with the class attribute that we learned in our previous lesson.
Then, we placed the name of the div, which we divided into a section, in our css file into the class attribute.
Appearance:
As we can see, we have combined the 5 examples above into one section into a single div.
HTML Styles and SEO
It is very important for web pages to be SEO compatible in order to increase the visibility of the page. HTML styles can also play a role in making web pages SEO friendly.
For example, the page title (h1 tag) should contain keywords and the subheadings (h2, h3 tags) within the page should be used in a hierarchical structure. The use of these tags helps make the page SEO friendly.
Therefore, the h1 tag is used for the page title in this article. Additionally, the h2 tag was used as a subheading.
In conclusion, HTML styles play a very important role in web page design. We can easily change the appearance of the page by adding style properties to HTML codes. In addition, it is necessary to pay attention to the use of correct tags to ensure that the page is SEO compatible.
What did we learn in this lesson?
- Creating a
styles.cssfile and adding it to HTML - How to load a style using the
styletag in theHTMLfile without using thestyles.cssfile colorstyle tag gives colorfont-sizestyle tag sets the text size- The
background-colorstyle tag sets the background color - The
borderstyle tag adds a border - We learned that the
text-alignstyle tag is used to align the text.
