vujsa 0 Report post Posted February 22, 2005 HTML 101 - Web Design For Beginners Absolute Basic HTML Writing This will be part one of a multi-part HTML tutorial. Please don't post advanced HTML replies to this article. This tutorial is specifically written for beginning HTML writers. Requirements: Software: Web Browser, HTML Editor. Skills: Ability to press the keys on the keyboard. Any web browser will work as long as it can open files saved on your hard drive. -> Netscape and Internet Explorer are both free and easy to use. Any HTML editor will work as long as it is an HTML editor and not a web page design program. -> The difference between the two is who actually writes the code. --> If the user writes the HTML code the software used is and HTML editor. --> If the user arranges the look of a page and the program writes the corresponding HTML code, the software used is a web page design program. You're here to learn HTML so you'll need an HTML editor. An HTML editor can be any text editor that will allow you to save your files with the .html extension. For now, Notepad will do just fine as your editor. I assume that Mac still has a Notepad program. <--------------------------------------------------------------------------------------------------->Now a little background about HTML. Hyper Text Markup Language is the language developed to display information on the internet in a format other than plain black text on a white background. HTML requires the use of tags. A tag is a trigger that tells the browser what to do with the information between the opening tag and the closing tag. For Example: <CENTER>Center this text!</CENTER>Here the "center" tag is used to place text evenly between the left and right sides of the window like below: This Text is Centered!With very very few exceptions, ALL open tags must be closed! Again, ALL open tags must be closed! For the "center" tag, the opening tag is <CENTER> and the closing tag is </CENTER>. the slash must be included in all closing tags and ommited in all opening tags. A Few More Samples: Align to the right is: <RIGHT> Text </RIGHT>Align to the left is: <LEFT> Text </LEFT>Bold text is: <B> Text </B>The HTML tag is: <HTML> Code </HTML>Just remember, ALL open tags must be closed! <--------------------------------------------------------------------------------------------------->The first tag that you have to use in all webpages is the HTML tag. Failing to insert this tag before your code will result in everything being shown to the user. This is because if you don't tell the browser the the page is html, the browser automatically assumes that the page is just text."<HTML>" Tells the browser that everything that comes next is coded in HTML until the </HTML> tag is reached. Step 1: Open and close HTML. <HTML></HTML>The next thing you'll need is a head. The HTML head holds very important information about your web page but for now it will only hold its place.The head tag is <HEAD> and tells the browser that everything that follows belongs in the head area of the web page until the </HEAD> tag is reached. Step 2: Open and close head. <HTML> <HEAD> </HEAD></HTML>Inside your head tag you can place the title tag. Step 3: Add a title <HTML> <HEAD> <TITLE> Here is my first web page! </TITLE> </HEAD></HTML>After you head tag comes the body tag. The body tag contains all of the information that is displayed in the browser window. Step 4: Add a body <HTML> <HEAD> <TITLE> Here is my first web page! </TITLE> </HEAD> <BODY> </BODY></HTML>Now add your content between <BODY> and</BODY> Step 5: Add your content <HTML> <HEAD> <TITLE> Here is my first web page! </TITLE> </HEAD> <BODY> Place your content here! </BODY></HTML>Cut and paste this code into your HTML editor and save as firsthtml.html and open with your browser. You'll see that you have created your first web page although it's not very pretty and it just says "Place your content here!". Help for saving and viewing your HTML documents is located at the end of this article. This is the absolute minimum code needed to create a properly working web page. Next play around with you formating a little like so: <HTML> <HEAD> <TITLE> Here is my first web page! </TITLE> </HEAD> <BODY> <CENTER>My First Page.<BR> </CENTER>More text here.<BR> </BODY></HTML>The <BR> tag means line break and is one of a very few tags that does not reqiure a closing tag. Next we'll add a link to another page or site. A link is actually called an anchor and thus the tag is <A> to open and </A> to close. The tag actually will require some formating of its own as seen below. <A HREF="http://forums.xisto.com/ Text</A> "A" is the tag type. "HREF" is an argument that tells the browser that this anchor is Hypertext REFerencing whatever is after the equal sign in quotes. The "Sample Text" is the text that can be clicked on to take you to "http://forums.xisto.com/;. ***See note at bottom about the definition of "HREF". Here it is in your you code: <HTML> <HEAD> <TITLE> Here is my first web page! </TITLE> </HEAD> <BODY> <CENTER>My First Page.<BR> </CENTER>More text here.<BR><A HREF="http://forums.xisto.com/ Text</A><BR><A HREF="https://www.paypal.com/de/webapps/mpp/home here yo go to PayPal!</A><BR> </BODY></HTML>Okay, that should do for now. This tutorial is just a basic reference for beginners and will be referenced in future tutorials. I just wanted to break the ice and provide some HTML comfort for more advanced topics. File Saving And Viewing Instructions Here! To save an HTML file in Notepad: Click File and then Save As Type your name and make sure that the .txt is gone and that the file name ends with .html --> like:myfile.html Then where it askes for file tye change from Text Documents (*.txt) to All Files Click Save. Remember which folder you saved the file in, probably in My Documents. To view an HTML page with Netscape: Click File and then Open File. Browse to the location of your html file and choose open. To view an HTML page with Intenet Explorer: Click File and then Open and then Browse. Browse to the location of your html file and choose open. *** HREF Note: I corrected this definition after microscopic^earthling reminded me of what the "H" stood for in HREF. My thanks to microscopic^earthling. Happy Coding vujsa Share this post Link to post Share on other sites
miCRoSCoPiC^eaRthLinG 0 Report post Posted February 22, 2005 I think H stand for Hyperlink. SO <href> would be HyperLink Reference.. Correct me if I'm wrong. Another good tutorial. Share this post Link to post Share on other sites
JustinSquare 0 Report post Posted February 22, 2005 Wow. I mean, no idiot can say they don't understand how html works after this. Well,amybe they still don't understand, but they will know how to do it. Kinda short, but that's all you need to know for everyelse after that. And i agree with MS^E. Most programs call it a Hyperlink, so it would make sence to be HyperLink Reference. Then again, i ain't no HTML master. Share this post Link to post Share on other sites
SingleDaddyof2 0 Report post Posted February 23, 2005 Very nice vujsa! One suggestion...after introducing the title tag, I would mention the purpose of the title tag. (i.e. The text between the opening and closing title tags is displayed by your browser at the very top in the window title bar--not in the web page. The title text is also displayed when the webpage is bookmarked and the Bookmarks (or Favorites) list is shown.) Also there can be only one title per webpage. Share this post Link to post Share on other sites
vujsa 0 Report post Posted February 23, 2005 Hey, thanks for the feedback. I agree that the title portion is a little lacking but I didn't want to get too side tracked. I considered leaving the title out alltogether as it is not a requirement to make the browser parse the code. But then I wouldn't have had a reason to have a head. While a missing head will go unnoticed by a browser, its important to learn how and where to write the head code. The title tag will be explained further in the second article. In fact the second article will discuss each of the tags from the first article extensively.Thanks,vujsa Share this post Link to post Share on other sites
ree 0 Report post Posted April 3, 2005 Hi and Thank You for this easy to read and "Understand" Tutorial.... i needed something like this....broken down step by step... it was nice of you to take your time. here is a Link to a place where i and Practice my HTML.. http://www.w3schools.com/html/tryit.asp?fie=tryhtml_basic i really like it. i just included this so others' who might be wondering where to Practice their HTML, can find a HTML Editor Practice Pad.... with luv' Thank You again ~ree~ Share this post Link to post Share on other sites
vujsa 0 Report post Posted April 4, 2005 Hey, I'm glad that you found this tutorial helpful and informative. If you liked that tutorial, there are a couple of related tutorials available as well. Html 102 Web Design For Beginners Good Comments Make Good HTMLHopefully these tutorials will give you a better understanding of how HTML works and help you dream up ideas of what you can do with it. That was a good link that you posted above for:W3Schools TryIt Editor v1.4 I wish they had one of those 10 years ago! An HTML practice window, that's great. I mean, wow, I started by editing a blank shell document via telnet (emacs), saving, switching to browser to reload and view, and noting changes that were needed. Next thing you know, someone will invent an HTML editor that lets you visually place content in the page. AKA WYSIWYG Okay, sarcasim aside, let us know if you have any questions. happy coding, vujsa Share this post Link to post Share on other sites
eXc1te 0 Report post Posted October 14, 2007 great beginner tutorial i would also suggest that people go out and buy a book i find that one of the best ways to learn the language. Share this post Link to post Share on other sites
