Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML Basics: Naukri UI

    Transféré par

    Firstnaukri
    11 vues30 pages

    Titre original

    2057879204

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    11 vues30 pages

    HTML Basics: Naukri UI

    Transféré par

    Firstnaukri

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 30

    HTML Basics

    Naukri UI
    What is HTML
    Hyper Text Markup Language for describing web pages.
    It has a set of markup tags.
    Tags describe document contents.
    HTML documents are also called web pages.
    HTML document contains HTML tags and plain tags.
    HTML Page Structure
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
    org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>
    Explanation
    The <!DOCTYPE... > element tells the browser which version of HTML the
    document is using.
    The <html> element can be thought of as a container that all other tags sit inside
    (except for the !DOCTYPE tag).
    The <head> tag contains information that is not normally viewable within your
    browser (such as meta tags, JavaScript and CSS),although the <title> tag is an
    exception to this. The content of the "<title>" tag is displayed in the browser's title
    bar (right at the very top of the browser).
    The <Body> tag is the main area for your content. This is where most of your code
    (and viewable elements) will go.
    Tags
    HTML markup tags are usually called HTML tags.
    HTML tags are keywords surrounded by angle brackets like <html>.
    HTML tags normally come in pairs. First tag in the pair is the start tag and
    the second tag is the end tag.
    Elements
    An HTML elements is everything between the start tag and the end tag,
    including the tag.
    For example:
    <p>This is a paragraph</p>
    Element Attributes
    HTML elements have attributes which provide additional information about an element.
    Attributes are always specified in the start tag.
    Attributes come in name/value pairs. For example: id=container
    HTML Attribute List
    Class
    ID
    Name (Forms)
    Target (Anchor)
    Title
    Lang
    Value (Forms)
    Style
    Type (Forms)
    HTML Structural Elements
    DIV
    P
    Table
    DIV
    The <div> tag defines a division or a section in an HTML document.
    The <div> tag is used to group block-elements to format them with CSS.
    The <div> element is very often used together with CSS, to layout a web
    page.
    For example:
    <div>Page Container</div>
    Paragraphs
    HTML documents are divided into paragraphs.
    Paragraphs are defined with the <p> tag.
    For example:
    <p>Paragraph</p>
    Tables
    Used to presents tabular data.
    Tables Tags
    THEAD Table Header
    TBODY Table Body
    TFOOT Table Footer
    TH Table Headings
    TD Table Data
    TR Table Row
    CAPTION Table Caption
    Table Attributes
    Border Table border width
    Width Table width
    Cellpadding Space between cells (TD)
    Cellspacing Spacing between cell content and cell
    Colspan To merge columns
    Rowspan To merge rows
    HTML Formatting Tags
    Headings(<h1>,<h2>,<h6>)
    Strong (<strong>)
    Emphasis (<em>)
    Line Breaks (<br/>)
    Horizontal rule (<hr>)
    Unordered List (<ul>)
    Ordered List (<ol>)
    List Item (<li>)
    Headings
    Heading are important in HTML documents.
    Heading are defined with the <h1> to <h6> tags.
    <h1> defines the most important heading. <h6> defines the least important
    heading.
    For example:
    <h1>Heading 1</h1>
    <h2>Heading 1</h2>
    ..
    <h6>Heading 1</h6>
    Strong and Emphasis
    STRONG
    To place a strong importance on a piece of text, use the <strong> element.
    It will format the text to be shown as bold.
    For example:
    <strong>Some important heading</strong>
    EMPHASIS
    To emphasise a text, use the <em> element.
    It will format the text to be shown as italic.
    For example:
    <em>Some important heading</em>
    Line Break & Horizontal Rule
    LINE BREAK - <br />
    Forces a line break.
    For example:
    <p>Heading<br /> Details</p>
    HORIZONTAL RULE - <hr />
    Creates a horizontal rule.
    For example:
    <p>Heading<hr /> Details</p>
    Ordered List
    Used to create an ordered list.
    <ol> is used to define the lis and <li> is used to define each list item.
    For example:
    <ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
    </ol>
    Unordered List
    Used to create an unordered list.
    <ul> is used to define the lis and <li> is used to define each list item.
    For example:
    <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
    </ul>
    HTML Links/Anchors
    HTML Links Links, otherwise known as hyperlinks, are defined using the
    <a> tag - otherwise known as the anchor element.
    To create a hyperlink, you use the <a> tag in conjunction with the href
    attribute (href stands for Hypertext Reference). The value of the href
    attribute is the URL, or, location of where the link is pointing to.
    For example:
    <a href=http://www.naukri.com>Visit Naukri.com</a>
    HTML Links/Anchors Targets
    You can nominate whether to open the URL in a new window or the current window.
    You do this with the target attribute.
    For example:
    <a href=http://www.naukri.com target=_blank>Visit Naukri.com</a>
    VALUES
    1. _blank : Opens the URL in a new browser window.
    2. _self : Loads the URL in the current browser window.
    3. _parent : Loads the URL into the parent frame(still within the current browser
    window). This is only applicable when using frames.
    4. _top : Loads the URL in the current browser window, but cancelling out any frames.
    Therefore, if frames were being used, they arent any longer.
    HTML Images
    Images make up a large part of the web - most websites contain images. HTML
    makes it very easy for you to embed images into your web page. To embed an
    image into a web page, the image first needs to exist in either .jpg, .gif, or .png
    format. For example, target="_blank" opens the URL in a new window. Example:
    Search your item <a href="http://www.google.com" target="_blank" >Google
    search</a>
    For example:
    <img src=http://www.naukri.com/images/logo.png height=100 width=100
    title=Naukri.com Logo alt=Naukri.com - Indias no. 1 job site />
    FORMS
    HTML Forms are required when you want to collect some data from the site visitor. For example
    registration information: name, email address, credit card, etc.
    A form will take input from the site visitor and then will post your back-end application such as
    CGI, ASP Script or PHP script etc. Then your back-end application will do required processing
    on that data in whatever way you like.
    Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes,
    etc. which are used to take information from the user.
    In HTML, a form is defined using the <form></form> tags. The actual form elements are defined
    between these two tags.
    Input Tags - Text
    Text fields are used for when you want the user to type text or numbers into the
    form.
    For example:
    <input type=text name=username />
    Input Tags - Select List
    A select list is a dropdown list with options. This allows the user to select one
    option from a list of pre-defined options. The select list is created using the
    <select> element in conjunction with the <option> element.
    For example:
    <select name=list>
    <option value=val1>List Value 1</option>
    <option value=val2>List Value 2</option>
    <option value=val3>List Value 3</option>
    </select>
    Input Tags - Checkboxes
    Checkboxes enable the user to make multiple selections.
    For example:
    <input type=checkbox name=chk value=chkVal1 id=chkbox1 />
    <label for=chkbox1>Checkbox Value 1</label>
    <input type=checkbox name=chk value=chkVal2 id=chkbox2 />
    <label for=chkbox2>Checkbox Value 2</label>
    <input type=checkbox name=chk value=chkVal3 id=chkbox3 />
    <label for=chkbox3>Checkbox Value 3</label>
    Input Tags - Radio Buttons
    Radio buttons are used for when you want the user to select one option from a
    pre-determined set of options.
    For example:
    <input type=radio name=radioType value=radio1 id=rVal1 />
    <label for=rVal1>Value 1</label>
    <input type=radio name=radioType value=radio2 id=rVal2 />
    <label for=rVal2>Value 2</label>
    <input type=radio name=radioType value=radio3 id=rVal3 />
    <label for=rVal3>Value 3</label>
    Input Tags - Textarea
    The <textarea> tag defines a multi-line text input control.
    A text area can hold an unlimited number of characters, and the text renders in a fixed-width font
    (usually Courier).
    The size of a text area can be specified by the cols and rows attributes, or even better; through
    CSS' height and width properties.
    For example:
    <textarea rows=5 cols=2 name=userdata id=userdatafield
    ></textarea>
    Form - Buttons
    A submit button is used to send form data to a server.
    The data is sent to the page specified in the form's action attribute.
    The file defined in the action attribute usually does something with the received input

    Vous aimerez peut-être aussi