We are back with another installment of MSTB (Mike's Self-Taught Blog). Last week, I covered the basics of HTML. To recap, I explained what HTML is and what it is used for. I went over how HTML uses tags and elements to create its syntax. I also briefly covered HTML attributes, providing only a small amount of HTML code. I then covered the HTML structure, providing more elements and their explanations.

I want to emphasize in my blog that the best way to learn coding is by practicing it—get behind a keyboard and start typing. All the tutorials, reading, and memorization will help, but the only way to become a good developer is to code as often as you can and keep learning.

This week, I will dive deeper now that we have the basics covered. I can't go much further without explaining a bit about CSS and JavaScript. I briefly mentioned them in my last article, but here's a short explanation: HTML is the content of a webpage, CSS is used to design and style the webpage, and JavaScript makes the page interactive. Today, immersive interaction is at the core of almost all amazing websites, thanks to JavaScript and other coding languages. Again very brief explanation they will get there own articles in the near future.

Self-Closing Tags and Semicolon

Let's talk about HTML. The first thing I noticed in my previous article is that I did not explain self-closing elements. Self-closing elements in HTML are tags that do not need a separate closing tag. They are also known as void elements or empty elements. A few examples of self-closing tags are <img /> (for embedding images), <input /> (for input fields), <br /> (for line breaks), and <hr /> (for thematic breaks and dividers). These tags do not contain any content and cannot have any children. Now, you might remember I wrote the img tag like <img> and this <img />. The fact is there is no need to close self closing tags by a slash /> at the end of the tag. Although many people use it but there is no meaning of slash at the end of the start tag even if you use it it will be ignored by the browsers.

HTML Attributes

I will also pick up where I left off with attributes. There are many attributes available for various HTML elements, such as the class attribute, id attribute, src (source) attribute, href attribute (for links), width and height attributes (for images), style attribute, disabled attribute (for form elements), type attribute (for form elements and list items), and name attribute (for form elements). Understanding and using attributes effectively is essential for controlling the appearance and behavior of elements in your HTML documents.

Class attribute

Class attribute used to assign one or more class names to an HTML element. It also helps you organize and style different parts of a webpage by grouping them together. Here is the syntax for class attribute: <p class="classname1 classname2...">content for webpage</p> Suppose you want to style multiple paragraphs with the same font and color. Instead of writing the same CSS styles for each paragraph individually, you can assign a common class to all those paragraphs and define the styles for that class in your CSS file. Add a class to an element. The class name (the text between the quotes "...") can be anything you want, but it cannot contain spaces. An element can have multiple classes, separated by a space. Example:

<body>
  <p class="highlight">This is the first paragraph.</p>
  <p class="highlight">This is the second paragraph.</p>
  <p class="highlight">This is the third paragraph.</p>
</body>

id Attribute

It provides a unique identifier for an HTML element. It should be unique within the entire HTML document. The id attribute helps you uniquely identify and control specific elements on a webpage. Just like how each student's ID number helps identify them uniquely in a school. The syntax for the id attribute: <div id="header">This is a div with an id attribute.</div> The id attribute and the class attribute in HTML serve similar purposes in that they both allow you to identify elements on a webpage. The key difference is that you use the class attribute when you want to group multiple elements together and apply styling or functionality to them collectively. One would use the id attribute when you need to uniquely identify a single element. In concoction while the class attribute is ideal for applying consistent styles to multiple elements, the id attribute is more suitable for unique styling.

src (source) Attribute

It specifies the source URL of an image to be displayed.

<img src="image.jpg" alt="Cat Photo">

The alt attribute is used to provide alternative text for an image if the image fails to load. It serves as a descriptive text that is displayed in place of the image, helping users understand the content or purpose of the image even when it's not visible.

href Attribute (for links)

In my last article, I explained that href is shorthand for specifying the URL that the hyperlink points to. Example: <a href="youtube.com">Link to YouTube</a>

Width and Height Attribute (for images)

It determines the width and height of an image in pixels. Example: <img src="image.jpg" alt="Cat Photo" width="400" height="300">

Style Attribute

Allows you to apply inline CSS styles to an HTML element. Example: <p style="color: blue; font-size: 18px;">This is a blue text.</p>

disabled Attribute (for form elements)

Allows you to apply inline CSS styles to an HTML element. Example: <input type="text" disabled>

type Attribute (for form element and list items)

You can use the type attribute with the <ol> tag to change the numbering style. Example: <ol type="A"> Ordered lists in HTML are used to display a sequence of items in a specific order, which is important for the list's meaning. These lists are created using the <ol> tag, and each item within the list is marked with the <li> tag. By default, items in an ordered list are numbered with Arabic numerals. That full Example:

<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

This will render on a webpage as:

A. Item A
B. Item B
C. Item C

Also, you can use the type attribute to specify the input type of a form element. For example, if you want to indicate that an input is for a password, use the code: <input type="password" name="password" placeholder="Enter your password">. The placeholder attribute defines the text displayed in a form control when it has no value. The placeholder text should give a brief hint to the user about the type of data expected. Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt.

name attribute (for form element)

The name attribute provides a unique identifier for each form field. In an HTML <input> element, the name attribute is crucial for web forms. It identifies form elements when the form is submitted to the server, sending the data entered into each field with the corresponding name as a key-value pair. This attribute is essential for processing form data with server-side scripts, referencing form elements within JavaScript, or managing user input in various interactive components on a webpage.

HTML Multimedia

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Images are the most common type of multimedia in HTML. You can add images to a web page using the <img> tag. Example:

<img src="image.jpg" alt="Description of the image" width="200" height="150">

In the above example, src specifies the source URL of the image, alt provides alternative text for accessibility and SEO, and width and height are optional attributes to set the dimensions of the image. Multimedia elements (like audio or video) are stored in media files like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi. There are many video formats out there supported by HTML. The first web browsers had support for text only, limited to a single font in a single color. Later came browsers with support for colors, fonts, images, and multimedia! You can embed audio files directly into a web page using the <audio> tag. This allows you to play audio clips, music, or other sound recordings. Example:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser may not support the audio element.
</audio>

In the above example, controls provides play, pause, and volume controls for the user, srcspecifies the source URL of the audio file, while type specifies the MIME (Multipurpose Internet Mail Extensions) type of the audio file. The <video> tag is used to embed video files into a web page. This allows you to play videos within the content. Example:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser may not support the video element.
</video>

In the above example, controls provides play, pause, and volume controls for the user, width and height specifies the dimensions of the video, src specifies the source URL of the video file, while type specifies the MIME type of the video file.iframe

<iframe> allows you to display content from a different source or page inside a frame on your webpage. This can be useful for embedding videos, maps, web pages, or other external content. Example using <iframe> to embed a video from YouTube:

<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  width="560" 
  height="315" 
  title="YouTube Video" 
  frameborder="0" 
  allowfullscreen>
</iframe>

In the above code snippet, src attribute specifies the URL of the page or content you want to embed. Sizes are controlled using the width and height attributes. title attribute provides a description for the content, which is important for accessibility. The frameborder attribute controls whether the iframe has a border (0 for no border, 1 for a border), while the allowfullscreen attribute allows the video to be played in full-screen mode.

Note: Replace "VIDEO_ID" with the ID of the YouTube video you want to embed.

HTML Event Attributes

HTML can trigger actions in a browser through events, such as starting JavaScript when a user clicks on an element. For example, <button onclick="myFunction()"></button> creates a button in HTML, and the onclick event attribute makes it work with JavaScript. I will discuss programming events in more detail when I cover JavaScript in later articles. To touch base, there are Global Event Attributes, Window Event Attributes, Form Events, Keyboard Events, Mouse Events, Drag Events, Clipboard Events, Media Events, and Misc Events.

Thoughts and feelings

Where do I begin? I must give a big-shout out to freeCodeCamp.org again. I pulled a lot of my information from freeCodeCamp.org. I am still learning every day, and I sourced much of the information in this article from there. Thank you very much, and if you have read this far, please go check them out. I must also give a shout-out to https://www.w3schools.com for helping me wright this article. I’m still loving the learning process was a bit slower of a week this also took longer then expected. I had some annual training at my job and my internet was down at my house.We shall prevail! I have been getting a good understanding of JavaScript concepts. The learning curve has definitely been steep. The community at freeCodeCamp has been a great help. I have been researching Node.js and will be ready to apply it to my own projects once I understand libraries like Bootstrap, jQuery, Sass (Syntactically Awesome StyleSheets), React, and Redux. While freelancing and working on my own front-end projects, I will also start focusing heavily on back-end security. Lastly, I wanted to make an amendment about the blog. I put too much pressure on myself with everything, really. I'm working on it. I care a lot, and that won't change. I understand that my journey to becoming the best programmer I can be will be long and never-ending because, honestly, the goal is to be better tomorrow than I am today. I don't want to overwhelm myself, so I will publish these articles at my own pace. As always, thank you for taking the time to read my blog. Stay focused and keep coding!

Lets take it to the next level! HTML to the next level!