Scribd Logo
Upload

Welcome to Scribd!

  • Computer 8 Hand Out 3rd

    Uploaded by

    Nicki Santos
    2 views4 pages
    hhhhhhhhhhhhhhhhhhhjivbdvewuobvevi

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    hhhhhhhhhhhhhhhhhhhjivbdvewuobvevi

    Copyright:

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

    Computer 8 Hand Out 3rd

    Uploaded by

    Nicki Santos
    hhhhhhhhhhhhhhhhhhhjivbdvewuobvevi

    Copyright:

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

    Computer 8 Hand Out

    AY 2022-2023
    Third Quarter

    Introduction to HTML
     HTML is the standard markup language for creating Web pages.
     HTML stands for Hyper Text Markup Language
     HTML is the standard markup language for creating Web pages
     When you code HTML in Notepad++, always start your code with <html> and end with </html>
     The body of your code should be enclosed inside the <body>. The body is the main content of your
    web design
     Make sure to indent statements that belong inside an element

    HTML Element
     HTML consists of a series of elements
     An HTML element is defined by a start tag, some content, and an end tag. End tags are indicated by a
    backslash /
     HTML element syntax:
    <starttag> content </endtag>
     HTML elements can be nested (this means that elements can contain other elements).
     The HTML document itself begins with <html> and ends with </html>.
     The visible part of the HTML document is between <body> and </body>.

    Start Tag Description End Tag


    <HTML> Where the HTML document is contained </HTML>
    <title> Defines the HTML document title that is shown on the browser’s title bar </title>
    <style> Defines the style or design for a certain element </style>
    <body> The visible or body part of the HTML document </body>
    <p> Defines a paragraph </p>
    <h1> Defines a heading bigger than <h2> </h1>
    <h2> Defines a heading bigger than <h3> </h2>
    <h3> Defines a heading bigger than <h4> </h3>
    <h4> Defines a heading bigger than <h5> </h4>
    <h5> Defines a heading bigger than <h6> </h5>
    <h6> Defines the smallest heading </h6>
    <br> Used for line break None
    <a> Defines a hyperlink </a>
    <img> Used to embed an image </img>
    <b> Boldface. Use to make the text in boldface. </b>
    <i> Italicized. Use to italicize text. </i>
    <u> Underline. Use to underline text. </u>
    <table> Defines a table </table>
    <tr> Defines a table row </tr>
    <td> Defines a data </td>
    <th> Defines a table header </th>

    Tables with HTML


     HTML tables allow web developers to arrange data into rows and columns
     A table in HTML consists of table cells inside rows and columns
     Everything between <td> and </td> are the content of the table cell
     You can have as many rows as you like in a table, just make sure that the number of cells is the same
    in each row
     There are times where a row can have less or more cells than another
     Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag
     <table> then <tr> then <td>
    or
    <table> then <tr> then <th>
    Example 1: Table with three rows containing four columns each row. The first row contains the table
    header.

    Output: The table is created but there is no visible border. Let us add some attributes to the table to make the
    border visible and to add some design to it.

    HTML Attributes
     All HTML elements can have attributes
     Attributes provide additional information about elements
     Attributes are always specified in the start tag
     The value of the attribute is enclosed in double quotation “ “
     Attributes usually come in name/value pairs like: border and bgcolor
     HTML element with attribute syntax:
    <starttag attribute> content </endtag>

    Attribute Description
    border Adds border by specified unit of measurement
    bgcolor Adds background color
    Go to https://htmlcolorcodes.com/color-picker/ to choose a color.
    Copy the hexadecimal code of your chosen color

    align Aligns a certain element either to the center, left, right or justify
    color Adds color to a font
    colspan Used in <td>, <th> to define the number of columns a cell should
    span
    font-family Defines the font to be used for an HTML element
    height Specifies the height of a certain element by specified unit of
    measurement. You can use px or %
    width Specifies the width of a certain element by specified unit of
    measurement. You can use px or %
    href Used in <img>, <video>, <audio> element to give the URL of a link
    resource
    margin Gives margin to an element by specified unit of measurement
    margin-left
    margin-right
    margin-top
    margin-bottom
    style You can change the style of an element such as font-family and font-
    size. Check the different font-family in this webpage:
    https://www.tutorialspoint.com/html5/html5_fonts.htm

    Example: Table with three rows containing four columns each row. The first row contains the table
    header. Border, color and font design are also included through the different attributes.

    Output:

    Adding Image in HTML

    Example: Table with four rows containing two columns each row. Let us insert images with description.
    Use <img src=”title.fileextension”> or <img src=”image_address”>
    Output:

    Explanation:
    align = “center” aligns the element to the center
    border = “2” gives visible border to the table
    style=”font-family:Times New Roman” designs the font to Times New Roman
    width=”50%” the width of that certain element is 50%
    height=”70%” the height of that certain element is 70%
    src=”panda.jpg” displays the panda.jpg image
    bgcolor=”F9DDD7” provides background color to the certain element in #F9DDF7 color

    You might also like