Lesson 2 HTML Tags Web Designing HTML Tags

Embed Size (px)

Text of Lesson 2 HTML Tags Web Designing HTML Tags

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    1/29

    Benedicto B. Balilo Jr.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    2/29

    Developing HTML document

    The HTML element identifies the document as an HTML or XHTML document.

    The HEAD element contains information about thedocument, including its title, scripts used, style definitions,and document descriptions.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    3/29

    The META element is used to embed document metainformation, contains information about the contents

    of the document, such as keywords, authorinformation, and a description of the document. Theprimary advantage is to make it possible for searchengine robots and spiders to identify, catalog, and findthe information in your document.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    4/29

    Other CHILD elements of the HEAD element

    script instructs the browser that the enclosed content is part of ascripting language such as JavaScript (JScript)

    style contains internal cascading style sheets (css) information

    link defines a link. This element functions somewhat like the anchor

    (a) element.

    base defines a documents base Uniform Resource Location (URL) usingthe href attribute.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    5/29

    The BODY element encloses all the elements, attributes, andinformation that you want a users browser to display.

    Sample Web Development

    All the elements, attributes, and information in the document bodygo here

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    6/29

    Applying BASIC Elements

    As you create the content, keep in mind that its exact appearance will vary frombrowser to browser.

    Deprecated elements are those that may be phased out of the next version ofHTML. These elements have been deprecated in HTML 40 and XHTML1.

    font local change to font. Deprecated in favor of CSScenter shorthand for div align=center s or strike strikethrough text. Deprecated in favor o f CSSu underline textapplet java applet. Deprecated in favor of the object element

    basefont base font size. Deprecated in favor of cssdir directory list. Deprecated in favor of unordered lists (the ul element)menu menu list. Deprecated in favor of unordered lists (t he ul element)

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    7/29

    Creating paragraph

    One of the most common elements youll use is the paragraphelement,p, which is appropriate for regular body text.

    A whole paragraph goes right here.

    you can use the align attribute with the paragraph element, which has

    values of left, center, right, and justify.

    A whole paragraph goes right here.

    Other paragraph-formatting elementsaddress used for address and contact informationblockquote used for formatting a quotationpre effective for formatting program code or similar information

    (short for preformatted)

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    8/29

    Creating Headings

    In HTML you can use up to six levels of headings, h1 is the largest of theheadings and h6 is the smallest.

    First Level Heading> Second Level Heading

    By default, all browsers align headings to the left. However, most browserssupport the align attribute.

    First Level Heading> Second Level Heading>

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    9/29

    Creating Lists

    Lists are a great way to provide information in a structured, easy-to-readformat. They help your users spot information easily, and they drawattention to important information.

    Lists come into two varieties: numbered (called ordered lists) and bulleted(callled unordered lists)

    Element Effectol Specifies that the information appear as an ordered

    (numbered list)

    ul Specifies that the information appear as an unordered

    list (bulleted list)li Specifies a line item in either an ordered or an unordered

    list.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    10/29

    bulleted list

    aboutprogramadmissioncontact

    numbered listaboutprogramadmissioncontact

    Numbered liststype=A specifies the number (orletter) with which the list should

    start A, a, I, I or 1 (default)type=a type=I type=i type=1

    Bulleted listsType=disc specifies the bulletshapeType=square Type=circle

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    11/29

    This is the fifty-first item fifty second

    This item was renumbered to be the seventh, using lowercaseroman numerals

    renumbered eight

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    12/29

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    13/29

    Element Effect

    b Applies boldfacecite Indicates citations or referencecode Displays program code, similar to pre

    element

    em Applies emphasis, usually displayedas italicsi Applies italicsstrong Applies stronger emphasis, usually

    displayed as bold text

    sub Formats text as subscriptsup Formats text as superscripttt Applies fixed-width fontu Applies underline, deprecated

    Common Character-Formatting Elements

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    14/29

    Horizontal Rule

    are lines that break up long sections of text, indicate a shift in information, or helpimprove the overall document design. The element has the followingattributes. align, noshade, size and width.

    Specifying Line Breaks

    sometimes you need to break a line in a specific place, but you dont want to start anew paragraph.

    There was an XHTML writer

    Who tried to make paragraphs wider
    He found with a shock

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    15/29

    Adding COLORS

    To specify a background color for your documents, include the bgcolor attributein the opening body element.

    setting the text colors

    setting unvisited link colors

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    16/29

    Specifying Fonts and Font Sizes

    you can use the font element to specify font characteristics for your document,including color, size, and typeface. Attributes of element.

    Element Effect

    color Specifies font color in #RRGGBBface Specifies possible typefaces as a list, in order of

    preference, separated by comma ex. Arial, Verdana size=n Specifies font size on a scale of 1 through 7

    HTML Document

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    17/29

    Adding GRAPHICS

    The purpose of the image element (img) is to include graphic images in the bodyof your web page.

    To make an image float to the left or right side and cause paragraphs to wraparound the image, use align=left or align=right

    Use the height and width attribute to change the height and width of the image

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    18/29

    Creating Hyperlinks

    The element is used to create both external links and internal links (bothof which are otherwise known as hyperlinks).

    External link http://www.yahoo.com http://www.unrealities.com/videos/sample.avi

    Internal link

    absolute URL

    faculty portal

    relative URL

    faculty portal

    http://www.yahoo.com/http://www.unrealities.com/videos/sample.avihttp://www.faculty.byethost17.com/history.htmlhttp://www.faculty.byethost17.com/history.htmlhttp://www.unrealities.com/videos/sample.avihttp://www.yahoo.com/
  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    19/29

    Jumping to a Named Anchor

    you can link to a specific part of a document by adding its name to the URL aftera # character.

    history

    opens a file called history.html and then jumps down to the 142 section. Thesetypes of links will work only if the file has a section with a named anchor

    element.

    section will be displayed when history link clicked

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    20/29

    PHRASE Elements

    are used to mark up small sections of text. Theyre especially useful for readers who use a non-graphical browser, for search engines and indexers that refer to your HTML code to categorize sections of your document for their site outlines,and or other computer programs that need to interact with your web pages toextract data for other useful purposes.

    Element Definition

    acronym Indicate the presence of an abbreviation(WWW, FTP, etc)

    citation Used to indicate that the enclosed text is acitation

    code Used for examples of program code

    keyboard Indicate text that the viewer should typesample Indicate sample output text from a computer

    program var Marks up the variables used in computer

    programs or the parts of a computer command

    chosen by the user

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    21/29

    Dividing a WINDOW with FRAMES

    frames allow multiple HTML or XHTML documents to be presented as

    independent windows within one main browser window. Frameset documentshave a different structure than normal HTML documents. A regular HTML or XHTML document has a head element and a body element, but a framesetdocument has a head element and a frameset element.

    creating frames in column

    creating frames in row

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    22/29

    Dividing a WINDOW with FRAMES cont

    creates web page using frames, arrangement of several frames.

    attributes:cols creates a frame within a vertical column on the page. Its size can be

    specified into three ways: (1) as a percentage cols=25%, (2) in pixels cols=175,and in relative size cols=*.

    rows specifies a number of rows within a frame.frameborder = specifies the presence or the absence of a border around the

    frames.framespacing - specifies an amount of space between frames in pixelsscrolling - specifies whether or not the user of a page with frames can or

    cannot scroll down within each individual frame.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    23/29

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    24/29

    topbar.html

    left.html right.html

    activities

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    25/29

    CREATING FORM

    primary tag to create a form. A form is a front-end user interface on a

    web that is linked to a CGI script of other gateway program.

    To include form into page, you should1. Ask the ISP what are their form limitations and requirements2. Find an appropriate CGI script or other gateway program.

    http://www.worldwidemart.com/scripts http://cgi-resources.com

    eg.

    Text goes here .

    http://www.worldwidemart.com/scriptshttp://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scripts
  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    26/29

    Creating FORM cont

    attributes

    action specifies the URL where the form data is sent to be processed by theCGI script or gateway program

    method specifies how information typed into form. value:GET information will be sent in a URL and the

    sender will get a customized responsePOST information will be sent in the body of the

    submission and the reader will get a short standardized response.target specifies how the response to a form request is displayed

    values:BLANK the response info. Is loaded into a new blank windowPARENT the response info. Is loaded into the parent windowSELF the response info. Is loaded into the same window that the form

    is inTOP the response info. Is loaded into the full window body.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    27/29

    Creating FORM cont

    specifies the type of form control to be inserted in a web page, text

    boxes, buttons, checkboxes and more.

    attributes:align used to wrap text around a form.

    value: bottom, left, middle, right, and topchecked used to set a default checked or selected settingmaxlength specifies the maximum number of characters that can be typed

    into a text box.name specifies the description of the text control that corresponds to the

    gateway program that processes any info. Submitted via the form.size specifies the height and width of a text control in characters.src specifies a filename when image is specified s the TYPE value.

    tabindex permits the user to move from control using the TAB key instead

    of a mouse.

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    28/29

    Creating FORM cont

    type specifies the kind of form control to be displayed.

    value:buttoncheckboxfile a file appears on the page as specified by the SRC attributehiddenimage - image appears as specified by SRCpasswordradioreset clears and resets all controlssubmit submit the informationtext - a blank, single-line text box

  • 8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags

    29/29

    end of presentation 2.

    Thank you