The Best Introduction to HTML, CSS and JavaScript (Part 3)

CSS and JavaScript: Congratulations, you are reading this; here’s a continuation of our coding journey on Introduction to HTML, CSS, and JavaScript. In this tutorial, we will take another step further on our coding journey.

    • Course Title: HTML, CSS, AND JAVASCRIPT
    • Course week two lecture 4

I’ll go further with our learning curve using this thread, and we have a unique topic Today. Hi, welcome to our 4th class on HTML, CSS, and JavaScript. 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.

In my previous classes, especially the first class, I listed all the things you need to move with this learning curve. Please do check my pinned thread if you’re a newcomer. Let’s get into Today’s business properly. Bring out your systems and open your IDE tool (VsCode)

Last class, we learned HTML under the following heads –

  • HTML Headings –
  • HTML Lists
  1. *ordered list
  2. *unordered list
  • HTML List

element attributes which are TYPE & START. Today we’ll be dealing with INLINE vs. BLOCK-LEVEL elements.

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

Block-level elements

Most of the elements we have dealt with so far are block-level elements, including:
  • •Headings (<h1>-<h6>)
  • •Ordered and Unordered Lists (<ol>, <ul>)
  • •List Items (<li>)
  • •Paragraphs (<p>)

Inline elements

As the name suggests, inline elements do not take up the full width of a web page and are generally in line with text content. Examples of inline elements include:

  • •Anchors (<a>)
  • •Images (<img>)
  • •Bolding Text (<strong>)
  • •Emphasizing Text (<em>)
The coding example below helps illustrate the differences between block-level and inline HTML elements: See the example below.

Divs

The <div>, a block-level element, allows you to section into separate, logical divisions. Don’t forget to close your parentheses. I made the screenshot this way because I want you to figure out closing those tags yourself as an exercise.
CSS and JavaScript
As you can see, the <div> element does not render as anything special on the web page and is mainly used to separate content into distinct groups for organization or styling purposes. Generally, you will nest other HTML elements within <div> elements to provide the proper structure to your page.

Let’s talk about ID + Class and Attributes in HTML, CSS, and JAVASCRIPT.

The id attribute provides you with the ability to give any element a unique identifier. This identifier can later be used to apply specific styles with CSS or capture input with some Javascript code.
Exp <h1 id= “twitterUser”> Kynsofficial </h1> Some notes about id usage: •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

Image

 

Images

Use the <img> tag to embed an image into your web page with an src attribute containing a file path to the image you want to be included. Use the alt attribute to provide alternative text with a description of the image if it doesn’t load or read by a screen reader for people with disabilities. Unlike most of the elements we have encountered thus far, the img element does not have a closing tag: Take a look at this correct and incorrect image explanation.
Image
GOOD EXAMPLE of HTML CSS and JAVASCRIPT
Image
CSS and JavaScript
Course: HTML, CSS & JavaScript
Course week 2 lecture 5

In this lesson, we will address the importance of considering semantics when structuring your HTML pages. So far, we have focused on using HTML to structure our web pages and provide a specific presentation of the content. Many elements were introduced with the HTML5 standard that moved HTML from a presentation-centric markup to a more semantic-centric approach.
What exactly do we mean by this? Referring back to the definition, the goal of semantic HTML is to indicate the meaning of each piece of your web page’s content.
HTML4 <i> and <b> elements vs. the semantic <em> and <strong> tags.
In the HTML4 world, the <i> element was used to italicize text, and the <b> element was used to bold text
Image
Structural semantic elements With HTML5, several structural elements were introduced to separate content into more semantically appropriate containers.

hgroup

<hgroup> elements can be used to group heading elements that are semantically part of the same heading.
Image
Note that sometimes my screenshot does not always close the tags if the word is long, close it yourself.

header

Many web page <header> elements contain logos and large headings identifying the site. nav <nav> elements should be used to house navigation components of your page
Image

article

<article> elements should be used for pieces of content that are unique to an individual page. A blog entry, a news/scholarly article, and a forum post are all good examples.
<article> elements should have a heading to indicate what the article’s content is about.
Image
section
<section> elements represent thematic groupings of content on your web page. For example, if your web page housed the contents of a book, <section> elements could be used for the book’s chapters.
<section> elements can also be used to break up content in an <article>
Image

time

Use the <time> element to provide a machine-readable timestamp for parts of your content that indicate a specific time or date.
The <time> element has a DateTime attribute that takes as input the date/time in a variety of formats.
Image

Exercise 1

Paste this code in your VS code, study, and relate it with this thread and everything you’ve been taught so far.
Image
Image

HTML TABLE

There’re instances where you’ll want to present a table of data on your web page. Let’s dive straight in and convert the table below into HTML.
If you haven’t worked with tabular data before, it will be useful to know that a table consists of rows & columns.
Exp
So how do we apply these concepts to HTML? First, we need to declare an HTML table by using the <table> tag. 1st pic To add a row to our table, use the <tr> tag 2nd pics
Image
Image
To add individual pieces of data (the cells) corresponding to the columns, use the <td> tag.
To indicate that a cell is part of the header use the <th> tag instead of <td>
Image
Exercise 2 Read exercise 1 instructions and follow them. Do the same and paste this code in your VSCode and post a screenshot in the comment
Image

HTML FORMS HTML

forms are how we receive user input on our web pages. If you’ve ever visited a blog and left a comment or used your credit card online to purchase something, you have used HTML forms to interact with the web page you were visiting.
Image
To start accepting user input, let’s add an <input> element that accepts text: You should now notice that there is an empty text box that you can click (or focus on) that accepts text input. Also, take note that <input> elements do not have a closing tag.
Image
Image
Image
But having just a text box doesn’t indicate what the input is used for. Let’s add a <label> element to better indicate the <input>’s meaning:
Image
Image
Image
The <label> element has a *for attribute that associates the <label> with a specific <input> element. The *for attribute’s value should match that of the <input> element’s id value. <label> elements are useful as they allow your <input> elements to be identified by screen readers. We can now add an additional <input> element that will accept the user’s password, and a <label> to indicate the input’s meaning.
Image
Image
Image
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.

Text inputs

We’ve seen how the <input> element can accept text values. There are several different type values that can be used, including:
•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
Image
Image
For URL
Image
Image

textarea

If you want your user to be able to include newlines (by pressing return) in their text input, you can use a <textarea> element: Notice how <textarea> elements have a closing tag. You can also specify the size of <textarea> by using the rows and cols attributes.
Image
Image
Image
If you want users to type long notes and have additional lines, then here’s how
Image
Image
Image
Image

Buttons

A <button> element should be used whenever you want to create a clickable button to perform some action on the page. <button> elements are simple to define and have three different type values:
•submit: submits form data to a server
•reset: resets all the data in the current form
•button: no default behavior. This type of button will be more useful when we begin our discussion of Javascript.
Image
Image
Image
RESET button
Image

Image

select

You can use <select> (with nested <option>) elements to create a drop-down selection of items that a user can choose from: Including the selected attribute in an <option> element will show that option by default.

Image

Additionally, if you want to group options into different categories, you can nest <option> elements in an <optgroup> element:

Image

Radio buttons

+ checkboxes with input The <input> element has other type values that accept inputs other than text. For instance, radio buttons can be used to create a list of options where you only want one option selected:

Image

Check Box

If you want to create a list where the user can select multiple options, you can use checkboxes. A checkbox can be specified by using an <input> element with a type value checkbox:
Image
Like radio <input> elements, checkboxes must have the same value for the name attribute to be considered part of the same group. The main difference is that multiple checkboxes within the same group can be selected.

6 Comments

  1. Olayode Usman Ajibola says:

    Nice write up, I didn’t get the part of adding images, will be glad if you can respond to this, thanks

  2. Abdulwaheed Fatuga says:

    Hi,

    How can I send in all what have been able to do from lesson 1 till date?

    Thank you.

  3. I dropped a tweet tagging you, since you are more available there on the go.
    Kindly make some of the screenshots of the lessons visible better. They are narrow and hence i could not know how your text area was larger and better aligned than mine. I did it though just that it wasn’t aligned.
    Thank you

      1. Damilola Gbadamosi says:

        Thank you very much

Leave a Reply

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