HyperText Markup Language (HTML) Introduction

HTML Introduction Most webpages or HyperText Markup Language (HTML) documents are simply plain text files with special markup containers to specify page layout. These tags always begin with a "lessthan" sign or "<". The tag is then ended with the "greaterthan" sign or ">". The first word inside the tag specifies the type of markup tag it is. To make a sentence bold, you use the "b" tag or "". Microsoft tried to invent a new tag for bold specified as "" but the b works fine and takes less characters bytes. To end an HTML markup tag, you start the tag notation ("<") immediately followed by a slash ("/"). TO end a bold tag, you would use "". The following is and example of displaying a sentence in bold typeface: Now is the time for all good men to come to the aid of their country. HTML commands are often nested, to display the previous sentence centered on the document, you would nest the bold tag with the center tag: <center> Now is the time for all good men to come to the aid of their country. </center> When thinking of the code, just think about typing a Microsoft Word document, for example, in the above, we clicked the center button, then the bold button, the we typed the sentence. Once finished, we clicked the bold button to turn bold off, then we uncentered the layout (or cliced left align... the default). The best way to use code instead of WYSIWYG editors or "What you see is what you get" editors such as Microsoft FrontPage is to create a good layout and then re-use it when creating a new document. For instance, once you get all the layout finalized, simply copy an existing document and edit the title tag and the body of the document (text content). To get a good layout when new to HTML, use a WYSIWYG editor such as Frontpage or even WINWORD to create a layout and save the file. Then you can look at the source learning what it is doing. WYSIWYG saves HTML files in an unformat text layout, the HTML displays normally because it only cares about the tags, not the underlying text source. Note that in HTML, whitespace such as spaces and tabs are ignored. If you space more than one time, all subsequent whitespace is ignored. That means you cannot space a line on the HTML document out five times to get an indent with just plain text spaces. You must use a special reference of "&nbsp". Any spaces between these references will be used as a single space, but to get another space, you must use the special reference again. This helps you use special layouts without moving the displayed HTML documents layout. You often use tabs to make the source code more readable, this will not show up in the document's HTML rendering. Example: <center> Using tab to show how this is centered in the center tags. In the HTML layout, this line will not be displayed with the tab, just a single space, from the first whitspace character, the line break after the center tag above. Each line break followed by a tab in this paragraph (source) will only be rendered as a space in the layout. </center> -------------------------------------------------------------------------------- Publishing a Website HTML is HyperText Markup Language, HTTP is the protocol in which the data is transfered. HTTP is HyperText Transfer Protocol, which differs from traditional methods of transfering files, such as FTP. HTML uses URLs to span path the host into its published file structure to request a specific document directly. FTP requires you to log in first, then use command sets. It follows that a website must be on a server running the HTTP service such as Apache or IIS. To get the files on the server, most often you use FTP to upload the files. If you host the site locally on a Windows Server, you can copy the files over using network sharing (SMB). I maintain a local folder with the documents all linked together and usable locally. When I access the documents for reference, I surf the local copy. When a change is needed, I right-click and view source in IExplorer, then save the changes in notepad. Later, usually in 1 month intervals, I update the public HTTP server with the files that are new or modified via FTP. You cannot makes these changed via view source when surfing the HTTP version of the document, you must be using the FILE protocol. The FILE protocol is simply IE reading local HTML documents, such as when you double click a saved HTML file in your My Documents folder, to view it locally. If you changed that file via view source (notepad) and saved it, it would save the new changes. You could then upload it to your server overwritting the old one. With my first website, I updated the contents with WS-FTP. WS-FTP, used to have a very simple layout, it had two content panes which used arrows to move files from one side to the other (local disk and FTP server panels). To update the files, I had to remember which files that had been changed, unless I wanted to update the entire site (this was in college using a 33.6K modem). I draged the files over to the server (uploaded) and logged out. Once the site becomes more complex and changes more frequent, it is no longer feasable to remember or note the changes, you should use a folder/FTP syncronizing application. I use Crystal SiteUpdater 1.0. It has been out for years and it is still 1.x. These programs compare the local folder structure (files and folders) with the corresponding structure on the FTP server, then updates the FTP server. These comparisons are attributes such as "Last Modified" and file size. Just run the program, wait for the remote attribute enumeration via network based FTP, then click update to syncronize the contents of the FTP server with local changes. -------------------------------------------------------------------------------- Getting Started To make a link to another document, you must use the anchor tag which is an "a". It doesn't matter what anchor means, just use the a tag to link to another HTML document. To go to a file named mypet.html from another HTML document, you would use the following source code: My dog's name is fluffy, he is just great, I have made a page for him, <a href="hobbies/mypet.html">Click Here</a> to see his webpage. Notice the link reference to the document filename. It includes the path (folder) as well. The file reference is also an attribute of the anchor tag named href. The viewer side "link" is presented (displayed) with the contents between the anchor tags. All text within the anchor tag will allow a surfer to navigate to that HTML file with a click (surfing). Note that the anchor tag's attribute of href is not used to close the tag, just the "a" or "</a>". When closing a tag, just use the tag name, excluding any attributes defining the tag. The following is a quick list of HTML tags to use when starting out with basic text formatting: <center>Centered text</center> Bold text Italic text <ul>Underlined text</ul> Red Tahoma font. This sentence ends with two line breaks (returns) This is a paragraph tag, don't combine with breaks <img src="images/mypicture.jpg"> Line breaks are the equivalent to holding SHIFT and pressing ENTER, in Winword. MS Word will use current format settings with a simple press of ENTER, such as creating a new bullet in a bulleted list. Pressing SHIFT+ENTER will give you a line return without creating another bullet. I prefer the break " " tag over using a paragraph tag "". Two break tags after a paragraph space the next paragraph the same as using "..." tags. Note that the tag does not use a closing tag such as "". A single tag is all that is required, since you cannot have text between the end of the previous sentence and the beginning of the next. Newer HTML RFC specifications now call for a "/" on all tags not implementing a closing tag. Example of " " with new specification: The trailing "/" indicated there is no closing tag. In the specs, there must be a space between the "/" and any previous text. IE. you cannot do " ". This specification is highly refined and will not be required for some time, don't worry about closing tags that do not have corresponding closing tags. Notice above that the image has no closing tag, you cannot put HTML text within an image. -------------------------------------------------------------------------------- Basic HTML Layout <html> <head> <title>Sample</title> </head> <body> <center>My Sample Page</center> <center> Hello World! </center> </body> </html> An HTML document must begin and end with the HTML tag (in theory). You can define a title with the TITLE tag within the HEAD section and the content of the document is placed within the BODY tags. This is just how it is defined in RFCs. IE will let you cheat all of the specifications, but that is not good practice. Notice the CENTER tags. The different method of placing the text between the tags makes no diffence when viewed in a browser, the tabs are just whitespace and treated as a single space. -------------------------------------------------------------------------------- Extensible Markup Language (XML) HTML, combined with DHTML, JAVA, JavaScript, CGI scripts, ETC. offers a very powerful platform for data delivery. The simple yet effective markup format has led to XML which uses the HTML markup tag syntax "< >". XML allows each tag to be defined by the author, thus giving it's name "Extensible" formatted by the the HTML syntax "Markup Language". With XML, you assign attributes to the tags as the HREF attribute is defined in an A (anchor) tag. Here is how you can use XML to create a list of dogs in the neighborhood, you have defined (used) and made use of the tag "DOGS" somewhere outside of this data file (a script): <dogs name="lassie" breed="collie" weight_lbs="50"> <dogs name="money" breed="poodle" weight_lbs="12"> <dogs name="spunky" breed="basset" weight_lbs="48"> With XML, an application, VB script, ASP script, Etc. can access this file, and read in the contents. The application or script uses it's native language to define the layout and place a query for "collies, >40 lbs.", thus lassie would be returned. Thinks of this as an alternate method of CSV based text files as exported and imported with MS Excel. A corresponding CSV: dogs,lassie,collie,50 dogs,money,poodle,12 spunky,basset,48 One obvious benefit of XML over CSV is that CSV data records must be in order. With XML, an attribute name and value is assigned, thus the attributes can be defined (declared / typed) in any order. CSV can be defined as an "ordered", record based data file, XML can be defined as "associative", tag based data file. Associative means values are assoiciated with an attribute, not just location within a comma seperated ("name,age,race,sex") record vector. -------------------------------------------------------------------------------- Personal Website? A personal website for an engineer is very useful. I use it as an electronic notebook that I don't have to carry around. Most of the time, when I don't have Internet access, I don't need it (canoeing?), when I do need to reference a doc, I can browse to it from anywhere (that has internet access). Having created or placed the document within the structure of the collection, I can browse to the document immediately, once there, the information is presented in just the way I find it most useful (having put it there). Basically it is the same as someone who has a "tech" folder in My Documents for their reference material. An HTML helpdesk is the same but has a browser based navigation and presentation method (*.HTML), easily published via HTTP.