----------------------------------- Photoshop_User Wed May 17, 2006 9:30 pm [Tutorial] General tutorial from www.dominickgatto.com ----------------------------------- Title of page This is my first homepage. This text is bold Time to go through this in detail. tells your browser that it is the start of an HTML document. tells your browser that it is the end of the HTML document. is always the first tag, and is always the last tag. (There are exceptions, but for now, assume that it is always the first tag) Anything between and is header information, and is not displayed in the browser window. Anything between the and tags is the title of your document, and is displayed in the caption at the top-left of your browser. Anything between and will be displayed in the browser. Anything between and will be displayed bold. Saving and displaying your work When you save your file, in the file name, first put the name, such as myfirsthomepage, but following this, add a .html. Why? This needs to be done for "association,"which is how the computers tell different files apart. All files on the web follow a "name.suffix" (Remember that the filetype must be a .txt ) To show it to yourself, open your web browser, and choose File -> Open (Open File in MF). Choose your file, and you should see it. It probably doesn't look too good, but hey, we all got to start somewhere, right? Next week, we begin learning some tags. I do have some homework for you, however. Click View -> Source (Or Page Source, or something like that). Study some HTML; it will help with the learning process. Until then, see you! -Shadow C. (The next tutorial won't be as wordy, and will have more code to break it up a bit. Hang with me, OK?) Pt. 2- If you are a beginner, I hope you read part 1. Anyways, you remember that, in the last lesson, a while ago, we created a simple HTML document. Today, we will make a bigger one, which will turn out a little bit better. By the end of this lesson, you will know what the following are: - Headers - Paragraph tags - Breaks - Horizontal Rule - Comments Anyways, let's get to it! Headers Headings are, well, used for headings of sections. They can be defined with the to tags. is the largest heading, and is the shortest. For example, open up notepad, create a file with the following code, and open it in the browser! A heading! A heading! A heading! A heading! A heading! A heading! See the difference? Paragraphs and line breaks When you want to create paragraphs, use the tag. Hi Mom! I'm writing a tutorial today! Now, let's say that you want to put breaks in that paragraph to save a lot of space from and marks. Add a ! Hey! Look at this gigantic toy! Horizontal Rule If you wish to separate sections, one way is to use the horizontal rule, There is no closing tag. Comments Suppose you want to leave something for source readers. Use . Try this code: Hello, my name is Roger! I rock! Quck Notes Be aware that what you enter may look completely different between Firefox and IE. Some have small monitors, some large. Whatever you do, do not try to format the text by adding spaces and empty lines into the text. HTML will truncate the spaces in the text, making spaces merely count as one. DON'T use to create line breaks!!! Use ! (Unless you want to make a list. If you do, bear with me, we will get to that later.) You can use solely and no end element, but for the new version of HTML, you should, as it will soon be required. HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. Summary There, see, short and painless, like I promised. Next time, we will get into formatting! Until then, practice! And remember to view source! Pt. 3- Hope you read the first two parts. Here, we are going to learn all about formatting. By the end of this, you will know about: - Basic Text Formatting - Computer Output Tags - Citations, Quotations, and Definition Tags - Entities - Links NOTE: If you intend to learn about XHTML, much of this will be deprecated. If you plan on HTML only, this is a great chapter for design, and even for some basic design if you are going to learn CSS. Anyways.... So you have played with the basics, and want to learn more? Here, we will make your webpage look better greatly, with formats. Basic Text Formatting: Bold I am Time to break some concrete I'm Huge! LOOK!!! The Downward Spiral I'm Tiny! CO 2 2 2 Paste this and open it in a web browser. See some differences? If you ever used Word or Appleworks (or something similar, you have probably seen these, so I won't explain what they are, but not where the tags are located. Here is a chart of many of them: Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Computer Output Tags: Maybe you need to type in some code. These tags will help: Notepad! The keyboard Hot off the typewriter A sample x = 5 Note: These tags are often used to display computer/programming code. Here is a complete list: Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text Citations, Quotations, and Definition Tags Want to put in an address, definition, quote, or citation? These are the tags to do so! Examples: Address John Doe 5555 Deer Lane Walla-Walla Wyoming Abbreviations and Acronyms: SC NIN The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. This only works for the acronym element in IE 5. This works for both the abbr and acronym element in Netscape 6.2. Backwards Text: If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): Here is some meaningless Sentence Quotes: Here comes a long quotation: Look at how long this is. I like Pie. I like Einstein. I like AOE. I like rambling. I like wasting space. Here comes a short quotation: Survival of the Fittest With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special. Here is the list: Defines an abbreviation Defines an acronym Defines an address element Defines the text direction Defines a long quotation Defines a short quotation Defines a citation Defines a definition term Entities Some characters, like open, the only people that are going to see that are you and anyone else that looks at it! We need to get a place for you to host your site! There are many places that offer many things, and many services in a "language" that you may not understand. For your first webpage, I recommend either freewebs or geocities. It is seriously all you need! Later, when you get better, you can learn about what the sites want. Next is actually creating the site. First, draw a sketch of what you want your site to look like. Then, either in notepad or, if your host offers it, an HTML editor, create your page. Some places have an editor called What You See Is What You Get (WYSIWYG). Try to avoid using these! HUGE things to remember- -People are scanners, not readers. Either get their attention on the first sentence, or you may lose them. -Less is more. Shorter is better. Keep things as short as possible. Break your information up. -Navigation. Try to create a navigation structure that is common for all the pages in your Web. Keep the use of hyperlinks inside your text paragraphs to a minimum. Don't use hyperlinks inside text paragraphs to send your visitors to every random page of your Web. That will destroy the feeling of a consistent navigation structure. If you must use hyperlinks, add them to the bottom of a paragraph or to the navigation menus of your site. -Try to keep download speed to a minimum. An average user will wait only 7 seconds before leaving. And test it over 56k speeds too. -Feedback is good. Remember that. It can save your site. Here are ten do's. Excessively large graphics. Excessively tiny graphics. Too many animations. The Blink Tag. Requiring the use of plugins. Under Construction Signs. Bad Color Choice. Grammatical and Spelling Errors. Text that is too small. Text that is too large. Having a horizontal scrollbar in 640 x 480. Sounds that play automatically. Broken images. Broken links. Too much blank space between sections. Too little blank space between sections. Using abbreviations in sentences such as u for you. Frames that cut off part of a page horizontally. The whole page is written in capital letters. No paragraph breaks on long pages. Too many advertising banners. Slow server or too lengthy page. Also, beware of copyright laws, unless you have the cash to pay for it. Also remember that many people in many browsers on different systems may see your site. Remember to test your site in at least two major browsers. Final Notes: We are on the home stretch. The finish line is in sight! I understand that some parts of my tutorials may have been hard, confusing, or you got lost. If that is so, tell me, and I will help you and update the tutorial! Also, I plan to release other tutorials, but you all can tell me what you want first. Just make sure that: - It is HTML related - It has not been in one or my tutorials - It has not already been posted and I will be glad to write one! Remember that HTML is always growing. You know much, but you do not know it all, and no one will probably know it all. Soon, I will begin the beginner's guide to CSS. This will help you all out later. To anyone that read this, thanks for reading, and I hope to see your website someday! To ROB, thanks for getting this some attention! Good luck with the web design. - Shadow Crest XHTML for Dunces- Before you read this, you should know HTML. I know, there are those of you who want to make clean code websites that are similar to XML, because HTML can get messy. Enter XHTML, with the goal of eventually replacing HTML. XHTML is very similar to HTML 4.01, but must be well-formed. I will discuss this after the why is answered. Why would XHTML be necessary? Why? Consider this code: