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

Introduction to HTML

Before I dive into details, let’s do a quick recall of our previous class on HTML.

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

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

Before we start, 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 common 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:

HTML ATTRIBUTES & HYPERLINKS

Now that you understand the context in which HTML is used from the previous class, we can go over more details of HTML usage.

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:

Image

In the below code, you can see h2. This means that we are telling the browser to display whatever is in the quotation 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

Image

Quotation marks. Remember to always close your tags with </> because you may get a nonsense result if you don’tAnother 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 the answer
Create a top-level header that has a title attribute of Important Message! and is colored green using the style attribute
Answer
Image
Without wasting much time, let’s move to

Anchor Elements/Hyperlinking

One of the most critical 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 different web addresses, there really wouldn’t be a “web.”
Look at the image below; that’s how the web works, 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. I just wanted to show you a pictorial rep of the web.
Image
We can connect an HTML page to other web pages by creating a hyperlink using the anchor tag, like so:
Image
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: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 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 to

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, this is saying that regardless of which browser you type google.com, you’re always going to see the same web page.

class Exercise 2

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

Image

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.

Image

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

Image
That’s the end of the class for today; I want to appreciate your resilience and dedication to learning this, you’re the real MVP, and I can promise you with consistency, you will become a frontend developer before the year collapse.
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, as well as 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, you can see they reduced in size by levels

Image

the word inside the <h1> tag is bigger than <h2> and <h2> is bigger than <h3>Remember The <title> tag is under <head> tag that means the word “h1 – h6 elements” is what will appear in the browser header as title not the content body

Image

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.
Image
ORDERED LISTS An ordered list is fairly similar to an unordered list, except we will want to use the <ol> tag to declare the list. List items are still wrapped in a <li> tag. The list items will be numbered, rather than the bulleted items we saw previously.
From the screenshot below, you’d notice I listed some of our company’s @theswiftspeed”
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
Image
Let’s look at the TYPE and START The type attribute allows 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
Image
Image
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
Image
Image
Lastly, learning to code is simple but you need to practice consistently to climb the level that you desire. I’ll always be here to guide you, if you haven’t followed me do that to avoid missing other classes. If you’ve missed previous classes. Go here. Have a good one and anticipate the next class.

12 Comments

  1. Thanks for the lesson

  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 😊

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

Leave a Reply

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