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.


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.


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.


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.


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


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)


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/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>


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.


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


11/29

This is the fifty-first item fifty second

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

renumbered eight


12/29


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


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


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


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


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


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/


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


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


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


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.


23/29


24/29

topbar.html

left.html right.html

activities


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


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.


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.


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


29/29

end of presentation 2.

Thank you

Documents

Lesson 2 HTML Tags Web Designing HTML Tags