I’ll go further with our learning curve, and we have a unique topic today. Hi, welcome to our last class on HTML, To avoid missing any subsequent classes, kindly follow me. If you’ve missed the previous lessons we’ve had or want to refresh your memory, click here.
Congratulations, you are seeing this Tweet. Kickstarting your career in Tech has been fruitful as we will be coming to the end of HTML after today’s class
Again I will break this down like you are 4 years old, kindly retweet for others, and join.
— Àgbà Akin (@Kynsofficial) January 7, 2022
Each HTML element is interpreted in a specific way by your web browser. Now that you’ve started to learn about structuring your web pages, we should discuss the differences in block-level and inline HTML elements to gain a better understanding of how content is rendered
HTML Inline vs Block Element and DIV
Your web browser interprets each HTML element uniquely. Now that you’ve begun to learn about web page structure, we should go through the distinctions between block-level and inline HTML components to better understand how information is displayed.
A block-level element always begins on a new line, and browsers provide space (a margin) before and after the element.
A block-level element always takes up the whole available width (stretches out to the left and right as far as it can).
The block components <p> and <div> are two of the most widely utilized.
In an HTML page, the <p> element specifies a paragraph.
In an HTML document, the <div> element establishes a division or segmentation.
- Headings (<h1> all the way to <h6>)
- Ordered and Unordered Lists (<ol>, <ul>)
- List Items (<li>)
- Paragraphs (<p>)
Here are the full list of block level elements
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr><li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
As the name implies, inline elements do not take up the whole width of a web page and are often aligned with text content.
<span>Span element is an example of inline elements</span>
Inline components include the following:
- Anchors (<a>)
- Images (<img>)
- Bolding Text (<strong>)
- Emphasizing Text (<em>)
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
Note: An inline element cannot contain a block-level element!
The <div>, a block-level element, allows you to section into.
It is often used to encapsulate additional HTML components.
There are no necessary properties for the <div> element; however, style, class, and id are popular.
The <div> element may be used to style content blocks when combined with CSS:
The <span> Element
The <span> element is an inline container that is used to mark up a section of text or a section of a page.
There are no necessary characteristics for the <span> element; however, style, class, and id are popular.
In summary, there are two types of display values: block and inline.
- A block-level element always begins on a new line and occupies the whole available width.
- An inline element does not begin on a new line and only takes up as much space as is required.
- The <div> element is a block-level element that is often used to hold other HTML components.
- The <span> element is an inline container that is used to mark up a section of text or a section of a page. When used with CSS, the <span> element may be used to design sections of text like follows:
HTML Selector (type, class & id)
- an id value should only be used for a single element (you will get unexpected behavior if you use the same id value for multiple elements)
- an id value must not contain any whitespace. The class attribute is similar to the id attribute in that it is used to identify specific elements. The main distinctions are:
- the same class value can be used across multiple elements •an element can have multiple class values, separated by whitespaces
Class selector for Exp <h1 class= “twitterUser”> Kynsofficial </h1>
for type selector. You will learn about it in CSS.
<!-- Incorrect img declaration --> <img src="kynsofficial.jpg" alt="A cat"></img> <!-- Correct img declaration --> <img src="kynsofficial.jpg" alt="A cat">
In this lesson, we will address the importance of considering semantics when structuring your HTML pages.
A semantic element expresses its meaning unambiguously to both the browser and the developer.
Non-semantic elements include <div> and <span>, which reveal nothing about their content.
<Form>, <table>, and <article> are examples of semantic components that clearly specify their content.
So far, we’ve emphasized utilizing HTML to organize our web pages and show the material in a particular way. With the HTML5 standard, several new components were added, shifting HTML from a presentation-centric to a more semantic-centric approach.
Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”> to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts of a web page:
Let us explain some of them
<hgroup> <h1>My Amazing Website</h1> <p>More information about my website</p> </hgroup>
Many web page headers include logos and huge headlines that identify the site. The <nav> elements should be used to hold your page’s navigation components.
<header> <hgroup> <h1>My Amazing Website</h1> <h2>More information about my website</h2> </hgroup> <nav> <!-- Navigational anchors elments are often wrapped in an unordered list --> <ul> <li><a href="aptlearn.com/contact">Contact Me</a></li> <li><a href="/about">About me</a></li> </ul> </nav> </header>
<footer> <h3>© aptLearn, United Kingdom, 2017</h3> </footer>
<article> <h1>Cryptocurrency: What is it?</h1> <!-- Article contents --> </article>
<section> <h2>Chapter 1</h2> <!-- Chapter contents --> </section> <section> <h2>Chapter 2</h2> <!-- Chapter contents --> </section> <section> <h2>Chapter 3</h2> <!-- Chapter contents --> </section> <section> <h2>Chapter 4</h2> <!-- Chapter contents --> </section>
<!-- time of an event --> <p>The party begins at <time datetime="19:00">seven o'clock</time>!</p> <!-- date of publication --> <h1>My Blog Entry</h1> <h2><time datetime="2015-05-07">May 7, 2015</time></h2>
There may be times when you’ll wish to display a table of data on your website. Let’s get started by converting the table below to HTML.
If you’ve never dealt with tabular data before, it’s helpful to understand that a table is made up of rows and columns.
<table> <tr></tr> </table>
<table> <tr> <td>first 1</td> <td>second 2</td> <td>third 3</td> <td>fourth 4 </td> </tr> </table>
HTML Table Tags
|<table>||Defines a table|
|<th>||Defines a header cell in a table|
|<tr>||Defines a row in a table|
|<td>||Defines a cell in a table|
|<caption>||Defines a table caption|
|<colgroup>||Specifies a group of one or more columns in a table for formatting|
|<col>||Specifies column properties for each column within a <colgroup> element|
|<thead>||Groups the header content in a table|
|<tbody>||Groups the body content in a table|
|<tfoot>||Groups the footer content in a table|
See the complete list here.
Creating Forms in HTML
HTML FORMS HTML
Looks like magic? don’t worry, it is simple, lets break it down
Notice if you write in the password field, the text is obscured since we’ve indicated that the <input>’s type attribute has a password value. With this example in mind, let’s dive in and look at the variety of information we can use with HTML forms.
Do you also notice the rectangular lines around the form, that is to give it a fine outlook and it was done with <fieldset> tag
- text: for plain text
- password: to obscure a password input field
- Search: to indicate the text field is used for searching a page/multiple pages
- url: validates input as a URL address
- tel: for inputting phone numbers
- email: validates input as an email address
<html> <head> <title>Textarea Elements</title> </head> <body> <form> <label for="multiLineInput"> <p>This is an input element that can include new lines:</p> <textarea id="multiLineInput"></textarea> </label> </form> </body> </html>
<html> <head> <title>Textarea Elements</title> </head> <body> <form> <label for="multiLineInput"> <p>This is an input element that can include new lines:</p> <textarea rows="5" cols="50" id="multiLineInput"></textarea> </label> </form> </body> </html>
- submit: submits form data to a server
- reset: resets all the data in the current form
<html> <head> <title>Reset Button</title> </head> <body> <fieldset> <form> <label for="firstName">First Name:</label> <input type="text" name="firstName" id="firstName"> <label for="lastName">Last Name:</label> <input type="text" name="lastName" id="lastName"> <!-- This button will reset the form --> <button type="reset">Reset Button</button> </form> </fieldset> </body> </html>
A clickable button is defined using the <button> tag.
Text (including tags like <i>, <b>,< strong>, <br>, <img>, and so on) may be placed within a <button> element. That is not feasible with an <input> element-created button!
Always include the type property with a <button> element to alert browsers what sort of button it is.
Let’s Style the buttons using a little bit of CSS
let’s add hover effect to the created buttons
Hope you enjoyed this, let’s move, we are almost done
Definition and Application
A checkbox is defined by the <input type=”checkbox”>.
When active, the checkbox appears as a square box that is ticked (checked).
Checkboxes are used to allow a user to pick one or more selections from a restricted set of possibilities.
For optimum accessibility standards, always include the <label> tag!
See example below
Perfect, everything you’ve learned so far is fundamental, enough to give you a great headstart in your quest to become a pro in web development.
Keep this in mind that you cannot learn it all from one place or one tutor, you need a combination of different resources to become the pro that you so admire to be. so check below for my recommendations
Learn HTML further here