As handy and universal as the html language is, there are times when things do not display exactly as you intended or hoped. Sometimes it can be difficult to add a line in the middle of a list, or the size of an embedded widget does not fit the spot you have for it, or perhaps a hyperlink is highlighting too many words. These situations can be frustrating and time consuming if you are not familiar with the html tags you need to address these issues. On the other hand, if you can have access to the html code, and know how to manipulate these tags, you can quickly make the changes you need.
Almost all html tags, except for a rare few, require a beginning and corresponding ending tag to work properly. Tags define a start and a stop for each action or behavior they represent. Think of these tags like a light switch. A switch is flipped to create an action (for example a <ul> tag which starts a list ), the turning on of the light, but at some point the switch will be flipped again, (</ul> which ends the list), to turn the light off. If you know which tags you are looking for, you can make changes to them to get the results you want. Listed below are some of the most common tags you can modify, a description of how they are used, and an example of how you might modify them.
<div> Div tags are used to define a section of the webpage so you can apply certain settings to that section. Most of the time these settings are applied using style sheets, which is another topic and not discussed here, but be aware that often times you will find styles applied to div tags as well. For example, if you had a section of text inside a <div> that was left aligned, you could change it to be centered instead using the example below.
In the html code and replace the left reference with center:
<div align="left">
Change the tag to center and it formats like this:
<div align="center">
<p> Paragraph tags work similarly to <div> tags but are meant to wrap around paragraphs of text and are usually styled for text. Traditional <p> tags will space out your text more naturally and make it easier to read.<div align="center">
<br /> The break tag adds a line space anywhere you set it. This tag is essentially like hitting the enter key. It is important to note that the <br /> tag is self-contained as it has the beginning and ending tag defined in the single tag. Often times, especially in blog posting sites, you cannot add a break between list items easily without the list ending, or the numbers restarting. Adding <br /> tags when using lists is extremely helpful in making the lists easier to read. Going to the html code, and adding in a <br />
after the list tag is quick and gives you control over adding spacing when and where you need it at any time.
<ul> & <li> The <ul> tag stands for an unordered list. Most lists you see on the Internet are comprised of an unordered list. The <ul> tag is present before any list and defines that the next set of data are all part of a list. While the <ul> tag identifies a list is present, the <li> tag represents the actual list items. The following is a list of tags that define the sections of a webpage:
- head
- body
- footer
"<ul>
<li>head</li>
<li>body</li>
<li>footer</li>
</ul>"
<height> & <width> Height and width tags can represent the height and width in pixels of an object, an image, a table, an identified content area on the webpage, and more. Changing the height and width comes in handy when you are using social media embedded buttons, or auto-generated widgets, created by website building software or social media sites. Many social media sites provide button creators that take your custom user information and then automatically create a button for you. The benefit to these code generators is that every user does not have to know how to write html code to create a button, however, the problem with them is that the buttons usually only have a few styles and sizes to choose from. Often the configurable parts, height and width being one of these, do not meet the exact needs of the person creating them. To change the height and width to something different than a generic small, medium, or large, modify the height and width tags within the embed code for the button. Embed code tags often starting with <iframe>, <script>, or an <a> tag. If the height and width settings are listed inside those tags, you can modify them until you get them to the sizing you want. See the example listed below under <iframe> for changing the height and width.
<iframe> As mentioned above, the <iframe> tag is used to embed objects in a webpage. The <iframe> tag is normally used to embed code sourced from an outside location into an existing webpage. The source of the content that is generated by the <iframe> remains with the outside source, but is presented up in your webpage. This content can include social media buttons, maps with marked locations, and subscribing to email lists, and more. An example of an <iframe> tag with modifiable height and width tags looks like:
"<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eyonic.blogspot.com&width=200&height=21&colorscheme=dark&layout=button_count&action=like&show_faces=false&send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowtransparency="true"></iframe>"
The same embed code with height and width changed would create a much larger button:
"<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eyonic.blogspot.com&width=200&height=21&colorscheme=dark&layout=button_count&action=like&show_faces=false&send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:32px;" allowtransparency="true"></iframe>"
<a href=""> The <a href> tag is used as <a href="destination"> where the destination is another webpage. The <a> tag is extremely common because it is used to create hyperlinks inside of documents and webpages to link to other documents and webpages. Traditionally, hyperlinks are underlined to represent the fact that they are a link to some other document or website.
There are times when you might want to modify an <a> tag if the wrong words were underlined as an example. To fix this the <a href> and </a> tags need to be around the actual words to hyperlink. A hyperlink to this blog for instance, would look like <a href="www.eyonic.com/1/?3">hyperlink to this blog</a> in the html. However, if you wanted only hyperlink to this blog to be highlighted, you would change the tag to <a href="http://www.eyonic.com/1/?3">hyperlink</a>to this blog.
A common attribute of the <a> tag is to force a new webpage to open when the hyperlink is clicked. This prevents the user from being taken away from the original website simply because they clicked a hyperlink. To use this attribute, add the language shown below to the example we have been using:
<a href="http://www.eyonic.com/1/?3" target="_blank">
There are times when you might want to modify an <a> tag if the wrong words were underlined as an example. To fix this the <a href> and </a> tags need to be around the actual words to hyperlink. A hyperlink to this blog for instance, would look like <a href="www.eyonic.com/1/?3">hyperlink to this blog</a> in the html. However, if you wanted only hyperlink to this blog to be highlighted, you would change the tag to <a href="http://www.eyonic.com/1/?3">hyperlink</a>to this blog.
A common attribute of the <a> tag is to force a new webpage to open when the hyperlink is clicked. This prevents the user from being taken away from the original website simply because they clicked a hyperlink. To use this attribute, add the language shown below to the example we have been using:
<a href="http://www.eyonic.com/1/?3" target="_blank">
<img src=""> If you want to put images on your page, you would use the <img> tag. The <img> tag defines where to pull the image from using src="location". An example of this code would look like this:
<img src="http://www.eyonic.com/Mobile/Images/CloudsMobile.png">
Following that link would give you this result:
To change where the image is pulled from, change the location listed in src. This comes in handy when an image name changes, or is moved to a different location. When including images, it is also important to define the height and width so the images do not get re-sized by other tags which can leave your images looking less than perfect.
Obviously there are many more html tags used in the webpages we visit everyday. However, these tags should get you started in the right direction if you are working with a website building software like WordPress, blog sites, or to modify an existing website. The information listed with these tags and the modification examples will give you a better idea on how these tags work so you can tweak them to achieve the results you want. Lastly, keep in mind it is often helpful to copy the code you are modifying to an external document while you make changes. If something happens and you break something, you can easily copy and paste the original code back in and start over. Pasting code back in the case of a mistake is much more efficient than starting over.
As always, get creative and good luck!
<img src="http://www.eyonic.com/Mobile/Images/CloudsMobile.png">
Following that link would give you this result:
To change where the image is pulled from, change the location listed in src. This comes in handy when an image name changes, or is moved to a different location. When including images, it is also important to define the height and width so the images do not get re-sized by other tags which can leave your images looking less than perfect.
Obviously there are many more html tags used in the webpages we visit everyday. However, these tags should get you started in the right direction if you are working with a website building software like WordPress, blog sites, or to modify an existing website. The information listed with these tags and the modification examples will give you a better idea on how these tags work so you can tweak them to achieve the results you want. Lastly, keep in mind it is often helpful to copy the code you are modifying to an external document while you make changes. If something happens and you break something, you can easily copy and paste the original code back in and start over. Pasting code back in the case of a mistake is much more efficient than starting over.
As always, get creative and good luck!
Enjoy this post? Subscribe to our Blog
No comments:
Post a Comment