for overall page structure,
Nothing Special   »   [go: up one dir, main page]
for content, headings

to

, paragraphs

, and other tags for things like links, images, lists, tables, and more. HTML files use the .html or .htm file extension."> for overall page structure, for content, headings

to

, paragraphs

, and other tags for things like links, images, lists, tables, and more. HTML files use the .html or .htm file extension.">

Scribd Logo
Upload

Welcome to Scribd!

  • 16 views

    Aldwin Karlo M. Angcaya

    Uploaded by

    Aldwin Karlo Angcaya
    HTML is a markup language that defines the structure and layout of web pages using tags to tell browsers how to display content. Key HTML tags include <html> for overall page structure, <body> for content, headings <h1> to <h6>, paragraphs <p>, and other tags for things like links, images, lists, tables, and more. HTML files use the .html or .htm file extension.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Aldwin Karlo M. Angcaya

    Uploaded by

    Aldwin Karlo Angcaya
    16 views37 pages
    HTML is a markup language that defines the structure and layout of web pages using tags to tell browsers how to display content. Key HTML tags include <html> for overall page structure, <body> for content, headings <h1> to <h6>, paragraphs <p>, and other tags for things like links, images, lists, tables, and more. HTML files use the .html or .htm file extension.

    Original Description:

    Original Title

    HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    HTML is a markup language that defines the structure and layout of web pages using tags to tell browsers how to display content. Key HTML tags include <html> for overall page structure, <body> for content, headings <h1> to <h6>, paragraphs <p>, and other tags for things like links, images, lists, tables, and more. HTML files use the .html or .htm file extension.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    16 views37 pages

    Aldwin Karlo M. Angcaya

    Uploaded by

    Aldwin Karlo Angcaya
    HTML is a markup language that defines the structure and layout of web pages using tags to tell browsers how to display content. Key HTML tags include <html> for overall page structure, <body> for content, headings <h1> to <h6>, paragraphs <p>, and other tags for things like links, images, lists, tables, and more. HTML files use the .html or .htm file extension.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 37

    HTML

    ALDWIN KARLO M. ANGCAYA


    WHAT IS HTML?

    • HTML is a format that tells a computer how to display a web page. The
    documents themselves are plain text files with special "tags" or codes that a
    web browser uses to interpret and display information on your computer
    screen.
    • HTML stands for Hyper Text Markup Language
    • An HTML file is a text file containing small markup tags.
    CONT.

    • The markup tags tell the Web browser how to display the page .

    • An HTML file must have an htm or html file extension.


    EXAMPLE:
    HTM OR HTML EXTENSION?
    • When you save an HTML file, you can use either the .htm or the .html
    extension.

    • The .htm extension comes from the past when some of the commonly used
    software only allowed three letter extensions.

    • It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm


    and mypage.html are treated as different files by the browser.
    HTML TAGS
    • HTML tags are used to mark-up HTML elements.

    • HTML tags are surrounded by the two characters “<“ and “>”.

    • The surrounding characters are called angle brackets.

    • HTML tags normally come in pairs like <b> and </b>.


    CONT.

    • The first tag in a pair is the start tag, the second tag is the end tag

    • The text between the start and end tags is the element content.

    • HTML tags are not case sensitive,<b> means the same as <B>.
    LOGICAL VS. PHYSICAL TAGS
    • In HTML there are both logical tags and physical tags.

    • Logical tags are designed to describe (to the browser) the enclosed text's
    meaning.

    • An example of a logical tag is the tag. By placing text in between these tags
    you are telling the browser that the text has some greater importance. By
    default all browsers make the text appear bold when in between the and
    tags.
    CONT.
    • Physical tags on the other hand provide specific instructions on how to display
    the text they enclose.
    • Examples of physical tags include:
    • <b>: Makes the text bold.
    • <big>: Makes the text usually one size bigger than what’s around it.
    • <i>: Makes text italic.
    NESTED TAGS
    • You ,ay noticed in the example above, the <body> tag also contains other tags, like
    the <b> tab. When you enclose an element in with multiple tags, the last tag opened
    should be the first tag closed. For example:

    • <p><b><em>This is NOT the proper way to close nested tags. </p></em></b>

    • <p><b><em>This is the proper way to close nested tags. </em></b></p>

    • Note: It doesn’t matter which tag is first, but they must be closed in the proper order.
    TAG ATTRIBUTES
    • Tags can have attributes. Attributes can provide additional information about the
    HTML elements on your page.

    • The tells the browser to do something, while the attribute tells the browser how to do
    it.

    • For instance, if we add the bgcolor attribute, we can tell the browser that the
    background color of your page should be blue,

    • Like this: < body bgcolor = “blue”>.


    BASIC HTML TAGS
    • Tag Description:
    • <html> Defines an HTML document
    • <body> Defines the document’s body ‘
    • <h1> to <h6> Defines header 1 to header 6
    • <p> Defines paragraph
    • <br> Insert a single line break
    • <hr> Defines a horizontal rule
    • <!--> Defines a comment
    HEADING
    • Headings are defined with the <h1> to <h6> tags. <h1> defines the largest
    heading while <h6> defines the smallest.

    • <h1> This is a heading </h1>


    • <h2> This is a heading </h2>
    • <h3> This is a heading </h3>
    • <h4> This is a heading </h4>
    • <h5> This is a heading </h5>
    • <h6> This is a heading </h6>
    PARAGRAPHS
    • Paragraphs are defined with the <p> tag.
    • Think of a paragraph as a block of text. You can use the align attribute with a
    paragraph tag as well.
    • <p align = “left”> This is a paragraph </p>
    • <p align = “center”> this is another paragraph </p>
    • Line Breaks
    • The <br> tag is used when you want to start a new line, but don't want to
    start a new paragraph. The <br> tag forces a line break wherever you place
    it. It is similar to single spacing in a document.
    CONT.
    LOGICAL TAGS
    PHYSICAL TAGS
    HTML COLORS

    • Color Values
    • Colors are defined using a hexadecimal notation for the combination of red,
    green, and blue color values (RGB).
    • The lowest value that can be given to one light source is 0 (hex #00). The
    highest value is 255 (hex #FF).
    • This table shows the result of combining red, green, and blue:
    COLOR VALUES
    COLOR NAMES
    CONT.

    • Note: Only 16 color names are supported by the W3C HTML 4.0 standard
    (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
    silver, teal, white, and yellow). For all other colors you should use the Color
    HEX value.
    HTML LISTS
    • HTML provides a simple way to show unordered lists (bullet lists) or ordered
    lists (numbered lists).
    • Unodered Lists
    • An unordered list is a list of items marked with bullets (typically small black
    circles). An unordered list starts with the tag. Each list
    ORDERED LISTS

    • An ordered list is also a list of items. The list items are marked with numbers.
    An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
    DEFINITION LISTS

    • Definition lists consists of two parts: a term and a description. To mark up a


    definition list, you need three HTML elements; a container <dl>, a
    definition term <dt>, and a definition description <dd>.
    EXAMPLE
    HTML LINK
    • HTML uses the anchor tag to create a link to another document or web page.
    • The Anchor Tag and the Href Attribute
    • An anchor can point to any resource on the Web: an HTML page, an image, a
    sound file, a movie, etc. The syntax of creating an anchor:
    • <a href =“url”> Text to be displayed </a>
    • The tag is used to create an anchor to link from, the href attribute is used to
    tell the address of the document or page we are linking to, and the words
    between the open and close of the anchor tag will be displayed as a
    hyperlink.
    HTML IMAGES
    • The Image Tag and the Src Attribute

    • The <img> tag is empty, which means that it contains attributes only and it has no
    closing tag

    • To display an image on a page, you need to use the src attribute is the URL of the
    image you want to display on your page.

    • <img src =“graphics/chef.gif”>


    EXAMPLE
    TABLES

    • Tables are defined with the <table> tag.


    • A table is divided into rows (with the <tr> tag> , and each row is divided into
    data cells (with the <td> tag).
    • The letters td stands for tables data, which is the content of a data cell.
    • A data cell can contain text, images, lists, paragraphs, forms, horizontal rules,
    tables, etc.
    EXAMPLE
    TABLE AND THE BORDER ATTRIBUTES

    • To display a table with borders, you will use the border attribute.
    HEADING IN THE TABLE

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


    CELL PADDING AND SPACING

    • The <table> tag has two attributes known as cellspacing and cellpadding.
    • Here is a table example without these properties.
    CONT.

    • Cellspacing is the pixel width between the individual data cells in the table
    (The thickness of the lines making the table grid).
    CONT.
    • Cellpadding is the pixel space between the cell contents and the cell border.
    • The default for this property is also zero.
    • This feature is not used often, but sometimes comes in handy when you have
    your borders turned on and you want the contents to be away from the
    border a bit for easy viewing.
    • Cellpadding is invisible, even with the border property turned on.
    • Cellpadding can be handled in a style sheet
    TABLE TAGS

    You might also like