Thread by @Kynsofficial

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.

Welcome to your 2nd class on HTML. Kindly follow me and switch on my tweet notification to avoid missing subsequent classes.

If you are just finding this for the first time, the previous class is on my pinned tweet, and you might want to check and catch up with us.

In the previous class on HTML, we did a comprehensive introduction to web development, and I taught you how to install the needed tool to get started; by now, I assumed you have the required IDE. So let us get to class
Recalled that last class, I told you the full meaning of HTML

"Hyper Text Markup Language"

Today, We will be discussing HTML ATTRIBUTES and HYPERLINKS, so let's get started.

HTML attributes

HTML attributes provides additional information about an HTML element. Attributes can be considered as properties of the element.

An element may have a single attribute, many attributes, or no attributes at all.

Let’s take a look at an example heading with a “title” attribute:

Below, you can see h2; this means that we are telling the browser to display whatever is in “” in the standard (HEADING 2) format

Attributes are placed in the opening tag, with a space after the element declaration (or another attribute, if there are multiple) and are defined using the following format:

The attribute name is always followed by an = sign, and the attribute value is always wrapped in

quotation marks. Remember to always close your tags with </> because you may get a nonsense result if you don’t 😢
Another thing to take note of is there are no spaces between the attribute name, = sign, and the attribute value. Now recheck the above image to ascertain.

Short Class Exercise. Don’t worry, I’ll provide an answer 😉
*Create a top-level header that has a title attribute of Important Message! and is colored green using the style attribute*

Answer

Without wasting much time let’s move to

Anchor Elements/Hyperlinking

One of the most important aspects of the World Wide Web (WWW) is the ability to link to other parts of the web. Without a way to redirect our HTML page to other web addresses, there really wouldn’t be a “web”

Look at the image below, that’s how web works, that is a network visualization of nodes on the World Wide Web.

In one of my future tweets, I’ll explain how the internet works but let’s not digress from the class for now.

I just wanted to show you a pictorial rep of the web

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

Let me explain the above image

The “href” attribute refers to Hypertext Reference, whose value is a “Uniform Resource Locator” (URL). A URL is basically fancy lingo for a web address, or the destination the link is pointing to. The href attribute can also refer to things like:

•Email Addresses (mailto:[e-mail])
•Phone Numbers (tel:[phone])
•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

To understand What I am saying better, The less 5 Minutes video and Complete explanation of this class will help, check below
akinolaakeem.com/the-best-intro…

let us continue
Again there’s something to note, and it’s

Relative vs Absolute URL paths

It’s important to understand how file paths play a role in how your hyperlinks will operate. In an absolute URL path there are three main components:

1. The Protocol: What you most often see as http:// or https:// when you browse websites, but can be other things, like file:// or ftp://
2. The Domain: The name of the website (in this example, twitter.com)
3. The Path: The directory (or folder) we wish to navigate

An absolute URL provides all the information necessary for a browser with an internet connection to reach the desired address.

Furthermore, an absolute URL will not change its destination if used on different devices/browsers. Basically what this is saying is that regardless

of which browser you type google.com you’re always going to see the same webpage

Class Exercise 2, I’ll solve

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

Relative URL example

Let’s take a look at a quick example of a directory named “website” with:
•a main index.html page
•an about section, named about.html
•a nested directory named blogPosts, with three article HTML files named:
◦article1.html
◦article2.html

If we started in the website directory on the index.html file, we could redirect to the About section with the anchor tag. Pic1

Say we want to navigate to an article in our blogPost folder. relative URL path would then include the directory name: blogPost/article2.html. Pic2

Abbreviation to Note so far
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

So let us learn HTML Semantics
For example, see the image below, I listed all headings types present in HTML, you can see they reduced in size by levels

Run this code in your various IDE. Both Sololearn for phone and VsCode for PC

HTML LIST

Often times we will want to include a bulleted or numbered list in the web page content. This can be accomplished with HTML lists. Unordered lists We could create an unordered list to represent things like a list of to-dos or a list of grocery items.

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 <li> tag (list items) check the image below.

That is the end of today's class; more details are available on my website link up there.

Support me by following @TheSwiftScores

For a class assignment, type out all codes we did today in your IDE, and quote or post a Screenshot in the comment.

Watch the video summary below

Video summary of today’s class part 1. Please watch, retweet and share 👨‍💻

Video summary of todays class part 2, watch retweet and share 👨‍💻😎

Video summary, last part for todays class, you can access all these here akinolaakeem.com/the-best-intro…