Hello you guys,
I am here to share the links html tutorial. Don’t you know how almost every page has a link on it? Well, I will teach you how to create a link that looks just like that. Here is what your link will look like when we finish: example link.
Don’t click it because it will take you back home to the home page of the website. Now, if you want a webpage, you might just want to create links.
before we begin
As seen in the article of how I do my html symbols which you must read, you know how I do my symbols in html. If you haven’t read that article yet, your best bet is to do so.
diving into the code
Links will take you to different pages. Lets say you had a website, and wanted to put a link back to stevend.net on it. When clicked, that link would take you to stevend.net.
We will now go threw a table with the list of links tags and there description. If you want to create your own tables, please go back to the learn html page and select one of the tables galore series.
this table is where the html and its descriptions will go
tag
description
<tdless</bolda href
this tag opens a link note that you don’t put a greater than sign after the space which comes after a
hrefequals'()’greater
in between the single quotation marks, you would enter a url like the format of http://www.stevend.net. The href equals is just the letters href which is the second part of the less a tag.
link titleless/agreater
when I say link title, you don’t have to enter two single quotations to put that in between, you just enter it after the greater and before less signs.
Now, please try it yourself using the box below. I will email you if it is correct, or help you if it isn’t.
still need help?
Well, below I will type a link and then put the code that it uses next to it. Once again, I will not bold the signs on any example because you should know that that is what I will do every time.
my website is the link
less a href equals’http://www.stevend.net’greater my website less/a greater
Now do you get it? Please go type it in the text box above.
I hope you enjoyed this tutorial. for more tutorials, please click here
Yep, that was a link! 🙂
In part 1, we disgussed how to create just a basic table with html code. In this tutorial, we will learn how to create a table with cell padding (you will find out what it is soon).
an example table from last tutorial:
dogs
cats
3
6
Yep, just a basic table. Shouldn’t we have cell padding and spacing in there?
before we begin
I will tell you this:
the spelled out symbols will be put in bold format, so you know to type them as they are and not spell them out like I did in this tutorial. for example:
less means you have to type the actuall less than sign. If I type less (not bold), you know that I don’t mean for you to type any code.
this is part 2 of the table galore series, where you learn to add spacing and padding to cells.
diving into the code
We will now dive into the code of creating a table. I will type up the code that you need first below:
This tells the html code editor to create a table with cell padding 7 and cell spacing at 7 as well. The padding puts space between the cells and the table walls. Note that the cell spacing should just be around 2 or 3 and not 7, I just over exaderated.
Now, you will type the table content code like you learned in part 1. You should remember the less trgreater and lesstdgreater tags to make up your table and the less slashtablegreater tag to end your table.
now, view this example table below:
dogs
cats
3
6
Doesn’t that look different from the exact same table above before the tutorial part? Well, it is because I used some different code:
note that you should know now that less, quote, greater, and equals are all symbols that you should write as is and not spelled out.
less table border equals “1” cell padding equals “3” cell spacing equals “7”greater
less tr greater
less td greaterdogs less slash td greater
less td greater cats less slash td greater
less slash tr greater
less tr greater
less td greater 3 less slash td greater
less td greater 6 less slash td greater
less slash tr greater
less slash table greater
what did you learn:
[contact-field label="where do the spacing, padding, and border peramitors of the table go?" type="radio" options="in the middle of the less table greater tag, in the middle of the first less tr greater tag, in the middle of the first less td greater tag, at the end of the table"/]
[/contact-form]
still don’t get it?
please contact me if you need help with this tutorial.
In this set of posts, I will walk you threw the basics of creating a table from regular all the way to headers, stiles, and footers. It will all be on this series, so please stay in tune.
This is the html series tables galore, where you will learn how to make beautiful html tables for your website. Starting from rows with data in them all the way to tables with headers, stiles, formatting, and footers. It’s all on this website’s html tables galore series.
part1– building your table with just rows and data
This is the best one to start with. It is the easiest table you will ever create, and so it’s good for starters. I will walk you threw this tut, and to make sure you understand it I will have you send me the exact code to make a table. These forms will below the tut itself.
disclaimer
1. I will use code spelling. for example “less” instead of “<".
2. This tutorial will teach you what you should be able to understand but if you don't get something, feel free to use the form at the bottom of the page under the I Don't Get It, Can You Still Help Me? heading.
starting with the opening tag
An opening tag in html tells the editor to create something in html. You use these tags to add the element to the page, not necicerrily create the full thing. There is a little more to that. These tags are usually surrounded by less and greater, and usually have quotes in them.
for the table, you will use:
less table greater
the words in bold will be written as and not less and greater when you send me the form answer.
now, you have opened your table, so we can move to the next section.
borders and why you need them
a table border defines the outside edges of your table. Whether you want them thicker or thinner is up to you. to make a border, just put:
lesstable border=”1″greater
just like the last section, you will need to put rather then greater, as you should know because less and greater are in bold.
Note: you can put higher numbers then 1 on your table border property. I think it can go up to 8 actually.
the data
in this form of table, there is 2 types of tags that will make up your table. 1 is for the row, and 1 is for the data in that row.
here is the opening and closing a row tag:
less trgreater. This makes a table row. TR=Table Row, meaning that tr is an acronim for table row.
this goes the same for Table Data, making that tag lesstdless/td greater
“Huh?” you ask. Yes, I’ve added a tage that had slash in it. When you put slash after the less in a tag like row or data or table, you are telling the editor to close the tag. So, I just opened and closed the table data tag. Between the > of the opening table data tag and the < of the closing one, you can put what you want in that set of data for your table.
here is example:
lesstdgreater this is example table data. less / td greater
Note that TABLE DATA TAGS ALWAYS HAVE TO BE INSIDE A ROW!!!!!!!!!!!! for example:
lesstrgreater
less td greater I am typing a set of table data in that rowless/td greater
note:
you can type however many rows and datas inside your table.
below, is a example table that I create, and the source code (symbols spelled out and not bold because I bet you know they are symbols that you right as they are not spelled out).
row one data one
table data 2 row 1
row 2 data 1
row 2 data 2
now, here is the code:
less table greater
less table border =”1″ greater
less tr greater
less td greater table row 1 data 1 less slash td greater
less td greater table row 1 data 2 less slash td greater
less slash td greater
less slash tr greater
less tr greater
less td greater row 2 data 1 less slash td greater
less td greater row 2 data 2 less slash td greater
less slash tr greater
less slash table greater
note how I added the less slash before repeting the name of the tag at the end of my data, always put the tds in the trs, and made the same number of tds in each tr instead of different numbers.
lets test your knoledge
Upon submitting, I should get and reply to your submission with the good or terrible news.
still don’t get something?
please visit the contact me, and tell me you need help with tables part 1, and what you need help with it, and I will get back with you.
I can’t wait to post another one of these table tutorials for you. In the mean time,
by.
In this tut, I will be showing you how to code a block quote in html. This is similar to coding a heading, but different in some ways.
Once again, I will spell the code out like I did before. I.E. less insteade of just typing <.
in order to do this, you will have to type the following.
[code language=”html”]
<blockquote>
[/code]
this is the opening tag. Now, you will type the text that goes in the block quote.
next, type [code language=”html”]
</blockquote>
[/code].
now, you have your block quote. here is an example.
Hello, I really enjoy blogging. Also, I hope you know, this is an example block quote
In this how to post, you will learn some more html code.
Note, I will spell things out so that the computer doesn’t get confused and put the actual heading instead of just the code. I.E. less instead of <.
In order to do this, you will need to type:
less h1 greater. This is the opening tag. now, you need to type what the heading title is. for example, news.
Now, you will type less slash h1 greater
That is the closing tag.
in the example below, I will type less h1 greater sample heading less slash h1 greater, but in code, and not spelled out.
example heading
Note, that you can do this with 2, 3, 4, 5, or 6 level headings, just replace both 1’s in the opening and closing tags, the h1 part, and instead, just put either h2, h3, h4, h5, or h6.
I hope this was useful. Please comment if it was.