HTML

https://vimeo.com/bravodesignince

HTML Basics For Beginners: Part Two Text Styling

Posted on by Daniel Arriola

If you haven’t already, check out our first article in the “HTML Basics For WordPress Beginners” series, available here.

Part Two: Styling Our Text With Tags

In our first lesson, we covered how to use the <a> tag to embed links on our webpage. Now we’ll be looking at some quick and easy ways to style our text on the fly. Let’s dive right in…

This text is about to be <strong>bold</strong>.

What will be
displayed:

This text is about to be bold.

We just made use of the <strong> tag that will make our text elements bolder and help them stand out. Again, like the <a> tag we reviewed, there is an opening tag: (<strong>) and a closing tag (</strong>). Let’s try out making something italic

This text is about to be <em>italicized</em>.

What will be
displayed:

This text is about to be italicized.

Again, we can see the effect that our <em> tags have on the text that they are surrounding (as always, being sure we use both the <em> and </em> tags to wrap around the text to which we want to apply our italic style. Now let’s underline some text…

This text is about to be <u>underlined</u>.

What will be
displayed:

This text is about to be underlined.

We are able to underline text using the <u> tag. I’m sure that by now you are seeing a pattern of how our tags, wrapped around our text elements, are creating the various styles we’ve seen so far. Just as I did in the previous article, I’ll emphasize how important it is to close our tags (i.e. <b></b>, <em></em>).

Let’s take a look at all our styles in one line:

I'm <strong>important</strong>, while I'm <em>sarcastic</em>, and I should be <u>remembered</u>.

What will be
displayed:

I’m important, while I’m sarcastic, and I should be remembered.

So what if we want some text to be bold and italic? Calm down, I’ll show you right now…

This text is<strong><em>bold and italic</em></strong>.

What will be
displayed:

This text is bold and italic.

Notice how the <em> tags are nested within the <strong> tags. Imagine that the tags represent a box, and each style is its own box. We are putting our text into our italic box (<em>) and then taking our text in the italic box and placing it in the bold box (<strong>). Now let’s have a look at the <font> tag…

This text is<font color="#0000CC">red</font>.

What will be
displayed:

This text is red.

Ok, so if you’ve had very limited exposure to HTML, you’re probably asking yourself “What exactly does #FF0000 mean?” First things first, looking at the <font> tag we see that similar to our <a> tags we have an attribute (color) with a value of #FF0000. #FF0000 is a hexadecimal color value that all browsers will recognize (and yes, the # sign is important). For more information about HTML colors, check out: http://www.w3schools.com/tags/ref_colornames.asp; it’s a great resource.

We’ll also find that we’re able to use actual color names as well, like ‘blue’, ‘red’, ‘green’ and ‘honeydew.’ Again, the full list of color names and their HEX values is available at: http://www.w3schools.com/tags/ref_colornames.asp; definitely worth clicking into and browsing for a minute. Let’s try some colors out.

All the colors of the rainbow: &#60font color="red"&#62Red&#60/font&#62, &#60font color="orange"&#62Orange&#60/font&#62, &#60font color="yellow"&#62Yellow&#60/font&#62, &#60font color="green"&#62Green&#60/font&#62, &#60font color="blue"&#62Blue&#60/font&#62, &#60font color="indigo"&#62Indigo&#60/font&#62 and &#60font color="violet"&#62Violet&#60/font&#62

What will be
displayed:

All the colors of the rainbow Red, Orange, Yellow, Green, Blue, Indigo and Violet
Don't matter if you're <font color="black">Black</font> or <font color="white">White</font>

What will be
displayed:

Don’t matter if you’re Black or White
What's the difference between <font color="greenyellow">Green Yellow</font> and <font color="yellowgreen">Yellow Green</font>?

What will be
displayed:

What’s the difference between Green Yellow and Yellow Green?

So now you have acquired a great deal of power from learning about the <font> tag, but with great power comes great responsibility. Do Not Abuse These Tags on your website. Color styles are neat, but you don’t need your professional website looking like the Rainbow Connection. So please, as a professional web designer I am asking (maybe even begging) you not to overuse these tags. Practice moderation in life and design. That being said, have fun!

https://vimeo.com/bravodesignince

HTML Basics For Beginners: Part One Embedding Links

Posted on by Daniel Arriola

If you’re reading this post, chances are you were referred to it by the Bravo Design team regarding your new WordPress CMS website. I’d just like to take a moment and emphasize, probably again, how incredible the WordPress CMS platform is. Faster load times when compared to Joomla and Drupal, and optimized more efficiently than any other CMS right out of the box. Bravo Design Inc. primarily uses WordPress for all of our website commissions because we are all about empowering our clients. So how can we empower our clients further? By showing them some quick and easy HTML basics for making their websites easier to update and keeping them looking great.

Part One: Using The <a> Tag To Embed Links

Let’s get started with the HTML tags you’ll be using the most, starting with the <a> tag. Every time you’d like to insert a link in your post, you’ll be using the <a> tag.

Let’s take a look at how a link is coded in HTML, don’t worry this’ll be painless.

<a href="http://www.google.com">Google</a>

What will be
displayed:

So we see that the only thing visible is the text that is surrounded by the <a> and </a> tags. This is a fundamental concept of HTML; making sure you always close your tags. Forgetting to do so can have some pretty hairy results.

Let’s take a look at an example where a client has forgotten to close their <a> tag.

One of my favorite websites that I use to search the internet is <a href="http://www.google.com">Google. I use it all the time, and I definitely prefer it to using <a href="http://www.bing.com">Bing</a>.

What will be
displayed:

One of my favorite websites that I use to search the internet is Google. I use it all the time, and I definitely prefer it to using Bing.

You’ll notice that the link for http://www.google.com is active for all the text until the next <a> tag is called around the word “Bing.” So we see how forgetting to close our tags can have a drastically adverse effect on our code, so if you take one lesson from this series: Remember to close your tags!

We’ve covered how to use the <a> tag, so let’s take it a step further and make a link open in a new window. Take a deep breath, it’s only an additional 15 characters.

<a href="http://www.google.com" target="_blank">Google</a>

What will be
displayed:

The output looks exactly like our first example, but when we click on the link (go ahead, click it) the link opens in a new window (or tab, depending on how you have your browser configured). The extra snippet of code, target=“_blank” tells the browser that this link should be opened in a new window. By default, the target attribute equals “_self”, meaning that the link will open in the same window that you are browsing.

A good practice is having links within your website (i.e. http://www.mysite.com/services, http://www.mysite.com/about) open in the same window, and having links that lead off of your site (i.e. http://www.google.com, http://www.bing.com) open in a new window.

By now you’re feeling pretty confident about putting links into your website, so I’ll show you just one more cool feature before we move on. What if we’d like to show some more information for our links without taking up more room on our web page? We can do this easily, with use of the “title” attribute in our <a> tag. Let’s try it out.

<a href="http://www.google.com" target="_blank" title="The internet's most used search engine">Google</a>

What will be
displayed:

Doesn’t really look like much, until we roll over the link with our cursor. After holding the cursor still over the link for a moment, we’ll see the title that we entered in our code. So this is a cool way to add some extra information to our links without taking up too much space on our web page.