Scribd Logo
Upload

Welcome to Scribd!

  • 55 views

    Hypertext Mark Up Language: Jonalyn G. Ebron

    Uploaded by

    JOna Lyne
    HTML (Hypertext Markup Language) is used to describe the structure of web pages and allows the addition of images, tables, lists, paragraphs and other elements. It uses tags like <html>, <head>, <body>, <p>, <img> etc to define headings, paragraphs, images and other content. HTML forms are used to collect user input through elements like text fields, textareas, radio buttons, checkboxes etc. defined using tags like <form> and <input>.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd

    Hypertext Mark Up Language: Jonalyn G. Ebron

    Uploaded by

    JOna Lyne
    55 views36 pages
    HTML (Hypertext Markup Language) is used to describe the structure of web pages and allows the addition of images, tables, lists, paragraphs and other elements. It uses tags like <html>, <head>, <body>, <p>, <img> etc to define headings, paragraphs, images and other content. HTML forms are used to collect user input through elements like text fields, textareas, radio buttons, checkboxes etc. defined using tags like <form> and <input>.

    Original Title

    WebPage

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    HTML (Hypertext Markup Language) is used to describe the structure of web pages and allows the addition of images, tables, lists, paragraphs and other elements. It uses tags like <html>, <head>, <body>, <p>, <img> etc to define headings, paragraphs, images and other content. HTML forms are used to collect user input through elements like text fields, textareas, radio buttons, checkboxes etc. defined using tags like <form> and <input>.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    55 views36 pages

    Hypertext Mark Up Language: Jonalyn G. Ebron

    Uploaded by

    JOna Lyne
    HTML (Hypertext Markup Language) is used to describe the structure of web pages and allows the addition of images, tables, lists, paragraphs and other elements. It uses tags like <html>, <head>, <body>, <p>, <img> etc to define headings, paragraphs, images and other content. HTML forms are used to collect user input through elements like text fields, textareas, radio buttons, checkboxes etc. defined using tags like <form> and <input>.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    of 36

    JONALYN G.

    EBRON

    HTML

    Hypertext Mark Up Language


    Course Overview

    • With HTML you can create your own Web site.

    • This lesson teaches you everything about HTML.

    • HTML is easy to learn - You will enjoy it.

    HTML
    HTML Basic

    Hypertext Mark Up Language


    HTML Introduction

    What is HTML?

    HTML
    What is HTML?

    HTML is a language for describing web pages.

    • HTML stands for Hyper Text Markup Language


    • HTML is not a programming language, it is a
    markup language
    • A markup language is a set of markup tags

    • HTML uses mark up tags to describe web pages

    HTML
    HTML Tags

    HTML markup tags are usually called HTML


    • HTML tags are keywords surrounded by angle
    brackets like <html>
    • HTML tags normally come in pairs like <b> and
    </b>
    • The first tag in a pair is the start tag, the
    second tag is the end tag
    • Start and end tags are also called opening tags
    and closing tags

    HTML
    HTML Documents = Web Pages

    • HTML documents describe web pages


    • HTML documents contain HTML tags and plain text
    • HTML documents are also called web pages

    The purpose of a web browser (like Internet Explorer or


    Firefox) is to read HTML documents and display them as
    web pages. The browser does not display the HTML tags,
    but uses the tags to interpret the content of the page.

    HTML
    HTML Documents = Web Pages

    The purpose of a web browser


    (like Internet Explorer or Firefox)
    is to read HTML documents and
    display them as web pages. The
    browser does not display the
    HTML tags, but uses the tags to
    interpret the content of the page:

    • html> and </html> describes the web page


    • body> and </body> is the visible page content
    • <h1> and </h1> is displayed as a heading
    •<p> and </p> is displayed as a paragraph

    HTML
    HTML - Getting Started

    heading

    describes the Visible page


    web page content

    paragraph

    You need any tools to learn HTML. Editing HTML


    • HTML editor • Notepad
    • Web server • Dreamweaver
    • Web site • FrontPage

    HTML
    HTM or HTML Extension?

    When you save an HTML file, you can use


    either the .htm or the .html extension. We
    use .htm in our examples. It is a habit from the
    past, when the software only allowed three
    letters in file extensions. With new software it
    is perfectly safe to use .html.

    HTML
    HTML Headings
    HTML headings are defined with the <h1> to <h6> tags
    Tags Your result

    Font size = 7, bold text

    Font size = 6, bold text

    Font size = 5, bold

    Font size = 4, bold, italic

    Font size = 3
    Font size = 2, italics

    Default size = 3

    HTML
    HTML Paragraphs

    HTML paragraphs are defined with the <p> tag.

    paragraph

    HTML
    HTML Links
    HTML links are defined with the <a> tag.

    links

    HTML
    HTML Images
    HTML images are defined with the <img> tag.

    Image

    The name and the


    size of the image
    are provided as
    attributes.

    HTML
    HTML Elements
    HTML documents are defined by HTML elements.
    An HTML element is everything from the
    start tag to the end tag:
    Start tag * Element content End tag *
    <p> This is a paragraph </p>
    <a href="default.htm" > This is a link </a>
    <br>    </br>

    * The start tag is often called the opening tag. The end tag is often
    called the closing tag.

    HTML
    HTML Element Syntax
    •An HTML element starts with a start tag / opening tag

    •An HTML element ends with an end tag / closing tag

    •The element content is everything between the start


    and the end tag

    •Some HTML elements have empty content

    •Empty elements are closed in the start tag

    •Most HTML elements can have attributes

    HTML
    HTML Font

    <html>
    element <html>

    <body>
    <body>
    element <p>This is my first paragraph</p>

    </body>
    <p>
    element </html>

    The example above contains 3 HTML elements.

    HTML
    HTML Font Tag

    Font
    size

    Font
    tags

    Font
    face

    Font
    color

    HTML
    HTML Advance

    Hypertext Mark Up Language


    HTML Layout
    Using Tables
    • HTML tables to format the layout of an HTML page.
    • A part of this page is formatted with two columns.

    • As you can see on this page, there is a left column


    and a right column.
    • An HTML <table> is used to divide a part of this
    Web page into two columns.
    • No matter how much text you add to this page,
    it will stay inside its column borders.
    HTML
    HTML Tables
    • Tables are defined with the <table> tag.

    • It is divided into rows (<tr> tag), and each


    row is divided into data cells <td> tag)
    • <td> stands for "table data," which is the content
    of a data cell.

    • A data cell can contain text, images, lists,


    paragraphs, forms, horizontal rules, tables, etc.

    • Headings in a table are defined with the <th> tag.

    HTML
    HTML Layout
    Everywhere on the Web you will find pages that are formatted like
    newspaper pages using HTML columns.

    borders

    cellpadding

    Table
    Tags

    width

    HTML
    HTML Table

    Table border

    Headings

    Data cells

    Rows tag

    HTML
    HTML Frame
    Each HTML document is called a frame, and each frame is
    independent of the others.
    The Frameset Tag
    •The <frameset> tag defines how to divide the
    window into frames
    •Each frameset defines a set of rows or columns

    •The values of the rows/columns indicate the amount of


    screen area each row/column will occupy

    The Frame Tag


    • The <frame> tag defines what HTML document to put into
    each frame

    HTML
    HTML Frame
    With frames, you can display more than one
    Web page in the same browser window.
    Frame
    width

    Frame
    src

    Frameset
    cols

    Vertical
    HTML
    HTML Frame

    Frame
    set Row

    Frame
    Src

    Horizontal
    HTML
    HTML Scripts
    Add scripts to HTML pages to make them more dynamic
    and interactive. A script is defined with the <script> tag.

    Script
    tags

    Note that you will


    have to use the type
    attribute to specify
    the scripting
    language.

    HTML
    HTML Attributes

    HTML tags can have attributes. The special


    attributes for each tag are listed under each
    tag description. The attributes listed here are
    the core and language attributes that are
    standard for all tags (with a few exceptions):

    HTML
    HTML Attributes
    Core Attributes
    Not valid in base, head, html, meta, param, script, style,
    and title elements.

    Attribute Value Description


    class class_rule or style_rule The class of the element

    id id_name A unique id for the element

    style style_definition An inline style definition


    title tooltip_text  A text to display in a tool tip

    HTML
    HTML Attributes
    Language Attributes
    Not valid in base, br, frame, frameset, hr,
    iframe, param, and script elements.

    Attribute Value Description


    dir ltr | rtl Sets the text direction
    lang language_code Sets the language code

    HTML
    HTML Attributes
    Keyboard Attributes
    Not valid in base, br, frame, frameset, hr,
    iframe, param, and script elements.

    Attribute Value Description


    accesskey character Sets a keyboard
    shortcut to access an
    element
    tabindex number Sets the tab order of
    an element

    HTML
    HTML Form
    HTML Forms are used to select different kinds of user
    input.
    Forms
    • A form is an area that can contain form elements.

    • Form elements are elements that allow the user


    to enter information (like text fields, textarea fields,
    drop-down menus, radio buttons, checkboxes,
    etc.) in a form.

    • A form is defined with the <form>


    tag.
    HTML
    HTML Form
    Input
    •The most used form tag is the <input> tag.

    •The type of input is specified with the type attribute.

    •The most commonly used input types are explained


    below.

    HTML
    HTML Form
    Text Fields
    Text fields are used when you want the user to type letters,
    numbers, etc. in a form.

    Radio Buttons
    •The most commonly used input types are Text fields, when
    you want the user to type letters, numbers, etc. in a form.
    •The type of input is specified with the type attribute.

    Check Box
    Checkboxes are used when you want the user to select
    one or more options of a limited number of choices.

    HTML
    HTML Form
    HTML Forms are used to select different kinds of user input.

    form

    Input
    type =
    text

    Input
    type =
    submit

    HTML
    HTML Form

    Form
    action

    Input type
    = text

    Input type
    = submit

    Input type
    = reset

    HTML

    You might also like