[go: up one dir, main page]

and

  • which are used to specify headings, paragraphs, images, links, and list items respectively. HTML documents contain HTML tags and plain text to describe web pages.">

    and

  • which are used to specify headings, paragraphs, images, links, and list items respectively. HTML documents contain HTML tags and plain text to describe web pages.">
    Scribd
    Upload
    97 views33 pages

    HTML Basics: Education For A Fast Changing World

    HTML is a markup language used to describe web pages. It uses tags to define headings, paragraphs, images, and other content. Key HTML tags include <html> <body> <h1> <p> <img> <a> and <li> which are used to specify headings, paragraphs, images, links, and list items respectively. HTML documents contain HTML tags and plain text to describe web pages.

    Uploaded by

    topherski
    Copyright
    © © All Rights Reserved
    We take content rights seriously. If you suspect this is your content, claim it here.
    Available Formats
    Download as PPTX, PDF, TXT or read online on Scribd
    97 views33 pages

    HTML Basics: Education For A Fast Changing World

    HTML is a markup language used to describe web pages. It uses tags to define headings, paragraphs, images, and other content. Key HTML tags include <html> <body> <h1> <p> <img> <a> and <li> which are used to specify headings, paragraphs, images, links, and list items respectively. HTML documents contain HTML tags and plain text to describe web pages.

    Uploaded by

    topherski
    Copyright
    © © All Rights Reserved
    We take content rights seriously. If you suspect this is your content, claim it here.
    Available Formats
    Download as PPTX, PDF, TXT or read online on Scribd
    You are on page 1/ 33

    HTML Basics

    Education for a Fast Changing World


    What is HTML?
    HTML is a language for describing web pages.
    • HTML stands for Hyper Text Markup Language
    • HTML is not a programming language, it is a markup
    language
    • A markup language is a set of markup tags
    • HTML uses markup tags to describe web pages

    Education for a Fast Changing World


    HTML Tags
    HTML tags are keywords surrounded by angle brackets
    like <html>
    • HTML tags normally come in pairs like <b> and </b>
    • The first tag in a pair is the start tag, the second tag
    is the end tag
    • Start and end tags are also called opening tags and
    closing tags

    Education for a Fast Changing World


    HTML Documents = Web Pages
    • HTML documents describe web pages
    • HTML documents contain HTML tags and plain text
    • HTML documents are also called web pages

    Education for a Fast Changing World


    Let’s Make a Web Page
    • Open a new Notepad document
    • Type the following HTML code:
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph</p>

    </body>
    </html>
    • Save the notepad document as first_page.txt
    • Save the document as first_page.htm
    Education for a Fast Changing World
    HTM or HTML Extension?
    • When you save an HTML file, you can use either the
    .htm or the .html extension. Most web developers
    use .htm in our examples. It is a habit from the past,
    when the software only allowed three letters in file
    extensions.
    • With new software it is perfectly safe to use .html.

    Education for a Fast Changing World


    HTML Element Syntax
    • An HTML element starts with a start tag / opening
    tag
    • An HTML element ends with an end tag / closing tag
    • The element content is everything between the start
    and the end tag
    • Some HTML elements have empty content
    • Empty elements are closed in the start tag
    • Most HTML elements can have attributes

    Education for a Fast Changing World


    Structure of a Web Page
    • All Web pages share a <HTML>
    <HEAD>
    common structure <TITLE> Example </TITLE>
    • All Web pages should </HEAD>
    <BODY>
    contain a pair of This is where you would include the
    <HTML>, <HEAD>, text and images on your Web page.
    <TITLE>, and <BODY> </BODY>
    </HTML>
    tags

    Education for a Fast Changing World


    The <TITLE> Tag
    • Choose the title of your Web page carefully; The title
    of a Web page determines its ranking in certain
    search engines
    • The title will also appear on Favorite lists, History
    lists, and Bookmark lists to identify your page

    Education for a Fast Changing World


    Text Formatting
    • Manipulating text in HTML can be tricky; Oftentimes,
    what you see is NOT what you get
    • For instance, special HTML tags are needed to create
    paragraphs, move to the next line, and create
    headings

    Education for a Fast Changing World


    Text Formatting Tags
    <B> Bold Face </B>
    <I> Italics </I>
    <U> Underline </U>
    <P> New Paragraph </P>
    <BR> Next Line

    Education for a Fast Changing World


    Changing the Font
    • The expression <FONT FACE = “fontname”> …
    </FONT> can be used to change the font of the
    enclosed text
    • To change the size of text use the expression <FONT
    SIZE=n> …. </FONT> where n is a number between 1
    and 7

    Education for a Fast Changing World


    Changing the Font

    • To change the color, use <FONT COLOR=“red”>….


    </FONT>; The color can also be defined using
    hexadecimal representation ( Example: #ffffff )
    • These attributes can be combined to change
    the font, size, and color of the text all at once;
    For example, <FONT SIZE=4 FACE=“Courier”
    COLOR=“red”> …. </FONT>

    Education for a Fast Changing World


    Headings
    • Web pages are typically organized into sections with
    headings; To create a heading use the expression
    <Hn>….</Hn> where n is a number between 1 and 7
    • In this case, the 1 corresponds to the largest size
    heading while the 7 corresponds to the smallest size

    Education for a Fast Changing World


    Aligning Text
    • The ALIGN attribute can be inserted in the <P> and
    <Hn> tags to right justify, center, or left justify the
    text
    • For example, <H1 ALIGN=CENTER> The New York
    Times </H1> would create a centered heading of the
    largest size

    Education for a Fast Changing World


    Comment Statements
    • Comment statements are notes in the HTML code
    that explain the important features of the code
    • The comments do not appear on the Web page itself
    but are a useful reference to the author of the page
    and other programmers
    • To create a comment statement use the <!-- …. -->
    tags

    Education for a Fast Changing World


    The Infamous Blink Tag
    • It is possible to make text blink using the <BLINK> …
    </BLINK> tag
    • However, it is best to use this feature at most
    sparingly or not at all; What seems like a good idea
    to a Web designer can become very annoying to a
    Web user
    • The <BLINK> tag is not supported by Internet
    Explorer

    Education for a Fast Changing World


    Page Formatting
    • To define the background color, use the BGCOLOR
    attribute in the <BODY> tag
    • To define the text color, use the TEXT attribute in the
    <BODY> tag
    • To define the size of the text, type <BASEFONT
    SIZE=n>

    Education for a Fast Changing World


    Example
    <HTML>
    <HEAD>
    <TITLE> Example </TITLE>
    </HEAD>
    <BODY BGCOLOR=“black” TEXT=“white”>
    <BASEFONT SIZE=7>
    This is where you would include the text and images on your Web page.
    </BODY>
    </HTML>

    Education for a Fast Changing World


    Inserting Images
    • Type <IMG SRC = “image.ext”>, where image.ext
    indicates the location of the image file
    • The WIDTH=n and HEIGHT=n attributes can be used
    to adjust the size of an image
    • The attribute BORDER=n can be used to add a border
    n pixels thick around the image

    Education for a Fast Changing World


    Alternate Text
    • Some browsers don’t support images. In this case,
    the ALT attribute can be used to create text that
    appears instead of the image.
    • Example:
    <IMG SRC=“satellite.jpg” ALT = “Picture of satellite”>

    Education for a Fast Changing World


    Links
    • A link lets you move from one page to another, play
    movies and sound, send email, download files, and
    more….
    • A link has three parts: a destination, a label, and a
    target
    • To create a link type
    <A HREF=“page.html”> label </A>

    Education for a Fast Changing World


    Anatomy of a Link
    <A HREF=“page.html”> label </A>

    • In the above link, “page.html” is the destination. The


    destination specifies the address of the Web page or
    file the user will access when he/she clicks on the
    link.
    • The label is the text that will appear underlined or
    highlighted on the page

    Education for a Fast Changing World


    Example: Links
    • To create a link to CNN, I would type:
    <A HREF=“http://www.cnn.com”>CNN</A>

    • To create a link to MIT, I would type:


    <A HREF=“http://www.mit.edu”>MIT</A>

    Education for a Fast Changing World


    Changing the Color of Links
    • The LINK, VLINK, and ALINK attributes can be
    inserted in the <BODY> tag to define the color of a
    link
    – LINK defines the color of links that have not been visited
    – VLINK defines the color of links that have already been
    visited
    – ALINK defines the color of a link when a user clicks on it

    Education for a Fast Changing World


    Using Links to Send Email
    • To create a link to an email address, type <A
    HREF=“mailto:email_address”> Label</A>
    • For example, to create a link to send email to myself,
    I would type: <A HREF=“mailto:
    ktdunn@mit.edu”>email Katie Dunn</A>

    Education for a Fast Changing World


    Anchors
    • Anchors enable a user to jump to a specific place on
    a Web site
    • Two steps are necessary to create an anchor. First
    you must create the anchor itself. Then you must
    create a link to the anchor from another point in the
    document.

    Education for a Fast Changing World


    Anchors
    • To create the anchor itself, type <A NAME=“anchor
    name”>label</A> at the point in the Web page
    where you want the user to jump to
    • To create the link, type <A HREF=“#anchor
    name”>label</A> at the point in the text where you
    want the link to appear

    Education for a Fast Changing World


    Example: Anchor

    <A HREF="#chap2">Chapter Two</A><BR>


    Link

    <A NAME="chap2">Chapter 2 </A>Ancho


    r

    Education for a Fast Changing World


    Ordered Lists
    • Ordered lists are a list of Here’s how it would
    numbered items. look on the Web:
    • To create an ordered
    list, type:
    <OL>
    <LI> This is step one.
    <LI> This is step two.
    <LI> This is step three.
    </OL>

    Education for a Fast Changing World


    More Ordered Lists….
    • The TYPE=x attribute allows you to change the the
    kind of symbol that appears in the list.
    – A is for capital letters
    – a is for lowercase letters
    – I is for capital roman numerals
    – i is for lowercase roman numerals

    Education for a Fast Changing World


    Unordered Lists
    • An unordered list is a Here’s how it would
    list of bulleted items look on the Web:
    • To create an unordered
    list, type:
    <UL>
    <LI> First item in list
    <LI> Second item in list
    <LI> Third item in list
    </UL>

    Education for a Fast Changing World


    More Unordered Lists...
    • The TYPE=shape attribute allows you to change the
    type of bullet that appears
    – circle corresponds to an empty round bullet
    – square corresponds to a square bullet
    – disc corresponds to a solid round bullet; this is the default
    value

    Education for a Fast Changing World

    You might also like