2_Tutorial 1.docx
Document Details
Uploaded by HilariousTriumph
Full Transcript
HINF432 Web Applications in Health Informatics Tutorial 1 Getting Started HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor. Notepad is a common text editor (on Windows this is usually found under the Programs --> Acce...
HINF432 Web Applications in Health Informatics Tutorial 1 Getting Started HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor. Notepad is a common text editor (on Windows this is usually found under the Programs --> Accessories menu). Type this in to your text editor: Save the file as "myfirstcode.html". It is important that the extension ".html" is specified - some text editors, such as Notepad, will automatically save it as ".txt" otherwise. Go to the File menu of the browser, select Open, and browse for the file. Software programs such as Dreamweaver will never give you the same control over a web page as coding by hand. Tags Although the basics of HTML are plain text, we need a bit more to make it a valid HTML document. The basic structure of an HTML document includes tags, which surround content and apply meaning to it. Change your document so that it looks like this: Now save the document again, go back to the web browser and select "refresh" (which will reload the page). The appearance of the page will not have changed at all, but the purpose of HTML is to apply meaning, not presentation, and this example has now defined some fundamental elements of a web page. The first line on the top that starts <!DOCTYPE... is to let the browser know that you know what you're doing. Then, <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window. Closing tags The </body> and </html> close their respective tags. ALL HTML tags should be closed. Although older versions of HTML allowed some tags not to be closed, latest standards require all tags to be closed. Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this : <br />. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag → content → closing tag. Page Titles All HTML pages should have a page title. To add a title to your page, change your code so that it looks like this: We have added two new elements here, that start with the head tag and the title tag (and see how both of these close). The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window. We will see later on that other elements can appear inside the head element, but the most important of them is the title element. If you look at this document in the browser (save and refresh as before), you will see that "My first Tutorial" will appear on the title bar of the window (not the actual canvas area). The text that you put in between the title tags has become the title of the document. If you were to add this page to your “Favorites” or “Bookmarks”, depending on your browser, you would see that the title is also used there.
