Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Basic of HTML: Name Enrollment Number

    Загружено:

    Shreyash Patel
    27 просмотров29 страниц
    html basics

    Оригинальное название

    basic of HTML

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PPTX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    html basics

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    27 просмотров29 страниц

    Basic of HTML: Name Enrollment Number

    Загружено:

    Shreyash Patel
    html basics

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 29

    BASIC OF HTML

    NAME ENROLLMENT NUMBER

    PATEL JAINIL 160280116063


    • WHAT IS HTML?
    • HTML EDITORS
    • PAGE STRUCTURE
    • HTML TAGS

    SATANI CHIRAG 160280116081


    • HYPERLINK
    • LIST
    • TABLE

    PATEL SHREYASH 160280116072


    • IMAGES IN HTML
    • FORMS
    • XHTML
    What is HTML ?
    HTML IS THE STANDARD MARKUP LANGUAGE FOR CREATING
    WEB PAGES.

     HTML STANDS FOR HYPER TEXT MARKUP LANGUAGE


     HTML
    DESCRIBES THE STRUCTURE OF WEB PAGES USING
    MARKUP
     HTML ELEMENTS ARE THE BUILDING BLOCKS OF HTML PAGES
     HTML ELEMENTS ARE REPRESENTED BY TAGS
     HTMLTAGS LABEL PIECES OF CONTENT SUCH AS "HEADING",
    "PARAGRAPH", "TABLE", AND SO ON
     BROWSERS DO NOT DISPLAY THE HTML TAGS, BUT USE THEM
    TO RENDER THE CONTENT OF THE PAGE
    HTML Editors
     Write HTML Using Notepad or TextEdit
     Web pages can be created and modified by using
    professional HTML editors.
     However, for learning HTML we recommend a simple text
    editor like Notepad (PC) or TextEdit (Mac).
     We believe using a simple text editor is a good way to
    learn HTML.
    C:\Users\Admin\Desktop\tutorialpoints.html
    HTML Page Structure
     Below is a visualization of an HTML page structure:

    <html>
    <head>
    <title>Page title</title>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    </body>
    </html>
    HTML TAGS
    Tags Description
    1. <!DOCTYPE...> This tag defines the document type and HTML version.
    2. <html> This tag encloses the complete HTML document and mainly
    comprises of document header which is represented by
    <head>...</head> and document body which is represented by
    <body>...</body> tags.
    3. <head> This tag represents the document's header which can keep other
    HTML tags like <title>, <link> etc.
    4. <title> The <title> tag is used inside the <head> tag to mention the
    document title.
    5. <body> This tag represents the document's body which keeps other HTML
    tags like <h1>, <div>, <p> etc.
    6. <h1> This tag represents the heading.
    7. <p> This tag represents a paragraph.
    HTML Tags:

    Hyperlink | List |Table


    Hyperlinks

     Why links are needed?


     So the links are found in nearly all web pages. links allow
    user to click their way from page to page .
     Html links are hyperlinks.
     You can click on a link and jump to another document.
     When you move the mouse over a link , the mouse arrow
    will turn into a little hand.
    Syntax

     In HTML links are defined with the <a> tag .


     Syntax:
     <a href =“URL”> link text</a>
     Example:
     <a href= “www.google.com”>google</a>
     The href attribute specifies the destination address
    (https://www.google.com) of the link .
     The link text is the visible part .
     Clicking on the link text will send you to the specified address.
    HTML Links-The target Attribute

     The target attribute specifies where to open the linked


    document.
     the target attribute can have one of the following value :
    • _blank: opens the linked document in the new window
    or tab .
    • _self : opens the linked document in the same window/
    tab as it was clicked (this is default )
    • _parent :Opens the linked document in the parent frame
    .
    • _top : Opens the linked document in the full body of the
    window
    HTML links-Image as Link

     It is common to use images as links.


     Example :
     <a href=“path”><img src=“path_of_image”
    alt=“HTML Image”></a>
    HTML list

     An Unordered list :
    -An unordered list start with the <ul> tag each list items start with the
    <li> tag .
    -the list items will be marked with the bullets (small black circle ) by
    default .
    Example :
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    </ul>
    Unordered Html List choose list item
    marker
     The style attribute is used to define the style of the list item marker .

    Value Description

    disc Sets the list item marker to a bullet(default )

    circle Sets the list item marker to a circle

    square Sets the list item marker to a square

    none The list items will not be marked


    Ordered HTML list

     An ordered list starts with the <ol> tag . Each list item starts with the
    <li> tag .
     the list items will be marked with the number by default .
     Example :
    <ol>
    <li>coffee</li>
    <li> tea</li>
    </ol>
    Ordered HTML List-The Type
    Attribute
    Type Description
    type=“1” The list items will be numbered with
    numbers (default)
    type=“A” The list item will be numbered with
    uppercase letters
    type=“a” The list item will be numbered with
    lowercase letters
    type=“I” The list item will be numbered with
    uppercase roman numbers
    type=“i” The list item will be numbered with
    lowercase roman numbers
    HTML Table

     Anhtml table is defined with the <table>


    tag.
     Each table row is defined with the<tr> tag.
    A table header is defined with the <th >
    tag. By default ,table headings are bold
    and centered .
    A table data/cell is defined with the <td>
    tag .
     Example:
    <table>
    <tr>
    <th>Firstname </th>
    <th>lastname</th>
    </tr>
    <tr>
    <td>Chirag</td>
    <td>Satani</td>
    </tr>
    HTML Images

     1. The “img” tag is used to add images on a webpage.


    The “img” tag is an empty tag, which means it can
    contain only a list of attributes and it has no closing tag.

     Syntax :
    <img src=“url” alt=“some text”>

     ‘src’ attribute :
    ‘alt’ attribute :
    2. Setting width and height of Image :
    The width and height attributes are used to specify
    the height and width of an image. The attribute
    values are specified in pixels by default.
    3. Adding animated Image :
    4. Adding titles to Image :
    Along with the images, titles can also be added to
    images to provide further information related to
    the inserted image. For inserting a title, the title
    attribute is used.
    5. Setting a border to Image :
    6. Aligning a Picture :
    By default an image is aligned at the left side of
    the page, but it can be aligned to center or right
    using the align attribute.
    7. Adding Image as a Link :
    An image can work as an link with a url
    embedded in it. It can be done by using the “img”
    tag inside an “a” tag.
    8. Using Image as a background :
    More beyond basic

    9. Image Maps
    The <map> tag defines an image-map. An image-map is
    an image with clickable areas.
    HTML forms

     The <form> tag in HTML is used to create form for


    user input. There are many elements which are
    used within form tag. For example: <input>,
    <textarea>, <button>, <select>, <option>,
    <optgroup>, <fieldset>, <label>.

     Syntax:
     <form> Form Content... </form>
     Attributes: There are many attributes which are
    associated with <form> tag. Some of them are
    listed below:

    input: It is used to specify the input field for


    user.
    textarea: It is used to specify for multi-line text
    input field for user.
    button: It is used to perform an operation in a
    form by the user.
    label: It is used to give label to any tag like
    button, input etc.
    FORM elements

     Button
     Checkbox
     Radio button
     Select element
     Reset
     Textarea
     etc…
    XHTML

     What Is XHTML?
    1. XHTML stands for
    EXtensible HyperText Markup Language
    2. XHTML is almost identical to HTML
    3. XHTML is stricter than HTML
    4. XHTML is HTML defined as an XML application
    5. XHTML is supported by all major browsers
     Document Structure
    1. XHTML DOCTYPE is mandatory
    2. The xml attribute in <html> is mandatory
    3. <html>, <head>, <title>, and <body> are mandatory
     XHTML Elements
    1. XHTML elements must be properly nested
    2. XHTML elements must always be closed
    3. XHTML elements must be in lowercase
     XHTML Attributes
    1. Attribute names must be in lower case
    2. Attribute values must be quoted
    3. Attribute minimization is forbidden
    How to Convert from HTML to XHTML

     Add an XHTML <!DOCTYPE> to the first line of every page


     Add an xml attribute to the html element of every page
     Change all element names to lowercase
     Close all empty elements
     Change all attribute names to lowercase
     Quote all attribute values

    Вам также может понравиться