- Course week two lecture 4
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
- *ordered list
- *unordered 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
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>)
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.
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.
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.
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
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.
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
Structural semantic elements With HTML5, several structural elements were introduced to separate content into more semantically appropriate containers.
<hgroup> elements can be used to group heading elements that are semantically part of the same heading.
Note that sometimes my screenshot does not always close the tags if the word is long, close it yourself.
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
<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.
<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>
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.
Paste this code in your VS code, study, and relate it with this thread and everything you’ve been taught so far.
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.
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
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>
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
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.
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.
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:
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.
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.
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
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.
If you want users to type long notes and have additional lines, then here’s how
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
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.
Additionally, if you want to group options into different categories, you can nest <option> elements in an <optgroup> element:
+ 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:
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:
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.