One obvious change I would like to make is I will write an article once a week instead of every two days. I recently started my own business, began writing a book with my girlfriend, and provide home health care at night. My schedule is very full, so I will add to this blog just once a week. Now that this is out of the way, let's get into some code. This weeks topic will be on HTML.

HTML

What is HTML? HTML is the standard markup language for creating web pages. Just as I am typing in English and you can understand and interpret my words. A computer understands the HTML language to crate websites. HTML describes the structure of a Web page. It provides the fundamental technology used to define elements such as paragraphs , lists, headings, links, images, forms, and more . HTML constructs allow you to embed content into a rendered webpage.

HTML uses tags to define different elements on a webpage. These elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading," "this is a paragraph," and "this is a link," among others. Tags are enclosed in angle brackets(<>). This describes HTML syntax, which is like the rules for writing HTML code, similar to grammar in English.

So, some syntax of HTML code looks a bit like this:

Example: <button>Hello</button> creates a clickable button with the text "Hello" inside.

<p>paragraph of text</p> Creates a paragraph of text. This one would say "paragraph of text".

Normally, elements will have an opening tag and a closing tag. Like in the first line of code where you have (<button>) Hello (</button>), the element has an opening tag (<button>) and a closing tag (</button>). Note the "/" in the closing tag element, which is necessary to close the element. There are also self-closing like (<img/>),(<img>). We will get in to those later. In HTML, extra spaces and newlines are combined into 1 space.

Example: <p>paragraph of text</p>

<p> paragraph

of text </p>

<p>

paragraph of text

</p>

All 3 examples above will show the same result on the web page.

Now let's discuss HTML attributes, which change how an HTML element behaves. All HTML elements can have attributes. Attributes are always specified in the start tag and provide additional information about the elements. They usually come in name/value pairs like: name="value". Because I am writing a blog and not teaching a class, this is very basic information. I will go into more detail in future articles. In reality, I could write an article on each subject and make the article twice as long because there is so much information.

Example: <a href="https://youtube.com">Link to YouTube</a> The <a> element creates a hyperlink to another website. The href attribute specifies the URL of the page the link goes to and modifies which website is opened when clicking this link.

The HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link />
</head>
<body>
  <!-- your web page content goes here -->
</body>
</html>

Let's break it down:

<!DOCTYPE html>: defines the document type and version of HTML being used (HTML5 in this case).

<html lang="en"> and </html>: opening and closing tag of the root element that wraps the entire HTML content. The attribute lang="en" defines the language (in this case, USA English)

<head> and </head>: opening and closing tag of the head element contains meta-information <meta > about the HTML document, the page title <title></title> you see in the browser tab, and link <link /> which defines a link between your HTML document and an external resources, like stylesheet, favicon, import and so on.

<body> and </body> : opening and closing body tag encloses all the visible content of a web page, including text, images, links, forms, and other elements that users interact with.

Note: All HTML elements have opening (< >) and closing (</ >) tags, except for self-closing (< > or < />) tags, which I will explain in more detail later.

Got this little snippet from freeCodeCamp. Here is a link I highly recommend checking out. They have a lot more knowledge and it is more complete. I have never taught before and am just learning myself. I am using this blog to help with my own studies and hopefully help others. Doing my best to not copy and paste and get the word out of my own head. This is just put perfectly, and I wanted to give feeCodeCamp a shout-out. I also think I will have my code like this in the future. I don't want to change it in this article. I want to see the improvement in my writing and the blog.

To put it in simpler terms think of HTML structure like the structure of writing a formal letter. Once you understand the different elements, where they go, and why they are used, and you practice it repeatedly, it becomes second nature. I think i will end the HTML side for now. Like I said, there is so much more to go over. I barely scratched the surface.

Thoughts and feelings

This is the part where I put down more of my on thoughts an feelings. In general, I am loving the process and learning a lot from freeCodeCamp and watching some YouTube. I'm still just learning the fundamentals no rush. I have heard different timelines, ranging from a couple of months to a year, to achieve understanding. I'm just going at my own pace making sure I understand the concepts. My plan is to master the fundamentals and possibly start some freelance work on Upwork by the beginning of the year. Then by February around my birthday, I would also like to start a project of my own. I will give myself an assessment to see where I'm at, but based on my current pace and the information I still need to learn, I think I will hit that timeline. As always, thank you for taking the time to read. I hope you learned something, and see you next time.

Who does number two work for? HTML basics.

HTML

The HTML Structure

Thoughts and feelings

Subscribe to my newsletter

Michael Baisden

Michael Baisden