Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Lecture Notes 3

    Încărcat de

    Chris WizKid Morris
    24 vizualizări11 pagini
    internet authoring notes

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    internet authoring notes

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    24 vizualizări11 pagini

    Lecture Notes 3

    Încărcat de

    Chris WizKid Morris
    internet authoring notes

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 11

    UCC Online Internet Authoring

    Lecture Notes 3
    Good Day Ladies and Gentlemen in this Lecture we are going to cover the following topics: HTML Mapping HTML Frames HTML Forms

    HTML Image Mapping


    HTML Image Using Image Map Image Maps allows website designers to turn regular images into an image with many links pointing out of it, depending on where on the image is clicked. This is achieved by placing code on your page with the co-ordinates of your shapes inputted. This will be the mage map code and you will apply it to your image placed on the page. The type of image map we will be creating will be call client-side image map.

    How to Create an Image Map


    Add an image to your page (gif or jpg) Tell the Browser that the image will be using an image map. o E.g. <img src = images/ja_flag.jpg usemap = #flag ismap = ismap border = 0>

    Ensure that your Image will download at a regular speed. Image Map Shapes Shapes o Defines a shape for the clickable area. Possible values:default rect circle

    Coords o

    poly

    Specifies the coordinates of the clickable area.

    Coordinates are specified as follows: o o o rect: left, top, right, bottom circle: center-x, center-y, radius poly: x1, y1, x2, y2, ...

    Now let us look at an example <html> <head> <title>Untitled</title> </head> <body> <img src = "c:/images/jamaica_flag.gif" usemap = "#flag" alt=""> <map name = "flag"> <area shape = "rect" coords = "0,0,39,116" href = "http://www.cnn.com" alt = "http://ww.cnn.com"> <area shape = "rect" coords = "10,20,50,200" href = "http://www.msnbc.com" alt = "http://www.msnbc.com"> <area shape = "rect" coords = "51,201,100,400" href = "http://www.foxnews.com" alt = "http://www.foxnews.com"> </map> </body> </html>

    HTML Frames
    Frames allow users to display two or more pages at once on a webpage. It is also a great way of having a static navigation bar on a web page at all times, with the content displaying in another area of the page. Web page can have more than two frames. Please note that a container or frameset page contains no body.

    Now let us look at an example <html> <head><title>Web Page Title</title></head> <frameset cols =25%, 75%> <frame src = menu.htm> <frame src = content.htm> </frameset> </html>

    The output below represents the results of when previewed in a Browser.

    menu.htm

    content.htm

    Adding Rows to Frame Layout Example:


    <frameset cols = 25%,75%>

    <frameset rows = 50%,50%> <frame src = one.htm> <frame src = two.htm> </frameset> <frameset rows 50%, 50%> <frame src = three.htm> <frame src = four.htm> </frameset> </frameset>

    The output below represents the results of when previewed in a Browser. One.htm Two.htm Three.htm Four.htm

    Linking Between Frames


    It is important to setup your frames so that their content are displayed in a different frame. Therefore it is important that the frames are given names, so that the link can specify where the page will open.

    Example
    <frameset cols = 25%,*> <frame src = menu.htm name = menu frameborder="0"> <frame src = content.htm name = content frameborder="0"> </frameset>

    Frame Target Attribute


    A new attribute will have to be added to your links, called target, in which the name of the frame the page will open in will be specified. E.g.

    <a href = index.htm target = content> If you want to open your frame in a completely new pop-up window use target = _blank. This is useful for linking to website other than yours (External links).

    HTML Iframes
    An iframe is used to display a web page within a web page. o Syntax for adding an iframe: <iframe src="URL"></iframe>

    Iframe - Set Height and Width o The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). Iframe - Remove the Border

    The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border:

    Example:
    o <iframe src="demo_iframe.htm" frameborder="0"></iframe> Use iframe as a Target for a Link An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe: o <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.cnn.com" target="iframe_a">CNN News</a></p>

    HTML FORMS
    Introduction to forms
    An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.

    Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

    Form Structure
    Forms follow a specified structure. The form tag is a container. It holds all of the elements such as text boxes and submit buttons.

    Submitting Forms
    o After the form is completed it can be sent for processing by using the submit button.

    E.g. - Sending to an Email Address


    o <form method = post enctype = text/plain action = mailto:info@uccja.com>Form Elements goes here</form>

    Sending Form via CGI Scripts


    o <form method = post enctype = text/plain action = http://www.samfoo.com/feedback.cgi>Elements goes here</form>

    Now lets examine forms sub-categories Single Line Text Boxes Text boxes allow users to either a line or multiple lines of text. The text box is suitable for Names, email Addresses etc. Password: <input type = password name = password> Text Area The textarea is allow multiple line of text to be entered. Its is suitable for comments, physical addresses (streets, roads). The browser will wrap each line of text automatically. E.g. <textarea cols = 25 rows = 60 name = Comments></textarea> HTML <fieldset> Tag E.g. <input type = text name = First Name Value = Enter First Name Here size = 25 maxlength = 30>

    Example
    o Group related elements in a form:

    <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>

    HTML <legend> Tag


    The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements. The <legend> tag defines a caption for the <fieldset> element.

    Radio Buttons
    These are small circular buttons that can be used collect polls or information that only require users to select one choice. o o E.g. <input type = radio name = gender value = M>Male <input type = radio name = gender value = F>Female

    They should work like buttons on an old radio. Therefore the users should only be allowed to select one choice.

    Check Boxes
    Check boxes are grouped together and will allow users to make multiple selections. o E.g. <input type = checkbox name = payment method_1 value = CA>Cash <input type = checkbox name = payment method_2 value = DC>Debit Card <input type = checkbox name = payment method_3 value = CC>Credit Card

    Drop Down Menu


    Drop down menu allows users to select an option. They perform the same thing as radio buttons, its just the way they look thats different.

    Most of the options available are not in view until the user gets intimate with the box and clicks on it.

    The rest of the options will then pop-up below the box.

    Example of Drop Down Menu (e.g.)


    <select name=Country Visited" size="1"> <option value=Europe">Europe</option> <option value=America">America</option> <option value=England">England</option> <option value=Japan">Japan</option> <option value=Jamaica">Jamaica</option> <option value=Cuba>Cuba</option> </select>

    The Submit Button


    The Submit Button allows users to send the information that they entered in the Forms. E.g. <input type submit value = Submit Form>

    Reset Button
    The Reset Button allow users to clear form of information entered before submitting. E.g. <input type = reset value = Reset Form>

    HTML 5 - FORMS
    New Form Elements
    HTML5 offers new form elements, for more functionality: TagDescription: <datalist>Specifies a list of pre-defined options for input controls <keygen>Defines a key-pair generator field (for forms) <output>Defines the result of a calculation

    HTML 5 DataList
    <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome">

    <option value="Opera"> <option value="Safari"> </datalist>

    HTML 5 Keygen
    Example A form with a keygen field: <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>

    HTML 5 Form - Output


    The <output> element represents the result of a calculation (like one performed by a script).

    Example
    o o Perform a calculation and show the result in an <output> element: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>

    HTML 5 New Input Types


    HTML5 has several new input types for forms. These new features allow better input control and validation. This chapter covers the new input types: color date datetime datetime-local email month number

    range search tel time url week HTML5 New Form Attributes HTML5 has several new attributes for <form> and <input>. New attributes for <form>: o o o o o o o o o autocomplete novalidate New attributes for <input>: autocomplete Autofocus form formaction formenctype formmethod

    HTML5 New Form Attributes


    formnovalidate formtarget height and width list min and max multiple

    pattern (regexp) placeholder required step

    References: http://www.w3.org/ http://www.yourhtmlsource.com

    S-ar putea să vă placă și