Tuesday, October 16, 2012

A short guide on HTML

We all are working on Web Developments, and underneath all webpages is good old HTML. It helps to understand HTML a bit. I realized it more while working on new OAF CLAF. The challenge was to match the new Oracle Apps skin with the corporate website built on .net. Along with HTML, knowledge of UIX, CSS, and JAVASCRIPT is required for CLAF. Hope to cover it all, starting with HTML.
  • Every web page you create must include the <HTML>, <HEAD>, <TITLE> and <BODY> tags.
  • <TITLE> is used to identify the page on Bookmarks and Favorites list.
  • The web addresses contained in a web page are of two types - Absolute (complete address) and relative (address of the resource from current page).
  • File Extension (.JSP, .jsp) and (.HTM, .htm) could refer to same file on windows server but different on unix server. Its better to be uniform in the use of extension.
  • HTML to download a file:
     <A HREF="Prince_Kapoor2012.docx"> Click here to download my resume</A>

  • While testing your application it'll be a nice idea to test your pages in less color and less resolution mode.
  • There are actually two ways of making text display as bold: <b> and <Strong> and Italics: <I>, <EM>. Purists prefer to use <Strong> and <EM> because they imply that the text should receive special emphasis, rather than dictating exactly how that effect should be achieved. <B> and <I> remain the more popular of the two options.
  •  Every form must begin with a form tag, which can be located anywhere in the body of the HTML document. The <Form> tag normally has two attributes, METHOD and ACTION:
     <form action="mailto:princekapoor82@gmail.com" method="post">
  •  <!--    --> indicates comments.
  • The format of color code is #RRGGBB, where rr, gg and bb are two digit hexadecimal values for the red, green and blue.
  • Please be aware that different computer monitors may display colors in very different hues. A shade of blue on one monitor may look purple in another. Sticking to named colors is preferred choice.
  • Spacer component of OAF and empty space in others is created as a small transparent images used in Img tag with width and height attributes. (/OA_HTML/cabo/images/t.gif)
  • An HTML table is an orderly arrangement of text and/or graphics into vertical columns and rows.
    • OAF Table, AdvanceTable and TableLayout both are rendered as HTML table.
    • Even the MessageTextInput is rendered as an HTML table with prompts as separate column (right aligned) and values as separate (left aligned).
    • Closing </TD> is optional, since one cell of the table must end before the next one begins.
    • Tags used in one cell are not carried over to other cells and tags from outside the table don't apply within the table.
  • A Search Engine is an automated computer program that looks in a database index for pages that contain specific words and phrases. 
  • A Robot (also called a Spider) is an automated computer program that spends all day looking at the web pages all over the internet and building a database of the contents of all the pages it visits. They work for building the database of the Search Engine.
  • The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
    • Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
    • The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
    • It is put in <Head> portion of a document.
<META NAME ="description" CONTENT="Prince Kapoor OAF Blog.">
<META NAME="keywords" CONTENT="OAF, ADF, Oracle Apps Framework, Oracle Apps Technical, Oracle Application Framework">

The first tag gives search engine accurate information about your web page and second slightly increases page's ranking on the result based of the keywords.

NAME -  Specifies a name for the metadata. Values for this attribute are application-name, author, description, generator, keywords.

Following is usually the first line in the <Head> section:
    • HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    • HTML5: <meta charset="UTF-8">
http-equiv - Provides an HTTP header for the information/value of the content attribute. Values for this attribute are content-type, default-style, refresh.
content - Gives the value associated with the http-equiv or name attribute.
charset - Specifies the character encoding for the HTML document. 

Following will refresh the document every 30 secs
<meta http-equiv="refresh" content="30">
  • Frames
    • Way of arranging and presenting several web pages at once.
    • Rectangular region within the browser window that displays a page, alongside other pages in other frames.
  • Frameset
    • Frameset document is an HTML page that instructs the Web Browser to split its window into multiple frames and specifies which web page should be displayed in each frame.
  • IFrame
    • The Iframe (Inline Frame - Inline with the data on text/graphics on the page) is set up as a rigid size window frame that scrolls along with the rest of the page and it can exist without having a frameset defined. 
    • Designed to insert interactive applications in Web pages.
    • Frameset is not required for IFrame.
    • One can alter an IFrame’s sections without requiring the user to reload the surrounding page.
    • PPRs in OAF are implemented using IFRAMEs
  • In the HTML source of any OAF page, you'll see <div> and <span> used very frequently with the CSS. The difference between them is - div is a block element and comes with line breaks, span is inline.
  • DHTML is Dynamic HTML.
    • DHTML is a way for you to change the way your pages look. You can instantly change the color of a page with the click of the mouse or without the click of a mouse. You can cause things to happen just by moving the mouse around the page.
    • Combination of HTML and Client side scripting like Java Script.
  • Title attribute is used for showing tip text/extra information. Following are some example:
<a href="http://princekapoor82.blogspot.com" title="OAF Blog">Prince Kapoor Blog</a>
<abbr title="Oracle Applications Self Service Framework">OAF</abbr>
<p title="Oracle Applications Self Service Framework Training">OAF Training</p>

  •  <IMG> tag should contain alt, width and height attribute. Text in alt will be displayed if image can't be displayed. width and height attribute make the page render faster on the browser.
  • <!DOCTYPE>
    • The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.
    • The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
    •  Following are the examples:
       For HTML 5:-
      <!DOCTYPE html>

      For HTML 4.1 Strict:-
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

      HTML 4.01 Transitional:-
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    •  DOCTYPE indicates we are specifying the document type.
    •  HTML means HTML is the root(first) element in your page.
    •  PUBLIC means standard is publicly available.
    •  "-//W3C//DTD HTML 4.01 Transitional//EN" indicates the exact version of that HTML.
    •  "http://www.w3.org/TR/html4/loose.dtd" indicates the file that identifies the particular standard. 
  • http://princekapoor82.blogspot.com or  http://princekapoor82.blogspot.com/ will cause the server to look for a default file. The URL will change to http://princekapoor82.blogspot.com/index.html or http://princekapoor82.blogspot.com/default.htm depending on the web server.
Posted by at
Labels:

1 comment:

  1. AnonymousOctober 27, 2017 at 4:22 PM

    I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in ORACLE ACCESS FRAMEWORK, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on ORACLE ACCESS FRAMEWORK We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us.
    Saurabh Srivastava
    MaxMunus
    E-mail: saurabh@maxmunus.com
    Skype id: saurabhmaxmunus
    Ph:+91 8553576305 / 080 - 41103383
    http://www.maxmunus.com/


    ReplyDelete

Subscribe to: Post Comments (Atom)