Scribd Logo
Upload

Welcome to Scribd!

  • Introduction To HTML 2

    Uploaded by

    Lawrence Foster
    4 views34 pages
    The document provides an introduction to HTML by defining HTML, listing common text editors and web browsers, and explaining various HTML elements and tags. It describes important elements like headings, paragraphs, lists, tables, forms, and how to format text. It also covers attributes, nesting elements, and how to add images, videos, and hyperlinks to HTML documents.

    Original Description:

    Original Title

    INTRODUCTION TO HTML 2

    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
    The document provides an introduction to HTML by defining HTML, listing common text editors and web browsers, and explaining various HTML elements and tags. It describes important elements like headings, paragraphs, lists, tables, forms, and how to format text. It also covers attributes, nesting elements, and how to add images, videos, and hyperlinks to HTML documents.

    Copyright:

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

    Introduction To HTML 2

    Uploaded by

    Lawrence Foster
    The document provides an introduction to HTML by defining HTML, listing common text editors and web browsers, and explaining various HTML elements and tags. It describes important elements like headings, paragraphs, lists, tables, forms, and how to format text. It also covers attributes, nesting elements, and how to add images, videos, and hyperlinks to HTML documents.

    Copyright:

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

    INTRODUCTION TO HTML

    DEFINTIONS OF HTML
    HTML stands for Hyper Text Markup
    Language
     HTML is the standard markup language for
    creating Web pages
     HTML describes the structure of a Web
    page
     HTML consists of a series of elements
    TEXT EDITORS

    Notepad

    TextEdit (Mac OS)


    Note++

    Web Matrix
    TextWrangler
    WEB BROWSERS

    Opera
    Explorer
    Firefox
    Netscape
    Chrome
    LAUNCHING TEXT EDITORS

    1.Click
    in the Search box on the
    Taskbar.
    2.Type “Notepad”
    3.Click on “Notepad”
    HTML ELEMENTS AND TAGS
    What is an HTML Element?
    An HTML element is a statement that involves a start tag,
    some content, and an end tag:
    <h1> content</h1>
    The HTML element is everything from the start tag to the
    end tag:
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    HTML TAG
    A tag is always enclosed in angle brackets (<>) such as
    <html>. It normally come in pairs like <head>…</head>.
    <html> is called Starting or Opening tag.
    </html> is also called Closing or Ending tag.
    SYNTAX
    <!doctype html>
    <head><title>MGSHS</title></head>
    <body>
    </body>
    </html>
    SYNTAX OF HTML
     The<!DOCTYPE html> element is the root element of an HTML
    page which defines that this document is an HTML5 document
     The<head> element contains meta information about the HTML
    page or shows the header section of the webpage.
     The<title> element specifies a caption for the HTML page in the
    browser's title bar. It always found inside the head tags
    <head><title>……</title></head>.
     The<body> element defines the document's body, and is a
    container for all the visible contents, such as headings,
    paragraphs, images, hyperlinks, tables, lists, etc.
     The <h1> element defines a large heading
    TYPES OF HTML TAGS
    CONTAINER ELEMENT
    Container element has start tag and end tag. Examples
    <head>…</head>; <title>…</title>; <body>……</body>;
    <b>…</b>; <p>…</p> etc.

    EMPTY ELEMENT
    Some HTML elements do not have an end tag with slash
    and others also do not have contents. Examples are <br>…
    <br>; <img>; <video>; <li> etc.
    NESTED HTML ELEMENTS
    HTML elements can be nested (this means that elements
    can contain other elements).
    All HTML documents consist of nested HTML elements.
    The following example contains four HTML elements
    (<html>, <body>, <h1> and <p>):
    <!doctype html>
    <head><title>MGSHS</title></head>
    <body>
    <h1>Welcome to MGSHS</h1>
    <p>Students</p>
    </body>
    HTML ATTRIBUTES

    All HTML elements can have attributes.


    Attributes provide additional information
    about elements.
    Attributes are always specified in the start
    tag.
    Attributes usually come in name or value
    pairs like: name=“value”
    HEADING TAG
    HEADING TAG is used to give a heading of the contents on the webpage. There
    are six (6) headings that can be used. The higher the heading number, the
    smaller the font size and smaller the heading number the bigger the font size.
    <h1> …… </h1>
    <h2> …… </h2>
    <h3> …… </h3>
    <h4> …… </h4>
    <h5> …… </h5>
    <h6> …… </h6>
    FORMATTING TAGS
    FORMATTING TAGS are used to change the appearance of the texts. Thus to
    apply formatting features such as bold, italics, underline, paragraph etc to the texts
    on the webpage.
    <b> …… </b> bolds a text.
    <i> …… </i> italizes a fonts.
    <u> …… </u> underlines fonts
    <p>……..</p> creates paragraph
    <hr>…….</hr> creates horizontal line
    <br>…….</br> puts a text on the new line
    <q>……..</q> puts texts into quotation marks.
    <div>……</div> puts each text on new line.
    FONT TAG

    FONT TAG is used for formatting fonts


    or characters.
    <font size=“5” color=“Red”
    face=“Algerian”</font>
    IMAGE TAG
    IMAGE TAG is used for inserting image or
    picture onto the webpage.
    <img src=“location of the image/filename
    with file extension” width=“200”>

    ALT attribute is activated when an image


    fails to load
    VIDEO TAG
    VIDEO TAG is used for inserting video onto the webpage.
    Video attributes include controls, poster, loop, autoplay,
    preload, muted, width and height etc.
    CONTROLS attribute allows the browser to show
    playback controllers or buttons such as play, pause,
    volume, seek etc.
    <video controls src="C:\Users\USER\Videos\MUSIC\
    GOSPEL\Diana Asamoah - Hymnn(Pentecost Soree
    Nwom) - YouTube.mp4">
    HYPERLINK TAG
    HYPERLINK TAG is used to link a hypertext
    document to other within the same or different
    webpage. It referred to as an anchor tag.
    <a href=http://www.mgshs.edu.gh>mgshs</a>
    <a>…..</a> tags used to identify the image or text
    that will serve as hyperlink.
    href (hypertext reference) is used to specify the
    address (URL) of the document or file.
    TABLE TAG
    TABLE TAG is used for inserting a table onto the
    webpage. It has other attributes such TH (Table
    Header); TR(Table Row); TD (Table Data)
    COLSPAN is used for merging columns in a row of
    HTML table. It used with TH in TR.
    ROWSPAN is used for merging rows of HTML
    table. It is used with TD.
    CAPTION is used for giving a heading of a HTML
    table.
    <html>
    <head><title>GOOD BYE</title></head>
    <body>
    <table border>
    <caption>VINCENT BENNING</caption>
    <th colspan=2>Food</th>
    <tr>
    <td>Kenkey</td>
    <td>Rice</td>
    </tr>>
    </table>
    </body>
    </html>
    LIST TAG

    LIST TAGS are used to organize your content.


    They are used to group data logically.

    <li>
    ORDERED LIST TAGS
    ORDEREED LIST TAGS are used to
    group data in systematic order by the use
    of numbers, roman numerals or letters. It
    has other attributes such upper roman,
    lower roman, upper case, lower case.
    ATTRIBUTE TAG

    Lower case <Li type=a>


    Upper case <Li type=A>
    Lower Roman <Li type=i>
    Upper Roman <Li type=I>
    OREDERED LIST TAGS

    List tags are always within the ordered list tags

    <ol li type=a>
    <li>Vincent
    <li>Benning
    <li>John
    <li>Jonathan
    </ol>
    UNODERED LIST TAGS
    UNORDERED LIST TAGS are used to group items
    which do not follow systematic order or sequential
    order by the use of bullets.
    List tags are always within the Unordered list tags
    <ul>
    <li>Alice
    <li>Vida
    <li>Sara
    </ul>
    DEFINITION LIST TAGS
    DEFINITION LIST TAGS are used to generate a list of items and
    their definitions. Definition list has two attributes <dt> and <dd>.
    <dt> tag is used to specify the definition term whiles <dd> tag is
    used specify the definition itself (defining the term).
    <dt> and <dd> tags are always within the Definition list tags
    <dl>
    <dt>Alice
    <dd>Alice is a girl
    <dt>Vincent
    <dd>Vincent is a boy
    </dl>
    CREATING FORMS IN HTML
    HTML form is used to collect data from the site
    user. The user input is most often sent to a
    server for processing.
    The <form> Element
    The HTML <form>………</form> Element is
    used to create form for user input. It is a
    container for different types of input elements
    such as: text, checkbox, radio, submit, button
    etc.
    Type Description

    <input type="text"> Displays a single-line text input field

    Displays a radio button (for selecting one of


    <input type="radio">
    many choices)

    Displays a checkbox (for selecting zero or


    <input type="checkbox">
    more of many choices)

    Displays a submit button (for submitting the


    <input type="submit">
    form)

    <input type="button"> Displays a clickable button


    THE ACTION ATTRIBUTE
    The action attribute defines the action to be performed when the form is
    submitted.
    Usually, the form data is sent to a file on the server when the user clicks on the
    submit button.
    In the example below, the form data is sent to a file called "action_page.php". This
    file contains a server-side script that handles the form data:
    Example
    On submit, send form data to "action_page.php":
    <form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
    </form>
    THE LABEL ELEMENT
    The <label> tag is used to define a label for
    many form elements. It defines the data type to
    be inputted by the user.
    Syntax
    <label for=“firstname”>First Name:</label>
    <label for=“lastname”>Last Name:</label>
    <label for=“email”>Email:</label>
    <label for=“hometown”>Home label>
    INPUT ELEMENT
    The <input> tag is used to specify the type of data to be collected
    from the user. The <input type includes text, radio, checkbox,
    submit, button, combobox etc.
    <input type=“text” id=“firstname”>
    <input type=“radio” id=“name=“sex” value=“male>Male
    <input type=“checkbox” name=“Business value=“on”>Business

    <input type=“submit” value=“Send”>


    <input type=“button” value=“Cancel”>
    <input type=“reset”>
    TEXT ELEMENT

    The <input type=“Text”> attribute is used to let the


    user input text data such letters and numbers.
    <form action="/action_page.php">
    <input type="text" id="firstname"><br>
    </form>
    RADIO ELEMENT

    Radio Buttons
    The <input type="radio"> defines a radio button.
    Radio buttons let a user select ONE of a limited number of choices.

    <form>
    <input type="radio" name=“Sex" value=“Female">Female<br>
    </form>
    CHECKBOX ELEMENT
    The <input type="checkbox"> defines a checkbox.
    Checkboxes let a user select ZERO or MORE
    options of a limited number of choices.
    Example
    A form with checkboxes:
    <form>
    <input type="checkbox" name=“Elective Maths"
    value=“on">Maths
    <input type="checkbox" name=" Elective ICT "
    value=“on">
    </form>
    THE SUBMIT BUTTON

    The <input type="submit"> defines a button for submitting the form


    data to a form-handler.
    The form-handler is typically a file on the server with a script for
    processing input data.
    The form-handler is specified in the form's action attribute.
    Example
    A form with a submit button:
    <form action="/action_page.php">
    <input type="submit" value="Submit">
    </form>
    THE NAME ATTRIBUTE FOR <INPUT>
    Notice that each input field must have a name attribute to be
    submitted.
    If the name attribute is omitted, the value of the input field
    will not be sent at all.
    Example
    This example will not submit the value of the "First name"
    input field:
    <form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" value="John"><br><br>
    <input type="submit" value="Submit">
    </form>

    You might also like