(by 10 people)
Introduction to HTML
This lesson is a perfect foundation in HTML. Ideal for future Web Designers or learning to place some code on your MySpace page! Normally I would divide up these lessons over several small pages but for the sake of simplicity I will keep the lesson on this single Squidoo page.
If you have any questions please don't hesitate to ask and most importantly have a little fun with out the formal "In school" feel.
HTML 101 - Code examples in html, php and more!
Go ahead, you can do it...
For even more code check out my site: HTML Inc.
An Idea
- It all begins with an Idea! Before you can start coding, you need to plan out your strategy. Start visiting other like minded sites. Don't look at the arrangement and leave. Look at the content, simplicity and use to the viewer. What can you offer or change to that site to make it better?
- Now I am not saying go and steal someone else's page. What I am saying is Research, Research and Research! If you do find a page that you really like ( let's keep it real here, it happens) and decide to use someone else's hard work then make sure you change it enough to not be a mirror web site! Hold on, hold on! I know what you are thinking ...I do not condone any type of piracy! DON'T DO IT! I do however, accept that a large percentage of the internet content is "RECYCLED" in large part with thanks to Google. If you see something you like, learn to do it yourself instead of copying code ( hopefully, that is why you are here) from another page and publishing it.
A list
Notepad or a notebook? Keep good notes! I can't stress that enough! Let's say you build yourself a nice logo. While using you favorite image editor, you use a neat font installed on your computer called Skesis. Some time goes by and you change your name from whatever to whatever and son. You will need to know what font you used to make that logo. The same goes for web design. Not only for record keeping but you need an outline for those ideas! I use an outline as a guideline for web design. Mine looks something like this:
- Idea - What am I thinking?
- Demographics -Who am I trying to reach?
- Pages - Try and plan out how many pages I want and name them
- etc...
Let's get started
A web page is made up of sections of HTML Code that contain your message. You can build the best web page without spending one penny.
You can use most any text editor such as:
Windows notepad ( PC | Start > Programs > Accessories > NotePad
)
Mac simple text ( MAC | Apple menu > Hard drive > Applications > Simple Text
)
or my WYSIWYG Live Page Builder tool.
You can use most any text editor such as:
Windows notepad ( PC | Start > Programs > Accessories > NotePad
)Mac simple text ( MAC | Apple menu > Hard drive > Applications > Simple Text
)or my WYSIWYG Live Page Builder tool.
The Layout
A basic page looks like this:
- 1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 2.<html>
- 3.<head>
- 4.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- 5.<title>Untitled Document</title>
- 6.</head>
- 7.<body>
- 8.</body>
- 9.</html>
________________________________________________________ - 1. Doctype: Specifies the HTML version used in the document. Browsers may display your page funny without it
- 2. Html Start Tag: The creation point of the page
- 3. Head Tag Start: While this is not visible it gives information about the content
- 4. Meta Information: Gives information about the document and not the content
- 5. Title: Shows the title of the page at the top of browsers
- 6. Head Tag End: Closes the information about the content
- 7. Body Tag Start: This is where your page content begins
- 8. Body Tag End: This is where your page content ends
- 9. Html End Tag: This is the last line of the whole page and finishes your page
Lets Build A Page
Copy and paste the following code into my my WYSIWYG Live Page Builder tool. (or editor of your choice)
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>Your Title Here </title>
- </head>
- <body>
Your Info Here - </body>
- </html>
________________________________________________________ - Now change " Your Title Here " to a new title you like
- Now change " Your Info Here " to whatever you like. Try using some code from my HTML Code Page and see what you can come up with. Here are a few examples:
- I will use the text " Hello World "
- Bold - Hello World - <strong>Hello World</strong>
- Italicize - Hello World - <em>Hello World</em>
- Linked to a page - Hello World - <a href="http://www.htmlinc.com">Hello World</a>
- Change the Color - Hello World - <font color="#FF0000">Hello World</font>
- Resize The Font - Hello World - <font size="+1">Hello World</font>
- Now save your work as anyname.html then open with the browser or your choice and voilà! You have designed a web page!
Congratulations!
You have just completed my to the point lesson in Web 101. Please use the HTML Code page to broaden your knowledge and the Page Builder to put that knowledge to work!
- Now, lets discover:
- Advanced HTML
- CSS
- php
Advanced HTML...
Don't let that scare you off! You will see that building a high quality, rich content web page is not all that Advanced after all. This is the second series of to the point lessons in web design.
Design a complete page!
Before we begin, there are a few guidelines for building a web page. While I could go on here for pages upon pages...I won't! to the point remember - :)
- Resolution - Most people use 1024x768 but nearly 50% of the people on the internet are still using 800x600. So build your page to look good in both 800x600 AND 1024x768
- Font Size - Just because you can't see one inch in front of you does not mean the world has bad eyes, on that same note...Not everyone has 20/20 vision either! It is best to not specify a font size, let the browser handle it. If you are targeting senior citizens then a 16 point font should be fine.
- Font - Don't use fonts installed on your computer, chances are other people won't have it and your page will not look right. There are several industry accepted fonts including: Arial, Georgia, Tahoma, Times New Roman, Verdana.
- This is a personal opinion...Don't make a black page with white text. I visit so many sites like that and when I navigate away and land on an average white page my eyeballs feel like popping out. Soft and subtle is the best policy...Unless your marketing crayons - :)
- Never ever, ever make your page require the user to scroll right or left. Up and down is ok ( with in reason, make next pages if you have a lot of content) but NEVER left or right. If you are building your page and your own computer is in 1024x768 then go ahead and reduce your computer resolution to 800x600 and check it out. If the bottom scroll bar appears but only slightly, fine. If your content is off the screen then go back to the drawing board! I will show you later how to make your page grow or shrink to the users screen as well as make it tuck away neatly down the middle using tables or CSS.
- Most importantly - Clean, simple and neat! Look at Google. What a boring looking page but oh how popular Google is! Normally people are in a rush no matter what. Get your point across first, then have some fun!
Lets make a Nice page!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>My First Design</title>
- </head>
- <body>
- <!-- Start your work here -->
- <!-- your work ends here -->
- </body>
- </html>
Now get into the habit of saving your work religiously!
- Create a folder on your desktop and call it root (or anything you want)
- Inside of root create another folder and call it images
- Now download these IMAGES to the folder named images
- Go to the folder and double click the self extracting file named images.exe, this will extract the pictures to your images folder
- Now select all (ctrl+a) the code from the page builder > Copy (ctrl+c) and paste (ctrl+v) into notepad ( PC | Start > Programs > Accessories > NotePad )
- Now save as index.html inside of the folder root
Now it gets fun!
First lets get the body started.
Change: <body> to:
<BODY background="images/bg_grad.jpg" text="black" link="#660000" vlink="#660000" alink="red">
<BODY background="images/bg_grad.jpg" text="black" link="#660000" vlink="#660000" alink="red">
- This sets a gradient background image (the file is in your "images" folder), uses black text, makes the links on the page a dark red, makes the visited links the same color and the active link red.
- Now paste this code under the <--Start your work here --> tag:
- <TABLE BORDER="0" CELLPADDING="10" CELLSPACING="0" WIDTH="640" BGCOLOR="#ffffff" align="center">
- <TD align="left" bgcolor="#6a0909" valign="middle" width="70%">
- <strong><font color="#DF8D13" size="7">My First page </font></strong>
- </td>
- <td align="center" valign="top" bgcolor="white" width="30%"><img src="images/palmtree.gif"></TD>
- </TR>
- </TABLE>
- Explanation -
- <TABLE> Starts a table. When you place the following inside of that tag it tells the table how to take form: BORDER: Sets width of border around table cells. CELLPADING: Sets amount of space between a cell's border and its contents. CELLSPACING: Sets amount of space between table cells. WIDTH: Sets width of table — in pixels or as a percentage of document width. BGCOLOR: Sets Background color inside the table. and ALIGN: Sets alignment (left, center, or right)
- <TR> Sets off each row in a table
- <TD> Sets off each cell in a row, you can have several cells.
- <strong>Tells the <font> to go bold, then after your info close the </font> tag followed by closing the </strong> tag and close the cell with </TD>
- <TD> Starts a new cell in tha same row
- <img src=> Inserts a picture the close the cell with </TD>
- Now close the row with </TR> and finaly the table with </TABLE>
- Now paste this code right under the </TABLE> tag at the end of the code you just made:
- <TABLE BORDER="0" CELLPADDING="10" CELLSPACING="0" WIDTH="640" align="center">
- <TR>
- <TD align="left" valign="middle" width="70%">
- <b><center><font color="#6a0909" size="+2"><i>You can make a catchy tag line here...</i></font></center></b>
- </TD></TR>
- </TABLE>
Explanation -
Just like aboove, we make another table to go under the first one. Notice the use of percentages for cell width.
Now it gets fun! (continued)
Now paste this code right under the </TABLE> at the end of the code you just pasted:
- <TABLE BORDER="0" CELLPADDING="20" CELLSPACING="0" WIDTH="640" BGCOLOR="#ffffff" align="center">
- <tr><td width="70%" bgcolor="#ffffff" valign="top">
- <h3>A Catchy Heading</h3>
- <FONT color="#404040" face="Tahoma, Arial, Helvetica, san-serif" size="-1">
- </font><p><font color="#404040" size="-1" face="Tahoma, Arial, Helvetica, san-serif"><a href="#"><img src="images/brush.gif" border="0" width="78" height="150" align="right"></a>
- <a href="#"><b>Make this Link Somewhere</b></a> * "HTML Inc" was created with the beginning and advanced Web Designer in mind. You will find all sorts of cool html codes here. I am also working on a Myspace html codes page for all you livejournal html users. You will see it really is easy to learn html. I will have an html tutorial for most any html project. Html help is finally here without the endless pages of useless techno knowledge to filter out. Best of all, there are no pop ups or forced logins and subscriptions.</font></p>
- <FONT color="#404040" face="Tahoma, Arial, Helvetica, san-serif" size="-1"><p><a href="#"><img src="images/swipe.gif" border="0" width="62" height="150" align="left"></a>
- <br>
- <p><a href="#"><img src="images/splat.gif" border="0" width="150" height="123" align="right"></a>
- <a href="#"><b>Make this Link Somewhere</b></a> * "HTML Inc" was created with the beginning and advanced Web Designer in mind. You will find all sorts of cool html codes here. I am also working on a Myspace html codes page for all you livejournal html users. You will see it really is easy to learn html. I will have an html tutorial for most any html project. Html help is finally here without the endless pages of useless techno knowledge to filter out. Best of all, there are no pop ups or forced logins and subscriptions.</p>
- </font></td>
- <td width="30%" bgcolor="#6a0909" valign="top" align=left>
- <b><FONT color="white" size=3>* </font></b><a href="#"><b><FONT color="#DF8D13" size=3>Your Link</font></b></a><br><br>
- </td>
- </tr></table>
DON'T FORGET TO SAVE YOUR WORK!
Explanation -
It may look overwhelming because of all the text but it really is simple if you go over it slowly. - Most of the code just repeats itself. The <H3> tag is for a heading. The <img src="YOUR LINK TO OR LOCAL PIC LOCATION HERE"> is a an easy way to put your pictures up. The <a href=" YOUR LINK HERE"> is simply a tag for your links. <BR> tags will make the text move to the next line below.
- All of the tags above are on the HTML Code Page. Spend plenty of time on the LIve Page Builder using HTML Code. It may not make perfect sense now, however after you build and disassemble the practice page it will come to you. I would go into step by step instructions for each line of text but that takes away from the "To The Point" lessons. If I get enough requests I will make simplified versions of the lessons I go over. :)
Now Lets Work on some CSS!
I would love to hear from you!
|
steffi
Thanks for this lens its really helps out a lot and cant wait to get started. Posted March 28, 2008 |
|
gwkell
Thanks for the great lens. I'd like more information about Web Design with html. Posted March 05, 2008 |
|
Guinness
Excellent help. Thank you, and God bless you! Added to favorites so I can come back again and again. Posted January 22, 2008 |
|
aande
Nice tips for getting a page started. Somewhere in here you should tell people can if you're even a little obsessive, you're going to get sucked in! html is just the opening to a very long rabbit hole . . . Posted September 22, 2007 |
|
titanium_knights
Like the tips in your design a complete page sections - html still confuses me, but I am learning! Posted June 14, 2007 |
Like what you read?
Then express how much (or how little) by clicking on one of the stars at the top of this page.
1 Star - this lens should have remained a thought2 Stars - the thought was there but-
3 Stars - there is hope yet
4 Stars - best thing since sweet tea
5 Stars - you like me, you really really, like me!
If you really like it, Lensroll Me =), Fav Click Me =) or tell someone else by using this Squidoo eMail page.
Thank you for your support!
Other lenses by Forgiven:
Fetching RSS feed... please stand byModest Needs
This and every lens made by Forgiven (Scott Smith) proudly donates all proceeds to Modest Needs.Founded in 2002, Modest Needs is an award-winning charity that works to stop the cycle of poverty before it starts for low-income workers struggling to afford emergency expenses like those we've all encountered before: the unexpected auto repair, the unanticipated trip to the doctor, the unusually large winter heating bill.
At Modest Needs, we believe that EVERY person has the power to make a difference. So, by choice, the work we do at Modest Needs is funded exclusively by the 'small change' donations of people just like you.
The average gift of these extraordinary people? Between $5 and $100 at a time.
Since 2002, our donors' 'small change' has stopped the cycle of poverty for 3651 individuals and families who stood to lose everything over a short-term financial emergency. But with your support, we could reach even more of the hard-working people who need our help the most.
Discover your power to change a life. Please join your friends and neighbors in supporting Modest Needs.
Because Modest Needs has earned the highest possible charity rating from the Better Business Bureau's Wise Giving Alliance, you can give with confidence, knowing that we won't abuse your kindness.
But more importantly, simply by working together in this very modest way, we can make sure that no hard-working person is ever forced to choose between taking a child to the doctor and putting food on the table.
