Scribd Logo
Upload

Welcome to Scribd!

  • 23 views

    HTML

    Uploaded by

    Judel

    Copyright:

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

    HTML

    Uploaded by

    Judel
    23 views47 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    23 views47 pages

    HTML

    Uploaded by

    Judel

    Copyright:

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

    What is 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
    HTML elements tell the browser how to display the content
    HTML elements label pieces of content such as "this is a
    heading", "this is a paragraph", "this is a link", etc.
    A Simple HTML Document

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>My First Heading</h1>


    <p>My first paragraph.</p>

    </body>
    </html>
    Example Explained
    The <!DOCTYPE html> declaration defines that this document is an
    HTML5 document
    The <html> element is the root element of an HTML page
    The <head> element contains meta information about the HTML page
    The <title> element specifies a title for the HTML page (which is
    shown in the browser's title bar or in the page's tab)
    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
    The <p> element defines a paragraph
    What is an HTML Element?
    An HTML element is defined by a start tag,
    some content, and an end tag:

    <tagname> Content goes here... </tagname>

    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 Reference
    The HTML element is everything from the start tag to the end
    tag:

    <tagname>Content goes here...</tagname>

    Examples of some HTML elements:

    <h1>My First Heading</h1>


    <p>My first paragraph.</p>
    Web Browsers

    The purpose of a web browser (Chrome, Edge,


    Firefox, Safari) is to read HTML documents and
    display them correctly.

    A browser does not display the HTML tags, but


    uses them to determine how to display the
    document:
    HTML Page Structure
    Below is a visualization of an HTML page structure:
    Note: The content inside the <body> section will
    be displayed in a browser. The content inside the
    <title> element will be shown in the browser's
    title bar or in the page's tab.
    EDITORS
    Learn HTML Using Notepad or TextEdit

    - Web pages can be created and modified by using professional


    HTML editors.

    - However, for learning HTML we recommend a simple text editor


    like Notepad (PC) or TextEdit (Mac).

    - We believe that using a simple text editor is a good way to learn


    HTML.

    - Follow the steps below to create your first web page with
    Notepad or TextEdit.
    Step 1: Open Notepad (PC)

    Windows 8 or later:

    Open the Start Screen (the window symbol at the


    bottom left on your screen). Type Notepad.

    Windows 7 or earlier:

    Open Start > Programs > Accessories > Notepad


    Step 2: Write Some HTML

    Write or copy the following HTML code into Notepad:

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>
    Step 3: Save the HTML Page
    Save the file on your computer. Select File > Save as in the Notepad
    menu.

    Name the file "index.htm" and set the encoding to UTF-8 (which is the
    preferred encoding for HTML files).
    Step 4: View the HTML Page in Your Browser
    Open the saved HTML file in your favorite browser (double click on the
    file, or right-click - and choose "Open with").

    The result will look much like this:


    Basic Examples
    HTML Documents

    All HTML documents must start with a document type declaration:


    <!DOCTYPE html>.

    The HTML document itself begins with <html> and ends with
    </html>.

    The visible part of the HTML document is between <body> and


    </body>.
    HTML Documents

    Example:

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>


    <p>My first paragraph.</p>

    </body>
    </html>
    HTML Headings

    The <!DOCTYPE> declaration represents the document type and


    helps browsers to display web pages correctly.

    It must only appear once, at the top of the page (before any HTML
    tags).

    The <!DOCTYPE> declaration is not case sensitive.

    The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>


    HTML Headings

    HTML headings are defined with the <h1> to <h6> tags.


    <h1> defines the most important heading. <h6> defines the least
    important heading:

    Example:

    <h1>This is heading 1</h1>


    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    HTML Headings
    HTML Paragraphs

    HTML paragraphs are defined with the <p> tag:

    Example:

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    HTML Paragraphs
    HTML Images

    HTML images are defined with the <img> tag.

    The source file (src), alternative text (alt), width, and height are
    provided as attributes:

    Example:

    <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">


    HTML Images
    Empty HTML Elements

    HTML elements with no content are called empty elements.

    The <br> tag defines a line break, and is an empty element


    without a closing tag:

    Example:
    <p>This is a <br> paragraph with a line break.</p>
    Output:
    This is a
    paragraph with a line break.
    Empty HTML Elements
    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>):
    HTML Styles
    The HTML style attribute is used to add styles to an element, such as color,
    font, size, and more.
    HTML Styles
    Background Color

    The CSS background-color property defines the background color


    for an HTML element.
    Background Color
    Text Color

    The CSS color property defines the text color for an HTML element:
    Text Color
    Fonts

    The CSS font-family property defines the font to be used for an HTML element:
    Fonts
    Text Alignment

    The CSS text-align property defines the horizontal text alignment for an HTML
    element:
    Text Alignment
    Chapter Summary

    Use the style attribute for styling HTML elements


    Use background-color for background color
    Use color for text colors
    Use font-family for text fonts
    Use font-size for text sizes
    Use text-align for text alignment
    Chapter Summary

    HTML contains several elements for defining text


    with a special meaning.
    Chapter Summary
    HTML Formatting Elements

    Formatting elements were designed to display special types of text:


    HTML <b> and <strong> Elements

    The HTML <b> element defines bold text, without any extra
    importance.
    HTML <b> and <strong> Elements

    The HTML <strong> element defines text with strong importance.


    The content inside is typically displayed in bold.

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy