Coding Journal

Welcome to my self-learning notes page. Here, you will find information that I am learning along my coding journey, starting from HTML and progressing to more advanced programming languages.
Since my knowledge of coding languages is limited, you may currently perceive this page as subpar. However, I am committed to improving it based on my learnings and expanding knowledge.

HTML

Let's begin by defining HTML. It stands for Hypertext Markup Language and serves as the foundation for creating web pages. HTML is the first programming language you should learn. In this section, I will cover a few essential concepts. Let's get started!

Body

The <body> element contains the content displayed on a web page. Everything you and I are currently reading is built using the body element, along with additional elements that I will explain later. Without the <body> element, nothing would be displayed on a web page. Example:

<body>
    <h1>Welcome to My Web Page</h1>
        <p>This is the content of my web page.</p>
</body>

Structure

HTML structure refers to the overall organization and hierarchy of elements within an HTML document. It consists of the root <html> element, the <head> element, and the <body> element. Example:

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
    </head>
    <body>
        Content goes here
    </body>
</html>

Elements

Let's define HTML elements. An element is anything enclosed between opening (<) and closing (>) tags. Example:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

In the above example, both My First Heading and My first paragraph are enclosed within tags, making them HTML elements.

Attributes

All elements can have the <a> attribute. It provides additional information about elements and is always specified in the start tag. They usually come in name/value pairs. Example:

<a href="https://www.google.com" target="_blank">Go to Google</a>

If we run this code, it would render like this:

Go to Google

Note that we added some attributes inside the <a> opening tag: href and target respectively. The href attribute stands for HyperText Reference, which allows us to provide a link, and the target attribute allows us to decide where we want the page to be displayed. However, you don't need to worry about this now. We'll see more information later.

Headings

HTML headings are defined with the <h1> to <h6> tags, with <h1> being the most important heading and <h6> being the least important heading. Example:

            
              Heading 1
              Heading 2
              Heading 3
              Heading 4
              Heading 5
              Heading 6

Paragraphs

Paragraphs are represented using the <p> element. They display the content of our headings and form the backbone of our page's content. For example:

<p>My name is Jesus, and I'm creating my first website. In this case, I'm teaching you how a paragraph <br>
looks like inside the paragraph element. I hope you understand it.</p>

As you can see, I used the <br> element to break my paragraph into two lines.

Additionally, we have the horizontal rule <hr> element, which creates a horizontal rule between paragraphs. Example:

Read this example.<hr>
Now read this one.

Style

The HTML style attribute is used to add styles to an element, such as color, font, size, and more. Setting the style attribute is slightly different from other attributes; it doesn't require tags specifically for styling text. Instead, the styles are defined within the tags of the corresponding element.
There are numerous properties we can use to style our text, but for now, let's focus on the most popular and easiest to learn. To set up this attribute, use the following syntax:

<tagname style="property:value;">

As I mentioned earlier, there are many properties we can utilize. One of them is to specify the color of our text. Example:

This text color is lightskyblue.

<p style="color: lightskyblue;">This text color is lightskyblue</p>

You can also change the background color of your text. Example:

This text has a paleturquoise background color.

<p style="background-color: paleturquoise;">This text has a paleturquoise background color.</p>

The font-family property is used to change the font used in the text. Example:

This text has a different font than the previous examples.

<p style="font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;">This text has a different font than the previous examples.</p>

Images

Images can have a significant impact on our website. They provide valuable context and enhance the visual appeal of our page. The syntax for the <img> tag is as follows:

 <img src="url" alt="alternatetext">

Here, the img tag represents the image, the src attribute specifies the location of the image, and the alt attribute provides alternate text that appears when the image cannot be displayed. Example:

For more information, visit: W3Schools