How to autoplay a video using HTML 5 in Chrome

Chrome is a great browser but sometimes it has a lot of security features that end up conflicting with your code and what you’re trying to do.  For example, they added a feature that won’t play a video on a website if the sound is enabled.  It will block it because it doesn’t want the user hearing an unwanted video.  Using the HTML5 video tag, if I were to add a video to a page that has the controls visible, autoplays, and loops the code would look like this:

<video controls autoplay loop>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

The issue with this is Chrome would not play the video because it hasn’t been muted.  The sound would start to play and Chrome doesn’t want that.  So the solution is pretty simple, you have to mute the video and then, only then, will Chrome play it normally when the page loads.  To mute the video add a “muted” attribute like so:

<video controls autoplay loop muted>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

Now Chrome’s security feature will be fulfilled and the video should play as normal and if the user wants to hear the video, they’ll have to unmute it.  If you’d like to learn more, be sure to check out our web design/development courses.  Have a great day!

How to fade in content using HTML, CSS, and JavaScript

Sometimes we want our content to make a cool entrance on a webpage.  Luckily, using CSS and HTML, we can do just that by easily fading something onto the page.  First thing we’ll need to do is create a HTML page like so:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Select Tag</title
</head>
<body>
<div id=”fademe”>Fade me in!</div>
</body>
</html>

This is your typical HTML page that has a div with an id of fademe.  We will be fading the div in later with the text “Fade me in!”.  The first thing we’ll need to do is create the CSS inside the head tag that will make the text invisible so we can start from not seeing it to seeing it.  Add the following inside the head tag:

<style>
#fademe{
opacity:0;
transition:2s;
}
</style>

This selects the div using the #fademe selector and makes it invisible with the opacity set to 0.  The transition property says if any of the properties that have already been set are changed, it will animate that change for 2 seconds if it can. Well, we need to change the opacity from 0 to 1 and we’ll need to use JavaScript to do that.  We will use window.load to run the code after the page has loaded.  Right before the closing body tag in the HTML, we will put this:

<script>
window.onload = function(){
document.getElementById(“fademe”).style.opacity = 1;
}
</script>

This says when the window loads it will run a function.  A function is a group of code that runs when we tell it to.  When the function runs it will select the element (or tag) with the ID of fademe (the div) and then change the opacity style to 1.  When all is said and done the completed project will look like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Select Tag</title>
<style>
#fademe{
opacity:0;
transition:2s;
}
</style>
</head>
<body>
<div id=”fademe”>Fade me in!</div>
<script>
window.onload = function(){
document.getElementById(“fademe”).style.opacity = 1;
}
</script>
</body>
</html>

When this is run, you will see the div, with the text in it, fade onto the page in 2 seconds.  If you want to learn more be sure to check out our web design/development courses.  Have an amazing day!

 

Create unselectable instructions in a HTML select drop down menu

Today we are talking about how to create unselectable instructions in a HTML select drop down menu.  In HTML, when you create a drop down menu using the <select> tag, there will be times when you’ll want to give the user instructions inside the menu itself but not allow them to select the instruction option.  For example let’s say we want to give the user the ability to select what shipping they want for an item they are ordering.  Our select tag would look something like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Select Tag</title>
</head>
<body>
<select>
<option>USPS</option>
<option>UPS</option>
<option>FedEx</option>
</select>
</body>
</html>

This works fine but when the dropdown menu shows up in the browser it looks like this:

dropdown HTML

There are no instructions so the user may not know what the purpose of these options is.  I don’t want to put the instructions as text on the page since I don’t like how that looks, so I will add an option tag that will have the instructions in it with a couple of attributes that will accomplish what I want.  The select tag options would end up looking like this:

<select>
<option disabled selected hidden>Choose Shipping</option>
<option>USPS</option>
<option>UPS</option>
<option>FedEx</option>
</select>

You can see that I added another option tag with the disabled, selected, and hidden attributes which transform the dropdown to look like this:

dropdown HTML select tag

The instructions “Choose Shipping” is there but the attributes change how it functions.  The disabled attribute makes it so the user can’t select it, selected makes the browser select it by default when the page loads, and hidden makes it so it doesn’t show up with the other options in the drop-down menu.  This helps for a cleaner design in the HTML forms and allows everything that is related to the drop down select menu to be bundled together.  If you want to learn more, check out our web design/development courses.  Have an amazing day!

 

 

What does the DOCTYPE do in HTML?

What is the DOCTYPE?  When coding in HTML you will see this really weird looking line up there at the top.  It usually looks like this:

<!DOCTYPE html>

Simply enough, this line tells the browser what version of HTML is being used to create the website.  Back in the day, with HTML4, DOCTYPES were really long lines of text that were almost impossible to remember because they looked like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

and

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

and

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

Depending on if you wanted the language to be handled in a more strict (not allowing mistakes in the code) way or more lenient, you would use either the first or second DOCTYPE.  If you used frames (that’s going WAY back), you would use the frameset DOCTYPE.  Either way, I think the whole web is very happy that in HTML5 they decided to make it a lot smaller and easier to remember.  If you want to learn more about web design/development be sure to check out our trainings.  Have an amazing day!

How To Run External JavaScript After the HTML Has Loaded

When using JavaScript, sometimes you will run into errors because the external code being used is placed above the HTML it is calling/manipulating.  For this example, we have a HTML file that looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Run JavaScript After HTML Loads</title>
<script src=”external.js”></script>
</head>
<body>
<div id=”changeMe”></div>
</body>
</html>

In that code we can see that it’s calling an external JavaScript file called external.js that has this code in it:

document.getElementById(“changeMe”).innerHTML = “I’ve been changed!”;

This is going out to the div with the id of changeMe and is going to switch out the text to say “I’ve been changed!” after the script runs.  The HTML runs line by line so be it goes out to the JavaScript file and tries to run it BEFORE it has loaded any of the HTML in the body tag.  Because of that, if we were to run this in Chrome we would get this error:

javascript error

This is telling us there’s an issue on the only line in the external.js file:

document.getElementById(“changeMe”).innerHTML = “I’ve been changed!”;

The external script is trying to select the div with the id of “changeMe” and change it’s innerHTML before it has been loaded in the browser so it errors out.  To fix that we use a magical attribute called “async” and we place it into our script tag like so:

<script src=”external.js” async></script>

The async attribute makes it so the script can be run separate (asynchronously) to the page loading and will wait for the HTML to load before it tries to run any of the scripts.  Before, it ran the external JavaScript first, then continued loading the page creating the error.  Now it makes it so the JavaScript can be run separate from the HTML and doesn’t have to load first.  This will eliminate the error we are getting.  After adding the async attribute we will get what we were expecting in the browser:

If you want to learn more, check out our Web Development courses.  Have an amazing day!

How To Center Content in a Div Horizontally and Vertically

This little snippet of code will show you how to center content in a div horizontally and vertically using HTML and CSS.  This, in the past, used to be semi-difficult.  Now, using CSS flexbox display property, it’s actually quite easy.  First, we’ll create a simple HTML skeleton with a div that has a class called “centerMe” inside the body tag:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Center Content Horizontally and Vertically</title>
</head>

<body>
<div class=”centerMe”>
I will be centered in the div horizontally and vertically
</div>
</body>
</html>

Now that we have the starting HTML, we can add the CSS inside a style tag in the head tag.  The CSS will target the div on the page with the “centerMe” class.  Here it is:

<style>
.centerMe{
height:300px; /*this makes the div 300px tall*/
width:500px; /*this makes the div 500px wide*/
border:solid 1px black; /*this makes the div visible by giving it a solid border that is 1px thick and black*/
display:flex; /*this applies the flexbox display property to the div so we can use the properties below*/
align-items: center; /*this vertically aligns everything to the center*/
justify-content: center; /*this horizontally aligns everything to the center*/
}
</style>

The CSS is using the display property called flexbox which allows you to easily accomplish our task.  Once we add the CSS, the content should look like this inside the div:

center content in div horizontally and vertically

Here is the code in its entirety:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Center Content Horizontally and Vertically</title>
<style>
.centerMe{
height:300px; /*this makes the div 300px tall*/
width:500px; /*this makes the div 500px wide*/
border:solid 1px black; /*this makes the div visible by giving it a solid border that is 1px thick and black*/
display:flex; /*this applies the flexbox display property to the div so we can use the properties below*/
align-items: center; /*this vertically aligns everything to the center*/
justify-content: center; /*this horizontally aligns everything to the center*/
}
</style>
</head>
<body>
<div class=”centerMe”>
I am centered on the page horizontally and vertically
</div>
</body>
</html>

If you’d like to learn more check and sign up for one of our web design courses.  Have a great one!

HTML5 Basics – How to create a basic HTML5 document

Video of this tutorial:

Hello everyone!  In this post today I’ll be showing how to create a basic HTML file using my favorite text editor Brackets.  Brackets is great because it’s free, cross-platform, and has some really nice features when using HTML5.  Here is what their home page looks like:

 

brackets-text-editor
Click here to download Brackets

The first thing you’ll want to do is download and install Brackets or whatever editor you want to use.  If you really wanted to, you could use good ol’ Notepad in Windows and that would work fine.  Once it’s finished installing, open it up and ignore any text/code that may already be there.  We want to start from scratch so click on File and choose New or Ctrl-N on a PC or Command-N on a Mac:

file-new-brackets-html

Now you should have a new/blank file to work with.  Next thing you’ll want to do is save it as an HTML file.  To do that click on File again and choose Save as…

file-saveas-brackets-html

The next part is REALLY important.  Make sure to save this file with a .html extension.  That means when you name the file, be sure that it has a .html at the end.  For example, if I were to name this iLoveHtml I would need to make sure to call it iLoveHtml.html like so:

save-html-extension

Now that it’s been saved as an HTML file, we can create the code that will make it function as a webpage.  HTML uses tags or elements to insert things onto the page.  Tags always have an opening less than symbol <,  then some word, then a closing greater than symbol >.  For example, there is an <img> tag that will insert an image on the page and there is also an <a> tag that will place a link.  Some tags need to be closed as well.  Those are always created by using a less than symbol < followed by a slash /.  Here is an example of the opening and closing title tag with text in between:

<title> I am a title </title>

Using all of these different tags or elements, you can start to create your own webpage.  Let’s start by creating the structure every webpage has to have.  Type the following into the file opened in Brackets (don’t worry about what this means yet, we will cover that below):

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My First HTML Page</title>
</head>
<body>
Hello, I am a webpage!
</body>
</html>

Once you’ve typed this out be sure to save it by clicking on File Save or by pressing ctrl-s on a PC or command-s on a Mac.  If you don’t save the file, you won’t see the changes you’ve made.  Once it’s been saved congratulations you’ve created your first basic webpage.  To test your HTML and see what you’ve created, click on the lightning bolt button in the upper right-hand corner.  **NOTE** Brackets is dependent on Chrome to run these files so you will need to download it to be able to test your code.  Here is what the button looks like:

test-html-brackets

Once it launched in Chrome, your page should look something like this:

first-html-webpage

If there are any issues and it’s not working correctly, be sure to go back and make sure you’ve spelled everything correctly and that there is no red in your code inside of Brackets.  Red means there’s an error in the code.  Once you’ve got it working we can explain what each part is doing.  We will start from the top and go down from there:

  • <!DOCTYPE html> – this tells the browser what version of HTML is being used.  This is the HTML5 Doctype
  • <html> </html> – these are the opening and closing html tags.  Everything on the page should be inside of these tags
  • <head> </head> – these are the opening and closing head tags.  These tags usually contain other elements that don’t display anything to the page like the title, meta, script, and style tags.
  • <title> </title> – these are the opening and closing title tags.  They always go inside of the head tag and they define the text that shows up on the tab area in the browser.  They are also very important for search engine optimization.  You’ll want to make sure all of your important keywords go inside this tag.
  • <meta charset=”utf-8″> – this meta tag is required if you want to have your HTML5 code validate.  This is defining what character set is used by the page.  Utf-8 is a character set that contains most of the characters for all the different languages on the planet.
  • <body> </body> – these are the opening and closing body tags.  All the content like images, links, text, etc. go inside of the body tags

Well, there you have it!  Hopefully, that gave you a better idea on how to start coding using HTML.  If you want to learn more consider taking one of the HTML/CSS courses taught by SkillForge.  You can get more information it by clicking here or on the image below:

skillforge-html5-training-course
Want to learn more? Sign up for a training!

Have an amazing day!