Posts

Posted on

How to create screenshots in Windows

Windows Screenshot Image

Instructions for Creating Screenshots on a Windows Desktop

Objective: Learn how to take screenshots on a Windows desktop and save them for future use.

  1. Using the Print Screen (PrtScn) Key
    Step 1: Locate the “Print Screen” (PrtScn) key on your keyboard. It’s usually found at the top row, near the “F12” key.

Step 2: Press the “PrtScn” key. This will capture the entire screen.

Step 3: Open an image editing program like Microsoft Paint.

To open Paint, type “Paint” in the search bar next to the Start menu and press “Enter.”
Step 4: Paste the screenshot into Paint by pressing “Ctrl + V” on your keyboard.

Step 5: Save your screenshot.

Click on “File” in the top-left corner of Paint.
Choose “Save As” and select a file format (e.g., JPEG, PNG).
Name your file and choose a location to save it.
Step 6: Click “Save.”

  1. Capturing a Specific Window
    Step 1: Click on the window you want to capture to make it active.

Step 2: Press “Alt + PrtScn” on your keyboard. This will capture only the active window.

Step 3: Follow the same steps to paste, edit, and save your screenshot using Paint.

  1. Using the Snipping Tool
    Step 1: Open the Snipping Tool.

Type “Snipping Tool” in the search bar next to the Start menu and press “Enter.”
Step 2: In the Snipping Tool, click on “New” to start a new screenshot.

Step 3: Select the area of the screen you want to capture by clicking and dragging your mouse.

Step 4: Once you release the mouse button, the screenshot will appear in the Snipping Tool.

Step 5: Save your screenshot by clicking on the “Save Snip” icon.

Choose a file format, name your file, and select a location to save it.
Step 6: Click “Save.”

  1. Using the Windows + Shift + S Shortcut
    Step 1: Press “Windows Key + Shift + S” on your keyboard. Your screen will dim, and a small toolbar will appear at the top.

Step 2: Choose the type of snip you want (Rectangular, Freeform, Window, or Full-screen).

Step 3: Click and drag to select the area you want to capture.

Step 4: The screenshot will be copied to your clipboard.

Step 5: Open an image editing program like Microsoft Paint and press “Ctrl + V” to paste the screenshot.

Step 6: Save your screenshot by following the same steps mentioned earlier.

Tips:
Practice each method to become familiar with the different ways of capturing screenshots.
Remember to save your screenshots with clear file names to help you find them later.
Screenshots can be useful for creating tutorials, documenting errors, or sharing information visually.
This guide will help you capture screenshots on a Windows desktop efficiently.

Posted on

HTML & CSS IT SPECIALIST

Webpage Styling Using CSS

Construct and analyze styles that position content

<!--
THINGS TO KNOW: the term short hand version of a property is when                 a property will take multiple values at once and only takes up a single line.
For example: border: 1px solid black;
This declaration defines the border and uses three different values for the short version of the declaration.
1. 1px defines the thickness of the border.
2. solid defines the style of the border.
3. black defines the color of the border.

Longer hand version
border-style: solid;
border-color: black;
border-weight: 1px;

Longest hand version
border-top-style: solid;
border-top-weight: 1px;
border-top-color: black;

border-bottom-style: solid;
border-bottom-weight: 1px;
border-bottom-color: black;

border-left-style: solid;
border-left-weight: 1px;
border-left-color: black;

border-right-style: solid;
border-right-weight: 1px;
border-right-color: black;

-->

What is CSS?

CSS stands for Cascading Style Sheets.

What does CSS do?

CSS is used to style elements and make them look however you would like.

What is a CSS rule?

A CSS rule for Internal or External styling is composed of three parts.

  • Selector – selects the elements or tags to be affected by the CSS rule.
  • Declaration Block – anything placed withing the opening and closing curly brace.
  • Declarations – the rule that is used to style an element or a tag.
    • Declaration blocks have the following format: name: value;
//Note: the "p" is the location of the selector.
//{} brackets is the declaration block.
// color: blue; is the declaration.
     color - is the name of the declaration
     :(colon) is the separator between the name and the value.
     blue is the value of the declaration.
     ;(semicolon) is the stop in the declaration where it ends.

P {
     color: blue;
}

CSS Properties

CSS POSITION PROPERTY

position – tells an element how it should move based on a fix place or its current place.

Possible values include absolute and relative.

Absolute value tells the browser to move the element starting from the top left hand corner of the document body or relative to the nearest positioned ancestor.

Relative positioning – states that the element will starting moving from wherever it currently is.

Sticky positioning – an element is positioned based on the users scroll bar.

Static – an element moves according to the natural flow of the page.

P {
    position: relative;
}

NOTE: the position declaration only tells an element how to move. However, it is still necessary to provide another declaration or multiple declarations on how to move the element.

top – how much to move closer or further from the top.

bottom – move closer or further from the bottom of the page

left – move closer or further away from the left side of the page.

right – move closer or further away from the right side of the page.

P {
    position: realtive;
    top: 100px;
    bottom: 100px;
    left: 100px;
    right: 100px;
}

CSS Max-width Property

The max-width property is used to provide the maximum width that any element can be sized to. In other words, if an element has a max-width of 500 pixels, it means that the element can be any size up to and including 500 pixels, but not greater. 

div {
   max-width: 500px;
}

CSS Overflow Property

The CSS overflow property defines to an element what should happen with the element in the event that the element has more content than it can display. These are some of the options available to the overflow property:

  • scroll – the overflowed content is not visible but a scroll bar is provided to view the content within the element.
  • visible – This is the default behavior and the overflow content is not hidden. The content will spill out of the element.
  • hidden – The overflow content is not visible and it is hidden from the user with no way to view the actual hidden content.
  • auto – It decides when scrollbars are to be added or not.
div {
   overflow: scroll;
}

CSS Height & Width properties

The height property defines the specific height or vertical measurement to an element. The width property defines the horizontal measurement of an element. The value for height and width can be defined in multiple units of measurement. These are some units of measurement available.

  • px – pixels.
  • pt – points
  • % percent
  • vh – viewport height
  • em – relative to the size of the elements font.
  • Centimeters (cm): Physical units, typically used for print.
  • Millimeters (mm): Another physical unit, smaller than a centimeter.
  • Inches (in): Yet another physical unit, commonly used in print.
  • Points (pt): Commonly used in print, with 1 point being equal to 1/72 of an inch.
  • Picas (pc): A picas is equal to 12 points.
div {
    height: 300px;
    width: 300px;
}

CSS margin Property and the Text-align Property

The margin property defines how much space an element should have between itself and a specific margin. Each element will have a top, bottom, left, and right margin. You can define each margin by using the following properties:

  • margin-top – defines the top margin with some value.
  • margin-bottom – defines the distance between the element and the bottom margin.
  • margin-left – defines the distance between the element and the left margin.
  • margin-right – defines the distance between the element and the right margin.

Note: Margins can be defined using multiple units of measurement. I typically define it using pixels. You can use one of these properties or all of them at once.

Also, the short hand version of margin can be provided one value to represent all margins. 

//Short version
div {
    margin: 10px;  //All ten pixels will be provided to all margins.
}
//Not as short version
div {
    margin: 10px 15px 5px 3px; //top, right, bottom, left
}
//Very long version of the property
div {
   margin-top: 100px;
   margin-bottom: 100px;
   margin-left: 100px;
   margin-right: 100px;
}

CSS display Property

The display property is used to define to an element how it should be displayed. Those options can be:

  • inline – display the elements next to each other only using the space needed by the element.
  • block – display the element as a greedy element and one that uses more space than it needs (the entire line) and has a line break.
  • inline-block – an element that is displayed as an inline element but width and height can be applied.
P {
   display: inline;
}

Inline Elements Vs. Block Level Elements

Inline level elements are not greedy. Inline level elements only use up the space they need. Multiple inline level elements can fit in one line. However, block level elements are greedy and require the entire line whether they need it or not. A block level element also always starts on the next line.

<element> <element> <element> <element> inline level elements

<p>the                                                           </p>
block level element.

CSS Visibility Property

The visibility property is used to define when an element should be visible or hidden.

  • hidden – the element will be hidden.
  • visible – the element will be visible.
p {
   visibility: hidden;
}

Box Model Defined

The box model defines that every element is a box and each element is capable of having content, padding, margin, and a border. Many define this model as a box that contains content, followed by padding, followed a border, followed by padding.

Even though those properties are not visible on the element, it is understood that you can make those properties visible.

p {
   padding: 10px;
   margin: 10px;
   border: 1px solid black;
}

CSS Padding Property

The padding property provides space between the content and the border of the element. Padding can be defined in short hand and long hand version.

Posted on

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.
Posted on

IT Specialists Multimedia Presentation Using HTML (Displaying Images)

HTML 5 Logo

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.
Posted on

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">
Posted on

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
WordPress Site Health Report Page
WordPress Site Health Report Page

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.

Posted on

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.
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.
Create and manage sessions screen
Create and manage sessions screens
Posted on

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.

Linux Folder Structure
Typical Linux Folder Structure
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
Posted on

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>
Posted on

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>