The Best Introduction to HTML, CSS and JavaScript (Part 3)

Reads 25,415

CSS and JavaScript Up Next:

Congratulations, you are reading this; here’s a continuation of our coding journey on Introduction to HTML, CSS, and JavaScript. In this tutorial, we will take another step further on our coding journey.

I’ll go further with our learning curve, and we have a unique topic today. Hi, welcome to our last class on HTML, To avoid missing any subsequent classes, kindly follow me. If you’ve missed the previous lessons we’ve had or want to refresh your memory, click here.

Each HTML element is interpreted in a specific way by your web browser. Now that you’ve started to learn about structuring your web pages, we should discuss the differences in block-level and inline HTML elements to gain a better understanding of how content is rendered

HTML Inline vs Block Element and DIV

Your web browser interprets each HTML element uniquely. Now that you’ve begun to learn about web page structure, we should go through the distinctions between block-level and inline HTML components to better understand how information is displayed.

Block-level elements

A block-level element always begins on a new line, and browsers provide space (a margin) before and after the element.

A block-level element always takes up the whole available width (stretches out to the left and right as far as it can).

The block components <p> and <div> are two of the most widely utilized.

In an HTML page, the <p> element specifies a paragraph.

In an HTML document, the <div> element establishes a division or segmentation.

Furthermore, most of the elements we have dealt with so far are block-level elements, including:
  • Headings (<h1> all the way to <h6>)
  • Ordered and Unordered Lists (<ol>, <ul>)
  • List Items (<li>)
  • Paragraphs (<p>)

Here are the full list of block level elements

Copy Code 


<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr><li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Inline Elements

As the name implies, inline elements do not take up the whole width of a web page and are often aligned with text content.

Copy Code 


<span>Span element is an example of inline elements</span>

Inline components include the following:

  • Anchors (<a>)
  • Images (<img>)
  • Bolding Text (<strong>)
  • Emphasizing Text (<em>)
The list of all inline elements can be accessed below.
Copy Code 


<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Note: An inline element cannot contain a block-level element!

Divs

The <div>, a block-level element, allows you to section into.

It is often used to encapsulate additional HTML components.

There are no necessary properties for the <div> element; however, style, class, and id are popular.

The <div> element may be used to style content blocks when combined with CSS:

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

As you can see, the <div> element has no unique effect on the web page and is mainly used to divide information into discrete groups for organizing or stylistic reasons.
Generally, you will nest other HTML elements within <div> elements to provide the proper structure to your page.

The <span> Element

The <span> element is an inline container that is used to mark up a section of text or a section of a page.

There are no necessary characteristics for the <span> element; however, style, class, and id are popular.

In summary, there are two types of display values: block and inline.

  • A block-level element always begins on a new line and occupies the whole available width.
  • An inline element does not begin on a new line and only takes up as much space as is required.
  • The <div> element is a block-level element that is often used to hold other HTML components.
  • The <span> element is an inline container that is used to mark up a section of text or a section of a page. When used with CSS, the <span> element may be used to design sections of text like follows:

HTML Selectors

 

HTML Selector (type, class & id)

There are three types of HTML selector namely,
  1. Type
  2. Class
  3. id

The id attribute provides you with the ability to give any element a unique identifier. This identifier can later be used to apply specific styles with CSS or capture input with some Javascript code.

Exp <h1 id= “twitterUser”> Kynsofficial </h1> Some notes about id usage:
  • an id value should only be used for a single element (you will get unexpected behavior if you use the same id value for multiple elements)
  • an id value must not contain any whitespace. The class attribute is similar to the id attribute in that it is used to identify specific elements. The main distinctions are:
  • the same class value can be used across multiple elements •an element can have multiple class values, separated by whitespaces

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Class selector for Exp <h1 class= “twitterUser”> Kynsofficial </h1>

for type selector. You will learn about it in CSS.

Image Element in HTML

 

Use the <img> tag to embed an image into your web page with an src attribute containing a file path to the image you want to be included. Use the alt attribute to provide alternative text with a description of the image if it doesn’t load or read by a screen reader for people with disabilities.
Unlike most of the elements we have encountered thus far, the img element does not have a closing tag: Take a look at this correct and incorrect image explanation.
Copy Code 


<!-- Incorrect img declaration -->
<img src="kynsofficial.jpg" alt="A cat"></img>

<!-- Correct img declaration -->
<img src="kynsofficial.jpg" alt="A cat">
Now let us do an example using everything we have learned so far in HTML

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Html Semantics

 

HTML SEMANTICS

In this lesson, we will address the importance of considering semantics when structuring your HTML pages.

A semantic element expresses its meaning unambiguously to both the browser and the developer.

Non-semantic elements include <div> and <span>, which reveal nothing about their content.

<Form>, <table>, and <article> are examples of semantic components that clearly specify their content.

So far, we’ve emphasized utilizing HTML to organize our web pages and show the material in a particular way. With the HTML5 standard, several new components were added, shifting HTML from a presentation-centric to a more semantic-centric approach.

What exactly do we mean by this? Referring back to the definition, the goal of semantic HTML is to indicate the meaning of each piece of your web page’s content.
HTML4 <i> and <b> elements vs. the semantic <em> and <strong> tags.
In the HTML4 world, the <i> element was used to italicize text, and the <b> element was used to bold text
Structural semantic elements With HTML5, several structural elements were introduced to separate content into more semantically appropriate containers.

Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:

  • <article>
  • <aside>
  • <details>
  • <nav>
  • <section>
  • <summary>
  • <time>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <hgroup>
  • <main>
  • <mark>

Let us explain some of them

hgroup

<hgroup> elements can be used to group heading elements that are semantically part of the same heading.
Copy Code 


<hgroup>
  <h1>My Amazing Website</h1>
  <p>More information about my website</p>
</hgroup>

header

Many web page headers include logos and huge headlines that identify the site. The <nav> elements should be used to hold your page’s navigation components.

Copy Code 


<header>
  <hgroup>
    <h1>My Amazing Website</h1>
    <h2>More information about my website</h2>
  </hgroup>
  <nav>
    <!-- Navigational anchors elments are often wrapped in an unordered list -->
    <ul>
      <li><a href="aptlearn.com/contact">Contact Me</a></li>
      <li><a href="/about">About me</a></li>
    </ul>
  </nav>
</header>

Footer

Copy Code 


<footer>
  <h3>&copy; aptLearn, United Kingdom, 2017</h3>
</footer>

article

<article> elements should be used for pieces of content that are unique to an individual page. A blog entry, a news/scholarly article, and a forum post are all good examples.
<article> elements should have a heading to indicate what the article’s content is about.
Copy Code 


<article>
  <h1>Cryptocurrency: What is it?</h1>
  <!-- Article contents -->
</article>

section

<section> elements represent thematic groupings of content on your web page. For example, if your web page housed the contents of a book, <section> elements could be used for the book’s chapters.
<section> elements can also be used to break up content in an <article>
Copy Code 


<section>
  <h2>Chapter 1</h2>
  <!-- Chapter contents -->
</section>
<section>
  <h2>Chapter 2</h2>
  <!-- Chapter contents -->
</section>
<section>
  <h2>Chapter 3</h2>
  <!-- Chapter contents -->
</section>
<section>
  <h2>Chapter 4</h2>
  <!-- Chapter contents -->
</section>

time

Use the <time> element to provide a machine-readable timestamp for parts of your content that indicate a specific time or date.
The <time> element has a DateTime attribute that takes as input the date/time in a variety of formats.
Copy Code 


<!-- time of an event -->
<p>The party begins at <time datetime="19:00">seven o'clock</time>!</p>

<!-- date of publication -->
<h1>My Blog Entry</h1>
<h2><time datetime="2015-05-07">May 7, 2015</time></h2>

Exercise 1

Paste these codes in your VS code, study, and relate them with this thread and everything you’ve been taught so far. or IDE Below

See the Pen
testpen by aptLearn (@aptlearn)
on CodePen.40347

<!— Wording inside this tag is called HTML comment to help you understand the code better and what each function does —>

HTML Table

 

HTML TABLE

There may be times when you’ll wish to display a table of data on your website. Let’s get started by converting the table below to HTML.

If you’ve never dealt with tabular data before, it’s helpful to understand that a table is made up of rows and columns.

Example

So how do we apply these concepts to HTML? First, we need to declare an HTML table by using the <table> tag
To add a row to our table, use the <tr>
Copy Code 


<table>
    <tr></tr>
</table>
To add individual pieces of data (the cells) corresponding to the columns, use the <td> tag which means table data.
To indicate that a cell is part of the header use the <th> tag instead of <td>
Copy Code 


<table>
    <tr>
    <td>first 1</td>
    <td>second 2</td>
    <td>third 3</td>
    <td>fourth 4 </td>
  </tr>
</table>
Now let us combine this and make a full table

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

See the complete list here.

Creating Forms in HTML

 

HTML FORMS HTML

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Looks like magic? don’t worry, it is simple, lets break it down

On our websites, forms are used to collect user input. If you’ve ever visited a blog and left a comment or used your credit card to make an online purchase, you’ve interacted with the web page you were on.
Let’s create a simple form

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

To start accepting user input, let’s add an <input> element that accepts text: You should now notice that there is an empty text box that you can click (or focus on) that accepts text input. Also, take note that <input> elements do not have a closing tag.
But having just a text box doesn’t indicate what the input is used for. Let’s add a <label> element to better indicate the <input> meaning:

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

The <label> element has a *for attribute that associates the <label> with a specific <input> element.
The *for attribute’s value should match that of the <input> element’s id value.
<label> elements are useful as they allow your <input> elements to be identified by screen readers.
We can now add an additional <input> element that will accept the user’s password, and a <label> to indicate the input’s meaning.

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Notice if you write in the password field, the text is obscured since we’ve indicated that the <input>’s type attribute has a password value. With this example in mind, let’s dive in and look at the variety of information we can use with HTML forms.

Do you also notice the rectangular lines around the form, that is to give it a fine outlook and it was done with <fieldset> tag

Text inputs

We’ve seen how the <input> element can accept text values. There are several different types of values that can be used, including:
  • text: for plain text
  • password: to obscure a password input field
  • Search: to indicate the text field is used for searching a page/multiple pages
  • url: validates input as a URL address
  • tel: for inputting phone numbers
  • email: validates input as an email address

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

textarea

You may use an <textarea> element if you want your user to be allowed to insert newlines (by hitting return) in their text input: Take note of the closing tag on < textarea> components. The rows and cols properties may also be used to set the size of a <textarea>.
Copy Code 


<html>
 <head>
   <title>Textarea Elements</title>
 </head>
 <body>
   <form>
     <label for="multiLineInput">
       <p>This is an input element that can include new lines:</p>
       <textarea id="multiLineInput"></textarea>
     </label>
   </form>
 </body>
</html>
If you want users to type long notes and have additional lines, then here’s how
Copy Code 


<html>
 <head>
   <title>Textarea Elements</title>
 </head>
 <body>
   <form>
     <label for="multiLineInput">
       <p>This is an input element that can include new lines:</p>
       <textarea rows="5" cols="50" id="multiLineInput"></textarea>
     </label>
   </form>
 </body>
</html>

Let’s move…

 

HTML Buttons

 

Buttons

An HTML <button> element should be used whenever you want to create a clickable button to perform some action on the page. <button> elements are simple to define and have three different
type of values:
  • submit: submits form data to a server
  • reset: resets all the data in the current form
  • button: no default behavior. This type of button will be more useful when we begin our discussion of Javascript. 

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

RESET BUTTON
Copy Code 


<html>
 <head>
   <title>Reset Button</title>
 </head>
 <body>
<fieldset>
   <form>
     <label for="firstName">First Name:</label>
     <input type="text" name="firstName" id="firstName">
     <label for="lastName">Last Name:</label>
     <input type="text" name="lastName" id="lastName">
     <!-- This button will reset the form -->
     <button type="reset">Reset Button</button>
   </form>
</fieldset>
 </body>
</html>

A clickable button is defined using the <button> tag.

Text (including tags like <i>, <b>,< strong>, <br>, <img>, and so on) may be placed within a <button> element. That is not feasible with an <input> element-created button!

Always include the type property with a <button> element to alert browsers what sort of button it is.

Let’s Style the buttons using a little bit of CSS

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

let’s add hover effect to the created buttons

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Hope you enjoyed this, let’s move, we are almost done

 

HTML Checkbox

 

Check Box

Definition and Application
A checkbox is defined by the <input type=”checkbox”>.

When active, the checkbox appears as a square box that is ticked (checked).

Checkboxes are used to allow a user to pick one or more selections from a restricted set of possibilities.

For optimum accessibility standards, always include the <label> tag!

See example below

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Checkboxes may be used to create a list where the user can pick numerous alternatives.
Congratulations you have learned and understand the concept of HTML, now let us move to CSS.

Perfect, everything you’ve learned so far is fundamental, enough to give you a great headstart in your quest to become a pro in web development.

Keep this in mind that you cannot learn it all from one place or one tutor, you need a combination of different resources to become the pro that you so admire to be. so check below for my recommendations

Learn HTML further here

Avatar photo

Founder & CEO of Swiftspeed Appcreator. I enjoy sharing my experiences in the digital world and helping businesses solve more problems with software development. Connect with me on LinkedIn @ Akinola Abdulakeem and Twitter @Kynsofficial

46 Comments

  1. Olayode Usman Ajibola says:

    Nice write up, I didn’t get the part of adding images, will be glad if you can respond to this, thanks

    Reply
      1. Otherdevsdev says:

        You can do a little research on Google. To be good at this, you need to learn how to search

        Reply

    2. If the image is downloaded on your PC, rename the picture to something you’ll remember (e.g Old Trafford); copy it to the folder you created for this HTML course. Then in your code;

      Reply

      1. Thank you. This was actually very helpful

        Reply
  2. Abdulwaheed Fatuga says:

    Hi,

    How can I send in all what have been able to do from lesson 1 till date?

    Thank you.

    Reply

  3. I dropped a tweet tagging you, since you are more available there on the go.
    Kindly make some of the screenshots of the lessons visible better. They are narrow and hence i could not know how your text area was larger and better aligned than mine. I did it though just that it wasn’t aligned.
    Thank you

    Reply
      1. Damilola Gbadamosi says:

        Thank you very much

        Reply
      2. Adefila Isreal Adedoyin says:

        Well done Sir, please i also tried adding image myself but it’s not coming up, I copied the link also tried coping the address of the image on my gallery too still isn’t up

        Reply

  4. Please could you kindly make the screenshots of the lesson full image? Most of them are half and I could not see the remaining texts

    Reply

  5. Please could you kindly make the screenshots of the lesson full image? Most of them are half and I could not see the remaining texts

    Reply

  6. Well done sir. I am an ardent follower of your class on twitter, albeit a silent one. It seems you recently unpinned the tweet of the classes you started around November, 11, 2021. I do visit those classes from time to time and i will be glad if i can get a link to the classes. God bless you.

    Reply
  7. oluwadare says:

    the images are not showing

    Reply
  8. Balogun Olukunmi says:

    Hello, I really appreciate you effort. Please can you include the images of what you’re talking about just like you did in previous classes. It helps me understand better thank you.

    Reply

  9. Good afternoon! Please is phone limited, coz I seem not to understand how to add an image to the HTML sir. This has been disturbing sir. Can a phone do that or I just need to get a pc

    Reply

      1. How do I copy the code on an iPhone please?🙏🏽

        Reply
  10. Timi fletcher says:

    Definitely saving all these codes on my sololearn, and the write up on my note pads also , thank you for everything Agba Akin, it’s me and tech this year

    Reply

  11. Hi there, I did everything as instructed by my image did not display when I ran the code. fyi I copied the image address from google, is this the reason for it not running? if yes how and where then do we get images from. I was able to right click on it and see the image on a different tab tho (alt came in handy lol).

    Reply
  12. Chiamaka obinaeri says:

    Pls am finding it difficult to add image

    Reply
  13. Dharmy Sosa says:

    Done with the html class.
    What a great lecture well detailed.
    Thank you sir.

    Now ready to start with CSS on Monday.

    Reply

  14. Finally finished, thanks again for this wonderful class🙏🏽

    Reply
  15. Nassur Mohamed Ramadhan says:

    Hello good sir
    Nassur here. taking your classes all the way from Kenya. Thank you so much for all the good great work your doing. God bless.
    I notice you haven’t taught us how to change the web address of our website that were creating from html. when we go live, it reads some other things rather than say (www.nassur.com)

    Reply

  16. Something for my log book… Thanks!

    Reply
  17. Otuekong UK says:

    Great teaching! Thank you Sir.
    My form is not appearing like yours, i.e. the boxes and names are on the same line…. Surname (box) First name (box) Submit (box), instead of…

    Surname (box)
    First Name (box)
    Submit (box).

    Reply
      1. Oriowo Anuoluwapo Mary says:

        What about the br tag for this purpose

        Reply

  18. Thank you very much for this

    I used to be have rusty knowledge about forms but now am better

    Reply

  19. Thank you so very much for the classes.

    I’m having a little issue. My form is coming out horizontally, instead of vertically

    Reply

    1. Oh. I get it now. I just watched the video. You did CSS to make it look vertical and beautiful

      Reply
  20. Classicalboy says:

    Submit Button

    First Name:

    Last Name:


    Submit Name

    Where will the submit button be direction to? Can I choose where I want it to be directing to?

    Reply

  22. Simply want to say your article is as amazing.
    The clearness on your put up is just spectacular
    and i could assume you are knowledgeable in this
    subject. Fine with your permission let me to take hold of
    your RSS feed to keep updated with impending post.
    Thanks one million and please continue the gratifying work.

    Reply

  23. Hi! Do you use Twitter? I’d like to follow you if that would be okay.
    I’m definitely enjoying your blog and look forward to new updates.

    Reply

  24. you’re in reality a good webmaster. The site loading speed
    is amazing. It sort of feels that you are doing any unique
    trick. Moreover, The contents are masterwork.
    you’ve performed a wonderful activity on this
    topic!

    Reply
  25. akinshola adewale says:

    so greatful…..am loving this

    Reply

  26. I had problem on the first and last name including the radio button,both their space lies side by side instead of being in accordance like yours

    Reply
  28. ADERIBIGBE Adekorede Azeez says:

    Thanks for all you do AGBA AKIN.
    You’re a blessing to our generation.
    I have been following your class for days now, and I am glad I came across someone like you to teach coding for free. God bless you.
    I have a question, I am wondering how I was able to paste your code on my sololearn app and it still displayed Ronaldo’s picture, please can you shed a little light on that because I have googled it and the result I am having is that I must download the pictures and upload first, but your code I didn’t download the picture, I just copied your code and paste it on my sololearn and it displayed the picture and when I copied just the link of the image and paste it on chrome it displayed the picture also but when I deleted one word form the link it displayed error.
    I will be glad if you answer my question.
    Thanks once again

    Reply
  29. Oriowo Anuoluwapo Mary says:

    How can I prevent The radio and checkboxes from selecting multiple options as response

    Reply

  30. How can I add borders to the table to give it more shape sir

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *