HTML 2

HTML Fonts

In the previous lesson, we introduced HTML and learned the basic tags. Now, we will take it a step further. However, I want to clarify something first. In the last lesson, we mentioned that HTML5 is the latest version. With HTML5, some new features were introduced, while some older tags began to be deprecated. We will learn about these under the HTML5 section. For now, let's continue with the HTML tags that were commonly used until recently.

We learned how to print text on the screen. The simplest way is:

<html>
   <body>
     Hello World
   </body>
</html>

We can print "Hello World" on the screen. Now, let’s display it in different styles. Open Notepad and write the following:

<html>
  <body>
  <b>Hello World</b><br/>
  <i>Hello World</i><br/>
  <u>Hello World</u><br/>
  <del>Hello World</del><br/>
  <sub>Hello World</sub> Hello World <sup>Hello World</sup><br/>
  <marquee>Hello World</marquee><br/>
  </body>
</html>

Let's explain each tag:

  • <b>...</b>: Makes text bold (e.g., Hello World)

  • <i>...</i>: Italicizes the text (e.g., Hello World)

  • <u>...</u>: Underlines the text (e.g., Hello World)

  • <del>...</del>: Strikes through the text (e.g., Hello World)

  • <sub>...</sub>: Displays the text slightly below the baseline. This is useful for mathematical formulas, etc. (e.g., Hello World)

  • <sup>...</sup>: Displays the text slightly above the baseline. This is used to show exponentiation in math (e.g., Hello World)

  • <marquee>...</marquee>: Creates scrolling text.

Now, save the file as an HTML document and open it in your browser to see the result.

The <font> Tag

Now let’s learn about the <font> tag. We will use this tag to change the type, color, and size of text. Let’s see some examples:

<html>
 <body>
   This is normal text<br/>
   <font face="Tahoma">This text is in Tahoma font</font><br/>
   <font size="15">The text size is set to 15</font><br/>
   <font color="red">The text color is set to red</font><br/>
   <font face="Arial" size="20" color="blue">This text is in Arial, size 20, and blue</font>
 </body>
</html>

Explanation: The <font> tag allows us to apply 3 different properties to the text: color, font, and size. First, you write <font>, then specify face, color, or size. Inside face="...", you specify the font name, such as Arial, Tahoma, or Verdana. In color="...", you specify the color, such as red, yellow, blue, or aqua. Finally, size="..." specifies the text size.

Adding Images

We can add any image to our web page, either from our computer or from a web page. For this, we will use the <img src="..."> tag. Let’s see an example, and then I’ll explain it.

<html>
  <body>
   <img src="C:\Users\mustafa\Desktop\New Folder\cat.jpg" >
  </body>          
</html>

To add an image, we use the <img src="..."> tag. Just like the <br/> tag, this tag is self-closing. I have selected a cat image for this example. I right-clicked the image, went to properties, and copied the file path. It was C:\Users\mustafa\Desktop\New Folder. I pasted this into the src="..." part and added the image name cat.jpg. It became <img src="C:\Users\mustafa\Desktop\New Folder\cat.jpg">, and it’s now ready for use.

Writing the location and name of the image, along with its extension (e.g., .jpg, .png, .gif), is enough to display the image on the page. Additionally, we can adjust the image size by specifying the width and height using the width="..." and height="..." attributes. Let’s see an example:

<html>
  <body>
   <img src="C:\Users\mustafa\Desktop\New Folder\cat.jpg" height="10" width="10">
  </body>          
</html>

As you can see, it's simple.

If the image and the HTML file we created are in the same folder, we only need to write the image name. For example, let’s create a folder on the desktop, copy the image there, and then create a Notepad file in the same folder with our code:

<html>
 <body>
  <img src="cat.jpg" height="100" width="100">
 </body>          
</html>

The image will appear on the web page just the same. This way, we can avoid unnecessary code and keep things simpler.

If you right-click an image from any website and copy its URL, you can display the image on your web page as well:

<html>
 <body>
  <img src="http://img44.imageshack.us/img44/1606/irinsevimlikediresimleri.jpg">
 </body>
</html>

Changing the Background

Let’s now look at two examples of changing the background. However, remember that CSS is what really adds visual richness to the page. HTML alone is not enough for styling. Still, it’s useful to know.

<html>
 <body bgcolor="black">
 </body>         
</html>

In this first example, we added the bgcolor="..." attribute to the <body> tag and set it to black. When you open the page, you’ll see a black, empty web page. You can replace "black" with other color names or their hexadecimal values. For instance, #000000 represents black, #FF0000 represents red, and #0000FF represents blue. You don’t need to memorize these values, as you can easily find them with a quick Google search.

Now, let’s set an image as the background:

<html>
  <body background="cat.jpg">
  </body>          
</html>

The cat image will now be set as the background. The image won’t cover the entire page. It will repeat according to its original size. We will learn more about this in CSS.

Creating Links

Finally, let's talk about creating links. To create a link, we will use the following tag: <a href="url">...</a>. We can insert text or an image inside the link. Let’s create an example.

<html>
  <body>
   <a href="http://www.cagataycebi.com">Click here to visit the site</a>
   <a href="http://www.cagataycebi.com"><img src="cat.jpg">Click here to visit the site</a>
  </body>          
</html>

Adding a link is not complicated. When you view the page in the browser, you’ll see the result. Just remember, when you write the URL, it should start with http://. However, you don’t need to use http:// for links to other pages on the same website.

We can also make the link open in a new window by adding target="_blank":

<html>
  <body>
   <a href="http://www.cagataycebi.com" target="_blank">Click here to visit the site</a>
  </body>          
</html>

That’s all for this lesson. In the next lesson, we’ll learn how to create lists and tables. Take care!


Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Arithmetic Operators and Expressions

( + ) : Addition ( - ) : Subtraction ( / ) : Division ( * ) : Multiplication ( % ) : Modulus (-x) : Changes the sign of the variable. int number = 34; printf("%d", -number); Modulus is used to find remainders. For example, if you want to find the remainder of 15 divided by 6, you write: 15%6 = 3. The order of operations is as follows: Parentheses ( ) are evaluated first. Then, multiplication * , division / , and modulus % are evaluated from left to right. Finally, addition + and subtraction - are performed, also from left to right. There are some additional details about division. For example, in standard arithmetic, 4/5 equals 0.8 . However, in C, 4/5 results in 0 because the program expects an integer result when dividing two integers. Here are some examples: 8/4+2 => 2 + 2 => 4 8-4*2+-12 => 8 - 8 + -12 => -12 15*4/2%4*7 => 60/2%4*7 => 30%4*7 => 2*7 => 14 31+7/2-83%5*2-2 => 31+ 3 - 3 * 2 - 2 => 31 + 3 - 6 - 2 =...
Devamı

Functions

Functions in Procedural Languages like C One of the important topics in procedural languages like C is functions. In languages like Java or C#, they are called methods. Regardless of what they are called, their job is the same. Imagine doing the same operation multiple times. Writing the same code for every instance would be quite cumbersome. Functions are designed to solve this problem. You define the operation once, and then you can call the function as many times as needed. The benefits of functions don't stop there. Functions provide modularity. For example, let's say you've written a function to test if a number is prime, and you realize it's incorrect. You don't need to change the entire program—just fix the wrong function, and the program will work correctly. Additionally, moving the code of your functions to other programs is very simple. Functions make your work easier. Imagine writing a program that reads data from disk, processes it, then converts the...
Devamı

What is a Variable? How is it Defined?

  Variables are placeholders that store values either entered by the user or assigned during program execution. Defining a variable means specifying its type according to the data it will store. For example, if you have a variable named a and you want it to store an integer value, you must define a as an integer. Some variable types: char, int, float, double, short, long... (Long and short are variations of integer with different ranges.) #include<stdio.h> int main(void) { int a; a = 25; printf("The value of a is %d", a); return 0; } int stands for integer. In the first line, we wrote "int a;" , which means "I have a variable named a of integer type." The line a = 25; assigns the value 25 to a . This means that whenever a is used, its value 25 will be referenced. The printf(); function contains %d , which indicates that an integer variable will be displayed. The variable name a is provided after the comma to speci...
Devamı