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.
Congratulations, you are seeing this Tweet; here is another life-changing opportunity to transition into tech this year. Another programming class on:
Course: HTML, CSS & JAVASCRIPT
I’ll explain to you like you are 4 years old, kindly retweet for others, and join the class.
— Àgbà Akin (@Kynsofficial) January 5, 2022
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.
- You need a PC in perfect condition
- A browsing data
- 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.
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 |
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 WebWe 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
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.
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.
Thanks for the lesson
You are welcome Judith
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!
The Title is what shows at the top of the browser.
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…
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.
Thank a lot
Welcome Timmy
Thank you for the lesson ❤️
You are welcome
I’m on taking this course from udemy but I’d love to learn to from you too thanks
More than happy to teach you pal
Thank you very much for the class. I’ve learnt a lot and I am just starting. I will catch up soon 😊
Very Glad, thank you.
Thank you so much for this…God bless you
Thanks alot for the class.
Am I to create a different index.html for each class exercise
Yes you can do this if you want
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.
Thanks! Wish I had a PC
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
This is awesome. God bless you
I’m enjoying this lesson.
Thank you so much Mr. Akeem. ❤️🙏
May whatever you lose throughout this journey return to you in tenfold.
Amin
the images are not showing
Hi, They have been fixed. Thanks
Thanks for the lessons
Please all the images are not showing
Hi, please recheck it has been updated
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?
Hi, it is because of the @ being a Twitter username. Try it out on your IDE.
Alright. thanks
May God Almighty continue to bless you for this bro
AMIN
Thanks a lot for the lessons boss, they are really easy to understand.
You are welcome Kingsley
You are really trying my dear keep it up… Am following up though I have gone far but you are doing good
Good. Thank you.
Thank you very much for the lesson Sir.
Welcome Fadare
Thank you for this class sir
You are welcome
Thanks for this boss
Thank you for sharing this knowledge, you really made learning easy.
Thank you and God bless you
It’s not easy putting together all the resources to teach web development.
I really appreciate your effort.🙏🏾
Thank you so nuch
Awesome Content, Following you from kenya
Thank you very much.. You made learning to code very easy for me… Thanks and God bless you
God bless you beyond expectations sir. This lesson is greatly helpful and appreciated
Very good job you are doing sir. Thank you so much
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
Sir. Thanks so much for the lessons.
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
thanks for the lesson. Really grateful for this opportunity
.
You are welcome.
Thank you ann God bless you.
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
Really following. We probably haven’t gotten to the hard part but i’m picking it very easily. You simplify things sir. Thank you
Thank you for the Good words Alameen
Thank you for this opportunity sir, you made coding simpler and easy to access.
God bless you greatly.
Thank you Abosede
Thank you so… I was trying to learn a skill this year, so far it’s been great
Your lessons are very insightful. A quick question: Is it possible to have ordered items/unordered items in form? I want to have links listed in ordered as bullet points. How do I go about it?
Thanks a bunch sir
Thanks a bunch sir.
Thank you Boss
Sir, about the anchor, I wrote the code:
mail me
The issue is when I click on this email on the browser, it says “site can’t be reached” or takes me to a blank google page. Is anything wrong with the code sir?
Check that the URL of the page you are trying to reach is working.
Just went through this again, thank you👍🏽
Thanks for this wonderful lecture.
God bless you sir
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.
Thanks for your help Sir
May God bless you
Thanks for another great class
Thank you
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.
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
Thanks Bossman, More Ororo
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.
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😔
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?
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.😩😩😩
great one brother, God bless you
Thank you
I need help with the configuration of my vscode it’s not running (debugging)
Nice lectures
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?
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!
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.
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.
Well understood..Kudos Agba.
thanks for what you do just starting out. hoping to meetup with other classes before the test
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
Great lecture and very simple explanation, More knowledge to you Brother!
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.