[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]
About Me Refresher
In this next iteration of my HTML5 series, we are going to start out with a simple about me page. So let’s start off where we left shall we? Last time we spoke I left you all with this snippet:
<!DOCTYPE html>
<html>
<head>
<title>About Jyrone Parker</title>
</head>
<body>
<h1>Hi I Am Jyrone Parker</h1>
<img src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>
<p>
I am CEO and lead engineer at J Computer Solutions LLC, a consultancy that places software and DevOps engineers at companies in need.
</p>
</body>
</html>
In a nutshell this is the basis for a web page but it’s not terribly exciting and even more so it’s ugly as all hell. So let’s change that. I’m a functionality guy before a design guy so I’m going to write all the components I want for my about page.
Adding Audio
Who doesn’t want a little background music? With HTML you can add links to local or remote audio files. I grabbed some cool beat from freesounds.org http://freesound.org/data/previews/353/353234_3162775-lq.mp3
<audio loop autoplay> <source src="http://freesound.org/data/previews/353/353234_3162775-lq.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>Substitute the src link with whatever audio source you want and place the entire snippet above the <img> tag. If you load your page in the browser you will hear your song autoplay.
Add Phone Number
I want people to know how to get a hold of me and I want search engines to know me. We can achieve two in one. HTML5 introduced a new tel protocol, which enables devices such as Android and iOS to open their call applications and make the phone calls. Search engines also use the Schema.org to create rich results (if you don’t know what I mean Google a celebrity and see all the extra flashy stuff comes up) via microdata. Copy and modify the following snippet to fit your needs
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Contact Me</h1>
Phone: <span itemprop="telephone"><a href="tel:+18594024863">
859-402-4863</a></span>
</div>
In the feature I plan on doing a comprehensive tutorial on microdata and schema.org tags, but for now if you want to read up on it click the link above. Here is a brief breakdown of the following tags and attributes:
- <div> – tag defines a division or a section in an HTML document.
- itemscope – By adding
itemscope, you are specifying that the HTML contained in the<div>...</div>block is about a particular item (Schema.org). - itemtype – You can specify the type of item using the
itemtypeattribute immediately after theitemscope(Schema.org) - itemprop – To label properties of an item, use the
itempropattribute (Schema.org). - <h1> – tag defines a heading
- <span> – tag is used to group inline-elements in a document
- <a> – tag is used to define a link
- href – attribute specifies the link’s destination:
*HINT: You can do the same thing with email just change the href link to mailto:<email>
Conclusion
That’s pretty much all of the content I want my about me page so this is where I am going to stop. HTML5 is easy to learn it’s 99.9999% learning the tags and attributes, which come with time and practice (and following my tutorials). The next tutorial will start the beginning of the meat of front end web development CSS (Cascading Style Sheets) which is the language that allows us to style our webpages (currently ours is boring). If you haven’t subscribe to my blog via email, and please share this with anyone who you believe would benefit! Be sure to see the updated code here!
[…] you have been following along then you should have a basic about me page built. Here is […]