All HTML, CSS, etc is made up of TAGS. No, not the game you played as a kid. These are the end braces, brackets and other such do-hickies you've never had a use for. Depending on the coding language a tag can include: < > or ( ) or { } or [ ]. You'll mostly be using ( ) and <>. The first ( ) is mainly used in some internet forums. The second <> is used in actual HTML and websites.
The stuff that goes between those braces is the command for what you want your webpage to do. So <strong> means to make something BOLD. In word editing programs and WYSIWYG you hit Ctrl+b. If you're in Blogger or Wordpress and flip over to "HTML" instead of "Compose" then you'll see the tag in action.
Tags come in two parts: opening and closing. At the beginning of every bit of code you will see <command>stuff you want the command to effect </command> See the '/'? It tells the webpage to end the command. If you forget the closing tag, then whatever the command is will effect your entire webpage. Let's move onto some simple commands.
"Renna! I want to make something bold!"
Then you use <strong>Type in bold bits here </strong>
"Renna! I want to put something in italics!"
Then you use <em> Type in italized bits here </em>
"Renna! I want to underline something!"
<u>Underlined bits here</u>
"Renna! I want to
<strike>Strike-through bits here</strike>
Not bad, huh? Of course, these can all be found at the top of any WYSIWYG editing platform. So, what about links and pictures? Links are usually at the top of your WYSIWYG editor and a little window pops up where you put your link and yay! all good. But, what happens when your link breaks or you've accidently included a word you didn't want to or, or you need to READ the HTML?
This is the body of a link:
<a href="#">Link text here </a>
The a href tells the website where to go. The # is the actual link. So:
<a href="http://www.dairennav.blogspot.com">This blog's homepage </a>
YES, you need the quotes. YES you need the http:// No you don't necessarily need the 'www' YES you need to use an = sign. Anything missing from the tag and your link won't work. Fun fact: "a" stands for ANCHOR which is why in some WYSIWYG programs you'll see a little picture of an anchor instead of the word "link"
You want to look at an image tag? OKAY!
<img src="nameofimage.png/jpg/tiff" />
Confused? Don't worry, let's break it up. The picture tag is a self-closing tag and you can't see what it actually looks like until your preview your site. What's self-closing mean? You'll notice there's no ending tag and the / is INSIDE the >. That's self-closing.
img stands for image. src means source. You're basically telling the website "The image source is located between " "." Cool huh? Now, what's actually between our quotes? The name of your image and what format it's in: jpg, tiff, or png. Screw that up and your image won't display. You can host your images on alternate websites so your image tag might look like this:
<img src="http://www.website.com/imagename.png" /> In which you have your website name and the name of your image. Nifty huh?
"Wait, how do you control the size of the image and where it goes?"
I'm glad you asked. The image tag can get complicated:
<img src="nameofimage.png" height="430px" width="430px" vspace="5" hspace="5" border="2" />
What's all this mean? The height and width are the height and width of your image in pixels. vspace and hspace are the vertical and horizontal space between your image and whatever else is on the page. Border is the border around your images.
"Wait, how do I center it?"
Oh, now we're getting complicated. USUALLY you can add align="center" in your self-closing image tag and call it a day. Mm, not so much in MOST web applications as you'll find out when you start fiddling.
See, every website you look at is controlled by a little something called div tags which look like this: <div> stuff </div>. What's a div tag? It's a DIVision of the webpage. What's in between those div tags is a small section of your website and yes, you can have div tags inside of div tags. It's how people get a website with a colored background and a white block on top.
If you've added images in your Blogger/Wordpress account via the little image...picture at the top of your screen, then lots of options come up. If you flip over to HTML mode, you'll see a <div> tag in action. This is what's used to make your image do what you want it to do and as someone who has coded webpages by hand: divs can be a saving grace and annoying as Hell.
The question of "How do I center this image?" depends on everything else going on in your page. Yeah, I know, it's complicated.
You know what's even more fun? You can make your images clickable! If you flip on over to my "Store Tab" you'll see all my book covers lined up in neat little rows and columns with a "Buy Now" button under them with text between the two images. Cool huh? Wanna see the code?
<table>
<tr style="height: 550px;">
<td>
<center>
<a href="https://www.smashwords.com/books/view/81428"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3S-2v4j9K3Y_RirOfe6zMSd_bQSH7PJzDf1DZxzCEuTzD21pWI26Kt6X-g9lC3Xjwyw2ZDNLrGDa-tUeSj3DzkQ9K7l9bwecj6mY4z-rVll92aqn8lKU9ZzFAkBVEWGZgFW1Cc3wdcCM/s1600/CoverartTEXT.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3S-2v4j9K3Y_RirOfe6zMSd_bQSH7PJzDf1DZxzCEuTzD21pWI26Kt6X-g9lC3Xjwyw2ZDNLrGDa-tUeSj3DzkQ9K7l9bwecj6mY4z-rVll92aqn8lKU9ZzFAkBVEWGZgFW1Cc3wdcCM/s320/CoverartTEXT.jpg" /></a></a></center>
<div style="text-align: center;">
<i>Small Slice of the Undead</i> can ONLY BE BOUGHT in ebook form through Smashwords.
<a href="https://www.smashwords.com/books/view/81428"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCgKGb9SNjrk98k1GNiIGoovLGmmDpkvWMbzrvm03jH4g_ZIfSuLA9BayhpBCE56B9YNcBiGxodP74dgpoKMRNGGTF54_8WHJSBIrNDgItPzcf271SG2aPIi6QGk4O6jQ-sa_aLj3yHw/s320/buynow.jpg" /></a></div>
</td>
<td>
<center>
<a href="https://www.smashwords.com/books/view/93437"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjvrM3m2q_Q7fAWZv5tcuUJpcrbb8Iyn_UFF3uy8m_dseeZ-IqZq5PlyBwiar7IpSBBw1j5XUrew5IiZXsejDypH6XdAwUGgsvrM2KWWtUN6pFeYHChPS-QvyeUzeNcLu61XoXGDH4OE/s1600/Apocalyptic.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjvrM3m2q_Q7fAWZv5tcuUJpcrbb8Iyn_UFF3uy8m_dseeZ-IqZq5PlyBwiar7IpSBBw1j5XUrew5IiZXsejDypH6XdAwUGgsvrM2KWWtUN6pFeYHChPS-QvyeUzeNcLu61XoXGDH4OE/s320/Apocalyptic.jpg" /></a></a></center>
<div style="text-align: center;">
<i>Apocalyptic</i> can ONLY BE BOUGHT in ebook form through Smashwords.
<a href="https://www.smashwords.com/books/view/93437"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCgKGb9SNjrk98k1GNiIGoovLGmmDpkvWMbzrvm03jH4g_ZIfSuLA9BayhpBCE56B9YNcBiGxodP74dgpoKMRNGGTF54_8WHJSBIrNDgItPzcf271SG2aPIi6QGk4O6jQ-sa_aLj3yHw/s320/buynow.jpg" /></a></div>
</td>
</tr>
</table>
Confused? Let's go through it. <table> and </table> create a you guessed it, table on your webpages. Fun fact: webpages used to be made entirely from tables back in the 90s. To make a proper table you need <tr> </tr> which is your table ROW. Inside that you need <td> and </td> which is your table DATA or columns. So, I have two <td> </td> tags inside a <tr> </tr> tag which means I have two columns in one row. That's not so bad, huh?
Hey look! There's our div tag! It's controlling the text that appears between my cover image and the "Buy now" image. What's that <center> </center> tag? It's what makes the cover image centered in the middle of the column in my table. See how there's a link tag wrapped around the img tag? THAT makes the image clickable. See that <i> </i>? That is the depreciated form of <em> </em> that makes something italics. It's still in use in some WYSIWYG editing programs and on some websites.
What's the <tr style="height:550px;"> mean? That's telling the webpage to make my table ROWS 550px in height. Why did I use a table to make my store page instead of divs? It's way easier and keeps things neater, for me. It's personal preference really.
Now I know you're probably not going to use a lot of this information as most of you have a WYSIWYG editor for your blog and your website. Or you've hired someone. But, if it's the middle of the night and you've somehow gotten into HTML mode in your WYSIWYG, instead of panicking completely, you might be able to read the tags and figure out what to do.
If you really want to see some neat stuff, go to "View" and "Source" the next time you're on your favorite website. What will pop up in a new window is the coding behind that website. If you think the table was complex... ;)
Until next time: thoughts, comments, rages, rants, questions, and out-right insults can be directed to the comments section.
No comments:
Post a Comment