Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • HTML Basics: Group 2 - Assessment 4

    Încărcat de

    Deepak
    72 vizualizări26 pagini
    Covers all the basic stuff you need to know about HTML

    Titlu original

    HTML Basics

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PPT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Covers all the basic stuff you need to know about HTML

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    72 vizualizări26 pagini

    HTML Basics: Group 2 - Assessment 4

    Încărcat de

    Deepak
    Covers all the basic stuff you need to know about HTML

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 26

    HTML BASICS

    GROUP 2 - ASSESSMENT 4

    November 18, 2011

    CONTENT OVERVIEW
    HTML Origin and Versions HTML Introduction HTML Tags HTML Elements HTML Headings, Paragraphs & Links HTML Formatting HTML Lists HTML Images HTML Tables HTML Forms HTML Media Conclusion
    November 18, 2011

    HTML ORIGIN & VERSIONS


    Physicist Tim Berners-Lee, in 1990, proposed and prototyped a system for European Organization for Nuclear Research (CERN) researchers to use and share documents. Berners-Lee specified HTML and wrote the browser and server software for rendering HTML documents towards the end of 1990. In the mid 1990s, the popularity of HTML soared and standardization of the same was done. Popular versions: HTML 2.0 November 1995. HTML 3.2 January 1997. HTML 4.0 December 1997. HTML 5.0 January 2008.
    November 18, 2011

    HTML - INTRODUCTION
    HyperText Markup Language (HTML) is the predominant markup language for web pages. HTML elements are the basic building-blocks of web pages. HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets. Example: <html>

    A series of tags that are integrated into a text document form the content of all HTML codes. HTML tells the browser what to do, and what props to use. The browser uses the tags to interpret the content of the page.

    November 18, 2011

    HTML TAGS
    They are surrounded with angle brackets. Example: <> . They come in pairs, mostly. Example: <p> and </p> . The first tag turns an associated action on, and the second turns it off. The second tag(off switch) starts with a forward slash. Example: </b>. Tags are not case sensitive, i.e., <b> and <B> start the same action. Many tags have attributes. For example, <P ALIGN=CENTER> centers the paragraph following it.

    November 18, 2011

    HTML ELEMENTS
    An HTML element is everything from the start tag to the end tag. An HTML element starts with a start tag / opening tag. An HTML element ends with an end tag / closing tag. The element content is everything between the start and the end tag. Some HTML elements have empty content. Empty elements are closed in the start tag.
    Start tag <p> <a href="default.htm" > <br /> Element content New Paragraph New Link Empty End tag </p> </a> (Not Needed)
    November 18, 2011

    HTML HEADINGS, PARAGRAPHS & LINKS


    HTML Headings: Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. HTML Paragraphs: Paragraphs are defined with the <p> tag. Browsers automatically add an empty line before and after a paragraph. Use the <br /> tag if you need a line break (a new line) without starting a new paragraph. HTML Links: The HTML code for a link is <a href="url">Link text</a> .
    November 18, 2011

    HTML ELEMENTS - EXAMPLE


    HTML CODE
    <h1>Sample heading</h1> <h2>Sample heading</h2> <h3>Sample Heading</h3>

    BROWSER OUTPUT

    Sample Heading
    Sample Heading
    Sample Heading

    <h4>Sample Heading</h4>
    Sample Heading <h5>Sample Heading</h5>
    Sample Heading

    November 18, 2011

    HTML ELEMENTS - EXAMPLE


    HTML CODE
    <a href="http://google.co.in> Search Here</a> <p>Sample paragraph.</p> <p>This is<br /> a<p> para</p>graph with line breaks.</p>

    BROWSER OUTPUT
    Search Here

    Sample Paragraph. This is a para graph with line breaks.


    November 18, 2011

    HTML FORMATTING
    HTML CODE
    <b>This text is bold</b> <i>This text is italic</i> <u>This text is underlined</u> <code>This is computer output</code> <b><i>This text is both bold and italic</b></i>

    BROWSER OUTPUT
    This text is bold This text is italic This text is underlined

    This is computer output


    This text is both bold and italic

    November 18, 2011

    10

    HTML TEXT FORMATTING


    HTML CODE
    <strong>This text is strong</strong>

    BROWSER OUTPUT
    This text is strong

    <big>This text is big</big>

    This text is big

    <em>This text is emphasized</em>

    This text is emphasized

    This is<sub> subscript</sub> and <sup>superscript</sup>

    This is subscript and superscript


    November 18, 2011

    11

    HTML LISTS
    Lists are used to arrange items. The most common HTML lists are ordered and unordered lists. 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). 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.

    November 18, 2011

    12

    LISTS EXAMPLE

    HTML CODE <ul> <li>Coffee</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Milk</li> </ol>

    BROWSER OUTPUT Coffee Milk

    1. Coffee 2. Milk

    November 18, 2011

    13

    HTML IMAGES
    In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" alt="some_text"/> The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text. Syntax: <img src="boat.gif" alt="Big Boat" />

    November 18, 2011

    14

    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. Example: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table> OUTPUT:

    November 18, 2011

    15

    HTML FORMS
    HTML forms are used to pass data to a server. A form can contain 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> The most important form element is the input element. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.
    November 18, 2011

    16

    HTML FORMS
    <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>

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

    November 18, 2011

    17

    BROWSER OUTPUT TEXT FIELD

    November 18, 2011

    18

    BROWSER OUTPUT PASSWORD FIELD

    November 18, 2011

    19

    HTML FORMS
    <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name=gender" value="male" /> Male<br /> <input type="radio" name=gender" value="female" /> Female </form> <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>
    November 18, 2011

    20

    BROWSER OUPUT RADIO BUTTON

    November 18, 2011

    21

    BROWSER OUTPUT - CHECKBOX

    November 18, 2011

    22

    HTML MEDIA
    Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more. Multimedia elements (like sounds or videos) are stored in media files.The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg. Multimedia elements also have their own file formats with different extensions like .swf, .wmv, .mp3, and .mp4.

    November 18, 2011

    23

    HTML MEDIA
    The MP4 format is the new and upcoming format for internet video. It is supported by YouTube, Flash players and HTML5. The other important formats are AVI, WMV, Quicktime, Realvideo, flash, MPEG. The commonly used sound formats are MIDI,Realaudio,wav, WMA,MP3. The WAVE is the most popular uncompressed sound format on the Internet, and it is supported by all popular browsers. If you want uncompressed sound (music or speech) to be available to all your visitors, you should use the WAVE format. The MP3 format is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music
    November 18, 2011

    24

    CONCLUSION LOOKING AHEAD


    HTML, though is simple and easy to learn, but has serious inherent flaws in it. HTML is a very forgiving language, because it oversees many inconsistent and erroneous codes. This may result in different browsers interpreting HTML pages differently. Hence, eXtensible Hypertext Markup Language (XHTML) is used as an alternative.

    XHTML has stricter rules, which causes less variance among browsers and more consistency in results.

    November 18, 2011

    25

    Thank You

    S-ar putea să vă placă și