Scribd Logo
Upload

Welcome to Scribd!

  • 22 views

    Front End

    Uploaded by

    Amulya Murarisetty
    Introduction to front end

    Copyright:

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

    You might also like

    Front End

    Uploaded by

    Amulya Murarisetty
    22 views29 pages
    Introduction to front end

    Original Title

    Front end

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Introduction to front end

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    22 views29 pages

    Front End

    Uploaded by

    Amulya Murarisetty
    Introduction to front end

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 29

    HTML FUNDAMENTALS

    HTML ELEMENTS
    HTML elements are categorized in to the following
    types:
    – Root
    – Metadata
    – Section
    – Heading
    – Flow
    – Phrasing
    – Embedded
    – Interactive
    Root elements
    • Root elements represents the main or tarring
    elements that should be present in all HTML
    documents.
    • HTML element should be the first element after the
    <!DOCTYPE HTML> and with in which other HTML
    elements are specified.
    METADATA ELEMENTS
    • Used to set the presentation or behavior of the
    remaining content of the document
    • Can also be used to set a relationship of a document
    with other documents
    • Following are the metadata elements:
    – Title
    – Base
    – Link
    – Script
    – Style
    • Title
    – Contains the title of HTML document
    – Appears in the title bar of the web browser
    – Must present inside head element
    • Base
    – Used to specify a default URL and target for all the links in an HTML
    document.
    – Must present in head element
    – Should be used as the first element in the head element
    Attributes:
    Href: specifies a url in a HTML document
    Target: specifies the location where the links of an HTML document to
    open
    Values that can be assigned to target attribute: _blank,_top
    Usage:
    <head>
    <base href=“url” target=“value”/>
    </head>
    • Link
    – Used to link an HTML document to other HTML
    documents.
    – Also specifies the relationship between two different
    HTML documents.
    Attributes:
    Href: specifies target url which you wish to navigate to after
    clicking a link.
    Rel: specifies the relationship between the HTML document and
    the target url or another HTML document. the value that can be
    commonly assigned to rel is style sheet.
    Type: the mime-type, text/javascript or text/css
    Usage:
    <head>
    <link href=“filename.css” rel=“stylesheet”/>
    </head>
    • Script
    – Used to declare a script such as java script, with in an
    HTML document.
    – Contains scripting elements
    Attributes:
    Src: specifies the url of a file that contains the script.
    Usage:
    <head>
    <script type=“text/javascript:>
    script code here
    </script>
    </head>
    • style
    – Used to declare the style sheets with in the HTML
    document
    – Specifies how the HTML elements are rendered in a
    browser.
    Attributes
    Type: specifies the type of content such as simple text or style sheet
    generally type=“text/css”
    Usage:
    <head>
    <style type=“text/css”>
    style code here
    </style>
    </head>
    Section elements
    • Body
    • Section
    • Nav
    • Article
    • Aside
    • Header
    • Footer
    • Address
    • Body
    – Contains the main content of the document.
    – Placed after the closing tag of the head element.
    Usage:
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    Content of the HTML document
    </BODY>
    </HTML>
    • Section element:
    – Represent the generic section of an HTML document or
    application.
    – Groups the related content of HTML document.
    – Contain header and footer.
    Usage:
    <SECTION>
    <H1> HTML 5 </H1>
    <p> example of the SECTION element </p>
    </SECTION>
    • Nav element:
    – Newly introduced in HTML 5.
    – Navigate from one HTML page to another.
    – Displaces a group of links on an HTML document.
    Usage:
    <NAV>
    <H1> Navigation </H1>
    <UL>
    <LI> <A href= “articles.Html”> Articles</A> </LI>
    <LI> <A href= “today.Html”> Today’s to do list </A> </LI>
    </UL>
    </NAV>
    • Article Element:
    – Newly introduced to HTML 5.
    – contains information about an HTML page.
    Such as title and date of it’s creation.
    – Display the information in this element in various formats
    Such as news article, a blog post, user’s comment
    sections.
    Usage:
    <ARTICLE>
    <HEADER>
    Some heading content
    </HEADER>
    <P> Some article content </P>
    </ARTICLE>
    • Aside Element:
    – Create a section used to display information about the
    content of other elements.
    Such as time and date, current news and weather report.
    Usage:
    <BODY>
    <HEADER>
    <H1> Article Heading </H1>
    <P> Article content </P>
    </HEADER>
    <Aside>
    Enter some content related to the article.
    </Aside>
    </BODY>
    • Header Element:
    – Newly introduced to HTML 5.
    – Provide the introductory content of an HTML page.
    – Header elements contain headings ,paragraphs ,links and other content.
    Usage:
    <HEADER>
    <H1> Heading level 1 </H1>
    <A href= “url”> Section element </A>
    <NAV>
    <UL>
    <LI> <A href = “articles.html”> Articles</A>
    <LI> <A href = “discussions.html”> discussions</A>
    <LI> <A href = “download.html”> download</A>
    </UL>
    </NAV>
    <HEADER>
    • Footer Element:
    – Represents the footer.
    – Contains various types of information such as links and
    copyright data related to the document or a section of
    the document.
    Usage:
    <FOOTER>
    <UL>
    <LI> HOME </LI>
    <LI> LINKS </LI>
    <LI> ABOUT </LI>
    </UL>
    </FOOTER>
    • Address Element:
    – Normally defined at the header or footer of the HTML page.
    – Display the content information for a document or part of
    document.
    – Such content information may include.
    Name’s of the document’s owner.
    Maintainer’s email address for feedback.
    Postal address and phone numbers.
    Content of this element appears in italics of the web- browser.
    Usage:
    <ADDRESS>
    <A href = “Andrson.html”> Mathew Andrson </A>
    <A href = “Dave.html”> Matt dave </A>
    Contacts persons for the <A href =“Activity.html”>W3schools
    </A>
    </ADDRESS>
    HEADING ELEMENTS
    • Used to provide different heading levels in HTML
    documents.
    • Used to create head lines of a text
    • Defined as < Hn >, where n ranges from 1 to 6.
    • All the heading elements can be grouped with the
    help of Hgroup element.
    FLOW ELEMENTS
    • Used in the body of the HTML document.
    • Contains almost all the elements of HTML that are
    used to display different type of content such as
    plain text, links, images, audio and video in the
    HTML document.
    • List of Flow elements

    A ABBR ADDRESS ARTICLE ASIDE AUDIO B


    BR BUTTON CANVAS DIV EM FIGURE FIGCAPTION
    FOOTER FORM H1 H2 H3 H4 H5 H6 HEADER HGROUP
    HR I IFRAME IMG INPUT LABEL NAV OL P PRE SCRIPT
    SECTION SELECT SMALL SPAN STRONG STYLE SUB
    SUP SVG TABLE TEXTAREA UL VIDEO
    PHRASING ELEMENTS
    • used to represent the text of the HTML document.

    • Used to markup the HTML document text with in


    the paragraphs of the document.
    List of Phrasing Elements:
    A SMALL
    ABBRSPAN
    AUDIO STRONG
    B SUB
    BRSUP
    BUTTON TEXTAREA
    CANVASVIDEO ETC.
    EM
    I
    IFRAME
    IMG
    LABEL
    EMBEDDED ELEMENTS
    • used to import content from other sources in to the
    HTML document.
    List of Embedded elements:
    AUDIO CANVAS
    EMBED IFRAME IMG VIDEO etc.
    INTERACTIVE ELEMENTS
    • intended for user interaction
    List of Interactive elements:
    A
    AUDIO
    BUTTON
    DETAILS
    EMBED
    IFRAME IMG LABEL TEXTAREA VIDEO etc.
    WORKING WITH TEXT
    Physical style
    • B, I, SMALL, Sub, Sup
    Logical Style
    • ABBR, CODE, SAMPL, KDB, EM, STRONG, Q,
    BLOCKQUOTE, INS, DEL, VAR, BDO
    WORKING WITH TEXT attributes
    • Class- Indicates the class name of an element
    • Dir- indicates the direction of text such as, left-to-
    right or right-to-left
    • Id- indicates an unique id of an element
    • Lang-indicates language code for the content in an
    element
    • Style- indicate the inline style for an element
    • Title- specifies a title for an element
    ORGANIZING TEXT IN HTML

    • Breaks / Wordbreaks
    • Pre tag- preformatted text
    • Div element
    • Span element
    • Table
    – Tr, th, td tags and border, Rowspan, colspan attributes
    • Lists
    – Unordered
    – Ordered
    – Description lists
    – Nested lists
    WORKING WITH LINKS AND URLS
    • A – anchor tag
    – Href
    – target attributes
    – Target attribute values
    _blank Opens the linked document in a new window or tab
    _self Opens the linked document in the same frame 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
    Framename Opens the linked document in a named frame

    – Id attribute:
    – Linking to a mail system:
    CREATING TABLES
    • Col- this is used to define properties of each column
    separately.
    • Colgroup-applying style to group of columns
    • Tbody- it is used to group the rows of a table and is
    use in conjunction with thead and tfoot elements.
    • Thead-used to define the header for the table.
    • Tfoot- used to define the footer for the table.
    • Tr-defines row of a table.
    • Td-defines cell of a table.
    • Th-defines column of a table.

    You might also like