Rick's Blog

April 22, 2024April 22, 2024

Multimedia Presentation Using HTML (Video And Audio Tracks Explained).

Working with the Iframe, Video, Audio, Track, and its Sources.

NOTE: for the purpose of this information, a value pair attribute looks like this: name="value".  However, a Boolean value attribute looks like this: controls.  A Boolean value is a data type that represents one of two values; true or false.

<iframe></iframe> Element

An Iframe is used to embed one website within another website. In other words, the frame will be located on website A, but the contents of the frame will display the information from website B.

<iframe>
</iframe>

Iframe attributes

src – Specifies the url or location of the other website that will be embedded. src=”URL”
srcdoc – HTML content of the page to show in the frame. srcdoc=”HTML”
name – the name given to the element. name=”TEXT”
allowfullscreen – Can be activated to take advantage of full screen mode. (Boolean attribute)
allowpaymentrequest – Whether to allow payment request through the Payment API. (Boolean attribute).
height – how high should the frame be? (height=”300″)
width – the width of the frame (width=”300″).
loading – tells the browser to load the frame immediately or to delay loading the iframe until certain conditions are met.

<iframe height="300" width="600" src="https://www.someurl.com/index.html" allowfullscreen="true">
</iframe>

<video></video> Element

The video element is used to embed videos in a web page. This element can use multiple sources to attempt and use the best format based on the browser attempting to display the video.

How does it work? The video element will have multiple source elements inside of the element. The browser will attempt from the top down the first source. If the browser is unable to play that source, then the browser will skip to the next source and attempt to play that video. If that video doesn’t play it will continue doing this until it runs out of sources. Once all sources are exhausted in attempts, the message will be displayed. The text just below the sources will only be displayed if all sources fail to play.

Example:

<video width="300" height="600" controls>
       <source src="movie1.ogg" type="video/mp4">
       <source src="movie2.mp4" type="video/ogg">
      The browser was unable to play any of these video types.
</video>

Attributes for video element

width – sets the width of the video player (in pixels). width=”300″
height – sets the height of the video player (in pixels). height=”300″
autoplay – specifies if the video control should be played. Boolean attribute
loop – specifies if the video should be played in a loop. Boolean attribute.
controls – tells the browser to display the video controls such play, pause, volume and fast forward. controls=”control”
muted – specifies whether to mute the video or not. Boolean attribute
poster – provides the option of a image to be shown while the video is downloading. poster=”URL”
preload – how the page should load the video and when it should be loaded.
src – the URL of the video to play.

<audio></audio> Element

The audio element works similar to the video element in the since that it can too have multiple sources with an error message or warning. The process of playing the audio files works the same as the video file; the browser will try to play each audio file from the top down to see which one will play. If all the audio files fail to play, then the text will be used to display a message on the browser.

<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       We were unable to play your audio file.
</audio>

Audio Attributes

autoplay – a Boolean attribute that signifies that the audio will start playing as soon as possible. (Boolean Attribute)
controls – a Boolean attribute that signifies that the audio controls should be displayed. (Boolean Attribute)
loop – a Boolean attribute that signifies that the audio will start over again on its own. (Boolean Attribute)
muted – a Boolean value that defines if the audio should be muted. (Boolean Attribute)
preload – how the page should preload the audio.
src – the location of the audio file. src=”URL”

<track> Tag

This tag defines a track to be played for an audio or video element. The track tag is placed inside of the video or audio file and tells the browser which track to play with them.

Track Attributes

default – enable if preferences don’t override. (Boolean Attribute)
kind – specifies the kind of track. kind=”vtt”
label – the title of the track. label=”text”1
src – specifies where the track is located src=”URL””
srclang – the language of the track. scrclang=”lang”

<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       <track src="URL" kind="subtitles" srclang="en" label="English">
       We were unable to play your audio file.
</audio>

<source> tag

The source tag is used to define the location of multiple sources in the audio or video elements. This void tag will state where the actual file is located. The video and audio element can have as may sources are formats are available.

<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       <track src="URL" kind="subtitles" srclang="en" label="English">
       We were unable to play your audio file.
</audio>

Source Attributes

src – the location of the audio or video src=”URL”.
type – specifies the mime type. type=”MIME-type”
media -the media query that sometimes is defined in CSS.

April 18, 2024April 22, 2024

IT Specialists Multimedia Presentation Using HTML (Displaying Images)

Construct and Analyze Markup That Displays Images

<img> Image Tag

The <img> tag is used to add a image to a web page. However, technically speaking that image is not really embedded into a webpage, but rather it is linked to the page by the <img> tag.

This tag doesn’t have a closing tag and is a void tag.

<img> Required Attributes

The <img> tag by itself doesn’t actually do anything, well it kind of holds a space in the HTML page to show that an image will be there at some point. In order to have an actual image show up, you are required to provide two attributes to the <img> tag. Those attributes are as follows:

src – attribute tells the <img> tag where the image is located; almost like a pointer to where the image is. It can accept a relative URL or an absolute URL.
alt – the alt attribute provides an alternative title to the image in case the image breaks. This attribute is good for screen readers or if for some reason the browser is unable to display the actual image.

Example Code

<img src="dog.png" alt="An image of a dog">

Additional Attributes for the <img> tag

height – (pixels) – specifies the height of the image.
width – (width) – specifies the width of the image.
usemap – (id) – will specify an image as a client-side image map.
loading – () – used to specify if the image should be loaded at some other time or later in the page load.
ismap – () – specifies an image as a server-side image.
crossorigin – () – allows crossorigin access to images.

<picture></picture> Element

The picture element provides more flexibility by allowing the browser to display multiple images to best fit the device the image is being displayed on. The <picture></picture> element has the ability to have multiple sources tags to multiple images on the web. <source> tags are void tags and as such, they don’t have a closing tag.

<source> tag is used inside (sub element) the <picture></picture>element. The source attribute is used to provide instruction to the browser of when it is most appropriate to display the image and when it is located.

media attribute – defines when the image should be used by the browser.
srcset – is the location of the image.

<picture>
         <source media="(min-width: 600px)", srcset="image.png">
         <source media="(min-height: 300px)" srcset="image3.png">
         <img src="image.png">  // Just in case the browser doesn't support the   
                                //picture element.
</picture>

//Note: the <img> tag inside of the picture element is used in case a browser doesn't handle the picture element, it can default to the <img> tag.  This is what is considered backwards compatibility.

April 16, 2024April 16, 2024

Pearson /Certiport Construct and Analyze Markup That Uses Form Elements

This tutorial covers the objectives for the HTML & CSS IT Specialists exam by Pearson /Certiport. The objective is constructing and analyzing markup that uses form elements.

INTRODUCTION

HTML uses forms to collect information from web users. This information is sent over to a server for storage or processing.

<form></form> Element

The form element is a container for all the other input elements available. All the input fields that can be used inside of the form element will be listed below.

<form method="POST" action="https://www.rickrodriguezjr.com">
   //Input fields go here.
</form>

Form Element Attributes

The form element by itself is just a container that holds all other input fields. For the form element to actually function, it will need a little more information in the form of attributes. Here are some of the attributes that you will need:

//method attribute - tells the form how to send the information it collected to the server.
//action attribute -  where the data that has been collected should be sent; this should be either a relative URL or an absolute URL.

<form method="get" action="https://www.rickrodriguezjr.com/test.php?">
      <!-- all input forms go in here -->
</form>

Form Method Attribute

The form element requires the method attribute to provide additional information of how the information will get to its arrival location. Two options available to the method attribute are:

// GET - A GET request will append all the data to the URL in a name=value form each pair separated by an "&".
// POST - The POST request will send data in the background or through browser header requests.

Advantages of POST vs. GET

POST

Places the data in the HTTP Request or in the background.
Has no size limitation.
The data cannot be bookmarked for future use.

GET

Data is added to the URL in the Browsers address bar (visible to the user)
Their is a limit on how much data you can send.
Not very secure.
Can be bookmarked.
Can be used with data that doesn’t require security.

Form Action Attribute

The action attribute is used to provide additional information to the form element by providing a location where the data should be sent to. The value for the action attribute is usually in the form of a relative or absolute url.

Absolute URL – a complete address on the web such as https://www.rickrodriguezjr.com
Relative URL – a partial address usually consisting of a folder or file, such as action=”index.php”

Input Types <input> tag

The <input> tag is a void tag or a individual tag without a closing tag. This tag specifies a input field that the user can enter data. The <input> tag by itself defines a generic input text field.

<form method="post" action="https://www.rickrodriguezjr.com">
     <label for="name">Enter Name</label>
     <input type="text" name="name" id="name">
</form>

Input Type Attribute

The <input> tag can can be displayed to accept and validate many different types of data. This is accomplished by providing a type attribute. The type attribute informs the input tag what data to validate and how it should look. See below for explanation of different input type fields.

<input type=”text”> – text field.
<input type=”button”> a button.
<input type=”file”> a file to upload.
<input type=”month”> a month calendar field.
<input type=”image”> an image input field.
<input type=”date”> a mm/dd/yyyy field with the option of choosing from the calendar.
<input type=”tel”> a field that accepts telephone numbers.
<input type=”checkbox”> a checkbox field.
<input type=”radio”> creates a radio button.
<input type=”email”> creates a field that will only accept a validly formatted email.
<input type=”password”> creates a field that will allow the typing of a password not visible to prying eyes.

For a more extensive list of input fields, please go to w3schools.com.

Select Input Element <select></select>

The select element is used to create a drop down list available to users. Users can select an item inside of the select drop down list. Items are defined by the <option></option> element. Every select element can have as many items as it wants.

//name attribute is used to send over a name=value pair to the server for
//the select element.

//The option element has a value attribute to define the value being sent to the
//server for that option.

<select name="items">
        <option value="item1">Item 1</option>      
        <option value="item2">Item 2</option>
</select>

<textarea></textarea> Element

The textarea element defines a multi-line text input field. This element is usually used for entering paragraphs or multiple lines of text. Some examples would be comments or text messages.

<textarea cols="10" rows="10" name="nameoftextearea" id="idoftextarea">

</textarea>

Key Points for <textarea>

The with and height of the textarea element is defined by the cols attribute and the rows attribute. They will be placed in the opening field for the textearea.
The textarea can hold an unlimited number of characters.
The name attribute is used in the opening tag to reference the field.
The id attribute can be used to associate the text field with a label.

Label Element <label></label>

The label element defines a label for input fields. It provides a name to the input field. It is a good idea for accessibility to use labels as screen readers will read aloud the label when a field has focus.

<label for="username">Username</label>
<input type="text" name="username" id="username">

April 11, 2024April 11, 2024

Unable to Locate WordPress directory (wp-content) or write to (wp-content)

THE ERRORS

Recently I was working on moving from an old version of WordPress to a newer version. I needed to export my data from the older system and import it to my new system. In order to do that, I had to have a plugin that would allow me to do import and export data. These errors can happen when installing, or updating a plugin.

However, every time I tried to install a plugin, the WordPress site would give the following error: “Unable to locate WordPress Directory (wp-content).” Additionally, as you will see below, after fixing that issue, then I received a second issue stating, “Failed to write file to Disk.“

CONFIRMING ERROR

If you are getting any of these two errors, but you would like to confirm that this is the issue affecting your server, then follow these steps.

Go to your WordPress menu and locate Tools -> Site Health
Click on Site Health and the interface will show you once you expand the section what the error is.

WordPress Site Health Menu Option — How to access the WordPress Site Health Menu

On the Site Health Status page, you can click on the down arrow to expand the details of the error. Additional information will be provided on the specific errors that your server is having.

THE SOLUTIONS

Typically speaking, the “Unable to locate wp-content” folder issue can be a permissions or ownership issue with the server. This is as well the same issue for the “Unable to write to disk error“.

NOTE: Occasionally, these errors can be due to lack of disk space on the server, but typically it is not.

SOLUTION NUMBER 1

You should first try configure the wp-config.php file so that it has the following entry:

define('FS_METHOD', 'direct');

You can add this entry to your config file so that WordPress user is allowed to edit or install files in those folders. However, if the permissions or ownership of the folders is not correct, then this will not work.

SOLUTION NUMBER 2

More than likely this will be the issue that most people face. There is an ownership or permissions issue with the folders. By default, in Ubuntu and other Linux based system, WordPress gets installed by the “root” user. So the owner of the folder will be root, and the group owner will be root.

Typical installations of WordPress will require users to change, especially in Ubuntu, the group users to “www-data”, which is the group that apache2 belongs to. However if root is still the owner of the folder and the folder belongs to the group www-data, you will still continue to experience the same error.

You will want to change the owner of the directory and all files in it to “www-data” for both. The instructions below are assuming that you are changing permissions and ownership from the command line. If your site is hosted, you might have to do it through the hosting companies interface.

//Linux Ubuntu Command
//Change the ownership of the folder and all files in it to be owned by www-data (owner) : www-data (group)
//and change the group to www-data
// -R means that you want to do it recursively

sudo chown -R www-data:www-data folder/

DIRECTORY AND FILE PERMISSIONS

Once you have changed the ownership and group to the directory and folders, your directories and files should have the following permissions:

Directories should have a permission of 755.

Files should have a permission of 644.

//Permissions
sudo chmod -R 755 directory
sudo chmod -R 644 *.php

CONCLUSION

These work arounds did resolve my issue. I decided to write this article because I was able to find all the answers on the web, but I had to piece meal it. So I thought, why not put all the solutions to two problems on one page.

If this doesn’t resolve your issue, let me know and I can try to help. You can place a comment here or you can just email me.

April 2, 2024

Certiport / Pearson Vue Testing Instructions For English Language Learners

INTRODUCTION

If you are an educator, and you are interested in providing an industry certification exam through Pearson Vue or known as Certiport testing software for students of other languages, this is your article.

This article will provide step by step (10 steps) instructions on how to setup an Exam “From Home Session” to provide students of other languages the opportunity to test for different industry certification exams in their native language.

REQUIREMENTS

As an administrator of exams, you will be required to have a Certiport account that enables you to be an “Organization Member”. If you don’t have this membership option in your drop down, you will need to speak to your department head or department administrator to enable this functionality in your Certiport account.

STEP 1

Once you have logged into the Certiport website (Click here to go to Certiport), you will need to change your account role to be able to create the session. You can do this by clicking on the drop down menu at the center-top of the screen just below “Welcome ” and your name. Once selected, choose “Organization Member”.

Choose Drop Down for Organization Member — Select the dropdown to change to Organization Member

STEP 2

You will want to create a session by hovering on the “Exam Delivery” option on the menu next to “Reports”. Once you hover over this option, you will see a sub-option called “Exams From Home: Create Session”. Click on this option.

Hover over the Exam Delivery option on the menu. — Hover here to create an Exam From Home Session.

STEP 3

To start creating your session, click on the button in green that reads, “Create and manage exam session”. See below:

Click button to start session. — Click the button to start session.

STEP 4

Specify a session name. This session name is only visible by the creator and it is used to track your session. It will not be visible to candidates and is only for your reference. Once done entering the session name, click the “Create Session” button on the lower right corner.

Enter a session name. — Enter your session name. It will only be visible by you.

STEP 5

Once the session is created, you will be taken to the next screen which looks like this (see below).

Create Session Exam — Create session exam screen

STEP 6

For each section, fill out the appropriate information. The testing center will be your school. Unless you belong to multiple locations, you should only see your school as an option. Others might have multiple options. Choose your school as the testing center

Choose the exam language you wish to test your student in. There are many different languages to choose from and keep in mind that whatever language you choose, the emails with the links will arrive in your inbox in that language.

Finally, choose the number of candidates that will be testing during that session.

STEP 7

Select your exam from the lists of exams show below. It might be easier to search for your exam by entering a few characters from the name of your exam in the search option. Alternatively, you may also filter exams by program on the last drop down option. Select your exam once it has been located.

STEP 8

Choose your date and time by completing all three fields listed on the page. The “Time Zone” will be a drop down to choose your time zone. The “Specific Date” field can be entered as a numerical value or you can click on the calendar icon to select your dates based on the calendar. Finally, you can enter a time in time format or you can click on the “clock” icon to select a time.

Select Date and time Page — Choose the time zone, date and time.

STEP 9

Exam session created page. Once you have clicked on the “Submit” button on the choose your date and time page, you will be redirected to the “Exam Session Created” page.

On this page you will need to validate your email address as you will be receiving emails with important candidate testing information and links.

Click on the “Send confirmation email” button to receive two emails with important information.

Proctor email confirmation includes:
1. A link for you to access your exam session as a proctor.
2. Instructions on forwarding your email to your candidates.

Candidate access email includes:
1. A link for the candidate to download and launch the secure browser or Chromebook app.
2. Candidates can start as soon as the proctor starts the session.

Validate email and create confirmation emails.

STEP 10

Confirmation page. Once you have clicked on the “Send Confirmation Email” button, you will be redirected to the confirmation page. Note, your confirmation page will be in the language that you chose during the session setup. Verify that your exam type or name, date, and time are all correct.

Validate Confirmation information on this page. — Validate your session confirmation on this page.

VIEWING AND MANAGING YOUR SESSIONS IN CERTIPORT

Once you have completed your session creation, you can view and manage your sessions by going back through step 1, step 2, and step 3. It will take you to the “Create Session” screen and as well as the manage session screen.

On this screen (below) you can do the following:

Create a new session.
Start an existing session.
Cancel an existing session.
View details of an existing session.

April 1, 2024April 9, 2024

HTML & CSS (Analyzing Markup that Implements Navigation

This tutorial covers the objectives (Analyzing Markup that Implements Navigation) for the Pearson View exam for HTML & CSS. While it only covers the specific tags, and elements provided in the IT Specialist Exam Objectives, many other examples and explanation are given here.

<a></a> Anchor element

The <a></a> (anchor) element is used to create a hyperlink on the web. This element is used to allow the linking of one web page to another on the internet, and thus allow users to surf from one page to the next.

Anchor Element With href Attribute

The <a></a> anchor element has many attributes, but the most significant one is the href attribute. The href attribute defines the location the link will take you to when clicked on.

<a href="https://www.google.com" target="_blank">Click Here</a>

Anchor Element with a Absolute URL

<a href="https://www.google.com">Click Here</a>

A absolute URL is an address that contains all the parts needed to reach a specific resource from any location in the world.

Anchor Element with a Relative URL

<a href="index.html">Click Here</a>

A relative URL is an address that is always relative to the current location.

Anchor Element Bookmark

A bookmark is a placeholder for the web that will allow quick access to another resource on the web.

A bookmark always has a value in the href attribute to point to an id. An element or tag uses an id attribute to link the element and the anchor tag.

<a href="D1">Click Here</a>
<p id="D1">Click Here</a>

Anchor Element & Target Attribute

The anchor tag as well as having a href attribute, it also has the ability to use the target attribute. The target attribute provides additional information to the anchor element by providing instructions on how to open the link. See below for values for the target attribute:

_blank – open the document in a new window or tab.
_parent – open the document in the parent window.
_self – open the document in the same window it was clicked.
_top – opens the document in the entire window.

Map Element

The <map></map> element is used to provide an image map that you can click on. The map element uses the area tag to define clickable areas on the image map.

Example:

<img src="sampleimage.png" usemap="#testmap" alt="test map">

<map>
     <area shape="circle" coords="0,1,90,160" href="index.html" alt="circle image map">
     <area shape="rect" coords="0,2,79,190" href="index.html" alt="rectangle image map">
</map>

Area Element

The <area> tag defines an area inside of the map element.

Navigating Simple Folder Hierarchy

Today many of the Operating systems available such as Linux, and Windows, from the command line perspective and navigating the file system are very similar. Both of the previously mentioned OS organize their folders and files using a directory tree or a directory hierarchy.

Root Folder Definition

Root folder means that all other folders on the drive are inside the root folder. Additionally, it also means that there is no other folder higher than that folder.

At the top of the hierarchy is what we call the “root” folder; which in both OS’s are represented with a “/” for Linux and “\” for Windows.

Traversing Folders via Command Line

Navigating folders in Linux as well as Windows from the command line can be tedious. Learning how to move up a directory or down (into a folder) can be facilitated by using the appropriate commands. The commands that will be listed here are mostly for Linux, but some will work on the Windows command line as well with a slight change.

//Move up a directory
cd ..

//Move down or into a directory or folder
cd folder/

//List the current directory contents
//Linux
ls -ls 

//Windows
dir

March 21, 2024

Understanding HTML5 Semantic Tags

What are semantic tags?

Sematic elements provide meaning and organization to developers and the browsers. Semantic tag don’t typically make any changes, although there are some exceptions, to a website that are visible to the end user or the average web surfer. However, semantic tags do tell a browser or developer what certain sections of a page are about or what type of content to expect for certain sections.

Additionally, semantic elements or tags are also good for SEO or Search Engine Optimization. Semantic tags will provide information to Search engine crawlers providing additional information about the specific content, which can help with indexing.

Standard Semantic Element HTML Page Layout

<header></header>
<nav></nav>
<section></section>	<aside></aside>
<article></article>
<footer></footer>

Typical HTML 5 Semantic Web Page Layout

<header> Semantic Element

<header></header> – element defines a container for hold introductory content. Such content might include a logo or icon. You may have multiple header elements on a web page but you may not place a header element inside of a footer element.

<header>
       <h1>Heading 1</h1>
</header>
<p>
   The paragraph that goes with the h1.
</p>

<nav> Semantic Element

<nav></nav> – element is used to as a container for any content such as navigational links.

<nav>
    <a href="index.html">Home</a>
    <a href="aboutme.html">About</a>
    <a href="search.html">Search Page</a>
</nav>

<section> Semantic Element

<section></section> – element is used to define a specific section or grouping of content as long as the content has a heading.

<section>
        <h1>Heading 1</h1>
        <p>This is a paragraph that goes with the heading.
</section>

<article> Semantic Element

<article></article> – element defines some kind of stand alone story, or self-contained content.

<article>
        <header>
               <h1>Heading 1</h1>
               <p>Paragraph that goes with h1.</p>
        </header>

</article>

<aside> Semantic Element

<aside></aside> – element defines some content that is a side from the main content that it itself is a stand alone story but it is indirectly related to the main story.

<p>Some paragraph</p>
<aside>
      <h1>Heading 1</h1>
      <p>The paragraph that goes along with h1</p>
</aside>

<footer> Semantic Element

<footer></footer> – element defines a section of an HTML page that is always at the bottom of the page. This section can be composed of authorship information, sitemap link, copyright information, and possibly some contact information.

<footer>
       <p>Author: Rick Rodriguez</p>
       <p>Contact Me at: <a href="mailto:rickrod99@gmail.com">Email Me</a></p>
</footer>

<details> & <summary> Semantic Elements

<details></details> – element is one of those semantic elements that does in fact have a visual effect on a web page. It works to organize content but also add a little extra functionality visually.

The <details></details> will act as a container for a summary heading as well as a supporting paragraph. By doing so, it does two things. One, it will organize the content together as associative content. Two, it will provide additional details that a user can click on and open to read further information.

<summary></summary> tag is used inside the details tag. It provides a visible heading to the details tag.

<details>
        <summary>An article about technology</summary>
        <p>This is an article about technology.</p>
</details>

<caption> Semantic Element

<caption></caption> – defines a table caption or a title to a table.

<table>
      <caption>This table has a title</caption>
      <tr>
          <td>Hello World</td>
      </tr>
</table>

March 20, 2024

Constructing and Analyzing HTML

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is defined by elements or tags. Elements have an opening and closing tag while a tag or void or empty tag is just one tag without any content or a closing tag. These elements tell the browser how to display content on a webpage.

Defining and Understanding Basic Table Elements

<table> element defines an HTML table.  Tables consist of rows and columns.  Tables are used to organize data into a specific manner.
The table element has child elements called table rows <tr> and table data (columns) called <td>.  Additionally it also has table headers <th> which are used to define the headers of a table.

Example:
<table>
       <tr>
           <th>Header 1</th>
       </tr>
       <tr>
           <td>Cell 1</td>
       <tr>
</table>

<table></table>  - Defines an HTML table.
<th></th>        - Defines a table header.
<tr></tr>        - Defines a table row in an HTML table.
<td></td>        - Defines a table data (column).

Table attributes:
colspan="2" - Defines table cells that span more than one column.

Defining and Understanding H1 – H6

<h1> to </h6> elements are used to define headings in HTML.  The headings range from an <h1></h1> being the larges (most important) of the heading to an <h6></h6> being the smallest (least important).  

<h1></h1> - probably should be main heading in any one page and should only be used once.
<h2></h2> - sub heading.
<h3></h3> - sub heading.
<h4></h4> - sub heading.
<h5></h5> - sub heading.
<h6></h6> - sub heading (smallest or least important).

Paragraph HTML element

<p></p> - The paragraph element defines a paragraph.  A paragraph element always starts on a new line and has an empty line just after.  This element is known as a block level element.  

Block level element - an element that always starts on a new line and takes up the entire width of the page whether it needs it or not.

<p>
This is an example of a paragraph element.  Always keep in mind that a paragraph is a block level element, which is greedy.
</p>

Break Tag

<br> - is a tag (void tag) that is used to a line break.  As an empty tag or void tag this tag doesn't have any content.

<p>
This is an example of a paragraph element.  <br> Always keep in mind that a paragraph is a block level element, which is greedy.
</p>
By using the <br> tag the "Always" sentence will now start on the next line but still inside the paragraph element.

Horizontal Rule Tag

<hr> - The horizontal rule tag (void or empty tag) is used to draw a horizontal line across the screen.  While this tag can be styled to define the color, thickness, and even style of the line by default it is just a black think line.

Division Element

<div></div> - The div element is a container which defines a division or section of HTML.  Think of it as a container for HTML and then can be styled using CSS.  In order to style this element, one would need to define a class or id attribute in the opening tag and style the element using those attributes or just just the element name in the selector to style it.

Span Element

<span></span> - The span element is used to markup parts of text.  You can style a word or an entire sentence in a paragraph.  The element can be styled using CSS either by its element name, adding an id attribute, or adding a class attribute.
span {
   background-color: yellow;
}
<---snip--->
<p>
   This is an example of the <span>span</span> element.
</p>

Unordered List Element

<ul></ul>  The Unordered list element creates a list that has no particular order.  The items in the list will be defined by default by bullet points.  Each Unordered list may have as many list items as needed.  List items define the items in the unordered list.
<ul></ul> - Defines that an unordered list.
<li></li> - Defines a list item.

<ul>
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Grapes</li>
</u>

Ordered List Element

<ol></ol> The ordered list will create a list of items that have an order.  The items are defined either by a numerical value, alphabetical value, or Roman numeral value.  Ordered lists also have list items that are defined by <li></li>

<ol></ol> - Defines an ordered list.
<li></li> - Defines the list item.

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li> 
</ol>

March 20, 2024

Cascading of CSS Rules

As I previously mentioned in one of my other posts, for educational purposes, you may comingle and use inline styling, with internal styling and external styling. However, in private industry and as a best practice measure you should only use external styling. With that said, if you do use all three stylings, you should understand how conflicts between rules are resolved. In other words, if there are two or more rules that apply to the same element or tag, it is important to understand which will apply or take precedence. Before you can determine that, you must know some basic CSS rules.

Last Rule

The last rule states that if two selectors are identical, the latter of the two will take precedence. In the example listed below, the background color for the paragraph element will be red because the last rule is the one that applies.

P{
    background-color: blue;
}

P {
    background-color: red
}

Rule of Specificity

If there is a conflict between two rules where two selectors are selecting the same element or tag, the selector with the more specific selector will have precedence over the other. In the example below, the universal selector is selecting everything and styling it with a red background, however the paragraph selector is also selecting paragraphs and styling it wit a blue background. Is the paragraph element going to have a red background or a blue background? The answer is blue. Why blue? Because the “P” selector is more specific of a selector than the universal selector. Actually, the universal selector is not specific at all. It pics all the elements on a page.

* { 
    background-color: red;
}

P {
    background-color: blue;
}
---html----
<p id="test">Testing</p>

CSS Keywords

In order to override any predetermined rules in CSS, you could use the keyword !important after any property value to indicate that a rule that otherwise would not be as important is now more important because it has the keyword !important after the declaration. keep in mind that the !important keyword must be used for each declaration that you want to declare as more important.

Using the example below, normally the rule of specificity would state that the paragraphs would be blue because the selector is more specific. However, by adding the !important keyword, we are breaking the rule of specificity for that declaration.

* { 
    background-color: red !important;
}

P {
    background-color: blue;
}
---html----
<p id="test">Testing</p>

March 19, 2024

CSS Rule Sets (valid syntax) & Selectors

What is a CSS Rule

A CSS Rule is a rule which states how an element or tag will look or should look. Using a valid syntax the rule can be applied to a single element or tag or many elements or tags.

CSS Selectors are case sensitive, so they must match element names and attribute values exactly.

CSS Rules Break Down

//Selector
P {
     color: blue;      //Declaration 1
     font-size: 14px;  //Declaration 2
}
Note - The declaration block is defined by the "{}".  Declarations are always placed inside the curly braces and you can place as many declarations as you would like inside of the curly braces.

Selector - selects the element or tag that the CSS rule will style.
Declaration  - defines the style to be applied (the look).
Declaration syntax - declarations are always defined by a declaration block  :  declaration value ;

The colon is the separator between the property or declaration name and the value.
The semicolon defines the end of the declaration.

Different Types of Selectors

Selector Type	Description	Example
Universal Selector	Applies to all elements in the document	* {} targets all elements on the page
Type Selector	Matches Elements Names	h1, h2, h3 {} Targets the elements <h1>, <h2><h3> at the same time.
Class Selector	Matches an element whose class attribute value is the same one after the period.	.test{} Targets any element whos class value = target. ol.test{} Targets only order lists whose class value is test.
ID Selector	Matches an element whos id attribute value matches the one after the pound or hash symbol	#complete {} Matches any element or tag with an id that has a value of complete or id=”complete”
Child Selector	Matches any element who has a direct child of another	P > a {} Matches any anchor tag that is a direct child of a paragraph.
Descendant Selector	Matches an element or tag that is a descendent of another specified element.	P a {} Targets any anchor tag that sits inside of a paragraph element no matter how deep into the paragraph.
Adjacent Sibling Selector	Matches an element that is the next sibling of another	h4 + p {} Matches any paragraph directly after the h4 but not other paragraphs
General Sibling Selector	Matches a element that is a sibling of another but doesn’t have to directly after	h4 ~p {} Matches any paragraphs that are siblings of an h4.

Selector Types Explained