----------------------------------- PHP God Sun May 25, 2003 3:55 pm [Tutorial] HTML Basics - how to code without using a WYSIWYG ----------------------------------- I'm sure many of you use frontpage, or Dreamweaver. I admit I have used these programs before and it was a long time till I saw their flaws. Not only in how they wrote code, but also in how fast they outdate. They also add codes that some browsers can't read, FP is the worst for this. After this tut you will never need expensive programs again. Well heres some news for you, I don't think notepad will ever change. The great thing about notepad is you can make any kind of file with it, when you save it, just select the dropdown menu, select ALL FILES, and type in the filename with the extensions. At the bottom of this tutorial I have added some helpful links. I will not cover Tables in this tutorial, but I have covered it in a previous one. HTML is an abbreviation for HyperText Markup Language. It is the most commonly used way to build a website. Even a PHP file converts to HTML, you are viewing this forum that is PHP enabled. But if you view the source, you will notice it is still in HTML. THis is because PHP generates HTML for your browser because not many have PHP installed. The difference between these two is one is STATIC, and the other is DYNAMIC. DYNAMIC is programming like ASP or PHP, whereas HTML is static. HTML uses what are called TAGS. Every tag (with the exception of BR) has an opening tag and a closing tag. an opening tag has two braces around the tag name. The closing tag has the two braces, and then the tag name with a backslash in front of it. The best way to show how this works is to use the B (bold) tag. This is boldThis is not The text inside the the bold tag is bold, but the rest is not. Basically we are telling the browser somethings properties by putting it between tags. Below is a list of tags and attributes which may be added to them. ______________________________________ FONT - specifies text properties - attributes - FACE - specifies the fonts name i.e VERDANA, HEVELTICA SIZE - specifies the size, can be a number or a pt. i.e 3 or 10pt COLOR - Specifies the color, must be a hex value. ______________________________________ A - used for links. Anything between the a tags becomes a hyperlink. EX. A link to my page the HREF is used to refrence a URL. URL's can be used to make an e-mail link too. EX. E-Mail me _______________________________________ B - used to bold text, any text inside it will be bolded _______________________________________ U - used to underline text, any text inside the tags will have an underline. _______________________________________ MARQUEE - used to make a scrolling marquee - attributes - WIDTH - specifies the marquee's width, you can use a percent or pixels. SCROLLDELAY - an average value is 90, it specifies the scrolling speed BEHAVIOR - can be either SCROLL, or ALTERNATE _______________________________________ CENTER - centers anything inside the tags. _______________________________________ these are basic formatting tags. You can place these in your file. They are however useless until the browser sees we are making an HTML page. so we use the HTML tag. Preceding it is the HEAD tags. After are the BODY tags (where you content goes). The line that says: is a comment tag. It is ignored by the browser, you can use it to write helpful notes on your page. If you want to change the title in the tilte bar of the browser, use the TITLE tag inside of the HEAD tags. Look at me, I'm a title. Another thing you need to know is that you cannot put more than two spaces between words. The browser will ignore additional spaces after the first. You need to use a Non-Breaking Space. you do this by typing NBSP; you can type multiple ones to make more spaces. If you want to add a break, or go down to the next line, then type BR in a tag. note that this tag does not need to be closed. you can align things using the P tag. Its attributes are, CLASS (used for CSS), and ALIGN. ALIGN can equal RIGHT, LEFT, or CENTER. Any text inside the tags will be accordingly oriented. HTML is a very large language, thus it would take forever to write a complete guide. HTML is always changing too, this could be outdated in a year. For news on Web programming languages, you can go to the World Wide Web Consortium ( http://www.w3c.org ) A useful free editor is CRIMSON EDITOR. it color codes your tags, and when you press enter it doesn't start at the beggining of the line like Notepad. it drops to where you started the last one making it easier to code cleanly. It also supports many other languages. Download Crimson Editor @ http://download.com.com/3000-2352-10140098.html?tag=lst-0-1 If you have any questions feel free to ask. ----------------------------------- JSBN Sun May 25, 2003 4:00 pm ----------------------------------- Good. Note: You have already received an Award so i can only give you +10 Thx alot, JSBN ----------------------------------- the_short1 Sun Jun 06, 2004 7:56 pm ----------------------------------- THANKS A LOT!!\ i didn't even know how to make a fricking link like 1 month ago.... ive slowly been learning by looking at other sites source codes...... yea ive been making my new website in Geocities PAGEBUILDER... but i will be importing to shaw later on and have to modify it a bit... but for my forum u can edit board HTML all u want.. .. . .this is VERY helpful!!!