Scribd Logo
Carica

Benvenuto in Scribd!

  • Chapter-2 - Introduction To HTML

    Caricato da

    sagarmetha
    12 visualizzazioni67 pagine
    qwerwtrregcxvb

    Titolo originale

    Chapter-2_Introduction to HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    qwerwtrregcxvb

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    12 visualizzazioni67 pagine

    Chapter-2 - Introduction To HTML

    Caricato da

    sagarmetha
    qwerwtrregcxvb

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 67

    HTML

    HTML is a language for describing web

    pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

    HTML 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 like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

    HTML Documents = Web Pages


    HTML documents describe web pages HTML documents contain HTML tags and plain

    text The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page: documents are also called web pages

    The text between <html> and </html> describes the

    web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph

    The development process


    What You Need You don't need an HTML editor You don't need a web server You don't need a web site In this chapter we use a plain text editor (like Notepad)

    to edit HTML When you save an HTML file, you can use either the .htm or the .html file extension

    Basic HTML
    HTML Headings

    HTML headings are defined with the <h1> to <h6>

    tags. Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

    HTML Paragraphs
    HTML paragraphs are defined with the <p> tag.

    Example
    <p>This is a paragraph.</p>

    <p>This is another paragraph.</p>

    HTML Links
    HTML links are defined with the <a> tag. Example

    <a href="http://www.yahoo.com">Yahoo</a>

    HTML Images
    HTML images are defined with the <img> tag. Example <img src=smile.jpg" width="104" height="142" />

    HTML Text Formatting


    HTML Text Formatting This text is bold

    This text is big

    This text is italic


    This is computer output

    This is subscript and superscript

    HTML Formatting Tags HTML uses tags like <b> and <i> for formatting

    output, like bold or italic text. These HTML tags are called formatting tags

    COMMENTING CODE
    <!--This is a comment. Comments are not displayed in

    the browser-->

    HTML LISTS
    The most common HTML lists are ordered and

    unordered lists:

    HTML Ordered Lists


    An ordered list starts with the <ol> tag. Each list item

    starts with the <li> tag. The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol> How the HTML code above looks in a browser: 1. Coffee 2. Milk

    HTML Unordered Lists


    An unordered list starts with the <ul> tag. Each list

    item starts with the <li> tag. The list items are marked with bullets (typically small black circles). <ul> <li>Coffee</li> <li>Milk</li> </ul> How the HTML code above looks in a browser: Coffee Milk

    HTML Definition Lists


    A definition list is a list of items, with a description of

    each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

    How the HTML code above looks in a browser:


    Coffee

    - black hot drink - white cold drink

    Milk

    HTML Tables
    Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and

    each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

    Table Example
    <table border="1">

    <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    HTML Table Headers


    Header information in a table are defined with the

    <th> tag.

    The text in a th element will be bold and centered.


    <table border="1">

    <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    HTML Forms and Input


    HTML Forms are used to select different kinds of user

    input. HTML Forms pass data to a server. it contains input elements like Text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> input elements. </form>

    HTML Forms - The Input Element


    The input element is used to select user information.

    An input element can be of type text field, checkbox,

    password, radio button, submit button, and more. 1. Text Fields <input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form>

    How the HTML code above looks in a browser:

    Also note that the default width of a text field is 20 characters.

    Password Field
    <input type="password" /> defines a password field: <form>

    Password: <input type="password" name="pwd" /> </form> How the HTML code above looks in a browser:

    Note: The characters in a password field are masked (shown as asterisks or

    circles).

    Radio Buttons
    <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE Option

    among rest of all option <form> <input type="radio" name=Gender" value="male" /> Male<br /> <input type="radio" name="Gender" value="female" /> Female </form> How the HTML code above looks in a browser:

    Checkboxes <input type="checkbox" /> defines a checkbox.

    Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> How the HTML code above looks in a browser:

    Submit Button
    <input type="submit" /> defines a submit button. 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: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How the HTML code above looks in a browser:

    If you type some characters in the text field above, and

    click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

    HTML Form Tags

    1. EXAMPLE : OPTION GROUP

    2. Fieldset and Legend :

    3. Input tag

    Web Site Structure A website is a collection of pages associated by

    hyperlinks , but it should also be broken up into areas for structure, which aids memory and ordering resources. A web site generally has a root directory, the one which is entered first, then several sub-directories that serves as the sub-sites.

    The main site has a default index.html page, which will

    be picked up by the browser simply by going to http://www.mywebsite.co.uk. It uses several images that are collected under an images sub directory. There are two further sub-sites under the main root directory , namely cats and holidays. http://www.mywebsite.co.uk/cats/

    XML
    XML stands for eXtensible Markup Language. XML is designed to transport and store data.

    XML is designed to describe data.


    XML is used to transport data, while HTML is used to

    format and display the data.

    The Difference Between XML and HTML


    XML is not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store

    data(describe), with focus on what data is. HTML was designed to display data, with focus on how data looks. HTML is about displaying information, while XML is about carrying information.

    Introduction to XHTML
    XHTML is a stricter and cleaner version of HTML. XHTML is a combination of HTML and XML

    (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01, combined with the strict syntax of XML.

    Move to XHTML
    The head and body tag elements are required in

    XHTML whereas in HTML they are optional. Document Structure <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.00 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd> <html xmlns = http://www.w3.org/1999/xhtml> <head> <title> First XHTML page </title></head> <body> <p> Hello World</p> </body> </html>

    Move to XHTML
    All XHTML tag and attribute names must be in

    lowercase and all attribute values must enclosed in quotes. Attributes cannot be abbreviated and should appear fully written out. An XHTML document must specify a document title. There should be XML declaration: <?xml version =1.0 ?> Document type can be transitional,frameset,Basic etc.

    Meta Tags
    Metadata is information about information or , in this

    context more specifically , metadata is machineunderstandable information about web resources. It is included in the head section. Example <html> <head> <meta name = author content=Fred Flintstone/> <meta name = keywords content = stone age,lifestyles,retro/> </head> </html>

    Meta Tags
    In the head section to set an expiration date:

    <meta name = expires content=Mon, 20 Jul 2007 16:00:00 GMT/> This sets the expiry point when a page will be reloaded from the Web site. To force a refresh after a period of time <meta name=refresh content=50;http://myownpages.co.uk/mynewssite.ht ml/> This will cause page to be refreshed after 50 seconds and a redirection to occur to the URL specified.

    Meta Tags
    A browser can be stopped from caching a page, if it

    supports <meta> elements http-equiv attribute. <meta http-equiv = pragma content=no-cache/> This forces browser to ignore the cached page and instead make a request again.
    To do this the value pragma is assigned to the http-

    equiv attribute and a no-cache value to the content attribute.

    Frame

    Frameset : Vertical

    Frameset : Horizontal

    Mix columns and row

    Character Entities
    They are useful for inserting symbols that arent

    usually available or just for placing spaces around text in the code.

    Inside a Browser
    The controller acts as the main component of operations

    between various components. For example it is responsible for collecting input from the user and also managing outgoing requests for the HTTP client to deal with for external communication. HTML and script are channeled through to the interpreters as needed and output from these is put through special display drivers. The browser can be extended with plug-in modules, which enhance capabilities such as multimedia,graphics and sound.

    Potrebbero piacerti anche