HTML First Tutorial |
||||||||||||||||||||||||||||||||||||||||
What an HTML document is… Extra Info: The webpage you see on the internet come in a variety of flavors, however most of the pages are still just plain ol’ HTML pages. The other kinds are PHP, ASP, XML, Perl, and so forth. Sometimes you can tell what type of web page it is by looking at the files extension in the browser window. For example - a file with extension “php” is what kind of file? That's right it is a PHP file. Back to HTML stuff… HTML Editors Getting Your Files on a Server When you have an account with a website hosting company then you will be issued a URL and password so that you can "upload" your files to their server. Tags Explained To denote the various elements in an HTML document, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. HTML tags are listed below. Some elements may include an attribute, which is additional information that is included inside the start tag. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Look carefully at the syntax (rules for creating) for the tags to see which have optional attributes. There are two basic types of elements - container elements and empty elements. A container element has a starting tag and a ending tag. An example of this element is the paragraph element: <P>...<\P>. There can be a combination of text and other tags within this element. Empty element is the other type of HTML element - it contains nothing in the middle because there is no middle. For example: <BR> is an empty element. This element simply tells the browser to continue displaying the HTML page on the next line. NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>. There are a few exceptions noted in Escape Sequences below. Also, be careful not to overlap the elements - you can include an element within another element by nesting. For example: <HEAD><TITLE></HEAD></TITLE> is wrong, but <HEAD><TITLE></TITLE></HEAD> is correct because title is nested within the head element. Not all tags are supported by all World Wide Web browsers. If a browser does not support a tag, it will simply ignore it. Any text placed between a pair of unknown tags will still be displayed, however. The Minimal HTML Document Required elements are shown in this sample bare-bones document: The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags). Because you should include these tags in each file, you might want to create a template file with them. (Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't! So make sure to include them.)
Is there anything odd or unexpected about the webpage you created? A Teaching Tool This is an excellent way to see how HTML is used and to learn tips and constructs. Of course, the HTML might not be technically correct. Once you become familiar with HTML and check the many online and hard-copy references on the subject, you will learn to distinguish between "good" and "bad" HTML. Remember that you can save a source file with the HTML codes and use it as a template for one of your Web pages or modify the format to suit your purposes. Markup Tags
Task: Using Notepad - Use the file you created above and
add additional HTML tags to it. Try each of the tags. Experiment and see
why certain things happen they way they do. Try various attributes to go
along with your tags. For example...make sure you place bgcolor
attribute in the body of the webage. Try all the different heading statements
below.
HTML HEAD TITLE For example, you might include a shortened title of a book along with the chapter contents: NCSA Mosaic Guide (Windows): Installation. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Installation. Generally you should keep your titles to 64 characters or fewer. BODY Headings The syntax of the heading element is: Do not skip levels of headings in your document. For example, don't start with a level-one heading (<H1>) and then next use a level-three (<H3>) heading. Paragraphs In the bare-bones example shown in the Minimal HTML Document section, the first paragraph is coded as <P>Welcome to the world of HTML. In the source file there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag. Important: You must indicate paragraphs with <P> elements. A browser ignores any indentations or blank lines in the source text. Without <P> elements, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained below.) For example, the following would produce identical output as the first bare-bones HTML example: <H1>Level-one heading</H1> To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps identify the start of a new section, and separate paragraphs with blank lines (in addition to the <P> tags). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file). Note: The </P> closing tag may be omitted. This is because browsers understand that when they encounter a <P> tag, it means that the previous paragraph has ended. However, since HTML now allows certain attributes to be assigned to the <P> tag, it's generally a good idea to include it. Using the <P> and </P> as a paragraph container means that you can center a paragraph by including the ALIGN=alignment attribute in your source file. <P ALIGN="CENTER"> This is a centered paragraph. It is also possible to align a paragraph to the right instead, by including the ALIGN="RIGHT" attribute. ALIGN="LEFT" is the default alignment; if no ALIGN attribute is included, the paragraph will be left-aligned. Forced Line Breaks National Center for Supercomputing Applications<BR> The output is: National Center for Supercomputing Applications Horizontal Rules You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation. For example: <HR SIZE=4 WIDTH="50%"> displays as: Special CharactersIn some cases, you may want to add special characters to your page...special characters are characters which can not be put into a webpage without using a special code - for example: How do you put additional spaces within you text? Remember th browser will squeeze out all extra spaces until there is only one left...which means if you just put blank spaces in your HTML coded line - the result will always be only one extra space. So how do you get multiple extra blank spaces. Like this: add the special character (non-breaking space). Complete List of Special Characters Example: This statement requires lots of blank spaces in the middle of it. This HTML code creates the above results: <p>This statement requires lots of blank spaces
|
||||||||||||||||||||||||||||||||||||||||