Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    HTML 3

    Uploaded by

    Deepika Jangid
    This document provides an overview of HTML elements and tags for creating web pages. It discusses the basic structure of an HTML document using <html>, <head>, and <body> tags. It describes common text formatting tags like <p>, <b>, <i>, as well as lists, links, images, tables, forms, frames, and colors. The document is intended as an introduction to basic HTML syntax and tags for beginners to build fundamental web pages.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd

    HTML 3

    Uploaded by

    Deepika Jangid
    33 views25 pages
    This document provides an overview of HTML elements and tags for creating web pages. It discusses the basic structure of an HTML document using <html>, <head>, and <body> tags. It describes common text formatting tags like <p>, <b>, <i>, as well as lists, links, images, tables, forms, frames, and colors. The document is intended as an introduction to basic HTML syntax and tags for beginners to build fundamental web pages.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of HTML elements and tags for creating web pages. It discusses the basic structure of an HTML document using <html>, <head>, and <body> tags. It describes common text formatting tags like <p>, <b>, <i>, as well as lists, links, images, tables, forms, frames, and colors. The document is intended as an introduction to basic HTML syntax and tags for beginners to build fundamental web pages.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    33 views25 pages

    HTML 3

    Uploaded by

    Deepika Jangid
    This document provides an overview of HTML elements and tags for creating web pages. It discusses the basic structure of an HTML document using <html>, <head>, and <body> tags. It describes common text formatting tags like <p>, <b>, <i>, as well as lists, links, images, tables, forms, frames, and colors. The document is intended as an introduction to basic HTML syntax and tags for beginners to build fundamental web pages.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    of 25

    HTML

    By: Deepika Jangid

    Contents

    Concepts of Hypertext Versions of HTML Elements of HTML Syntax Head & body sections Building HTML documents Inserting texts, images, Hyperlinks Backgrounds and Colour controls, Different HTML tags Table Layout and presentation Use of front size & Attributes List types and its tags Use of Frames and Forms in web pages.

    Concept of Hypertext

    Hypertext is the Text which contains links to other text It is one of the major features of the World Wide Web. Hypertext allows us to link information in a way that is not linear like the bound pages of a book, but associative, so that people can choose their own path through the information. Hypertext on the Web makes it possible to link your documents to many resources by other authors in other places. To make hypertext, you create HTML files containing the anchor (A) element.

    Anchor: <a name="anchor"></a> Hyperlink: <a href="URL#anchor">Hot words</a>

    What is HTML?

    HTML stands for Hypertext Markup Language An HTML file is a text file containing markup tags

    The markup tags tell the Web browser how to display the page .html is preferred .htm is from very old operating systems that can only handle 8+3 names (eight characters, dot, three characters) Formatted text, such as Microsoft Words .doc files, cannot be used in HTML files

    HTML files must have an htm or html file extension


    HTML files can be created using a simple text editor

    Versions of HTML

    HTML 1 HTML 2 HTML 3 HTML 4 XHTML HTML5

    XHTML

    HTML Elements

    Tags are the elements that create the components of a page Tags surrounded by angle brackets < > Usually come in pairs

    Example: Start tag <p> and end tag </p>

    Stuff between is called element content Tags are not case sensitive

    New standard is to use lower case

    Basic Elements of HTML Coding

    Basic Markup Tags


    Titles Headings Paragraphs Lists


    Unnumbered Lists Numbered Lists Definition Lists Nested Lists

    Preformatted Text: <pre> Extended Quotes Addresses


    Horizontal Rules <hr> <br> and <nobr>
    Physical Versus Logical: Use Logical Tags When Possible Using Character Tags: <b> <i> Special Characters Escape Sequences

    Line Breaks

    Character Formatting

    Head Section

    Tags in head

    <HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar.

    Body Section

    Tags in Body Heading: <H1> </H1> Center:<Center> </Center> Line Break <P> ,<Br> Phrase Markups: <I></I> ,<B></B>

    Let's talk Text


    Create a List

    Unordered list : <UL><li> Ordered list: <OL><li> Nested

    Structure of an HTML document

    An HTML document is contained within <html> tags

    It consists of a <head> and a <body>, in that order The <head> typically contains a <title>, which is used as the title of the browser window Almost all other content goes in the <body>

    Hence, a fairly minimal HTML document looks like this: <html> <head> <title>My Title</title> </head> <body> Hello, World! </body> </html>

    10

    Building an HTML Document


    1.Use an text editor such as Editpad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Netscape (or any browser) Off-Line 4.Switch to Netscape

    5.Click on File, Open File and select the filename.html document that you just created. 6.Your HTML page should now appear just like any other Web page in Netscape.

    7.You may now switch back and forth between the Source and the HTML Document

    switch to Notepad with the Document Source make changes save the document again switch back to Netscape click on RELOAD and view the new HTML Document switch to Notepad with the Document Source......

    Inserting Images

    Images (pictures) are not part of an HTML page; the HTML just tells where to find the image To add an image to a page, use:
    <img src="URL" alt="text description" width="150" height="100"> The src attribute is required; the others are optional Attributes may be in any order The URL may refer to any .gif, .jpg, or .png file Other graphic formats are not recognized The alt attribute provides a text representation of the image if the actual image is not downloaded The height and width attributes, if included, will improve the display as the page is being downloaded

    If height or width is incorrect, the image will be distorted

    There is no </img> end tag, because <img> is not a container


    13

    Inserting Links

    To link to another page, enclose the link text in <a href="URL"> to </a>

    Example: I'm taking <a href =

    "http://www.cis.upenn.edu/~matuszek/cit597.html">Dr. Dave's CIT597 course</a> this semester.

    Link text will automatically be underlined and blue (or purple if recently visited)
    Insert a named anchor: <a name="refs">References</a> And link to it with: <a href="#refs">My references</a>
    <a href="PageURL#refs">My references</a>
    14

    To link to another part of the same page,


    To link to a named anchor from a different page, use

    How to make colors changes?

    Hexadecimal number : Color names : <Font color=white> Changing the Background color
    <BODY BGCOLOR=#19378a>

    Changing Text color

    <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff>

    Spot color

    <FONT COLOR=#66ffcc>WENT'99</FONT>

    Image Background

    <BODY BACKGROUND=bgimg.gif >

    HTML Tags

    HTML tags are used to mark up HTML elements HTML tags are surrounded by angle brackets, < and > Most HTML tags come in pairs, like <b> and </b> The tags in a pair are the start tag and the end tag The text between the start and end tags is the element content The tags act as containers (they contain the element content), and should be properly nested HTML tags are not case sensitive; <b> means the same as <B>

    16

    Some simple tags


    <h1> through <h6> : Headers, from largest to smallest <b> Boldface <i> Italic <p> Paragraph <pre> Preformatted text; preserve spaces and dont wrap lines

    17

    Tables: <TABLE > </TABLE>


    <HTML> <HEAD> <TITLE> Tables </TITLE> </HEAD> <H3>Tables </H3> <BODY> A basic table that has three columns and two rows. <TABLE BORDER> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> </BODY> </HTML>

    TD: Table Data TR: Table Row TH: Table Header (Header Cell)

    Product.htm
    <HTML><HEAD><TITLE> AITC Products </TITLE></HEAD> <BODY>Product Table <TABLE BORDER=3>
    <TR><TH>ID</TH> <TH width=150>Name</TH> <TH >Price</TH> <TH>Comment</TH></TR>

    <TR><TD>PC100</TD><TD>Compaq Computer</TD><TD align=right>$2,000</TD> <TD><a href="http://www.compaq.com/">Compaq's Web Site</a></TD> </TR> <TR> <TD>TV25</TD> <TD>25 " Sony TV</TD> <TD align=right>$300</TD>

    <TD>&nbsp;</TD> </TR>
    <TR valign=top> <TD>Pet001</TD> <TD>Little Lion</TD> <TD>$50</TD> <TD><img src="slion.gif"></TD> </TR> <TR><TD colspan=4>10% discount off the list price today</TD></TR> </TABLE> </BODY></HTML>

    Lists

    Two of the kinds of lists in HTML are ordered, <ol> to </ol>, and unordered, <ul> to </ul> Ordered lists typically use numbers: 1, 2, 3, ... Unordered lists typically use bullets () The elements of a list (either kind) are surrounded by <li> and </li>

    Example: The four main food groups are: <ul> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li> </ul>

    20

    Forms

    <form> is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages

    Usually the purpose is to ask the user for information The information is then sent back to the server
    The syntax is: <form parameters> ...form elements... </form> Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc

    A form is an area that can contain form elements


    Other kinds of HTML tags can be mixed in with the form elements

    A form usually contains a Submit button to send the information in he form elements to the server The forms parameters tell JavaScript how to send the information to the server (there are two different ways it could be sent) Forms can be used for other things, such as a GUI for simple programs

    21

    The <form> tag

    The <form arguments> ... </form> tag encloses form elements (and probably other HTML as well) The arguments to form tell what to do with the user input

    action="url"

    (required) (default)

    Specifies where to send the data when the Submit button is clicked

    method="get"

    Form data is sent as a URL with ?form_data info appended to the end Can be used only if data is all ASCII and not more than 100 characters
    Form data is sent in the body of the URL request Cannot be bookmarked by most browsers Tells where to open the page sent as a result of the request target= _blank means open in a new window target= _top means use the same window
    22

    method="post"

    target="target"

    HTML FRAMES
    With Frames, you can display more than one Web page in the same browser window.

    THE FRAMESET TAG

    The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy <frameset cols=25%,75%> <frame src=frame_a.htm> <frame src=frame_b.htm> </frameset>

    The End

    25

    You might also like