Scribd Logo
Upload

Welcome to Scribd!

  • Introduction To HTML

    Uploaded by

    Jayson Rael Ramos
    25 views36 pages
    A presentation regarding HTML Introduction to.

    Original Title

    Introduction to HTML

    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
    A presentation regarding HTML Introduction to.

    Copyright:

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

    Introduction To HTML

    Uploaded by

    Jayson Rael Ramos
    A presentation regarding HTML Introduction to.

    Copyright:

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

    HTML with CSS

    Introduction to HTML The Language of the Web

    OBJECTIVES

    Know what HTML is Learn the terminologies Understand the anatomy of a web page Understand tags and attributes Learn how to use basic HTML elements Difference between inline and block elements

    Web pages are written in HyperText Markup Language Whether your page contains a series of text-only blog entries, a dozen pictures of your yourself (so vain), or a heavily formatted screenplay odds are that, if youre looking at it in a browser, its an HTML page!

    HyperText means text with links in it. Any time you click on a word that brings you to a new webpage, you've clicked on hypertext! A markup language is a language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.

    Its Role

    HTML tells browsers how to display the contents of a web page, using special instructions - called tags that instruct the browser when to start a paragraph, italicize a word, or display a picture. To create your own web pages, you need to learn to use this family of tags.

    What makes webpages pretty? That's CSSCascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS in later courses.

    The HTML Document

    HTML tags are formatting instructions that tell a browser how to transform ordinary text into something visually appealing.

    The Anatomy of a web page


    An HTML page is actually nothing more than a plain-vanilla text file.

    Document Type Definition


    The document type definition (DTD) is the first piece of information in an HTML file. It tells the browser what markup standard you used to write the page.

    Today, most web developers use the HTML5 doctype, which looks like this
    <!DOCTYPE html>

    Document Type Definition


    When a browser encounters a page with a doctype, it switches into standards mode. When you view a page with no doctype in multiple browsers, youre likely to get varying text sizes, inconsistent margins and borders, and improperly positioned content.

    <html>

    This element wraps everything (other than the doctype) in your web page.

    <head>

    This element designates the header portion of your document. The header can include: some optional information about your web page including the required title optional search keywords, and an optional style sheet

    <title>

    This element sets the title for your web page. ROLES 1. web browsers display the title at the top of the browser window 2. the browser uses the title to label the bookmark in your Bookmark menu 3. the search engine usually displays this title as the first line in the search results

    <body>

    This element holds the actual content you want to display to the world.

    Inserting Images
    A picture can say a thousand words, and great images help make the difference between an averagelooking site and a really engaging one. To insert an image

    Adding Links
    Links are the defining feature of the web because they allow you to move from one web page to another. Links are created using the <a> element.

    HTML Tags

    HTML tags are formatting instructions that tell a browser how to transform ordinary text into something visually appealing.

    Whats in a Tag?
    You can recognize a tag by looking for angle brackets. Like this one

    The tag known as a start tag, which means it switches on a paragraph.

    Whats in a Tag?
    Most start tags are paired with a matching end tag that switches off the effect.

    Understanding Elements
    This combination of start and end tags and the text in between them makes up an HTML element.

    Types of Elements
    CONTAINER ELEMENTS STANDALONE ELEMENTS

    <p> </p>

    <img/> <br/>

    Nesting Elements

    You can also nest one element inside another. In fact, nesting elements is one of the basic building block techniques of web pages. Heres an example:
    This <b><i>word</i></b> has italic and bold formatting.

    Attributes
    Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

    Attributes

    The attribute name indicates what kind of extra information you are supplying about the element's content. The attribute value is the information or setting for the attribute. It should be placed in double quotes. HTML5 allows you to use uppercase attribute names and omit the quotemarks, but this is not recommended.

    BLOCK ELEMENTS

    Some elements will always appear to start on a new line in the browser window. These are known as block level elements.
    Examples of block elements are <h1>, <p>

    INLINE ELEMENTS

    Some elements will always appear to continue on the same line as their neighbouring elements.

    These are known as inline elements.


    Examples of inline elements are <a>, <b>, and <img>

    BASIC BLOCK-LEVEL ELEMENT Paragraphs


    <p></p>

    A paragraph consists of one or more sentences that form a self-contained unit of discourse

    Headings

    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

    Heading elements are a good way to make titles stand out. They display text in large, boldfaced letters. The lower the number, the larger the text, so <h1> produces the largest heading.

    Horizontal Rule
    <hr/>

    A horizontal line can help you separate one section of your web page from another.

    Unordered List
    <ul> <li>Apple</li> <li>Banana</li> </ul>

    These elements let you build basic bulleted lists. You can substitute <ul> with <ol> to get an automatically numbered list

    BASIC INLINE-LEVEL ELEMENT Bold


    This is <b>bold!</b>

    By enclosing words in the tags <b> and </b> we can make characters appear bold.

    Italic

    This is <i>italic</i>

    By enclosing words in the tags <i> and </i> we can make characters appear italic.

    Line Break
    <br />

    If you wanted to add a line break inside the middle of a paragraph you can use the line break tag <br />.

    Image

    <img src=dog.jpg/>

    To display an image inside a web page, use this element. Make sure you specify the src attribute to indicate the file name of the picture you want the browser to show.

    Anchor

    <a href=http://www.google.com>Google</a>

    The anchor element is the starting point for creating hyperlinks that let website visitors jump from one page to another.

    You might also like