Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    emraan khan
    26 views37 pages
    learning

    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
    learning

    Copyright:

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

    HTML

    Uploaded by

    emraan khan
    learning

    Copyright:

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

    C3: Protected

    Web Development Concepts


    Targeted at: Entry Level Trainees

    Session 1: Hyper Text Markup Language
    This session gives the overview of Hyper text Markup
    Language (HTML) and its applications in web
    development.
    It includes the structure of a HTML program, the tags
    used for creating tables, list and more.
    2
    Session 01: Overview
    3
    HTML - Introduction
    Web pages are written in HTML - a simple scripting
    language.


    HTML is short for HyperText Markup Language.
    A markup language is a set of markup tag
    The tags describe document content
    HTML documents contain HTML tags and plain text
    HTML documents are also called web pages




    4
    HTML Introduction (contd.)

    HTML is a simple scripting language.

    When a browser opens an HTML file, the browser will
    look for HTML codes in the text and use them to change
    the layout, insert images, or create links to other pages.

    Since HTML documents are just text files they can be
    written in even the simplest text editor.



    HTML is composed of number of tag elements, also describes the
    attributes of the content used.

    There are two types of tags
    paired tag It has both opening and closing tag.
    unpaired tag It has only opening tag and it is also
    called as SINGULAR or STAND ALONE TAG.

    Structure of HTML Program
    <Html>
    Document Head
    Document Body
    </Html>
    5
    HTML - TAGS


    All webpages have an <html> tag at the beginning and the end,
    telling the browser where the document starts and where it ends.
    The most basic code - the code you will use for any page you make,
    is shown below:
    <html>
    <head>
    <!-- This section is for the title and technical info of the page. ->
    </head>
    <body>
    <!-- This section is for all that you want to show on the page. ->
    </body>
    </html>
    6
    HTML TAGS (contd.)


    HEAD SECTION:

    The details in the head section of the webpage does not show
    directly on the resulting page.

    The title of your web page is placed inside <title> and </title> . The
    title is showed in the top of your browser window when the page is
    loaded.

    Head section also contains meta tags. The most common use of meta
    tags is to improve the rankings in search engines.


    7
    HTML TAGS (contd.)
    The head section may contain javascript which is a scripting
    language for more complex HTML pages.

    Along with javascript the HTML pages might contain codes for
    cascading style sheets (CSS).

    CSS is a technique for optimizing the layout of websites.







    8
    HTML TAGS (contd.)
    BODY SECTION :

    When the HTML page is loaded in the browser, the content in the
    body section of the document gets loaded.





    9
    HTML TAGS (contd.)
    The code below depicts a sample HTML program.
    <html>
    <head> <title> Hello World </title>
    </head>
    <body>
    <address> 5, XXXst </address>
    </body>
    </html>

    TEXT FORMATTING TAGS:
    Following tags gives you the option to work with text.
    <P> - used for paragraph breaks.
    <br> - used for line breaks.




    10
    HTML TAGS (contd.)

    In order to emphasis a certain web page content, the
    following tags could be used.

    HEADING STYLES : It can range from <h1>.<h6>, where h1 is the
    highest level and h6 is the lowest level.
    <h1 align= left/right/center>..</h1>

    DRAWING LINES : To draw horizontal lines we use <HR>. Various
    attributes used here are as follows.
    ALIGN : Used to align the line VALUES =
    left/right/center
    SIZE : To change the size of the rule.
    WIDTH :To change the width of the line.

    Example : <HR align=left width=10 size=4>


    11
    HTML TAGS (contd.)
    TEXT STYLES :
    <b>..</b> - used for bold text
    <i>.. </i> - used to show text in italics format.
    <u>..</u> - used to underline the text.

    The other text effects available are as follows.
    <center>..</center> - text, images are centered.
    <spacer> - used to insert blank spaces in html documents.
    The attributes used here are
    Type Horizontal/Vertical.
    Size Amount of space that is left over.

    Example : <Spacer type=Horizontal size=50> Hello


    12
    HTML TAGS (contd.)

    CONTROLLING FONTSIZE AND COLOR :
    The texts font size and color are managed by the
    following attributes of the <Font>. </Font> tag. The
    attributes used here are
    FACE used to set font name
    example : Times New Roman
    SIZE used to set the font size, ranges from 1 to 7
    and default is 3.
    COLOR used to color the text.

    Example : <Font face=Arial Size=5
    Color=#008000>Hello</font>



    13
    HTML TAGS (contd.)
    GENERAL TAGS :
    Strikethrough used to strike through certain portion of text.
    Example : <Strike> The </Strike>
    Comments used as non executable statements.
    Example : <!--- PROGRAM AREA - or
    <Comment> PROGRAM AREA </Comment>
    Superscript used to express the numerical power values.
    Example : a <sup>2</sup>+b<sup>2</sup>
    Subscript :used for expressing base values.
    Example : C<sub>2</sub> H<sub>5</sub>

    14
    HTML TAGS (contd.)
    LOGICAL FORMATTING TAGS :

    <Em></Em> - Emphasizing text will be both in bold
    and italics.
    <Strong></strong> - will also display text in bold.
    <Code></Code> - will display text in small format.
    <Block Quote></Block Quote> - Proverb, poetry
    messages can be given.
    <KBD></KBD> - uses courier format font.
    <samp>..</samp> - Displays sample text and
    renders small font.
    <pre></pre> - for preformatting text.

    15
    HTML TAGS (contd.)
    ADDING GRAPHICS WITHIN HTML DOCUMENTS :
    <img>..</img> - to place the image to the documents.
    The attributes used here are
    Align = Top/Middle/Center/Bottom/Left/Right
    Border = n
    Height =n
    Hspace = n (left and right)
    Loop = n (specifies time interval)
    Vspace = n (top/bottom)
    width = n
    Alt = text (displays text for unavailable images)
    Start = Start event controls (File open, Mouse over)
    Example: <img src=c:\a1.jpeg alt = Welcome>






    16
    HTML TAGS (contd.)
    There are three types of lists. They are:
    Ordered List
    Unordered List
    Definition List

    Ordered List :
    Helps displays items in some sequence.
    The items can be included using list item tag.
    The structure is as follows
    <ol>
    <li>.</li>
    </ol>

    17
    HTML LIST
    The attributes used here are
    Type To control the numbering scheme.
    Type=1/A/a/I
    Start To alter the numbering scheme.
    Value To change the numbers in the middle.

    Un Ordered List :
    Here items will not be displayed in any order.
    The General form is as follows.
    <ul>
    <li>.</li>
    <li></li>
    </ul>


    18
    HTML LIST (contd.)
    The attribute is Type = FillRound/Square/Disc.

    DEFINITION LIST :
    It uses Definition term and Definition Description to
    define the elements in the list.
    <DT> - used to define the term element.
    <DD> - used to define the definition of term
    element.
    Example is as follows:



    19
    HTML LIST (contd.)
    <html><head>SIMPLE HTML PAGE </head>
    <body>
    <DL>
    <DT><b>Computer </b>
    <DD>Father of the Computer
    <DT><b> Hardware </b>
    <DD> Hardware of the computer
    </DL>
    </body>
    </html>

    20
    HTML LIST (contd.)
    NESTED LIST EXAMPLE
    <html>
    <body>
    <ol Type=A><li> Introduction </li>
    <li>Operating Systems </li></ol>
    <ol type=a><li>Semaphore</li><li>Deadlock </li>
    </ol>
    <ul>
    <li>Java
    <ul type=FillRound>
    <li>OOPS Concept
    <li>File Concept
    </ul></ul></body></html>

    21
    HTML LIST (contd.)
    BLINKING A TEXT
    To make the text in the HTML document blink the
    <Blink></Blink> tag is used.

    <BLINK> Hello </BLINK>

    MARQUEE is another tag which also makes a text to
    blink and scroll the text and is supported only in IE.

    <Marquee> HTML </Marquee>
    22
    HTML TEXT
    The attributes are
    ALIGN = Left/Right/Center
    BEHAVIOUR = Scroll/Alternate/Slide
    DIRECTION = Left/Right.
    BGCOLOR = Any Color
    SCROLLAMOUNT = n
    HSPACE = n
    VSPACE = n
    WIDTH = n
    HEIGHT = n
    LOOP = n
    BGSOUND can also be given.

    23
    HTML TEXT (contd.)
    It is comprised of 2 dimensional rows and columns.

    Also used to display data in columns of the web page.

    Table Rows are comprised of two types

    Header Rows - <TH>..</TH>
    Data Rows - <TD>.</TD>

    Table starts with <Table> tag.

    Table row starts with <Tr> followed by table header and table data.



    24
    HTML TABLE
    GENERAL STRUCTURE:
    Below is the general structure of the HTML table.
    <Table Align = left/Right/Center/Justify
    Background = url
    BGColor = Color , BorderColorDark = Color,
    Border = n , BorderColor= Color BorderColor Light=Color, Cellpadding = n
    (distance between data in a cell and the boundaries of the cell)
    Cellspacing = n (control spacing between adjacent
    cell)
    Colspan = n (No.of columns the cell is to occupy)
    Rowspan = n (No.of rows the cell is to occupy)
    Width = n
    VALIGN = Top/Bottom/Middle>. </Table>


    25
    HTML TABLE (contd.)
    <TR> - To create a new row in the table
    <TR>.</TR> is used.
    <TR ALIGN = Left/Right/Center
    BGCOLOR =Color
    BORDERCOLOR = Color
    BORDERCOLORDARK = Color
    BORDERCOLORLIGHT = Color
    NOWRAP>..</TR>
    <TD> - To create the cell in the table
    <TD>.</TD> is used.
    <TD ALIGN = Left/Right/Center
    BGCOLOR =Color
    BORDERCOLOR = Color
    BORDERCOLORDARK = Color
    BORDERCOLORLIGHT = Color >.</TD>


    26
    HTML TABLE (contd.)
    For table Heading we can use <CAPTION
    </CAPTION> tag.
    Example is as follows.
    <TABLE>
    <TR>
    <TH> C1 </TH>
    <TH> C2 </TH>
    <TH> C3 </TH>
    </TR>
    <TR> <TD ROWSPAN =2> X </TD>
    <TD COLSPAN =2> Y </TD> </TR>
    <TR> <TD> Z </TD>
    <TD>A </TD> </TR>
    </TABLE>


    27
    HTML TABLE (contd.)
    HTML allows linking to documents as well as images.

    Every link is blue in color and text/image is being underlined.

    Mouse cursor is placed on it, a standard arrow shaped mouse cursor
    changes to the shape of a hand.
    28
    HTML LINK
    To change the link color, we use 3 attributes in <body> tag and they
    are
    LINK changes the default color of the hyperlink.
    ALINK Changes the default color that is
    activated to whatever color is specified.
    VLINK changes the default color of the one that
    is activated which is already visited to the
    specified color.
    Hyperlinks can be of two types
    Links to external documents.
    Links to specific place within the same document.

    29
    HTML LINK (contd.)
    LINKS TO AN EXTERNAL DOCUMENT REFERENCE
    The <A href = > XXX </A> provides the link
    to external document or other web pages.

    To jump to the particular location within a new page,
    named anchors can be set.

    <A Name =Location Name> x </A>

    Examples : <A Name = Point1>x </A>
    <A href=a1.html # Point1>xxx</A>

    30
    HTML LINK (contd.)
    INTERNAL DOCUMENT REFERENCE
    Jump is required to different locations in the same
    page. Example as follows.
    <A Name=Location Name>
    <A href=#Location Name>xxx </A>

    IMAGES AS A HYPER LINK
    When a <img> tag is placed inside <A></A> tag, the
    image specified in the src become a hyper link.
    It is done using <img src = >
    <A href=a1.html><img src = >

    31
    HTML LINK (contd.)
    HTML Frames allows splitting the browser window in to various
    section. It is done using <FRAMESET> . </FRAMESET> tag.

    Various Attributes are
    Rows Divides the screen in to multiple rows. We can also
    specify the no.of pixels and express it in % and * can be used to
    indicate the remaining space.

    Cols Divides the screen in to multiple columns.
    We can also specify the no.of pixels and express it in % and *
    can be used to indicate the remaining space.


    32
    HTML FRAMES
    Example :
    <FRAMESET Rows=50%, Cols=25%></FRAMESET>
    <FRAMESET Rows=20%, 80%, *></FRAMESET>

    <FRAME> TAG PROPERTIES
    SRC =url MARGINWIDTH = n (left side)
    MARGINHEIGHT =n (top & bottom)
    NAME =name (Alphanumeric code)
    NORESIZE = Disables frame resizing
    SCROLLING
    COMPLETE SYNTAX
    <Frameset rows/cols .>
    <Frame src= name= Marginwidth = >
    </Frameset>


    33
    HTML FRAMES (contd.)
    Example :
    <HTML>
    <HEAD>
    <FRAMESET Rows=40%, 60%>
    <FRAME src=c:\a1.html>
    <FRAME src=c:\a2.html>
    </FRAMESET>
    </HEAD>
    </HTML>
    34
    HTML FRAMES (contd.)

    The following fields can be added to your forms:

    Text field
    Password field
    Hidden field
    Text area
    Check box
    Radio button
    Drop-down menu
    Submit button
    Reset button
    Image button


    35
    HTML FORM FIELDS
    Look at this HTML example for drop down menu using forms.
    <html><head><title>My Page</title></head>
    <body>
    <form name="myform"
    action="http://www.mydomain.com/myformhandler.cgi"
    method="POST">
    <div align="center">
    <select name="mydropdown">
    <option value="Milk">Fresh Milk</option>
    <option value="Cheese">Old Cheese</option>
    <option value="Bread">Hot Bread</option>
    </select>
    </div></form>
    </body></html>

    36
    HTML FORM FIELDS
    HTML TAGS: Various html tags helps to design and display the text on
    the web browser.
    HTML also supports java script or vb script to provide dynamic
    content based on user inputs.
    HTML Form are used to collect user information entered in the screen
    by the user and send it to the server for further processing.


    37
    HTML: Summary
    37

    You might also like