An Overview of HTML (Hypertext Markup Language)
- Oct 5, 2024
- 8 min read
What Is HTML?
HTML is a markup language used to create web pages. HTML consists of text and tags that form meaningful documents understandable by browsers. These tags are interpreted by the browser to incorporate visual content, texts, links, and other elements.
HTML | Dilin Genel Yapısı
Every HTML document essentially has the following structure:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title> Title of the page </title>
<!-- Stil, script ve meta veriler burada bulunur -->
</head>
<body>
<!-- Sayfa içeriği burada yer alır -->
</body>
</html><!DOCTYPE html>
In HTML5, this command indicates to the browser that the document is in HTML5 format. This must appear on the first line of all HTML5 documents.
<html>
This tag is the container that wraps the entire HTML document. In HTML5, it is important to specify the language of the document within the lang attribute.
<head>
The head section of the document contains the page title, meta data, CSS files, and links to other external files. This section is not visible to users but is critical for the browser.
<body>
All visible content of the page is found in this section. Paragraphs, images, videos, links, and more are included within this tag.
HTML5 | Current Features
New Structural Tags
With HTML5, new structural tags have been introduced that help make web documents more semantic (we will discuss the details in another article!). These tags are used to define sections of the page:
<article> //Makale, deneme tarzı yazıları kapsar.
<aside> //Ana içerikte ayrı yazılan kısımdır.
<audio> //Sayfaya ses oynatıcı bir modül ekler.
<canvas> //Sayfada bir tuval alanı oluşur. Çizim javascript ile yapılır.
<caption> //Başlık olarak belirlenen metinleri düzenler.
<datalist> //Düzenlenebilir elementlere otomatik tamamlama özelliği verir.
<details> //Detay bilgisi içerir.
<embed> //Dışarıdan eklenen bileşen için kullanılır. (Youtube videosu vb.)
<figcaption> //Elementin başlığını belirler.
<figure> //Çeşitli medya içeriği gruplarını belirler.
<footer> //Sitelerin en alt kısmını tanımlar.
<header> //Sitenin başlık ve açıklama içeriğini tanımlar.
<hgroup> //Başlıkları belirtir. H1, H2 elementleri burada tanımlanır.
<mark> //Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<nav> //Menüleri ve bir takım zaruri işlevleri içine alır.
<progress> //İşlem süreci göstergesi ekler.
<section> //Sitelerin ana içerik kısmını tanımlar.
<summary> //Yazının başlığını belirler.
>time> //Tarih ve saat verilerini kapsar.
<video> //Video oynatıcı bir modül ekler. Usage of the Video Tag
Basic Code Structure for Publishing Your Video Content:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>To play a video in HTML, the <video> tag is used, and this tag works with various attributes.
src: Specifies the address of the video file and its format.
<video src="video.mp4"></video>controls: It shows the control bar of the video.
<video src="video.mp4" controls></video>autoplay: It plays the video automatically.
<video src="video.mp4" autoplay></video>loop: Video plays again and again.
<video src="video.mp4" loop></video>muted: This code is going to mute the video.
<video src="video.mp4" muted></video>poster: The image that will be shown before the video starts.
<video src="video.mp4" poster="önizleme.jpg" controls></video>width: Sets the width of the video.
height: Sets the height of the video.
<video src="video.mp4" width="640" height="360" controls></video>preload: Sets the video loading behavior.
- auto: The video is fully downloaded when the page loads.
- metadata: Only video-related information (e.g. length) is downloaded.
- none: The video is not loaded, it is waited until the user initiates it.
<video src="video.mp4" controls preload="auto"></video>
Usage of sound tags
The basic code structure for publishing your audio content:
<audio controls>
<source src="ses.mp3" type="audio/mp3">
</audio>In the table below, you can see which audio formats are supported by which browsers in HTML. In the latest published HTML5, there are three supported audio formats: MP3, WAV, and OGG extensions.
Form Elements
HTML5 offers more advanced form elements:
<input type="date">
<input type="time">
<input type="email">
<input type="url">
Usage of Canvas Tag
<canvas id="myCanvas" width="200" height="100"></canvas>Add Favicon
A favicon is a small icon for a page, and it's pretty simple to create:
<link rel="icon" href="favicon.ico" type="image/x-icon">HTML | Bring Tables to Life!
HTML uses the <table> tag to create tables. <tr> (table row) tags for each table row, <td> (table data) tags for each cell, and <th> (table header) tags for header cells.
A Simple Table Example
<table border="1">
<tr>
<th>Title 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table><table>: Beginning and ending of the table.
<tr>: Creates rows.
<th>: Identifies header cells and usually appears bold and centered.
<td>: Represents data cells.
Table Properties
border: Specifies the table borders. For example, border="1" adds a thin border to the table.
colspan: Joins a cell horizontally across multiple columns.
rowspan: Joins a cell vertically across multiple rows.
Cell Merge Example
<table border="1">
<tr>
<th colspan="2"> Combined Title </th>
</tr>
<tr>
<td> Cell 1</td>
<td> Cell 2</td>
</tr>
<tr>
<td rowspan="2"> Combined Title </td>
<td> Cell 3</td>
</tr>
<tr>
<td> Cell 4</td>
</tr>
</table>colspan="2": Indicates that a cell spans two columns.
rowspan="2": Indicates that a cell spans two rows.
Width, Height, and Alignment
Width, height, align, and valign can be used to control the width, height, and alignment of table cells.
<table border="1" width="100%">
<tr>
<th> Title </th>
<th> Title </th>
</tr>
<tr>
<td align="center" valign="middle"> Centered Cell </td>
<td width="50%" height="50"> Large Cell </td>
</tr>
</table>HTML | Manage Lists
There are two main types of lists in HTML5: numbered (ordered) lists and bulleted (unordered) lists. Definition lists can also be used to describe various items.
1. Unordered List
For example, if you are writing a blog post like me, we would use an unordered list if there is no specific order required between the items. These types of lists are usually displayed with bullets.
To create an unordered list in HTML5, we use the <ul> (unordered list) tag and define each item with the <li> (list item) tag.
<ul>
<li>Resources for learning HTML</li>
<li>Basic information about JavaScript</li>
<li>Styling with CSS</li>
</ul>This code will display a list like this:
Resources for learning HTML
Basic information about Javascript
Styling with CSSek
2. Ordered List
When we need a numbered list, we use an ordered list. This type of list is ideal for situations where the order of the items is important. In HTML5, the <ol> (ordered list) tag is used to create an ordered list.
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Create interactive pages with JavaScript</li>
</ol>This code then creates a numbered list on the screen like this:
Learn HTML
Learn CSS
Create interactive pages with JavaScript
3. Definition List
A definition list is used to define or describe an element. It is especially useful for concepts and explanations. To create a definition list in HTML, the <dl> (definition list), <dt> (definition term) and <dd> (definition description) tags are used.
<dl>
<dt>HTML</dt>
<dd>It is a markup language that forms the skeleton of web pages. </dd>
<dt>CSS</dt>
<dd>It is used to add style and design to web pages.</dd>
<dt>JavaScript</dt>
<dd>It is a programming language that provides interactivity to web pages.</dd>
</dl>This creates a definition list like this:
HTML
A markup language that creates the skeleton of web pages.
CSS
Used to add style and design to web pages.
JavaScript
A programming language that adds interactivity to web pages.
4. Change List Styles
You can change the style of both unordered and ordered lists. For example, to add square-shaped bullets to an unordered list:
<ul style="list-style-type: square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>A list with square marks like the one below will appear on your screen as output:
■ HTML
■ CSS
■ JavaScript
5. Format Numbers in an Ordered List
You can use the type property to display an ordered list with different number formats. For example, to create a list with Roman numerals:
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>This code snippet will create a list like this:
I. HTML
II. CSS
III. JavaScript
HTML | Let's Add Color to Our Lives
In HTML, colors are often used to determine the style of a page. There are several ways to use colors in HTML.
Using with Color Names
In HTML, some standard colors have names and these names can be used directly. Some supported color names are red, blue, green, yellow, black, white, gray, orange, pink and purple.
<p style="color: red;">This text is red.</p>
<p style="background-color: blue;">This text has a blue background.</p>Hexadecimal Color Codes
Colors can also be represented with the hexadecimal number system. In this system, colors are expressed with a 6-digit code. The first two digits represent red, the middle two digits represent green, and the last two digits represent blue; #FF0000: Red, #00FF00: Green, #0000FF: Blue, #FFFFFF: White, #000000: Blackyah
<p style="color: #FF5733;">This text is orange.</p>
<p style="background-color: #0000FF;">This text has a blue background.</p>
Defining Color with RGB (Red, Green, Blue)
Colors can be defined by red, green, and blue values. Each color has a value between 0 and 255.
<p style="color: rgb(255, 0, 0);">This text is red.</p>
<p style="background-color: rgb(0, 255, 0);">This text has a green background.</p>RGBA Opacity (Transparency) Adjustment
RGBA has an opacity (a) value in addition to RGB. The opacity value takes a value between 0 and 1. 0 means completely transparent, 1 means completely opaque.
<p style="color: rgba(255, 0, 0, 0.5);">This text is semi-transparent red.</p>
<p style="background-color: rgba(0, 0, 255, 0.3);">This text has a semi-transparent blue background.</p>Using Color with HSL (Hue, Saturation, Lightness)
HSL is used to determine the tone, saturation, and lightness of colors.
Hue: Takes a value between 0 and 360 degrees. 0 is red, 120 is green, 240 is blue.
Saturation: Expressed as a percentage. 0% gray, 100% vivid color.
Lightness: 0% black, 100% white.
<p style="color: hsl(120, 100%, 50%);">This text is green.</p>
<p style="background-color: hsl(240, 100%, 50%);">This text has a blue background.</p>Transparency Adjustment with HSLA
HSLA is the HSL format with an added opacity value. It takes a value between 0 and 1.
<p style="color: hsla(120, 100%, 50%, 0.5);">This text is semi-transparent green.</p>Areas of Use of Colors
Text Colors: Set with the color property.
Background Colors: Background-color sets the background color.
Border Colors: Border-color sets the colors of the borders.
HTML | Creating Links
We use the <a> tag to create a link (hyperlink) in HTML. This tag can also perform multiple links, such as linking to another web page, file, email address, or a location within the page.
Basic Link (Hyperlink) Structure
<a href="https://www.example.com">This is a link</a><a>: Link tag.
href: It stands for Hyperlink Reference (Link Address) and indicates the URL that the user wants to go to when they click.
Link text: The text that the user will see and click.
Let's examine the different types of links under separate headings:
1. Link to Another Website
To link to another site, you can write the URL of that site in the href tag.
<a href="https://www.google.com"> Go Google </a>2. Link to Another Point in the Same Page
You can give a link using id to go to a heading or a specific point in the same page. (Here, <a href="#section1"> is given to the place in the page with id section1.)
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1 Title</h2>3. Create an Email Link
We use mailto: to link to an email address. Users who click on this link can send an email with their default email client.
<a href="mailto:ornek@example.com"> Send an E-Mail </a>4. File Download Link
It is possible to provide a link to download a file. If the file is supported by the browser, it can be opened instead of downloaded. To force the file to be downloaded, you should use the download tag.
<a href="dosya.pdf" download> Download PDF File </a>5. Opening a Link in a New Tab
You can use the target="_blank" tag to make a link open in a new tab.
<a href="https://www.example.com" target="_blank">Link opens in new tab</a>6. Add a Title to a Link
You can use the title attribute to add a title (description) to a link that appears when hovered over.
<a href="https://www.example.com" title="This link goes to the example site">Example Site</a>7. Link to Phone Number
The tel: protocol is used to create a phone link. This is especially useful on mobile devices to automatically initiate a call by clicking on the link.
<a href="tel:+905551234567"> Call Us </a>8. Using a image for a link
<a href="https://www.ornek.com">
<img src="resim.jpg" alt="Örnek Resim">
</a>Conclusion
You may want to start coding your own site from here. However, site designs are now quite slow with coding, and you can make your design look realistic and modern with other languages such as CSS and Javascript. If you don't have time and want to access a site quickly, you can easily publish your own site with the arrangements you want on free applications that offer ready-made sites or ready-made template sites with small amounts.
Comments