Scribd Logo
Upload

Welcome to Scribd!

  • HTML Basic

    Uploaded by

    Lakshya Pal
    2 views32 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views32 pages

    HTML Basic

    Uploaded by

    Lakshya Pal

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 32

    HTML

    [Hyper Text Markup Language]

    Dr. Archana B Saxena, Professor,


    Department of Information Technology,
    Archanab.saxena@jimsindai.org,
    archanabsaxena@gmail.com
    What is HTML???
     Hypertext markup language
     It is not a programming language
     It is a markup language and uses tags.
     It is an interpreted language
     Browsers are used to view the HTML document.
     Examples: IE , Netscape navigator
     Tags are not case sensitive.
     Editors are used to create a webpage.
     Editors:, Visual studio code, Notepad,wordpad,Visual Interdev, Front
    page,
     All HTML files are plain ASCII text file with .htm or .html extension
     Every tag has opening and closing brackets
     There are two types of tags:
     Empty Tag:
    Tags that do not require end tag
    Example:<br>, <marquee>
     Container Tag
     Tags that has starting and ending tags
     Ex: <body> </body>
     Container tags has attributes
    Installation of Visual studio code
     Download and install visual studio code
     https://code.visualstudio.com/download
     Open visual studio code and create new webpage
     Extension required to open html page in browser
     Go to extensions
     Type “Open in browser”
     Install the extension
     Select the page , right click, and select “open in browser/
    open in default browser”
    HTML 5
     Container Tag:
    These tags contain both opening and end tag.
    Example:
    <html>…………</html>
    <head> ………</head>
    DOM (Document Object Model)
    DOM
    Parts Of HTML Document
    An HTML document has two distinct parts: a head, a body
    Head:
     This a header portion. We can use title, script and meta data tags in this
    portion.
    Body
     : This is the place where we can enter text, table ,graphics and other
    work.
    <html>
    <head>
    <title>
    Welcome to JIMS
    </title>
    </head>
    <body>
    We are doing HTML. It is very interesting.
    tags are not case sensitive. Browser interpret the
    tags.

    </body>
    </html>
    Various HTML Tags
    Heading Tags
     <h1> </h1> to <h6> </h6>
     <hr> : Horizontal Row
     <center> </center> : Centralized the Text
    Formating Tags
    <br> : Line Break
    <p> </p> : Paragraph
    <b> </b> : To Make Contents Bold
    Formatting Tags
     <big> </big> :To specify big size & Bold
     <small> </small>: To Specify small size
     <Font size: color: face:> </font>: To specify Size, color &
    font face of text
     <pre> </pre>: For Predefine format of text same as in
    code.
     <em> </em>: To emphasis a text same as Italic
     <strong> </strong>: Strong Emphasis bold text
     <blockquote> </blockquote>:To quote text different from
    rest of the document.
     <i> </i> : To make contents Italic
     <u> </u> : To underline the contents
     <Basefont color: size: face: > </basefont>:Is used to set
    standard face, color & size for text of the document.Unless
    they are overridden by the another font or basefont
    element.
    Image
     <img>:Tag used to display image
    Attributes are : src, align, alt, border, height, width
    Src :Points to the URL of the graphic file to be
    displayed.
    Align : alignment of the image.
    Values:top,bottom,left,right,center
    Border: border thickness in pixels.
    Alt : alternative text for the users who use text based
    browsers.
    Hspace : horizontal white space around the image
    Vspace : Vertical white space around the image
    Hyperlinks

     Links are used to link with different pages with the


    current web page.
     <a> </a> is used to link with the web pages
    Attributes:
    href: Address of the webpage that need to be
    adressed.
    Name: Used to create lables in a document. It is possible to
    link different parts of same document.
    Marquee Tag

     <marquee> </marquee>: To scroll text


    horizontally on a web page.
    Attributes:
    Align: aligning the text in marquee. Values:
    top,bottom,middle
    Behavior: behavior of text, how text scrolls.
    Values: slide, alternate, scroll.
    Bgcolor: background color of the marquee.
    Direction: Specifies the direction in which
    the text will scroll . Values: left, right
     Height : height of the marquee.
     width: Width of the marquee
     Hspace: left & right margin outside the
    marquee.
     Loop: No. of times marquee will loop when
    activated. -1 indicates infinite.
     Scrollamount: The number of pixels move
    between each draw.
     Scrolldelay: No of milliseconds between each
    sucessive draw of the marquee text.
     Vspace: top & bottom margin outside the
    marquee.
    Listing

    Ordered List
    <ol> <li> </li></ol>: To create an ordered list.
    Example:1,2,3…… a,b,c….I,II, III
    Attributes:
    Type: type of listing values(a,A,1,i,I)
    Start: Initial value for the list.
    Unordered List
    <ul> <li> </li></ul>
     Menu List
    Menu list is same as unordered list the difference
    lies in the fact that this list is used for HTML
    identification, means <a > tag can be used with
    this listing.
    <menu>
    <li> </li>
    </menu>
    Directory List
    This tag is intented to display items like file,
    directories in a row.
    <dir> <li> </li></dir>
     Defination List: This list item can be used as dictionary.
     <dl>
     <dt>
     <dd>
     <dt>
     <dd>
     <dl>
    Table
     Table tag is used to create table in HTML
    document.
    <table> </table>
    Attributes:
    Border: size of the border around the table.
    Cellspacing: value in pixels, its space between
    cells in table.
    Cellpadding: value in pixels , its space between
    celldata & cellwall.
    Width: Width of the table
     Height: Height of the table.
     align: Horizontal Positioning of table in respect
    of page, values: left, right , center
     valign:vertical positioning of the table in
    respect of page. Value: top, bottom
     Bgcolor: background color of table.
     Bordercolor: bordercolor of table.
     Bordercolorlight: used in three dimesion table.
    color in top & left
    Bordercolordark: used in three dimesion table.
    Color in bottom & right
    Background: to display image as background of
    table.
     <caption> </caption>: specifies caption of table,
    appears inside the table but outside rows or cells.
     <th> </th>
     <tr> </tr>
    Attributes:
    Align:
    Valign:
    Bgcolor:
    Bordercolor:
    Bordercolorlight:
    Bordercolordark:
     <td> </td>
    Attributes:
    Align:
    Valign:
    Width:
    Height:
    Colspan:No. of columns cell can span
    Rowspan:No of rows cell can span
    Bgcolor:
    MailTo Tag

    To open outlook express from link use


    <a href=“mailto:archana@jimsindia.org”>

    To Connect with any other site:


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

     The basic structure of the FRAME document resembles


    the HTML , except that the <body> Container is
    replaced by a FRAMESET container that describe the
    sub-HTML documents, or frames, that make up the
    page.
    <html>
    <head><title></title></head>
    <frameset rows= cols=>
    </frameset>
    Rows: distribution of rows on page
    Cols: distributionof cols on page
    <frame src=“” name=“” marginwidth=“” marginheight=“” scrolling=yes/no
    noresize frameborder= “” framespacinfvalue=“”>
    </frame>
    Src=the SRC sttribute takes as its value the URL of the document to be
    displayed in the frame. Without this attribute SRC frames are displayed as
    a blank space, the size of the frame can be seen.
     Name: the name attribute is used to assign a
    name to a frame so that it can be targated by
    links in other documents.
     Marginwidth:it is used to contro the margins for
    the frame.
     Marginheight : same as marginheight but it
    controls upper & lower margins.
     Scrolling: this sttribute decides frames should
    have scroll bar or not. value:yes/no/auto
     Noresize: this attribute has no value except
    that it informs that the frame is not resizeable
    by the user.
     Frameborder: this attribute allows control of
    the frame border display.
     Framespacing: This attribute allows the extra
    space around the frame.
    Forms

     Forma are an effective means of


    making web pages user friendly. Forms
    are used in HTML for getting inputs
    from the user. Before the introduction
    of forms, there were no user
    interactions possible on the web page.
    <form > </form>
    Attributes:
    Action: this is a URL, specifying the
    location to which the contents of the
    form are submitted to elicit a
    response. If this attribute is missing,
    then the URL of the document itself is
    assumed.
     Enctype: this specifies the format of the submitted data, in case this
    attribute is missing protocol does impose the format itself.
     Method: this select the format in which data is transferred to the server.
    It takes two valus:get/Post

    Various Form Elements


    TextBox: <input type=text name=“” value=“”>
    Password:<input type=password name=“” value=“”>
     Checkbox:<input type=checkbox name=“”
    value=“” checked>
     Radio:<input type=radio name=“”value=“”
    checked >
     Textarea: <textarea rows=“ cols”” name=“”
    value=“”> </textarea>
     Button: <input type=button name=“” value=“”>
     Submit: <input type=submit value=“” name=“”>
     Reset: <input type=reset value=“” name=“”>
     Hidden:<input type=hidden name=“” value=“”>
     <select name=“” multiple>
     <option value=“” selected> </option>

     </select>
     Style Tag
     The <style> tag in HTML helps us to modify our
    text, viewed in the page. This modification
    includes changing font size, font family, font color
    etc. Not only the texts but also we can change the
    style of a body ar part of a page. Now let’s look at
    various attributes of style and what else the tag
    supports.
     Syntax

    You might also like