Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML

    Transféré par

    Marione Thea Rodriguez
    17 vues5 pages
    HTML

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    HTML

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    17 vues5 pages

    HTML

    Transféré par

    Marione Thea Rodriguez
    HTML

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    HTML Overview Smallest heading is <H6>

    HTML (HyperText Markup Language)


    Invented by Tim Berners Lee (Swiss) in 1989 Spacing
    Uses embedded code tags to describe elements HTML does not recognize vertical spacing unless specified
    <BR>Carriage break
    Word Processing Returns text to left margin
    WYSIWYG <P>End of paragraph
    What You See Is What You Get blank line and returns text to left margin

    HTML Example URL


    WYSLCDTWYG http://www.utdallas.edu/~rfisher/ba4320/schedule.htm
    What You See Looks Completely Different Than What You Get Protocol/Domain/Path/Page(file)

    What you need to create and upload a webpage over the web Images
    HTML Editor <IMG SRC=imagefilename">
    Web Browser URL (name and location) of the image
    Graphics Editor <IMG SRC="dallas.gif">
    Server or
    <IMG SRC=http://www.utdallas.edu/images/dallas.gif">
    HTML Overview
    HTML documents contain Links
    Content (the words) <A HREF=.> hotlink name </A>
    HTML Commands (TAGS) Creates a link to another document or hypermedia file
    HTMLTAGS Example
    Enclosed in brackets< B > <A HREF="http://www.utdallas.edu">UTD</A>
    Either upper or lower case
    Usually come in pairs Body Tag Attributes
    Second TAG has a / (slash) before its command BGColor -color string
    Example of bold TAG: <B>bold text </B> defines background color of the page
    Background -filename and location
    Sections of HTML Document image file to be used as page background
    <HTML> will be tiled if it is smaller than the viewing screen
    <HEAD> Text -color string
    <BODY> defines the color of the normal body text

    HTML Titles FONTS


    <TITLE> . . . </TITLE> <FONT></FONT>formats the texts of the web pageFont Attributes
    Indicates the title of the document Size= n (where n = 1..7) normal size is 3
    In the Heading section Color= #rrggbb or color name
    Displays in the browsers Title Bar Face= font name

    Headings Tags Font Control Tags


    <H1> . . . </H1> <Small></Small> Makes text smaller
    Browser displays headings in bold font and puts a blank line before and after <Big></Big> Makes text bigger
    an HTML heading <Sub></Sub> Makes text subscript
    A first-level heading <H1> is largest <Sup></Sup> Makes text superscript
    <I></I> Makes text italic 1 denotes number
    <B></B> Makes text bold A denotes CAPITAL LETTERS
    <U></U> Makes text underlined a denotes small letters
    <Strike></Strike> Makes text strike I denotes uppercase Roman numerals
    <Marquee></Marquee> Makes text scroll i denotes lowercase Roman numerals

    Heading attribute Unordered List <UL></UL> tag attributes


    <H4 ALIGN = left/center/right></H4> type = circle / disc/ square
    circle is shown as _
    Horizontal Ruled Line disc is shown as n
    <HR>used to separate different areas of a web page square is shown as _
    does not have a closing tag
    Tags with Attributes _
    Horizontal Rule Line attributes Besides the tag name, more complicated tags have attribute-value pairs. Here is
    <HR width=80% size=4 align=right NOSHADE> the tag one would use to insert an image.
    color = #ffffff defines the color of the line <img src=handsomeProf.gif>
    width= n (pixel width) img is the tag name indicating that an image goes here
    n% (certain percent of screen width) The attribute src indicates the source file for the image.
    size= n (line thickness in pixel) An equal sign follows the attribute, which is then followed by the value of the
    NOSHADE= to turn off line shading attribute.
    align= left / center / right Attribute names are not case sensitive
    Spaces are permitted (but not mandatory) around the =.
    PARAGRAPHS The quote marks are usually required.
    <P>
    defines the paragraph element Hyperlinks
    </P> is optional _ Hyperlinks, links from one web document to
    another, are what make the web a web.
    Paragraph tag attribute _ To put a hyperlink in your web page use the <a>
    <P align = center> (for anchor) tag, as in:
    align= left / center / right <a href=http://www.cs.brown.edu/courses/cs002>

    Preformatted Text Hyperlinks in Use


    <PRE></PRE> _ A hyperlink must also define a segment of text (or some other portion of the
    _ text enclosed in these tags is to be presented exactly as document) where a The text between <a> and </a> will appear in a distinctive
    entered preserving spacing and line breaks font or color.
    _ can be used to avoid inserting several <BR> tags You Can Link to a Lot of Things
    _ Possible web URLs include other web pages that you
    LIST have written, nationally known web sites, picture files,
    <LI> denotes list item etc.
    used within the _ For example,
    <UL></UL> unordered list Our archives includes a picture of a <a href=gtpic.gif>
    <OL></OL> ordered list dog of war disguised as a great russel terrier<a>.
    <UL></UL> or <OL></OL> tag How is this different from <img src=gtpic.gif>?

    Ordered List <OL></OL> tag attributes ANCHORED LINKS


    type = 1 / A / a / I / i <A></A>
    indicates the anchor for a piece of text or image that NAME = bookmark
    serves as the origin of the hyperlink - gives a name to the link destination marker
    Filename could be a location and filename or complete URL. - it is used to identify a bookmark destination within an HTML file
    The URL can be another HTML document, a program, an TARGET = frame label
    image, an audio or video file. - identifies the window or frame the link should be sent to
    - when several different browser windows or frames are known
    Kinds of Links to be active this will be ignored by browsers that do not use frames
    To link to a website
    Click here to visit the More on Anchored Links
    <A HREF=http://casweb.upm.edu.ph/cas_web_portal/>CAS SPECIAL TARGETS
    Website</A> _BLANK - link is loaded into a new blank window
    To link to your email _SELF - link is loaded into the frame where link was clicked
    For comments or suggestion send _TOP - link is loaded into the current browser window and all
    <A HREF=mailto:nelyndron@vasia.com>me</A>an email. Thanks! frames disappear
    To link to a webpage _PARENT - link is loaded into the immediate frameset parent
    Click<A HREF=family_pix.html>here</A> to see our family pictures! of this link/document
    To link/navigate within a webpage NOTE: to send email to a specific address use
    <A HREF=#top>top</A> mailto:username@host.com
    Using Images as links
    <A HREF="kangarooBig.jpg"> TABLES IN HTML
    <IMG SRC="kangaroo.jpg" BORDER=0></A> Cell - intersection of row and column
    <A HREF="http://www.animationfactory.com"> <CAPTION></CAPTION> -specifies tables
    <IMG SRC="chemical_reaction.gif" BORDER=0></A> optional caption; always horizontally centered

    IMAGE TABLE ATTRIBUTES


    Image attributes Align = top/center/bottom
    SRC = filename - defines table alignment wrt screen
    - specifies the filename of the image Width = p or %w (in pixel or %width of the page)
    Align = left/center/right - specifies overall width of table
    - specifies how text will be placed next to the image Height = p or %h (in pixel or %height of the page)
    Width = pixels - specifies the overall height of the table
    - specifies the width of the image in pixels BGColor = color string
    <IMG> used to display an image file into your web page Background = imagefile
    Height = pixels - defines image to load on the table
    - specifies the height of the image in pixels Border = n (pixels)
    HSPACE = pixel - defines border thickness
    - denotes horizontal distance of the text beside the image Bordercolor = color
    VSPACE = pixel - defines border color
    - denotes the vertical distance of the text beside the image Cellpadding = p (pixels)
    ALT = text - distance between the frame and cell contents
    - alternative text to be displayed if the image was not loaded Cellspacing = p (pixels)
    - defines thickness of cell frames
    Anchored Link attributes
    HREF = link destination TABLE TAGS
    - specifies the hyperlink reference (the file resource to be accessed, <TR></TR> tags for table row;
    in the form of a filename or URL </TR> required
    <TD></TD> tags for table data (or cell); </TD> ACTION -specifies URL where form will be submitted
    is optional METHOD -specifies how data will be submitted (GET or POST)
    <TH></TH> tags for table header; contents are ENCTYPE -specifies format of data being transmitted
    shown in bold; </TH> is optional NAME -refers to the forms name

    ATTRIBUTES FOR <TR>, <TD>, <TH> FORMS METHOD ATTRIBUTE


    Align = left / center / right Specifies how a forms data will be submitted
    - defines the horizontal alignment of cell contents GET appends the forms data as one long string to the URL specified in
    VAlign = top / middle / bottom / baseline ACTION
    - defines the vertical alignment of cell contents POST sends forms data as a transmission separate from the URL specified by
    BGColor = color string the ACTION attribute
    - may be used to specify color treatment of any
    individual row or cell FORMS ENCTYPE ATTRIBUTE
    Specifies format of data being transmitted
    ATTRIBUTES FOR <TD> & <TH> ONLY Application/x-www-form-urlencoded(default value; data as 1 long string)
    Colspan = n Multipart/form-data(each field as a separate section)
    - specifies the # of columns this cell stretches across Text/plain(if form is to be submitted to an email address)
    Rowspan = n
    - specifies the # of rows this cell stretches down FORM ELEMENTS
    <INPUT></INPUT> used to create the input fields that users interact with
    <SELECT></SELECT> displays choices in a dropdown menu or scrolling
    list
    <TEXTAREA></TEXTAREA> to create a multiline text field usually for
    entering comments

    THE <INPUT> TAG


    Input types could be
    TEXTBOX
    PASSWORD
    RADIO BUTTON
    CHECKBOX
    INTERNAL LINKING RESET BUTTON
    Enables users to jump between locations in the same document SUBMIT BUTTON
    COMMAND BUTTON
    HTML FORMS IMAGE BUTTON
    used whenever you want your readers to fill out order forms, surveys, application HIDDEN
    forms or perform searches
    To process data submitted from a web browser to a server, you use a special HOW DO YOU CREATE A MULTI-LINE TEXT FIELD?
    protocol named Common Gateway Interface (CGI), the oldest and most popular Specify the ff attributes:
    method NAME name of the textarea
    COL number of columns to be displayed in the textarea
    You can use JavaScript to process on the client-side information entered on ROWS number of rows to be displayed in the textarea
    forms before sending them to the server for processing
    Indicated by the use of the <FORM>Tag 4 TYPES OF FORM BUTTONS
    Specify the ff attributes:
    ATTROBITES OF <FORM> TAG NAME name of the textarea
    COL number of columns to be displayed in the textarea *defines the frames interior margins
    ROWS number of rows to be displayed in the textarea BORDER= n (pixels)
    -sets frame border thickness
    HOW DO WE CREATE A RESET BUTTON? BORDERCOLOR= color string
    <INPUT TYPE="reset> -sets frame border color
    NAME attribute is not required for the RESET button because RESET buttons SCROLLING = yes/no/auto (default=auto)
    are never submitted to a CGI script -specifies if scrollbars should be present
    NORESIZE
    HOW DO WE CREATE A COMMAND BUTTON? -presents users from resizing the frame by dragging the border to a new position
    COMMAND button usually performs some routine when clicked. For ex.
    <INPUT TYPE="button" NAME="next VALUE="Next"
    onClick=window.open(gotopage2.html);>
    Here, it is expected to go to another page after it gets clicked

    HOW DOES A SUBMIT BUTTON WORK?


    SUBMIT button submits the contents of the form to the CGI script specified in
    the ACTION attribute of the<FORM>tag

    FRAMES
    <FRAMESET></FRAMESET>
    -replaces the body tag
    -defines the document as frames page
    -divides the browser into frames

    FRAMESET attributes
    Rows = value1, value2,
    Cols = value1, value2,
    value -frame dimension (% size of the page)
    Frameborder -yes/no
    -specifies whether frame border is present or not
    -if used with <FRAMESET> tag, this sets the default value for all frames in the
    frameset
    BORDER = n (pixels)
    -specifies frame border thickness
    BORDERCOLOR = color string
    -set the color of the frame border

    Frames in a Frameset
    <FRAME></FRAME> defines one frame in a FRAMESET
    <FRAME> attributes
    NAME= frame name
    -an optional attribute that gives a name for the individual frame
    SRC= path/filename
    -specifies the name of the document for this frame
    MARGINWIDTH = p (in pixels)
    MARGINHEIGHT= p (in pixels)

    Vous aimerez peut-être aussi