1 / 62

Basic HTML You Should Know - Database Systems

Learn the basics of HTML and its elements, including tags, headers, titles, and body, in the context of database systems. This tutorial covers important terms and acronyms related to HTML. Suitable for beginners in HTML and database systems.

jacobh
Download Presentation

Basic HTML You Should Know - Database Systems

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic HTML You Should Know Database Systems CSCI-3343 Dr. Tom Hicks Computer Science Department

  2. About HTML

  3. Tim Berners-Lee • Physicist Tim Berners-Lee - Contractor at CERN • In 1980 - Proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. • In 1989 - specified HTML – Hypertext Markup Language • 18 elements comprising the initial, relatively simple design of HTML. • In 1989 & 1990 - wrote the browser and server software .

  4. HTML • HTML – Hypertext Markup Language • HTML is not case sensitive • HTML elements often appear in sets  <HTML> ,,, </HTML>; this set should begin and end the rendered portion of the web page. • Some HTML elements appear solo  these are called “empty elements”  <BR> • Many of the tags have optional arguments. For the most part, this tutorial examines only the basics and leaves the optional arguments as a topic for the users to explore individually. .

  5. Terms/Acronyms You Should Know • WWW - World Wide Web • HTML - HyperText Markup Language - The language of web pages on the World Wide Web. • URL - Uniform Resource Locator – web address • Browser - a software program which is used to render/show web pages. It transforms the HTML into attractive documents. • HTML Editor - A word processor that has been specialized to make the writing of HTML documents more effortless. They help to automate the insertion and management of the HTML element tags. • WYSIWYG – What You See Is What You Get • WYSIWYG editor - a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or rendered in a browser.

  6. HTMLElement

  7. HTML • According to the standards, documents should begin and end with these tags. • This tag specifies the base URL/target for all relative URLs in a page: • There are many web pages on the Net that do not contain the HTML element; the web browsers of today are still capable of displaying those pages. The web browsers of tomorrow need not be so generous; make sure that all of your web pages include the HTML element. <HTML> </HTML> .

  8. HEADERElement

  9. HEADER • The header element will include the title for the document, possibly comments about the document, possibly information about the author, and possibly search functionality. • Like the header of a letter, the header of an HTML document is paced at the top; it provides information about the document and its author. • Every HTML document should have a <HEADER> tag and the corresponding end tag </HEADER>. • Often abbreviated <HEAD> <HEAD> </HEADL> .

  10. HEAD Elements • Places within the Head tags are: <HEAD> </HEAD> .

  11. TitleElement

  12. Title • The title element contains information that is to be rendered in the window bar at the top of most browsers. • The title element should always be placed within the header element of the HTML document. • Every HTML document should have both a <TITLE> tag and its corresponding end tag </TITLE>. • Good titles are generally 50 characters or less in length. Good titles are very descriptive of the document they are rendering. • Since some search engines search web pages by title, you should try to select clear, concise titles for each of your web pages. <HEAD><TITLE> My First Web Page </TITLE> </HEAD> .

  13. BODYElement

  14. BODY • The body tags follow the header portion of the HTML document. • Like the body of a letter, the body of the HTML document contains the bulk of the important information about to be distributed. • Every HTML document should have both a title tag <BODY> and its corresponding end tag </BODY>. <HTML> <HEAD><TITLE> My First Web Page </TITLE> </HEAD> <BODY> </BODY> </HTML> .

  15. NormalText

  16. Normal Text -1- • When a browser renders/displays text information, it ignores tabs and carriage returns; it also compresses multiple blanks to a single space. <HTML><HEAD><TITLE> About HTML </TITLE></HEAD> <BODY> The HyperText Markup Language was developed in March of 1989 by Tim Berners-Lee at CERN (http://info.cern.ch); CERN is a high-energy research collective based in Europe. HTML was developed in an effort top provide fellow scientists with current physics research information in a style professional in appearance on any all computer hardware (regardless of platform, fonts installed, or size of monitor). </BODY></HTML> .

  17. Normal Text -2- • Rendered Code • Code adjusts as the browser windowis made wider • Code adjusts as the browser font is made smaller or larger.

  18. Line BreakElement

  19. Line Break • The paragraph element is defined to be <P> … </P> • All browsers currently render it with an empty element. It can be rendered with just one tag.<P> <BODY> OneTwo Three </BODY> <BODY> One <BR>Two <BR> Three <BR> </BODY>

  20. HeadingElements

  21. Heading Elements -1- • The heading elements are <H1>, <H2>, <H3>, <H4>, <H5>, <H6>  sizes are determined by the defaults assigned in your Operating System. • Each heading element begins on it’s own row  a page break is inserted if needed • There is an automatic page break after each heading element • The heading element is used both for visual emphasis and to help logically partition a document <BODY> one two three <H1> This is an example of Heading Element H1! </H1> four five <H2> This is an example of Heading Element H2! </H2> <H3> This is an example of Heading Element H3! </H3> <H4> This is an example of Heading Element H4! </H4> <H5> This is an example of Heading Element H5! </H5> <H6> This is an example of Heading Element H6! </H6> </BODY>

  22. Heading Elements -2-

  23. ParagraphElement

  24. Paragraph Break • The paragraph element is defined to be <P> … </P> • All browsers currently render it with an empty element. It can be rendered with just one tag.<P> <BODY> One <BR>Two <BR> Three <BR> </BODY> <BODY> One <P>Two <P> Three <P> </BODY> <BODY> <P> One <P><P> Two </P> <P> Three </P> </BODY>

  25. Horizontal RuleElement

  26. Horizontal Rule • The horizontal rule element is used to create a horizontal bar to help partition the browser window. • The horizontal rule is an empty element. <BODY> <H3> Chapter 1 </H3> <HR> <H3> Chapter 2 </H3> <HR SIZE = 6> <H3> Chapter 3 </H3> <HR WIDTH = 50%> <H3> Chapter 4 </H3> < HRcolor= RED size="7" noshade> <H3> Chapter 5 </H3> < HRCOLOR=#123456 SIZE=10 noshade> </BODY>

  27. CENTERElement

  28. Center Element • The center element is used to render/show in the middle of browser window. • This element may enclose a single line or many lines. <CENTER> Go Database </CENTER> <CENTER> <H1> Go Database </H1> </CENTER> <HR> one <BR> two <BR> <Center> four <BR> five <BR> six <BR> </CENTER>

  29. BoldElement

  30. Bold Element • The boldface element is used to render/show the enclosed text in a bold form (if such a font is available). • This element may enclose a single word, several words, or several paragraphs. Go Database <BR> <B>Go Database </B> <BR> <HR> One <BR> <B> Two <BR> Three <BR> </B>

  31. ItalicElement

  32. Italic Element • The italic element starting tag is <I> and the italic element ending tag is </I>. The italic tag element is used to render/show the enclosed text in italic form (if such a font is available). • The italicelement may enclose a single letter, a single word, several words, or several paragraphs. Go Database <BR> <I>Go Database </I> <BR> <CENTER> <H1> Go Database </H1> </CENTER> <CENTER> <H1> <I> Go Database </I> </H1> </CENTER>

  33. UnderlineElement

  34. Underline Element • The underline element is used to render/show text with an underline. • This is one of the newer HTML options; the underline does not show up in the older browsers. • This element may enclose a single character, a single word, many words or many lines. • Since links are underlined, prudence should be used when choosing this element. Go Database <BR> <U>Go Database </U> <BR> <CENTER> <U> <H1> Go Database </U></H1> </CENTER>

  35. ImageElement

  36. Image Source Element • Pictures and graphics have become absolutely essential in communication today. Computer drawing programs, scanners, digital cameras, VCR inputs, and snapshot programs use as many as 30 different formats to represent graphic images. • The three image formats that have become standards for all modern day web browsers are .JPG, .GIF, & PNG. • The Image Source is an empty element; it has only one tag that comes in the form <IMG SRC = "xxxxxxxx.gif"><IMG SRC = "../Images/xxxxxxxx.jpg"><IMG SRC = "MyImages/xxxxxxxx.png"> <IMG SRC = "tiger.jpg"> <HR> <CENTER> <IMG SRC = "tiger.jpg" height="74" width="109"> </CENTER> • It is considered wasteful to pass large images, which are rendered smaller with height & width  small changes ok  Resize if necessary!

  37. AnchorElement

  38. Absolute Anchor Element -1- • Hyperlinks enable you to navigate between web pages.  These web pages anchor the Internet. • This first navigation is to a page on the Internet  it navigates to an http:// page. <H1><CENTER>Database Design <IMG SRC="tiger.jpg"> </CENTER></H1> <HR COLOR=Navy SIZE=10 noshade> <A HREF = "http://carme.cs.trinity.edu/"> Go To Dr. Hicks Home Page </A>

  39. Relative Anchor Element -2A- • MyFirstPage.html is located in folder HTML. • We are going to place a link that will enable navigation to page Database.html  in same directory. • Database.html contains the following code <H1><CENTER>Welcome to Database <IMG SRC="tiger.jpg"> </CENTER></H1>

  40. Relative Anchor Element -2B- • I have now created a folder, called Database, in the same directory as MyFirstPage.html. Page Database.html has been moved inside that folder. • Once again, we want a hyperlink on page MyFirstPage.html code <H1><CENTER>Database Design <IMG SRC="tiger.jpg"> </CENTER></H1> <HR COLOR=Navy SIZE=10 noshade> <A HREF = "Database.html"> Go To Database.html </A>

  41. Relative Anchor Element -3A- • I have now created a folder, called Database, in the same directory as MyFirstPage.html. Page Database.html has been moved inside that folder. • Once again, we want a hyperlinkon page MyFirstPage.html  that link is to navigate to Database.html. <H1><CENTER>Database Design <IMG SRC="tiger.jpg"> </CENTER></H1> <HR COLOR=Navy SIZE=10 noshade> <A HREF = "Database/Database.html"> Go To Database.html </A>

  42. Relative Anchor Element -4A- • Folder Database now contains file  Database.html • Folder FirstPage now contains files  MyFirstPage.html & tiger.jpg • Once again, we want a hyperlinkon page MyFirstPage.html  that link is to navigate to Database.html. <H1><CENTER>Database Design <IMG SRC="tiger.jpg"> </CENTER></H1> <HR COLOR=Navy SIZE=10 noshade> <A HREF = “../Database/Database.html"> Go To Database.html </A>

  43. Relative Anchor Element -4B- • Folder Database now contains file  Database.html • Folder FirstPage now contains files  MyFirstPage.html & tiger.jpg • Note how the image link in Database.html has to go back one level ../ and into folder FirstPage/ in order to referencetiger.jpg. <H1><CENTER>Welcome to Database <IMG SRC="../FirstPage/tiger.jpg"> </CENTER></H1>

  44. Image-AnchorElement

  45. Relative Anchor - Link -1- • Make the tiger.jpg a hyperlink to trinity.edu • Note the cursor turns into a hand when it goes over the tiger • On firefox the link is shown in the bottom left corner of the screen. <H1><CENTER>Welcome to Database</CENTER></H1> <HR> <A HREF = "http://trinity.edu"> <IMG SRC="FirstPage/tiger.jpg"> </A>

  46. Table Element

  47. Table -1- • Each table begins with <TABLE> and ends with </ TABLE > <TABLE> </TABLE > • Each table has one, or more rows.

  48. Table -2- • Each row begins with <TR> and ends with </TR> <TABLE> <TR> </TR> <TR> </TR> </TABLE > 2 Rows

  49. Table -3- • Each row has one, or more columns. • Each column begins with <TD> and ends with </TD> <TABLE> <TR> <TD> One </TD><TD> Two</TD> <TD> Three</TD> </TR> <TR> <TD> Four </TD> <TD> Five </TD> <TD> Six </TD> </TR> </TABLE > 2 Rows – 3 Columns

  50. Table -4- • Each table begins with <TABLE> and ends with </ TABLE > • Each table has one, or more rows. • Each row begins with <TR> and ends with </TR> • Each row has one, or more columns. • Each column begins with <TD> and ends with </TD> • Lots of optional arguments – you need not memorize them! <TABLE> <TR> <TD> One </TD> <TD> Two</TD> <TD> Three</TD> </TR> <TR> <TD> Four </TD> <TD> Five </TD> <TD> Six </TD> </TR> </TABLE >

More Related