HTML Archives • Page 2 of 2 • Tips and Snips: Creative Website Hacks for Creative People

HTML

Basic HTML (Hypertext Markup Language) Vocabulary Rules

September 4, 2019 by Diane Metcalf, M.S.I.T. No Comments

Element: an individual component of an HTML document. HTML documents are comprised of elements called “tags” and “attributes”.

Tag: Tags identify the different parts of an HTML document so a web browser will know how to display the page.

Tags are always contained inside of a set of tag brackets: <the open tag> </this tag is now closed>. A closing tag is exactly the same as the opening tag but it has a “/”.

There are two basic types of tags in HTML: Semantic tags and Structural tags

Semantic tags give meaning to the content they enclose. So, an example would be the paragraph tag, used for creating…wait for it….PARAGRAPHS in the web page! This <p> is a paragraph tag. The tag identifies the type of content it contains (a paragraph). You would create a paragraph like this:

<p> This is my paragraph. This is my paragraph. This is my paragraph. </p>

Remember: we must add a </p> to close the tag. An element that is not closed may not display properly.

Structural tags are used to organize the HTML document. For example, using a <div> </div>tag will divide the page into logical subsets of content.

HTML tags are either “block” level elements or “inline” level elements.

Block level elements have a line break after the closing tag. Block level elements can contain other tags and elements as well. Example: <ul><li></li></ul>

Inline level elements are placed next to each other (like they’re on the same line) and they do not have a line break after the closing tag.

Inline level elements cannot contain other tags.

Example:

<span>Content</span>

These would actually display side by side.

HTML is not case sensitive, but is usually written in lower case. HTML completely ignores line breaks, tabs and spaces, so if you want to use extra space to make your code more readable while you’re developing, that’s OK because the browser will just ignore the extra white space.

Attributes are additional values that configure the elements or adjust their behavior to meet user needs.

The CLASS attribute gives us a way of classifying similar elements. It can be used for semantic purposes, or for presentations.

For example: <p class=”paragraph” > would give us a way to classify all of our paragraph presentation styles, so every paragraph is formatted the same way:

.paragraph{

font-family:

font-weight:

color:

}

Questions? Contact me:

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

About the author

diane-author-300x181 Basic HTML (Hypertext Markup Language) Vocabulary Rules

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Reading time: 3 min

Design•Entrepreneurs Creatives•HTML

What’s the difference between RENTING and OWNING your site?

July 22, 2019 by Diane Metcalf, M.S.I.T. No Comments

Renting or Owning: What’s the difference?

Many people don’t even realize that there is an issue of “ownership” to be considered when they think about building a website.

As with anything else, there are pros and cons to consider.

A big consideration is that when you own your site, you possess the “source code” that was used to develop the site. Without these code-files, (or WordPress files) it would not be possible for you or another developer to edit the pages, or to troubleshoot issues in the future.

To maintain control over your site, you need to have these source files.

When you contract with Image and Aspect, you always get your source files at the end of the project. You own them. Just sayin’.

Here are some pointers to help you learn the difference between renting and owning your site.

Renting

When you use a “hosted platform” package-solution, (Do-It-Yourself) it’s considered to be “Software as a Service” (SaaS) and you are renting your website from them. It’s usually a monthly or annual subscription and it has a lower up-front investment cost. Examples: Wix and Shopify.

Owning

Owning requires a custom solution, and there’s a higher up-front investment for this dedicated development. Owning allows for customization and integration with 3rd party services, provides greater flexibility plus there’s room for expansion. There is also less of a chance that you’ll pay for services that you’re not using. Basically you own your piece of web real estate and you can do what you want with it. Let’s think “keeping it within legal parameters .”

What Renters Can Expect

Easy for Do-It-Yourselfers.
Lower cost of entry.
Various paid subscription levels (free, starter, pro, etc.)
Add-on modules, plugins or extensions purchased from a dedicated “marketplace”.
One combined service for hosting, payment processing, and website administration.
Maintained infrastructure & automatic security updates.
New features introduced on a regular basis.
Technical support in articles, tutorials, videos.
A wide selection of design templates (some are free).

The Downside of Renting

No equity! When your subscription ends, the time, money and effort you put into building the website are lost.
Incremental costs add up. With every add-on, a new cost emerges that is often higher than the original subscription fee. There will be a monthly fee for that one item for the rest of the duration of the website.
Possibly little flexibility on the required services for payment processing, hosting, data warehousing.
Limited customization for design.
If you leave the platform, all the investment in design and development is lost. You can’t take it with you when you move to another hosting provider/webserver. You have to start over.

What Owners Can Expect

Customization tailored to specific business requirements.
Scalable for future growth.
Integration with external services.
Open architecture allows for development, the code is portable and not tied to an organization.
Freedom of choice for your web hosting, payment processing, and website administration.
Important as sales volume increases and competitive processing and transaction fees become critical.
Accommodates creative innovations as opposed to waiting for the hosted platform to release updates or fixes.

The Downside of Owning

A higher cost of entry.
Must be actively maintained – if the site is not maintained through a web developer, (or someone who knows how to code or how to develop with WordPress) there will be no innovation, no new features, no security patching. Eventually, a website will become obsolete as code and formats change over time.
Time constraints – building a custom site requires a collaborative effort and considerable thought and engagement from the site owner.

As with everything, there are costs either way. Financial costs, opportunity costs, perceived value costs. The best way to decide on whether to rent or own your website is to look at your long term business goals.

When you’re business takes off and you’re renting your site, will you want or be able to take the time to stay current on how to use the platform? Will you be able to set aside time to update the content, or be on the phone with technical support or Billing? Do you feel comfortable making scheduled full-backups and storing them off-site where they’ll be secure but still easy to find when you need them? Will you feel comfortable restoring your site from a backup if you make a mistake on the site and don’t know how to fix it? Will you have the time and the inclination to research the latest Google SEO changes or the newest security threats? Will you feel comfortable making these changes? Will you be able to quickly and easily find your log-in information, your API keys, and/or your font or photo licenses if a component of your site stops working? Will you keep up with all expiration dates for your domain name, SSL certificates, sub-domains, etc, so nothing accidentally expires? If something expires would you know what to do or who to contact? Do you feel comfortable troubleshooting and fixing text formatting, images, or email issues? If you can do these things, and more importantly you’d ENJOY doing them, well that’s just swell! 🙂

But do yourself a favor and hire a professional. You’re not a web developer already! (unless you are) LOL!

If you choose the DIY route and you get in over your head, you can always call me. I promise not to say I told you so. 🙂

Other articles you might like:

–Things to consider before building your website

–6 Ways to Use Storytelling in Your Blog Posts

–Balancing Consumer Personalization with GDPR Regulation

Questions?

[email protected]

My Contact Page

About the author

diane-author-300x181 What’s the difference between RENTING and OWNING your site?

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Reading time: 5 min

HTML

Embed a TWEET THIS image + URL in your emails

Photo of Twitter TWEET THIS button to add to emails

January 3, 2019 by Diane Metcalf, M.S.I.T. 2 Comments

This tutorial will demonstrate how to create a TWEET THIS link that contains a Tweet, whatever image you want tweeted, and a URL to the web-page you want tweeted with it.

To put this in an email, you must be able to access your default email template or create a new template. I made mine by creating a new template in an automated email program that I use.

Here we go:

1. If you’re including a URL to a website in the TWEET THIS link, go to bit.ly (it’s free) to shorten the URL so Twitter will use it. Copy and paste the new short URL to a blank doc or text file so you can easily find it in a few minutes.

2. Tweet the image that you want embedded in the TWEET THIS link.

This is necessary because Twitter will store the image and you need the specific path to where it’s stored. (If the image isn’t on Twitter, then it won’t show up when using the TWEET THIS link.)

Here’s how to do that:

twittershot-300x102 Embed a TWEET THIS image + URL in your emails

Sign in to Twitter, click “Tweet”, then click “add photo or video”, browse for and Tweet the image. (You can delete the tweet later if you want. The image will still be saved.)

Now for the fun part: You need to find the URL (path) to that image, and there are TWO of them.

You’ll use the URL that starts with “pic”.

Stay in Twitter and right-click the Tweeted image you just posted. “Inspect” it with web developer tools, like the one in CHROME. (TOP RIGHT on Chrome, 3 vertical dots)

twittershot4-300x259 Embed a TWEET THIS image + URL in your emails

To find the correct URL, hit Control+F and search for “pic“. When you find it, copy the whole line pic.twitter.com/XXXXXX.

Paste it where you can find it again in a few minutes.

twittershot2-300x202 Embed a TWEET THIS image + URL in your emails

3.To create the Tweet This link in HTML:

There can’t be spaces in-between words in a URL, so replace all those spaces with %20, like this:

THIS%20IS%20WHAT%20I%20 WANT%20 TO%20 TWEET%20

Next, continuing on the same line, right after the 20, we add the link for the Twitter image (red) that we just tweeted , and the bit.ly shortened URL (blue) for our chosen website.

Remember, no spaces, and close the tag >.Don’t forget the quotes. The whole href needs to be in quotes.

(I’m condensing the code here for easier display)

pic.twitter.com/CfORwODo%20http://bit.ly/2oxajij“>

Now add some text to make a clickable link: (again condensing the code for easier display)

ODo%20http://bit.ly/2oxajij“>ADDED Clickable Text</>a

If you’d rather have a clickable image instead of text, then add the path to the image in an img tag, before the closing anchor </a> tag, like this:

ODo%20http://bit.ly/2oxajij“><img src=”path to image here”></a>

And here’s the end result in an outgoing email!

twittershot7-300x155 Embed a TWEET THIS image + URL in your emails

Here’s what clicking on it does:

twittershot5-300x93 Embed a TWEET THIS image + URL in your emails

Here’s what happens when I click TWEET:

TA -DAA!

twittershot6-287x300 Embed a TWEET THIS image + URL in your emails

Questions?

[email protected]

My Contact Page

Other articles you might like:

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

-6 Tips to Make Your Blog Post SEO Friendly

About the author

diane-author-300x181 Embed a TWEET THIS image + URL in your emails

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Reading time: 4 min

HTML

How to align an icon or glyph with text

Photo of an icon or glyph check-mark aligned with the text ""Accepting New Clients"

August 6, 2018 by Diane Metcalf, M.S.I.T. No Comments

What’s the correct way to get an icon to show up on the same line as some text? (For example: a check-mark icon next to some words)

Here’s how I did it on my home page:

I created a new div here because I had initially styled all of the icons on my site to be the same color. The new div allows me to separately style the icons inside of it .

“Icon-check” is the name of the check-mark icon I want to use. I already have the list of icons installed, so I know their names.

<div id=”mynewdiv”>
<h5>Status: Now Accepting Clients <span class=”icon-check“></span>
</h5>
</div>

SPAN is an in-line element. It’s what puts the icon on the same line as the text. If you want the icon to come before the text, instead of after, just place the span class in front of the text like this:

<div id=”mynewdiv”>
<h5><span class=”icon-check”></span> Status: Now Accepting Clients
</h5>
</div>

Remember to put a space between the span element and your text, so it looks good.

Now style it with some CSS:

#mynewdiv h5 {
padding-top: 30px;
text-align: center;
font-family: Arial, sans-serif;
color: #36e736;
}

Questions?

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-5 Tips to Stay Sane when Working from Home

About the author

diane-author-300x181 How to align an icon or glyph with text

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Reading time: 2 min

Page 2 of 2«12

Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of web design and coding.

Thanks for your interest!

~Diane Metcalf, MS

Basic HTML (Hypertext Markup Language) Vocabulary Rules

Element: an individual component of an HTML document. HTML documents are comprised of elements called “tags” and “attributes”.

Tag: Tags identify the different parts of an HTML document so a web browser will know how to display the page.

HTML tags are either “block” level elements or “inline” level elements.

About the author

What’s the difference between RENTING and OWNING your site?

Renting or Owning: What’s the difference?

Renting

Owning

What Renters Can Expect

The Downside of Renting

What Owners Can Expect

The Downside of Owning

Questions?

About the author

Embed a TWEET THIS image + URL in your emails

Questions?

About the author

How to align an icon or glyph with text

Questions?

About the author

Find Topics

Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of web design and coding.

Thanks for your interest!

Categories

Recent Posts

Older Posts

Tags

Image and Aspect on Instagram