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:
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).
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 <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:
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.
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
|<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|
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 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.
Click on the white blank screen to View Answer
Without wasting much time, let’s move to
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,
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”.
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:email@example.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.
Create an anchor HTML element with an absolute URL path using the “https” protocol to navigate to the domain name
Click on HTML to View Answers
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 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>
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
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.
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
Changing the bullet type
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
What if you want to start the numbering from 5?
You can try
Important HTML List Tags
|<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|