Scribd Logo
Upload

Welcome to Scribd!

  • Implementing Web Page Development in HTML: Chapter Two

    Uploaded by

    Bik Wode
    8 views19 pages
    used for programming .

    Original Title

    chapter two

    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
    used for programming .

    Copyright:

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

    Implementing Web Page Development in HTML: Chapter Two

    Uploaded by

    Bik Wode
    used for programming .

    Copyright:

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

    Chapter Two

    Implementing web page development in


    HTML
    Introduction
    • A markup language, i.e. it’s used to markup content of web page.
    • Composed of several tags.
    • HTML Document
    – Should have an .html file name extension
    – Can be created using a simple text editor, Example Note Pad, Text pad
    • Tag - Used to specify ("mark-up") regions of HTML documents for
    the web browser to interpret. Tags look like this: <tag>
    • Element - A complete tag and not case sensitive, Names
    enclosed in < and >, having an opening <tag> and a closing
    </tag>.
    • Attribute - Used to modify the value of the HTML element.
    Elements will often have multiple attributes.
    E.g. <font face=“arial” size=“9”>Hello</font>
    HTML – Document Structure
    • An HTML document has the following basic
    structure:
    <html><head>
    <title>page title</title>
    </head>
    <body>
    </body>
    </html>
    Body Attributes
    • The body tag has many attributes and here are
    the most commonly used ones:
    – BACKGROUND="location_of_image" -
    – BGCOLOR="#hexadecimal_here" -
    – Text=”color”-used to set color for body content
    – LINK(link color)="#hexadecimal_here"
    – VLINK(visited link color)="#hexadecimal_here"
    HTML - Headings tags
    • A heading in HTML is used to define a title or
    subtitle.
    • Headings are numbered 1-6,
    – with <h1> being the largest font size and
    – <h6> being the smallest font size heading.
    Bold, Italic and More

    Bold
    • makes a text appear in bold
    • Format: <b>…</b> or <strong>…</strong>
    • E.g. <b>a text in bold</b>
    Italics
    • makes a text appear in italics
    • Format: <i>…</i> or <em>…</em>
    • E.g. <i>a text in italics</i>
    Underline
    • makes a text appear underlined
    • Format: <u>…</u>
    • E.g. <u>underlined text</u>
    Line Breaks
    • Line break tag used to inserts a new line
    • It has no ending tag.
    – Format: <br>
    Superscript, Subscript and <Hr> Tags
    Subscript
    – Create small latter below the text baseline.
    – Format: <sub>…</sub>
    Superscript
    – Create small latter above the line of text.
    – Format: <sup>…</sup>
    HTML <hr> Tag
    – The <hr> tag in html stand for horizontal rule and used to
    insert horizontal line and divided(separate) document section.
    – The <hr> tag does not require an ending tag.
    – Align, size, width, color and noshade are attributes of <hr> tag.
    Marking Paragraphs
    • The P element marks a block of text as a
    paragraph
    – the tag <P> marks the beginning of the paragraph.
    – the tag </P> marks the end of a paragraph.
    • HTML introduced the ALIGN attribute to
    control the alignment of paragraph.
    – ALIGN = "left" | "center" | "right" | "justify"
    HTML - Font
    • The <font> tag is used to add style, size, and
    color to the text on your site.
    • Use the size, color, and face attributes to
    customize your fonts.
    • The range of accepted values for font size is:
    – from 1(smallest) to 7(largest).
    – The default size of a font is 3.
    INSERTING IMAGES INTO HTML
    DOCUMENTS
    • The IMG element allows an image file to be inserted within an
    HTML document.
    • The IMG element is empty, meaning there is no closing </IMG>.
    • It has several attributes:
    – SRC="image_url"
    – ALT="alternative text"
    – ALIGN="left", "right"
    – HEIGHT="n", WIDTH="n“
    – BORDER="n"
    – HSPACE="n", VSPACE="n".
    HTML Lists
    • HTML supports several elements for making
    lists.
    • They can be divided into two types:
    – Glossary lists- denoted by <DL> elements and
    – Regular lists- denoted by <UL>, <OL>, <MENU>
    and <DIR>
    • Lists can be nested. Thus you can have a
    regular list within a regular list, a regular list
    within a glossary list, and so on.
    Glossary Lists
    • Make definition lists as seen in dictionaries using the
    <dl> tag.
    • This list type, also known as a definition list, is used to
    present a list of items along with descriptive
    paragraphs.
    • Useful for presenting a named list of items and their
    meanings.
    • The items within the list are introduced by the two
    elements:
    – DL Element:
    • <DT> -- The `Term' (a single line)
    • <DD> -- The `Definition' (may be multiple lines)
    Example of DL Lists
    HTML Code:
    <dl>
    <dt><b>Fromage</b></dt>
    <dd>French word for cheese.</dd>
    <dt><b>Voiture</b></dt>
    <dd>French word for car.</dd>
    </d/>
    Definition list out put of above code:
    • Fromage
         French word for cheese.
    Voiture
         French word for car.
    Regular Lists
    • A regular list is a sequence of paragraphs, each
    of which may be preceded by a special mark,
    sequence number or later.
    • There are 2 different types of regular lists such
    as :
    – <ol> tag starts an ordered list(numbers), and
    – <ul> for unordered lists(bullets).
    HTML Ordered Lists
    • Use the <ol> tag to begin an ordered list.
    • Place the <li> (list item) tag between your
    opening <ol> and closing </ol> tags to create
    list items.
    • OL Element contain START and TYPEAttributes:
    These attributes control the numbering of
    ordered lists.
    Con’t…
    • HTML Code:
    <h4 align="center">Goals</h4>
    <ol><li>Find a Job</li>
    <li>Get Money</li>
    <li>Move Out</li>
    </ol>
    Numbered list out put of above code:
    Goals
    1.Find a Job
    2.Get Money
    3. Move Out
    HTML Unordered Lists
    • Create a bulleted list with the <ul> tag.
    • The bullet itself comes in three flavors:
    squares, discs, and circles.
    • The default bullet displayed by most web
    browsers is the traditional full disc.
    • UL Element contain TYPE Attribute
    Con’t…
    HTML Code:
    <h4 align="center">Shopping List</h4>
    <ul>
    <li>Milk</li>
    <li>Toilet Paper</li>
    <li>Cereal</li>
    <li>Bread</li></ul>
    Unordered Lists output of above code:
    Shopping List
    • Milk
    • Toilet Paper
    • Cereal
    • Bread

    You might also like