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

Congratulations, you are reading this; here’s a continuation of our coding journey on Introduction to HTML, CSS, and JavaScript.

Course Title: Introduction to HTML – CSS – JAVASCRIPT

Before I dive into details, let’s quickly recall our previous class on HTML.

Welcome to your 2nd class on HTML. To avoid missing future classes, kindly follow me.

If you already missed our first class or didn’t but would like to refresh your memory, please read here.

Before starting, let me remind you what you need to succeed in this course and summarize the previous HTML class.

  1. You need a PC in perfect condition
  2. A browsing data
  3. You need an IDE such as a VsCode application for PC—lastly, determination & focus, and lastly, determination & focus.

In our last class, I recalled that as a dev, you need to get familiar with standard terms used in techs. And I told you the meaning of IDE and HTML IDE- Integrated Development Environment- mostly tools for writing, debugging, and running codes. Examples include VsCode, Android Studio, Xcode, Netbean, Eclipse, etc.

Summary of the previous HTML class

Recalled that HTML full meaning is Hyper Text Markup Language, and it is this document that tells the browser what’s what because the computer isn’t nearly as smart to understand common English

Today, we will be talking about:

Basic HTML Structure

To properly define an HTML file, we must place <head> and <body> elements within the root <html> element.

The <head> element contains supporting information about the file, commonly referred to as metadata. There must also be a <title> tag (providing the webpage a title).

It must be placed just underneath the <head> element to be complete. The < head> element may include links to Javascript scripts and CSS stylesheets may also be included in the <head> element. Although, in most cases it is advised to place the Javascript linking (<script src=”file.js”> <script>) just before the closing </body> of the HTML file so the web browser can render the page faster.

The primary material of an HTML file is contained in the <body> element. This is the element that contains the data displayed by your web browser.

Inside an HTML file, there can only be one <body> element, and the majority of the HTML you write will be contained within this element.

This file’s <body> element has a high-level header (<h1>) and a paragraph (<p>).

Let us look at a simple pictorial structure.

I know all these may sound like Hullabaloos to you, but it gets a lot easier in a practical sense. Then let’s run the code from the picture earlier and see what the browser shows.

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

You will notice that it is just a white page with texts, and it doesn’t look like these fine websites you typically visit; yes, that’s where CSS comes in. What we have done above with HTML is more or less an introduction, as I assumed everyone taking this course is beginners.


Let’s Learn about HTML Metadata; This will help you understand most tags primarily used in the <head> section of an HTML file.

You’re likely thinking that the <title> tag is the only tag that belongs in the head section of an HTML file. If you did, I’m pleased to confirm that it is not so. There is a slew of other tags that go in the head area, some of which are listed below.

The <link> element connects an external file, such as CSS, to your HTML.

The <script> element links an external file, such as JavaScript, to your HTML.

The <meta> tag is often used to identify the character set, page description, keywords, document author, and viewport settings.

More emphasis on <Meta> Tags And Examples

To define the character set used for your HTML file, use this:

<meta charset=”UTF-8″>

If you wish to refresh the document every 30 seconds, use:

<meta http-equiv=”refresh” content=”30″>

Setting the viewport to make your website look good on all devices:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Define keywords for search engines (SEO):

<meta name=”keywords” content=”CAT, DOG, PET STORE”>

Define a description of your web page:

<meta name=”description” content=”Frontend Web Development”>

Define the author of a page:

Example of meta tags:

<meta name="keywords" content="CAT, DOG, PET STORE">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Making your website looks excellent and responsive regardless of what device a user is accessing it from is essential. You will have to learn more about configuring the viewport to make your web page stand out and provide the best user experience.

VIEWPORT CONFIGURATIONS 

The viewport is the viewable area of a web page to the user. It changes depending on the device; for example, on a mobile phone, it will be smaller than on a computer screen.

All of your web pages should have the following <meta> element:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This instructs the browser on how to adjust the page’s dimensions and scale.

The width=device-width section adjusts the page’s width to match the device’s display width (which will vary depending on the device).

The initial-scale=1.0 element specifies the initial zoom level when the browser loads the page for the first time.

Other tags we can find in the HTML head section are

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
You can view a complete list at here.

HTML Attributes

 

Summary of the previous HTML class

Recalled that HTML’s full meaning is Hyper Text Markup Language, and it is this document that tells the browser what’s what because the computer isn’t nearly as smart to understand common English

Today, we will be talking about:

HTML attributes

HTML attributes are special characters that are used within the opening tag to define the behavior of the element. HTML attributes are a form of “enhancer” which lay emphasis and provides more information about an HTML element.

HTML attributes are used to offer more information about an HTML element. Attributes may be thought of as elemental characteristics. Furthermore, an element might have a single attribute, several attributes, or none at all.

Look at this Image to better understand what an HTML attributes are

Still too complicated? Let us do it this way and take HTML attributes one after the other.

The href Attribute

A hyperlink is defined using the <a> (Also known as Anchor) tag. The href property defines the URL of the page to which the link directs users: For example:

<a href="aptlearn.io">Learn Tech Courses</a>

What do you think the HTML attribute is in this case? the href of course. See the picture below for clearer comprehension

The src Attribute

src otherwise refer as source can be used to point to a file path. For example, when embedding an image, we normally use the <img> tag and then point to the location of the file using src. See an example

<img src="bitmoji.jpg">
<!--If i want to give this an alternative text also known as alt attribute. I can write as -->
<img src="bitmoji.jpg" alt="My Bitmoji">

The width and height Attributes

If an image has a certain width and height (in pixels), the <img> element should additionally include these attributes:

<img src="bitmoji.jpg" width="300" height="500">

I hope by now you gotten a clearer understanding of Html attributes.

Here are other things you should  note

  • Attributes are available for every element in HTML.
  • It is important to know that the link’s href and src attributes are both used to specify the URLs to which the link is directed.
  • Size information for pictures may be found in the width and height properties of an <img>.
  • Using the alt property of a <img> tag, a picture may be given an alternative description.
  • The <style> property may be used to change the color, font, size, and more of an element’s attributes. you will learn more about style as we proceed.
  • Language declaration is made using the lang attribute of the HTML <html> element.
  • The element’s title property provides some further details and usually, the output is located at the top of the browser.

Short Class Exercise.

Create a top-level header that has a title attribute of pet stores and is colored green using the style attribute.

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

Click on the white blank screen to View Answer

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


Without wasting much time, let’s move to

HTML Hyperlinks

 

Anchor Elements/Hyperlinking

The capability to connect to other web segments is one of the essential characteristics of the World Wide Web (WWW). Without an easy means to redirect our HTML page, there would be no such thing as a “web.”

Look at the image below; that’s how the web works, a network visualization of nodes on the World Wide Web. Let me explain briefly how the internet works, 

The Web

We can connect an HTML page to other web pages by creating a hyperlink using the anchor <a> tag, check this example:

<a href=”page-url>link text</a>

Let me explain the above image. The “href” attribute refers to Hypertext Reference, whose value is a “Uniform Resource Locator” (URL). This is the one I replaced with “page-url”.

Note these

The href property, which identifies the link’s target, is the most critical part of the <a> element.

The link text is the link section that the reader will see.

The URL address may be accessed by clicking on the link text.

A URL is just a fancy way of saying “web address” or “link destination.” Other items that you may link include:

  • Email Addresses (mailto:me@swiftspeed.com)
  • Phone Numbers (tel:+2348161875641)
  • Documents/Files (Give the URL of the file instead of a web page)•Another different location on the same web page the browser is currently on.

Again there’s something else to note, and it’s

Relative vs. Absolute URL paths

In the href property, you may specify the URL in one of two ways:

An external file or page hosted on another website may be linked to yours by using an absolute URL. Example: https://www.googlee.com/img/cat.jpg.

Notes: Images from other sources may be protected by copyright. You may be breaking copyright rules if you don’t seek permission to use it. External photos may also be deleted or modified at any time, so you have no control over them.

Linking to an item, a file, or pages hosted on your website using a relative URL is the best. There is no domain name to be found in this URL because the whole file is hosted under your domain name; all you have to do is specify where these files are stored or located, and they will be fetched and become reachable to end users.

In this case, the URL will be relative to the current page. href=”bitmoji.html” is an example. A slash indicates that the URL is related to the current domain. As an example, href=”/blog/news.php”.

Relative URLs are nearly always preferable. If you switch domains, nothing will go wrong.

It’s critical to understand how file paths influence how your hyperlinks work. There are three essential components of an absolute URL path:

  • The Protocol: When you visit websites, you will most typically see http:// or https://, but it might also be file:// or ftp://.
  • The Domain: The URL of the website (in this case, https://aptlearn.io/).
  • The Route: The directory (or folder) to which we desire to browse

An absolute URL contains all of the information required for a browser with an internet connection to access the intended destination.

Furthermore, an absolute URL will not alter its destination if used on multiple devices/browsers.

class Exercise 

Create an anchor HTML element with an absolute URL path using the “https” protocol to navigate to the domain name

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

Click on HTML to View Answers

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

That’s the end of the class for this lesson; I want to appreciate your resilience and dedication to learning this. You’re the real MVP. I can promise you that with consistency, you will become a front-end developer soon.

Abbreviation to Note

URL- Uniform Resource Locator

HTTPS- Hyper Text Transfer Protocol

FTP- File transfer protocol

HREF- Hypertext reference

HTML- Hyper text markup language

IDE- Integrated Development Environment If you have issues or any questions kindly post in the cs

We will learn about HTML semantics and how to change an element’s font size with Cascading Style Sheets (CSS) in subsequent classes. For example, see the image below; I listed all headings types present in HTML, and you can see they are reduced in size by levels.

Html Headings

HTML headings specify six levels of headings, which are H1, H2, H3, H4, H5, and H6 heading elements. The H1 element is the most crucial, whereas the H6 element is the least essential. These various heading levels aid in communicating the order and hierarchy of material on a page. Headings with an equal or higher ranking, for example, signal the start of a new section, while headings with a lower rank indicate the start of a new subsection inside a higher-ranked section.

<html>
 <head>
   <title>h1 - h6 elements</title>
 </head>
 <body>
   <h1>Heading Level 1</h1>
   <h2>Heading Level 2</h2>
   <h3>Heading Level 3</h3>
   <h4>Heading Level 4</h4>
   <h5>Heading Level 5</h5>
   <h6>Heading Level 6</h6>
 </body>
</html>

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

the word inside the <h1> tag is bigger than <h2> and <h2> is bigger than <h3>. Browser shows differences in heading type by applying various font sizes depending on the level of heading.


Remember The <title> tag is always under the <head> section, while the h1 tags will be under the body tag. let us move on

Html List Elements

 

LIST

If we compose or develop a web page, we often need to add a bulleted or numbered list to the text. This can be done with HTML lists. In this case, the lists are not in a specific order. Unordered lists can be used to show things like a list of things to do or a list of things to buy.

To do this, we must use the <ul> tag with nested <li> tags for the list items. The <ul> tag in the code means “unordered lists” it tells the browser to list your items in an unorderly manner, While the <li> tag (list items) check the image below.

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

ORDERED LISTS

An ordered list is relatively similar to an unordered list, except we will want to use the <ol> tag to declare the list. The list items will be numbered rather than the bulleted items we saw previously. List items are still wrapped in a <li> tag.

From the screenshot below, you’d notice I listed some of our company’s @aptlearn_io.”
products using the <ol> tag which means ordered list The difference between <ol> and <ul> is that <ul> uses • to list the items <ol> uses numbers

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

Changing the bullet type

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

40347

The TYPE and START type attributes allow us to change the style of either the
bullets for unordered lists or the numbering scheme for ordered lists.

Unordered list type values include -circle -disc -square; the First image uses the
Type for Disc. 2nd uses square

Ordered list type values can be used to change the numbering scheme and include the following:

•1: Default numeric scheme

•I: Upper-case Roman numerals

•i: Lower-case Roman numerals

•A: Upper-case Alphabet

•a: Lower-case Alphabet

Ordered lists have an additional start attribute that can be used to start the numbering at a value other than the default of 1.

If you look at the input (start =“5”) is me telling the code to start listing from number 5, I won’t include that if I want to start from 1

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

What if you want to start the numbering from 5?

You can try

type=1 start=5

Important HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

For complete LIST tags, see here.

Lastly, learning to code is simple, but you need to practice consistently to climb the desired level.


Please click here if you would like to take this course in full, practice in real-time, acquire certification, and more.

95 Comments

  1. Thanks for the lesson

      1. Hi baba, Thanks for the class thus far and God bless. Please for the below code, it appears the title attribute in the H1 element just gives information and does not have any effect in the user experience when the code is run.

        Exercise 2

        Hello, World!

          1. Ajani Adams says:

            I think what he means is the title in the header not the one in the head, i.e,
            and not this;

            Still learning from you sir…

    1. Abdulrafiu Shekoni says:

      I am having issues with my Vcode. When I tried running my codes with ‘Chrome’ option, I got a feedback Chrome not installed on the system. I had to run the work manually. Pls help me out in solving this cos I have tried but could not get it. I found Vcode interesting won’t lie.

      Thanks. Keep up the good work.

  2. Ololade Eleja says:

    Thank you for the lesson ❤️

  3. Martins Aziegbe says:

    I’m on taking this course from udemy but I’d love to learn to from you too thanks

  4. Mozeedat Adediran says:

    Thank you very much for the class. I’ve learnt a lot and I am just starting. I will catch up soon 😊

    1. Boluwatife says:

      Thank you so much for this…God bless you

  5. Thanks alot for the class.
    Am I to create a different index.html for each class exercise

      1. Thanks for the lesson. But as a beginner I still have a long way to go. It seems like a Chinese in the first class.

  6. Miriam Ebie says:

    Thanks! Wish I had a PC

  7. My first time of learning anything tech.
    I must say you did a great job.
    Thank you so much.
    I hope to become good after completing the courses

  8. This is awesome. God bless you

  9. Shehu Isiyaku says:

    I’m enjoying this lesson.
    Thank you so much Mr. Akeem. ❤️🙏

    1. Okyere Dennis says:

      May whatever you lose throughout this journey return to you in tenfold.

  10. the images are not showing

  11. Bamidele oluwatobi says:

    Thanks for the lessons

  12. Samuel Oluwaniyi says:

    Please all the images are not showing

  13. Last Man Standing says:

    Hello Akinola,

    Please, In the last frame, the first and second ordered list are supposed to come out as roman and lower case alphabet but it came out as numbered. Did I missed something?

      1. Last Man Standing says:

        Alright. thanks

  14. Idrees Kamaldeen says:

    May God Almighty continue to bless you for this bro

  15. Thanks a lot for the lessons boss, they are really easy to understand.

  16. You are really trying my dear keep it up… Am following up though I have gone far but you are doing good

  17. Fadare Israel says:

    Thank you very much for the lesson Sir.

  18. Julius lawal says:

    Thank you for this class sir

      1. Olamide Idris says:

        Thanks for this boss

      2. Thank you for sharing this knowledge, you really made learning easy.
        Thank you and God bless you

  19. alohaCodes says:

    It’s not easy putting together all the resources to teach web development.
    I really appreciate your effort.🙏🏾

  20. Evans Wamathai Wandeto says:

    Awesome Content, Following you from kenya

  21. Seun Odukunle says:

    Thank you very much.. You made learning to code very easy for me… Thanks and God bless you

  22. God bless you beyond expectations sir. This lesson is greatly helpful and appreciated

  23. Very good job you are doing sir. Thank you so much

  24. please my vscode app is giving issues, after writing my code and i try to lauch it in on edge and even chrome is says localhost:8080. pls help me out here akin

  25. Dharmy Sosa says:

    Sir. Thanks so much for the lessons.

  26. Thank you so much Coach for this opportunity but I’ve encountered a challenge, I followed yesterday’s class and submitted my assignment, the challenge is that while doing it and it got to that run and debug part, mine showed something else. If it’s not too much, please check out my twitter page @ehmelia_ and you’ll see the picture of what I’m talking about. Thank you Boss

  27. Augustine Onu says:

    thanks for the lesson. Really grateful for this opportunity
    .

  28. Olamilekan Baruwa says:

    Thank you ann God bless you.

  29. Starry🀄 says:

    Honestly, you are doing a great work Agba. God bless you for impacting me with all this knowledge. I am so elated right now. Class 2 over and out🥂

    MY IDOLO

  30. Alameen Umar says:

    Really following. We probably haven’t gotten to the hard part but i’m picking it very easily. You simplify things sir. Thank you

  31. Opaleye Abosede says:

    Thank you for this opportunity sir, you made coding simpler and easy to access.
    God bless you greatly.

  32. Tamelia Amarachi says:

    Thank you so… I was trying to learn a skill this year, so far it’s been great

  33. Just went through this again, thank you👍🏽

  34. Adio Muizz says:

    Thanks for this wonderful lecture.

  35. I just started yesterday, went through the twitter threads and website and i grabbed everything discussed so far. I am about to check the fourth class, may God help me. Thanks for these lessons, more grease to your elbow.

  36. Thanks for another great class

  37. Mr Tochuks says:

    Please do the attributes e.g. “style” work only under the body element? because I have tried it nested within the head element and it didn’t reflect the chosen colour on my web page.

  38. I took five classes today, i wanted to show you what i can do but i cant screenshot here, should i just send to CS on twitter

  39. Crown of Wealth says:

    Thanks Bossman, More Ororo

  40. Sam Oloruntoba says:

    Thank you so much Akeem for all you do. May God compensate you for all you do.

    I want to make a request to get this tutorial as pdf file.

  41. Valentine says:

    Hello sir, I can’t seem to see any outputs when I put in the codes. Am I supposed to create a new folder for each code or I’ve pressed a wrong thing😔

  42. Thank you once again.

    Have you thought about adding “DATE and TIME” to this website and to the comment section so as to keep track of when the tutorial was posted?

  43. Oziomachukwuu says:

    Thank you so much for making this simple.

    I really am enjoying this.

    On my list of favourite Twitter Mutuals, the first four appeared with Roman numerals, the second list appeared in small letters numbering while the third comes as 5-8.😩😩😩

  44. I need help with the configuration of my vscode it’s not running (debugging)

  45. Great work here bro. I have a question though. I’ve observed that my attribute value using “href” which contains a URL comes out underlined when launched on the browser but your SwiftScore example isn’t underlined, any help on that?

  46. Abiodun Ayorinde says:

    Thank you Akeem for this wonderful teaching!
    I started the class 2 days ago and it’s been very awesome. I look forward to sharing my progress on the twitter thread cs.
    Merci!

  47. Good day, please I’m finding it difficult to run the code on a browser it’s always showing local host. Is there any extension I need to download or a particular settings required and my index.html and CSS are not giving output on browser.

  48. I never thought I could understand this coding thing till this morning.

    Even without having to practice it, I’m really wrapping my mind on all the explanations.

    I’m definitely getting the tools in no time.

    Thanks for these classes.

  49. Alimi Kehinde Sherifah says:

    Well understood..Kudos Agba.

  50. thanks for what you do just starting out. hoping to meetup with other classes before the test

  51. Thanks for the class Agba.
    I’m really grateful for being given the opportunity to learn tech freely.
    Just starting my class tho, see you guys at the next class

  52. Great lecture and very simple explanation, More knowledge to you Brother!

  53. Melvin Chukuma says:

    i just started my Tech journey as i stumbled on your post on Twitter today. I hope i am not to late and i must say you are doing a wonderful job.

Leave a Reply

Your email address will not be published.